Cleaner videojs control bar implementation

2 files changed, 25 insertions, 9 deletions

diff --git a/client/src/standalone/videos/embed.scss b/client/src/standalone/videos/embed.scss
index fbc0e33a0..9fa868c9b 100644
--- a/client/src/standalone/videos/embed.scss
+++ b/client/src/standalone/videos/embed.scss
@@ -26,25 +26,21 @@ html, body {
   }
 
   .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;
-    margin-right: 3px;
-    padding: 0 5px;
+    padding-right: 5px;
   }
 
   .vjs-peertube-link:hover {
     text-shadow: 0 0 1em #fff;
   }
 
-  // Fix volume panel because we added a new component (PeerTube link)
-  .vjs-volume-panel {
-    margin-right: 137px !important;
-  }
-
   @media screen and (max-width: 350px) {
     .vjs-play-control {
       padding: 0 5px !important;
@@ -57,7 +53,6 @@ html, body {
 
     .vjs-volume-panel {
       width: 26px !important;
-      margin-right: 140px !important;
     }
 
     .vjs-peertube-link {
diff --git a/client/src/standalone/videos/embed.ts b/client/src/standalone/videos/embed.ts
index bb6baf7f0..739ed5f45 100644
--- a/client/src/standalone/videos/embed.ts
+++ b/client/src/standalone/videos/embed.ts
@@ -31,13 +31,34 @@ loadVideoInfo(videoId)
         peertube: {
           videoFiles: videoInfo.files,
           playerElement: videoElement,
-          peerTubeLink: true,
           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 () {