Add storyboard support

2 files changed, 40 insertions, 0 deletions

diff --git a/client/src/sass/player/control-bar.scss b/client/src/sass/player/control-bar.scss
index 96b3adf66..02d5fa169 100644
--- a/client/src/sass/player/control-bar.scss
+++ b/client/src/sass/player/control-bar.scss
@@ -3,6 +3,20 @@
 @use '_mixins' as *;
 @use './_player-variables' as *;
 
+// Like the time tooltip
+.video-js .vjs-progress-holder .vjs-storyboard-sprite-placeholder {
+  display: none;
+}
+
+.video-js .vjs-progress-control:hover .vjs-storyboard-sprite-placeholder,
+.video-js .vjs-progress-control:hover .vjs-progress-holder:focus .vjs-storyboard-sprite-placeholder {
+  display: block;
+
+  // Ensure that we maintain a font-size of ~10px.
+  font-size: 0.6em;
+  visibility: visible;
+}
+
 .video-js.vjs-peertube-skin .vjs-control-bar {
   z-index: 100;
 
@@ -79,6 +93,7 @@
           top: -0.3em;
         }
 
+        // Only used on mobile
         .vjs-time-tooltip {
           display: none;
         }
diff --git a/client/src/sass/player/mobile.scss b/client/src/sass/player/mobile.scss
index 84d7a00f1..d150c54ee 100644
--- a/client/src/sass/player/mobile.scss
+++ b/client/src/sass/player/mobile.scss
@@ -6,6 +6,31 @@
 /* Special mobile style */
 
 .video-js.vjs-peertube-skin.vjs-is-mobile {
+  // No hover means we can't display the storyboard/time tooltip on mouse hover
+  // Use the time tooltip in progress control instead
+  .vjs-mouse-display {
+    display: none !important;
+  }
+
+  .vjs-storyboard-sprite-placeholder {
+    display: none;
+  }
+
+  .vjs-progress-control .vjs-sliding {
+
+    .vjs-time-tooltip,
+    .vjs-storyboard-sprite-placeholder {
+      display: block !important;
+
+      visibility: visible !important;
+    }
+
+    .vjs-time-tooltip {
+      color: #fff;
+      background-color: rgba(0, 0, 0, 0.8);
+    }
+  }
+
   .vjs-control-bar {
     .vjs-progress-control .vjs-slider .vjs-play-progress {
       // Always display the circle on mobile