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

Avatar: Avoid redundant renders

Browse Source
This commit is contained in:
Alexander Zinchuk 2023-04-15 13:51:03 +02:00
parent b83ff5181b
commit 604ee46454
2 changed files with 13 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/common/Avatar.tsx
View File

@ -58,7 +58,7 @@ type OwnProps = {
animationLevel?: AnimationLevel; animationLevel?: AnimationLevel;
noPersonalPhoto?: boolean; noPersonalPhoto?: boolean;
lastSyncTime?: number; lastSyncTime?: number;
showVideoOverwrite?: boolean; forceVideo?: boolean;
observeIntersection?: ObserveFn; observeIntersection?: ObserveFn;
onClick?: (e: ReactMouseEvent<HTMLDivElement, MouseEvent>, hasMedia: boolean) => void; onClick?: (e: ReactMouseEvent<HTMLDivElement, MouseEvent>, hasMedia: boolean) => void;
}; };
@ -76,7 +76,7 @@ const Avatar: FC<OwnProps> = ({
noLoop, noLoop,
loopIndefinitely, loopIndefinitely,
lastSyncTime, lastSyncTime,
showVideoOverwrite, forceVideo,
animationLevel, animationLevel,
noPersonalPhoto, noPersonalPhoto,
observeIntersection, observeIntersection,
@ -86,22 +86,22 @@ const Avatar: FC<OwnProps> = ({
// 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);
const videoLoopCountRef = useRef(0); const videoLoopCountRef = useRef(0);
const isIntersecting = useIsIntersecting(ref, observeIntersection);
const isDeleted = user && isDeletedUser(user); const isDeleted = user && isDeletedUser(user);
const isReplies = user && isChatWithRepliesBot(user.id); const isReplies = user && isChatWithRepliesBot(user.id);
const isForum = chat?.isForum; const isForum = chat?.isForum;
let imageHash: string | undefined; let imageHash: string | undefined;
let videoHash: string | undefined; let videoHash: string | undefined;
const shouldShowUserVideo = !VIDEO_AVATARS_DISABLED && animationLevel === ANIMATION_LEVEL_MAX const canShowVideo = (
&& user?.isPremium && user?.hasVideoAvatar; withVideo && !VIDEO_AVATARS_DISABLED && animationLevel === ANIMATION_LEVEL_MAX
const shouldShowPhotoVideo = showVideoOverwrite && photo?.isVideo; && user?.isPremium && user?.hasVideoAvatar
const shouldShowVideo = (
isIntersecting && withVideo && (shouldShowPhotoVideo || shouldShowUserVideo)
); );
const profilePhoto = user?.fullInfo?.personalPhoto || user?.fullInfo?.profilePhoto || user?.fullInfo?.fallbackPhoto; const profilePhoto = user?.fullInfo?.personalPhoto || user?.fullInfo?.profilePhoto || user?.fullInfo?.fallbackPhoto;
const hasProfileVideo = profilePhoto?.isVideo; const hasProfileVideo = profilePhoto?.isVideo;
const shouldLoadVideo = shouldShowVideo && (hasProfileVideo || shouldShowPhotoVideo); const isIntersectingForVideo = useIsIntersecting(
ref, canShowVideo && hasProfileVideo ? observeIntersection : undefined,
);
const shouldLoadVideo = isIntersectingForVideo && (canShowVideo || (forceVideo && photo?.isVideo));
const shouldFetchBig = size === 'jumbo'; const shouldFetchBig = size === 'jumbo';
if (!isSavedMessages && !isDeleted) { if (!isSavedMessages && !isDeleted) {
@ -125,7 +125,7 @@ const Avatar: FC<OwnProps> = ({
const videoBlobUrl = useMedia(videoHash, !shouldLoadVideo, ApiMediaFormat.BlobUrl, lastSyncTime); const videoBlobUrl = useMedia(videoHash, !shouldLoadVideo, ApiMediaFormat.BlobUrl, lastSyncTime);
const hasBlobUrl = Boolean(imgBlobUrl || videoBlobUrl); const hasBlobUrl = Boolean(imgBlobUrl || videoBlobUrl);
// `videoBlobUrl` can be taken from memory cache, so we need to check `shouldLoadVideo` again // `videoBlobUrl` can be taken from memory cache, so we need to check `shouldLoadVideo` again
const shouldPlayVideo = Boolean(isIntersecting && videoBlobUrl && shouldLoadVideo); const shouldPlayVideo = Boolean(isIntersectingForVideo && videoBlobUrl && shouldLoadVideo);
const { transitionClassNames } = useShowTransition(hasBlobUrl, undefined, hasBlobUrl, 'slow'); const { transitionClassNames } = useShowTransition(hasBlobUrl, undefined, hasBlobUrl, 'slow');
@ -143,10 +143,10 @@ const Avatar: FC<OwnProps> = ({
const userId = user?.id; const userId = user?.id;
useEffect(() => { useEffect(() => {
if (userId && shouldShowVideo && !profilePhoto) { if (userId && canShowVideo && !profilePhoto) {
loadFullUser({ userId }); loadFullUser({ userId });
} }
}, [loadFullUser, profilePhoto, userId, shouldShowVideo]); }, [loadFullUser, profilePhoto, userId, canShowVideo]);
const lang = useLang(); const lang = useLang();

2
src/components/middle/ActionMessageSuggestedAvatar.tsx
View File

@ -98,7 +98,7 @@ const ActionMessageSuggestedAvatar: FC<OwnProps> = ({
<span className="action-message-suggested-avatar" tabIndex={0} role="button" onClick={handleViewSuggestedAvatar}> <span className="action-message-suggested-avatar" tabIndex={0} role="button" onClick={handleViewSuggestedAvatar}>
<Avatar <Avatar
photo={message.content.action!.photo} photo={message.content.action!.photo}
showVideoOverwrite forceVideo
loopIndefinitely loopIndefinitely
withVideo={isVideo} withVideo={isVideo}
size="jumbo" size="jumbo"