Message / Web Page: Use full width for the preview (#1844)

src/components/middle/message/Photo.tsx

@@ -41,6 +41,7 @@ export type OwnProps = {
   nonInteractive?: boolean;
   isDownloading: boolean;
   isProtected?: boolean;
+  withAspectRatio?: boolean;
   theme: ISettings['theme'];
   onClick?: (id: number) => void;
   onCancelUpload?: (message: ApiMessage) => void;
@@ -61,6 +62,7 @@ const Photo: FC<OwnProps> = ({
   shouldAffectAppendix,
   isDownloading,
   isProtected,
+  withAspectRatio,
   theme,
   onClick,
   onCancelUpload,
@@ -143,8 +145,9 @@ const Photo: FC<OwnProps> = ({
     width === height && 'square-image',
   );
 
+  const aspectRatio = withAspectRatio ? `aspect-ratio: ${(width / height).toFixed(3)}/ 1` : '';
   const style = dimensions
-    ? `width: ${width}px; height: ${height}px; left: ${dimensions.x}px; top: ${dimensions.y}px;`
+    ? `width: ${width}px; height: ${height}px; left: ${dimensions.x}px; top: ${dimensions.y}px;${aspectRatio}`
     : '';
 
   return (
@@ -158,7 +161,7 @@ const Photo: FC<OwnProps> = ({
       <canvas
         ref={thumbRef}
         className="thumbnail"
-        style={`width: ${width}px; height: ${height}px`}
+        style={`width: ${width}px; height: ${height}px;${aspectRatio}`}
       />
       <img
         src={fullMediaData}

src/components/middle/message/Video.tsx

@@ -43,6 +43,7 @@ export type OwnProps = {
   lastSyncTime?: number;
   isDownloading: boolean;
   isProtected?: boolean;
+  withAspectRatio?: boolean;
   onClick?: (id: number) => void;
   onCancelUpload?: (message: ApiMessage) => void;
 };
@@ -61,6 +62,7 @@ const Video: FC<OwnProps> = ({
   onCancelUpload,
   isDownloading,
   isProtected,
+  withAspectRatio,
 }) => {
   // eslint-disable-next-line no-null/no-null
   const ref = useRef<HTMLDivElement>(null);
@@ -150,10 +152,10 @@ const Video: FC<OwnProps> = ({
   }, [isUploading, isDownloading, fullMediaData, isPlayAllowed, onClick, onCancelUpload, message]);
 
   const className = buildClassName('media-inner dark', !isUploading && 'interactive');
+  const aspectRatio = withAspectRatio ? `aspect-ratio: ${(width / height).toFixed(3)}/ 1` : '';
   const style = dimensions
-    ? `width: ${width}px; height: ${height}px; left: ${dimensions.x}px; top: ${dimensions.y}px;`
+    ? `width: ${width}px; height: ${height}px; left: ${dimensions.x}px; top: ${dimensions.y}px;${aspectRatio}`
     : '';
-
   return (
     <div
       ref={ref}
@@ -165,12 +167,12 @@ const Video: FC<OwnProps> = ({
       <canvas
         ref={thumbRef}
         className="thumbnail"
-        style={`width: ${width}px; height: ${height}px;`}
+        style={`width: ${width}px; height: ${height}px;${aspectRatio}`}
       />
       <img
         src={previewBlobUrl}
         className={buildClassName('thumbnail', previewClassNames)}
-        style={`width: ${width}px; height: ${height}px;`}
+        style={`width: ${width}px; height: ${height}px;${aspectRatio}`}
         alt=""
         draggable={!isProtected}
       />
@@ -188,6 +190,7 @@ const Video: FC<OwnProps> = ({
           {...bufferingHandlers}
           draggable={!isProtected}
           onTimeUpdate={handleTimeUpdate}
+          style={aspectRatio}
         >
           <source src={fullMediaData} />
         </video>

src/components/middle/message/WebPage.scss

@@ -123,4 +123,18 @@
       right: 0;
     }
   }
+
+  @media (min-width: 1921px) {
+    @supports (aspect-ratio: 1) {
+      &:not(.in-preview) {
+        max-width: none;
+
+        .thumbnail,
+        .full-media {
+          width: 100% !important;
+          height: auto !important;
+        }
+      }
+    }
+  }
 }

src/components/middle/message/WebPage.tsx

@@ -77,6 +77,7 @@ const WebPage: FC<OwnProps> = ({
 
   const className = buildClassName(
     'WebPage',
+    inPreview && 'in-preview',
     isSquarePhoto && 'with-square-photo',
     !photo && !video && !inPreview && 'without-media',
     video && 'with-video',
@@ -100,6 +101,7 @@ const WebPage: FC<OwnProps> = ({
           onCancelUpload={onCancelMediaTransfer}
           isDownloading={isDownloading}
           isProtected={isProtected}
+          withAspectRatio
           theme={theme}
         />
       )}
@@ -124,6 +126,7 @@ const WebPage: FC<OwnProps> = ({
           onCancelUpload={onCancelMediaTransfer}
           isDownloading={isDownloading}
           isProtected={isProtected}
+          withAspectRatio
         />
       )}
     </div>