Browse Source

Media viewer fixes

master
Eduard Kuzmenko 4 years ago
parent
commit
13c4b541cd
  1. 38
      src/components/appMediaViewer.ts
  2. 9
      src/components/sidebarLeft/tabs/settings.ts
  3. 10
      src/helpers/dom.ts
  4. 19
      src/lib/appManagers/appPhotosManager.ts
  5. 12
      src/scss/partials/_mediaViewer.scss
  6. 4
      src/scss/partials/_preloader.scss

38
src/components/appMediaViewer.ts

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

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

@ -5,7 +5,7 @@ import appSidebarLeft, { AppSidebarLeft } from "..";
import appUsersManager from "../../../lib/appManagers/appUsersManager"; import appUsersManager from "../../../lib/appManagers/appUsersManager";
import ButtonMenuToggle from "../../buttonMenuToggle"; import ButtonMenuToggle from "../../buttonMenuToggle";
import Button from "../../button"; import Button from "../../button";
import AppMediaViewer from "../../appMediaViewer"; //import AppMediaViewer from "../../appMediaViewerNew";
export default class AppSettingsTab extends SliderSuperTab { export default class AppSettingsTab extends SliderSuperTab {
private avatarElem: AvatarElement; private avatarElem: AvatarElement;
@ -44,12 +44,15 @@ export default class AppSettingsTab extends SliderSuperTab {
this.avatarElem.classList.add('profile-avatar', 'avatar-120'); this.avatarElem.classList.add('profile-avatar', 'avatar-120');
/* const div = document.createElement('div'); /* 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.width = '135px';
div.style.height = '100px'; div.style.height = '100px';
const img = document.createElement('img'); const img = document.createElement('img');
img.src = 'assets/img/PinnedMessages.png'; img.src = 'assets/img/pepe.jpg';
img.classList.add('media-photo'); img.classList.add('media-photo');
img.style.cssText = 'max-width: 100%;max-height: 100%;'; img.style.cssText = 'max-width: 100%;max-height: 100%;';

10
src/helpers/dom.ts

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

19
src/lib/appManagers/appPhotosManager.ts

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

12
src/scss/partials/_mediaViewer.scss

@ -218,18 +218,21 @@
transform-origin: top left; transform-origin: top left;
//transform-origin: bottom right; //transform-origin: bottom right;
overflow: hidden; 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! // эти значения должны быть такими же, как при установке maxWidth и maxHeight в openMedia!
//max-width: 100%; //max-width: 100%;
max-width: calc(100% - 16px); //max-width: calc(1vw - 16px);
//max-height: 100%; //max-height: 100%;
max-height: calc(100% - 100px); //max-height: calc((var(--vh, 1vh) * 100) - 100px);
// эти значения должны быть такими же, как при установке maxWidth и maxHeight в openMedia! // эти значения должны быть такими же, как при установке maxWidth и maxHeight в openMedia!
@include respond-to(handhelds) { @include respond-to(handhelds) {
overflow: visible; overflow: visible;
//max-height: 100% !important; //max-height: 100% !important;
max-width: 100% !important; //max-width: 100vw !important;
} }
.ckin__player { .ckin__player {
@ -291,10 +294,13 @@
left: 50% !important; left: 50% !important;
top: 50% !important; top: 50% !important;
transform: translate3d(-50%, -50%, 0) !important; transform: translate3d(-50%, -50%, 0) !important;
max-width: calc(100vw - 16px);
max-height: calc((var(--vh, 1vh) * 100) - 100px);
@include respond-to(handhelds) { @include respond-to(handhelds) {
width: 100% !important; width: 100% !important;
height: 100% !important; height: 100% !important;
max-width: 100vw !important;
//height: calc(100% - 100px) !important; //height: calc(100% - 100px) !important;
/* height: calc(100% - 50px) !important; /* height: calc(100% - 50px) !important;
top: calc(50% + 25px) !important; top: calc(50% + 25px) !important;

4
src/scss/partials/_preloader.scss

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

Loading…
Cancel
Save