ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Media Viewer: Various improvements and fixes (follow-up) (#1669)

Browse Source
This commit is contained in:
Alexander Zinchuk 2022-01-26 01:49:37 +01:00
parent 17a9965d64
commit b78365d21f
1 changed files with 13 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/mediaViewer/MediaViewerSlides.tsx
View File

@ -48,7 +48,7 @@ const DEBOUNCE_ACTIVE = 800;
const MAX_ZOOM = 4; const MAX_ZOOM = 4;
const MIN_ZOOM = 0.6; const MIN_ZOOM = 0.6;
const DOUBLE_TAP_ZOOM = 3; const DOUBLE_TAP_ZOOM = 3;
const CLICK_X_THRESHOLD = 120; const CLICK_X_THRESHOLD = 40;
let cancelAnimation: Function | undefined; let cancelAnimation: Function | undefined;
type Transform = { type Transform = {
@ -106,8 +106,8 @@ const MediaViewerSlides: FC<OwnProps> = ({
const handleToggleFooterVisibility = useCallback((e: React.MouseEvent<HTMLDivElement, MouseEvent>) => { const handleToggleFooterVisibility = useCallback((e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
if (!IS_TOUCH_ENV || !hasFooter || (!isPhoto && !isGif)) return; if (!IS_TOUCH_ENV || !hasFooter || (!isPhoto && !isGif)) return;
if (e.clientX < CLICK_X_THRESHOLD) return; if (e.pageX < CLICK_X_THRESHOLD) return;
if (e.clientX > window.innerWidth - CLICK_X_THRESHOLD) return; if (e.pageX > window.innerWidth - CLICK_X_THRESHOLD) return;
setIsFooterHidden(!isFooterHidden); setIsFooterHidden(!isFooterHidden);
}, [hasFooter, isFooterHidden, isGif, isPhoto]); }, [hasFooter, isFooterHidden, isGif, isPhoto]);
@ -140,9 +140,9 @@ const MediaViewerSlides: FC<OwnProps> = ({
const changeSlide = (e: MouseEvent) => { const changeSlide = (e: MouseEvent) => {
if (transformRef.current.scale !== 1) return false; if (transformRef.current.scale !== 1) return false;
let direction = 0; let direction = 0;
if ((e as MouseEvent).clientX < CLICK_X_THRESHOLD) { if (e.pageX < CLICK_X_THRESHOLD) {
direction = -1; direction = -1;
} else if ((e as MouseEvent).clientX > window.innerWidth - CLICK_X_THRESHOLD) { } else if (e.pageX > window.innerWidth - CLICK_X_THRESHOLD) {
direction = 1; direction = 1;
} }
const mId = getMessageId(activeMessageId, direction); const mId = getMessageId(activeMessageId, direction);
@ -174,14 +174,7 @@ const MediaViewerSlides: FC<OwnProps> = ({
return captureEvents(containerRef.current, { return captureEvents(containerRef.current, {
isNotPassive: true, isNotPassive: true,
excludedClosestSelector: '.VideoPlayerControls, .MediaViewerFooter', excludedClosestSelector: '.VideoPlayerControls, .MediaViewerFooter',
onCapture: (event) => { onCapture: () => {
// Avoid conflicts with swipe-to-back gestures
if (event.type === 'touchstart' && IS_IOS) {
const x = (event as RealTouchEvent).touches[0].pageX;
if (x <= IOS_SCREEN_EDGE_THRESHOLD || x >= window.innerWidth - IOS_SCREEN_EDGE_THRESHOLD) {
event.preventDefault();
}
}
lastGestureTime = Date.now(); lastGestureTime = Date.now();
if (arePropsShallowEqual(transformRef.current, { x: 0, y: 0, scale: 1 })) { if (arePropsShallowEqual(transformRef.current, { x: 0, y: 0, scale: 1 })) {
if (!activeSlideRef.current) return; if (!activeSlideRef.current) return;
@ -195,6 +188,13 @@ const MediaViewerSlides: FC<OwnProps> = ({
dragOffsetX, dragOffsetX,
dragOffsetY, dragOffsetY,
}) => { }) => {
// Avoid conflicts with swipe-to-back gestures
if (IS_IOS) {
const { pageX } = (captureEvent as RealTouchEvent).touches[0];
if (pageX <= IOS_SCREEN_EDGE_THRESHOLD || pageX >= window.innerWidth - IOS_SCREEN_EDGE_THRESHOLD) {
return;
}
}
if (cancelAnimation) { if (cancelAnimation) {
cancelAnimation(); cancelAnimation();
cancelAnimation = undefined; cancelAnimation = undefined;