X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fassets%2Fplayer%2Fmobile%2Fpeertube-mobile-buttons.ts;h=94eeec023b31f11fdb4b0ae3c7d1d1641539f568;hb=2dd0a8a8fd2fc85180fa3b45c5a6a56d07320ed3;hp=d6f8f35e3bec000a0aefd1ba460380528975588e;hpb=e98ef69d1c8d4e39e45a52b04b3abf5fd1af3b2c;p=github%2FChocobozzz%2FPeerTube.git diff --git a/client/src/assets/player/mobile/peertube-mobile-buttons.ts b/client/src/assets/player/mobile/peertube-mobile-buttons.ts index d6f8f35e3..94eeec023 100644 --- a/client/src/assets/player/mobile/peertube-mobile-buttons.ts +++ b/client/src/assets/player/mobile/peertube-mobile-buttons.ts @@ -1,23 +1,18 @@ import videojs from 'video.js' -import debug from 'debug' - -const logger = debug('peertube:player:mobile') - const Component = videojs.getComponent('Component') class PeerTubeMobileButtons extends Component { + private rewind: Element + private forward: Element + private rewindText: Element + private forwardText: Element + createEl () { const container = super.createEl('div', { className: 'vjs-mobile-buttons-overlay' }) as HTMLDivElement - container.addEventListener('click', () => { - logger('Set user as inactive') - - this.player_.userActive(false) - }) - const mainButton = super.createEl('div', { className: 'main-button' }) as HTMLDivElement @@ -33,10 +28,67 @@ class PeerTubeMobileButtons extends Component { this.player_.pause() }) + this.rewind = super.createEl('div', { className: 'rewind-button vjs-hidden' }) + this.forward = super.createEl('div', { className: 'forward-button vjs-hidden' }) + + for (let i = 0; i < 3; i++) { + this.rewind.appendChild(super.createEl('span', { className: 'icon' })) + this.forward.appendChild(super.createEl('span', { className: 'icon' })) + } + + this.rewindText = this.rewind.appendChild(super.createEl('div', { className: 'text' })) + this.forwardText = this.forward.appendChild(super.createEl('div', { className: 'text' })) + + container.appendChild(this.rewind) container.appendChild(mainButton) + container.appendChild(this.forward) return container } + + displayFastSeek (amount: number) { + if (amount === 0) { + this.hideRewind() + this.hideForward() + return + } + + if (amount > 0) { + this.hideRewind() + this.displayForward(amount) + return + } + + if (amount < 0) { + this.hideForward() + this.displayRewind(amount) + return + } + } + + private hideRewind () { + this.rewind.classList.add('vjs-hidden') + this.rewindText.textContent = '' + } + + private displayRewind (amount: number) { + this.rewind.classList.remove('vjs-hidden') + this.rewindText.textContent = this.player().localize('{1} seconds', [ amount + '' ]) + } + + private hideForward () { + this.forward.classList.add('vjs-hidden') + this.forwardText.textContent = '' + } + + private displayForward (amount: number) { + this.forward.classList.remove('vjs-hidden') + this.forwardText.textContent = this.player().localize('{1} seconds', [ amount + '' ]) + } } videojs.registerComponent('PeerTubeMobileButtons', PeerTubeMobileButtons) + +export { + PeerTubeMobileButtons +}