diff --git a/src/components/bubbleGroups.ts b/src/components/chat/bubbleGroups.ts similarity index 72% rename from src/components/bubbleGroups.ts rename to src/components/chat/bubbleGroups.ts index 60c3fc40..0aa834a1 100644 --- a/src/components/bubbleGroups.ts +++ b/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) {} } } diff --git a/src/components/chat/bubbles.ts b/src/components/chat/bubbles.ts index 0347d145..f79bbbe2 100644 --- a/src/components/chat/bubbles.ts +++ b/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