Preview bugfixes (#11384)

* memoize initial time range and check for window visibility

* assume window is visible with previewthumbnailplayer

web/src/components/player/PreviewThumbnailPlayer.tsx

@@ -323,6 +323,7 @@ function PreviewContent({
         setIgnoreClick={setIgnoreClick}
         isPlayingBack={isPlayingBack}
         onTimeUpdate={onTimeUpdate}
+        windowVisible={true}
       />
     );
   } else if (isCurrentHour(review.start_time)) {
@@ -334,6 +335,7 @@ function PreviewContent({
         setIgnoreClick={setIgnoreClick}
         isPlayingBack={isPlayingBack}
         onTimeUpdate={onTimeUpdate}
+        windowVisible={true}
       />
     );
   }
@@ -349,6 +351,7 @@ type VideoPreviewProps = {
   setIgnoreClick: (ignore: boolean) => void;
   isPlayingBack: (ended: boolean) => void;
   onTimeUpdate?: (time: number | undefined) => void;
+  windowVisible: boolean;
 };
 export function VideoPreview({
   relevantPreview,
@@ -360,6 +363,7 @@ export function VideoPreview({
   setIgnoreClick,
   isPlayingBack,
   onTimeUpdate,
+  windowVisible,
 }: VideoPreviewProps) {
   const playerRef = useRef<HTMLVideoElement | null>(null);
   const sliderRef = useRef<HTMLDivElement | null>(null);
@@ -409,6 +413,10 @@ export function VideoPreview({
   // time progress update
 
   const onProgress = useCallback(() => {
+    if (!windowVisible) {
+      return;
+    }
+
     if (onTimeUpdate) {
       onTimeUpdate(
         relevantPreview.start + (playerRef.current?.currentTime || 0),
@@ -458,7 +466,7 @@ export function VideoPreview({
 
     // we know that these deps are correct
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [setProgress, lastPercent]);
+  }, [setProgress, lastPercent, windowVisible]);
 
   // manual playback
   // safari is incapable of playing at a speed > 2x
@@ -596,6 +604,7 @@ type InProgressPreviewProps = {
   setIgnoreClick: (ignore: boolean) => void;
   isPlayingBack: (ended: boolean) => void;
   onTimeUpdate?: (time: number | undefined) => void;
+  windowVisible: boolean;
 };
 export function InProgressPreview({
   review,
@@ -606,6 +615,7 @@ export function InProgressPreview({
   setIgnoreClick,
   isPlayingBack,
   onTimeUpdate,
+  windowVisible,
 }: InProgressPreviewProps) {
   const apiHost = useApiHost();
   const sliderRef = useRef<HTMLDivElement | null>(null);
@@ -620,7 +630,7 @@ export function InProgressPreview({
   const [key, setKey] = useState(0);
 
   const handleLoad = useCallback(() => {
-    if (!previewFrames) {
+    if (!previewFrames || !windowVisible) {
       return;
     }