Lightbox keybinds (#928)

* Add mousetrap-pause
* Disable keybinds while lightbox open

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",

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();
 

ui/v2.5/src/components/Images/ImageList.tsx

@@ -53,6 +53,18 @@ const ImageWall: React.FC<IImageWallProps> = ({ 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 (
     <div className="gallery">
       <div className="flexbin">{thumbs}</div>
@@ -61,6 +73,8 @@ const ImageWall: React.FC<IImageWallProps> = ({ images }) => {
         toggler={lightboxToggle}
         sources={photos}
         key={key}
+        onOpen={onLightboxOpen}
+        onClose={onLightboxClose}
       />
     </div>
   );

ui/v2.5/src/globals.d.ts

@@ -1,2 +1,3 @@
 declare module "*.md";
 declare module "string.prototype.replaceall";
+declare module "mousetrap-pause";

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"