diff --git a/ui/v2.5/src/components/Images/ImageList.tsx b/ui/v2.5/src/components/Images/ImageList.tsx index 5bcea0d4a..7bb89df43 100644 --- a/ui/v2.5/src/components/Images/ImageList.tsx +++ b/ui/v2.5/src/components/Images/ImageList.tsx @@ -182,7 +182,7 @@ const ImageListImages: React.FC = ({ const handleImageOpen = useCallback( (index) => { setSlideshowRunning(true); - showLightbox(index, true); + showLightbox({ initialIndex: index, slideshowEnabled: true }); }, [showLightbox, setSlideshowRunning] ); diff --git a/ui/v2.5/src/components/Tagger/scenes/SceneTagger.tsx b/ui/v2.5/src/components/Tagger/scenes/SceneTagger.tsx index 67ea5ea5d..922ecc473 100755 --- a/ui/v2.5/src/components/Tagger/scenes/SceneTagger.tsx +++ b/ui/v2.5/src/components/Tagger/scenes/SceneTagger.tsx @@ -153,7 +153,7 @@ export const Tagger: React.FC = ({ scenes, queue }) => { }); function showLightboxImage(imagePath: string) { setSpriteImage(imagePath); - showLightbox(); + showLightbox({ images: lightboxImage }); } const filteredScenes = useMemo( diff --git a/ui/v2.5/src/hooks/Lightbox/LightboxLink.tsx b/ui/v2.5/src/hooks/Lightbox/LightboxLink.tsx index 9fcdee1f7..585b05067 100644 --- a/ui/v2.5/src/hooks/Lightbox/LightboxLink.tsx +++ b/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 ( - ); diff --git a/ui/v2.5/src/hooks/Lightbox/hooks.ts b/ui/v2.5/src/hooks/Lightbox/hooks.ts index a54de4c30..958dc7d41 100644 --- a/ui/v2.5/src/hooks/Lightbox/hooks.ts +++ b/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>, + state: Partial> = {}, chapters: IChapter[] = [] ) => { const { setLightboxState } = useLightboxContext(); @@ -33,14 +33,13 @@ export const useLightbox = ( ]); const show = useCallback( - (index?: number, slideshowEnabled = false) => { + (props: Partial) => { 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, }); },