Fix slideshow autoplaying when on another tab (#2563)

ui/v2.5/src/components/Changelog/versions/v0150.md

@@ -7,6 +7,7 @@
 * Display error message on fatal error when running stash with double-click in Windows. ([#2543](https://github.com/stashapp/stash/pull/2543))
 
 ### 🐛 Bug fixes
+* Fix lightbox autoplaying while offscreen. ([#2563](https://github.com/stashapp/stash/pull/2563))
 * Fix playback rate resetting when seeking. ([#2550](https://github.com/stashapp/stash/pull/2550))
 * Fix video not starting when clicking scene scrubber. ([#2546](https://github.com/stashapp/stash/pull/2546))
 * Update vtt files when scene hash changes. ([#2554](https://github.com/stashapp/stash/pulls?q=is%3Apr+is%3Aclosed))

ui/v2.5/src/hooks/Lightbox/Lightbox.tsx

@@ -279,8 +279,11 @@ export const LightboxComponent: React.FC<IProps> = ({
     }
   }, [slideshowInterval, slideshowDelay]);
 
-  usePageVisibility(() => {
-    toggleSlideshow();
+  // stop slideshow when the page is hidden
+  usePageVisibility((hidden: boolean) => {
+    if (hidden) {
+      setSlideshowInterval(null);
+    }
   });
 
   const close = useCallback(() => {

ui/v2.5/src/hooks/PageVisibility.ts

@@ -1,7 +1,9 @@
 import { useEffect, useRef } from "react";
 
-const usePageVisibility = (visibilityChangeCallback: () => void): void => {
-  const savedVisibilityChangedCallback = useRef<() => void>();
+const usePageVisibility = (
+  visibilityChangeCallback: (hidden: boolean) => void
+): void => {
+  const savedVisibilityChangedCallback = useRef<(hidden: boolean) => void>();
 
   useEffect(() => {
     // resolve event names for different browsers
@@ -31,18 +33,18 @@ const usePageVisibility = (visibilityChangeCallback: () => void): void => {
 
     savedVisibilityChangedCallback.current = visibilityChangeCallback;
 
-    document.addEventListener(
-      visibilityChange,
-      savedVisibilityChangedCallback.current
-    );
+    function fireCallback() {
+      const callback = savedVisibilityChangedCallback.current;
+      if (callback) {
+        const isHidden = document.visibilityState !== "visible";
+        callback(isHidden);
+      }
+    }
+
+    document.addEventListener(visibilityChange, fireCallback);
 
     return () => {
-      if (savedVisibilityChangedCallback.current) {
-        document.removeEventListener(
-          visibilityChange,
-          savedVisibilityChangedCallback.current
-        );
-      }
+      document.removeEventListener(visibilityChange, fireCallback);
     };
   }, [visibilityChangeCallback]);
 };