diff --git a/src/components/common/Document.tsx b/src/components/common/Document.tsx
index ff3b98a5c..66b974359 100644
--- a/src/components/common/Document.tsx
+++ b/src/components/common/Document.tsx
@@ -6,6 +6,10 @@ import { getActions } from '../../global';
 
 import type { ApiMessage } from '../../api/types';
 
+import {
+  SUPPORTED_IMAGE_CONTENT_TYPES,
+  SUPPORTED_VIDEO_CONTENT_TYPES,
+} from '../../config';
 import { getDocumentExtension, getDocumentHasPreview } from './helpers/documentInfo';
 import {
   getMediaTransferState,
@@ -100,7 +104,9 @@ const Document: FC<OwnProps> = ({
   const localBlobUrl = hasPreview ? document.previewBlobUrl : undefined;
   const previewData = useMedia(getMessageMediaHash(message, 'pictogram'), !isIntersecting);
 
-  const withMediaViewer = onMediaClick && Boolean(document.mediaType);
+  const withMediaViewer = onMediaClick && Boolean(document.mediaType) && (
+    SUPPORTED_VIDEO_CONTENT_TYPES.has(document.mimeType) || SUPPORTED_IMAGE_CONTENT_TYPES.has(document.mimeType)
+  );
 
   const handleClick = useCallback(() => {
     if (isUploading) {
diff --git a/src/components/common/File.tsx b/src/components/common/File.tsx
index 824d10049..96830ca6d 100644
--- a/src/components/common/File.tsx
+++ b/src/components/common/File.tsx
@@ -1,7 +1,8 @@
 import type { RefObject } from 'react';
 import type { FC } from '../../lib/teact/teact';
-import React, { memo, useRef } from '../../lib/teact/teact';
+import React, { memo, useRef, useState } from '../../lib/teact/teact';
 
+import { IS_CANVAS_FILTER_SUPPORTED, IS_SINGLE_COLUMN_LAYOUT } from '../../util/environment';
 import useShowTransition from '../../hooks/useShowTransition';
 import useMediaTransition from '../../hooks/useMediaTransition';
 import buildClassName from '../../util/buildClassName';
@@ -10,6 +11,7 @@ import { getColorFromExtension, getFileSizeString } from './helpers/documentInfo
 import { getDocumentThumbnailDimensions } from './helpers/mediaDimensions';
 import renderText from './helpers/renderText';
 import useLang from '../../hooks/useLang';
+import useCanvasBlur from '../../hooks/useCanvasBlur';
 
 import ProgressSpinner from '../ui/ProgressSpinner';
 import Link from '../ui/Link';
@@ -64,7 +66,11 @@ const File: FC<OwnProps> = ({
     elementRef = ref;
   }
 
-  const transitionClassNames = useMediaTransition(previewData);
+  const [withThumb] = useState(!previewData);
+  const noThumb = Boolean(previewData);
+  const thumbRef = useCanvasBlur(thumbnailDataUri, noThumb, IS_SINGLE_COLUMN_LAYOUT && !IS_CANVAS_FILTER_SUPPORTED);
+  const thumbClassNames = useMediaTransition(!noThumb);
+
   const {
     shouldRender: shouldSpinnerRender,
     transitionClassNames: spinnerClassNames,
@@ -93,20 +99,19 @@ const File: FC<OwnProps> = ({
       <div className="file-icon-container" onClick={isUploading ? undefined : onClick}>
         {thumbnailDataUri || previewData ? (
           <div className="file-preview media-inner">
-            <img
-              src={thumbnailDataUri}
-              width={width}
-              height={height}
-              className="thumbnail"
-              alt=""
-            />
             <img
               src={previewData}
-              className={buildClassName('full-media', transitionClassNames)}
+              className="full-media"
               width={width}
               height={height}
               alt=""
             />
+            {withThumb && (
+              <canvas
+                ref={thumbRef}
+                className={buildClassName('thumbnail', thumbClassNames)}
+              />
+            )}
           </div>
         ) : (
           <div className={`file-icon ${color}`}>
diff --git a/src/global/helpers/messageMedia.ts b/src/global/helpers/messageMedia.ts
index 76395f654..660899916 100644
--- a/src/global/helpers/messageMedia.ts
+++ b/src/global/helpers/messageMedia.ts
@@ -315,7 +315,7 @@ export function getMessageMediaFormat(
   const {
     video, audio, voice, document,
   } = message.content;
-  const fullVideo = video || getMessageWebPageVideo(message);
+  const isVideo = Boolean(video || getMessageWebPageVideo(message) || isMessageDocumentVideo(message));
   const size = (video || audio || document)?.size!;
   if (target === 'download') {
     if (IS_PROGRESSIVE_SUPPORTED && size > MAX_BUFFER_SIZE && !IS_OPFS_SUPPORTED) {
@@ -324,7 +324,7 @@ export function getMessageMediaFormat(
     return ApiMediaFormat.BlobUrl;
   }
 
-  if (fullVideo && IS_PROGRESSIVE_SUPPORTED && (
+  if (isVideo && IS_PROGRESSIVE_SUPPORTED && (
     target === 'full' || target === 'inline'
   )) {
     return ApiMediaFormat.Progressive;