Show correct image in lightbox (#5659)

This commit is contained in:
WithoutPants 2025-02-18 16:32:13 +11:00 committed by GitHub
parent 638398808b
commit 50a900e83c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 13 additions and 13 deletions

View file

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

View file

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

View file

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

View file

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