temp

src/components/gifsMasonry.ts

@@ -163,7 +163,7 @@ export default class GifsMasonry {
     }
 
     const willUseWidth = Math.min(maxSingleWidth, width, gifWidth);
-    const {w, h} = calcImageInBox(gifWidth, gifHeight, willUseWidth, height);
+    const size = calcImageInBox(gifWidth, gifHeight, willUseWidth, height);
 
     /* wastedWidth += w;
 
@@ -180,7 +180,7 @@ export default class GifsMasonry {
 
     const div = document.createElement('div');
     div.classList.add('gif', 'fade-in-transition');
-    div.style.width = w + 'px';
+    div.style.width = size.width + 'px';
     div.style.opacity = '0';
     //div.style.height = h + 'px';
     div.dataset.docId = doc.id;

src/components/popups/newMedia.ts

@@ -430,9 +430,9 @@ export default class PopupNewMedia extends PopupElement {
           for(let i = 0; i < results.length; ++i) {
             const params = willAttach.sendFileDetails[i];
             const div = results[i];
-            const {w, h} = calcImageInBox(params.width, params.height, 380, 320);
+            const size = calcImageInBox(params.width, params.height, 380, 320);
-            div.style.width = w + 'px';
+            div.style.width = size.width + 'px';
-            div.style.height = h + 'px';
+            div.style.height = size.height + 'px';
             this.mediaContainer.append(div);
           }
         }

src/components/wrappers.ts

@@ -27,7 +27,6 @@ import LazyLoadQueue from './lazyLoadQueue';
 import PollElement from './poll';
 import ProgressivePreloader from './preloader';
 import './middleEllipsis';
-import { nextRandomInt } from '../helpers/random';
 import RichTextProcessor from '../lib/richtextprocessor';
 import appImManager from '../lib/appManagers/appImManager';
 import { SearchSuperContext } from './appSearchSuper.';
@@ -593,7 +592,7 @@ export function wrapDocument({message, withTime, fontWeight, voiceAsMusic, showS
   return docDiv;
 }
 
-function wrapMediaWithTail(photo: MyPhoto | MyDocument, message: {mid: number, message: string}, container: HTMLElement, boxWidth: number, boxHeight: number, isOut: boolean) {
+/* function wrapMediaWithTail(photo: MyPhoto | MyDocument, message: {mid: number, message: string}, container: HTMLElement, boxWidth: number, boxHeight: number, isOut: boolean) {
   const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
   svg.classList.add('bubble__media-container', isOut ? 'is-out' : 'is-in');
   
@@ -650,7 +649,7 @@ function wrapMediaWithTail(photo: MyPhoto | MyDocument, message: {mid: number, m
   }
 
   return img;
-}
+} */
 
 export function wrapPhoto({photo, message, container, boxWidth, boxHeight, withTail, isOut, lazyLoadQueue, middleware, size, withoutPreloader, loadPromises, noAutoDownload, noBlur}: {
   photo: MyPhoto | MyDocument, 
@@ -694,9 +693,9 @@ export function wrapPhoto({photo, message, container, boxWidth, boxHeight, withT
   let loadThumbPromise: Promise<any>;
   let thumbImage: HTMLImageElement;
   let image: HTMLImageElement;
-  if(withTail) {
+  // if(withTail) {
-    image = wrapMediaWithTail(photo, message, container, boxWidth, boxHeight, isOut);
+  //   image = wrapMediaWithTail(photo, message, container, boxWidth, boxHeight, isOut);
-  } else {
+  // } else {
     image = new Image();
 
     if(boxWidth && boxHeight && !size) { // !album
@@ -710,7 +709,7 @@ export function wrapPhoto({photo, message, container, boxWidth, boxHeight, withT
       thumbImage.classList.add('media-photo');
       container.append(thumbImage);
     }
-  }
+  // }
 
   image.classList.add('media-photo');
   

src/helpers/calcImageInBox.ts

@@ -9,11 +9,12 @@
  * https://github.com/zhukov/webogram/blob/master/LICENSE
  */
 
+import { makeMediaSize } from "./mediaSizes";
 import { MOUNT_CLASS_TO } from "../config/debug";
 
 export default function calcImageInBox(imageW: number, imageH: number, boxW: number, boxH: number, noZoom = true) {
   if(imageW < boxW && imageH < boxH && noZoom) {
-    return {w: imageW, h: imageH};
+    return makeMediaSize(imageW, imageH);
   }
 
   let boxedImageW = boxW;
@@ -39,7 +40,7 @@ export default function calcImageInBox(imageW: number, imageH: number, boxW: num
     boxedImageH = imageH;
   }
 
-  return {w: boxedImageW, h: boxedImageH};
+  return makeMediaSize(boxedImageW, boxedImageH);
 }
 
 MOUNT_CLASS_TO.calcImageInBox = calcImageInBox;

src/helpers/mediaSizes.ts

@@ -5,14 +5,36 @@
  */
 
 import { MOUNT_CLASS_TO } from "../config/debug";
+import calcImageInBox from "./calcImageInBox";
 import EventListenerBase from "./eventListenerBase";
 
-type Size = Partial<{width: number, height: number}>;
+export class MediaSize {
-type Sizes = {
+  constructor(public width = 0, public height = width) {
-  regular: Size,
+
-  webpage: Size,
+  }
-  album: Size,
+
-  esgSticker: Size
+  public aspect(boxSize: MediaSize, fitted: boolean) {
+    return calcImageInBox(this.width, this.height, boxSize.width, boxSize.height, fitted);
+  }
+
+  public aspectFitted(boxSize: MediaSize) {
+    return this.aspect(boxSize, true);
+  }
+
+  public aspectCovered(boxSize: MediaSize) {
+    return this.aspect(boxSize, false);
+  }
+}
+
+export function makeMediaSize(width?: number, height?: number): MediaSize {
+  return new MediaSize(width, height);
+}
+
+type MediaTypeSizes = {
+  regular: MediaSize,
+  webpage: MediaSize,
+  album: MediaSize,
+  esgSticker: MediaSize
 };
 
 export enum ScreenSize {
@@ -34,47 +56,23 @@ class MediaSizes extends EventListenerBase<{
     {key: ScreenSize.large, value: LARGE_SIZE}
   ];
 
-  private sizes: {[k in 'desktop' | 'handhelds']: Sizes} = {
+  private sizes: {[k in 'desktop' | 'handhelds']: MediaTypeSizes} = {
     handhelds: {
-      regular: {
+      regular: makeMediaSize(270, 270),
-        width: 270,
+      webpage: makeMediaSize(270, 200),
-        height: 270
+      album: makeMediaSize(270, 0),
-      },
+      esgSticker: makeMediaSize(68, 68)
-      webpage: {
-        width: 270,
-        height: 200
-      },
-      album: {
-        width: 270,
-        height: 0
-      },
-      esgSticker: {
-        width: 68,
-        height: 68
-      }
     },
     desktop: {
-      regular: {
+      regular: makeMediaSize(400, 320),
-        width: 400,
+      webpage: makeMediaSize(400, 320),
-        height: 320
+      album: makeMediaSize(420, 0),
-      },
+      esgSticker: makeMediaSize(80, 80)
-      webpage: {
-        width: 400,
-        height: 320
-      },
-      album: {
-        width: 420,
-        height: 0
-      },
-      esgSticker: {
-        width: 80,
-        height: 80
-      }
     }
   };
 
   public isMobile = false;
-  public active: Sizes;
+  public active: MediaTypeSizes;
   public activeScreen: ScreenSize;
   public rAF: number;
 

src/lib/appManagers/appPhotosManager.ts

@@ -25,6 +25,7 @@ import blur from "../../helpers/blur";
 import { MOUNT_CLASS_TO } from "../../config/debug";
 import renderImageFromUrl from "../../helpers/dom/renderImageFromUrl";
 import calcImageInBox from "../../helpers/calcImageInBox";
+import { makeMediaSize, MediaSize } from "../../helpers/mediaSizes";
 
 export type MyPhoto = Photo.photo;
 
@@ -86,10 +87,10 @@ export class AppPhotosManager {
     return this.photos[photo.id] = photo;
   }
   
-  public choosePhotoSize(photo: MyPhoto | MyDocument, width = 0, height = 0, useBytes = false) {
+  public choosePhotoSize(photo: MyPhoto | MyDocument, boxWidth = 0, boxHeight = 0, useBytes = false) {
     if(window.devicePixelRatio > 1) {
-      width *= 2;
+      boxWidth *= 2;
-      height *= 2;
+      boxHeight *= 2;
     }
     
     /*
@@ -106,13 +107,14 @@ export class AppPhotosManager {
     let bestPhotoSize: PhotoSize = {_: 'photoSizeEmpty', type: ''};
     const sizes = ((photo as MyPhoto).sizes || (photo as MyDocument).thumbs) as PhotoSize[];
     if(sizes?.length) {
-      for(const photoSize of sizes) {
+      for(let i = 0, length = sizes.length; i < length; ++i) {
+        const photoSize = sizes[i];
         if(!('w' in photoSize) && !('h' in photoSize)) continue;
   
         bestPhotoSize = photoSize;
   
-        const {w, h} = calcImageInBox(photoSize.w, photoSize.h, width, height);
+        const size = calcImageInBox(photoSize.w, photoSize.h, boxWidth, boxHeight);
-        if(w >= width || h >= height) {
+        if(size.width >= boxWidth || size.height >= boxHeight) {
           break;
         }
       }
@@ -218,31 +220,30 @@ export class AppPhotosManager {
     const photoSize = this.choosePhotoSize(photo, boxWidth, boxHeight);
     //console.log('setAttachmentSize', photo, photo.sizes[0].bytes, div);
     
-    let width: number;
+    let size: MediaSize;
-    let height: number;
     if(photo._ === 'document') {
-      width = photo.w || 512;
+      size = makeMediaSize(photo.w || 512, photo.h || 512);
-      height = photo.h || 512;
     } else {
-      width = 'w' in photoSize ? photoSize.w : 100;
+      size = makeMediaSize('w' in photoSize ? photoSize.w : 100, 'h' in photoSize ? photoSize.h : 100);
-      height = 'h' in photoSize ? photoSize.h : 100;
     }
-    
-    let {w, h} = calcImageInBox(width, height, boxWidth, boxHeight, noZoom);
 
-    /* if(hasText) {
+    const boxSize = makeMediaSize(boxWidth, boxHeight);
-      w = Math.max(boxWidth, w);
-    } */
 
-    if(element instanceof SVGForeignObjectElement) {
+    size = size.aspect(boxSize, noZoom);
-      element.setAttributeNS(null, 'width', '' + w);
-      element.setAttributeNS(null, 'height', '' + h);
 
-      //console.log('set dimensions to svg element:', element, w, h);
+    // /* if(hasText) {
-    } else {
+    //   w = Math.max(boxWidth, w);
-      element.style.width = w + 'px';
+    // } */
-      element.style.height = h + 'px';
+
-    }
+    // if(element instanceof SVGForeignObjectElement) {
+    //   element.setAttributeNS(null, 'width', '' + w);
+    //   element.setAttributeNS(null, 'height', '' + h);
+
+    //   //console.log('set dimensions to svg element:', element, w, h);
+    // } else {
+      element.style.width = size.width + 'px';
+      element.style.height = size.height + 'px';
+    // }
     
     return photoSize;
   }