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

Animated Emoji: Smooth preloading

Browse Source
This commit is contained in:
Alexander Zinchuk 2021-06-19 15:05:21 +03:00
parent 0b287b0f3d
commit 4099d6392e
3 changed files with 14 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/common/AnimatedEmoji.scss
View File

@ -2,7 +2,12 @@
margin-bottom: 0.75rem;
img {
position: absolute;
width: 100%;
height: 100%;
&.like-sticker-thumb {
transform: scale(0.8);
}
}
}

13
src/components/common/AnimatedEmoji.tsx
View File

@ -5,7 +5,7 @@ import React, {
import { ApiMediaFormat, ApiSticker } from '../../api/types';
import { STICKER_SIZE_TWO_FA } from '../../config';
import { getStickerDimensions } from './helpers/mediaDimensions';
import { getStickerDimensions, LIKE_STICKER_ID } from './helpers/mediaDimensions';
import { ObserveFn, useIsIntersecting } from '../../hooks/useIntersectionObserver';
import useMedia from '../../hooks/useMedia';
import useTransitionForMedia from '../../hooks/useTransitionForMedia';
@ -37,14 +37,14 @@ const AnimatedEmoji: FC<OwnProps> = ({
const isIntersecting = useIsIntersecting(ref, observeIntersection);
const thumbDataUri = sticker.thumbnail && sticker.thumbnail.dataUri;
const previewBlobUrl = useMedia(
`${localMediaHash}?size=m`,
!isIntersecting && !forceLoadPreview,
ApiMediaFormat.BlobUrl,
lastSyncTime,
);
const previewData = previewBlobUrl || (sticker.thumbnail && sticker.thumbnail.dataUri);
const { transitionClassNames } = useTransitionForMedia(previewData, 'slow');
const { transitionClassNames } = useTransitionForMedia(previewBlobUrl, 'slow');
const mediaData = useMedia(localMediaHash, !isIntersecting, ApiMediaFormat.Lottie, lastSyncTime);
const isMediaLoaded = Boolean(mediaData);
@ -71,8 +71,11 @@ const AnimatedEmoji: FC<OwnProps> = ({
style={style}
onClick={handleClick}
>
{previewData && !isAnimationLoaded && (
<img src={previewData} className={transitionClassNames} alt="" />
{!isAnimationLoaded && thumbDataUri && (
<img src={thumbDataUri} className={sticker.id === LIKE_STICKER_ID ? 'like-sticker-thumb' : undefined} alt="" />
)}
{!isAnimationLoaded && previewBlobUrl && (
<img src={previewBlobUrl} className={transitionClassNames} alt="" />
)}
{isMediaLoaded && (
<AnimatedSticker

2
src/components/common/helpers/mediaDimensions.ts
View File

@ -10,7 +10,7 @@ export const ROUND_VIDEO_DIMENSIONS = 200;
export const AVATAR_FULL_DIMENSIONS = { width: 640, height: 640 };
const DEFAULT_MEDIA_DIMENSIONS: IDimensions = { width: 100, height: 100 };
const LIKE_STICKER_ID = '1258816259753933';
export const LIKE_STICKER_ID = '1258816259753933';
const MOBILE_SCREEN_MAX_MESSAGE_SCREEN_WIDTH = 0.69;
let cachedMaxWidth: number | undefined;