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

Status Picker: Fix flicker on closing (#5273)

Browse Source
This commit is contained in:
zubiden 2024-12-06 19:44:14 +04:00 committed by Alexander Zinchuk
parent a1ad9d3b90
commit de37fd6dda
3 changed files with 12 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/common/CustomEmojiPicker.tsx
View File

@ -36,6 +36,7 @@ import useAppLayout from '../../hooks/useAppLayout';
import useHorizontalScroll from '../../hooks/useHorizontalScroll'; import useHorizontalScroll from '../../hooks/useHorizontalScroll';
import useLastCallback from '../../hooks/useLastCallback'; import useLastCallback from '../../hooks/useLastCallback';
import useOldLang from '../../hooks/useOldLang'; import useOldLang from '../../hooks/useOldLang';
import usePrevDuringAnimation from '../../hooks/usePrevDuringAnimation';
import useScrolledState from '../../hooks/useScrolledState'; import useScrolledState from '../../hooks/useScrolledState';
import useAsyncRendering from '../right/hooks/useAsyncRendering'; import useAsyncRendering from '../right/hooks/useAsyncRendering';
import { useStickerPickerObservers } from './hooks/useStickerPickerObservers'; import { useStickerPickerObservers } from './hooks/useStickerPickerObservers';
@ -169,6 +170,8 @@ const CustomEmojiPicker: FC<OwnProps & StateProps> = ({
selectStickerSet, selectStickerSet,
} = useStickerPickerObservers(containerRef, headerRef, prefix, isHidden); } = useStickerPickerObservers(containerRef, headerRef, prefix, isHidden);
const canLoadAndPlay = usePrevDuringAnimation(loadAndPlay || undefined, SLIDE_TRANSITION_DURATION);
const lang = useOldLang(); const lang = useOldLang();
const areAddedLoaded = Boolean(addedCustomEmojiIds); const areAddedLoaded = Boolean(addedCustomEmojiIds);
@ -344,7 +347,7 @@ const CustomEmojiPicker: FC<OwnProps & StateProps> = ({
) : ( ) : (
<StickerSetCover <StickerSetCover
stickerSet={stickerSet as ApiStickerSet} stickerSet={stickerSet as ApiStickerSet}
noPlay={!canAnimate || !loadAndPlay} noPlay={!canAnimate || !canLoadAndPlay}
forcePlayback forcePlayback
observeIntersection={observeIntersectionForCovers} observeIntersection={observeIntersectionForCovers}
sharedCanvasRef={withSharedCanvas ? (isHq ? sharedCanvasHqRef : sharedCanvasRef) : undefined} sharedCanvasRef={withSharedCanvas ? (isHq ? sharedCanvasHqRef : sharedCanvasRef) : undefined}
@ -361,7 +364,7 @@ const CustomEmojiPicker: FC<OwnProps & StateProps> = ({
size={STICKER_SIZE_PICKER_HEADER} size={STICKER_SIZE_PICKER_HEADER}
title={stickerSet.title} title={stickerSet.title}
className={buttonClassName} className={buttonClassName}
noPlay={!canAnimate || !loadAndPlay} noPlay={!canAnimate || !canLoadAndPlay}
observeIntersection={observeIntersectionForCovers} observeIntersection={observeIntersectionForCovers}
noContextMenu noContextMenu
isCurrentUserPremium isCurrentUserPremium
@ -427,7 +430,7 @@ const CustomEmojiPicker: FC<OwnProps & StateProps> = ({
<StickerSet <StickerSet
key={stickerSet.id} key={stickerSet.id}
stickerSet={stickerSet} stickerSet={stickerSet}
loadAndPlay={Boolean(canAnimate && loadAndPlay)} loadAndPlay={Boolean(canAnimate && canLoadAndPlay)}
index={i} index={i}
idPrefix={prefix} idPrefix={prefix}
observeIntersection={observeIntersectionForSet} observeIntersection={observeIntersectionForSet}

9
src/components/common/StickerView.tsx
View File

@ -116,11 +116,11 @@ const StickerView: FC<OwnProps> = ({
const previewMediaData = useMedia(previewMediaHash, !shouldLoadPreview); const previewMediaData = useMedia(previewMediaHash, !shouldLoadPreview);
const withPreview = shouldLoadPreview || cachedPreview; const withPreview = shouldLoadPreview || cachedPreview;
const shouldSkipFullMedia = Boolean(shouldForcePreview || ( const shouldSkipLoadingFullMedia = Boolean(shouldForcePreview || (
fullMediaHash === previewMediaHash && (cachedPreview || previewMediaData) fullMediaHash === previewMediaHash && (cachedPreview || previewMediaData)
)); ));
const fullMediaData = useMedia(fullMediaHash || `sticker${id}`, !shouldLoad || shouldSkipFullMedia); const fullMediaData = useMedia(fullMediaHash || `sticker${id}`, !shouldLoad || shouldSkipLoadingFullMedia);
const shouldRenderFullMedia = isReadyToMountFullMedia && !shouldSkipFullMedia && fullMediaData && !isVideoBroken; const shouldRenderFullMedia = isReadyToMountFullMedia && fullMediaData && !isVideoBroken;
const [isPlayerReady, markPlayerReady] = useFlag(); const [isPlayerReady, markPlayerReady] = useFlag();
const isFullMediaReady = shouldRenderFullMedia && (isStatic || isPlayerReady); const isFullMediaReady = shouldRenderFullMedia && (isStatic || isPlayerReady);
@ -148,7 +148,8 @@ const StickerView: FC<OwnProps> = ({
size, size,
(withSharedAnimation ? customColor : undefined), (withSharedAnimation ? customColor : undefined),
dpr, dpr,
].filter(Boolean).join('_')), [customColor, dpr, id, randomIdPrefix, size, withSharedAnimation]); ].filter(Boolean).join('_')
), [id, size, customColor, dpr, withSharedAnimation, randomIdPrefix]);
return ( return (
<> <>

2
src/components/left/main/StatusButton.tsx
View File

@ -40,7 +40,7 @@ const StatusButton: FC<StateProps> = ({ emojiStatus }) => {
useTimeout(loadCurrentUser, delay); useTimeout(loadCurrentUser, delay);
useEffectWithPrevDeps(([prevEmojiStatus]) => { useEffectWithPrevDeps(([prevEmojiStatus]) => {
if (shouldShowEffect && emojiStatus && prevEmojiStatus && emojiStatus.documentId !== prevEmojiStatus.documentId) { if (shouldShowEffect && emojiStatus && emojiStatus.documentId !== prevEmojiStatus?.documentId) {
showEffect(); showEffect();
unmarkShouldShowEffect(); unmarkShouldShowEffect();
} }