Chat, Embedded Message: Fix round video preview in dark theme (#1136)

src/components/common/EmbeddedMessage.scss

@@ -97,6 +97,10 @@
     border-radius: .25rem;
     margin-left: .25rem;
     flex-shrink: 0;
+
+    &.round {
+      border-radius: 1rem;
+    }
   }
 
   &.inside-input {

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<OwnProps> = ({
   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<OwnProps> = ({
       className={buildClassName('EmbeddedMessage', className)}
       onClick={message ? onClick : undefined}
     >
-      {mediaThumbnail && renderPictogram(pictogramId, mediaThumbnail, mediaBlobUrl)}
+      {mediaThumbnail && renderPictogram(pictogramId, mediaThumbnail, mediaBlobUrl, isRoundVideo)}
       <div className="message-text">
         <div className="message-title">{renderText(senderTitle || title || NBSP)}</div>
         <p>
@@ -80,11 +82,19 @@ function renderPictogram(
   id: string | undefined,
   thumbDataUri: string,
   blobUrl?: string,
+  isRoundVideo?: boolean,
 ) {
   const { width, height } = getPictogramDimensions();
 
   return (
-    <img id={id} src={blobUrl || thumbDataUri} width={width} height={height} alt="" />
+    <img
+      id={id}
+      src={blobUrl || thumbDataUri}
+      width={width}
+      height={height}
+      alt=""
+      className={isRoundVideo ? 'round' : ''}
+    />
   );
 }
 

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 {

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<OwnProps & StateProps & DispatchProps> = ({
     ? 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<OwnProps & StateProps & DispatchProps> = ({
         {senderName && (
           <span className="sender-name">{renderText(senderName)}</span>
         )}
-        {renderMessageSummary(lang, lastMessage!, mediaBlobUrl || mediaThumbnail)}
+        {renderMessageSummary(lang, lastMessage!, mediaBlobUrl || mediaThumbnail, isRoundVideo)}
       </p>
     );
   }
@@ -284,14 +286,14 @@ const Chat: FC<OwnProps & StateProps & DispatchProps> = ({
   );
 };
 
-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 (
     <span className="media-preview">
-      <img src={blobUrl} alt="" />
+      <img src={blobUrl} alt="" className={isRoundVideo ? 'round' : undefined} />
       {getMessageVideo(message) && <i className="icon-play" />}
       {renderText(getMessageSummaryText(lang, message, true))}
     </span>

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<OwnProps & StateProps & DispatchProps> = ({
 }) => {
   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<OwnProps & StateProps & DispatchProps> = ({
         </div>
         <div className="subtitle">
           <div className="message">
-            {renderMessageSummary(lang, message, mediaBlobUrl || mediaThumbnail, searchQuery)}
+            {renderMessageSummary(lang, message, mediaBlobUrl || mediaThumbnail, searchQuery, isRoundVideo)}
           </div>
         </div>
       </div>
@@ -104,14 +106,16 @@ const ChatMessage: FC<OwnProps & StateProps & DispatchProps> = ({
   );
 };
 
-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 (
     <span className="media-preview">
-      <img src={blobUrl} alt="" />
+      <img src={blobUrl} alt="" className={isRoundVideo ? 'round' : undefined} />
       {getMessageVideo(message) && <i className="icon-play" />}
       {renderText(getMessageSummaryText(lang, message, true), ['emoji', 'highlight'], { highlight: searchQuery })}
     </span>