From f5fcd9f72514d6c4044a9c904d0ce610033bcba5 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Tue, 28 Jan 2020 17:29:50 +0100 Subject: Correctly type videojs player --- client/src/assets/player/upnext/end-card.ts | 155 +++++++++++++++++++++++ client/src/assets/player/upnext/upnext-plugin.ts | 155 +---------------------- 2 files changed, 161 insertions(+), 149 deletions(-) create mode 100644 client/src/assets/player/upnext/end-card.ts (limited to 'client/src/assets/player/upnext') diff --git a/client/src/assets/player/upnext/end-card.ts b/client/src/assets/player/upnext/end-card.ts new file mode 100644 index 000000000..d121a83a9 --- /dev/null +++ b/client/src/assets/player/upnext/end-card.ts @@ -0,0 +1,155 @@ +import videojs, { VideoJsPlayer } from 'video.js' + +function getMainTemplate (options: any) { + return ` +
+ ${options.headText} +
+
+
+ + + + +
+ + + + + ${options.suspendedText} + + ` +} + +export interface EndCardOptions extends videojs.ComponentOptions { + next: Function, + getTitle: () => string + timeout: number + cancelText: string + headText: string + suspendedText: string + condition: () => boolean + suspended: () => boolean +} + +const Component = videojs.getComponent('Component') +class EndCard extends Component { + options_: EndCardOptions + + dashOffsetTotal = 586 + dashOffsetStart = 293 + interval = 50 + upNextEvents = new videojs.EventTarget() + ticks = 0 + totalTicks: number + + container: HTMLDivElement + title: HTMLElement + autoplayRing: HTMLElement + cancelButton: HTMLElement + suspendedMessage: HTMLElement + nextButton: HTMLElement + + constructor (player: VideoJsPlayer, options: EndCardOptions) { + super(player, options) + + this.totalTicks = this.options_.timeout / this.interval + + player.on('ended', (_: any) => { + if (!this.options_.condition()) return + + player.addClass('vjs-upnext--showing') + this.showCard((canceled: boolean) => { + player.removeClass('vjs-upnext--showing') + this.container.style.display = 'none' + if (!canceled) { + this.options_.next() + } + }) + }) + + player.on('playing', () => { + this.upNextEvents.trigger('playing') + }) + } + + createEl () { + const container = super.createEl('div', { + className: 'vjs-upnext-content', + innerHTML: getMainTemplate(this.options_) + }) as HTMLDivElement + + this.container = container + container.style.display = 'none' + + this.autoplayRing = container.getElementsByClassName('vjs-upnext-svg-autoplay-ring')[0] as HTMLElement + this.title = container.getElementsByClassName('vjs-upnext-title')[0] as HTMLElement + this.cancelButton = container.getElementsByClassName('vjs-upnext-cancel-button')[0] as HTMLElement + this.suspendedMessage = container.getElementsByClassName('vjs-upnext-suspended')[0] as HTMLElement + this.nextButton = container.getElementsByClassName('vjs-upnext-autoplay-icon')[0] as HTMLElement + + this.cancelButton.onclick = () => { + this.upNextEvents.trigger('cancel') + } + + this.nextButton.onclick = () => { + this.upNextEvents.trigger('next') + } + + return container + } + + showCard (cb: Function) { + let timeout: any + + this.autoplayRing.setAttribute('stroke-dasharray', '' + this.dashOffsetStart) + this.autoplayRing.setAttribute('stroke-dashoffset', '' + -this.dashOffsetStart) + + this.title.innerHTML = this.options_.getTitle() + + this.upNextEvents.one('cancel', () => { + clearTimeout(timeout) + cb(true) + }) + + this.upNextEvents.one('playing', () => { + clearTimeout(timeout) + cb(true) + }) + + this.upNextEvents.one('next', () => { + clearTimeout(timeout) + cb(false) + }) + + const goToPercent = (percent: number) => { + const newOffset = Math.max(-this.dashOffsetTotal, - this.dashOffsetStart - percent * this.dashOffsetTotal / 2 / 100) + this.autoplayRing.setAttribute('stroke-dashoffset', '' + newOffset) + } + + const tick = () => { + goToPercent((this.ticks++) * 100 / this.totalTicks) + } + + const update = () => { + if (this.options_.suspended()) { + this.suspendedMessage.innerText = this.options_.suspendedText + goToPercent(0) + this.ticks = 0 + timeout = setTimeout(update.bind(this), 300) // checks once supsended can be a bit longer + } else if (this.ticks >= this.totalTicks) { + clearTimeout(timeout) + cb(false) + } else { + this.suspendedMessage.innerText = '' + tick() + timeout = setTimeout(update.bind(this), this.interval) + } + } + + this.container.style.display = 'block' + timeout = setTimeout(update.bind(this), this.interval) + } +} + +videojs.registerComponent('EndCard', EndCard) diff --git a/client/src/assets/player/upnext/upnext-plugin.ts b/client/src/assets/player/upnext/upnext-plugin.ts index a3747b25f..6512fec2c 100644 --- a/client/src/assets/player/upnext/upnext-plugin.ts +++ b/client/src/assets/player/upnext/upnext-plugin.ts @@ -1,154 +1,11 @@ -// @ts-ignore -import * as videojs from 'video.js' -import { VideoJSComponentInterface } from '../peertube-videojs-typings' +import videojs, { VideoJsPlayer } from 'video.js' +import { EndCardOptions } from './end-card' -function getMainTemplate (options: any) { - return ` -
- ${options.headText} -
-
-
- - - - -
- - - - - ${options.suspendedText} - - ` -} - -// @ts-ignore-start -const Component = videojs.getComponent('Component') -class EndCard extends Component { - options_: any - dashOffsetTotal = 586 - dashOffsetStart = 293 - interval = 50 - upNextEvents = new videojs.EventTarget() - ticks = 0 - totalTicks: number - - container: HTMLElement - title: HTMLElement - autoplayRing: HTMLElement - cancelButton: HTMLElement - suspendedMessage: HTMLElement - nextButton: HTMLElement - - constructor (player: videojs.Player, options: any) { - super(player, options) - - this.totalTicks = this.options_.timeout / this.interval - - player.on('ended', (_: any) => { - if (!this.options_.condition()) return - - player.addClass('vjs-upnext--showing') - this.showCard((canceled: boolean) => { - player.removeClass('vjs-upnext--showing') - this.container.style.display = 'none' - if (!canceled) { - this.options_.next() - } - }) - }) - - player.on('playing', () => { - this.upNextEvents.trigger('playing') - }) - } - - createEl () { - const container = super.createEl('div', { - className: 'vjs-upnext-content', - innerHTML: getMainTemplate(this.options_) - }) - - this.container = container - container.style.display = 'none' - - this.autoplayRing = container.getElementsByClassName('vjs-upnext-svg-autoplay-ring')[0] - this.title = container.getElementsByClassName('vjs-upnext-title')[0] - this.cancelButton = container.getElementsByClassName('vjs-upnext-cancel-button')[0] - this.suspendedMessage = container.getElementsByClassName('vjs-upnext-suspended')[0] - this.nextButton = container.getElementsByClassName('vjs-upnext-autoplay-icon')[0] - - this.cancelButton.onclick = () => { - this.upNextEvents.trigger('cancel') - } - - this.nextButton.onclick = () => { - this.upNextEvents.trigger('next') - } - - return container - } +const Plugin = videojs.getPlugin('plugin') - showCard (cb: Function) { - let timeout: any - - this.autoplayRing.setAttribute('stroke-dasharray', '' + this.dashOffsetStart) - this.autoplayRing.setAttribute('stroke-dashoffset', '' + -this.dashOffsetStart) - - this.title.innerHTML = this.options_.getTitle() - - this.upNextEvents.one('cancel', () => { - clearTimeout(timeout) - cb(true) - }) - - this.upNextEvents.one('playing', () => { - clearTimeout(timeout) - cb(true) - }) - - this.upNextEvents.one('next', () => { - clearTimeout(timeout) - cb(false) - }) - - const goToPercent = (percent: number) => { - const newOffset = Math.max(-this.dashOffsetTotal, - this.dashOffsetStart - percent * this.dashOffsetTotal / 2 / 100) - this.autoplayRing.setAttribute('stroke-dashoffset', '' + newOffset) - } - - const tick = () => { - goToPercent((this.ticks++) * 100 / this.totalTicks) - } - - const update = () => { - if (this.options_.suspended()) { - this.suspendedMessage.innerText = this.options_.suspendedText - goToPercent(0) - this.ticks = 0 - timeout = setTimeout(update.bind(this), 300) // checks once supsended can be a bit longer - } else if (this.ticks >= this.totalTicks) { - clearTimeout(timeout) - cb(false) - } else { - this.suspendedMessage.innerText = '' - tick() - timeout = setTimeout(update.bind(this), this.interval) - } - } - - this.container.style.display = 'block' - timeout = setTimeout(update.bind(this), this.interval) - } -} -// @ts-ignore-end - -videojs.registerComponent('EndCard', EndCard) - -const Plugin: VideoJSComponentInterface = videojs.getPlugin('plugin') class UpNextPlugin extends Plugin { - constructor (player: videojs.Player, options: any = {}) { + + constructor (player: VideoJsPlayer, options: Partial = {}) { const settings = { next: options.next, getTitle: options.getTitle, @@ -160,7 +17,7 @@ class UpNextPlugin extends Plugin { suspended: options.suspended } - super(player, settings) + super(player) this.player.ready(() => { player.addClass('vjs-upnext') -- cgit v1.2.3