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.
278 lines
8.5 KiB
278 lines
8.5 KiB
/* |
|
* https://github.com/morethanwords/tweb |
|
* Copyright (C) 2019-2021 Eduard Kuzmenko |
|
* https://github.com/morethanwords/tweb/blob/master/LICENSE |
|
*/ |
|
|
|
import {CustomEmojiRendererElement} from '../lib/richTextProcessor/wrapRichText'; |
|
import rootScope from '../lib/rootScope'; |
|
import {IS_SAFARI} from '../environment/userAgent'; |
|
import {MOUNT_CLASS_TO} from '../config/debug'; |
|
import isInDOM from '../helpers/dom/isInDOM'; |
|
import RLottiePlayer from '../lib/rlottie/rlottiePlayer'; |
|
import indexOfAndSplice from '../helpers/array/indexOfAndSplice'; |
|
import forEachReverse from '../helpers/array/forEachReverse'; |
|
import idleController from '../helpers/idleController'; |
|
import appMediaPlaybackController from './appMediaPlaybackController'; |
|
import {fastRaf} from '../helpers/schedulers'; |
|
|
|
export type AnimationItemGroup = '' | 'none' | 'chat' | 'lock' | |
|
'STICKERS-POPUP' | 'emoticons-dropdown' | 'STICKERS-SEARCH' | 'GIFS-SEARCH' | |
|
`CHAT-MENU-REACTIONS-${number}` | 'INLINE-HELPER' | 'GENERAL-SETTINGS' | 'STICKER-VIEWER' | 'EMOJI'; |
|
export interface AnimationItem { |
|
el: HTMLElement, |
|
group: AnimationItemGroup, |
|
animation: AnimationItemWrapper |
|
}; |
|
|
|
export interface AnimationItemWrapper { |
|
remove: () => void; |
|
paused: boolean; |
|
pause: () => any; |
|
play: () => any; |
|
autoplay: boolean; |
|
// onVisibilityChange?: (visible: boolean) => boolean; |
|
}; |
|
|
|
export class AnimationIntersector { |
|
private observer: IntersectionObserver; |
|
private visible: Set<AnimationItem> = new Set(); |
|
|
|
private overrideIdleGroups: Set<string>; |
|
private byGroups: {[group in AnimationItemGroup]?: AnimationItem[]} = {}; |
|
private lockedGroups: {[group in AnimationItemGroup]?: true} = {}; |
|
private onlyOnePlayableGroup: AnimationItemGroup = ''; |
|
|
|
private intersectionLockedGroups: {[group in AnimationItemGroup]?: true} = {}; |
|
private videosLocked = false; |
|
|
|
constructor() { |
|
this.observer = new IntersectionObserver((entries) => { |
|
// if(rootScope.idle.isIDLE) return; |
|
|
|
for(const entry of entries) { |
|
const target = entry.target; |
|
|
|
for(const group in this.byGroups) { |
|
if(this.intersectionLockedGroups[group as AnimationItemGroup]) { |
|
continue; |
|
} |
|
|
|
const animation = this.byGroups[group as AnimationItemGroup].find((p) => p.el === target); |
|
if(!animation) { |
|
continue; |
|
} |
|
|
|
if(entry.isIntersecting) { |
|
this.visible.add(animation); |
|
this.checkAnimation(animation, false); |
|
|
|
/* if(animation instanceof HTMLVideoElement && animation.dataset.src) { |
|
animation.src = animation.dataset.src; |
|
animation.load(); |
|
} */ |
|
} else { |
|
this.visible.delete(animation); |
|
this.checkAnimation(animation, true); |
|
|
|
const _animation = animation.animation; |
|
if(_animation instanceof RLottiePlayer/* && animation.cachingDelta === 2 */) { |
|
// console.warn('will clear cache', player); |
|
_animation.clearCache(); |
|
}/* else if(animation instanceof HTMLVideoElement && animation.src) { |
|
animation.dataset.src = animation.src; |
|
animation.src = ''; |
|
animation.load(); |
|
} */ |
|
} |
|
|
|
break; |
|
} |
|
} |
|
}); |
|
|
|
this.overrideIdleGroups = new Set(); |
|
|
|
appMediaPlaybackController.addEventListener('play', ({doc}) => { |
|
if(doc.type === 'round') { |
|
this.videosLocked = true; |
|
this.checkAnimations(); |
|
} |
|
}); |
|
|
|
appMediaPlaybackController.addEventListener('pause', () => { |
|
if(this.videosLocked) { |
|
this.videosLocked = false; |
|
this.checkAnimations(); |
|
} |
|
}); |
|
|
|
idleController.addEventListener('change', (idle) => { |
|
this.checkAnimations(idle); |
|
}); |
|
} |
|
|
|
public setOverrideIdleGroup(group: string, override: boolean) { |
|
if(override) this.overrideIdleGroups.add(group); |
|
else this.overrideIdleGroups.delete(group); |
|
} |
|
|
|
public getAnimations(element: HTMLElement) { |
|
const found: AnimationItem[] = []; |
|
for(const group in this.byGroups) { |
|
for(const player of this.byGroups[group as AnimationItemGroup]) { |
|
if(player.el === element) { |
|
found.push(player); |
|
} |
|
} |
|
} |
|
|
|
return found; |
|
} |
|
|
|
public removeAnimation(player: AnimationItem) { |
|
const {el, animation} = player; |
|
animation.remove(); |
|
|
|
if(animation instanceof HTMLVideoElement && IS_SAFARI) { |
|
setTimeout(() => { // TODO: очистка по очереди, а не все вместе с этим таймаутом |
|
animation.src = ''; |
|
animation.load(); |
|
}, 1e3); |
|
} |
|
|
|
const group = this.byGroups[player.group]; |
|
if(group) { |
|
indexOfAndSplice(group, player); |
|
if(!group.length) { |
|
delete this.byGroups[player.group]; |
|
} |
|
} |
|
|
|
this.observer.unobserve(el); |
|
this.visible.delete(player); |
|
} |
|
|
|
public addAnimation(_animation: AnimationItem['animation'], group: AnimationItemGroup = '') { |
|
if(group === 'none') { |
|
return; |
|
} |
|
|
|
let el: HTMLElement; |
|
if(_animation instanceof RLottiePlayer) { |
|
el = _animation.el[0]; |
|
} else if(_animation instanceof CustomEmojiRendererElement) { |
|
el = _animation.canvas; |
|
} else if(_animation instanceof HTMLElement) { |
|
el = _animation; |
|
} |
|
|
|
const animation: AnimationItem = { |
|
el, |
|
animation: _animation, |
|
group |
|
}; |
|
|
|
if(_animation instanceof RLottiePlayer) { |
|
if(!rootScope.settings.stickers.loop && _animation.loop) { |
|
_animation.loop = rootScope.settings.stickers.loop; |
|
} |
|
} |
|
|
|
(this.byGroups[group as AnimationItemGroup] ??= []).push(animation); |
|
this.observer.observe(animation.el); |
|
} |
|
|
|
public checkAnimations(blurred?: boolean, group?: AnimationItemGroup, destroy = false) { |
|
// if(rootScope.idle.isIDLE) return; |
|
|
|
if(group !== undefined && !this.byGroups[group]) { |
|
// console.warn('no animation group:', group); |
|
return; |
|
} |
|
|
|
const groups = group !== undefined /* && false */ ? [group] : Object.keys(this.byGroups) as AnimationItemGroup[]; |
|
|
|
for(const group of groups) { |
|
const animations = this.byGroups[group]; |
|
|
|
forEachReverse(animations, (animation) => { |
|
this.checkAnimation(animation, blurred, destroy); |
|
}); |
|
} |
|
} |
|
|
|
public checkAnimation(player: AnimationItem, blurred = false, destroy = false) { |
|
const {el, animation, group} = player; |
|
// return; |
|
if(destroy || (!this.lockedGroups[group] && !isInDOM(el))) { |
|
this.removeAnimation(player); |
|
return; |
|
} |
|
|
|
if(blurred || |
|
(this.onlyOnePlayableGroup && this.onlyOnePlayableGroup !== group) || |
|
(animation instanceof HTMLVideoElement && this.videosLocked) |
|
) { |
|
if(!animation.paused) { |
|
// console.warn('pause animation:', animation); |
|
animation.pause(); |
|
} |
|
} else if(animation.paused && |
|
this.visible.has(player) && |
|
animation.autoplay && |
|
(!this.onlyOnePlayableGroup || this.onlyOnePlayableGroup === group) && |
|
(!idleController.isIdle || this.overrideIdleGroups.has(player.group)) |
|
) { |
|
// console.warn('play animation:', animation); |
|
animation.play(); |
|
} |
|
} |
|
|
|
public getOnlyOnePlayableGroup() { |
|
return this.onlyOnePlayableGroup; |
|
} |
|
|
|
public setOnlyOnePlayableGroup(group: AnimationItemGroup = '') { |
|
this.onlyOnePlayableGroup = group; |
|
} |
|
|
|
public lockGroup(group: AnimationItemGroup) { |
|
this.lockedGroups[group] = true; |
|
} |
|
|
|
public unlockGroup(group: AnimationItemGroup) { |
|
delete this.lockedGroups[group]; |
|
this.checkAnimations(undefined, group); |
|
} |
|
|
|
public refreshGroup(group: AnimationItemGroup) { |
|
const animations = this.byGroups[group]; |
|
if(!animations?.length) { |
|
return; |
|
} |
|
|
|
animations.forEach((animation) => { |
|
this.observer.unobserve(animation.el); |
|
}); |
|
|
|
fastRaf(() => { |
|
animations.forEach((animation) => { |
|
this.observer.observe(animation.el); |
|
}); |
|
}); |
|
} |
|
|
|
public lockIntersectionGroup(group: AnimationItemGroup) { |
|
this.intersectionLockedGroups[group] = true; |
|
} |
|
|
|
public unlockIntersectionGroup(group: AnimationItemGroup) { |
|
delete this.intersectionLockedGroups[group]; |
|
this.refreshGroup(group); |
|
} |
|
} |
|
|
|
const animationIntersector = new AnimationIntersector(); |
|
MOUNT_CLASS_TO && (MOUNT_CLASS_TO.animationIntersector = animationIntersector); |
|
export default animationIntersector;
|
|
|