Improve player

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

2 files changed, 16 insertions, 62 deletions

diff --git a/client/src/standalone/videos/embed.scss b/client/src/standalone/videos/embed.scss
index 9fa868c9b..b015c6736 100644
--- a/client/src/standalone/videos/embed.scss
+++ b/client/src/standalone/videos/embed.scss
@@ -14,8 +14,6 @@ html, body {
   margin: 0;
 }
 
-
-
 .video-js.vjs-peertube-skin {
   width: 100%;
   height: 100%;
@@ -25,22 +23,6 @@ html, body {
     background-size: 100% auto;
   }
 
-  .vjs-peertube-link {
-    @include disable-outline;
-
-    color: #fff;
-    text-decoration: none;
-    font-size: $font-size;
-    line-height: $control-bar-height;
-    transition: all .4s;
-    font-weight: $font-semibold;
-    padding-right: 5px;
-  }
-
-  .vjs-peertube-link:hover {
-    text-shadow: 0 0 1em #fff;
-  }
-
   @media screen and (max-width: 350px) {
     .vjs-play-control {
       padding: 0 5px !important;
diff --git a/client/src/standalone/videos/embed.ts b/client/src/standalone/videos/embed.ts
index 08f2955cf..f2ac5dca6 100644
--- a/client/src/standalone/videos/embed.ts
+++ b/client/src/standalone/videos/embed.ts
@@ -1,10 +1,9 @@
 import './embed.scss'
 
 import * as videojs from 'video.js'
-import 'videojs-hotkeys'
-import '../../assets/player/peertube-videojs-plugin'
-import 'videojs-dock/dist/videojs-dock.es.js'
+
 import { VideoDetails } from '../../../../shared'
+import { getVideojsOptions } from '../../assets/player/peertube-player'
 
 function getVideoUrl (id: string) {
   return window.location.origin + '/api/v1/videos/' + id
@@ -20,9 +19,10 @@ const videoId = urlParts[urlParts.length - 1]
 
 loadVideoInfo(videoId)
   .then(videoInfo => {
-    const videoElement = document.getElementById('video-container') as HTMLVideoElement
-    const previewUrl = window.location.origin + videoInfo.previewPath
-    videoElement.poster = previewUrl
+    const videoContainerId = 'video-container'
+
+    const videoElement = document.getElementById(videoContainerId) as HTMLVideoElement
+    videoElement.poster = window.location.origin + videoInfo.previewPath
 
     let autoplay = false
 
@@ -33,45 +33,17 @@ loadVideoInfo(videoId)
       console.error('Cannot get params from URL.', err)
     }
 
-    const videojsOptions = {
-      controls: true,
+    const videojsOptions = getVideojsOptions({
       autoplay,
-      inactivityTimeout: 500,
-      plugins: {
-        peertube: {
-          videoFiles: videoInfo.files,
-          playerElement: videoElement,
-          videoViewUrl: getVideoUrl(videoId) + '/views',
-          videoDuration: videoInfo.duration
-        },
-        hotkeys: {
-          enableVolumeScroll: false
-        }
-      },
-      controlBar: {
-        children: [
-          'playToggle',
-          'currentTimeDisplay',
-          'timeDivider',
-          'durationDisplay',
-          'liveDisplay',
-
-          'flexibleWidthSpacer',
-          'progressControl',
-
-          'webTorrentButton',
-
-          'muteToggle',
-          'volumeControl',
-
-          'resolutionMenuButton',
-          'peerTubeLinkButton',
-
-          'fullscreenToggle'
-        ]
-      }
-    }
-    videojs('video-container', videojsOptions, function () {
+      inactivityTimeout: 1500,
+      videoViewUrl: getVideoUrl(videoId) + '/views',
+      playerElement: videoElement,
+      videoFiles: videoInfo.files,
+      videoDuration: videoInfo.duration,
+      enableHotkeys: true,
+      peertubeLink: true
+    })
+    videojs(videoContainerId, videojsOptions, function () {
       const player = this
 
       player.dock({