From 9ca387470764412cdceb899b25ced8c64254c119 Mon Sep 17 00:00:00 2001
From: WithoutPants <53250216+WithoutPants@users.noreply.github.com>
Date: Fri, 6 May 2022 12:23:06 +1000
Subject: [PATCH] Fix slideshow autoplaying when on another tab (#2563)

---
 .../components/Changelog/versions/v0150.md    |  1 +
 ui/v2.5/src/hooks/Lightbox/Lightbox.tsx       |  7 +++--
 ui/v2.5/src/hooks/PageVisibility.ts           | 26 ++++++++++---------
 3 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/ui/v2.5/src/components/Changelog/versions/v0150.md b/ui/v2.5/src/components/Changelog/versions/v0150.md
index 2aefcd796..2de864cfa 100644
--- a/ui/v2.5/src/components/Changelog/versions/v0150.md
+++ b/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))
diff --git a/ui/v2.5/src/hooks/Lightbox/Lightbox.tsx b/ui/v2.5/src/hooks/Lightbox/Lightbox.tsx
index ddf5828f7..a82ef6f81 100644
--- a/ui/v2.5/src/hooks/Lightbox/Lightbox.tsx
+++ b/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(() => {
diff --git a/ui/v2.5/src/hooks/PageVisibility.ts b/ui/v2.5/src/hooks/PageVisibility.ts
index afc7c6af1..e83482456 100644
--- a/ui/v2.5/src/hooks/PageVisibility.ts
+++ b/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]);
 };