r4sas/tweb-i2p
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

temp

Browse Source
This commit is contained in:
Eduard Kuzmenko 2021-05-13 23:53:15 +04:00
parent ae56298f5d
commit 0e5b5c47d1
6 changed files with 78 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/gifsMasonry.ts
View File

@ -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;

6
src/components/popups/newMedia.ts
View File

@ -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);
}
}

13
src/components/wrappers.ts
View File

@ -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) {
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');

5
src/helpers/calcImageInBox.ts
View File

@ -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;

78
src/helpers/mediaSizes.ts
View File

@ -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;

49
src/lib/appManagers/appPhotosManager.ts
View File

@ -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);
const boxSize = makeMediaSize(boxWidth, boxHeight);
/* if(hasText) {
w = Math.max(boxWidth, w);
} */
size = size.aspect(boxSize, noZoom);
if(element instanceof SVGForeignObjectElement) {
element.setAttributeNS(null, 'width', '' + w);
element.setAttributeNS(null, 'height', '' + h);
// /* if(hasText) {
// w = Math.max(boxWidth, w);
// } */
//console.log('set dimensions to svg element:', element, w, h);
} else {
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;
}