Telegram Web K with changes to work inside I2P https://web.telegram.i2p/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

152 lines
4.2 KiB

3 years ago
/*
* https://github.com/morethanwords/tweb
* Copyright (C) 2019-2021 Eduard Kuzmenko
* https://github.com/morethanwords/tweb/blob/master/LICENSE
*/
import { MOUNT_CLASS_TO } from "../config/debug";
import calcImageInBox from "./calcImageInBox";
import EventListenerBase from "./eventListenerBase";
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,
animatedSticker: MediaSize,
staticSticker: MediaSize,
3 years ago
emojiSticker: MediaSize,
poll: MediaSize
3 years ago
};
export enum ScreenSize {
mobile,
medium,
large
}
const MOBILE_SIZE = 600;
const MEDIUM_SIZE = 1275;
const LARGE_SIZE = 1680;
class MediaSizes extends EventListenerBase<{
3 years ago
changeScreen: (from: ScreenSize, to: ScreenSize) => void,
resize: () => void
3 years ago
}> {
private screenSizes: {key: ScreenSize, value: number}[] = [
{key: ScreenSize.mobile, value: MOBILE_SIZE},
{key: ScreenSize.medium, value: MEDIUM_SIZE},
{key: ScreenSize.large, value: LARGE_SIZE}
];
private sizes: {[k in 'desktop' | 'handhelds']: MediaTypeSizes} = {
handhelds: {
regular: makeMediaSize(270, 270),
webpage: makeMediaSize(270, 200),
album: makeMediaSize(270, 0),
esgSticker: makeMediaSize(68, 68),
animatedSticker: makeMediaSize(180, 180),
staticSticker: makeMediaSize(180, 180),
3 years ago
emojiSticker: makeMediaSize(112, 112),
poll: makeMediaSize(240, 0)
3 years ago
},
desktop: {
regular: makeMediaSize(420, 340),
webpage: makeMediaSize(420, 340),
album: makeMediaSize(420, 0),
esgSticker: makeMediaSize(80, 80),
animatedSticker: makeMediaSize(200, 200),
staticSticker: makeMediaSize(200, 200),
3 years ago
emojiSticker: makeMediaSize(112, 112),
poll: makeMediaSize(330, 0)
3 years ago
}
};
public isMobile = false;
public active: MediaTypeSizes;
public activeScreen: ScreenSize;
3 years ago
private rAF: number;
3 years ago
constructor() {
super();
window.addEventListener('resize', () => {
if(this.rAF) window.cancelAnimationFrame(this.rAF);
this.rAF = window.requestAnimationFrame(() => {
this.handleResize();
this.rAF = 0;
});
});
this.handleResize();
}
private handleResize = () => {
const innerWidth = window.innerWidth;
//this.isMobile = innerWidth <= 720;
let activeScreen = this.screenSizes[0].key;
for(let i = this.screenSizes.length - 1; i >= 0; --i) {
if(this.screenSizes[i].value < innerWidth) {
activeScreen = (this.screenSizes[i + 1] || this.screenSizes[i]).key;
break;
}
}
const wasScreen = this.activeScreen;
this.activeScreen = activeScreen;
this.isMobile = this.activeScreen === ScreenSize.mobile;
this.active = this.isMobile ? this.sizes.handhelds : this.sizes.desktop;
//console.time('esg');
//const computedStyle = window.getComputedStyle(document.documentElement);
//this.active.esgSticker.width = parseFloat(computedStyle.getPropertyValue('--esg-sticker-size'));
//console.timeEnd('esg');
if(wasScreen !== activeScreen) {
//console.log('changeScreen', this.activeScreen, activeScreen);
if(wasScreen !== undefined) {
this.dispatchEvent('changeScreen', this.activeScreen, activeScreen);
}
}
3 years ago
if(wasScreen !== undefined) {
this.dispatchEvent('resize');
}
3 years ago
/* if(this.isMobile) {
for(let i in this.active) {
// @ts-ignore
let size = this.active[i];
size.width = innerWidth
}
} */
};
}
const mediaSizes = new MediaSizes();
MOUNT_CLASS_TO.mediaSizes = mediaSizes;
export default mediaSizes;