Whoops, condition wrong way around

src/components/player/atoms/ProgressBar.tsx

@@ -19,7 +19,7 @@ function ThumbnailDisplay(props: { at: number }) {
   }, [thumbnailImages, props.at]);
 
   if (!currentThumbnail) return null;
-  return <img src={currentThumbnail.data} className="h-12" />;
+  return <img src={currentThumbnail.data} className="h-12 -translate-x-1/2" />;
 }
 
 function useMouseHoverPosition(barRef: RefObject<HTMLDivElement>) {
@@ -72,8 +72,6 @@ export function ProgressBar() {
     setDraggingTime((dragPercentage / 100) * duration);
   }, [setDraggingTime, duration, dragPercentage]);
 
-  const mousePosition = Math.floor(dragPercentage * duration);
-
   return (
     <div className="w-full relative">
       <div className="top-0 absolute inset-x-0">
@@ -84,7 +82,7 @@ export function ProgressBar() {
               left: `${mousePos}%`,
             }}
           >
-            <ThumbnailDisplay at={mousePosition} />
+            <ThumbnailDisplay at={Math.floor((mousePos / 100) * duration)} />
           </div>
         ) : null}
       </div>

src/components/player/internals/ThumbnailScraper.tsx

@@ -74,6 +74,7 @@ class ThumnbnailWorker {
       this.canvasEl.height
     );
     const imgUrl = this.canvasEl.toDataURL();
+    if (this.interrupted) return;
     this.cb({
       at,
       data: imgUrl,
@@ -84,13 +85,20 @@ class ThumnbnailWorker {
     const vid = this.videoEl;
     if (!vid) return;
     await this.initVideo();
-    if (this.interrupted) return;
+
-    await this.takeSnapshot(vid.duration / 2);
+    // TODO make a queue based on refinement algorithm
+
+    const queue = [0.5, 0.25, 0.75];
+    for (let i = 0; i < queue.length; i += 1) {
+      if (this.interrupted) return;
+      await this.takeSnapshot(vid.duration * queue[i]);
+    }
   }
 }
 
 export function ThumbnailScraper() {
   const addImage = usePlayerStore((s) => s.thumbnails.addImage);
+  const meta = usePlayerStore((s) => s.meta);
   const source = usePlayerStore((s) => s.source);
   const workerRef = useRef<ThumnbnailWorker | null>(null);
 
@@ -102,8 +110,6 @@ export function ThumbnailScraper() {
     });
   }, [source]);
 
-  // TODO stop worker on meta change
-
   // start worker with the stream
   useEffect(() => {
     // dont interrupt existing working
@@ -119,9 +125,25 @@ export function ThumbnailScraper() {
   // destroy worker on unmount
   useEffect(() => {
     return () => {
-      if (workerRef.current) workerRef.current.destroy();
+      if (workerRef.current) {
+        workerRef.current.destroy();
+        workerRef.current = null;
+      }
     };
   }, []);
 
+  // if targeted meta changes, abort the scraper
+  const serializedMeta = JSON.stringify({
+    id: meta?.tmdbId,
+    ep: meta?.episode?.tmdbId,
+    se: meta?.season?.tmdbId,
+  });
+  useEffect(() => {
+    if (workerRef.current) {
+      workerRef.current.destroy();
+      workerRef.current = null;
+    }
+  }, [serializedMeta]);
+
   return null;
 }

src/stores/player/slices/display.ts

@@ -105,6 +105,9 @@ export const createDisplaySlice: MakeSlice<DisplaySlice> = (set, get) => ({
     set((s) => {
       s.status = playerStatus.IDLE;
       s.meta = null;
+      s.thumbnails.images = [];
+      s.progress.time = 0;
+      s.progress.duration = 0;
     });
   },
 });

src/stores/player/slices/thumbnails.ts

@@ -28,7 +28,7 @@ export function nearestImageAt(
   // no images, early return
   if (images.length === 0) return null;
 
-  const indexPastTimestamp = images.findIndex((v) => v.at < at);
+  const indexPastTimestamp = images.findIndex((v) => v.at > at);
 
   // no image found past timestamp, so last image must be closest
   if (indexPastTimestamp === -1)
@@ -76,13 +76,14 @@ export const createThumbnailSlice: MakeSlice<ThumbnailSlice> = (set, get) => ({
     addImage(img) {
       const store = get();
       const exactOrPastImageIndex = store.thumbnails.images.findIndex(
-        (v) => v.at <= img.at
+        (v) => v.at >= img.at
       );
 
       // not found past or exact, so just append to the end
       if (exactOrPastImageIndex === -1) {
         set((s) => {
           s.thumbnails.images.push(img);
+          s.thumbnails.images = [...s.thumbnails.images];
         });
         return;
       }
@@ -93,6 +94,7 @@ export const createThumbnailSlice: MakeSlice<ThumbnailSlice> = (set, get) => ({
       if (exactOrPastImage.at === img.at) {
         set((s) => {
           s.thumbnails.images[exactOrPastImageIndex] = img;
+          s.thumbnails.images = [...s.thumbnails.images];
         });
         return;
       }
@@ -100,6 +102,7 @@ export const createThumbnailSlice: MakeSlice<ThumbnailSlice> = (set, get) => ({
       // found one past, insert right before it
       set((s) => {
         s.thumbnails.images.splice(exactOrPastImageIndex, 0, img);
+        s.thumbnails.images = [...s.thumbnails.images];
       });
     },
   },