Add player controls on mobile

2 files changed, 58 insertions, 0 deletions

diff --git a/client/src/assets/player/mobile/peertube-mobile-buttons.ts b/client/src/assets/player/mobile/peertube-mobile-buttons.ts
new file mode 100644
index 000000000..d6f8f35e3
--- /dev/null
+++ b/client/src/assets/player/mobile/peertube-mobile-buttons.ts
@@ -0,0 +1,42 @@
+import videojs from 'video.js'
+
+import debug from 'debug'
+
+const logger = debug('peertube:player:mobile')
+
+const Component = videojs.getComponent('Component')
+class PeerTubeMobileButtons extends Component {
+
+  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
+
+    mainButton.addEventListener('click', e => {
+      e.stopPropagation()
+
+      if (this.player_.paused() || this.player_.ended()) {
+        this.player_.play()
+        return
+      }
+
+      this.player_.pause()
+    })
+
+    container.appendChild(mainButton)
+
+    return container
+  }
+}
+
+videojs.registerComponent('PeerTubeMobileButtons', PeerTubeMobileButtons)
diff --git a/client/src/assets/player/mobile/peertube-mobile-plugin.ts b/client/src/assets/player/mobile/peertube-mobile-plugin.ts
new file mode 100644
index 000000000..b3834e20d
--- /dev/null
+++ b/client/src/assets/player/mobile/peertube-mobile-plugin.ts
@@ -0,0 +1,16 @@
+import videojs from 'video.js'
+import './peertube-mobile-buttons'
+
+const Plugin = videojs.getPlugin('plugin')
+
+class PeerTubeMobilePlugin extends Plugin {
+
+  constructor (player: videojs.Player, options: videojs.PlayerOptions) {
+    super(player, options)
+
+    player.addChild('PeerTubeMobileButtons')
+  }
+}
+
+videojs.registerPlugin('peertubeMobile', PeerTubeMobilePlugin)
+export { PeerTubeMobilePlugin }