Media Viewer: Fix document and shared media preview

src/components/mediaViewer/MediaViewer.tsx

@@ -114,15 +114,14 @@ const MediaViewer: FC<StateProps> = ({
     isVideo,
     isPhoto,
     bestImageData,
+    bestData,
     dimensions,
     isGif,
     isFromSharedMedia,
     avatarPhoto,
     fileName,
-    fullMediaBlobUrl,
-    previewBlobUrl,
   } = useMediaProps({
-    message, avatarOwner, mediaId, delay: isGhostAnimation && ANIMATION_DURATION,
+    message, avatarOwner, mediaId, origin, delay: isGhostAnimation && ANIMATION_DURATION,
   });
 
   const canReport = !!avatarPhoto && !isChatWithSelf;
@@ -244,7 +243,7 @@ const MediaViewer: FC<StateProps> = ({
       threadId,
       mediaId: id,
       avatarOwnerId: avatarOwner?.id,
-      origin,
+      origin: origin!,
     }, {
       forceOnHeavyAnimation: true,
     });
@@ -334,7 +333,7 @@ const MediaViewer: FC<StateProps> = ({
           {renderSenderInfo()}
         </Transition>
         <MediaViewerActions
-          mediaData={fullMediaBlobUrl || previewBlobUrl}
+          mediaData={bestData}
           isVideo={isVideo}
           message={message}
           canDeleteAvatar={canDeleteMedia && !!avatarPhoto}

src/components/mediaViewer/MediaViewerContent.tsx

@@ -83,13 +83,10 @@ const MediaViewerContent: FC<OwnProps & StateProps> = (props) => {
     isVideo,
     isPhoto,
     bestImageData,
+    bestData,
     dimensions,
     isGif,
     isVideoAvatar,
-    localBlobUrl,
-    fullMediaBlobUrl,
-    previewBlobUrl,
-    pictogramBlobUrl,
     videoSize,
     loadProgress,
   } = useMediaProps({
@@ -107,7 +104,7 @@ const MediaViewerContent: FC<OwnProps & StateProps> = (props) => {
       return (
         <div key={chatId} className="MediaViewerContent">
           {renderPhoto(
-            fullMediaBlobUrl || previewBlobUrl,
+            bestData,
             calculateMediaViewerDimensions(dimensions, false),
             !IS_SINGLE_COLUMN_LAYOUT && !isProtected,
             isProtected,
@@ -119,7 +116,7 @@ const MediaViewerContent: FC<OwnProps & StateProps> = (props) => {
         <div key={chatId} className="MediaViewerContent">
           <VideoPlayer
             key={mediaId}
-            url={localBlobUrl || fullMediaBlobUrl}
+            url={bestData}
             isGif
             posterData={bestImageData}
             posterSize={calculateMediaViewerDimensions(dimensions!, false, true)}
@@ -151,7 +148,7 @@ const MediaViewerContent: FC<OwnProps & StateProps> = (props) => {
       className={buildClassName('MediaViewerContent', hasFooter && 'has-footer')}
     >
       {isPhoto && renderPhoto(
-        localBlobUrl || fullMediaBlobUrl || previewBlobUrl || pictogramBlobUrl,
+        bestData,
         message && calculateMediaViewerDimensions(dimensions!, hasFooter),
         !IS_SINGLE_COLUMN_LAYOUT && !isProtected,
         isProtected,
@@ -164,7 +161,7 @@ const MediaViewerContent: FC<OwnProps & StateProps> = (props) => {
       ) : (
         <VideoPlayer
           key={mediaId}
-          url={localBlobUrl || fullMediaBlobUrl}
+          url={bestData}
           isGif={isGif}
           posterData={bestImageData}
           posterSize={message && calculateMediaViewerDimensions(dimensions!, hasFooter, true)}

src/components/mediaViewer/hooks/useMediaProps.ts

@@ -77,7 +77,10 @@ export const useMediaProps = ({
   }, [avatarOwner, message, avatarMedia, mediaId]);
 
   const pictogramBlobUrl = useMedia(
-    message && (isFromSharedMedia || isFromSearch) && getMessageMediaHash(message, 'pictogram'),
+    message
+    // Only use pictogram if it's already loaded
+    && (isFromSharedMedia || isFromSearch || isDocumentPhoto || isDocumentVideo)
+    && getMessageMediaHash(message, 'pictogram'),
     undefined,
     ApiMediaFormat.BlobUrl,
     undefined,
@@ -111,6 +114,9 @@ export const useMediaProps = ({
   if (isVideoAvatar && previewBlobUrl) {
     bestImageData = previewBlobUrl;
   }
+  const bestData = localBlobUrl || fullMediaBlobUrl || (
+    !isVideo ? previewBlobUrl || pictogramBlobUrl || bestImageData : undefined
+  );
 
   const fileName = message
     ? getMessageFileName(message)
@@ -144,14 +150,11 @@ export const useMediaProps = ({
     isDocumentVideo,
     fileName,
     bestImageData,
+    bestData,
     dimensions,
     isFromSharedMedia,
     avatarPhoto: avatarMedia,
     isVideoAvatar,
-    localBlobUrl,
-    fullMediaBlobUrl,
-    previewBlobUrl,
-    pictogramBlobUrl,
     loadProgress,
     videoSize,
   };

src/global/helpers/messageMedia.ts

@@ -212,7 +212,7 @@ export function getMessageMediaHash(
         return `${base}?size=x`;
       case 'full':
       case 'download':
-        return `${base}?size=z`;
+        return document ? base : `${base}?size=z`;
     }
   }
 

src/global/types.ts

@@ -808,7 +808,7 @@ export interface ActionPayloads {
     mediaId?: number;
     avatarOwnerId?: string;
     profilePhotoIndex?: number;
-    origin?: MediaViewerOrigin;
+    origin: MediaViewerOrigin;
     volume?: number;
     playbackRate?: number;
     isMuted?: boolean;