mirror of
https://github.com/stashapp/stash.git
synced 2025-12-14 20:33:16 +01:00
541 lines
17 KiB
TypeScript
541 lines
17 KiB
TypeScript
import React, { useCallback, useEffect, useRef, useState } from "react";
|
|
import * as GQL from "src/core/generated-graphql";
|
|
import {
|
|
Button,
|
|
Col,
|
|
FormControl,
|
|
InputGroup,
|
|
FormLabel,
|
|
OverlayTrigger,
|
|
Popover,
|
|
} from "react-bootstrap";
|
|
import cx from "classnames";
|
|
import Mousetrap from "mousetrap";
|
|
import debounce from "lodash/debounce";
|
|
|
|
import { Icon, LoadingIndicator } from "src/components/Shared";
|
|
import { useInterval, usePageVisibility } from "src/hooks";
|
|
import { useConfiguration } from "src/core/StashService";
|
|
|
|
const CLASSNAME = "Lightbox";
|
|
const CLASSNAME_HEADER = `${CLASSNAME}-header`;
|
|
const CLASSNAME_LEFT_SPACER = `${CLASSNAME_HEADER}-left-spacer`;
|
|
const CLASSNAME_INDICATOR = `${CLASSNAME_HEADER}-indicator`;
|
|
const CLASSNAME_DELAY = `${CLASSNAME_HEADER}-delay`;
|
|
const CLASSNAME_DELAY_ICON = `${CLASSNAME_DELAY}-icon`;
|
|
const CLASSNAME_DELAY_INLINE = `${CLASSNAME_DELAY}-inline`;
|
|
const CLASSNAME_RIGHT = `${CLASSNAME_HEADER}-right`;
|
|
const CLASSNAME_DISPLAY = `${CLASSNAME}-display`;
|
|
const CLASSNAME_CAROUSEL = `${CLASSNAME}-carousel`;
|
|
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`;
|
|
|
|
const DEFAULT_SLIDESHOW_DELAY = 5000;
|
|
const SECONDS_TO_MS = 1000;
|
|
const MIN_VALID_INTERVAL_SECONDS = 1;
|
|
|
|
type Image = Pick<GQL.Image, "paths">;
|
|
interface IProps {
|
|
images: Image[];
|
|
isVisible: boolean;
|
|
isLoading: boolean;
|
|
initialIndex?: number;
|
|
showNavigation: boolean;
|
|
slideshowEnabled?: boolean;
|
|
pageHeader?: string;
|
|
pageCallback?: (direction: number) => boolean;
|
|
hide: () => void;
|
|
}
|
|
|
|
export const LightboxComponent: React.FC<IProps> = ({
|
|
images,
|
|
isVisible,
|
|
isLoading,
|
|
initialIndex = 0,
|
|
showNavigation,
|
|
slideshowEnabled = false,
|
|
pageHeader,
|
|
pageCallback,
|
|
hide,
|
|
}) => {
|
|
const index = useRef<number | null>(null);
|
|
const [instantTransition, setInstantTransition] = useState(false);
|
|
const [isSwitchingPage, setIsSwitchingPage] = useState(false);
|
|
const [isFullscreen, setFullscreen] = useState(false);
|
|
const containerRef = useRef<HTMLDivElement | null>(null);
|
|
const carouselRef = useRef<HTMLDivElement | null>(null);
|
|
const indicatorRef = useRef<HTMLDivElement | null>(null);
|
|
const navRef = useRef<HTMLDivElement | null>(null);
|
|
const clearIntervalCallback = useRef<() => void>();
|
|
const resetIntervalCallback = useRef<() => void>();
|
|
const config = useConfiguration();
|
|
|
|
const userSelectedSlideshowDelayOrDefault =
|
|
config?.data?.configuration.interface.slideshowDelay ??
|
|
DEFAULT_SLIDESHOW_DELAY;
|
|
|
|
// slideshowInterval is used for controlling the logic
|
|
// displaySlideshowInterval is for display purposes only
|
|
// keeping them separate and independant allows us to handle the logic however we want
|
|
// while still displaying something that makes sense to the user
|
|
const [slideshowInterval, setSlideshowInterval] = useState<number | null>(
|
|
null
|
|
);
|
|
const [
|
|
displayedSlideshowInterval,
|
|
setDisplayedSlideshowInterval,
|
|
] = useState<string>(
|
|
(userSelectedSlideshowDelayOrDefault / SECONDS_TO_MS).toString()
|
|
);
|
|
|
|
useEffect(() => {
|
|
setIsSwitchingPage(false);
|
|
if (index.current === -1) index.current = images.length - 1;
|
|
}, [images]);
|
|
|
|
const disableInstantTransition = debounce(
|
|
() => setInstantTransition(false),
|
|
400
|
|
);
|
|
|
|
const setInstant = useCallback(() => {
|
|
setInstantTransition(true);
|
|
disableInstantTransition();
|
|
}, [disableInstantTransition]);
|
|
|
|
const setIndex = useCallback(
|
|
(i: number) => {
|
|
if (images.length < 2) return;
|
|
|
|
index.current = i;
|
|
if (carouselRef.current) carouselRef.current.style.left = `${i * -100}vw`;
|
|
if (indicatorRef.current)
|
|
indicatorRef.current.innerHTML = `${i + 1} / ${images.length}`;
|
|
if (navRef.current) {
|
|
const currentThumb = navRef.current.children[i + 1];
|
|
if (currentThumb instanceof HTMLImageElement) {
|
|
const offset =
|
|
-1 *
|
|
(currentThumb.offsetLeft -
|
|
document.documentElement.clientWidth / 2);
|
|
navRef.current.style.left = `${offset}px`;
|
|
|
|
const previouslySelected = navRef.current.getElementsByClassName(
|
|
CLASSNAME_NAVSELECTED
|
|
)?.[0];
|
|
if (previouslySelected)
|
|
previouslySelected.className = CLASSNAME_NAVIMAGE;
|
|
|
|
currentThumb.className = `${CLASSNAME_NAVIMAGE} ${CLASSNAME_NAVSELECTED}`;
|
|
}
|
|
}
|
|
},
|
|
[images]
|
|
);
|
|
|
|
const selectIndex = (e: React.MouseEvent, i: number) => {
|
|
setIndex(i);
|
|
e.stopPropagation();
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (isVisible) {
|
|
if (index.current === null) setIndex(initialIndex);
|
|
document.body.style.overflow = "hidden";
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
(Mousetrap as any).pause();
|
|
}
|
|
}, [initialIndex, isVisible, setIndex]);
|
|
|
|
const toggleSlideshow = useCallback(() => {
|
|
if (slideshowInterval) {
|
|
setSlideshowInterval(null);
|
|
} else if (
|
|
displayedSlideshowInterval !== null &&
|
|
typeof displayedSlideshowInterval !== "undefined"
|
|
) {
|
|
const intervalNumber = Number.parseInt(displayedSlideshowInterval, 10);
|
|
setSlideshowInterval(intervalNumber * SECONDS_TO_MS);
|
|
} else {
|
|
setSlideshowInterval(userSelectedSlideshowDelayOrDefault);
|
|
}
|
|
}, [
|
|
slideshowInterval,
|
|
userSelectedSlideshowDelayOrDefault,
|
|
displayedSlideshowInterval,
|
|
]);
|
|
|
|
usePageVisibility(() => {
|
|
toggleSlideshow();
|
|
});
|
|
|
|
const close = useCallback(() => {
|
|
if (!isFullscreen) {
|
|
hide();
|
|
document.body.style.overflow = "auto";
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
(Mousetrap as any).unpause();
|
|
} else document.exitFullscreen();
|
|
}, [isFullscreen, hide]);
|
|
|
|
const handleClose = (e: React.MouseEvent<HTMLDivElement>) => {
|
|
const { className } = e.target as Element;
|
|
if (className === CLASSNAME_IMAGE) close();
|
|
};
|
|
|
|
const handleLeft = useCallback(
|
|
(isUserAction = true) => {
|
|
if (isSwitchingPage || index.current === -1) return;
|
|
|
|
if (index.current === 0) {
|
|
if (pageCallback) {
|
|
setIsSwitchingPage(true);
|
|
setIndex(-1);
|
|
// Check if calling page wants to swap page
|
|
const repage = pageCallback(-1);
|
|
if (!repage) {
|
|
setIsSwitchingPage(false);
|
|
setIndex(0);
|
|
}
|
|
} else setIndex(images.length - 1);
|
|
} else setIndex((index.current ?? 0) - 1);
|
|
|
|
if (isUserAction && resetIntervalCallback.current) {
|
|
resetIntervalCallback.current();
|
|
}
|
|
},
|
|
[images, setIndex, pageCallback, isSwitchingPage, resetIntervalCallback]
|
|
);
|
|
|
|
const handleRight = useCallback(
|
|
(isUserAction = true) => {
|
|
if (isSwitchingPage) return;
|
|
|
|
if (index.current === images.length - 1) {
|
|
if (pageCallback) {
|
|
setIsSwitchingPage(true);
|
|
setIndex(0);
|
|
const repage = pageCallback?.(1);
|
|
if (!repage) {
|
|
setIsSwitchingPage(false);
|
|
setIndex(images.length - 1);
|
|
}
|
|
} else setIndex(0);
|
|
} else setIndex((index.current ?? 0) + 1);
|
|
|
|
if (isUserAction && resetIntervalCallback.current) {
|
|
resetIntervalCallback.current();
|
|
}
|
|
},
|
|
[images, setIndex, pageCallback, isSwitchingPage, resetIntervalCallback]
|
|
);
|
|
|
|
const handleKey = useCallback(
|
|
(e: KeyboardEvent) => {
|
|
if (e.repeat && (e.key === "ArrowRight" || e.key === "ArrowLeft"))
|
|
setInstant();
|
|
if (e.key === "ArrowLeft") handleLeft();
|
|
else if (e.key === "ArrowRight") handleRight();
|
|
else if (e.key === "Escape") close();
|
|
},
|
|
[setInstant, handleLeft, handleRight, close]
|
|
);
|
|
const handleFullScreenChange = () => {
|
|
if (clearIntervalCallback.current) {
|
|
clearIntervalCallback.current();
|
|
}
|
|
setFullscreen(document.fullscreenElement !== null);
|
|
};
|
|
|
|
const handleTouchStart = (ev: React.TouchEvent<HTMLDivElement>) => {
|
|
setInstantTransition(true);
|
|
|
|
const el = ev.currentTarget;
|
|
if (ev.touches.length !== 1) return;
|
|
|
|
const startX = ev.touches[0].clientX;
|
|
let position = 0;
|
|
|
|
const resetPosition = () => {
|
|
if (carouselRef.current)
|
|
carouselRef.current.style.left = `${(index.current ?? 0) * -100}vw`;
|
|
};
|
|
const handleMove = (e: TouchEvent) => {
|
|
position = e.touches[0].clientX;
|
|
if (carouselRef.current)
|
|
carouselRef.current.style.left = `calc(${
|
|
(index.current ?? 0) * -100
|
|
}vw + ${e.touches[0].clientX - startX}px)`;
|
|
};
|
|
const handleEnd = () => {
|
|
const diff = position - startX;
|
|
if (diff <= -50) handleRight();
|
|
else if (diff >= 50) handleLeft();
|
|
else resetPosition();
|
|
// eslint-disable-next-line @typescript-eslint/no-use-before-define
|
|
cleanup();
|
|
};
|
|
const handleCancel = () => {
|
|
// eslint-disable-next-line @typescript-eslint/no-use-before-define
|
|
cleanup();
|
|
resetPosition();
|
|
};
|
|
const cleanup = () => {
|
|
el.removeEventListener("touchmove", handleMove);
|
|
el.removeEventListener("touchend", handleEnd);
|
|
el.removeEventListener("touchcancel", handleCancel);
|
|
setInstantTransition(false);
|
|
};
|
|
|
|
el.addEventListener("touchmove", handleMove);
|
|
el.addEventListener("touchend", handleEnd);
|
|
el.addEventListener("touchcancel", handleCancel);
|
|
};
|
|
|
|
const [clearCallback, resetCallback] = useInterval(
|
|
() => {
|
|
handleRight(false);
|
|
},
|
|
slideshowEnabled ? slideshowInterval : null
|
|
);
|
|
|
|
resetIntervalCallback.current = resetCallback;
|
|
clearIntervalCallback.current = clearCallback;
|
|
|
|
useEffect(() => {
|
|
if (isVisible) {
|
|
document.addEventListener("keydown", handleKey);
|
|
document.addEventListener("fullscreenchange", handleFullScreenChange);
|
|
}
|
|
return () => {
|
|
document.removeEventListener("keydown", handleKey);
|
|
document.removeEventListener("fullscreenchange", handleFullScreenChange);
|
|
};
|
|
}, [isVisible, handleKey]);
|
|
|
|
const toggleFullscreen = useCallback(() => {
|
|
if (!isFullscreen) containerRef.current?.requestFullscreen();
|
|
else document.exitFullscreen();
|
|
}, [isFullscreen]);
|
|
|
|
const handleSlideshowIntervalChange = (newSlideshowInterval: number) => {
|
|
setSlideshowInterval(newSlideshowInterval);
|
|
};
|
|
|
|
const navItems = images.map((image, i) => (
|
|
<img
|
|
src={image.paths.thumbnail ?? ""}
|
|
alt=""
|
|
className={cx(CLASSNAME_NAVIMAGE, {
|
|
[CLASSNAME_NAVSELECTED]: i === index.current,
|
|
})}
|
|
onClick={(e: React.MouseEvent) => selectIndex(e, i)}
|
|
role="presentation"
|
|
loading="lazy"
|
|
key={image.paths.thumbnail}
|
|
/>
|
|
));
|
|
|
|
const onDelayChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
let numberValue = Number.parseInt(e.currentTarget.value, 10);
|
|
// Without this exception, the blocking of updates for invalid values is even weirder
|
|
if (e.currentTarget.value === "-" || e.currentTarget.value === "") {
|
|
setDisplayedSlideshowInterval(e.currentTarget.value);
|
|
return;
|
|
}
|
|
|
|
setDisplayedSlideshowInterval(e.currentTarget.value);
|
|
if (slideshowInterval !== null) {
|
|
numberValue =
|
|
numberValue >= MIN_VALID_INTERVAL_SECONDS
|
|
? numberValue
|
|
: MIN_VALID_INTERVAL_SECONDS;
|
|
handleSlideshowIntervalChange(numberValue * SECONDS_TO_MS);
|
|
}
|
|
};
|
|
|
|
const currentIndex = index.current === null ? initialIndex : index.current;
|
|
|
|
const DelayForm: React.FC<{}> = () => (
|
|
<>
|
|
<FormLabel column sm="5">
|
|
Delay (Sec)
|
|
</FormLabel>
|
|
<Col sm="4">
|
|
<FormControl
|
|
type="number"
|
|
className="text-input"
|
|
min={1}
|
|
value={displayedSlideshowInterval ?? 0}
|
|
onChange={onDelayChange}
|
|
size="sm"
|
|
id="delay-input"
|
|
/>
|
|
</Col>
|
|
</>
|
|
);
|
|
|
|
const delayPopover = (
|
|
<Popover id="basic-bitch">
|
|
<Popover.Title>Set slideshow delay</Popover.Title>
|
|
<Popover.Content>
|
|
<InputGroup>
|
|
<DelayForm />
|
|
</InputGroup>
|
|
</Popover.Content>
|
|
</Popover>
|
|
);
|
|
|
|
const element = isVisible ? (
|
|
<div
|
|
className={CLASSNAME}
|
|
role="presentation"
|
|
ref={containerRef}
|
|
onMouseDown={handleClose}
|
|
>
|
|
{images.length > 0 && !isLoading && !isSwitchingPage ? (
|
|
<>
|
|
<div className={CLASSNAME_HEADER}>
|
|
<div className={CLASSNAME_LEFT_SPACER} />
|
|
<div className={CLASSNAME_INDICATOR}>
|
|
<span>{pageHeader}</span>
|
|
<b ref={indicatorRef}>
|
|
{`${currentIndex + 1} / ${images.length}`}
|
|
</b>
|
|
</div>
|
|
<div className={CLASSNAME_RIGHT}>
|
|
{slideshowEnabled && (
|
|
<>
|
|
<div className={CLASSNAME_DELAY}>
|
|
<div className={CLASSNAME_DELAY_ICON}>
|
|
<OverlayTrigger
|
|
trigger="click"
|
|
placement="bottom"
|
|
overlay={delayPopover}
|
|
>
|
|
<Button variant="link" title="Slideshow delay settings">
|
|
<Icon icon="cog" />
|
|
</Button>
|
|
</OverlayTrigger>
|
|
</div>
|
|
<InputGroup className={CLASSNAME_DELAY_INLINE}>
|
|
<DelayForm />
|
|
</InputGroup>
|
|
</div>
|
|
<Button
|
|
variant="link"
|
|
onClick={toggleSlideshow}
|
|
title="Toggle Slideshow"
|
|
>
|
|
<Icon
|
|
icon={slideshowInterval !== null ? "pause" : "play"}
|
|
/>
|
|
</Button>
|
|
</>
|
|
)}
|
|
{document.fullscreenEnabled && (
|
|
<Button
|
|
variant="link"
|
|
onClick={toggleFullscreen}
|
|
title="Toggle Fullscreen"
|
|
>
|
|
<Icon icon="expand" />
|
|
</Button>
|
|
)}
|
|
<Button
|
|
variant="link"
|
|
onClick={() => close()}
|
|
title="Close Lightbox"
|
|
>
|
|
<Icon icon="times" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<div className={CLASSNAME_DISPLAY} onTouchStart={handleTouchStart}>
|
|
{images.length > 1 && (
|
|
<Button
|
|
variant="link"
|
|
onClick={handleLeft}
|
|
className={`${CLASSNAME_NAVBUTTON} d-none d-lg-block`}
|
|
>
|
|
<Icon icon="chevron-left" />
|
|
</Button>
|
|
)}
|
|
|
|
<div
|
|
className={cx(CLASSNAME_CAROUSEL, {
|
|
[CLASSNAME_INSTANT]: instantTransition,
|
|
})}
|
|
style={{ left: `${currentIndex * -100}vw` }}
|
|
ref={carouselRef}
|
|
>
|
|
{images.map((image) => (
|
|
<div className={CLASSNAME_IMAGE} key={image.paths.image}>
|
|
<picture>
|
|
<source
|
|
srcSet={image.paths.image ?? ""}
|
|
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>
|
|
))}
|
|
</div>
|
|
|
|
{images.length > 1 && (
|
|
<Button
|
|
variant="link"
|
|
onClick={handleRight}
|
|
className={`${CLASSNAME_NAVBUTTON} d-none d-lg-block`}
|
|
>
|
|
<Icon icon="chevron-right" />
|
|
</Button>
|
|
)}
|
|
</div>
|
|
{showNavigation && !isFullscreen && images.length > 1 && (
|
|
<div className={CLASSNAME_NAV} ref={navRef}>
|
|
<Button
|
|
variant="link"
|
|
onClick={() => setIndex(images.length - 1)}
|
|
className={CLASSNAME_NAVBUTTON}
|
|
>
|
|
<Icon icon="arrow-left" className="mr-4" />
|
|
</Button>
|
|
{navItems}
|
|
<Button
|
|
variant="link"
|
|
onClick={() => setIndex(0)}
|
|
className={CLASSNAME_NAVBUTTON}
|
|
>
|
|
<Icon icon="arrow-right" className="ml-4" />
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</>
|
|
) : (
|
|
<LoadingIndicator />
|
|
)}
|
|
</div>
|
|
) : (
|
|
<></>
|
|
);
|
|
|
|
return element;
|
|
};
|