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

Contact Greeting: Fix media animation

Browse Source
This commit is contained in:
Alexander Zinchuk 2023-08-16 15:27:38 +02:00
parent 36957c154f
commit 52189af778
2 changed files with 16 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/middle/ContactGreeting.scss
View File

@ -32,10 +32,6 @@
height: 10rem; height: 10rem;
width: 10rem; width: 10rem;
cursor: var(--custom-cursor, pointer); cursor: var(--custom-cursor, pointer);
position: relative;
.thumbnail {
height: 10rem;
width: 10rem;
}
} }
} }

40
src/components/middle/ContactGreeting.tsx
View File

@ -10,9 +10,8 @@ import { getUserIdDividend } from '../../global/helpers';
import useLastCallback from '../../hooks/useLastCallback'; import useLastCallback from '../../hooks/useLastCallback';
import useLang from '../../hooks/useLang'; import useLang from '../../hooks/useLang';
import { useIntersectionObserver } from '../../hooks/useIntersectionObserver';
import StickerButton from '../common/StickerButton'; import StickerView from '../common/StickerView';
import './ContactGreeting.scss'; import './ContactGreeting.scss';
@ -27,8 +26,6 @@ type StateProps = {
currentMessageList?: MessageList; currentMessageList?: MessageList;
}; };
const INTERSECTION_DEBOUNCE_MS = 200;
const ContactGreeting: FC<OwnProps & StateProps> = ({ const ContactGreeting: FC<OwnProps & StateProps> = ({
sticker, sticker,
connectionState, connectionState,
@ -42,14 +39,10 @@ const ContactGreeting: FC<OwnProps & StateProps> = ({
} = getActions(); } = getActions();
const lang = useLang(); const lang = useLang();
// eslint-disable-next-line no-null/no-null // eslint-disable-next-line no-null/no-null
const containerRef = useRef<HTMLDivElement>(null); const containerRef = useRef<HTMLDivElement>(null);
const {
observe: observeIntersection,
} = useIntersectionObserver({
rootRef: containerRef,
debounceMs: INTERSECTION_DEBOUNCE_MS,
});
useEffect(() => { useEffect(() => {
if (sticker || connectionState !== 'connectionStateReady') { if (sticker || connectionState !== 'connectionStateReady') {
return; return;
@ -64,35 +57,32 @@ const ContactGreeting: FC<OwnProps & StateProps> = ({
} }
}, [connectionState, markMessageListRead, lastUnreadMessageId]); }, [connectionState, markMessageListRead, lastUnreadMessageId]);
const handleStickerSelect = useLastCallback((selectedSticker: ApiSticker) => { const handleStickerSelect = useLastCallback(() => {
if (!currentMessageList) { if (!currentMessageList) {
return; return;
} }
selectedSticker = { sendMessage({
...selectedSticker, sticker: {
isPreloadedGlobally: true, ...sticker!,
}; isPreloadedGlobally: true,
sendMessage({ sticker: selectedSticker, messageList: currentMessageList }); },
messageList: currentMessageList,
});
}); });
return ( return (
<div className="ContactGreeting" ref={containerRef}> <div className="ContactGreeting">
<div className="wrapper"> <div className="wrapper">
<p className="title" dir="auto">{lang('Conversation.EmptyPlaceholder')}</p> <p className="title" dir="auto">{lang('Conversation.EmptyPlaceholder')}</p>
<p className="description" dir="auto">{lang('Conversation.GreetingText')}</p> <p className="description" dir="auto">{lang('Conversation.GreetingText')}</p>
<div className="sticker"> <div ref={containerRef} className="sticker" onClick={handleStickerSelect}>
{sticker && ( {sticker && (
<StickerButton <StickerView
containerRef={containerRef}
sticker={sticker} sticker={sticker}
onClick={handleStickerSelect}
clickArg={sticker}
observeIntersection={observeIntersection}
size={160} size={160}
className="large"
noContextMenu
isCurrentUserPremium
/> />
)} )}
</div> </div>