diff --git a/src/components/mediaViewer/MediaViewer.tsx b/src/components/mediaViewer/MediaViewer.tsx index 4650afa57..bfcd09f95 100644 --- a/src/components/mediaViewer/MediaViewer.tsx +++ b/src/components/mediaViewer/MediaViewer.tsx @@ -274,14 +274,17 @@ const MediaViewer: FC = ({ } }, [isGif, isVideo]); + const mediaIdsRef = useStateRef(mediaIds); + const getMediaId = useCallback((fromId?: number, direction?: number): number | undefined => { if (fromId === undefined) return undefined; - const index = mediaIds.indexOf(fromId); - if ((direction === -1 && index > 0) || (direction === 1 && index < mediaIds.length - 1)) { - return mediaIds[index + direction]; + const mIds = mediaIdsRef.current; + const index = mIds.indexOf(fromId); + if ((direction === -1 && index > 0) || (direction === 1 && index < mIds.length - 1)) { + return mIds[index + direction]; } return undefined; - }, [mediaIds]); + }, [mediaIdsRef]); const handleBeforeDelete = useCallback(() => { if (mediaIds.length <= 1) { diff --git a/src/components/mediaViewer/MediaViewerSlides.tsx b/src/components/mediaViewer/MediaViewerSlides.tsx index 6e087163f..743d6a7ee 100644 --- a/src/components/mediaViewer/MediaViewerSlides.tsx +++ b/src/components/mediaViewer/MediaViewerSlides.tsx @@ -99,6 +99,7 @@ const MediaViewerSlides: FC = ({ const rightSlideRef = useRef(null); const lastTransformRef = useRef({ x: 0, y: 0, scale: 1 }); const swipeDirectionRef = useRef(undefined); + const initialContentRectRef = useRef(undefined); const isReleasedRef = useRef(false); const [isActive, setIsActive] = useState(true); const [getZoomChange] = useZoomChange(); @@ -130,7 +131,7 @@ const MediaViewerSlides: FC = ({ const setIsActiveDebounced = useDebouncedCallback((value) => setIsActive(value), [], DEBOUNCE_ACTIVE, true); - const shouldCloseOnVideo = isGif && !IS_IOS; + const shouldCloseOnVideo = Boolean(isGif && !IS_IOS); const clickXThreshold = IS_TOUCH_ENV ? 40 : windowWidth / 10; const handleControlsVisibility = useCallback((e: React.MouseEvent) => { @@ -144,8 +145,12 @@ const MediaViewerSlides: FC = ({ useTimeout(() => setControlsVisible(true), ANIMATION_DURATION); useEffect(() => { - setActiveMediaId(mediaId); - }, [mediaId, setActiveMediaId]); + const { scale, x, y } = transformRef.current; + // Only update active media if slide is in default position + if (x === 0 && y === 0 && scale === 1) { + setActiveMediaId(mediaId); + } + }, [mediaId, setActiveMediaId, transformRef]); useLayoutEffect(() => { const { x, y, scale } = getTransform(); @@ -179,7 +184,6 @@ const MediaViewerSlides: FC = ({ y: 0, }; let lastGestureTime = Date.now(); - let initialContentRect: DOMRect; let content: HTMLElement | null; const setLastGestureTime = debounce(() => { lastGestureTime = Date.now(); @@ -256,6 +260,7 @@ const MediaViewerSlides: FC = ({ { x, y, scale }: Transform, offsetTop = 0, ): [Transform, boolean, boolean] => { + const initialContentRect = initialContentRectRef.current; if (!initialContentRect) return [{ x, y, scale }, true, true]; // Get current content boundaries let inBoundsX = true; @@ -429,7 +434,7 @@ const MediaViewerSlides: FC = ({ content = activeSlideRef.current.querySelector('img, video'); if (!content) return; // Store initial content rect, without transformations - initialContentRect = content!.getBoundingClientRect(); + initialContentRectRef.current = content.getBoundingClientRect(); } }, onDrag: (event, captureEvent, { diff --git a/src/util/captureEvents.ts b/src/util/captureEvents.ts index 0af6d389a..058fff5b4 100644 --- a/src/util/captureEvents.ts +++ b/src/util/captureEvents.ts @@ -347,6 +347,7 @@ export function captureEvents(element: HTMLElement, options: CaptureOptions) { const delta = clamp(e.deltaY, -25, 25); wheelZoom -= delta * 0.01; wheelZoom = clamp(wheelZoom, minZoom * 0.5, maxZoom * 3); + isZooming = true; options.onZoom(e, { zoom: round(wheelZoom, 2), initialCenterX: initialTouchCenter.x, @@ -404,9 +405,7 @@ export function captureEvents(element: HTMLElement, options: CaptureOptions) { if (!metaKeyPressed && !isZooming) { // Check if this event produced by user scroll and not by inertia const isUserEvent = lethargy.check(e); - if (wheelZoom !== 1) { - onWheelDrag(e); - } else if (isUserEvent) { + if (wheelZoom !== 1 || isUserEvent) { onWheelDrag(e); } }