Fix caption on GIF

Fix media tails throws

src/components/chat/bubbleGroups.ts

@@ -1,5 +1,5 @@
-import rootScope from "../lib/rootScope";
-import { generatePathData } from "../helpers/dom";
+import rootScope from "../../lib/rootScope";
+import { generatePathData } from "../../helpers/dom";
 
 type BubbleGroup = {timestamp: number, fromId: number, mid: number, group: HTMLDivElement[]};
 export default class BubbleGroups {
@@ -70,43 +70,45 @@ export default class BubbleGroups {
       //console.log('setClipIfNeeded', bubble, remove, container);
       if(!container) return;
 
-      Array.from(container.children).forEach(object => {
-        if(object instanceof SVGDefsElement) return;
-
-        if(remove) {
-          object.removeAttributeNS(null, 'clip-path');
-        } else {
-          let clipId = container.dataset.clipId;
-          let path = container.firstElementChild.firstElementChild.lastElementChild as SVGPathElement;
-          let width = +object.getAttributeNS(null, 'width');
-          let height = +object.getAttributeNS(null, 'height');
-          let isOut = className.includes('is-out');
-          let isReply = className.includes('is-reply');
-          let d = '';
-  
-          //console.log('setClipIfNeeded', object, width, height, isOut);
-  
-          let tr: number, tl: number;
-          if(className.includes('forwarded') || isReply) {
-            tr = tl = 0;
-          } else if(isOut) {
-            tr = className.includes('is-group-first') ? 12 : 6;
-            tl = 12;
-          } else {
-            tr = 12;
-            tl = className.includes('is-group-first') ? 12 : 6;
-          }
+      try {
+        Array.from(container.children).forEach(object => {
+          if(object instanceof SVGDefsElement) return;
   
-          if(isOut) {
-            d = generatePathData(0, 0, width - 9, height, tl, tr, 0, 12);
+          if(remove) {
+            object.removeAttributeNS(null, 'clip-path');
           } else {
-            d = generatePathData(9, 0, width - 9, height, tl, tr, 12, 0);
+            let clipId = container.dataset.clipId;
+            let path = container.firstElementChild.firstElementChild.lastElementChild as SVGPathElement;
+            let width = +object.getAttributeNS(null, 'width');
+            let height = +object.getAttributeNS(null, 'height');
+            let isOut = className.includes('is-out');
+            let isReply = className.includes('is-reply');
+            let d = '';
+    
+            //console.log('setClipIfNeeded', object, width, height, isOut);
+    
+            let tr: number, tl: number;
+            if(className.includes('forwarded') || isReply) {
+              tr = tl = 0;
+            } else if(isOut) {
+              tr = className.includes('is-group-first') ? 12 : 6;
+              tl = 12;
+            } else {
+              tr = 12;
+              tl = className.includes('is-group-first') ? 12 : 6;
+            }
+    
+            if(isOut) {
+              d = generatePathData(0, 0, width - 9, height, tl, tr, 0, 12);
+            } else {
+              d = generatePathData(9, 0, width - 9, height, tl, tr, 12, 0);
+            }
+            
+            path.setAttributeNS(null, 'd', d);
+            object.setAttributeNS(null, 'clip-path', 'url(#' + clipId + ')');
           }
-          
-          path.setAttributeNS(null, 'd', d);
-          object.setAttributeNS(null, 'clip-path', 'url(#' + clipId + ')');
-        }
-      });
+        });
+      } catch(err) {}
     }
   }
   

src/components/chat/bubbles.ts

@@ -13,7 +13,7 @@ import { isTouchSupported } from "../../helpers/touchSupport";
 import { logger } from "../../lib/logger";
 import rootScope from "../../lib/rootScope";
 import AppMediaViewer from "../appMediaViewer";
-import BubbleGroups from "../bubbleGroups";
+import BubbleGroups from "./bubbleGroups";
 import PopupDatePicker from "../popupDatepicker";
 import PopupForward from "../popupForward";
 import PopupStickers from "../popupStickers";
@@ -1377,8 +1377,8 @@ export default class ChatBubbles {
     let messageMedia = message.media;
 
     let messageMessage: string, totalEntities: any[];
-    if(messageMedia?.document && messageMedia.document.type !== 'video') {
-      // * just filter this case
+    if(messageMedia?.document && !['video', 'gif'].includes(messageMedia.document.type)) {
+      // * just filter these cases for documents caption
     } else if(message.grouped_id && albumMustBeRenderedFull) {
       const t = this.appMessagesManager.getAlbumText(message.grouped_id);
       messageMessage = t.message;
@@ -1553,7 +1553,7 @@ export default class ChatBubbles {
                 const photo = this.appPhotosManager.getPhoto(message.id);
                 //if(photo._ == 'photoEmpty') break;
                 this.log('will wrap pending photo:', pending, message, photo);
-                const withTail = !isAndroid;
+                const withTail = !isAndroid && !message.message;
                 if(withTail) bubble.classList.add('with-media-tail');
                 wrapPhoto({
                   photo, message, 
@@ -1574,15 +1574,15 @@ export default class ChatBubbles {
                 let doc = this.appDocsManager.getDoc(message.id);
                 //if(doc._ == 'documentEmpty') break;
                 this.log('will wrap pending video:', pending, message, doc);
-                const tailSupported = !isAndroid && !isApple && doc.type != 'round';
-                if(tailSupported) bubble.classList.add('with-media-tail');
+                const withTail = !isAndroid && !isApple && doc.type != 'round' && !message.message;
+                if(withTail) bubble.classList.add('with-media-tail');
                 wrapVideo({
                   doc, 
                   container: attachmentDiv, 
                   message, 
                   boxWidth: mediaSizes.active.regular.width,
                   boxHeight: mediaSizes.active.regular.height, 
-                  withTail: tailSupported, 
+                  withTail, 
                   isOut: isOut,
                   lazyLoadQueue: this.lazyLoadQueue,
                   middleware: null,
@@ -1629,8 +1629,7 @@ export default class ChatBubbles {
           ////////this.log('messageMediaPhoto', photo);
           
           bubble.classList.add('hide-name', 'photo');
-          const withTail = !isAndroid;
-
+          
           const storage = this.appMessagesManager.groupedMessagesStorage[message.grouped_id];
           if(message.grouped_id && Object.keys(storage).length != 1 && albumMustBeRenderedFull) {
             bubble.classList.add('is-album', 'is-grouped');
@@ -1641,10 +1640,11 @@ export default class ChatBubbles {
               isOut: our,
               lazyLoadQueue: this.lazyLoadQueue
             });
-
+            
             break;
           }
-
+          
+          const withTail = !isAndroid && !message.message;
           if(withTail) bubble.classList.add('with-media-tail');
           wrapPhoto({
             photo, 
@@ -1825,16 +1825,16 @@ export default class ChatBubbles {
                 lazyLoadQueue: this.lazyLoadQueue
               });
             } else {
-              const tailSupported = !isAndroid && !isApple && doc.type != 'round';
-              if(tailSupported) bubble.classList.add('with-media-tail');
+              const withTail = !isAndroid && !isApple && doc.type != 'round' && !message.message;
+              if(withTail) bubble.classList.add('with-media-tail');
               wrapVideo({
                 doc, 
                 container: attachmentDiv, 
                 message, 
                 boxWidth: mediaSizes.active.regular.width,
                 boxHeight: mediaSizes.active.regular.height, 
-                withTail: tailSupported, 
-                isOut: isOut,
+                withTail, 
+                isOut,
                 lazyLoadQueue: this.lazyLoadQueue,
                 middleware: this.getMiddleware(),
                 group: CHAT_ANIMATION_GROUP