Improve player

Add a settings dialog based on the work of Yanko Shterev (@yshterev):
https://github.com/yshterev/videojs-settings-menu. Thanks!

1 files changed, 96 insertions, 0 deletions

diff --git a/client/src/assets/player/peertube-player.ts b/client/src/assets/player/peertube-player.ts
new file mode 100644
index 000000000..4ae3e71bd
--- /dev/null
+++ b/client/src/assets/player/peertube-player.ts
@@ -0,0 +1,96 @@
+import { VideoFile } from '../../../../shared/models/videos'
+
+import 'videojs-hotkeys'
+import 'videojs-dock/dist/videojs-dock.es.js'
+import './peertube-link-button'
+import './resolution-menu-button'
+import './settings-menu-button'
+import './webtorrent-info-button'
+import './peertube-videojs-plugin'
+import { videojsUntyped } from './peertube-videojs-typings'
+
+// Change 'Playback Rate' to 'Speed' (smaller for our settings menu)
+videojsUntyped.getComponent('PlaybackRateMenuButton').prototype.controlText_ = 'Speed'
+
+function getVideojsOptions (options: {
+  autoplay: boolean,
+  playerElement: HTMLVideoElement,
+  videoViewUrl: string,
+  videoDuration: number,
+  videoFiles: VideoFile[],
+  enableHotkeys: boolean,
+  inactivityTimeout: number,
+  peertubeLink: boolean
+}) {
+  const videojsOptions = {
+    controls: true,
+    autoplay: options.autoplay,
+    inactivityTimeout: options.inactivityTimeout,
+    playbackRates: [ 0.5, 1, 1.5, 2 ],
+    plugins: {
+      peertube: {
+        videoFiles: options.videoFiles,
+        playerElement: options.playerElement,
+        videoViewUrl: options.videoViewUrl,
+        videoDuration: options.videoDuration
+      }
+    },
+    controlBar: {
+      children: getControlBarChildren(options)
+    }
+  }
+
+  if (options.enableHotkeys === true) {
+    Object.assign(videojsOptions.plugins, {
+      hotkeys: {
+        enableVolumeScroll: false
+      }
+    })
+  }
+
+  return videojsOptions
+}
+
+function getControlBarChildren (options: {
+  peertubeLink: boolean
+}) {
+  const children = {
+    'playToggle': {},
+    'currentTimeDisplay': {},
+    'timeDivider': {},
+    'durationDisplay': {},
+    'liveDisplay': {},
+
+    'flexibleWidthSpacer': {},
+    'progressControl': {},
+
+    'webTorrentButton': {},
+
+    'muteToggle': {},
+    'volumeControl': {},
+
+    'settingsButton': {
+      setup: {
+        maxHeightOffset: 40
+      },
+      entries: [
+        'resolutionMenuButton',
+        'playbackRateMenuButton'
+      ]
+    }
+  }
+
+  if (options.peertubeLink === true) {
+    Object.assign(children, {
+      'peerTubeLinkButton': {}
+    })
+  }
+
+  Object.assign(children, {
+    'fullscreenToggle': {}
+  })
+
+  return children
+}
+
+export { getVideojsOptions }