diff --git a/src/components/common/ProfileInfo.scss b/src/components/common/ProfileInfo.scss index d8a5e2db..af06770f 100644 --- a/src/components/common/ProfileInfo.scss +++ b/src/components/common/ProfileInfo.scss @@ -169,10 +169,6 @@ margin: 0; } - .prev-avatar-media { - z-index: 0; - } - .info { padding-bottom: 0.75rem; } diff --git a/src/components/common/ProfileInfo.tsx b/src/components/common/ProfileInfo.tsx index 2426a08e..e902d63b 100644 --- a/src/components/common/ProfileInfo.tsx +++ b/src/components/common/ProfileInfo.tsx @@ -108,7 +108,7 @@ const ProfileInfo: FC = ({ setCurrentPhotoIndex(currentPhotoIndex + 1); }, [currentPhotoIndex, isLast]); - // Support for swipe gestures and closing on click + // Swipe gestures useEffect(() => { const element = document.querySelector('.photo-wrapper'); if (!element) { diff --git a/src/components/common/ProfilePhoto.scss b/src/components/common/ProfilePhoto.scss index d66a97de..7874df10 100644 --- a/src/components/common/ProfilePhoto.scss +++ b/src/components/common/ProfilePhoto.scss @@ -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%; diff --git a/src/components/common/ProfilePhoto.tsx b/src/components/common/ProfilePhoto.tsx index 5ab947a6..1c628246 100644 --- a/src/components/common/ProfilePhoto.tsx +++ b/src/components/common/ProfilePhoto.tsx @@ -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 = ({ 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 = ({ } else if (isRepliesChat) { content = ; } else if (imageSrc) { - content = ; - } else if (!imageSrc && user) { + content = ; + } 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 = ({ return (
- {prevImageSrc && imageSrc && prevImageSrc !== imageSrc && ( - - )} {typeof content === 'string' ? renderText(content, ['hq_emoji']) : content}
); diff --git a/src/components/mediaViewer/helpers/ghostAnimation.ts b/src/components/mediaViewer/helpers/ghostAnimation.ts index b0ca4ac4..3d3ed227 100644 --- a/src/components/mediaViewer/helpers/ghostAnimation.ts +++ b/src/components/mediaViewer/helpers/ghostAnimation.ts @@ -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: