WebPage: Show document photo preview if available (#6704)

src/components/middle/message/Photo.tsx

@@ -13,6 +13,7 @@ import {
   getMediaFormat, getMediaThumbUri, getMediaTransferState, getPhotoMediaHash,
 } from '../../../global/helpers';
 import buildClassName from '../../../util/buildClassName';
+import buildStyle from '../../../util/buildStyle';
 import getCustomAppendixBg from './helpers/getCustomAppendixBg';
 import { calculateMediaDimensions, MIN_MEDIA_HEIGHT } from './helpers/mediaDimensions';
 
@@ -256,8 +257,15 @@ const Photo = <T,>({
     className,
   );
 
-  const dimensionsStyle = dimensions ? ` width: ${width}px; left: ${dimensions.x}px; top: ${dimensions.y}px;` : '';
-  const style = size === 'inline' ? `height: ${height}px;${dimensionsStyle}` : undefined;
+  const dimensionsStyle = dimensions && buildStyle(
+    `left: ${dimensions.x}px`,
+    `top: ${dimensions.y}px`,
+  );
+  const style = size === 'inline' ? buildStyle(
+    `height: ${height}px`,
+    `width: ${width}px`,
+    dimensionsStyle,
+  ) : undefined;
 
   return (
     <div

src/components/middle/message/WebPage.tsx

@@ -1,14 +1,11 @@
-import type { FC } from '../../../lib/teact/teact';
-import type React from '../../../lib/teact/teact';
 import { memo, useMemo, useRef } from '../../../lib/teact/teact';
-import { getActions, withGlobal } from '../../../global';
+import { getActions } from '../../../global';
 
 import type { ApiMessage, ApiMessageWebPage, ApiTypeStory, ApiWebPage, ApiWebPageFull } from '../../../api/types';
 import type { ObserveFn } from '../../../hooks/useIntersectionObserver';
 import { AudioOrigin, type ThemeKey, type WebPageMediaSize } from '../../../types';
 
 import { getPhotoFullDimensions } from '../../../global/helpers';
-import { selectCanPlayAnimatedEmojis } from '../../../global/selectors';
 import buildClassName from '../../../util/buildClassName';
 import { tryParseDeepLink } from '../../../util/deepLinkParser';
 import trimText from '../../../util/trimText';
@@ -68,11 +65,8 @@ type OwnProps = {
   onCancelMediaTransfer?: NoneToVoidFunction;
   onContainerClick?: ((e: React.MouseEvent) => void);
 };
-type StateProps = {
-  canPlayAnimatedEmojis: boolean;
-};
 
-const WebPage: FC<OwnProps & StateProps> = ({
+const WebPage = ({
   messageWebPage,
   webPage,
   message,
@@ -96,7 +90,7 @@ const WebPage: FC<OwnProps & StateProps> = ({
   onContainerClick,
   onAudioPlay,
   onCancelMediaTransfer,
-}) => {
+}: OwnProps) => {
   const { openUrl, openTelegramLink } = getActions();
   const stickersRef = useRef<HTMLDivElement>();
 
@@ -249,7 +243,7 @@ const WebPage: FC<OwnProps & StateProps> = ({
             )}
           </div>
         )}
-        {photo && !isGift && !isAuction && !video && !document && (
+        {photo && !isGift && !isAuction && !video && (
           <Photo
             photo={photo}
             isOwn={message?.isOutgoing}
@@ -295,7 +289,7 @@ const WebPage: FC<OwnProps & StateProps> = ({
             onCancelUpload={onCancelMediaTransfer}
           />
         )}
-        {document && (
+        {document && !photo && (
           <Document
             document={document}
             message={message}
@@ -346,10 +340,4 @@ function getIsSmallPhoto(webPage: ApiWebPageFull, mediaSize?: WebPageMediaSize)
   return width === height && !webPage.hasLargeMedia;
 }
 
-export default memo(withGlobal<OwnProps>(
-  (global): Complete<StateProps> => {
-    return {
-      canPlayAnimatedEmojis: selectCanPlayAnimatedEmojis(global),
-    };
-  },
-)(WebPage));
+export default memo(WebPage);

src/global/selectors/media.ts

@@ -21,6 +21,7 @@ import {
   getMessageVideo,
   getMessageVoice,
   getWebPageAudio,
+  getWebPageDocument,
   getWebPagePhoto,
   getWebPageVideo,
 } from '../helpers';
@@ -54,12 +55,13 @@ export function selectMessageDownloadableMedia<T extends GlobalState>(global: T,
   const webPage = selectWebPageFromMessage(global, message);
   return (
     customEmoji || animatedEmoji
+    || getMessageDocument(message)
     || getMessagePhoto(message)
     || getMessageVideo(message)
-    || getMessageDocument(message)
     || getMessageSticker(message)
     || getMessageAudio(message)
     || getMessageVoice(message)
+    || getWebPageDocument(webPage)
     || getWebPagePhoto(webPage)
     || getWebPageVideo(webPage)
     || getWebPageAudio(webPage)