diff --git a/ui/v2.5/package.json b/ui/v2.5/package.json index efeebffc2..dd744b2a2 100644 --- a/ui/v2.5/package.json +++ b/ui/v2.5/package.json @@ -49,6 +49,7 @@ "localforage": "1.9.0", "lodash": "^4.17.20", "mousetrap": "^1.6.5", + "mousetrap-pause": "^1.0.0", "query-string": "6.13.1", "react": "16.13.1", "react-bootstrap": "1.3.0", diff --git a/ui/v2.5/src/App.tsx b/ui/v2.5/src/App.tsx index 138ec56f9..29f2dda77 100755 --- a/ui/v2.5/src/App.tsx +++ b/ui/v2.5/src/App.tsx @@ -12,6 +12,8 @@ import replaceAll from "string.prototype.replaceall"; import locales from "src/locale"; import { useConfiguration } from "src/core/StashService"; import { flattenMessages } from "src/utils"; +import Mousetrap from "mousetrap"; +import MousetrapPause from "mousetrap-pause"; import { ErrorBoundary } from "./components/ErrorBoundary"; import Galleries from "./components/Galleries/Galleries"; import { MainNavbar } from "./components/MainNavbar"; @@ -26,6 +28,8 @@ import Movies from "./components/Movies/Movies"; import Tags from "./components/Tags/Tags"; import Images from "./components/Images/Images"; +MousetrapPause(Mousetrap); + // Required for browsers older than August 2020ish. Can be removed at some point. replaceAll.shim(); diff --git a/ui/v2.5/src/components/Images/ImageList.tsx b/ui/v2.5/src/components/Images/ImageList.tsx index d8868cfaa..b37794d2f 100644 --- a/ui/v2.5/src/components/Images/ImageList.tsx +++ b/ui/v2.5/src/components/Images/ImageList.tsx @@ -53,6 +53,18 @@ const ImageWall: React.FC = ({ images }) => { // FsLightbox doesn't update unless the key updates const key = images.map((i) => i.id).join(","); + function onLightboxOpen() { + // disable mousetrap + // eslint-disable-next-line @typescript-eslint/no-explicit-any + (Mousetrap as any).pause(); + } + + function onLightboxClose() { + // re-enable mousetrap + // eslint-disable-next-line @typescript-eslint/no-explicit-any + (Mousetrap as any).unpause(); + } + return (
{thumbs}
@@ -61,6 +73,8 @@ const ImageWall: React.FC = ({ images }) => { toggler={lightboxToggle} sources={photos} key={key} + onOpen={onLightboxOpen} + onClose={onLightboxClose} />
); diff --git a/ui/v2.5/src/globals.d.ts b/ui/v2.5/src/globals.d.ts index 169b7bee1..dc0144b95 100644 --- a/ui/v2.5/src/globals.d.ts +++ b/ui/v2.5/src/globals.d.ts @@ -1,2 +1,3 @@ declare module "*.md"; declare module "string.prototype.replaceall"; +declare module "mousetrap-pause"; diff --git a/ui/v2.5/yarn.lock b/ui/v2.5/yarn.lock index b0e319e9d..4b2599311 100644 --- a/ui/v2.5/yarn.lock +++ b/ui/v2.5/yarn.lock @@ -10462,6 +10462,11 @@ moment@~2.27.0: resolved "https://registry.yarnpkg.com/moment/-/moment-2.27.0.tgz#8bff4e3e26a236220dfe3e36de756b6ebaa0105d" integrity sha512-al0MUK7cpIcglMv3YF13qSgdAIqxHTO7brRtaz3DlSULbqfazqkc5kEjNrLDOM7fsjshoFIihnU8snrP7zUvhQ== +mousetrap-pause@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/mousetrap-pause/-/mousetrap-pause-1.0.0.tgz#91c429f2f5f9ad71508fa0561bb53be3fdf9a9d0" + integrity sha1-kcQp8vX5rXFQj6BWG7U74/35qdA= + mousetrap@^1.6.5: version "1.6.5" resolved "https://registry.yarnpkg.com/mousetrap/-/mousetrap-1.6.5.tgz#8a766d8c272b08393d5f56074e0b5ec183485bf9"