Fix slideshow autoplaying when on another tab (#2563)

This commit is contained in:
WithoutPants
2022-05-06 12:23:06 +10:00
committed by GitHub
parent 73ded0d97d
commit 9ca3874707
3 changed files with 20 additions and 14 deletions

View File

@@ -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)) * Display error message on fatal error when running stash with double-click in Windows. ([#2543](https://github.com/stashapp/stash/pull/2543))
### 🐛 Bug fixes ### 🐛 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 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)) * 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)) * Update vtt files when scene hash changes. ([#2554](https://github.com/stashapp/stash/pulls?q=is%3Apr+is%3Aclosed))

View File

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

View File

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