Thumbnails: Store pending thumbnail request

When I demoed how DASH thumbnail worked in the RxPlayer demo, I was
unhappy to realize that there was a noticeable delay when quickly moving
the mouse over the seekbar.

This is both because we have a timer in our demo of a few milliseconds
before doing the actual thumbnail request, and even much more importantly
because the RxPlayer cancel the last thumbnail request when the
application decides to fetch one from a new position instead.

Yet positions that are sufficiently close (which is frequent when moving
the mouse over a seekbar) are often going to lead to the same thumbnail
request. Here cancelling the last one is unfortunate: we should reuse
the same request.

---

We already have a thumbnail cache but sadly enough it is only populated
once the request is done. If the request is still pending and an
application ask a thumbnail for a new position, we're going to run a new
request even if it leads to the same thumbnail.

Our "last loaded" cache was in main thread, which does not even know the
relation between the wanted time and the corresponding thumbnail, so this
new logic cannot be added there.

Instead I added another level of "cache" in our `ThumbnailFetcher` (in
`core/fetchers`) for the pending request only. The result is much more
satisfying.

Author: peaBerberian

demo/scripts/components/ThumbnailPreview.tsx

@@ -73,24 +73,24 @@ export default function ThumbnailPreview({
 
     startSpinnerTimeoutIfNotAlreadyStarted();
 
-    // load thumbnail after a  timer to avoid doing too many requests when the
-    // user quickly moves its pointer or whatever is calling this
-    loadThumbnailTimeout = window.setTimeout(() => {
-      loadThumbnailTimeout = null;
+    // There's two available ways of displaying thumbnails
+    //
+    // 1.   Through what's called a "trickmode track", which is a video track
+    //      only containing intra-frames. Such thumbnails are shown through a
+    //      video tag thanks the the `VideoThumbnailLoader` tool
+    //
+    // 2.   Through an especially-purposed "thumbnail track" in a Manifest
+    //      which usually is based on tiles of jpg/png images. Those are loadd
+    //      through specific RxPlayer method.
+    if (showVideoThumbnail) {
+      if (videoThumbnailLoader === null) {
+        return;
+      }
+      // load thumbnail after a  timer to avoid doing too many requests when the
+      // user quickly moves its pointer or whatever is calling this
+      loadThumbnailTimeout = window.setTimeout(() => {
+        loadThumbnailTimeout = null;
 
-      // There's two available ways of displaying thumbnails
-      //
-      // 1.   Through what's called a "trickmode track", which is a video track
-      //      only containing intra-frames. Such thumbnails are shown through a
-      //      video tag thanks the the `VideoThumbnailLoader` tool
-      //
-      // 2.   Through an especially-purposed "thumbnail track" in a Manifest
-      //      which usually is based on tiles of jpg/png images. Those are loadd
-      //      through specific RxPlayer method.
-      if (showVideoThumbnail) {
-        if (videoThumbnailLoader === null) {
-          return;
-        }
         videoThumbnailLoader
           .setTime(ceiledTime)
           .then(hideSpinner)
@@ -108,43 +108,43 @@ export default function ThumbnailPreview({
               console.error("Error while loading thumbnails:", err);
             }
           });
-      } else {
-        const metadata = player.actions.getAvailableThumbnailTracks(ceiledTime);
-        const thumbnailTrack = metadata.reduce((acc: IThumbnailTrackInfo | null, t) => {
-          if (acc === null || acc.height === undefined) {
-            return t;
-          }
-          if (t.height === undefined) {
-            return acc;
-          }
-          if (acc.height > t.height) {
-            return t.height > 100 ? t : acc;
-          } else {
-            return acc.height > 100 ? acc : t;
-          }
-        }, null);
-        if (thumbnailTrack === null || imageThumbnailRef.current === null) {
-          hideSpinner();
-          return;
+      }, 30);
+    } else {
+      const metadata = player.actions.getAvailableThumbnailTracks(ceiledTime);
+      const thumbnailTrack = metadata.reduce((acc: IThumbnailTrackInfo | null, t) => {
+        if (acc === null || acc.height === undefined) {
+          return t;
         }
-        player.actions
-          .renderThumbnail(imageThumbnailRef.current, ceiledTime, thumbnailTrack.id)
-          .then(hideSpinner)
-          .catch((err) => {
-            if (
-              typeof err === "object" &&
-              err !== null &&
-              (err as Partial<Record<string, unknown>>).code === "ABORTED"
-            ) {
-              return;
-            } else {
-              hideSpinner();
-              // eslint-disable-next-line no-console
-              console.warn("Error while loading thumbnails:", err);
-            }
-          });
+        if (t.height === undefined) {
+          return acc;
+        }
+        if (acc.height > t.height) {
+          return t.height > 100 ? t : acc;
+        } else {
+          return acc.height > 100 ? acc : t;
+        }
+      }, null);
+      if (thumbnailTrack === null || imageThumbnailRef.current === null) {
+        hideSpinner();
+        return;
       }
-    }, 30);
+      player.actions
+        .renderThumbnail(imageThumbnailRef.current, ceiledTime, thumbnailTrack.id)
+        .then(hideSpinner)
+        .catch((err) => {
+          if (
+            typeof err === "object" &&
+            err !== null &&
+            (err as Partial<Record<string, unknown>>).code === "ABORTED"
+          ) {
+            return;
+          } else {
+            hideSpinner();
+            // eslint-disable-next-line no-console
+            console.warn("Error while loading thumbnails:", err);
+          }
+        });
+    }
 
     return () => {
       if (loadThumbnailTimeout !== null) {

src/core/fetchers/index.ts

@@ -23,7 +23,7 @@ import type {
 import ManifestFetcher from "./manifest";
 import type { SegmentQueue, ISegmentQueueCreatorBackoffOptions } from "./segment";
 import SegmentQueueCreator from "./segment";
-import createThumbnailFetcher, { getThumbnailFetcherRequestOptions } from "./thumbnails";
+import createThumbnailFetcher from "./thumbnails";
 import type { IThumbnailFetcher } from "./thumbnails";
 
 export type {
@@ -34,10 +34,4 @@ export type {
   SegmentQueue,
   IThumbnailFetcher,
 };
-export {
-  CdnPrioritizer,
-  ManifestFetcher,
-  SegmentQueueCreator,
-  createThumbnailFetcher,
-  getThumbnailFetcherRequestOptions,
-};
+export { CdnPrioritizer, ManifestFetcher, SegmentQueueCreator, createThumbnailFetcher };

src/core/fetchers/thumbnails/index.ts

@@ -1,8 +1,5 @@
-import createThumbnailFetcher, {
-  getThumbnailFetcherRequestOptions,
-} from "./thumbnail_fetcher";
+import createThumbnailFetcher from "./thumbnail_fetcher";
 import type { IThumbnailFetcher } from "./thumbnail_fetcher";
 
 export default createThumbnailFetcher;
-export { getThumbnailFetcherRequestOptions };
 export type { IThumbnailFetcher };