chore: update cinny submodule to latest commit with mobile gesture enhancements and disable route animation on compact view
This commit is contained in:
357
overlay/src/app/components/mobile/MobileSwipeGestureHost.tsx
Normal file
357
overlay/src/app/components/mobile/MobileSwipeGestureHost.tsx
Normal file
@@ -0,0 +1,357 @@
|
||||
import React, { ReactNode, useCallback, useEffect, useRef } from 'react';
|
||||
import { useCompactNav } from '../../hooks/useCompactNav';
|
||||
import { useBackRoute } from '../../hooks/useBackRoute';
|
||||
import { startReplyToEvent } from '../../features/room/replyToMessage';
|
||||
import { mobileSwipeReplyBridgeRef } from './mobileSwipeReplyBridge';
|
||||
import * as css from './mobile-gestures.css';
|
||||
|
||||
const EDGE_WIDTH = 28;
|
||||
const BACK_COMMIT_RATIO = 0.25;
|
||||
const BACK_COMMIT_MIN = 56;
|
||||
const REPLY_THRESHOLD = 48;
|
||||
const REPLY_MAX = 96;
|
||||
const AXIS_LOCK_PX = 10;
|
||||
const AXIS_DOMINANCE = 1.2;
|
||||
const MAX_START_Y_RATIO = 0.88;
|
||||
|
||||
type GesturePhase = 'idle' | 'pending' | 'back' | 'reply';
|
||||
|
||||
type GestureState = {
|
||||
phase: GesturePhase;
|
||||
touchId: number;
|
||||
startX: number;
|
||||
startY: number;
|
||||
messageEl: HTMLElement | null;
|
||||
messageId: string | null;
|
||||
edgeBack: boolean;
|
||||
offset: number;
|
||||
};
|
||||
|
||||
const IDLE_STATE: GestureState = {
|
||||
phase: 'idle',
|
||||
touchId: -1,
|
||||
startX: 0,
|
||||
startY: 0,
|
||||
messageEl: null,
|
||||
messageId: null,
|
||||
edgeBack: false,
|
||||
offset: 0,
|
||||
};
|
||||
|
||||
type MobileSwipeGestureHostProps = {
|
||||
children: ReactNode;
|
||||
};
|
||||
|
||||
const shouldIgnoreBackTarget = (target: EventTarget | null): boolean => {
|
||||
if (!(target instanceof Element)) return true;
|
||||
return Boolean(
|
||||
target.closest(
|
||||
'input, textarea, [contenteditable="true"], [data-allow-text-selection="true"], [data-carousel-scroller], [data-disable-swipe-back="true"]'
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
const shouldIgnoreReplyTarget = (target: EventTarget | null): boolean => {
|
||||
if (!(target instanceof Element)) return true;
|
||||
return Boolean(
|
||||
target.closest(
|
||||
'input, textarea, [contenteditable="true"], [data-allow-text-selection="true"], [data-carousel-scroller], [data-disable-swipe-reply="true"]'
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
const findMessageElement = (target: EventTarget | null): HTMLElement | null => {
|
||||
if (!(target instanceof Element)) return null;
|
||||
return target.closest('[data-message-id]') as HTMLElement | null;
|
||||
};
|
||||
|
||||
const applyBackOffset = (dx: number, width: number): number => {
|
||||
const positive = Math.max(0, dx);
|
||||
if (positive <= width) return positive;
|
||||
return width + (positive - width) * 0.22;
|
||||
};
|
||||
|
||||
const setElementTransform = (el: HTMLElement | null, px: number) => {
|
||||
if (!el) return;
|
||||
el.style.transition = 'none';
|
||||
el.style.transform = `translateX(${px}px)`;
|
||||
};
|
||||
|
||||
const resetElementTransform = (el: HTMLElement | null) => {
|
||||
if (!el) return;
|
||||
el.style.transition = 'none';
|
||||
el.style.transform = '';
|
||||
};
|
||||
|
||||
export function MobileSwipeGestureHost({ children }: MobileSwipeGestureHostProps) {
|
||||
const compact = useCompactNav();
|
||||
const { canGoBack, goBack } = useBackRoute();
|
||||
const backEnabled = compact && canGoBack;
|
||||
const replyEnabled = compact;
|
||||
|
||||
const rootRef = useRef<HTMLDivElement>(null);
|
||||
const contentRef = useRef<HTMLDivElement>(null);
|
||||
const gestureRef = useRef<GestureState>({ ...IDLE_STATE });
|
||||
const scrollLockRef = useRef<HTMLElement | null>(null);
|
||||
|
||||
const unlockScroll = useCallback(() => {
|
||||
if (scrollLockRef.current) {
|
||||
scrollLockRef.current.style.overflow = '';
|
||||
scrollLockRef.current = null;
|
||||
}
|
||||
}, []);
|
||||
|
||||
const lockScroll = useCallback((anchor: HTMLElement) => {
|
||||
unlockScroll();
|
||||
let el: HTMLElement | null = anchor;
|
||||
while (el && el !== document.body) {
|
||||
const style = window.getComputedStyle(el);
|
||||
if (
|
||||
(style.overflowY === 'auto' || style.overflowY === 'scroll') &&
|
||||
el.scrollHeight > el.clientHeight + 1
|
||||
) {
|
||||
scrollLockRef.current = el;
|
||||
el.style.overflow = 'hidden';
|
||||
return;
|
||||
}
|
||||
el = el.parentElement;
|
||||
}
|
||||
}, [unlockScroll]);
|
||||
|
||||
const resetBackTransform = useCallback(() => {
|
||||
resetElementTransform(contentRef.current);
|
||||
document.documentElement.classList.remove('mobile-gesture-lock');
|
||||
}, []);
|
||||
|
||||
const resetReplyTransform = useCallback((messageEl?: HTMLElement | null) => {
|
||||
const bridge = mobileSwipeReplyBridgeRef.current;
|
||||
const el = messageEl ?? gestureRef.current.messageEl;
|
||||
resetElementTransform(el);
|
||||
bridge?.setIndicator(null, false);
|
||||
document.documentElement.classList.remove('mobile-gesture-lock');
|
||||
}, []);
|
||||
|
||||
const resetGesture = useCallback(
|
||||
(messageEl?: HTMLElement | null) => {
|
||||
resetBackTransform();
|
||||
resetReplyTransform(messageEl);
|
||||
unlockScroll();
|
||||
gestureRef.current = { ...IDLE_STATE };
|
||||
},
|
||||
[resetBackTransform, resetReplyTransform, unlockScroll]
|
||||
);
|
||||
|
||||
const updateReplyIndicator = useCallback((messageEl: HTMLElement, offset: number) => {
|
||||
const bridge = mobileSwipeReplyBridgeRef.current;
|
||||
if (!bridge?.layerEl) return;
|
||||
const messageRect = messageEl.getBoundingClientRect();
|
||||
const layerRect = bridge.layerEl.getBoundingClientRect();
|
||||
const top = messageRect.top - layerRect.top + messageRect.height / 2 - 18;
|
||||
bridge.setIndicator(top, Math.abs(offset) >= REPLY_THRESHOLD * 0.6);
|
||||
}, []);
|
||||
|
||||
const lockGesture = useCallback(
|
||||
(phase: 'back' | 'reply', scrollAnchor?: HTMLElement | null) => {
|
||||
gestureRef.current.phase = phase;
|
||||
document.documentElement.classList.add('mobile-gesture-lock');
|
||||
if (scrollAnchor) {
|
||||
lockScroll(scrollAnchor);
|
||||
}
|
||||
},
|
||||
[lockScroll]
|
||||
);
|
||||
|
||||
const finishGesture = useCallback(() => {
|
||||
const gesture = gestureRef.current;
|
||||
if (gesture.phase === 'idle' || gesture.phase === 'pending') {
|
||||
resetGesture();
|
||||
return;
|
||||
}
|
||||
|
||||
if (gesture.phase === 'back') {
|
||||
const width = rootRef.current?.clientWidth ?? window.innerWidth;
|
||||
const shouldCommit =
|
||||
gesture.offset >= Math.max(width * BACK_COMMIT_RATIO, BACK_COMMIT_MIN);
|
||||
|
||||
resetGesture();
|
||||
if (shouldCommit) {
|
||||
goBack();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (gesture.phase === 'reply' && gesture.messageEl && gesture.messageId) {
|
||||
const bridge = mobileSwipeReplyBridgeRef.current;
|
||||
const shouldReply = Math.abs(gesture.offset) >= REPLY_THRESHOLD;
|
||||
const { messageEl, messageId } = gesture;
|
||||
|
||||
resetGesture(messageEl);
|
||||
|
||||
if (shouldReply && bridge) {
|
||||
startReplyToEvent(bridge.room, messageId, bridge.setReplyDraft, bridge.editor);
|
||||
}
|
||||
}
|
||||
}, [goBack, resetGesture]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!compact) return;
|
||||
|
||||
const getActiveTouch = (evt: TouchEvent, touchId: number) =>
|
||||
Array.from(evt.touches).find((touch) => touch.identifier === touchId);
|
||||
|
||||
const getEndedTouch = (evt: TouchEvent, touchId: number) =>
|
||||
Array.from(evt.changedTouches).find((touch) => touch.identifier === touchId);
|
||||
|
||||
const handleTouchStart = (evt: TouchEvent) => {
|
||||
if (gestureRef.current.phase !== 'idle') return;
|
||||
|
||||
const touch = evt.changedTouches[0];
|
||||
if (!touch) return;
|
||||
|
||||
const target = evt.target;
|
||||
if (touch.clientY > window.innerHeight * MAX_START_Y_RATIO) return;
|
||||
|
||||
const messageEl = findMessageElement(target);
|
||||
const messageId = messageEl?.getAttribute('data-message-id') ?? null;
|
||||
|
||||
const canStartBack = backEnabled && !shouldIgnoreBackTarget(target);
|
||||
const canStartReply =
|
||||
replyEnabled &&
|
||||
messageEl &&
|
||||
messageId &&
|
||||
!shouldIgnoreReplyTarget(target) &&
|
||||
mobileSwipeReplyBridgeRef.current;
|
||||
|
||||
if (!canStartBack && !canStartReply) return;
|
||||
|
||||
if (touch.clientX <= EDGE_WIDTH && canStartBack) {
|
||||
evt.preventDefault();
|
||||
gestureRef.current = {
|
||||
phase: 'back',
|
||||
touchId: touch.identifier,
|
||||
startX: touch.clientX,
|
||||
startY: touch.clientY,
|
||||
messageEl: null,
|
||||
messageId: null,
|
||||
edgeBack: true,
|
||||
offset: 0,
|
||||
};
|
||||
document.documentElement.classList.add('mobile-gesture-lock');
|
||||
return;
|
||||
}
|
||||
|
||||
gestureRef.current = {
|
||||
phase: 'pending',
|
||||
touchId: touch.identifier,
|
||||
startX: touch.clientX,
|
||||
startY: touch.clientY,
|
||||
messageEl: canStartReply ? messageEl : null,
|
||||
messageId: canStartReply ? messageId : null,
|
||||
edgeBack: false,
|
||||
offset: 0,
|
||||
};
|
||||
};
|
||||
|
||||
const handleTouchMove = (evt: TouchEvent) => {
|
||||
const gesture = gestureRef.current;
|
||||
if (gesture.phase === 'idle') return;
|
||||
|
||||
const touch = getActiveTouch(evt, gesture.touchId);
|
||||
if (!touch) return;
|
||||
|
||||
const deltaX = touch.clientX - gesture.startX;
|
||||
const deltaY = touch.clientY - gesture.startY;
|
||||
|
||||
if (gesture.phase === 'pending') {
|
||||
if (Math.abs(deltaX) < AXIS_LOCK_PX && Math.abs(deltaY) < AXIS_LOCK_PX) return;
|
||||
|
||||
const horizontal = Math.abs(deltaX) >= Math.abs(deltaY) * AXIS_DOMINANCE;
|
||||
const vertical = Math.abs(deltaY) >= Math.abs(deltaX) * AXIS_DOMINANCE;
|
||||
|
||||
if (vertical) {
|
||||
resetGesture();
|
||||
return;
|
||||
}
|
||||
|
||||
if (!horizontal) return;
|
||||
|
||||
if (deltaX > 0 && backEnabled) {
|
||||
lockGesture('back', contentRef.current);
|
||||
} else if (deltaX < 0 && gesture.messageEl && gesture.messageId) {
|
||||
lockGesture('reply', gesture.messageEl);
|
||||
} else {
|
||||
resetGesture();
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if (gesture.phase === 'back') {
|
||||
if (!evt.cancelable) return;
|
||||
evt.preventDefault();
|
||||
|
||||
const width = rootRef.current?.clientWidth ?? window.innerWidth;
|
||||
const offset = applyBackOffset(deltaX, width);
|
||||
gesture.offset = offset;
|
||||
setElementTransform(contentRef.current, offset);
|
||||
return;
|
||||
}
|
||||
|
||||
if (gesture.phase === 'reply' && gesture.messageEl) {
|
||||
if (!evt.cancelable) return;
|
||||
evt.preventDefault();
|
||||
|
||||
const offset = Math.max(deltaX, -REPLY_MAX);
|
||||
gesture.offset = offset;
|
||||
setElementTransform(gesture.messageEl, offset);
|
||||
updateReplyIndicator(gesture.messageEl, offset);
|
||||
}
|
||||
};
|
||||
|
||||
const handleTouchEnd = (evt: TouchEvent) => {
|
||||
const gesture = gestureRef.current;
|
||||
if (gesture.phase === 'idle') return;
|
||||
|
||||
const touch = getEndedTouch(evt, gesture.touchId);
|
||||
if (!touch) return;
|
||||
|
||||
finishGesture();
|
||||
};
|
||||
|
||||
document.addEventListener('touchstart', handleTouchStart, { capture: true, passive: false });
|
||||
document.addEventListener('touchmove', handleTouchMove, { capture: true, passive: false });
|
||||
document.addEventListener('touchend', handleTouchEnd, { capture: true });
|
||||
document.addEventListener('touchcancel', handleTouchEnd, { capture: true });
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('touchstart', handleTouchStart, { capture: true });
|
||||
document.removeEventListener('touchmove', handleTouchMove, { capture: true });
|
||||
document.removeEventListener('touchend', handleTouchEnd, { capture: true });
|
||||
document.removeEventListener('touchcancel', handleTouchEnd, { capture: true });
|
||||
resetGesture();
|
||||
};
|
||||
}, [backEnabled, compact, finishGesture, lockGesture, replyEnabled, resetGesture, updateReplyIndicator]);
|
||||
|
||||
useEffect(() => {
|
||||
resetGesture();
|
||||
}, [canGoBack, resetGesture]);
|
||||
|
||||
if (!compact) {
|
||||
return <>{children}</>;
|
||||
}
|
||||
|
||||
const showBackChrome = backEnabled;
|
||||
|
||||
return (
|
||||
<div ref={rootRef} className={css.SwipeBackRoot}>
|
||||
{showBackChrome && (
|
||||
<div className={css.SwipeBackUnderlay} aria-hidden>
|
||||
<div className={css.SwipeBackSidebarPeek} />
|
||||
<div className={css.SwipeBackChannelPeek} />
|
||||
</div>
|
||||
)}
|
||||
<div ref={contentRef} className={css.SwipeBackContent}>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user