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

Media viewer fixes

Browse Source
This commit is contained in:
Eduard Kuzmenko 2021-01-26 00:47:04 +02:00
parent cc1ab7ec6a
commit 13c4b541cd
6 changed files with 109 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/components/appMediaViewer.ts
View File

@ -774,8 +774,10 @@ class AppMediaViewerBase<ContentAdditionType extends string, ButtonsAdditionType
protected updateMediaSource(target: HTMLElement, url: string, tagName: 'video' | 'img') {
//if(target instanceof SVGSVGElement) {
const el = target.querySelector(tagName) as HTMLElement;
const el = target.tagName.toLowerCase() === tagName ? target : target.querySelector(tagName) as HTMLElement;
if(el) {
renderImageFromUrl(el, url);
}
/* } else {
} */
@ -847,7 +849,7 @@ class AppMediaViewerBase<ContentAdditionType extends string, ButtonsAdditionType
this.buttons.next.classList.toggle('hide', !this.nextTargets.length);
const container = this.content.media;
const useContainerAsTarget = !target;
const useContainerAsTarget = !target || target === container;
if(useContainerAsTarget) target = container;
this.lastTarget = target;
@ -890,11 +892,22 @@ class AppMediaViewerBase<ContentAdditionType extends string, ButtonsAdditionType
//const maxWidth = appPhotosManager.windowW - 16;
const maxWidth = mediaSizes.isMobile ? this.pageEl.scrollWidth : this.pageEl.scrollWidth - 16;
const maxHeight = appPhotosManager.windowH - 100;
let thumbPromise: Promise<any> = Promise.resolve();
if(useContainerAsTarget) {
const cacheContext = appPhotosManager.getCacheContext(media);
if(cacheContext.downloaded) {
const img = new Image();
img.src = cacheContext.url;
container.append(img);
} else {
const gotThumb = appPhotosManager.getStrippedThumbIfNeeded(media);
if(gotThumb) {
thumbPromise = gotThumb.loadPromise;
container.append(gotThumb.image);
}
const size = appPhotosManager.setAttachmentSize(media, container, maxWidth, maxHeight);
}
}
const size = appPhotosManager.setAttachmentSize(media, container, maxWidth, maxHeight, mediaSizes.isMobile ? false : true);
// need after setAttachmentSize
/* if(useContainerAsTarget) {
@ -910,7 +923,7 @@ class AppMediaViewerBase<ContentAdditionType extends string, ButtonsAdditionType
// потому что для safari нужно создать элемент из event'а
const video = document.createElement('video');
setMoverPromise = this.setMoverToTarget(target, false, fromRight).then(({onAnimationEnd}) => {
const set = () => this.setMoverToTarget(target, false, fromRight).then(({onAnimationEnd}) => {
//return; // set and don't move
//if(wasActive) return;
//return;
@ -1050,8 +1063,10 @@ class AppMediaViewerBase<ContentAdditionType extends string, ButtonsAdditionType
this.lazyLoadQueue.unshift({load});
//} else createPlayer();
});
setMoverPromise = thumbPromise.then(set);
} else {
setMoverPromise = this.setMoverToTarget(target, false, fromRight).then(({onAnimationEnd}) => {
const set = () => this.setMoverToTarget(target, false, fromRight).then(({onAnimationEnd}) => {
//return; // set and don't move
//if(wasActive) return;
//return;
@ -1088,18 +1103,25 @@ class AppMediaViewerBase<ContentAdditionType extends string, ButtonsAdditionType
}
} else {
const div = mover.firstElementChild && mover.firstElementChild.classList.contains('media-viewer-aspecter') ? mover.firstElementChild : mover;
const haveImage = div.firstElementChild?.tagName === 'IMG' ? div.firstElementChild as HTMLImageElement : null;
if(!haveImage || haveImage.src !== url) {
let image = new Image();
//this.log('will renderImageFromUrl:', image, div, target);
renderImageFromUrl(image, url, () => {
if(div.firstElementChild?.tagName === 'IMG') {
div.firstElementChild.remove();
this.updateMediaSource(target, url, 'img');
if(haveImage) {
window.requestAnimationFrame(() => {
haveImage.remove();
});
}
div.append(image);
});
}
}
this.preloader.detach();
}).catch(err => {
@ -1111,6 +1133,8 @@ class AppMediaViewerBase<ContentAdditionType extends string, ButtonsAdditionType
this.lazyLoadQueue.unshift({load});
});
setMoverPromise = thumbPromise.then(set);
}
return this.setMoverPromise = setMoverPromise.catch(() => {

9
src/components/sidebarLeft/tabs/settings.ts
View File

@ -5,7 +5,7 @@ import appSidebarLeft, { AppSidebarLeft } from "..";
import appUsersManager from "../../../lib/appManagers/appUsersManager";
import ButtonMenuToggle from "../../buttonMenuToggle";
import Button from "../../button";
import AppMediaViewer from "../../appMediaViewer";
//import AppMediaViewer from "../../appMediaViewerNew";
export default class AppSettingsTab extends SliderSuperTab {
private avatarElem: AvatarElement;
@ -44,12 +44,15 @@ export default class AppSettingsTab extends SliderSuperTab {
this.avatarElem.classList.add('profile-avatar', 'avatar-120');
/* const div = document.createElement('div');
div.style.cssText = 'border-radius: 8px; overflow: hidden; width: 396px; height: 264px; flex: 0 0 auto; position: relative; margin: 10rem 0 10rem auto;';
//div.style.cssText = 'border-radius: 8px; overflow: hidden; width: 396px; height: 264px; flex: 0 0 auto; position: relative; margin: 10rem 0 10rem auto;';
//div.style.width = '135px';
//div.style.height = '100px';
div.style.cssText = 'border-radius: 8px; overflow: hidden; width: 396px; height: 264px; flex: 0 0 auto; position: relative; margin: 10rem auto 10rem 0;';
div.style.width = '135px';
div.style.height = '100px';
const img = document.createElement('img');
img.src = 'assets/img/PinnedMessages.png';
img.src = 'assets/img/pepe.jpg';
img.classList.add('media-photo');
img.style.cssText = 'max-width: 100%;max-height: 100%;';

10
src/helpers/dom.ts
View File

@ -410,13 +410,13 @@ export function fillPropertyValue(str: string) {
return splitted;
}
export function calcImageInBox(imageW: number, imageH: number, boxW: number, boxH: number, noZoom?: boolean) {
if(imageW < boxW && imageH < boxH) {
export function calcImageInBox(imageW: number, imageH: number, boxW: number, boxH: number, noZoom = true) {
if(imageW < boxW && imageH < boxH && noZoom) {
return {w: imageW, h: imageH};
}
var boxedImageW = boxW;
var boxedImageH = boxH;
let boxedImageW = boxW;
let boxedImageH = boxH;
if((imageW / imageH) > (boxW / boxH)) {
boxedImageH = (imageH * boxW / imageW) | 0;
@ -441,6 +441,8 @@ export function calcImageInBox(imageW: number, imageH: number, boxW: number, box
return {w: boxedImageW, h: boxedImageH};
}
MOUNT_CLASS_TO && (MOUNT_CLASS_TO.calcImageInBox = calcImageInBox);
export function positionElementByIndex(element: HTMLElement, container: HTMLElement, pos: number) {
const prevPos = element.parentElement === container ? whichChild(element) : -1;

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

@ -38,13 +38,14 @@ export class AppPhotosManager {
public static Df = bytesFromHex('ffd9');
constructor() {
window.addEventListener('resize', (e) => {
this.windowW = document.body.scrollWidth;
this.windowH = document.body.scrollHeight;
});
this.windowW = document.body.scrollWidth;
this.windowH = document.body.scrollHeight;
// @ts-ignore
const w: any = 'visualViewport' in window ? window.visualViewport : window;
const set = () => {
this.windowW = w.width || w.innerWidth;
this.windowH = w.height || w.innerHeight;
};
w.addEventListener('resize', set);
set();
}
public savePhoto(photo: Photo, context?: ReferenceContext) {
@ -208,7 +209,7 @@ export class AppPhotosManager {
return {image, loadPromise};
}
public setAttachmentSize(photo: MyPhoto | MyDocument, element: HTMLElement | SVGForeignObjectElement, boxWidth: number, boxHeight: number) {
public setAttachmentSize(photo: MyPhoto | MyDocument, element: HTMLElement | SVGForeignObjectElement, boxWidth: number, boxHeight: number, noZoom = true) {
const photoSize = this.choosePhotoSize(photo, boxWidth, boxHeight);
//console.log('setAttachmentSize', photo, photo.sizes[0].bytes, div);
@ -222,7 +223,7 @@ export class AppPhotosManager {
height = 'h' in photoSize ? photoSize.h : 100;
}
const {w, h} = calcImageInBox(width, height, boxWidth, boxHeight);
const {w, h} = calcImageInBox(width, height, boxWidth, boxHeight, noZoom);
if(element instanceof SVGForeignObjectElement) {
element.setAttributeNS(null, 'width', '' + w);
element.setAttributeNS(null, 'height', '' + h);

12
src/scss/partials/_mediaViewer.scss
View File

@ -218,18 +218,21 @@
transform-origin: top left;
//transform-origin: bottom right;
overflow: hidden;
transform: translateZ(0) scale3d(1, 1, 1);
border-radius: 0;
-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%); // fix border-radius overflow
// эти значения должны быть такими же, как при установке maxWidth и maxHeight в openMedia!
//max-width: 100%;
max-width: calc(100% - 16px);
//max-width: calc(1vw - 16px);
//max-height: 100%;
max-height: calc(100% - 100px);
//max-height: calc((var(--vh, 1vh) * 100) - 100px);
// эти значения должны быть такими же, как при установке maxWidth и maxHeight в openMedia!
@include respond-to(handhelds) {
overflow: visible;
//max-height: 100% !important;
max-width: 100% !important;
//max-width: 100vw !important;
}
.ckin__player {
@ -291,10 +294,13 @@
left: 50% !important;
top: 50% !important;
transform: translate3d(-50%, -50%, 0) !important;
max-width: calc(100vw - 16px);
max-height: calc((var(--vh, 1vh) * 100) - 100px);
@include respond-to(handhelds) {
width: 100% !important;
height: 100% !important;
max-width: 100vw !important;
//height: calc(100% - 100px) !important;
/* height: calc(100% - 50px) !important;
top: calc(50% + 25px) !important;

4
src/scss/partials/_preloader.scss
View File

@ -89,6 +89,10 @@ $transition: .2s ease-in-out;
//animation: dashNew 1.5s ease-in-out infinite;
stroke-dasharray: 112.36, 149.82;
}
&.preloader-streamable .preloader-path-new {
stroke-dasharray: 88.95, 118.61;
}
}
.preloader-close, .preloader-download {