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.
136 lines
3.2 KiB
136 lines
3.2 KiB
/* |
|
* 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 EventListenerBase from "./eventListenerBase"; |
|
|
|
type Size = Partial<{width: number, height: number}>; |
|
type Sizes = { |
|
regular: Size, |
|
webpage: Size, |
|
album: Size, |
|
esgSticker: Size |
|
}; |
|
|
|
export enum ScreenSize { |
|
mobile, |
|
medium, |
|
large |
|
} |
|
|
|
const MOBILE_SIZE = 600; |
|
const MEDIUM_SIZE = 1275; |
|
const LARGE_SIZE = 1680; |
|
|
|
class MediaSizes extends EventListenerBase<{ |
|
changeScreen: (from: ScreenSize, to: ScreenSize) => void |
|
}> { |
|
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']: Sizes} = { |
|
handhelds: { |
|
regular: { |
|
width: 270, |
|
height: 270 |
|
}, |
|
webpage: { |
|
width: 270, |
|
height: 200 |
|
}, |
|
album: { |
|
width: 270, |
|
height: 0 |
|
}, |
|
esgSticker: { |
|
width: 68, |
|
height: 68 |
|
} |
|
}, |
|
desktop: { |
|
regular: { |
|
width: 400, |
|
height: 320 |
|
}, |
|
webpage: { |
|
width: 400, |
|
height: 320 |
|
}, |
|
album: { |
|
width: 420, |
|
height: 0 |
|
}, |
|
esgSticker: { |
|
width: 80, |
|
height: 80 |
|
} |
|
} |
|
}; |
|
|
|
public isMobile = false; |
|
public active: Sizes; |
|
public activeScreen: ScreenSize; |
|
public rAF: number; |
|
|
|
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); |
|
} |
|
} |
|
|
|
/* 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;
|
|
|