Media viewer new caption (not so good)

src/components/appMediaViewer.ts

@@ -22,6 +22,7 @@ import { LazyLoadQueueBase } from "./lazyLoadQueue";
 import { renderImageFromUrl } from "./misc";
 import PopupForward from "./popupForward";
 import ProgressivePreloader from "./preloader";
+import Scrollable from "./scrollable";
 import appSidebarRight, { AppSidebarRight } from "./sidebarRight";
 import SwipeHandler from "./swipeHandler";
 
@@ -206,6 +207,13 @@ class AppMediaViewerBase<ContentAdditionType extends string, ButtonsAdditionType
         }
 
         return false;
+      }, (evt) => {
+        // * Fix for seek input
+        if((evt.target as HTMLElement).tagName == 'INPUT' || findUpClassName(evt.target, 'media-viewer-caption')) {
+          return false;
+        }
+
+        return true;
       });
     }
   }
@@ -274,7 +282,7 @@ class AppMediaViewerBase<ContentAdditionType extends string, ButtonsAdditionType
     }
 
     let mover: HTMLElement = null;
-    ['media-viewer-mover', 'media-viewer-buttons', 'media-viewer-author'].find(s => {
+    ['media-viewer-mover', 'media-viewer-buttons', 'media-viewer-author', 'media-viewer-caption'].find(s => {
       try {
         mover = findUpClassName(target, s);
         if(mover) return true;
@@ -1093,13 +1101,17 @@ export default class AppMediaViewer extends AppMediaViewerBase<'caption', 'delet
   constructor(private inputFilter: 'inputMessagesFilterPhotoVideo' | 'inputMessagesFilterChatPhotos' = 'inputMessagesFilterPhotoVideo') {
     super(['delete', 'forward']);
 
-    const stub = document.createElement('div');
+    /* const stub = document.createElement('div');
     stub.classList.add(MEDIA_VIEWER_CLASSNAME + '-stub');
-    this.content.main.prepend(stub);
+    this.content.main.prepend(stub); */
 
     this.content.caption = document.createElement('div');
-    this.content.caption.classList.add(MEDIA_VIEWER_CLASSNAME + '-caption');
-    this.content.main.append(this.content.caption);
+    this.content.caption.classList.add(MEDIA_VIEWER_CLASSNAME + '-caption'/* , 'media-viewer-stub' */);
+
+    new Scrollable(this.content.caption);
+
+    //this.content.main.append(this.content.caption);
+    this.wholeDiv.append(this.content.caption);
 
     this.setBtnMenuToggle([{
       icon: 'forward',
@@ -1274,12 +1286,13 @@ export default class AppMediaViewer extends AppMediaViewerBase<'caption', 'delet
 
   private setCaption(message: any) {
     const caption = message.message;
+    this.content.caption.classList.toggle('hide', !caption);
     if(caption) {
-      this.content.caption.innerHTML = RichTextProcessor.wrapRichText(caption, {
+      this.content.caption.firstElementChild.innerHTML = RichTextProcessor.wrapRichText(caption, {
         entities: message.totalEntities
       });
     } else {
-      this.content.caption.innerHTML = '';
+      this.content.caption.firstElementChild.innerHTML = '';
     }
   }
 

src/components/swipeHandler.ts

@@ -2,14 +2,13 @@ export default class SwipeHandler {
   private xDown: number;
   private yDown: number;
 
-  constructor(element: HTMLElement, private onSwipe: (xDiff: number, yDiff: number) => boolean) {
+  constructor(element: HTMLElement, private onSwipe: (xDiff: number, yDiff: number) => boolean, private verifyTouchTarget?: (evt: TouchEvent) => boolean) {
     element.addEventListener('touchstart', this.handleTouchStart, false);
     element.addEventListener('touchmove', this.handleTouchMove, false);
   }
 
   handleTouchStart = (evt: TouchEvent) => {
-    // * Fix for seek input
-    if((evt.target as HTMLElement).tagName == 'INPUT') {
+    if(this.verifyTouchTarget && !this.verifyTouchTarget(evt)) {
       this.xDown = this.yDown = null;
       return;
     }

src/lib/appManagers/appImManager.ts

@@ -624,7 +624,7 @@ export class AppImManager {
         } else if(target.classList.contains('name')) {
           let peerID = +target.dataset.peerID;
           
-          if(!isNaN(peerID)) {
+          if(peerID) {
             this.setPeer(peerID);
           }
 
@@ -632,7 +632,7 @@ export class AppImManager {
         } else if(target.tagName == "AVATAR-ELEMENT") {
           let peerID = +target.getAttribute('peer');
           
-          if(!isNaN(peerID)) {
+          if(peerID) {
             this.setPeer(peerID);
           }
 
@@ -652,7 +652,7 @@ export class AppImManager {
       } else if(target.tagName == 'IMG' && target.parentElement.tagName == "AVATAR-ELEMENT") {
         let peerID = +target.parentElement.getAttribute('peer');
         
-        if(!isNaN(peerID)) {
+        if(peerID) {
           this.setPeer(peerID);
         }
       }

src/scss/partials/_chatBubble.scss

@@ -259,13 +259,13 @@ $bubble-margin: .25rem;
       cursor: pointer;
 
       #bubbles.is-selecting & {
-        transform: scale(1);
+        transform: scale3d(1, 1, 1);
         transform-origin: bottom;
         transition: transform var(--layer-transition);
       }
 
       #bubbles.is-selecting:not(.backwards) & {
-        transform: scale(.76);
+        transform: scale3d(.76, .76, 1);
       }
 
       // @include respond-to(handhelds) {
@@ -328,6 +328,10 @@ $bubble-margin: .25rem;
   &.is-group-last {
     padding-bottom: $bubble-margin;
 
+    .bubble-select-checkbox {
+      bottom: 8px;
+    }
+
     #bubbles-inner.is-chat &.is-in {
       .bubble-select-checkbox {
         bottom: 7px;

src/scss/partials/_mediaViewer.scss

@@ -89,9 +89,10 @@ $move-duration: .35s;
     overflow: hidden;
   }
 
-  &-stub {
+  /* &-stub {
     flex: 1;
-  }
+    min-height: 50px;
+  } */
 
   &-container {
     align-self: center;
@@ -109,17 +110,46 @@ $move-duration: .35s;
   }
 
   &-caption {
-    flex: 1;
+    position: absolute;
     text-align: center;
-    color: $color-gray;
-    transition: $open-duration;
-    max-width: 50vw;
+    color: #fff;
+    //color: #707579;
     word-break: break-word;
     overflow: hidden;
     text-overflow: ellipsis;
+    z-index: 5;
+    bottom: 3rem;
+    left: 50%;
+    transform: translateX(-50%);
+    padding: 0 .5rem;
+    background-color: rgba(0, 0, 0, .6);
+    border-radius: 8px;
+    opacity: 0;
+    transition: opacity $open-duration;
 
-    html.no-touch &:hover {
-      color: #fff;
+    @include respond-to(handhelds) {
+      border-radius: 0;
+      width: 100%;
+    }
+
+    > .scrollable {
+      padding: .5rem 0;
+      max-height: 10rem;
+      max-width: 1280px;
+      position: relative;
+    }
+
+    .media-viewer-whole.active & {
+      opacity: 1;
+
+      html.no-touch & { 
+        opacity: .2;
+
+        &:hover {
+          opacity: 1;
+          //color: #fff;
+        }
+      }
     }
   }