diff --git a/src/components/common/EmbeddedMessage.scss b/src/components/common/EmbeddedMessage.scss index 96eec475a..0cdea6fad 100644 --- a/src/components/common/EmbeddedMessage.scss +++ b/src/components/common/EmbeddedMessage.scss @@ -97,6 +97,10 @@ border-radius: .25rem; margin-left: .25rem; flex-shrink: 0; + + &.round { + border-radius: 1rem; + } } &.inside-input { diff --git a/src/components/common/EmbeddedMessage.tsx b/src/components/common/EmbeddedMessage.tsx index eb98c5259..64de95680 100644 --- a/src/components/common/EmbeddedMessage.tsx +++ b/src/components/common/EmbeddedMessage.tsx @@ -7,6 +7,7 @@ import { isActionMessage, getMessageSummaryText, getSenderTitle, + getMessageRoundVideo, } from '../../modules/helpers'; import renderText from './helpers/renderText'; import { getPictogramDimensions } from './helpers/mediaDimensions'; @@ -48,6 +49,7 @@ const EmbeddedMessage: FC = ({ const mediaBlobUrl = useMedia(message && getMessageMediaHash(message, 'pictogram'), !isIntersecting); const pictogramId = message && `sticker-reply-thumb${message.id}`; const mediaThumbnail = useWebpThumbnail(message); + const isRoundVideo = Boolean(message && getMessageRoundVideo(message)); const lang = useLang(); @@ -59,7 +61,7 @@ const EmbeddedMessage: FC = ({ className={buildClassName('EmbeddedMessage', className)} onClick={message ? onClick : undefined} > - {mediaThumbnail && renderPictogram(pictogramId, mediaThumbnail, mediaBlobUrl)} + {mediaThumbnail && renderPictogram(pictogramId, mediaThumbnail, mediaBlobUrl, isRoundVideo)}
{renderText(senderTitle || title || NBSP)}

@@ -80,11 +82,19 @@ function renderPictogram( id: string | undefined, thumbDataUri: string, blobUrl?: string, + isRoundVideo?: boolean, ) { const { width, height } = getPictogramDimensions(); return ( - + ); } diff --git a/src/components/left/main/Chat.scss b/src/components/left/main/Chat.scss index 68408d93b..50a07bf38 100644 --- a/src/components/left/main/Chat.scss +++ b/src/components/left/main/Chat.scss @@ -110,6 +110,10 @@ border-radius: .125rem; vertical-align: -.25rem; margin-right: .25rem; + + &.round { + border-radius: .625rem; + } } .emoji-small { diff --git a/src/components/left/main/Chat.tsx b/src/components/left/main/Chat.tsx index fac91e8dc..0c7bcfb0c 100644 --- a/src/components/left/main/Chat.tsx +++ b/src/components/left/main/Chat.tsx @@ -26,6 +26,7 @@ import { getMessageVideo, getMessageSticker, selectIsChatMuted, + getMessageRoundVideo, } from '../../../modules/helpers'; import { selectChat, selectUser, selectChatMessage, selectOutgoingStatus, selectDraft, selectCurrentMessageList, @@ -119,6 +120,7 @@ const Chat: FC = ({ ? getMessageMediaThumbDataUri(lastMessage) : undefined; const mediaBlobUrl = useMedia(lastMessage ? getMessageMediaHash(lastMessage, 'micro') : undefined); + const isRoundVideo = Boolean(lastMessage && getMessageRoundVideo(lastMessage)); // Sets animation excess values when `orderDiff` changes and then resets excess values to animate. useLayoutEffect(() => { @@ -229,7 +231,7 @@ const Chat: FC = ({ {senderName && ( {renderText(senderName)} )} - {renderMessageSummary(lang, lastMessage!, mediaBlobUrl || mediaThumbnail)} + {renderMessageSummary(lang, lastMessage!, mediaBlobUrl || mediaThumbnail, isRoundVideo)}

); } @@ -284,14 +286,14 @@ const Chat: FC = ({ ); }; -function renderMessageSummary(lang: LangFn, message: ApiMessage, blobUrl?: string) { +function renderMessageSummary(lang: LangFn, message: ApiMessage, blobUrl?: string, isRoundVideo?: boolean) { if (!blobUrl) { return renderText(getMessageSummaryText(lang, message)); } return ( - + {getMessageVideo(message) && } {renderText(getMessageSummaryText(lang, message, true))} diff --git a/src/components/left/search/ChatMessage.tsx b/src/components/left/search/ChatMessage.tsx index eaf8206e1..867b68b93 100644 --- a/src/components/left/search/ChatMessage.tsx +++ b/src/components/left/search/ChatMessage.tsx @@ -16,6 +16,7 @@ import { getMessageSummaryText, getMessageMediaThumbDataUri, getMessageVideo, + getMessageRoundVideo, } from '../../../modules/helpers'; import { selectChat, selectUser } from '../../../modules/selectors'; import renderText from '../../common/helpers/renderText'; @@ -57,6 +58,7 @@ const ChatMessage: FC = ({ }) => { const mediaThumbnail = getMessageMediaThumbDataUri(message); const mediaBlobUrl = useMedia(getMessageMediaHash(message, 'micro')); + const isRoundVideo = Boolean(getMessageRoundVideo(message)); const handleClick = useCallback(() => { focusMessage({ chatId, messageId: message.id }); @@ -96,7 +98,7 @@ const ChatMessage: FC = ({
- {renderMessageSummary(lang, message, mediaBlobUrl || mediaThumbnail, searchQuery)} + {renderMessageSummary(lang, message, mediaBlobUrl || mediaThumbnail, searchQuery, isRoundVideo)}
@@ -104,14 +106,16 @@ const ChatMessage: FC = ({ ); }; -function renderMessageSummary(lang: LangFn, message: ApiMessage, blobUrl?: string, searchQuery?: string) { +function renderMessageSummary( + lang: LangFn, message: ApiMessage, blobUrl?: string, searchQuery?: string, isRoundVideo?: boolean, +) { if (!blobUrl) { return renderText(getMessageSummaryText(lang, message)); } return ( - + {getMessageVideo(message) && } {renderText(getMessageSummaryText(lang, message, true), ['emoji', 'highlight'], { highlight: searchQuery })}