Improve player progress bar

2 files changed, 56 insertions, 32 deletions

diff --git a/client/src/assets/player/peertube-videojs-plugin.ts b/client/src/assets/player/peertube-videojs-plugin.ts
index e68d79e40..f303301d5 100644
--- a/client/src/assets/player/peertube-videojs-plugin.ts
+++ b/client/src/assets/player/peertube-videojs-plugin.ts
@@ -7,7 +7,7 @@ import { PeertubePluginOptions, VideoJSComponentInterface, videojsUntyped } from
 import {
   getAverageBandwidth,
   getStoredMute,
-  getStoredVolume,
+  getStoredVolume, isMobile,
   saveAverageBandwidth,
   saveMuteInStore,
   saveVolumeInStore,
@@ -366,6 +366,8 @@ class PeerTubePlugin extends Plugin {
   }
 
   private initializePlayer () {
+    if (isMobile()) this.player.addClass('vjs-is-mobile')
+
     this.initSmoothProgressBar()
 
     this.alterInactivity()
diff --git a/client/src/sass/video-js-custom.scss b/client/src/sass/video-js-custom.scss
index 8de0784f9..aeff282eb 100644
--- a/client/src/sass/video-js-custom.scss
+++ b/client/src/sass/video-js-custom.scss
@@ -23,6 +23,8 @@ $setting-transition-easing: ease-out;
 
 $context-menu-width: 350px;
 
+$progress-margin: 10px;
+
 .video-js.vjs-peertube-skin {
   font-size: $font-size;
   color: $primary-foreground-color;
@@ -164,56 +166,61 @@ $context-menu-width: 350px;
       opacity: $primary-foreground-opacity;
     }
 
-    .vjs-slider {
-      background-color: rgba(255, 255, 255, .2);
-      border-radius: 2px;
-      height: 5px;
+    .vjs-progress-control {
+      position: absolute;
+      z-index: 100; // On top of the progress bar
+      bottom: 29px;
+      width: calc(100% - (2 * #{$progress-margin}));
+      margin-left: $progress-margin;
+      height: 14px;
 
-      .vjs-slider-bar {
-        background: $primary-foreground-color;
-      }
-    }
+      .vjs-slider {
+        margin: 0;
+        border-radius: 0;
+        background-color: rgba(255, 255, 255, .2);
+        height: 3px;
+        transition: none;
 
-    .vjs-play-progress {
-      padding-right: 4px;
+        .vjs-play-progress {
+          background: $primary-foreground-color;
 
-      &::before {
-        top: -0.3em;
+          // Not display the circle if the progress is not hovered
+          &::before {
+            opacity: 0;
+            transition: opacity 0.1s ease;
+            font-size: 14px;
 
-        &:hover {
-          top: -0.372em;
-        }
-      }
+            top: -0.3em;
+          }
 
-      .vjs-time-tooltip {
-        display: none;
-      }
-    }
+          .vjs-time-tooltip {
+            display: none;
+          }
+        }
 
-    .vjs-load-progress {
-      &, & div {
-        background: rgba(255, 255, 255, .2);
+        .vjs-load-progress {
+          &, & div {
+            background: rgba(255, 255, 255, .2);
+          }
+        }
       }
     }
 
-    .vjs-progress-control {
-      bottom: 34px;
-      width: 100%;
-      position: absolute;
+    .vjs-progress-control:hover .vjs-slider,
+    .vjs-slider.vjs-sliding {
       height: 5px;
 
-      .vjs-progress-holder {
-        margin: 0;
-        border-radius: 0;
+      .vjs-play-progress::before {
+        opacity: 1;
       }
     }
 
+
     .vjs-play-control {
       @include disable-outline;
 
       cursor: pointer;
       font-size: $font-size;
-      padding: 0 17px;
       margin-right: 5px;
     }
 
@@ -404,6 +411,7 @@ $context-menu-width: 350px;
       @include disable-outline;
 
       width: 37px;
+      margin-right: 11px;
 
       .vjs-icon-placeholder {
         display: inline-block;
@@ -818,4 +826,18 @@ $context-menu-width: 350px;
       background-color: rgba(255, 255, 255, 0.2);
     }
   }
+}
+
+/* Special mobile style */
+
+.video-js.vjs-peertube-skin.vjs-is-mobile {
+  .vjs-control-bar {
+    .vjs-progress-control .vjs-slider .vjs-play-progress {
+      // Always display the circle on mobile
+      &::before {
+        margin-top: -1px;
+        opacity: 1;
+      }
+    }
+  }
 }
\ No newline at end of file