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

Sticker View: Fix flickering rlottie and hiding broken video

Browse Source
This commit is contained in:
Alexander Zinchuk 2024-09-06 15:43:07 +02:00
parent 13a3ae0103
commit 2c3b9ce7ad
1 changed files with 8 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -83,7 +83,7 @@ const StickerView: FC<OwnProps> = ({
id, isLottie, stickerSetInfo, emoji, id, isLottie, stickerSetInfo, emoji,
} = sticker; } = sticker;
const [isVideoBroken, markVideoBroken] = useFlag(); const [isVideoBroken, markVideoBroken] = useFlag();
const isUnsupportedVideo = sticker.isVideo && (!IS_WEBM_SUPPORTED || isVideoBroken); const isUnsupportedVideo = sticker.isVideo && !IS_WEBM_SUPPORTED;
const isVideo = sticker.isVideo && !isUnsupportedVideo; const isVideo = sticker.isVideo && !isUnsupportedVideo;
const isStatic = !isLottie && !isVideo; const isStatic = !isLottie && !isVideo;
const previewMediaHash = getStickerMediaHash(sticker, 'preview'); const previewMediaHash = getStickerMediaHash(sticker, 'preview');
@ -109,22 +109,23 @@ const StickerView: FC<OwnProps> = ({
const shouldForcePreview = isUnsupportedVideo || (isStatic ? isSmall : noPlay); const shouldForcePreview = isUnsupportedVideo || (isStatic ? isSmall : noPlay);
const shouldLoadPreview = !customColor && !cachedPreview && (!isReadyToMountFullMedia || shouldForcePreview); const shouldLoadPreview = !customColor && !cachedPreview && (!isReadyToMountFullMedia || shouldForcePreview);
const previewMediaData = useMedia(previewMediaHash, !shouldLoadPreview); const previewMediaData = useMedia(previewMediaHash, !shouldLoadPreview);
const withPreview = shouldLoadPreview || cachedPreview;
const shouldSkipFullMedia = Boolean(shouldForcePreview || ( const shouldSkipFullMedia = 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 || shouldSkipFullMedia);
// If Lottie data is loaded we will only render thumb if it's good enough (from preview) const shouldRenderFullMedia = isReadyToMountFullMedia && fullMediaData && !isVideoBroken;
const [isPlayerReady, markPlayerReady] = useFlag(Boolean(isLottie && fullMediaData && !previewMediaData)); const [isPlayerReady, markPlayerReady] = useFlag();
const isFullMediaReady = shouldRenderFullMedia && (isStatic || isPlayerReady);
const shouldRenderFullMedia = isReadyToMountFullMedia && fullMediaData;
const isFullMediaReady = isReadyToMountFullMedia && fullMediaData && (isStatic || isPlayerReady);
const thumbDataUri = useThumbnail(sticker); const thumbDataUri = useThumbnail(sticker);
const thumbData = cachedPreview || previewMediaData || thumbDataUri; const thumbData = cachedPreview || previewMediaData || thumbDataUri;
const isThumbOpaque = sharedCanvasRef && !withTranslucentThumb; const isThumbOpaque = sharedCanvasRef && !withTranslucentThumb;
const thumbClassNames = useMediaTransition(thumbData && !isFullMediaReady); const thumbClassNames = useMediaTransition(thumbData && !isFullMediaReady);
const fullMediaClassNames = useMediaTransition(isFullMediaReady); const fullMediaClassNames = useMediaTransition(isFullMediaReady);
const noTransition = isLottie && previewMediaData; const noTransition = isLottie && withPreview;
const coords = useCoordsInSharedCanvas(containerRef, sharedCanvasRef); const coords = useCoordsInSharedCanvas(containerRef, sharedCanvasRef);