Add player controls on mobile

7 files changed, 75 insertions, 3 deletions

diff --git a/client/src/assets/player/bezels/pause-bezel.ts b/client/src/assets/player/bezels/pause-bezel.ts
index 886574380..315964311 100644
--- a/client/src/assets/player/bezels/pause-bezel.ts
+++ b/client/src/assets/player/bezels/pause-bezel.ts
@@ -1,4 +1,5 @@
 import videojs from 'video.js'
+import { isMobile } from '../utils'
 
 function getPauseBezel () {
   return `
@@ -37,6 +38,9 @@ class PauseBezel extends Component {
   constructor (player: videojs.Player, options?: videojs.ComponentOptions) {
     super(player, options)
 
+    // Hide bezels on mobile since we already have our mobile overlay
+    if (isMobile()) return
+
     player.on('pause', (_: any) => {
       if (player.seeking() || player.ended()) return
       this.container.innerHTML = getPauseBezel()
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 }
diff --git a/client/src/assets/player/peertube-player-manager.ts b/client/src/assets/player/peertube-player-manager.ts
index ac8134fa8..6b6c1e581 100644
--- a/client/src/assets/player/peertube-player-manager.ts
+++ b/client/src/assets/player/peertube-player-manager.ts
@@ -21,6 +21,7 @@ import './videojs-components/settings-panel'
 import './videojs-components/settings-panel-child'
 import './videojs-components/theater-button'
 import './playlist/playlist-plugin'
+import './mobile/peertube-mobile-plugin'
 import videojs from 'video.js'
 import { HlsJsEngineSettings } from '@peertube/p2p-media-loader-hlsjs'
 import { PluginsManager } from '@root-helpers/plugins-manager'
@@ -43,7 +44,7 @@ import {
   VideoJSPluginOptions
 } from './peertube-videojs-typings'
 import { TranslationsManager } from './translations-manager'
-import { buildVideoOrPlaylistEmbed, getRtcConfig, isIOS, isSafari } from './utils'
+import { buildVideoOrPlaylistEmbed, getRtcConfig, isIOS, isMobile, isSafari } from './utils'
 
 // Change 'Playback Rate' to 'Speed' (smaller for our settings menu)
 (videojs.getComponent('PlaybackRateMenuButton') as any).prototype.controlText_ = 'Speed'
@@ -189,7 +190,10 @@ export class PeertubePlayerManager {
           videoEmbedTitle: options.common.embedTitle
         })
 
+        if (isMobile()) player.peertubeMobile()
+
         player.bezels()
+
         player.stats({
           videoUUID: options.common.videoUUID,
           videoIsLive: options.common.isLive,
diff --git a/client/src/assets/player/peertube-plugin.ts b/client/src/assets/player/peertube-plugin.ts
index 451b4a161..272f5353d 100644
--- a/client/src/assets/player/peertube-plugin.ts
+++ b/client/src/assets/player/peertube-plugin.ts
@@ -12,6 +12,9 @@ import {
 import { PeerTubePluginOptions, UserWatching, VideoJSCaption } from './peertube-videojs-typings'
 import { isMobile } from './utils'
 import { SettingsButton } from './videojs-components/settings-menu-button'
+import debug from 'debug'
+
+const logger = debug('peertube:player:peertube')
 
 const Plugin = videojs.getPlugin('plugin')
 
@@ -233,7 +236,7 @@ class PeerTubePlugin extends Plugin {
   }
 
   private alterInactivity () {
-    if (this.menuOpened || this.mouseInSettings || this.mouseInControlBar || this.isTouchEnabled()) {
+    if (this.menuOpened || this.mouseInSettings || this.mouseInControlBar) {
       this.setInactivityTimeout(0)
       return
     }
@@ -245,6 +248,8 @@ class PeerTubePlugin extends Plugin {
   private setInactivityTimeout (timeout: number) {
     (this.player as any).cache_.inactivityTimeout = timeout
     this.player.options_.inactivityTimeout = timeout
+
+    logger('Set player inactivity to ' + timeout)
   }
 
   private isTouchEnabled () {
diff --git a/client/src/assets/player/peertube-videojs-typings.ts b/client/src/assets/player/peertube-videojs-typings.ts
index f97d7a208..e4013d815 100644
--- a/client/src/assets/player/peertube-videojs-typings.ts
+++ b/client/src/assets/player/peertube-videojs-typings.ts
@@ -42,6 +42,8 @@ declare module 'video.js' {
 
     bezels (): void
 
+    peertubeMobile (): void
+
     stats (options?: StatsCardOptions): StatsForNerdsPlugin
 
     textTracks (): TextTrackList & {
diff --git a/client/src/assets/player/videojs-components/next-previous-video-button.ts b/client/src/assets/player/videojs-components/next-previous-video-button.ts
index 228231a22..fe17ce2ce 100644
--- a/client/src/assets/player/videojs-components/next-previous-video-button.ts
+++ b/client/src/assets/player/videojs-components/next-previous-video-button.ts
@@ -40,7 +40,6 @@ class NextPreviousVideoButton extends Button {
 
   update () {
     const disabled = this.nextPreviousVideoButtonOptions.isDisabled()
-    console.log(disabled)
 
     if (disabled) this.addClass('vjs-disabled')
     else this.removeClass('vjs-disabled')