matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pl-fe: i'm so tired of working on this

Browse Source 
Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
This commit is contained in:
nicole mikołajczyk
2026-02-06 18:06:16 +01:00
parent 850bb75dc0
commit 8352114f21
2 changed files with 37 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/pl-fe/src/features/ui/components/zoomable-image.tsx
View File

@ -133,7 +133,7 @@ const ZoomableImage: React.FC<IZoomableImage> = ({
if (value === MIN_SCALE) { if (value === MIN_SCALE) {
onZoomChange(false); onZoomChange(false);
} else { } else {
onZoomChange(true); // onZoomChange(true);
} }
}, },
}, },
@ -251,7 +251,7 @@ const ZoomableImage: React.FC<IZoomableImage> = ({
); );
if (!zoomedIn) { 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) { } else if (style.scale.get() === MIN_SCALE) {
void api.start({ scale: zoomMatrixRef.current.initialScale, x: 0, y: 0 }); void api.start({ scale: zoomMatrixRef.current.initialScale, x: 0, y: 0 });
} }

75
packages/pl-fe/src/modals/media-modal.tsx
View File

@ -2,7 +2,7 @@ import { animated, useSpring } from '@react-spring/web';
import { Link } from '@tanstack/react-router'; import { Link } from '@tanstack/react-router';
import { useDrag } from '@use-gesture/react'; import { useDrag } from '@use-gesture/react';
import clsx from 'clsx'; 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 { defineMessages, useIntl, FormattedMessage } from 'react-intl';
import { fetchStatusWithContext } from 'pl-fe/actions/statuses'; import { fetchStatusWithContext } from 'pl-fe/actions/statuses';
@ -68,23 +68,20 @@ const MediaModal: React.FC<MediaModalProps & BaseModalProps> = (props) => {
const [wrapperStyles, api] = useSpring(() => ({ const [wrapperStyles, api] = useSpring(() => ({
x: `-${index * 100}%`, x: `-${index * 100}%`,
})); }), [index]);
const handleChangeIndex = useCallback( const handleChangeIndex = useCallback((newIndex: number, animate = false) => {
(newIndex: number, animate = false) => { if (newIndex < 0) {
if (newIndex < 0) { newIndex = media.length + newIndex;
newIndex = media.length + newIndex; } else if (newIndex >= media.length) {
} else if (newIndex >= media.length) { newIndex = newIndex % media.length;
newIndex = newIndex % media.length; }
} setIndex(newIndex);
setIndex(newIndex); setZoomedIn(false);
setZoomedIn(false); if (animate) {
if (animate) { void api.start({ x: `calc(-${newIndex * 100}% + 0px)` });
void api.start({ x: `calc(-${newIndex * 100}% + 0px)` }); }
} }, [api, media.length]);
},
[api, media.length],
);
const handlePrevClick = useCallback(() => { const handlePrevClick = useCallback(() => {
handleChangeIndex(index - 1, true); handleChangeIndex(index - 1, true);
}, [handleChangeIndex, index]); }, [handleChangeIndex, index]);
@ -92,19 +89,19 @@ const MediaModal: React.FC<MediaModalProps & BaseModalProps> = (props) => {
handleChangeIndex(index + 1, true); handleChangeIndex(index + 1, true);
}, [handleChangeIndex, index]); }, [handleChangeIndex, index]);
const [viewportDimensions, setViewportDimensions] = useState<{ // const [viewportDimensions, setViewportDimensions] = useState<{
width: number; // width: number;
height: number; // height: number;
}>({ width: 0, height: 0 }); // }>({ width: 0, height: 0 });
const handleRef: RefCallback<HTMLDivElement> = useCallback((ele) => { // const handleRef: RefCallback<HTMLDivElement> = useCallback((ele) => {
if (ele?.clientWidth && ele.clientHeight) { // if (ele?.clientWidth && ele.clientHeight) {
setViewportDimensions({ // setViewportDimensions({
width: ele.clientWidth, // width: ele.clientWidth,
height: ele.clientHeight, // height: ele.clientHeight,
}); // });
} // }
}, []); // }, []);
const hasMultipleImages = media.length > 1; const hasMultipleImages = media.length > 1;
@ -135,7 +132,7 @@ const MediaModal: React.FC<MediaModalProps & BaseModalProps> = (props) => {
// Disable swipe when interacting with video/audio controls or other interactive elements // Disable swipe when interacting with video/audio controls or other interactive elements
const target = event?.target as HTMLElement | null; const target = event?.target as HTMLElement | null;
if (target) { if (target) {
const interactiveParent = target.closest('.video-player__controls'); const interactiveParent = target.closest('.video-player__controls, button');
if (interactiveParent) { if (interactiveParent) {
cancel(); cancel();
return; return;
@ -152,9 +149,7 @@ const MediaModal: React.FC<MediaModalProps & BaseModalProps> = (props) => {
} }
// Set the x position via calc to ensure proper centering regardless of screen size. // Set the x position via calc to ensure proper centering regardless of screen size.
const x = active ? mx : 0; const x = active ? mx : 0;
void api.start({ void api.start({ x: `calc(-${index * 100}% + ${x}px)` });
x: `calc(-${index * 100}% + ${x}px)`,
});
}, },
{ pointer: { capture: false } }, { pointer: { capture: false } },
); );
@ -168,11 +163,11 @@ const MediaModal: React.FC<MediaModalProps & BaseModalProps> = (props) => {
setNavigationHidden(value => !value && userTouching.matches); setNavigationHidden(value => !value && userTouching.matches);
}; };
const currentMedia = media[index]; // const currentMedia = media[index];
const zoomable = // const zoomable =
currentMedia.type === 'image' && currentMedia.meta.original && // currentMedia.type === 'image' && currentMedia.meta.original &&
(currentMedia.meta.original.width > viewportDimensions.width || currentMedia.meta.original.height > viewportDimensions.height); // (currentMedia.meta.original.width > viewportDimensions.width || currentMedia.meta.original.height > viewportDimensions.height);
const handleZoomClick = useCallback(() => { const handleZoomClick = useCallback(() => {
setZoomedIn((prev) => !prev); setZoomedIn((prev) => !prev);
@ -297,7 +292,7 @@ const MediaModal: React.FC<MediaModalProps & BaseModalProps> = (props) => {
{...bind()} {...bind()}
onClick={handleClickOutside} onClick={handleClickOutside}
className='⁂-media-modal__content' className='⁂-media-modal__content'
ref={handleRef} // ref={handleRef}
> >
<animated.div <animated.div
style={wrapperStyles} style={wrapperStyles}
@ -324,7 +319,7 @@ const MediaModal: React.FC<MediaModalProps & BaseModalProps> = (props) => {
/> />
<HStack alignItems='center' space={2}> <HStack alignItems='center' space={2}>
{zoomable && ( {/* {zoomable && (
<IconButton <IconButton
title={intl.formatMessage(zoomedIn ? messages.zoomOut : messages.zoomIn)} title={intl.formatMessage(zoomedIn ? messages.zoomOut : messages.zoomIn)}
src={zoomedIn ? require('@phosphor-icons/core/regular/magnifying-glass-minus.svg') : require('@phosphor-icons/core/regular/magnifying-glass-plus.svg')} src={zoomedIn ? require('@phosphor-icons/core/regular/magnifying-glass-minus.svg') : require('@phosphor-icons/core/regular/magnifying-glass-plus.svg')}
@ -333,7 +328,7 @@ const MediaModal: React.FC<MediaModalProps & BaseModalProps> = (props) => {
iconClassName='h-5 w-5' iconClassName='h-5 w-5'
onClick={handleZoomClick} onClick={handleZoomClick}
/> />
)} )} */}
<IconButton <IconButton
title={intl.formatMessage(messages.download)} title={intl.formatMessage(messages.download)}