From 0e5b5c47d161dbca82d9ad69ec4097994cf6452e Mon Sep 17 00:00:00 2001 From: Eduard Kuzmenko Date: Thu, 13 May 2021 23:53:15 +0400 Subject: [PATCH] temp --- src/components/gifsMasonry.ts | 4 +- src/components/popups/newMedia.ts | 6 +- src/components/wrappers.ts | 13 ++--- src/helpers/calcImageInBox.ts | 5 +- src/helpers/mediaSizes.ts | 78 ++++++++++++------------- src/lib/appManagers/appPhotosManager.ts | 51 ++++++++-------- 6 files changed, 78 insertions(+), 79 deletions(-) diff --git a/src/components/gifsMasonry.ts b/src/components/gifsMasonry.ts index d7a1af26..b808af5c 100644 --- a/src/components/gifsMasonry.ts +++ b/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; diff --git a/src/components/popups/newMedia.ts b/src/components/popups/newMedia.ts index 22bc9574..c9f18236 100644 --- a/src/components/popups/newMedia.ts +++ b/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); - div.style.width = w + 'px'; - div.style.height = h + 'px'; + const size = calcImageInBox(params.width, params.height, 380, 320); + div.style.width = size.width + 'px'; + div.style.height = size.height + 'px'; this.mediaContainer.append(div); } } diff --git a/src/components/wrappers.ts b/src/components/wrappers.ts index 1d9c40f0..0bfb8da8 100644 --- a/src/components/wrappers.ts +++ b/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; let thumbImage: HTMLImageElement; let image: HTMLImageElement; - if(withTail) { - image = wrapMediaWithTail(photo, message, container, boxWidth, boxHeight, isOut); - } else { + // if(withTail) { + // image = wrapMediaWithTail(photo, message, container, boxWidth, boxHeight, isOut); + // } 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'); diff --git a/src/helpers/calcImageInBox.ts b/src/helpers/calcImageInBox.ts index 99c5d79b..87bde93e 100644 --- a/src/helpers/calcImageInBox.ts +++ b/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; diff --git a/src/helpers/mediaSizes.ts b/src/helpers/mediaSizes.ts index a15e7469..73aef1d0 100644 --- a/src/helpers/mediaSizes.ts +++ b/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}>; -type Sizes = { - regular: Size, - webpage: Size, - album: Size, - esgSticker: Size +export class MediaSize { + constructor(public width = 0, public height = width) { + + } + + 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: { - width: 270, - height: 270 - }, - webpage: { - width: 270, - height: 200 - }, - album: { - width: 270, - height: 0 - }, - esgSticker: { - width: 68, - height: 68 - } + regular: makeMediaSize(270, 270), + webpage: makeMediaSize(270, 200), + album: makeMediaSize(270, 0), + esgSticker: makeMediaSize(68, 68) }, desktop: { - regular: { - width: 400, - height: 320 - }, - webpage: { - width: 400, - height: 320 - }, - album: { - width: 420, - height: 0 - }, - esgSticker: { - width: 80, - height: 80 - } + regular: makeMediaSize(400, 320), + webpage: makeMediaSize(400, 320), + album: makeMediaSize(420, 0), + esgSticker: makeMediaSize(80, 80) } }; public isMobile = false; - public active: Sizes; + public active: MediaTypeSizes; public activeScreen: ScreenSize; public rAF: number; diff --git a/src/lib/appManagers/appPhotosManager.ts b/src/lib/appManagers/appPhotosManager.ts index 18f974b6..90f73852 100644 --- a/src/lib/appManagers/appPhotosManager.ts +++ b/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; - height *= 2; + boxWidth *= 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); - if(w >= width || h >= height) { + const size = calcImageInBox(photoSize.w, photoSize.h, boxWidth, boxHeight); + 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 height: number; + let size: MediaSize; if(photo._ === 'document') { - width = photo.w || 512; - height = photo.h || 512; + size = makeMediaSize(photo.w || 512, photo.h || 512); } else { - width = 'w' in photoSize ? photoSize.w : 100; - height = 'h' in photoSize ? photoSize.h : 100; + size = makeMediaSize('w' in photoSize ? photoSize.w : 100, 'h' in photoSize ? photoSize.h : 100); } - - let {w, h} = calcImageInBox(width, height, boxWidth, boxHeight, noZoom); - /* if(hasText) { - w = Math.max(boxWidth, w); - } */ + const boxSize = makeMediaSize(boxWidth, boxHeight); - if(element instanceof SVGForeignObjectElement) { - element.setAttributeNS(null, 'width', '' + w); - element.setAttributeNS(null, 'height', '' + h); + size = size.aspect(boxSize, noZoom); - //console.log('set dimensions to svg element:', element, w, h); - } else { - element.style.width = w + 'px'; - element.style.height = h + 'px'; - } + // /* if(hasText) { + // w = Math.max(boxWidth, w); + // } */ + + // 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; }