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; margin-bottom: 0.75rem;
img { img {
position: absolute;
width: 100%; width: 100%;
height: 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 { ApiMediaFormat, ApiSticker } from '../../api/types';
import { STICKER_SIZE_TWO_FA } from '../../config'; 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 { ObserveFn, useIsIntersecting } from '../../hooks/useIntersectionObserver';
import useMedia from '../../hooks/useMedia'; import useMedia from '../../hooks/useMedia';
import useTransitionForMedia from '../../hooks/useTransitionForMedia'; import useTransitionForMedia from '../../hooks/useTransitionForMedia';
@ -37,14 +37,14 @@ const AnimatedEmoji: FC<OwnProps> = ({
const isIntersecting = useIsIntersecting(ref, observeIntersection); const isIntersecting = useIsIntersecting(ref, observeIntersection);
const thumbDataUri = sticker.thumbnail && sticker.thumbnail.dataUri;
const previewBlobUrl = useMedia( const previewBlobUrl = useMedia(
`${localMediaHash}?size=m`, `${localMediaHash}?size=m`,
!isIntersecting && !forceLoadPreview, !isIntersecting && !forceLoadPreview,
ApiMediaFormat.BlobUrl, ApiMediaFormat.BlobUrl,
lastSyncTime, lastSyncTime,
); );
const previewData = previewBlobUrl || (sticker.thumbnail && sticker.thumbnail.dataUri); const { transitionClassNames } = useTransitionForMedia(previewBlobUrl, 'slow');
const { transitionClassNames } = useTransitionForMedia(previewData, 'slow');
const mediaData = useMedia(localMediaHash, !isIntersecting, ApiMediaFormat.Lottie, lastSyncTime); const mediaData = useMedia(localMediaHash, !isIntersecting, ApiMediaFormat.Lottie, lastSyncTime);
const isMediaLoaded = Boolean(mediaData); const isMediaLoaded = Boolean(mediaData);
@ -71,8 +71,11 @@ const AnimatedEmoji: FC<OwnProps> = ({
style={style} style={style}
onClick={handleClick} onClick={handleClick}
> >
{previewData && !isAnimationLoaded && ( {!isAnimationLoaded && thumbDataUri && (
<img src={previewData} className={transitionClassNames} alt="" /> <img src={thumbDataUri} className={sticker.id === LIKE_STICKER_ID ? 'like-sticker-thumb' : undefined} alt="" />
)}
{!isAnimationLoaded && previewBlobUrl && (
<img src={previewBlobUrl} className={transitionClassNames} alt="" />
)} )}
{isMediaLoaded && ( {isMediaLoaded && (
<AnimatedSticker <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 }; export const AVATAR_FULL_DIMENSIONS = { width: 640, height: 640 };
const DEFAULT_MEDIA_DIMENSIONS: IDimensions = { width: 100, height: 100 }; 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; const MOBILE_SCREEN_MAX_MESSAGE_SCREEN_WIDTH = 0.69;
let cachedMaxWidth: number | undefined; let cachedMaxWidth: number | undefined;