danog/telegram-tt
1
0
Fork 0
mirror of https://github.com/danog/telegram-tt.git synced 2024-11-27 04:45:08 +01:00
Code Issues Packages Projects Releases Wiki Activity

[Perf] Profile: Get rid of redundant blur

Browse Source
This commit is contained in:
Alexander Zinchuk 2022-03-19 21:18:54 +01:00
parent 5500fb0d50
commit cd055732ba
5 changed files with 9 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/common/ProfileInfo.scss
View File

@ -169,10 +169,6 @@
margin: 0;
}
.prev-avatar-media {
z-index: 0;
}
.info {
padding-bottom: 0.75rem;
}

2
src/components/common/ProfileInfo.tsx
View File

@ -108,7 +108,7 @@ const ProfileInfo: FC<OwnProps & StateProps> = ({
setCurrentPhotoIndex(currentPhotoIndex + 1);
}, [currentPhotoIndex, isLast]);
// Support for swipe gestures and closing on click
// Swipe gestures
useEffect(() => {
const element = document.querySelector<HTMLDivElement>('.photo-wrapper');
if (!element) {

9
src/components/common/ProfilePhoto.scss
View File

@ -4,18 +4,11 @@
cursor: pointer;
position: relative;
img:not(.emoji) {
.avatar-media {
width: 100%;
object-fit: cover;
}
.prev-avatar-media {
position: absolute;
left: 0;
top: 0;
z-index: -1;
}
.spinner-wrapper {
width: 100%;
height: 100%;

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

@ -17,8 +17,6 @@ import renderText from './helpers/renderText';
import buildClassName from '../../util/buildClassName';
import { getFirstLetters } from '../../util/textFormat';
import useMedia from '../../hooks/useMedia';
import useBlurSync from '../../hooks/useBlurSync';
import usePrevious from '../../hooks/usePrevious';
import useLang from '../../hooks/useLang';
import Spinner from '../ui/Spinner';
@ -68,9 +66,7 @@ const ProfilePhoto: FC<OwnProps> = ({
const photoBlobUrl = useMedia(getMediaHash('big'), false, ApiMediaFormat.BlobUrl, lastSyncTime);
const avatarMediaHash = isFirstPhoto && !photoBlobUrl ? getMediaHash('normal', true) : undefined;
const avatarBlobUrl = useMedia(avatarMediaHash, false, ApiMediaFormat.BlobUrl, lastSyncTime);
const thumbDataUri = useBlurSync(!photoBlobUrl && photo && photo.thumbnail && photo.thumbnail.dataUri);
const imageSrc = photoBlobUrl || avatarBlobUrl || thumbDataUri;
const prevImageSrc = usePrevious(imageSrc);
const imageSrc = photoBlobUrl || avatarBlobUrl || photo?.thumbnail?.dataUri;
let content: string | undefined = '';
@ -81,11 +77,11 @@ const ProfilePhoto: FC<OwnProps> = ({
} else if (isRepliesChat) {
content = <i className="icon-reply-filled" />;
} else if (imageSrc) {
content = <img src={imageSrc} className="avatar-media" alt="" decoding="async" />;
} else if (!imageSrc && user) {
content = <img src={imageSrc} className="avatar-media" alt="" />;
} else if (user) {
const userFullName = getUserFullName(user);
content = userFullName ? getFirstLetters(userFullName, 2) : undefined;
} else if (!imageSrc && chat) {
} else if (chat) {
const title = getChatTitle(lang, chat);
content = title && getFirstLetters(title, isUserId(chat.id) ? 2 : 1);
} else {
@ -107,9 +103,6 @@ const ProfilePhoto: FC<OwnProps> = ({
return (
<div className={fullClassName} onClick={imageSrc ? onClick : undefined}>
{prevImageSrc && imageSrc && prevImageSrc !== imageSrc && (
<img src={prevImageSrc} className="prev-avatar-media" alt="" decoding="async" />
)}
{typeof content === 'string' ? renderText(content, ['hq_emoji']) : content}
</div>
);

6
src/components/mediaViewer/helpers/ghostAnimation.ts
View File

@ -323,17 +323,17 @@ function getNodes(origin: MediaViewerOrigin, message?: ApiMessage) {
case MediaViewerOrigin.MiddleHeaderAvatar:
containerSelector = '.MiddleHeader .Transition__slide--active .ChatInfo .Avatar';
mediaSelector = 'img.avatar-media';
mediaSelector = '.avatar-media';
break;
case MediaViewerOrigin.SettingsAvatar:
containerSelector = '#Settings .ProfileInfo .Transition__slide--active .ProfilePhoto';
mediaSelector = 'img.avatar-media';
mediaSelector = '.avatar-media';
break;
case MediaViewerOrigin.ProfileAvatar:
containerSelector = '#RightColumn .ProfileInfo .Transition__slide--active .ProfilePhoto';
mediaSelector = 'img.avatar-media';
mediaSelector = '.avatar-media';
break;
case MediaViewerOrigin.ScheduledInline: