Show correct image in lightbox (#5659)

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

@@ -182,7 +182,7 @@ const ImageListImages: React.FC<IImageListImages> = ({
   const handleImageOpen = useCallback(
     (index) => {
       setSlideshowRunning(true);
-      showLightbox(index, true);
+      showLightbox({ initialIndex: index, slideshowEnabled: true });
     },
     [showLightbox, setSlideshowRunning]
   );

ui/v2.5/src/components/Tagger/scenes/SceneTagger.tsx

@@ -153,7 +153,7 @@ export const Tagger: React.FC<ITaggerProps> = ({ scenes, queue }) => {
   });
   function showLightboxImage(imagePath: string) {
     setSpriteImage(imagePath);
-    showLightbox();
+    showLightbox({ images: lightboxImage });
   }
 
   const filteredScenes = useMemo(

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

@@ -6,16 +6,17 @@ import { Button } from "react-bootstrap";
 export const LightboxLink: React.FC<
   PropsWithChildren<{ images?: ILightboxImage[] | undefined; index?: number }>
 > = ({ images, index, children }) => {
-  const showLightbox = useLightbox({
-    images,
-  });
+  const showLightbox = useLightbox();
 
   if (!images || images.length === 0) {
     return <>{children}</>;
   }
 
   return (
-    <Button variant="link" onClick={() => showLightbox(index)}>
+    <Button
+      variant="link"
+      onClick={() => showLightbox({ images, initialIndex: index })}
+    >
       {children}
     </Button>
   );

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

@@ -4,7 +4,7 @@ import { IState, useLightboxContext } from "./context";
 import { IChapter } from "./types";
 
 export const useLightbox = (
-  state: Partial<Omit<IState, "isVisible">>,
+  state: Partial<Omit<IState, "isVisible">> = {},
   chapters: IChapter[] = []
 ) => {
   const { setLightboxState } = useLightboxContext();
@@ -33,14 +33,13 @@ export const useLightbox = (
   ]);
 
   const show = useCallback(
-    (index?: number, slideshowEnabled = false) => {
+    (props: Partial<IState>) => {
       setLightboxState({
-        initialIndex: index,
+        ...props,
         isVisible: true,
-        slideshowEnabled,
-        page: state.page,
-        pages: state.pages,
-        pageSize: state.pageSize,
+        page: props.page ?? state.page,
+        pages: props.pages ?? state.pages,
+        pageSize: props.pageSize ?? state.pageSize,
         chapters: chapters,
       });
     },