Media viewer fixes

src/components/appMediaViewer.ts

@@ -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(() => {

src/components/sidebarLeft/tabs/settings.ts

@@ -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%;';
 

src/helpers/dom.ts

@@ -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;
 

src/lib/appManagers/appPhotosManager.ts

@@ -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);

src/scss/partials/_mediaViewer.scss

@@ -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;

src/scss/partials/_preloader.scss

@@ -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 {