From 8352114f210b87358024ff20235023e624ef42d0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?nicole=20miko=C5=82ajczyk?= Date: Fri, 6 Feb 2026 18:06:16 +0100 Subject: [PATCH] pl-fe: i'm so tired of working on this MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: nicole mikołajczyk --- .../features/ui/components/zoomable-image.tsx | 4 +- packages/pl-fe/src/modals/media-modal.tsx | 75 +++++++++---------- 2 files changed, 37 insertions(+), 42 deletions(-) diff --git a/packages/pl-fe/src/features/ui/components/zoomable-image.tsx b/packages/pl-fe/src/features/ui/components/zoomable-image.tsx index b3ad4b55e..d35c94281 100644 --- a/packages/pl-fe/src/features/ui/components/zoomable-image.tsx +++ b/packages/pl-fe/src/features/ui/components/zoomable-image.tsx @@ -133,7 +133,7 @@ const ZoomableImage: React.FC = ({ if (value === MIN_SCALE) { onZoomChange(false); } else { - onZoomChange(true); + // onZoomChange(true); } }, }, @@ -251,7 +251,7 @@ const ZoomableImage: React.FC = ({ ); if (!zoomedIn) { - void api.start({ scale: MIN_SCALE, x: 0, y: 0 }); + // void api.start({ scale: MIN_SCALE, x: 0, y: 0 }); } else if (style.scale.get() === MIN_SCALE) { void api.start({ scale: zoomMatrixRef.current.initialScale, x: 0, y: 0 }); } diff --git a/packages/pl-fe/src/modals/media-modal.tsx b/packages/pl-fe/src/modals/media-modal.tsx index c6626c21a..347e1221d 100644 --- a/packages/pl-fe/src/modals/media-modal.tsx +++ b/packages/pl-fe/src/modals/media-modal.tsx @@ -2,7 +2,7 @@ import { animated, useSpring } from '@react-spring/web'; import { Link } from '@tanstack/react-router'; import { useDrag } from '@use-gesture/react'; import clsx from 'clsx'; -import React, { type RefCallback, useCallback, useEffect, useMemo, useState } from 'react'; +import React, { useCallback, useEffect, useMemo, useState } from 'react'; import { defineMessages, useIntl, FormattedMessage } from 'react-intl'; import { fetchStatusWithContext } from 'pl-fe/actions/statuses'; @@ -68,23 +68,20 @@ const MediaModal: React.FC = (props) => { const [wrapperStyles, api] = useSpring(() => ({ x: `-${index * 100}%`, - })); + }), [index]); - const handleChangeIndex = useCallback( - (newIndex: number, animate = false) => { - if (newIndex < 0) { - newIndex = media.length + newIndex; - } else if (newIndex >= media.length) { - newIndex = newIndex % media.length; - } - setIndex(newIndex); - setZoomedIn(false); - if (animate) { - void api.start({ x: `calc(-${newIndex * 100}% + 0px)` }); - } - }, - [api, media.length], - ); + const handleChangeIndex = useCallback((newIndex: number, animate = false) => { + if (newIndex < 0) { + newIndex = media.length + newIndex; + } else if (newIndex >= media.length) { + newIndex = newIndex % media.length; + } + setIndex(newIndex); + setZoomedIn(false); + if (animate) { + void api.start({ x: `calc(-${newIndex * 100}% + 0px)` }); + } + }, [api, media.length]); const handlePrevClick = useCallback(() => { handleChangeIndex(index - 1, true); }, [handleChangeIndex, index]); @@ -92,19 +89,19 @@ const MediaModal: React.FC = (props) => { handleChangeIndex(index + 1, true); }, [handleChangeIndex, index]); - const [viewportDimensions, setViewportDimensions] = useState<{ - width: number; - height: number; - }>({ width: 0, height: 0 }); + // const [viewportDimensions, setViewportDimensions] = useState<{ + // width: number; + // height: number; + // }>({ width: 0, height: 0 }); - const handleRef: RefCallback = useCallback((ele) => { - if (ele?.clientWidth && ele.clientHeight) { - setViewportDimensions({ - width: ele.clientWidth, - height: ele.clientHeight, - }); - } - }, []); + // const handleRef: RefCallback = useCallback((ele) => { + // if (ele?.clientWidth && ele.clientHeight) { + // setViewportDimensions({ + // width: ele.clientWidth, + // height: ele.clientHeight, + // }); + // } + // }, []); const hasMultipleImages = media.length > 1; @@ -135,7 +132,7 @@ const MediaModal: React.FC = (props) => { // Disable swipe when interacting with video/audio controls or other interactive elements const target = event?.target as HTMLElement | null; if (target) { - const interactiveParent = target.closest('.video-player__controls'); + const interactiveParent = target.closest('.video-player__controls, button'); if (interactiveParent) { cancel(); return; @@ -152,9 +149,7 @@ const MediaModal: React.FC = (props) => { } // Set the x position via calc to ensure proper centering regardless of screen size. const x = active ? mx : 0; - void api.start({ - x: `calc(-${index * 100}% + ${x}px)`, - }); + void api.start({ x: `calc(-${index * 100}% + ${x}px)` }); }, { pointer: { capture: false } }, ); @@ -168,11 +163,11 @@ const MediaModal: React.FC = (props) => { setNavigationHidden(value => !value && userTouching.matches); }; - const currentMedia = media[index]; + // const currentMedia = media[index]; - const zoomable = - currentMedia.type === 'image' && currentMedia.meta.original && - (currentMedia.meta.original.width > viewportDimensions.width || currentMedia.meta.original.height > viewportDimensions.height); + // const zoomable = + // currentMedia.type === 'image' && currentMedia.meta.original && + // (currentMedia.meta.original.width > viewportDimensions.width || currentMedia.meta.original.height > viewportDimensions.height); const handleZoomClick = useCallback(() => { setZoomedIn((prev) => !prev); @@ -297,7 +292,7 @@ const MediaModal: React.FC = (props) => { {...bind()} onClick={handleClickOutside} className='⁂-media-modal__content' - ref={handleRef} + // ref={handleRef} > = (props) => { /> - {zoomable && ( + {/* {zoomable && ( = (props) => { iconClassName='h-5 w-5' onClick={handleZoomClick} /> - )} + )} */}