Preview image thumbnails (#1514)

working example

use my forked package

touchups to presentation

Make progress bar thumbnail sprite pixel perfect

add vtt path

fix progress bar a bit

add a black background

use odysee team package

fix two issues for merge

package.json

@@ -81,7 +81,8 @@
     "videojs-contrib-ads": "^6.9.0",
     "videojs-ima": "^1.11.0",
     "videojs-ima-player": "^0.5.6",
-    "videojs-logo": "^2.1.4"
+    "videojs-logo": "^2.1.4",
+    "videojs-vtt-thumbnails": "https://github.com/OdyseeTeam/videojs-vtt-thumbnails"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0",

ui/component/viewers/videoViewer/internal/videojs.jsx

@@ -1,6 +1,7 @@
 // @flow
 import 'videojs-contrib-ads'; // must be loaded in this order
 import 'videojs-ima'; // loads directly after contrib-ads
+import 'videojs-vtt-thumbnails';
 import 'video.js/dist/alt/video-js-cdn.min.css';
 import './plugins/videojs-mobile-ui/plugin';
 import '@silvermine/videojs-chromecast/dist/silvermine-videojs-chromecast.css';
@@ -392,6 +393,14 @@ export default React.memo<Props>(function VideoJs(props: Props) {
         if (response && response.redirected && response.url && response.url.endsWith('m3u8')) {
           vjsPlayer.claimSrcVhs = { type: 'application/x-mpegURL', src: response.url };
           vjsPlayer.src(vjsPlayer.claimSrcVhs);
+
+          const trimmedPath = response.url.substring(0, response.url.lastIndexOf('/'));
+          const thumbnailPath = trimmedPath + '/stream_sprite.vtt';
+
+          vjsPlayer.vttThumbnails({
+            src: thumbnailPath,
+            showTimestamp: true,
+          });
         } else {
           vjsPlayer.src(vjsPlayer.claimSrcOriginal);
         }

ui/scss/component/_videojs.scss

@@ -36,11 +36,24 @@ $control-bar-icon-size: 0.8rem;
   // Progress Bar
   .vjs-progress-control.vjs-control {
     position: absolute;
-    display: flex;
+    display: block;
     align-items: center;
     width: 100%;
     height: 1rem;
     bottom: 90%;
+    margin: 1px 23px !important;
+    max-width: 96.5%;
+
+    @media (max-width: $breakpoint-small) {
+      max-width: 94.5%;
+    }
+
+    .vjs-vtt-thumbnail-display {
+      margin-top: -122px;
+      border: 1px solid white;
+      background-color: black !important;
+      visibility: hidden;
+    }
 
     // Circle play head
     .vjs-play-progress::before {
@@ -48,16 +61,24 @@ $control-bar-icon-size: 0.8rem;
       transition: transform 0.1s;
     }
 
+    .vjs-progress-holder {
+      margin: 0;
+    }
+
     &:hover {
       .vjs-play-progress::before {
         transform: scale(1);
       }
+      .vjs-progress-holder {
+        margin-top: -0.1em !important;
+        height: 0.4em !important;
+      }
     }
 
     // Progress Slider
-    .vjs-slider {
+    //.vjs-slider {
-      margin: 0 1rem;
+    //  margin: 0 1rem;
-    }
+    //}
   }
 
   // Load progress color
@@ -114,6 +135,8 @@ $control-bar-icon-size: 0.8rem;
 .vjs-mouse-display .vjs-time-tooltip {
   color: white;
   white-space: nowrap;
+  top: -32px;
+  padding-top: 9px;
 }
 
 // Tooltip

yarn.lock

@@ -14705,7 +14705,7 @@ replace-ext@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/replace-ext/-/replace-ext-1.0.0.tgz#de63128373fcbf7c3ccfa4de5a480c45a67958eb"
 
-request@^2.79.0:
+request@^2.79.0, request@^2.88.2:
   version "2.88.2"
   resolved "https://registry.yarnpkg.com/request/-/request-2.88.2.tgz#d73c918731cb5a87da047e207234146f664d12b3"
   integrity sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==
@@ -17235,7 +17235,7 @@ vfile@^2.0.0:
     unist-util-stringify-position "^1.0.0"
     vfile-message "^1.0.0"
 
-"video.js@^6 || ^7", "video.js@^6.0.1 || ^7", video.js@^7.0.0, video.js@^7.18.1:
+"video.js@^6 || ^7", "video.js@^6.0.1 || ^7", video.js@^7.0.0, video.js@^7.18.1, "video.js@^7.2.0 || ^6.6.0":
   version "7.18.1"
   resolved "https://registry.yarnpkg.com/video.js/-/video.js-7.18.1.tgz#d93cd4992710d4d95574a00e7d29a2518f9b30f7"
   integrity sha512-mnXdmkVcD5qQdKMZafDjqdhrnKGettZaGSVkExjACiylSB4r2Yt5W1bchsKmjFpfuNfszsMjTUnnoIWSSqoe/Q==
@@ -17310,6 +17310,14 @@ videojs-logo@^2.1.4:
     global "^4.3.2"
     video.js "^6 || ^7"
 
+"videojs-vtt-thumbnails@https://github.com/OdyseeTeam/videojs-vtt-thumbnails":
+  version "0.0.13"
+  resolved "https://github.com/OdyseeTeam/videojs-vtt-thumbnails#260a63aa9679992adcd4c2bd42cb042595db9f4b"
+  dependencies:
+    global "^4.4.0"
+    request "^2.88.2"
+    video.js "^7.2.0 || ^6.6.0"
+
 videojs-vtt.js@^0.15.3:
   version "0.15.3"
   resolved "https://registry.yarnpkg.com/videojs-vtt.js/-/videojs-vtt.js-0.15.3.tgz#84260393b79487fcf195d9372f812d7fab83a993"