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

Animated Emoji: Better preview and thumbnail

Browse Source
This commit is contained in:
Alexander Zinchuk 2021-06-19 12:29:43 +03:00
parent f871fc1945
commit 146a5039a3
2 changed files with 17 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -20,13 +20,14 @@ type OwnProps = {
observeIntersection?: ObserveFn; observeIntersection?: ObserveFn;
isInline?: boolean; isInline?: boolean;
lastSyncTime?: number; lastSyncTime?: number;
forceLoadPreview?: boolean;
}; };
const QUALITY = 1; const QUALITY = 1;
const RESIZE_FACTOR = 0.5; const RESIZE_FACTOR = 0.5;
const AnimatedEmoji: FC<OwnProps> = ({ const AnimatedEmoji: FC<OwnProps> = ({
sticker, isInline = false, observeIntersection, lastSyncTime, sticker, isInline = false, observeIntersection, lastSyncTime, forceLoadPreview,
}) => { }) => {
// eslint-disable-next-line no-null/no-null // eslint-disable-next-line no-null/no-null
const ref = useRef<HTMLDivElement>(null); const ref = useRef<HTMLDivElement>(null);
@ -36,8 +37,14 @@ const AnimatedEmoji: FC<OwnProps> = ({
const isIntersecting = useIsIntersecting(ref, observeIntersection); const isIntersecting = useIsIntersecting(ref, observeIntersection);
const previewBlobUrl = useMedia(`${localMediaHash}?size=m`, !isIntersecting, ApiMediaFormat.BlobUrl, lastSyncTime); const previewBlobUrl = useMedia(
const { transitionClassNames } = useTransitionForMedia(previewBlobUrl, 'slow'); `${localMediaHash}?size=m`,
!isIntersecting && !forceLoadPreview,
ApiMediaFormat.BlobUrl,
lastSyncTime,
);
const previewData = previewBlobUrl || (sticker.thumbnail && sticker.thumbnail.dataUri);
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);
@ -64,8 +71,8 @@ const AnimatedEmoji: FC<OwnProps> = ({
style={style} style={style}
onClick={handleClick} onClick={handleClick}
> >
{previewBlobUrl && !isAnimationLoaded && ( {previewData && !isAnimationLoaded && (
<img src={previewBlobUrl} className={transitionClassNames} alt="" /> <img src={previewData} className={transitionClassNames} alt="" />
)} )}
{isMediaLoaded && ( {isMediaLoaded && (
<AnimatedSticker <AnimatedSticker

6
src/components/middle/message/Message.tsx
View File

@ -46,10 +46,13 @@ import {
isOwnMessage, isOwnMessage,
isReplyMessage, isReplyMessage,
isAnonymousOwnMessage, isAnonymousOwnMessage,
isMessageLocal,
isChatPrivate, isChatPrivate,
getMessageCustomShape, getMessageCustomShape,
isChatChannel, isChatChannel,
getMessageSingleEmoji, getSenderTitle, getUserColorKey, getMessageSingleEmoji,
getSenderTitle,
getUserColorKey,
} from '../../../modules/helpers'; } from '../../../modules/helpers';
import buildClassName from '../../../util/buildClassName'; import buildClassName from '../../../util/buildClassName';
import useEnsureMessage from '../../../hooks/useEnsureMessage'; import useEnsureMessage from '../../../hooks/useEnsureMessage';
@ -538,6 +541,7 @@ const Message: FC<OwnProps & StateProps & DispatchProps> = ({
sticker={animatedEmoji} sticker={animatedEmoji}
observeIntersection={observeIntersectionForMedia} observeIntersection={observeIntersectionForMedia}
lastSyncTime={lastSyncTime} lastSyncTime={lastSyncTime}
forceLoadPreview={isMessageLocal(message)}
/> />
)} )}
{isAlbum && ( {isAlbum && (