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

Fix GIFs size

Browse Source
This commit is contained in:
morethanwords 2020-08-26 23:31:07 +03:00
parent ae8f0755b7
commit d4d5d6a996
2 changed files with 47 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/emoticonsDropdown.ts
View File

@ -556,7 +556,7 @@ class GifsTab implements EmoticonsTab {
preloader.remove(); preloader.remove();
res.gifs.forEach((doc, idx) => { res.gifs.forEach((doc, idx) => {
res.gifs[idx] = appDocsManager.saveDoc(doc); res.gifs[idx] = appDocsManager.saveDoc(doc);
masonry.add(doc, EMOTICONSSTICKERGROUP, EmoticonsDropdown.lazyLoadQueue); masonry.add(res.gifs[idx], EMOTICONSSTICKERGROUP, EmoticonsDropdown.lazyLoadQueue);
}); });
}); });

99
src/lib/appManagers/appMediaViewer.ts
View File

@ -194,16 +194,16 @@ export class AppMediaViewer {
} }
public async setMoverToTarget(target: HTMLElement, closing = false, fromRight = 0) { public async setMoverToTarget(target: HTMLElement, closing = false, fromRight = 0) {
let mover = this.content.mover; const mover = this.content.mover;
if(!closing) { if(!closing) {
mover.innerHTML = ''; mover.innerHTML = '';
//mover.append(this.buttons.prev, this.buttons.next); //mover.append(this.buttons.prev, this.buttons.next);
} }
let wasActive = fromRight !== 0; const wasActive = fromRight !== 0;
let delay = wasActive ? 350 : 200; const delay = wasActive ? 350 : 200;
//let delay = wasActive ? 350 : 10000; //let delay = wasActive ? 350 : 10000;
/* if(wasActive) { /* if(wasActive) {
@ -226,7 +226,7 @@ export class AppMediaViewer {
} }
} }
let containerRect = this.content.container.getBoundingClientRect(); const containerRect = this.content.container.getBoundingClientRect();
let transform = ''; let transform = '';
let left: number; let left: number;
@ -245,9 +245,9 @@ export class AppMediaViewer {
if(mover.firstElementChild && mover.firstElementChild.classList.contains('media-viewer-aspecter')) { if(mover.firstElementChild && mover.firstElementChild.classList.contains('media-viewer-aspecter')) {
aspecter = mover.firstElementChild as HTMLDivElement; aspecter = mover.firstElementChild as HTMLDivElement;
let player = aspecter.querySelector('.ckin__player'); const player = aspecter.querySelector('.ckin__player');
if(player) { if(player) {
let video = player.firstElementChild as HTMLVideoElement; const video = player.firstElementChild as HTMLVideoElement;
aspecter.append(video); aspecter.append(video);
player.remove(); player.remove();
} }
@ -272,14 +272,14 @@ export class AppMediaViewer {
mover.style.width = containerRect.width + 'px'; mover.style.width = containerRect.width + 'px';
mover.style.height = containerRect.height + 'px'; mover.style.height = containerRect.height + 'px';
let scaleX = rect.width / containerRect.width; const scaleX = rect.width / containerRect.width;
let scaleY = rect.height / containerRect.height; const scaleY = rect.height / containerRect.height;
if(!wasActive) { if(!wasActive) {
transform += `scale(${scaleX},${scaleY}) `; transform += `scale(${scaleX},${scaleY}) `;
} }
let borderRadius = window.getComputedStyle(realParent).getPropertyValue('border-radius'); let borderRadius = window.getComputedStyle(realParent).getPropertyValue('border-radius');
let brSplitted = fillPropertyValue(borderRadius) as string[]; const brSplitted = fillPropertyValue(borderRadius) as string[];
borderRadius = brSplitted.map(r => (parseInt(r) / scaleX) + 'px').join(' '); borderRadius = brSplitted.map(r => (parseInt(r) / scaleX) + 'px').join(' ');
if(!wasActive) { if(!wasActive) {
mover.style.borderRadius = borderRadius; mover.style.borderRadius = borderRadius;
@ -292,7 +292,7 @@ export class AppMediaViewer {
} */ } */
let path: SVGPathElement; let path: SVGPathElement;
let isOut = target.classList.contains('is-out'); const isOut = target.classList.contains('is-out');
if(!closing) { if(!closing) {
let mediaElement: HTMLImageElement | HTMLVideoElement; let mediaElement: HTMLImageElement | HTMLVideoElement;
@ -311,15 +311,15 @@ export class AppMediaViewer {
mediaElement = new Image(); mediaElement = new Image();
src = target.src; src = target.src;
} else if(target instanceof HTMLVideoElement) { } else if(target instanceof HTMLVideoElement) {
let video = mediaElement = document.createElement('video'); const video = mediaElement = document.createElement('video');
video.src = target?.src; video.src = target?.src;
} else if(target instanceof SVGSVGElement) { } else if(target instanceof SVGSVGElement) {
let clipID = target.dataset.clipID; const clipID = target.dataset.clipID;
let newClipID = clipID + '-mv'; const newClipID = clipID + '-mv';
let {width, height} = containerRect; const {width, height} = containerRect;
let newSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); const newSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
newSvg.setAttributeNS(null, 'width', '' + width); newSvg.setAttributeNS(null, 'width', '' + width);
newSvg.setAttributeNS(null, 'height', '' + height); newSvg.setAttributeNS(null, 'height', '' + height);
@ -327,8 +327,8 @@ export class AppMediaViewer {
newSvg.insertAdjacentHTML('beforeend', target.lastElementChild.outerHTML.replace(clipID, newClipID)); newSvg.insertAdjacentHTML('beforeend', target.lastElementChild.outerHTML.replace(clipID, newClipID));
// теперь надо выставить новую позицию для хвостика // теперь надо выставить новую позицию для хвостика
let defs = newSvg.firstElementChild; const defs = newSvg.firstElementChild;
let use = defs.firstElementChild.firstElementChild as SVGUseElement; const use = defs.firstElementChild.firstElementChild as SVGUseElement;
if(use instanceof SVGUseElement) { if(use instanceof SVGUseElement) {
let transform = use.getAttributeNS(null, 'transform'); let transform = use.getAttributeNS(null, 'transform');
transform = transform.replace(/translate\((.+?), (.+?)\) scale\((.+?), (.+?)\)/, (match, x, y, sX, sY) => { transform = transform.replace(/translate\((.+?), (.+?)\) scale\((.+?), (.+?)\)/, (match, x, y, sX, sY) => {
@ -350,13 +350,13 @@ export class AppMediaViewer {
// код ниже нужен только чтобы скрыть моргание до момента как сработает таймаут // код ниже нужен только чтобы скрыть моргание до момента как сработает таймаут
let d: string; let d: string;
let br: [number, number, number, number] = borderRadius.split(' ').map(v => parseInt(v)) as any; const br: [number, number, number, number] = borderRadius.split(' ').map(v => parseInt(v)) as any;
if(isOut) d = generatePathData(0, 0, width - 9 / scaleX, height, ...br); if(isOut) d = generatePathData(0, 0, width - 9 / scaleX, height, ...br);
else d = generatePathData(9 / scaleX, 0, width - 9 / scaleX, height, ...br); else d = generatePathData(9 / scaleX, 0, width - 9 / scaleX, height, ...br);
path.setAttributeNS(null, 'd', d); path.setAttributeNS(null, 'd', d);
} }
let foreignObject = newSvg.lastElementChild; const foreignObject = newSvg.lastElementChild;
foreignObject.setAttributeNS(null, 'width', '' + containerRect.width); foreignObject.setAttributeNS(null, 'width', '' + containerRect.width);
foreignObject.setAttributeNS(null, 'height', '' + containerRect.height); foreignObject.setAttributeNS(null, 'height', '' + containerRect.height);
@ -494,20 +494,20 @@ export class AppMediaViewer {
} }
public sizeTailPath(path: SVGPathElement, rect: DOMRect, scaleX: number, delay: number, upscale: boolean, isOut: boolean, borderRadius: string) { public sizeTailPath(path: SVGPathElement, rect: DOMRect, scaleX: number, delay: number, upscale: boolean, isOut: boolean, borderRadius: string) {
let start = Date.now(); const start = Date.now();
let {width, height} = rect; const {width, height} = rect;
delay = delay / 2; delay = delay / 2;
let br = borderRadius.split(' ').map(v => parseInt(v)); const br = borderRadius.split(' ').map(v => parseInt(v));
let step = () => { const step = () => {
let diff = Date.now() - start; const diff = Date.now() - start;
let progress = diff / delay; let progress = diff / delay;
if(progress > 1) progress = 1; if(progress > 1) progress = 1;
if(upscale) progress = 1 - progress; if(upscale) progress = 1 - progress;
let _br: [number, number, number, number] = br.map(v => v * progress) as any; const _br: [number, number, number, number] = br.map(v => v * progress) as any;
let d: string; let d: string;
if(isOut) d = generatePathData(0, 0, width - (9 / scaleX * progress), height, ..._br); if(isOut) d = generatePathData(0, 0, width - (9 / scaleX * progress), height, ..._br);
@ -522,7 +522,7 @@ export class AppMediaViewer {
} }
public moveTheMover(mover: HTMLDivElement, toLeft = true) { public moveTheMover(mover: HTMLDivElement, toLeft = true) {
let windowW = appPhotosManager.windowW; const windowW = appPhotosManager.windowW;
//mover.classList.remove('active'); //mover.classList.remove('active');
mover.classList.add('moving'); mover.classList.add('moving');
@ -531,9 +531,9 @@ export class AppMediaViewer {
clearTimeout(+mover.dataset.timeout); clearTimeout(+mover.dataset.timeout);
} }
let rect = mover.getBoundingClientRect(); const rect = mover.getBoundingClientRect();
let newTransform = mover.style.transform.replace(/translate\((.+?),/, (match, p1) => { const newTransform = mover.style.transform.replace(/translate\((.+?),/, (match, p1) => {
/////////this.log('replace func', match, p1); /////////this.log('replace func', match, p1);
let x = +p1.slice(0, -2); let x = +p1.slice(0, -2);
x = toLeft ? -rect.width : windowW; x = toLeft ? -rect.width : windowW;
@ -550,11 +550,11 @@ export class AppMediaViewer {
} }
public setNewMover() { public setNewMover() {
let newMover = document.createElement('div'); const newMover = document.createElement('div');
newMover.classList.add('media-viewer-mover'); newMover.classList.add('media-viewer-mover');
if(this.content.mover) { if(this.content.mover) {
let oldMover = this.content.mover; const oldMover = this.content.mover;
oldMover.parentElement.append(newMover); oldMover.parentElement.append(newMover);
} else { } else {
this.wholeDiv.append(newMover); this.wholeDiv.append(newMover);
@ -565,12 +565,12 @@ export class AppMediaViewer {
return this.content.mover = newMover; return this.content.mover = newMover;
} }
public isElementVisible(container: HTMLElement, target: HTMLElement) { /* public isElementVisible(container: HTMLElement, target: HTMLElement) {
let rect = container.getBoundingClientRect(); const rect = container.getBoundingClientRect();
let targetRect = target.getBoundingClientRect(); const targetRect = target.getBoundingClientRect();
return targetRect.bottom > rect.top && targetRect.top < rect.bottom; return targetRect.bottom > rect.top && targetRect.top < rect.bottom;
} } */
// нет смысла делать проверку для reverse и loadMediaPromise // нет смысла делать проверку для reverse и loadMediaPromise
public loadMoreMedia(older = true) { public loadMoreMedia(older = true) {
@ -582,8 +582,8 @@ export class AppMediaViewer {
if(older && this.loadMediaPromiseDown) return this.loadMediaPromiseDown; if(older && this.loadMediaPromiseDown) return this.loadMediaPromiseDown;
else if(!older && this.loadMediaPromiseUp) return this.loadMediaPromiseUp; else if(!older && this.loadMediaPromiseUp) return this.loadMediaPromiseUp;
let loadCount = 50; const loadCount = 50;
let backLimit = older ? 0 : loadCount; const backLimit = older ? 0 : loadCount;
let maxID = this.currentMessageID; let maxID = this.currentMessageID;
let anchor: {element: HTMLElement, mid: number}; let anchor: {element: HTMLElement, mid: number};
@ -596,9 +596,9 @@ export class AppMediaViewer {
if(anchor) maxID = anchor.mid; if(anchor) maxID = anchor.mid;
if(!older) maxID += 1; if(!older) maxID += 1;
let peerID = this.peerID; const peerID = this.peerID;
let promise = appMessagesManager.getSearch(peerID, '', const promise = appMessagesManager.getSearch(peerID, '',
{_: 'inputMessagesFilterPhotoVideo'}, maxID, loadCount/* older ? loadCount : 0 */, 0, backLimit).then(value => { {_: 'inputMessagesFilterPhotoVideo'}, maxID, loadCount/* older ? loadCount : 0 */, 0, backLimit).then(value => {
if(this.peerID != peerID) { if(this.peerID != peerID) {
this.log.warn('peer changed'); this.log.warn('peer changed');
@ -617,15 +617,15 @@ export class AppMediaViewer {
//} //}
} }
let method = older ? value.history.forEach : value.history.forEachReverse; const method = older ? value.history.forEach : value.history.forEachReverse;
method.call(value.history, mid => { method.call(value.history, mid => {
let message = appMessagesManager.getMessage(mid); const message = appMessagesManager.getMessage(mid);
let media = message.media; const media = message.media;
if(!media || !(media.photo || media.document || (media.webpage && media.webpage.document))) return; if(!media || !(media.photo || media.document || (media.webpage && media.webpage.document))) return;
if(media._ == 'document' && media.type != 'video') return; if(media._ == 'document' && media.type != 'video') return;
let t = {element: null as HTMLElement, mid: mid}; const t = {element: null as HTMLElement, mid: mid};
if(older) { if(older) {
if(this.reverse) this.prevTargets.unshift(t); if(this.reverse) this.prevTargets.unshift(t);
else this.nextTargets.push(t); else this.nextTargets.push(t);
@ -650,7 +650,7 @@ export class AppMediaViewer {
public updateMediaSource(target: HTMLElement, url: string, tagName: 'video' | 'img') { public updateMediaSource(target: HTMLElement, url: string, tagName: 'video' | 'img') {
//if(target instanceof SVGSVGElement) { //if(target instanceof SVGSVGElement) {
let el = target.querySelector(tagName) as HTMLElement; const el = target.querySelector(tagName) as HTMLElement;
renderImageFromUrl(el, url); renderImageFromUrl(el, url);
/* } else { /* } else {
@ -800,13 +800,8 @@ export class AppMediaViewer {
appAudio.pause(); appAudio.pause();
appAudio.willBePlayedAudio = null; appAudio.willBePlayedAudio = null;
const player = new VideoPlayer(video, true, media.supportsStreaming); new VideoPlayer(video, true, media.supportsStreaming);
return player; }
/* player.wrapper.parentElement.append(video);
mover.append(player.wrapper); */
}/* else {
video.play();
} */
}; };
if(!video.src || (media.url && media.url != video.src)) { if(!video.src || (media.url && media.url != video.src)) {
@ -817,8 +812,6 @@ export class AppMediaViewer {
this.preloader.attach(mover, true, promise); this.preloader.attach(mover, true, promise);
//} //}
let player: VideoPlayer;
promise.then(async() => { promise.then(async() => {
if(this.currentMessageID != message.mid) { if(this.currentMessageID != message.mid) {
this.log.warn('media viewer changed video'); this.log.warn('media viewer changed video');
@ -857,7 +850,7 @@ export class AppMediaViewer {
}); });
}); */ }); */
player = createPlayer(); createPlayer();
}); });
return promise; return promise;