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

Media Viewer: Close PiP on message deletion (#6504)

Browse Source
This commit is contained in:
zubiden 2025-11-22 12:54:19 +01:00 committed by Alexander Zinchuk
parent 9d03d14af7
commit 111c702d73
1 changed files with 14 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/mediaViewer/MediaViewer.tsx
View File

@ -50,11 +50,13 @@ import selectViewableMedia from './helpers/getViewableMedia';
import { animateClosing, animateOpening } from './helpers/ghostAnimation'; import { animateClosing, animateOpening } from './helpers/ghostAnimation';
import useAppLayout from '../../hooks/useAppLayout'; import useAppLayout from '../../hooks/useAppLayout';
import useEffectWithPrevDeps from '../../hooks/useEffectWithPrevDeps';
import useFlag from '../../hooks/useFlag'; import useFlag from '../../hooks/useFlag';
import useForceUpdate from '../../hooks/useForceUpdate'; import useForceUpdate from '../../hooks/useForceUpdate';
import useLastCallback from '../../hooks/useLastCallback'; import useLastCallback from '../../hooks/useLastCallback';
import useOldLang from '../../hooks/useOldLang'; import useOldLang from '../../hooks/useOldLang';
import { exitPictureInPictureIfNeeded, PICTURE_IN_PICTURE_SIGNAL } from '../../hooks/usePictureInPicture'; import { exitPictureInPictureIfNeeded, PICTURE_IN_PICTURE_SIGNAL } from '../../hooks/usePictureInPicture';
import usePrevious from '../../hooks/usePrevious';
import usePreviousDeprecated from '../../hooks/usePreviousDeprecated'; import usePreviousDeprecated from '../../hooks/usePreviousDeprecated';
import { dispatchPriorityPlaybackEvent } from '../../hooks/usePriorityPlaybackCheck'; import { dispatchPriorityPlaybackEvent } from '../../hooks/usePriorityPlaybackCheck';
import { useMediaProps } from './hooks/useMediaProps'; import { useMediaProps } from './hooks/useMediaProps';
@ -169,7 +171,6 @@ const MediaViewer = ({
if (media === info.personalPhoto) return false; if (media === info.personalPhoto) return false;
return true; return true;
})(); })();
const isVisible = !isHidden && isOpen;
const messageMediaIds = useMemo(() => { const messageMediaIds = useMemo(() => {
return withDynamicLoading return withDynamicLoading
@ -198,10 +199,10 @@ const MediaViewer = ({
}, [isOpen, getIsPictureInPicture]); }, [isOpen, getIsPictureInPicture]);
useEffect(() => { useEffect(() => {
if (isVisible) { if (!isHidden || !isOpen) {
exitPictureInPictureIfNeeded(); exitPictureInPictureIfNeeded();
} }
}, [isVisible]); }, [isHidden, isOpen]);
useEffect(() => { useEffect(() => {
if (isMobile) { if (isMobile) {
@ -221,17 +222,17 @@ const MediaViewer = ({
}; };
}, [forceUpdate]); }, [forceUpdate]);
const prevMessage = usePreviousDeprecated<ApiMessage | undefined>(message); const prevMessage = usePrevious<ApiMessage | undefined>(message);
const prevIsHidden = usePreviousDeprecated<boolean | undefined>(isHidden); const prevOrigin = usePrevious(origin);
const prevOrigin = usePreviousDeprecated(origin); const prevItem = usePrevious(currentItem);
const prevItem = usePreviousDeprecated(currentItem); const prevBestImageData = usePrevious(bestImageData);
const prevBestImageData = usePreviousDeprecated(bestImageData);
const textParts = message ? renderMessageText({ message, forcePlayback: true, isForMediaViewer: true }) : undefined; const textParts = message ? renderMessageText({ message, forcePlayback: true, isForMediaViewer: true }) : undefined;
const hasFooter = Boolean(textParts); const hasFooter = Boolean(textParts);
const shouldAnimateOpening = prevIsHidden && prevItem !== currentItem;
useEffect(() => { useEffectWithPrevDeps(([prevIsOpen, prevIsHidden]) => {
if (isGhostAnimation && isOpen && (shouldAnimateOpening || !prevItem)) { if (prevIsOpen === isOpen && prevIsHidden === isHidden) return;
if (isGhostAnimation && isOpen && !prevItem) {
beginHeavyAnimation(ANIMATION_DURATION + ANIMATION_END_DELAY); beginHeavyAnimation(ANIMATION_DURATION + ANIMATION_END_DELAY);
animateOpening(hasFooter, origin!, bestImageData!, dimensions!, isVideo, message, mediaIndex); animateOpening(hasFooter, origin!, bestImageData!, dimensions!, isVideo, message, mediaIndex);
} }
@ -241,8 +242,8 @@ const MediaViewer = ({
animateClosing(prevOrigin!, prevBestImageData!, prevMessage, prevItem?.mediaIndex); animateClosing(prevOrigin!, prevBestImageData!, prevMessage, prevItem?.mediaIndex);
} }
}, [ }, [
bestImageData, dimensions, hasFooter, isGhostAnimation, isOpen, isVideo, message, origin, isOpen, isHidden, bestImageData, dimensions, hasFooter, isGhostAnimation, isVideo, message, origin,
prevBestImageData, prevItem, prevMessage, prevOrigin, shouldAnimateOpening, mediaIndex, prevBestImageData, prevItem, prevMessage, prevOrigin, mediaIndex,
]); ]);
const handleClose = useLastCallback(() => closeMediaViewer()); const handleClose = useLastCallback(() => closeMediaViewer());