Allow navigation by clicking lightbox image (#1516)

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

@@ -12,6 +12,7 @@
 * Added [DLNA server](/settings?tab=dlna). ([#1364](https://github.com/stashapp/stash/pull/1364))
 
 ### 🎨 Improvements
+* Allow navigation to previous/next image in carousel by clicking left/right side of image. ([#1516](https://github.com/stashapp/stash/pull/1516))
 * Include `Host` in input to plugins. ([#1514](https://github.com/stashapp/stash/pull/1514))
 * Added internationalisation for all UI pages and added zh-TW language option. ([#1471](https://github.com/stashapp/stash/pull/1471))
 * Add option to disable audio for generated previews. ([#1454](https://github.com/stashapp/stash/pull/1454))

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

@@ -31,6 +31,7 @@ const CLASSNAME_INSTANT = `${CLASSNAME_CAROUSEL}-instant`;
 const CLASSNAME_IMAGE = `${CLASSNAME_CAROUSEL}-image`;
 const CLASSNAME_NAVBUTTON = `${CLASSNAME}-navbutton`;
 const CLASSNAME_NAV = `${CLASSNAME}-nav`;
+const CLASSNAME_NAVZONE = `${CLASSNAME}-navzone`;
 const CLASSNAME_NAVIMAGE = `${CLASSNAME_NAV}-image`;
 const CLASSNAME_NAVSELECTED = `${CLASSNAME_NAV}-selected`;
 
@@ -183,8 +184,8 @@ export const LightboxComponent: React.FC<IProps> = ({
   }, [isFullscreen, hide]);
 
   const handleClose = (e: React.MouseEvent<HTMLDivElement>) => {
-    const { nodeName } = e.target as Node;
-    if (nodeName === "DIV" || nodeName === "PICTURE") close();
+    const { className } = e.target as Element;
+    if (className === CLASSNAME_IMAGE) close();
   };
 
   const handleLeft = useCallback(
@@ -481,6 +482,18 @@ export const LightboxComponent: React.FC<IProps> = ({
                       media="(min-width: 800px)"
                     />
                     <img src={image.paths.thumbnail ?? ""} alt="" />
+                    <div>
+                      <div
+                        aria-hidden
+                        className={CLASSNAME_NAVZONE}
+                        onClick={handleLeft}
+                      />
+                      <div
+                        aria-hidden
+                        className={CLASSNAME_NAVZONE}
+                        onClick={handleRight}
+                      />
+                    </div>
                   </picture>
                 </div>
               ))}

ui/v2.5/src/hooks/Lightbox/lightbox.scss

@@ -106,6 +106,14 @@
         display: flex;
         height: 100%;
         margin: auto;
+        position: relative;
+
+        > div {
+          display: flex;
+          height: 100%;
+          position: absolute;
+          width: 100%;
+        }
       }
 
       img {
@@ -117,6 +125,11 @@
     }
   }
 
+  &-navzone {
+    cursor: pointer;
+    width: 50%;
+  }
+
   &-navbutton {
     z-index: 1045;