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

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

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

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

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