gnh1201/mastodon
1
0
Fork 0
mirror of https://github.com/mastodon/mastodon.git synced 2025-11-27 10:00:50 +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;
}
const MIN_SWIPE_DISTANCE = 400;
export const MediaModal: FC<MediaModalProps> = forwardRef<
HTMLDivElement,
MediaModalProps
@ -70,7 +72,7 @@ export const MediaModal: FC<MediaModalProps> = forwardRef<
const currentMedia = media.get(index);
const [wrapperStyles, api] = useSpring(() => ({
x: index * -1 * window.innerWidth,
x: `-${index * 100}%`,
}));
const handleChangeIndex = useCallback(
@ -83,7 +85,7 @@ export const MediaModal: FC<MediaModalProps> = forwardRef<
setIndex(newIndex);
setZoomedIn(false);
if (animate) {
void api.start({ x: -1 * newIndex * window.innerWidth });
void api.start({ x: `-${newIndex * 100}%` });
}
},
[api, media.size],
@ -112,13 +114,18 @@ export const MediaModal: FC<MediaModalProps> = forwardRef<
const bind = useDrag(
({ active, movement: [mx], direction: [xDir], cancel }) => {
if (active && Math.abs(mx) > window.innerWidth / 2) {
handleChangeIndex(index + (xDir > 0 ? -1 : 1));
// If dragging and swipe distance is enough, change the index.
if (
active &&
Math.abs(mx) > Math.min(window.innerWidth / 4, MIN_SWIPE_DISTANCE)
) {
handleChangeIndex(index - xDir);
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({
x,
x: `calc(-${index * 100}% + ${x}px)`,
});
},
{ pointer: { capture: false } },