mirror of
https://github.com/stashapp/stash.git
synced 2026-05-09 05:05:29 +02:00
Merge e2d5f09b70 into 01a7583364
This commit is contained in:
sezzim
GitHub
commit
1083b26321
3 changed files with 413 additions and 241 deletions
|
|
@ -1,4 +1,11 @@
|
|||
import React, { useCallback, useEffect, useRef, useState } from "react";
|
||||
import React, {
|
||||
ForwardedRef,
|
||||
forwardRef,
|
||||
useCallback,
|
||||
useEffect,
|
||||
useRef,
|
||||
useState,
|
||||
} from "react";
|
||||
import {
|
||||
Button,
|
||||
Col,
|
||||
|
|
@ -69,7 +76,9 @@ const CLASSNAME_FOOTER_RIGHT = `${CLASSNAME_FOOTER}-right`;
|
|||
const CLASSNAME_DISPLAY = `${CLASSNAME}-display`;
|
||||
const CLASSNAME_CAROUSEL = `${CLASSNAME}-carousel`;
|
||||
const CLASSNAME_INSTANT = `${CLASSNAME_CAROUSEL}-instant`;
|
||||
const CLASSNAME_SWIPE = `${CLASSNAME_CAROUSEL}-swipe`;
|
||||
const CLASSNAME_IMAGE = `${CLASSNAME_CAROUSEL}-image`;
|
||||
const CLASSNAME_IMAGE_CONTAINER = `${CLASSNAME_CAROUSEL}-image-container`;
|
||||
const CLASSNAME_NAVBUTTON = `${CLASSNAME}-navbutton`;
|
||||
const CLASSNAME_NAV = `${CLASSNAME}-nav`;
|
||||
const CLASSNAME_NAVIMAGE = `${CLASSNAME_NAV}-image`;
|
||||
|
|
@ -82,6 +91,113 @@ const MIN_ZOOM = 0.1;
|
|||
const SCROLL_ZOOM_TIMEOUT = 250;
|
||||
const ZOOM_NONE_EPSILON = 0.015;
|
||||
|
||||
interface ILightboxCarouselProps {
|
||||
transition: string | null;
|
||||
currentIndex: number;
|
||||
images: ILightboxImage[];
|
||||
displayMode: GQL.ImageLightboxDisplayMode;
|
||||
scaleUp: boolean;
|
||||
scrollMode: GQL.ImageLightboxScrollMode;
|
||||
resetPosition?: boolean;
|
||||
zoom: number;
|
||||
scrollAttemptsBeforeChange: number;
|
||||
firstScroll: React.MutableRefObject<number | null>;
|
||||
inScrollGroup: React.MutableRefObject<boolean>;
|
||||
movingLeft: boolean;
|
||||
updateZoom: (v: number) => void;
|
||||
debouncedScrollReset: () => void;
|
||||
handleLeft: () => void;
|
||||
handleRight: () => void;
|
||||
overrideTransition: (t: string) => void;
|
||||
}
|
||||
|
||||
const LightboxCarousel = forwardRef(function (
|
||||
{
|
||||
transition,
|
||||
currentIndex,
|
||||
images,
|
||||
displayMode,
|
||||
scaleUp,
|
||||
scrollMode,
|
||||
resetPosition,
|
||||
zoom,
|
||||
scrollAttemptsBeforeChange,
|
||||
firstScroll,
|
||||
inScrollGroup,
|
||||
movingLeft,
|
||||
updateZoom,
|
||||
debouncedScrollReset,
|
||||
handleLeft,
|
||||
handleRight,
|
||||
overrideTransition,
|
||||
}: ILightboxCarouselProps,
|
||||
carouselRef: ForwardedRef<HTMLDivElement>
|
||||
) {
|
||||
const [carouselShift, setCarouselShift] = useState(0);
|
||||
|
||||
function handleMoveCarousel(delta: number) {
|
||||
overrideTransition(CLASSNAME_INSTANT);
|
||||
setCarouselShift(carouselShift + delta);
|
||||
}
|
||||
|
||||
function handleReleaseCarousel(
|
||||
event: React.PointerEvent,
|
||||
swipeDuration: number,
|
||||
cancelled: boolean
|
||||
): boolean {
|
||||
const cappedDuration = Math.max(50, Math.min(500, swipeDuration)) / 1000;
|
||||
const adjustedShift = carouselShift / (2 * cappedDuration);
|
||||
let changed = false;
|
||||
if (!cancelled && adjustedShift < -window.innerWidth / 2) {
|
||||
handleRight();
|
||||
changed = true;
|
||||
} else if (!cancelled && adjustedShift > window.innerWidth / 2) {
|
||||
handleLeft();
|
||||
changed = true;
|
||||
}
|
||||
setCarouselShift(0);
|
||||
overrideTransition(CLASSNAME_SWIPE);
|
||||
return changed;
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={CLASSNAME_CAROUSEL + (transition ? ` ${transition}` : "")}
|
||||
style={{ left: `calc(${currentIndex * -100}vw + ${carouselShift}px)` }}
|
||||
ref={carouselRef}
|
||||
>
|
||||
{images.map((image, i) => (
|
||||
<div className={`${CLASSNAME_IMAGE_CONTAINER}`} key={image.paths.image}>
|
||||
{i >= currentIndex - 1 && i <= currentIndex + 1 ? (
|
||||
<LightboxImage
|
||||
src={image.paths.image ?? ""}
|
||||
width={image.visual_files?.[0]?.width ?? 0}
|
||||
height={image.visual_files?.[0]?.height ?? 0}
|
||||
displayMode={displayMode}
|
||||
scaleUp={scaleUp}
|
||||
scrollMode={scrollMode}
|
||||
resetPosition={resetPosition}
|
||||
zoom={i === currentIndex ? zoom : 1}
|
||||
scrollAttemptsBeforeChange={scrollAttemptsBeforeChange}
|
||||
firstScroll={firstScroll}
|
||||
inScrollGroup={inScrollGroup}
|
||||
current={i === currentIndex}
|
||||
alignBottom={movingLeft}
|
||||
setZoom={updateZoom}
|
||||
debouncedScrollReset={debouncedScrollReset}
|
||||
onLeft={handleLeft}
|
||||
onRight={handleRight}
|
||||
isVideo={isVideo(image.visual_files?.[0] ?? {})}
|
||||
moveCarousel={handleMoveCarousel}
|
||||
releaseCarousel={handleReleaseCarousel}
|
||||
/>
|
||||
) : undefined}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
interface IProps {
|
||||
images: ILightboxImage[];
|
||||
isVisible: boolean;
|
||||
|
|
@ -117,7 +233,6 @@ export const LightboxComponent: React.FC<IProps> = ({
|
|||
const [index, setIndex] = useState<number | null>(null);
|
||||
const [movingLeft, setMovingLeft] = useState(false);
|
||||
const oldIndex = useRef<number | null>(null);
|
||||
const [instantTransition, setInstantTransition] = useState(false);
|
||||
const [isSwitchingPage, setIsSwitchingPage] = useState(true);
|
||||
const [isFullscreen, setFullscreen] = useState(false);
|
||||
const [showOptions, setShowOptions] = useState(false);
|
||||
|
|
@ -144,7 +259,6 @@ export const LightboxComponent: React.FC<IProps> = ({
|
|||
|
||||
const containerRef = useRef<HTMLDivElement | null>(null);
|
||||
const overlayTarget = useRef<HTMLButtonElement | null>(null);
|
||||
const carouselRef = useRef<HTMLDivElement | null>(null);
|
||||
const indicatorRef = useRef<HTMLDivElement | null>(null);
|
||||
const navRef = useRef<HTMLDivElement | null>(null);
|
||||
const clearIntervalCallback = useRef<() => void>();
|
||||
|
|
@ -201,6 +315,11 @@ export const LightboxComponent: React.FC<IProps> = ({
|
|||
);
|
||||
|
||||
const disableAnimation = config?.interface.imageLightbox.disableAnimation;
|
||||
const defaultTransition = disableAnimation ? CLASSNAME_INSTANT : null;
|
||||
|
||||
const [transition, setTransition] = useState<string | null>(
|
||||
defaultTransition
|
||||
);
|
||||
|
||||
function setSlideshowDelay(v: number) {
|
||||
setLightboxSettings({ slideshowDelay: v });
|
||||
|
|
@ -249,15 +368,18 @@ export const LightboxComponent: React.FC<IProps> = ({
|
|||
}
|
||||
}, [isSwitchingPage, images, index]);
|
||||
|
||||
const disableInstantTransition = useDebounce(
|
||||
() => setInstantTransition(false),
|
||||
const restoreTransition = useDebounce(
|
||||
() => setTransition(defaultTransition),
|
||||
400
|
||||
);
|
||||
|
||||
const setInstant = useCallback(() => {
|
||||
setInstantTransition(true);
|
||||
disableInstantTransition();
|
||||
}, [disableInstantTransition]);
|
||||
const overrideTransition = useCallback(
|
||||
(t: string) => {
|
||||
setTransition(t);
|
||||
restoreTransition();
|
||||
},
|
||||
[restoreTransition]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (images.length < 2) return;
|
||||
|
|
@ -359,10 +481,6 @@ export const LightboxComponent: React.FC<IProps> = ({
|
|||
(isUserAction = true) => {
|
||||
if (isSwitchingPage || index === -1) return;
|
||||
|
||||
if (disableAnimation) {
|
||||
setInstant();
|
||||
}
|
||||
|
||||
setShowChapters(false);
|
||||
setMovingLeft(true);
|
||||
|
||||
|
|
@ -380,25 +498,13 @@ export const LightboxComponent: React.FC<IProps> = ({
|
|||
resetIntervalCallback.current();
|
||||
}
|
||||
},
|
||||
[
|
||||
images,
|
||||
pageCallback,
|
||||
isSwitchingPage,
|
||||
resetIntervalCallback,
|
||||
index,
|
||||
disableAnimation,
|
||||
setInstant,
|
||||
]
|
||||
[images, pageCallback, isSwitchingPage, resetIntervalCallback, index]
|
||||
);
|
||||
|
||||
const handleRight = useCallback(
|
||||
(isUserAction = true) => {
|
||||
if (isSwitchingPage) return;
|
||||
|
||||
if (disableAnimation) {
|
||||
setInstant();
|
||||
}
|
||||
|
||||
setMovingLeft(false);
|
||||
setShowChapters(false);
|
||||
|
||||
|
|
@ -423,8 +529,6 @@ export const LightboxComponent: React.FC<IProps> = ({
|
|||
isSwitchingPage,
|
||||
resetIntervalCallback,
|
||||
index,
|
||||
disableAnimation,
|
||||
setInstant,
|
||||
]
|
||||
);
|
||||
|
||||
|
|
@ -439,12 +543,12 @@ export const LightboxComponent: React.FC<IProps> = ({
|
|||
const handleKey = useCallback(
|
||||
(e: KeyboardEvent) => {
|
||||
if (e.repeat && (e.key === "ArrowRight" || e.key === "ArrowLeft"))
|
||||
setInstant();
|
||||
overrideTransition(CLASSNAME_INSTANT);
|
||||
if (e.key === "ArrowLeft") handleLeft();
|
||||
else if (e.key === "ArrowRight") handleRight();
|
||||
else if (e.key === "Escape") close();
|
||||
},
|
||||
[setInstant, handleLeft, handleRight, close]
|
||||
[overrideTransition, handleLeft, handleRight, close]
|
||||
);
|
||||
const handleFullScreenChange = () => {
|
||||
if (clearIntervalCallback.current) {
|
||||
|
|
@ -883,42 +987,25 @@ export const LightboxComponent: React.FC<IProps> = ({
|
|||
<Icon icon={faChevronLeft} />
|
||||
</Button>
|
||||
)}
|
||||
|
||||
<div
|
||||
className={cx(CLASSNAME_CAROUSEL, {
|
||||
[CLASSNAME_INSTANT]: instantTransition,
|
||||
})}
|
||||
style={{ left: `${currentIndex * -100}vw` }}
|
||||
ref={carouselRef}
|
||||
>
|
||||
{images.map((image, i) => (
|
||||
<div className={`${CLASSNAME_IMAGE}`} key={image.paths.image}>
|
||||
{i >= currentIndex - 1 && i <= currentIndex + 1 ? (
|
||||
<LightboxImage
|
||||
src={image.paths.image ?? ""}
|
||||
width={image.visual_files?.[0]?.width ?? 0}
|
||||
height={image.visual_files?.[0]?.height ?? 0}
|
||||
displayMode={displayMode}
|
||||
scaleUp={scaleUp}
|
||||
scrollMode={scrollMode}
|
||||
resetPosition={resetPosition}
|
||||
zoom={i === currentIndex ? zoom : 1}
|
||||
scrollAttemptsBeforeChange={scrollAttemptsBeforeChange}
|
||||
firstScroll={firstScroll}
|
||||
inScrollGroup={inScrollGroup}
|
||||
current={i === currentIndex}
|
||||
alignBottom={movingLeft}
|
||||
setZoom={updateZoom}
|
||||
debouncedScrollReset={debouncedScrollReset}
|
||||
onLeft={handleLeft}
|
||||
onRight={handleRight}
|
||||
isVideo={isVideo(image.visual_files?.[0] ?? {})}
|
||||
/>
|
||||
) : undefined}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<LightboxCarousel
|
||||
transition={transition}
|
||||
currentIndex={currentIndex}
|
||||
images={images}
|
||||
displayMode={displayMode}
|
||||
scaleUp={scaleUp}
|
||||
scrollMode={scrollMode}
|
||||
resetPosition={resetPosition}
|
||||
zoom={zoom}
|
||||
scrollAttemptsBeforeChange={scrollAttemptsBeforeChange}
|
||||
firstScroll={firstScroll}
|
||||
inScrollGroup={inScrollGroup}
|
||||
movingLeft={movingLeft}
|
||||
updateZoom={updateZoom}
|
||||
debouncedScrollReset={debouncedScrollReset}
|
||||
handleLeft={handleLeft}
|
||||
handleRight={handleRight}
|
||||
overrideTransition={overrideTransition}
|
||||
/>
|
||||
{allowNavigation && (
|
||||
<Button
|
||||
variant="link"
|
||||
|
|
|
|||
|
|
@ -1,5 +1,13 @@
|
|||
import React, { useEffect, useRef, useState, useCallback } from "react";
|
||||
import React, {
|
||||
MutableRefObject,
|
||||
useEffect,
|
||||
useRef,
|
||||
useState,
|
||||
useCallback,
|
||||
} from "react";
|
||||
import useResizeObserver from "@react-hook/resize-observer";
|
||||
import * as GQL from "src/core/generated-graphql";
|
||||
import cx from "classnames";
|
||||
|
||||
const ZOOM_STEP = 1.1;
|
||||
const ZOOM_FACTOR = 700;
|
||||
|
|
@ -11,6 +19,7 @@ const SCROLL_PAN_FACTOR = 2;
|
|||
const CLASSNAME = "Lightbox";
|
||||
const CLASSNAME_CAROUSEL = `${CLASSNAME}-carousel`;
|
||||
const CLASSNAME_IMAGE = `${CLASSNAME_CAROUSEL}-image`;
|
||||
const CLASSNAME_IMAGE_PAN = `${CLASSNAME_IMAGE}-pan`;
|
||||
|
||||
function calculateDefaultZoom(
|
||||
width: number,
|
||||
|
|
@ -50,6 +59,28 @@ function calculateDefaultZoom(
|
|||
return newZoom;
|
||||
}
|
||||
|
||||
interface IDimension {
|
||||
width: number;
|
||||
height: number;
|
||||
}
|
||||
|
||||
export const useContainerDimensions = <
|
||||
T extends HTMLElement = HTMLDivElement
|
||||
>(): [MutableRefObject<T | null>, IDimension] => {
|
||||
const target = useRef<T | null>(null);
|
||||
const [dimension, setDimension] = useState<IDimension>({
|
||||
width: 0,
|
||||
height: 0,
|
||||
});
|
||||
|
||||
useResizeObserver(target, (entry) => {
|
||||
const { inlineSize: width, blockSize: height } = entry.contentBoxSize[0];
|
||||
setDimension({ width, height });
|
||||
});
|
||||
|
||||
return [target, dimension];
|
||||
};
|
||||
|
||||
interface IProps {
|
||||
src: string;
|
||||
width: number;
|
||||
|
|
@ -71,6 +102,12 @@ interface IProps {
|
|||
debouncedScrollReset: () => void;
|
||||
onLeft: () => void;
|
||||
onRight: () => void;
|
||||
moveCarousel: (v: number) => void;
|
||||
releaseCarousel: (
|
||||
ev: React.PointerEvent,
|
||||
swipeDuration: number,
|
||||
cancelled: boolean
|
||||
) => boolean;
|
||||
isVideo: boolean;
|
||||
}
|
||||
|
||||
|
|
@ -92,38 +129,35 @@ export const LightboxImage: React.FC<IProps> = ({
|
|||
debouncedScrollReset,
|
||||
onLeft,
|
||||
onRight,
|
||||
moveCarousel,
|
||||
releaseCarousel,
|
||||
isVideo,
|
||||
}) => {
|
||||
const [defaultZoom, setDefaultZoom] = useState(1);
|
||||
const [moving, setMoving] = useState(false);
|
||||
const [defaultZoom, setDefaultZoom] = useState<number | null>(null);
|
||||
const [positionX, setPositionX] = useState(0);
|
||||
const [positionY, setPositionY] = useState(0);
|
||||
const [imageWidth, setImageWidth] = useState(width);
|
||||
const [imageHeight, setImageHeight] = useState(height);
|
||||
const [boxWidth, setBoxWidth] = useState(0);
|
||||
const [boxHeight, setBoxHeight] = useState(0);
|
||||
const dimensionsProvided = width > 0 && height > 0;
|
||||
const [containerRef, { width: boxWidth, height: boxHeight }] =
|
||||
useContainerDimensions();
|
||||
|
||||
const mouseDownEvent = useRef<MouseEvent>();
|
||||
const resetPositionRef = useRef(resetPosition);
|
||||
|
||||
const container = React.createRef<HTMLDivElement>();
|
||||
const startPoints = useRef<number[]>([0, 0]);
|
||||
// Panning and swipe navigation are tracked in startPoint. Pinch zoom is
|
||||
// tracked in prevDiff. They are undefined if no action of that type is in
|
||||
// progress.
|
||||
const startPoint = useRef<number[] | undefined>();
|
||||
const startTime = useRef<number>(0);
|
||||
const pointerCache = useRef<React.PointerEvent[]>([]);
|
||||
const prevDiff = useRef<number | undefined>();
|
||||
|
||||
const scrollAttempts = useRef(0);
|
||||
|
||||
useEffect(() => {
|
||||
const box = container.current;
|
||||
if (box) {
|
||||
setBoxWidth(box.offsetWidth);
|
||||
setBoxHeight(box.offsetHeight);
|
||||
}
|
||||
|
||||
function toggleVideoPlay() {
|
||||
if (container.current) {
|
||||
let openVideo = container.current.getElementsByTagName("video");
|
||||
if (containerRef.current) {
|
||||
let openVideo = containerRef.current.getElementsByTagName("video");
|
||||
if (openVideo.length > 0) {
|
||||
let rect = openVideo[0].getBoundingClientRect();
|
||||
if (Math.abs(rect.x) < document.body.clientWidth / 2) {
|
||||
|
|
@ -138,7 +172,7 @@ export const LightboxImage: React.FC<IProps> = ({
|
|||
setTimeout(() => {
|
||||
toggleVideoPlay();
|
||||
}, 250);
|
||||
}, [container]);
|
||||
}, [containerRef]);
|
||||
|
||||
useEffect(() => {
|
||||
if (dimensionsProvided) {
|
||||
|
|
@ -161,27 +195,30 @@ export const LightboxImage: React.FC<IProps> = ({
|
|||
};
|
||||
}, [src, dimensionsProvided]);
|
||||
|
||||
const calcPanBounds = useCallback(
|
||||
(appliedZoom: number) => {
|
||||
const xRange = Math.max(appliedZoom * imageWidth - boxWidth, 0);
|
||||
const yRange = Math.max(appliedZoom * imageHeight - boxHeight, 0);
|
||||
const nonZero = xRange != 0 || yRange != 0;
|
||||
return {
|
||||
minX: -xRange / 2,
|
||||
maxX: xRange / 2,
|
||||
minY: -yRange / 2,
|
||||
maxY: yRange / 2,
|
||||
nonZero,
|
||||
};
|
||||
},
|
||||
[imageWidth, boxWidth, imageHeight, boxHeight]
|
||||
);
|
||||
const panBounds =
|
||||
defaultZoom !== null
|
||||
? calcPanBounds(defaultZoom * zoom)
|
||||
: { minX: 0, maxX: 0, minY: 0, maxY: 0, nonZero: false };
|
||||
|
||||
const minMaxY = useCallback(
|
||||
(appliedZoom: number) => {
|
||||
let minY, maxY: number;
|
||||
const inBounds = appliedZoom * imageHeight <= boxHeight;
|
||||
|
||||
// NOTE: I don't even know how these work, but they do
|
||||
if (!inBounds) {
|
||||
if (imageHeight > boxHeight) {
|
||||
minY =
|
||||
(appliedZoom * imageHeight - imageHeight) / 2 -
|
||||
appliedZoom * imageHeight +
|
||||
boxHeight;
|
||||
maxY = (appliedZoom * imageHeight - imageHeight) / 2;
|
||||
} else {
|
||||
minY = (boxHeight - appliedZoom * imageHeight) / 2;
|
||||
maxY = (appliedZoom * imageHeight - boxHeight) / 2;
|
||||
}
|
||||
} else {
|
||||
minY = Math.min((boxHeight - imageHeight) / 2, 0);
|
||||
maxY = minY;
|
||||
}
|
||||
const minY = Math.min((boxHeight - appliedZoom * imageHeight) / 2, 0);
|
||||
const maxY = Math.max((appliedZoom * imageHeight - boxHeight) / 2, 0);
|
||||
|
||||
return [minY, maxY];
|
||||
},
|
||||
|
|
@ -190,33 +227,21 @@ export const LightboxImage: React.FC<IProps> = ({
|
|||
|
||||
const calculateInitialPosition = useCallback(
|
||||
(appliedZoom: number) => {
|
||||
// Center image from container's center
|
||||
const newPositionX = Math.min((boxWidth - imageWidth) / 2, 0);
|
||||
let newPositionY: number;
|
||||
|
||||
if (displayMode === GQL.ImageLightboxDisplayMode.FitXy) {
|
||||
newPositionY = Math.min((boxHeight - imageHeight) / 2, 0);
|
||||
} else {
|
||||
// otherwise, align image with container
|
||||
const [minY, maxY] = minMaxY(appliedZoom);
|
||||
if (!alignBottom) {
|
||||
newPositionY = maxY;
|
||||
} else {
|
||||
newPositionY = minY;
|
||||
}
|
||||
}
|
||||
// If image is smaller than container, place in center. Otherwise, align
|
||||
// the left side of the image with the left side of the container, and
|
||||
// align either the top or bottom of the image with the corresponding
|
||||
// edge of container, depending on whether navigation is forwards or
|
||||
// backwards.
|
||||
const [minY, maxY] = minMaxY(appliedZoom);
|
||||
const newPositionX = Math.max(
|
||||
(appliedZoom * imageWidth - boxWidth) / 2,
|
||||
0
|
||||
);
|
||||
const newPositionY = alignBottom ? minY : maxY;
|
||||
|
||||
return [newPositionX, newPositionY];
|
||||
},
|
||||
[
|
||||
displayMode,
|
||||
boxWidth,
|
||||
imageWidth,
|
||||
boxHeight,
|
||||
imageHeight,
|
||||
alignBottom,
|
||||
minMaxY,
|
||||
]
|
||||
[boxWidth, imageWidth, alignBottom, minMaxY]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -267,6 +292,9 @@ export const LightboxImage: React.FC<IProps> = ({
|
|||
]);
|
||||
|
||||
useEffect(() => {
|
||||
if (defaultZoom === null) {
|
||||
return;
|
||||
}
|
||||
if (resetPosition !== resetPositionRef.current) {
|
||||
resetPositionRef.current = resetPosition;
|
||||
|
||||
|
|
@ -352,7 +380,7 @@ export const LightboxImage: React.FC<IProps> = ({
|
|||
}
|
||||
|
||||
function onImageScrollPanY(ev: React.WheelEvent, infinite: boolean) {
|
||||
if (!current) return;
|
||||
if (!current || defaultZoom === null) return;
|
||||
|
||||
const [minY, maxY] = minMaxY(zoom * defaultZoom);
|
||||
|
||||
|
|
@ -386,6 +414,8 @@ export const LightboxImage: React.FC<IProps> = ({
|
|||
}
|
||||
|
||||
function onImageScroll(ev: React.WheelEvent) {
|
||||
if (defaultZoom === null) return;
|
||||
|
||||
const absDeltaY = Math.abs(ev.deltaY);
|
||||
const firstDeltaY = firstScroll.current;
|
||||
// detect infinite scrolling (mousepad, mouse with infinite scrollwheel)
|
||||
|
|
@ -405,6 +435,9 @@ export const LightboxImage: React.FC<IProps> = ({
|
|||
percent = ev.deltaY < 0 ? ZOOM_STEP : 1 / ZOOM_STEP;
|
||||
}
|
||||
setZoom(zoom * percent);
|
||||
const bounds = calcPanBounds(defaultZoom * zoom * percent);
|
||||
setPositionX(Math.max(bounds.minX, Math.min(bounds.maxX, positionX)));
|
||||
setPositionY(Math.max(bounds.minY, Math.min(bounds.maxY, positionY)));
|
||||
break;
|
||||
case GQL.ImageLightboxScrollMode.PanY:
|
||||
onImageScrollPanY(ev, infinite);
|
||||
|
|
@ -422,76 +455,6 @@ export const LightboxImage: React.FC<IProps> = ({
|
|||
debouncedScrollReset();
|
||||
}
|
||||
|
||||
function onImageMouseOver(ev: React.MouseEvent) {
|
||||
if (!moving) return;
|
||||
|
||||
if (!ev.buttons) {
|
||||
setMoving(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const posX = ev.pageX - startPoints.current[0];
|
||||
const posY = ev.pageY - startPoints.current[1];
|
||||
startPoints.current = [ev.pageX, ev.pageY];
|
||||
|
||||
setPositionX(positionX + posX);
|
||||
setPositionY(positionY + posY);
|
||||
}
|
||||
|
||||
function onImageMouseDown(ev: React.MouseEvent) {
|
||||
startPoints.current = [ev.pageX, ev.pageY];
|
||||
setMoving(true);
|
||||
|
||||
mouseDownEvent.current = ev.nativeEvent;
|
||||
}
|
||||
|
||||
function onImageMouseUp(ev: React.MouseEvent) {
|
||||
if (ev.button !== 0) return;
|
||||
|
||||
if (
|
||||
!mouseDownEvent.current ||
|
||||
ev.timeStamp - mouseDownEvent.current.timeStamp > 200
|
||||
) {
|
||||
// not a click - ignore
|
||||
return;
|
||||
}
|
||||
|
||||
// must be a click
|
||||
if (
|
||||
ev.pageX !== startPoints.current[0] ||
|
||||
ev.pageY !== startPoints.current[1]
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (ev.nativeEvent.offsetX >= (ev.target as HTMLElement).offsetWidth / 2) {
|
||||
onRight();
|
||||
} else {
|
||||
onLeft();
|
||||
}
|
||||
}
|
||||
|
||||
function onTouchStart(ev: React.TouchEvent) {
|
||||
ev.preventDefault();
|
||||
if (ev.touches.length === 1) {
|
||||
startPoints.current = [ev.touches[0].pageX, ev.touches[0].pageY];
|
||||
setMoving(true);
|
||||
}
|
||||
}
|
||||
|
||||
function onTouchMove(ev: React.TouchEvent) {
|
||||
if (!moving) return;
|
||||
|
||||
if (ev.touches.length === 1) {
|
||||
const posX = ev.touches[0].pageX - startPoints.current[0];
|
||||
const posY = ev.touches[0].pageY - startPoints.current[1];
|
||||
startPoints.current = [ev.touches[0].pageX, ev.touches[0].pageY];
|
||||
|
||||
setPositionX(positionX + posX);
|
||||
setPositionY(positionY + posY);
|
||||
}
|
||||
}
|
||||
|
||||
function onPointerDown(ev: React.PointerEvent) {
|
||||
// replace pointer event with the same id, if applicable
|
||||
pointerCache.current = pointerCache.current.filter(
|
||||
|
|
@ -500,15 +463,77 @@ export const LightboxImage: React.FC<IProps> = ({
|
|||
|
||||
pointerCache.current.push(ev);
|
||||
prevDiff.current = undefined;
|
||||
|
||||
startTime.current = ev.timeStamp;
|
||||
if (pointerCache.current.length === 1) {
|
||||
startPoint.current = [ev.clientX, ev.clientY];
|
||||
} else if (
|
||||
pointerCache.current.length === 2 &&
|
||||
startPoint.current !== undefined
|
||||
) {
|
||||
const centerX = Math.abs(ev.clientX + startPoint.current[0]) / 2;
|
||||
const centerY = Math.abs(ev.clientY + startPoint.current[1]) / 2;
|
||||
startPoint.current = [centerX, centerY];
|
||||
}
|
||||
}
|
||||
|
||||
function onPointerUp(ev: React.PointerEvent) {
|
||||
let found = false;
|
||||
|
||||
for (let i = 0; i < pointerCache.current.length; i++) {
|
||||
if (pointerCache.current[i].pointerId === ev.pointerId) {
|
||||
pointerCache.current.splice(i, 1);
|
||||
found = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (!found || pointerCache.current.length !== 0) {
|
||||
if (pointerCache.current.length === 1) {
|
||||
// If we are transitioning from pinch zoom to pan, reset this
|
||||
// so we don't pan relative to the old center point.
|
||||
startPoint.current = [
|
||||
pointerCache.current[0].clientX,
|
||||
pointerCache.current[0].clientY,
|
||||
];
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (ev.pointerType === "touch" && startPoint.current !== null) {
|
||||
// Swipe navigation, returns true if actually moved to another image.
|
||||
if (releaseCarousel(ev, ev.timeStamp - startTime.current, false)) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if (
|
||||
ev.button === 0 &&
|
||||
ev.timeStamp - startTime.current <= 200 &&
|
||||
startPoint.current !== undefined &&
|
||||
ev.clientX === startPoint.current[0] &&
|
||||
ev.clientY === startPoint.current[1]
|
||||
) {
|
||||
// Click or tap navigation
|
||||
|
||||
if (ev.clientX >= window.innerWidth / 2) {
|
||||
onRight();
|
||||
} else {
|
||||
onLeft();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function onPointerCancel(ev: React.PointerEvent) {
|
||||
for (let i = 0; i < pointerCache.current.length; i++) {
|
||||
if (pointerCache.current[i].pointerId === ev.pointerId) {
|
||||
pointerCache.current.splice(i, 1);
|
||||
if (ev.pointerType === "touch" && pointerCache.current.length === 0) {
|
||||
releaseCarousel(ev, ev.timeStamp - startTime.current, true);
|
||||
}
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function onPointerMove(ev: React.PointerEvent) {
|
||||
|
|
@ -516,30 +541,89 @@ export const LightboxImage: React.FC<IProps> = ({
|
|||
const cachedIndex = pointerCache.current.findIndex(
|
||||
(c) => c.pointerId === ev.pointerId
|
||||
);
|
||||
if (cachedIndex !== -1) {
|
||||
pointerCache.current[cachedIndex] = ev;
|
||||
}
|
||||
|
||||
// compare the difference between the two pointers
|
||||
if (pointerCache.current.length === 2) {
|
||||
if (cachedIndex === -1 || defaultZoom === null) return;
|
||||
|
||||
pointerCache.current[cachedIndex] = ev;
|
||||
|
||||
if (pointerCache.current.length === 2 && startPoint.current !== undefined) {
|
||||
// Pinch zoom
|
||||
|
||||
// compare the difference between the two pointers
|
||||
const ev1 = pointerCache.current[0];
|
||||
const ev2 = pointerCache.current[1];
|
||||
const diffX = Math.abs(ev1.clientX - ev2.clientX);
|
||||
const diffY = Math.abs(ev1.clientY - ev2.clientY);
|
||||
const diff = Math.sqrt(diffX ** 2 + diffY ** 2);
|
||||
const centerX = Math.abs(ev1.clientX + ev2.clientX) / 2;
|
||||
const centerY = Math.abs(ev1.clientY + ev2.clientY) / 2;
|
||||
const deltaX = centerX - startPoint.current[0];
|
||||
const deltaY = centerY - startPoint.current[1];
|
||||
startPoint.current = [centerX, centerY];
|
||||
|
||||
if (prevDiff.current !== undefined) {
|
||||
const diffDiff = diff - prevDiff.current;
|
||||
const factor = (Math.abs(diffDiff) / 20) * 0.1 + 1;
|
||||
|
||||
if (diffDiff > 0) {
|
||||
setZoom(zoom * factor);
|
||||
} else if (diffDiff < 0) {
|
||||
setZoom((zoom * 1) / factor);
|
||||
}
|
||||
let newZoom = diffDiff > 0 ? zoom * factor : zoom / factor;
|
||||
setZoom(newZoom);
|
||||
const bounds = calcPanBounds(defaultZoom * newZoom);
|
||||
|
||||
const newPositionX = Math.max(
|
||||
bounds.minX,
|
||||
Math.min(
|
||||
bounds.maxX,
|
||||
(diffDiff > 0 ? positionX * factor : positionX / factor) + deltaX
|
||||
)
|
||||
);
|
||||
const newPositionY = Math.max(
|
||||
bounds.minY,
|
||||
Math.min(
|
||||
bounds.maxY,
|
||||
(diffDiff > 0 ? positionY * factor : positionY / factor) + deltaY
|
||||
)
|
||||
);
|
||||
|
||||
setPositionX(newPositionX);
|
||||
setPositionY(newPositionY);
|
||||
}
|
||||
|
||||
prevDiff.current = diff;
|
||||
} else if (
|
||||
pointerCache.current.length === 1 &&
|
||||
startPoint.current !== undefined &&
|
||||
pointerCache.current[0].pointerType === "touch" &&
|
||||
panBounds.minX === panBounds.maxX
|
||||
) {
|
||||
// Swipe navigation (touch only, and only when panning is not possible)
|
||||
const deltaX = ev.clientX - startPoint.current[0];
|
||||
startPoint.current = [ev.clientX, ev.clientY];
|
||||
moveCarousel(deltaX);
|
||||
} else if (
|
||||
pointerCache.current.length === 1 &&
|
||||
startPoint.current !== undefined
|
||||
) {
|
||||
// Panning
|
||||
|
||||
if (!ev.buttons) {
|
||||
return;
|
||||
}
|
||||
|
||||
const deltaX = ev.clientX - startPoint.current[0];
|
||||
const deltaY = ev.clientY - startPoint.current[1];
|
||||
startPoint.current = [ev.clientX, ev.clientY];
|
||||
|
||||
const newPositionX = Math.max(
|
||||
panBounds.minX,
|
||||
Math.min(panBounds.maxX, positionX + deltaX)
|
||||
);
|
||||
const newPositionY = Math.max(
|
||||
panBounds.minY,
|
||||
Math.min(panBounds.maxY, positionY + deltaY)
|
||||
);
|
||||
|
||||
setPositionX(newPositionX);
|
||||
setPositionY(newPositionY);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -547,35 +631,35 @@ export const LightboxImage: React.FC<IProps> = ({
|
|||
|
||||
return (
|
||||
<div
|
||||
ref={container}
|
||||
className={`${CLASSNAME_IMAGE}`}
|
||||
ref={containerRef}
|
||||
className={cx(CLASSNAME_IMAGE, {
|
||||
[CLASSNAME_IMAGE_PAN]: panBounds.nonZero,
|
||||
})}
|
||||
style={{ touchAction: "none" }}
|
||||
onWheel={(e) => onContainerScroll(e)}
|
||||
onPointerDown={onPointerDown}
|
||||
onPointerMove={onPointerMove}
|
||||
onPointerUp={onPointerUp}
|
||||
onPointerCancel={onPointerCancel}
|
||||
>
|
||||
{defaultZoom ? (
|
||||
<picture
|
||||
style={{
|
||||
transform: `translate(${positionX}px, ${positionY}px) scale(${
|
||||
defaultZoom * zoom
|
||||
})`,
|
||||
}}
|
||||
>
|
||||
<source srcSet={src} media="(min-width: 800px)" />
|
||||
<picture>
|
||||
{/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}
|
||||
<ImageView
|
||||
style={{
|
||||
touchAction: "none",
|
||||
position: "relative",
|
||||
left: "50%",
|
||||
top: "50%",
|
||||
transform: `translate(-50%, -50%) translate(${positionX}px, ${positionY}px) scale(${
|
||||
defaultZoom * zoom
|
||||
})`,
|
||||
}}
|
||||
loop={isVideo}
|
||||
src={src}
|
||||
alt=""
|
||||
draggable={false}
|
||||
style={{ touchAction: "none" }}
|
||||
onWheel={current ? (e) => onImageScroll(e) : undefined}
|
||||
onMouseDown={onImageMouseDown}
|
||||
onMouseUp={onImageMouseUp}
|
||||
onMouseMove={onImageMouseOver}
|
||||
onTouchStart={onTouchStart}
|
||||
onTouchMove={onTouchMove}
|
||||
onPointerDown={onPointerDown}
|
||||
onPointerUp={onPointerUp}
|
||||
onPointerMove={onPointerMove}
|
||||
/>
|
||||
</picture>
|
||||
) : undefined}
|
||||
|
|
|
|||
|
|
@ -144,28 +144,29 @@
|
|||
transition-duration: 0ms;
|
||||
}
|
||||
|
||||
&-image {
|
||||
&-swipe {
|
||||
transition-duration: 200ms;
|
||||
transition-timing-function: ease-out;
|
||||
}
|
||||
|
||||
&-image-container {
|
||||
content-visibility: auto;
|
||||
display: flex;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
picture {
|
||||
display: flex;
|
||||
margin: auto;
|
||||
position: relative;
|
||||
|
||||
> div {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
&-image {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
img {
|
||||
cursor: pointer;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
&-pan {
|
||||
img {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue