GIF: Use full media if preview not available (#5180)

src/components/common/embedded/EmbeddedMessage.tsx

@@ -101,11 +101,15 @@ const EmbeddedMessage: FC<OwnProps> = ({
     };
   }, [message, replyInfo]);
 
-  const mediaHash = containedMedia && getMessageMediaHash(containedMedia, 'pictogram');
+  const gif = containedMedia?.content?.video?.isGif ? containedMedia.content.video : undefined;
+  const isVideoThumbnail = Boolean(gif && !gif.previewPhotoSizes?.length);
+
+  const mediaHash = containedMedia && getMessageMediaHash(containedMedia, isVideoThumbnail ? 'full' : 'pictogram');
   const mediaBlobUrl = useMedia(mediaHash, !isIntersecting);
   const mediaThumbnail = useThumbnail(containedMedia);
-  const isRoundVideo = Boolean(message && getMessageRoundVideo(message));
-  const isSpoiler = Boolean(message && getMessageIsSpoiler(message));
+
+  const isRoundVideo = Boolean(containedMedia && getMessageRoundVideo(containedMedia));
+  const isSpoiler = Boolean(containedMedia && getMessageIsSpoiler(containedMedia));
   const isQuote = Boolean(replyInfo?.type === 'message' && replyInfo.isQuote);
   const replyForwardInfo = replyInfo?.type === 'message' ? replyInfo.replyFrom : undefined;
 
@@ -234,7 +238,9 @@ const EmbeddedMessage: FC<OwnProps> = ({
     >
       <div className="hover-effect" />
       <RippleEffect />
-      {mediaThumbnail && renderPictogram(mediaThumbnail, mediaBlobUrl, isRoundVideo, isProtected, isSpoiler)}
+      {mediaThumbnail && renderPictogram(
+        mediaThumbnail, mediaBlobUrl, isVideoThumbnail, isRoundVideo, isProtected, isSpoiler,
+      )}
       {sender?.color?.backgroundEmojiId && (
         <EmojiIconBackground
           emojiDocumentId={sender.color.backgroundEmojiId}
@@ -262,6 +268,7 @@ const EmbeddedMessage: FC<OwnProps> = ({
 function renderPictogram(
   thumbDataUri: string,
   blobUrl?: string,
+  isFullVideo?: boolean,
   isRoundVideo?: boolean,
   isProtected?: boolean,
   isSpoiler?: boolean,
@@ -269,10 +276,11 @@ function renderPictogram(
   const { width, height } = getPictogramDimensions();
 
   const srcUrl = blobUrl || thumbDataUri;
+  const shouldRenderVideo = isFullVideo && blobUrl;
 
   return (
     <div className={buildClassName('embedded-thumb', isRoundVideo && 'round')}>
-      {!isSpoiler && (
+      {!isSpoiler && !shouldRenderVideo && (
         <img
           src={srcUrl}
           width={width}
@@ -282,7 +290,22 @@ function renderPictogram(
           draggable={false}
         />
       )}
-      <MediaSpoiler thumbDataUri={srcUrl} isVisible={Boolean(isSpoiler)} width={width} height={height} />
+      {!isSpoiler && shouldRenderVideo && (
+        <video
+          src={blobUrl}
+          width={width}
+          height={height}
+          playsInline
+          disablePictureInPicture
+          className="pictogram"
+        />
+      )}
+      <MediaSpoiler
+        thumbDataUri={shouldRenderVideo ? thumbDataUri : srcUrl}
+        isVisible={Boolean(isSpoiler)}
+        width={width}
+        height={height}
+      />
       {isProtected && <span className="protector" />}
     </div>
   );

src/components/middle/HeaderPinnedMessage.tsx

@@ -5,7 +5,9 @@ import { getActions } from '../../global';
 import type { ApiMessage } from '../../api/types';
 import type { Signal } from '../../util/signals';
 
-import { getMessageIsSpoiler, getMessageMediaHash, getMessageSingleInlineButton } from '../../global/helpers';
+import {
+  getMessageIsSpoiler, getMessageMediaHash, getMessageSingleInlineButton, getMessageVideo,
+} from '../../global/helpers';
 import buildClassName from '../../util/buildClassName';
 import { IS_TOUCH_ENV } from '../../util/windowEnvironment';
 import { getPictogramDimensions, REM } from '../common/helpers/mediaDimensions';
@@ -56,8 +58,12 @@ const HeaderPinnedMessage: FC<OwnProps> = ({
   const { clickBotInlineButton } = getActions();
   const lang = useOldLang();
 
+  const video = getMessageVideo(message);
+  const gif = video?.isGif ? video : undefined;
+  const isVideoThumbnail = Boolean(gif && !gif.previewPhotoSizes?.length);
+
   const mediaThumbnail = useThumbnail(message);
-  const mediaBlobUrl = useMedia(getMessageMediaHash(message, 'pictogram'));
+  const mediaBlobUrl = useMedia(getMessageMediaHash(message, isVideoThumbnail ? 'full' : 'pictogram'));
   const isSpoiler = getMessageIsSpoiler(message);
 
   const isLoading = Boolean(useDerivedState(getLoadingPinnedId));
@@ -86,13 +92,14 @@ const HeaderPinnedMessage: FC<OwnProps> = ({
 
   const { handleClick, handleMouseDown } = useFastClick(onClick);
 
-  function renderPictogram(thumbDataUri?: string, blobUrl?: string, spoiler?: boolean) {
+  function renderPictogram(thumbDataUri?: string, blobUrl?: string, isFullVideo?: boolean, asSpoiler?: boolean) {
     const { width, height } = getPictogramDimensions();
     const srcUrl = blobUrl || thumbDataUri;
+    const shouldRenderVideo = isFullVideo && blobUrl;
 
     return (
       <div className={styles.pinnedThumb}>
-        {thumbDataUri && !spoiler && (
+        {thumbDataUri && !asSpoiler && !shouldRenderVideo && (
           <img
             className={styles.pinnedThumbImage}
             src={srcUrl}
@@ -102,8 +109,18 @@ const HeaderPinnedMessage: FC<OwnProps> = ({
             draggable={false}
           />
         )}
+        {shouldRenderVideo && !asSpoiler && (
+          <video
+            src={blobUrl}
+            width={width}
+            height={height}
+            playsInline
+            disablePictureInPicture
+            className={styles.pinnedThumbImage}
+          />
+        )}
         {thumbDataUri
-          && <MediaSpoiler thumbDataUri={srcUrl} isVisible={Boolean(spoiler)} width={width} height={height} />}
+          && <MediaSpoiler thumbDataUri={srcUrl} isVisible={Boolean(asSpoiler)} width={width} height={height} />}
       </div>
     );
   }
@@ -168,6 +185,7 @@ const HeaderPinnedMessage: FC<OwnProps> = ({
           {renderPictogram(
             mediaThumbnail,
             mediaBlobUrl,
+            isVideoThumbnail,
             isSpoiler,
           )}
         </Transition>