Fix multidownloading the same file

Focus media viewer caption on touchstart

src/components/appMediaViewer.ts

@@ -1316,7 +1316,26 @@ export default class AppMediaViewer extends AppMediaViewerBase<'caption', 'delet
     this.content.main.prepend(stub); */
 
     this.content.caption = document.createElement('div');
-    this.content.caption.classList.add(MEDIA_VIEWER_CLASSNAME + '-caption'/* , 'media-viewer-stub' */);
+    this.content.caption.classList.add(MEDIA_VIEWER_CLASSNAME + '-caption', MEDIA_VIEWER_CLASSNAME + '-appear'/* , 'media-viewer-stub' */);
+
+    let captionTimeout: number;
+    this.content.caption.addEventListener('touchstart', () => {
+      if(!mediaSizes.isMobile) return;
+      
+      this.content.caption.classList.add('is-focused');
+      
+      if(captionTimeout) {
+        clearTimeout(captionTimeout);
+        captionTimeout = undefined;
+      }
+      
+      document.addEventListener('touchend', () => {
+        captionTimeout = window.setTimeout(() => {
+          captionTimeout = undefined;
+          this.content.caption.classList.remove('is-focused');
+        }, 1000);
+      }, {once: true});
+    });
 
     new Scrollable(this.content.caption);
 

src/components/preloader.ts

@@ -31,7 +31,7 @@ export default class ProgressivePreloader {
   private tryAgainOnFail = true;
   private attachMethod: 'append' | 'prepend' = 'append';
 
-  public loadFunc: () => {download: CancellablePromise<any>};
+  public loadFunc: (e?: Event) => {download: CancellablePromise<any>};
 
   private totalLength: number;
 
@@ -120,7 +120,7 @@ export default class ProgressivePreloader {
 
     if(this.preloader.classList.contains('manual')) {
       if(this.loadFunc) {
-        this.loadFunc();
+        this.loadFunc(e);
       }
     } else {
       if(this.promise && this.promise.cancel) {

src/components/wrappers.ts

@@ -575,11 +575,14 @@ export function wrapDocument({message, withTime, fontWeight, voiceAsMusic, showS
     }
   };
 
-  const load = () => {
+  const load = (e: Event) => {
+    const save = !e || e.isTrusted;
     const doc = appDocsManager.getDoc(docDiv.dataset.docId);
     let download: DownloadBlob;
     const queueId = appImManager.chat.bubbles ? appImManager.chat.bubbles.lazyLoadQueue.queueId : undefined;
-    if(doc.type === 'pdf') {
+    if(!save) {
+      download = appDocsManager.downloadDoc(doc, queueId);
+    } else if(doc.type === 'pdf') {
       download = appDocsManager.downloadDoc(doc, queueId);
       download.then(() => {
         const cacheContext = appDownloadManager.getCacheContext(doc);
@@ -624,7 +627,7 @@ export function wrapDocument({message, withTime, fontWeight, voiceAsMusic, showS
     if(preloader) {
       preloader.onClick(e);
     } else {
-      load();
+      load(e);
     }
   });
   

src/scss/partials/_mediaViewer.scss

@@ -123,15 +123,16 @@
     bottom: .75rem;
     left: 0;
     right: 0;
-    padding: 0 .5rem;
+    padding: .5rem .5rem 0;
     // background-color: rgba(0, 0, 0, .6);
     // border-radius: 8px;
     opacity: 0;
     line-height: var(--line-height);
     white-space: pre-wrap;
+    background-color: transparent;
     
     @include animation-level(2) {
-      transition: opacity var(--open-duration);
+      transition: opacity var(--open-duration), background-color var(--open-duration);
     }
 
     a {
@@ -175,12 +176,22 @@
       }
 
       @include animation-level(2) {
-        transition: transform var(--layer-transition), opacity var(--open-duration) ease-in-out;
+        transition: transform var(--layer-transition), opacity var(--open-duration) ease-in-out, background-color var(--open-duration);
       }
 
       .media-viewer-whole.has-video-controls & {
         transform: translate3d(0, -69px, 0);
       }
+
+      @include hover() {
+        background-color: #000;
+        opacity: 1 !important;
+      }
+    }
+
+    &.is-focused {
+      background-color: #000;
+      opacity: 1 !important;
     }
   }