Browse Source

Fix caption on GIF

Fix media tails throws
master
Eduard Kuzmenko 4 years ago
parent
commit
7dacf4de9d
  1. 74
      src/components/chat/bubbleGroups.ts
  2. 30
      src/components/chat/bubbles.ts

74
src/components/bubbleGroups.ts → src/components/chat/bubbleGroups.ts

@ -1,5 +1,5 @@
import rootScope from "../lib/rootScope"; import rootScope from "../../lib/rootScope";
import { generatePathData } from "../helpers/dom"; import { generatePathData } from "../../helpers/dom";
type BubbleGroup = {timestamp: number, fromId: number, mid: number, group: HTMLDivElement[]}; type BubbleGroup = {timestamp: number, fromId: number, mid: number, group: HTMLDivElement[]};
export default class BubbleGroups { export default class BubbleGroups {
@ -70,43 +70,45 @@ export default class BubbleGroups {
//console.log('setClipIfNeeded', bubble, remove, container); //console.log('setClipIfNeeded', bubble, remove, container);
if(!container) return; if(!container) return;
Array.from(container.children).forEach(object => { try {
if(object instanceof SVGDefsElement) 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;
}
if(isOut) { if(remove) {
d = generatePathData(0, 0, width - 9, height, tl, tr, 0, 12); object.removeAttributeNS(null, 'clip-path');
} else { } 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); } catch(err) {}
object.setAttributeNS(null, 'clip-path', 'url(#' + clipId + ')');
}
});
} }
} }

30
src/components/chat/bubbles.ts

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

Loading…
Cancel
Save