Add fast forward/rewind on mobile

[github/Chocobozzz/PeerTube.git] / client / src / assets / player / mobile / peertube-mobile-buttons.ts

diff --git a/client/src/assets/player/mobile/peertube-mobile-buttons.ts b/client/src/assets/player/mobile/peertube-mobile-buttons.ts
index d6f8f35e3bec000a0aefd1ba460380528975588e..94eeec023b31f11fdb4b0ae3c7d1d1641539f568 100644 (file)
--- 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
+}