Cleaner videojs control bar implementation

6 files changed, 83 insertions, 42 deletions

diff --git a/client/src/app/videos/+video-watch/video-watch.component.ts b/client/src/app/videos/+video-watch/video-watch.component.ts
index b1dd3d10b..2924f1622 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/videos/+video-watch/video-watch.component.ts
@@ -346,13 +346,35 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
           peertube: {
             videoFiles: this.video.files,
             playerElement: this.playerElement,
-            peerTubeLink: false,
             videoViewUrl: this.videoService.getVideoViewUrl(this.video.uuid),
             videoDuration: this.video.duration
           },
           hotkeys: {
             enableVolumeScroll: false
           }
+        },
+        controlBar: {
+          children: [
+            'playToggle',
+            'currentTimeDisplay',
+            'timeDivider',
+            'durationDisplay',
+            'liveDisplay',
+
+            'flexibleWidthSpacer',
+            'progressControl',
+
+            'webTorrentButton',
+
+            'playbackRateMenuButton',
+
+            'muteToggle',
+            'volumeControl',
+
+            'resolutionMenuButton',
+
+            'fullscreenToggle'
+          ]
         }
       }
 
diff --git a/client/src/assets/player/peertube-videojs-plugin.ts b/client/src/assets/player/peertube-videojs-plugin.ts
index 3b366ec9b..86cb858e2 100644
--- a/client/src/assets/player/peertube-videojs-plugin.ts
+++ b/client/src/assets/player/peertube-videojs-plugin.ts
@@ -22,7 +22,6 @@ interface VideoJSComponentInterface {
 type PeertubePluginOptions = {
   videoFiles: VideoFile[]
   playerElement: HTMLVideoElement
-  peerTubeLink: boolean
   videoViewUrl: string
   videoDuration: number
 }
@@ -120,7 +119,7 @@ class ResolutionMenuButton extends MenuButton {
 MenuButton.registerComponent('ResolutionMenuButton', ResolutionMenuButton)
 
 const Button: VideoJSComponentInterface = videojsUntyped.getComponent('Button')
-class PeertubeLinkButton extends Button {
+class PeerTubeLinkButton extends Button {
 
   createEl () {
     const link = document.createElement('a')
@@ -141,7 +140,7 @@ class PeertubeLinkButton extends Button {
     this.parentNode.removeChild(this)
   }
 }
-Button.registerComponent('PeerTubeLinkButton', PeertubeLinkButton)
+Button.registerComponent('PeerTubeLinkButton', PeerTubeLinkButton)
 
 class WebTorrentButton extends Button {
   createEl () {
@@ -392,20 +391,6 @@ class PeerTubePlugin extends Plugin {
   }
 
   private initializePlayer (options: PeertubePluginOptions) {
-    const controlBar = this.player.controlBar
-
-    const menuButton = new ResolutionMenuButton(this.player, options)
-    const fullscreenElement = controlBar.fullscreenToggle.el()
-    controlBar.resolutionSwitcher = controlBar.el().insertBefore(menuButton.el(), fullscreenElement)
-
-    if (options.peerTubeLink === true) {
-      const peerTubeLinkButton = new PeertubeLinkButton(this.player)
-      controlBar.peerTubeLink = controlBar.el().insertBefore(peerTubeLinkButton.el(), fullscreenElement)
-    }
-
-    const webTorrentButton = new WebTorrentButton(this.player)
-    controlBar.webTorrent = controlBar.el().insertBefore(webTorrentButton.el(), controlBar.progressControl.el())
-
     if (this.autoplay === true) {
       this.updateVideoFile(undefined, () => this.player.play())
     } else {
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index eb3b1d283..e1b1bb32c 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -7,6 +7,15 @@
   }
 }
 
+@mixin disable-outline {
+  outline: none;
+
+  &::-moz-focus-inner {
+    border: 0;
+    padding: 0
+  }
+}
+
 @mixin peertube-input-text($width) {
   display: inline-block;
   height: $button-height;
diff --git a/client/src/sass/video-js-custom.scss b/client/src/sass/video-js-custom.scss
index 3dfad5ff6..88af9cbc5 100644
--- a/client/src/sass/video-js-custom.scss
+++ b/client/src/sass/video-js-custom.scss
@@ -1,4 +1,6 @@
-@charset "utf-8";// Thanks: https://github.com/zanechua/videojs-sublime-inspired-skin
+@import '_variables';
+@import '_mixins';
+
 $primary-foreground-color: #fff;
 $primary-background-color: #000;
 $font-size: 13px;
@@ -139,7 +141,8 @@ $control-bar-height: 34px;
     }
 
     .vjs-play-control {
-      outline: 0;
+      @include disable-outline;
+
       font-size: $font-size;
       padding: 0 17px;
       margin-right: 5px;
@@ -220,16 +223,24 @@ $control-bar-height: 34px;
 
     .vjs-playback-rate {
       font-size: 10px;
-      margin-right: 50px;
+      width: 37px !important;
 
       .vjs-playback-rate-value {
         font-size: 13px;
         line-height: $control-bar-height;
       }
+
+      .vjs-menu .vjs-menu-content {
+        width: 37px !important;
+      }
     }
 
     .vjs-mute-control {
-      outline: 0;
+      @include disable-outline;
+
+      line-height: $control-bar-height;
+      padding: 0;
+      width: 30px;
 
       .vjs-icon-placeholder {
         display: inline-block;
@@ -250,12 +261,9 @@ $control-bar-height: 34px;
       }
     }
 
-    .vjs-volume-menu-button,
-    .vjs-volume-panel {
-      width: 6em;
-      position: absolute;
-      right: 0;
-      margin-right: 65px;
+    .vjs-volume-control {
+      width: 30px;
+      margin: 0;
     }
 
     .vjs-volume-bar {
@@ -313,8 +321,9 @@ $control-bar-height: 34px;
     }
 
     .vjs-fullscreen-control {
+      @include disable-outline;
+
       width: 37px;
-      outline: 0;
 
       .vjs-icon-placeholder {
         display: inline-block;
@@ -339,7 +348,7 @@ $control-bar-height: 34px;
         line-height: $control-bar-height;
         position: absolute;
         top: 0;
-        left: 4px;
+        left: 0;
         width: 100%;
         height: 100%;
         text-align: center;
@@ -348,16 +357,16 @@ $control-bar-height: 34px;
       }
 
       .vjs-resolution-button {
-        outline: 0 !important;
+        @include disable-outline;
       }
 
       .vjs-menu {
         top: 20px;
+        left: 0;
 
         .vjs-menu-content {
           width: 50px;
-          left: 50%; /* Center the menu, in it's parent */
-          margin-left: -21px;
+          bottom: 20px;
         }
 
         li {
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 () {