gnh1201/mastodon
1
0
Fork 0
mirror of https://github.com/mastodon/mastodon.git synced 2025-11-27 18:10:58 +00:00
Code Issues Actions 17 Packages Projects Releases Wiki Activity

switch back to percentage offsets to avoid using viewport size
Some checks failed
Chromatic / Run Chromatic (push) Has been cancelled
Details

Browse Source
This commit is contained in:
ChaosExAnima 2025-11-18 16:25:34 +01:00
parent 43cada2fc5
commit 10555749d0
No known key found for this signature in database
GPG Key ID: 8F2B333100FB6117
1 changed files with 13 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
app/javascript/mastodon/features/ui/components/media_modal.tsx
View File

@ -46,6 +46,8 @@ interface MediaModalProps {
volume?: number; volume?: number;
} }
const MIN_SWIPE_DISTANCE = 400;
export const MediaModal: FC<MediaModalProps> = forwardRef< export const MediaModal: FC<MediaModalProps> = forwardRef<
HTMLDivElement, HTMLDivElement,
MediaModalProps MediaModalProps
@ -70,7 +72,7 @@ export const MediaModal: FC<MediaModalProps> = forwardRef<
const currentMedia = media.get(index); const currentMedia = media.get(index);
const [wrapperStyles, api] = useSpring(() => ({ const [wrapperStyles, api] = useSpring(() => ({
x: index * -1 * window.innerWidth, x: `-${index * 100}%`,
})); }));
const handleChangeIndex = useCallback( const handleChangeIndex = useCallback(
@ -83,7 +85,7 @@ export const MediaModal: FC<MediaModalProps> = forwardRef<
setIndex(newIndex); setIndex(newIndex);
setZoomedIn(false); setZoomedIn(false);
if (animate) { if (animate) {
void api.start({ x: -1 * newIndex * window.innerWidth }); void api.start({ x: `-${newIndex * 100}%` });
} }
}, },
[api, media.size], [api, media.size],
@ -112,13 +114,18 @@ export const MediaModal: FC<MediaModalProps> = forwardRef<
const bind = useDrag( const bind = useDrag(
({ active, movement: [mx], direction: [xDir], cancel }) => { ({ active, movement: [mx], direction: [xDir], cancel }) => {
if (active && Math.abs(mx) > window.innerWidth / 2) { // If dragging and swipe distance is enough, change the index.
handleChangeIndex(index + (xDir > 0 ? -1 : 1)); if (
active &&
Math.abs(mx) > Math.min(window.innerWidth / 4, MIN_SWIPE_DISTANCE)
) {
handleChangeIndex(index - xDir);
cancel(); cancel();
} }
const x = -1 * index * window.innerWidth + (active ? mx : 0); // Set the x position via calc to ensure proper centering regardless of screen size.
const x = active ? mx : 0;
void api.start({ void api.start({
x, x: `calc(-${index * 100}% + ${x}px)`,
}); });
}, },
{ pointer: { capture: false } }, { pointer: { capture: false } },