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

Avatar: Animate online status

Browse Source
This commit is contained in:
Alexander Zinchuk 2023-04-17 22:57:07 +02:00
parent c722a3ba30
commit 8be0459193
2 changed files with 31 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/components/common/Avatar.scss
View File

@ -124,20 +124,27 @@
} }
} }
&.online { &.online::after {
&::after { content: "";
content: ""; display: block;
display: block; position: absolute;
position: absolute; bottom: 0.0625rem;
bottom: 0.0625rem; right: 0.0625rem;
right: 0.0625rem; width: 0.875rem;
width: 0.875rem; height: 0.875rem;
height: 0.875rem; border-radius: 50%;
border-radius: 50%; border: 2px solid var(--color-background);
border: 2px solid var(--color-background); background-color: #0ac630;
background-color: #0ac630; flex-shrink: 0;
flex-shrink: 0;
} opacity: 0.5;
transform: scale(0);
transition: opacity 200ms, transform 200ms;
}
&.online-open::after {
opacity: 1;
transform: scale(1);
} }
&.interactive { &.interactive {

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

@ -1,6 +1,6 @@
import type { MouseEvent as ReactMouseEvent } from 'react'; import type { MouseEvent as ReactMouseEvent } from 'react';
import React, { import React, {
memo, useCallback, useEffect, useRef, memo, useCallback, useEffect, useMemo, useRef,
} from '../../lib/teact/teact'; } from '../../lib/teact/teact';
import { getActions } from '../../global'; import { getActions } from '../../global';
@ -29,7 +29,7 @@ import buildClassName, { createClassNameBuilder } from '../../util/buildClassNam
import renderText from './helpers/renderText'; import renderText from './helpers/renderText';
import useMedia from '../../hooks/useMedia'; import useMedia from '../../hooks/useMedia';
import useShowTransition from '../../hooks/useShowTransition'; import useMediaTransition from '../../hooks/useMediaTransition';
import useLang from '../../hooks/useLang'; import useLang from '../../hooks/useLang';
import { useIsIntersecting } from '../../hooks/useIntersectionObserver'; import { useIsIntersecting } from '../../hooks/useIntersectionObserver';
@ -127,7 +127,13 @@ const Avatar: FC<OwnProps> = ({
// `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(isIntersectingForVideo && videoBlobUrl && shouldLoadVideo); const shouldPlayVideo = Boolean(isIntersectingForVideo && videoBlobUrl && shouldLoadVideo);
const { transitionClassNames } = useShowTransition(hasBlobUrl, undefined, hasBlobUrl, 'slow'); const transitionClassNames = useMediaTransition(hasBlobUrl);
const isOnline = !isSavedMessages && user && userStatus && isUserOnline(user, userStatus);
const onlineTransitionClassNames = useMediaTransition(isOnline);
const onlineClassNamesPrefixed = useMemo(() => {
return onlineTransitionClassNames.split(' ').map((c) => (c === 'shown' ? 'online' : `online-${c}`)).join(' ');
}, [onlineTransitionClassNames]);
const handleVideoEnded = useCallback((e) => { const handleVideoEnded = useCallback((e) => {
const video = e.currentTarget; const video = e.currentTarget;
@ -193,7 +199,6 @@ const Avatar: FC<OwnProps> = ({
content = getFirstLetters(text, 2); content = getFirstLetters(text, 2);
} }
const isOnline = !isSavedMessages && user && userStatus && isUserOnline(user, userStatus);
const fullClassName = buildClassName( const fullClassName = buildClassName(
`Avatar size-${size}`, `Avatar size-${size}`,
className, className,
@ -202,7 +207,7 @@ const Avatar: FC<OwnProps> = ({
isDeleted && 'deleted-account', isDeleted && 'deleted-account',
isReplies && 'replies-bot-account', isReplies && 'replies-bot-account',
isForum && 'forum', isForum && 'forum',
isOnline && 'online', onlineClassNamesPrefixed,
onClick && 'interactive', onClick && 'interactive',
(!isSavedMessages && !imgBlobUrl) && 'no-photo', (!isSavedMessages && !imgBlobUrl) && 'no-photo',
); );