Fix scrolling behavior

web-new/src/App.tsx

@@ -27,9 +27,9 @@ function App() {
       <BrowserRouter>
         <Wrapper>
           <Header onToggleNavbar={toggleNavbar} />
-          <div className="grid grid-cols-[auto,1fr] flex-grow-1 md:overflow-auto">
+          <div className="grid grid-cols-[auto,1fr] flex-grow-1 overflow-auto">
             <Sidebar sheetOpen={sheetOpen} setSheetOpen={setSheetOpen} />
-            <div className="overflow-x-hidden px-4 py-2 w-screen md:w-full">
+            <div id="pageRoot" className="overflow-x-hidden px-4 py-2 md:w-full">
               <Routes>
                 <Route path="/" element={<Dashboard />} />
                 <Route path="/live" element={<Live />} />

web-new/src/components/player/PreviewThumbnailPlayer.tsx

@@ -48,43 +48,52 @@ export default function PreviewThumbnailPlayer({
         playerRef.current.currentTime(startTs - relevantPreview.start);
       }
     },
-    [relevantPreview, startTs]
+    [relevantPreview, startTs, playerRef]
   );
 
-  const observer = useRef<IntersectionObserver | null>();
+  const autoPlayObserver = useRef<IntersectionObserver | null>();
+  const preloadObserver = useRef<IntersectionObserver | null>();
   const inViewRef = useCallback(
     (node: HTMLElement | null) => {
-      if (observer.current) {
+      if (!preloadObserver.current) {
-        return;
-      }
-
         try {
-        observer.current = new IntersectionObserver(
+          preloadObserver.current = new IntersectionObserver(
             (entries) => {
-            if (entries[0].isIntersecting) {
+              const [{ isIntersecting }] = entries;
-              if (entries[0].intersectionRatio == 1.0) {
+              setVisible(isIntersecting);
-                if (shouldAutoPlay) {
-                  onPlayback(true);
-                }
-              } else {
-                setVisible(true);
-              }
-            } else {
-              if (shouldAutoPlay) {
-                onPlayback(false);
-              }
-
-              setVisible(false);
-            }
             },
-          { threshold: [0.0, 1.0], rootMargin: "10% 0% 25% 0%" }
+            {
+              threshold: 0,
+              root: document.getElementById("pageRoot"),
+              rootMargin: "10% 0px 25% 0px",
+            }
           );
-        if (node) observer.current.observe(node);
+          if (node) preloadObserver.current.observe(node);
         } catch (e) {
           // no op
         }
+      }
+
+      if (shouldAutoPlay && !autoPlayObserver.current) {
+        try {
+          autoPlayObserver.current = new IntersectionObserver(
+            (entries) => {
+              const [{ isIntersecting }] = entries;
+              if (isIntersecting) {
+                onPlayback(true);
+              } else {
+                onPlayback(false);
+              }
             },
-    [observer, onPlayback]
+            { threshold: 1.0 }
+          );
+          if (node) autoPlayObserver.current.observe(node);
+        } catch (e) {
+          // no op
+        }
+      }
+    },
+    [preloadObserver, autoPlayObserver, onPlayback]
   );
 
   let content;
@@ -137,7 +146,7 @@ export default function PreviewThumbnailPlayer({
 
   return (
     <AspectRatio
-      ref={inViewRef}
+      ref={relevantPreview ? inViewRef : null}
       ratio={16 / 9}
       className="bg-black flex justify-center items-center"
       onMouseEnter={() => onPlayback(true)}