butter/keanu-weblite
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Lots of fixes to "media threads"

Browse source
This commit is contained in:
N Pex 2023-11-06 15:28:26 +00:00
parent fe081edc62
commit 8bcceafcff
23 changed files with 867 additions and 333 deletions
Download patch file Download diff file Expand all files Collapse all files

180
src/components/Chat.vue
View file

@ -32,7 +32,7 @@
:attachments="currentFileInputs"
/>
<div v-if="!useVoiceMode && !useFileModeNonAdmin" class="chat-content flex-grow-1 flex-shrink-1" ref="chatContainer"
<div v-if="!useVoiceMode && !useFileModeNonAdmin" :class="{'chat-content': true, 'flex-grow-1': true, 'flex-shrink-1': true, 'invisible': !initialLoadDone}" ref="chatContainer"
v-on:scroll="onScroll" @click="closeContextMenusIfOpen">
<div ref="messageOperationsStrut" class="message-operations-strut">
<message-operations ref="messageOperations" :style="opStyle" :emojis="recentEmojis" v-on:close="
@ -42,8 +42,8 @@
v-on:addreply="addReply(selectedEvent)" v-on:edit="edit(selectedEvent)" v-on:redact="redact(selectedEvent)"
v-on:download="download(selectedEvent)" v-on:more="
isEmojiQuickReaction= true
showMoreMessageOperations($event)
" :originalEvent="selectedEvent" />
showMoreMessageOperations({event: selectedEvent, anchor: $event.anchor})
" :originalEvent="selectedEvent" :timelineSet="timelineSet" />
</div>
<div ref="avatarOperationsStrut" class="avatar-operations-strut">
@ -87,6 +87,7 @@
isEmojiQuickReaction = true
showMoreMessageOperations({event: event, anchor: $event.anchor})
"
v-on:layout-change="onLayoutChange"
/>
<!-- <div v-if="debugging" style="user-select:text">EventID: {{ event.getId() }}</div> -->
<!-- <div v-if="debugging" style="user-select:text">Event: {{ JSON.stringify(event) }}</div> -->
@ -114,6 +115,7 @@
<div v-if="replyToContentType === 'm.text'" class="reply-text" :title="replyToEvent.getContent().body">
{{ replyToEvent.getContent().body | latestReply }}
</div>
<div v-if="replyToContentType === 'm.thread'">{{ replyToThreadMessage }}</div>
<div v-if="replyToContentType === 'm.image'">{{ $t("message.reply_image") }}</div>
<div v-if="replyToContentType === 'm.audio'">{{ $t("message.reply_audio_message") }}</div>
<div v-if="replyToContentType === 'm.video'">{{ $t("message.reply_video") }}</div>
@ -533,7 +535,7 @@ export default {
if (contentArr[0] === "") {
contentArr.shift();
}
return contentArr[0].replace(/^> (<.*> )?/g, "");
return (contentArr && contentArr.length > 0) ? contentArr[0].replace(/^> (<.*> )?/g, "") : "";
},
},
@ -792,6 +794,18 @@ export default {
}
}
return "";
},
/**
* If we are replying to a (media) thread, this is the hint we show when replying.
*/
replyToThreadMessage() {
if (this.replyToEvent && this.timelineSet) {
return this.$t("message.sent_media", {count: this.timelineSet.relations
.getAllChildEventsForEvent(this.replyToEvent.getId())
.filter((e) => util.downloadableTypes().includes(e.getContent().msgtype)).length});
}
return "";
}
},
@ -800,6 +814,8 @@ export default {
immediate: true,
handler(value, oldValue) {
if (value && !oldValue) {
this.events.filter(event => (event.threadRootId && !event.parentThread)).forEach(event => this.setParentThread(event));
this.events.filter(event => (event.replyEventId && !event.replyEvent)).forEach(event => this.setReplyToEvent(event));
console.log("Loading finished!");
}
}
@ -842,7 +858,7 @@ export default {
}
});
} else {
this.initialLoadDone = true;
this.setInitialLoadDone();
return; // no room
}
},
@ -889,6 +905,15 @@ export default {
},
methods: {
/**
* Set initialLoadDone to 'true'. First process all events, setting threadParent and replyEvent if needed.
*/
setInitialLoadDone() {
this.events.filter(event => (event.threadRootId && !event.parentThread)).forEach(event => this.setParentThread(event));
this.events.filter(event => (event.replyEventId && !event.replyEvent)).forEach(event => this.setReplyToEvent(event));
this.initialLoadDone = true;
console.log("Loading finished!");
},
windowNotificationPermission,
onNotificationDialog() {
if(this.windowNotificationPermission() === 'denied') {
@ -943,9 +968,23 @@ export default {
console.log("ERROR " + err);
})
.finally(() => {
self.initialLoadDone = true;
if (initialEventId && !this.showCreatedRoomWelcomeHeader) {
self.scrollToEvent(initialEventId);
// const [timelineEvents, threadedEvents, unknownRelations] =
// this.room.partitionThreadedEvents(self.events);
// this.$matrix.matrixClient.processAggregatedTimelineEvents(this.room, timelineEvents);
// //room.addEventsToTimeline(timelineEvents, true, room.getLiveTimeline());
// this.$matrix.matrixClient.processThreadEvents(this.room, threadedEvents, true);
// unknownRelations.forEach((event) => this.room.relations.aggregateChildEvent(event));
this.setInitialLoadDone();
if (initialEventId && !this.showCreatedRoomWelcomeHeader) {
const event = this.room.findEventById(initialEventId);
this.$nextTick(() => {
if (event && event.parentThread) {
self.scrollToEvent(event.parentThread.getId());
} else {
self.scrollToEvent(initialEventId);
}
});
} else if (this.showCreatedRoomWelcomeHeader || this.showDirectChatWelcomeHeader) {
self.onScroll();
}
@ -960,7 +999,7 @@ export default {
} else {
// Error. Done loading.
this.events = this.timelineWindow.getEvents();
this.initialLoadDone = true;
this.setInitialLoadDone();
}
})
.finally(() => {
@ -1094,12 +1133,83 @@ export default {
this.restartRRTimer();
},
setParentThread(event) {
const parentEvent = this.timelineSet.findEventById(event.threadRootId) || this.room.findEventById(event.threadRootId);
if (parentEvent) {
Vue.set(parentEvent, "isMxThread", true);
Vue.set(event, "parentThread", parentEvent);
} else {
// Try to load from server.
this.$matrix.matrixClient.getEventTimeline(this.timelineSet, event.threadRootId).then((tl) => {
if (tl) {
const parentEvent = tl.getEvents().find((e) => e.getId() === event.threadRootId);
if (parentEvent) {
this.events = this.timelineWindow.getEvents();
const fn = () => {
Vue.set(parentEvent, "isMxThread", true);
Vue.set(event, "parentThread", parentEvent);
};
if (this.initialLoadDone) {
const sel = "[eventId=\"" + parentEvent.getId() + "\"]";
const element = document.querySelector(sel);
if (element) {
this.onLayoutChange(fn, element);
} else {
fn();
}
} else {
fn();
}
}
}
});
}
},
setReplyToEvent(event) {
const parentEvent = this.timelineSet.findEventById(event.replyEventId) || this.room.findEventById(event.replyEventId);
if (parentEvent) {
Vue.set(event, "replyEvent", parentEvent);
} else {
// Try to load from server.
this.$matrix.matrixClient.getEventTimeline(this.timelineSet, event.replyEventId)
.then((tl) => {
if (tl) {
const parentEvent = tl.getEvents().find((e) => e.getId() === event.replyEventId);
if (parentEvent) {
this.events = this.timelineWindow.getEvents();
const fn = () => {Vue.set(event, "replyEvent", parentEvent);};
if (this.initialLoadDone) {
const sel = "[eventId=\"" + parentEvent.getId() + "\"]";
const element = document.querySelector(sel);
if (element) {
this.onLayoutChange(fn, element);
} else {
fn();
}
} else {
fn();
}
}
}
}).catch(e => console.error(e));
}
},
onEvent(event) {
//console.log("OnEvent", JSON.stringify(event));
if (event.getRoomId() !== this.roomId) {
return; // Not for this room
}
if (this.initialLoadDone && event.threadRootId && !event.parentThread) {
this.setParentThread(event);
}
if (this.initialLoadDone && event.replyEventId && !event.replyEvent) {
this.setReplyToEvent(event);
}
const loadingDone = this.initialLoadDone;
this.$matrix.matrixClient.decryptEventIfNeeded(event, {});
@ -1107,7 +1217,7 @@ export default {
this.paginateBackIfNeeded();
}
if (loadingDone && event.forwardLooking && !event.isRelation()) {
if (loadingDone && event.forwardLooking && (!event.isRelation() || event.isMxThread || event.threadRootId || event.parentThread )) {
// If we are at bottom, scroll to see new events...
var scrollToSeeNew = event.getSender() == this.$matrix.currentUserId; // When we sent, scroll
const container = this.chatContainer;
@ -1315,6 +1425,28 @@ export default {
this.cancelSendAttachment();
},
/**
* Called by message components that need to change their layout. This will avoid "jumping" in the UI, because
* we remember scroll position, apply the layout change, then restore the scroll.
* NOTE: we use "parentElement" below, because it is expected to be called with "element" set to the message component
* and the message component in turn being wrapped by a "message-wrapper" element (see html above).
* @param {} action A function that performs desired layout changes.
* @param {*} element Root element for the chat message.
*/
onLayoutChange(action, element) {
if (!element || !element.parentElemen || this.useVoiceMode || this.useFileModeNonAdmin) {
action();
return
}
const container = this.chatContainer;
this.scrollPosition.prepareFor(element.parentElement.offsetTop >= container.scrollTop ? "down" : "up");
action();
this.$nextTick(() => {
// restore scroll position!
this.scrollPosition.restore();
});
},
handleScrolledToTop() {
if (
this.timelineWindow &&
@ -1379,9 +1511,18 @@ export default {
const container = this.chatContainer;
const ref = this.$refs[eventId];
if (container && ref) {
const targetY = container.clientHeight / 2;
const sourceY = ref[0].offsetTop;
container.scrollTo(0, sourceY - targetY);
const parent = container.getBoundingClientRect();
const item = ref[0].getBoundingClientRect();
let offsetY = (parent.bottom - parent.top) / 2;
if (ref[0].clientHeight > offsetY) {
offsetY = Math.max(0, (parent.bottom - parent.top) - ref[0].clientHeight);
}
const targetY = parent.top + offsetY;
const currentY = item.top;
const y = container.scrollTop + (currentY - targetY);
this.$nextTick(() => {
container.scrollTo(0, y);
});
}
},
@ -1433,7 +1574,11 @@ export default {
addReply(event) {
this.replyToEvent = event;
this.$refs.messageInput.focus();
this.replyToContentType = event.getContent().msgtype || 'm.poll';
if (event.parentThread || event.isThreadRoot || event.isMxThread) {
this.replyToContentType = 'm.thread';
} else {
this.replyToContentType = event.getContent().msgtype || 'm.poll';
}
this.setReplyToImage(event);
},
@ -1455,7 +1600,12 @@ export default {
},
download(event) {
util.download(this.$matrix.matrixClient, event);
if ((event.isThreadRoot || event.isMxThread) && this.timelineSet) {
const children = this.timelineSet.relations.getAllChildEventsForEvent(event.getId()).filter(e => util.downloadableTypes().includes(e.getContent().msgtype));
children.forEach(child => util.download(this.$matrix.matrixClient, child));
} else {
util.download(this.$matrix.matrixClient, event);
}
},
cancelEditReply() {

340
src/components/RoomExport.vue
View file

@ -1,6 +1,6 @@
<template>
<div class="chat-root">
<div class="chat-root d-flex flex-column" ref="exportRoot">
<div class="chat-root export d-flex flex-column" ref="exportRoot">
<!-- Header-->
<v-container fluid class="chat-header flex-grow-0 flex-shrink-0">
<v-row class="chat-header-row flex-nowrap">
@ -18,18 +18,17 @@
<div class="chat-content flex-grow-1 flex-shrink-1" ref="chatContainer">
<div v-for="(event, index) in events" :key="event.getId()" :eventId="event.getId()">
<!-- DAY Marker, shown for every new day in the timeline -->
<div v-if="showDayMarkerBeforeEvent(event)" class="day-marker"><div class="line"></div><div class="text">{{ dayForEvent(event) }}</div><div class="line"></div></div>
<div v-if="showDayMarkerBeforeEvent(event)" class="day-marker">
<div class="line"></div>
<div class="text">{{ dayForEvent(event) }}</div>
<div class="line"></div>
</div>
<div v-if="!event.isRelation() && !event.isRedacted() && !event.isRedaction()" :ref="event.getId()">
<div class="message-wrapper">
<component
:is="componentForEvent(event, true)"
:room="room"
:originalEvent="event"
:nextEvent="events[index + 1]"
:timelineSet="timelineSet"
ref="exportedEvent"
/>
<component :is="componentForEvent(event, true)" :room="room" :originalEvent="event"
:nextEvent="events[index + 1]" :timelineSet="timelineSet" :componentFn="componentForEventForExport"
ref="exportedEvent" v-on:layout-change="onLayoutChange" />
<!-- <div v-if="debugging" style="user-select:text">EventID: {{ event.getId() }}</div> -->
<!-- <div v-if="debugging" style="user-select:text">Event: {{ JSON.stringify(event) }}</div> -->
</div>
@ -54,6 +53,7 @@
</template>
<script>
import Vue from "vue";
import MessageIncomingText from "./messages/MessageIncomingText.vue";
import MessageIncomingFile from "./messages/MessageIncomingFile.vue";
import MessageIncomingImage from "./messages/MessageIncomingImage.vue";
@ -98,6 +98,7 @@ import util from "../plugins/utils";
import JSZip from "jszip";
import { saveAs } from "file-saver";
import { EventTimelineSet } from "matrix-js-sdk";
import axios from 'axios';
export default {
name: "RoomExport",
@ -146,7 +147,7 @@ export default {
props: {
room: {
type: Object,
default: function() {
default: function () {
return null;
},
},
@ -181,6 +182,9 @@ export default {
},
},
methods: {
componentForEventForExport(event) {
return this.componentForEvent(event, true);
},
cancelExport() {
this.cancelled = true;
},
@ -254,6 +258,21 @@ export default {
this.timelineSet.addEventsToTimeline(events.reverse(), true, this.timelineSet.getLiveTimeline(), "");
this.events = events;
// Need to set thread root events and replyEvents so stuff is rendered correctly.
this.events.filter(event => (event.threadRootId && !event.parentThread)).forEach(event => {
const parentEvent = this.timelineSet.findEventById(event.threadRootId) || this.room.findEventById(event.threadRootId);
if (parentEvent) {
Vue.set(parentEvent, "isMxThread", true);
Vue.set(event, "parentThread", parentEvent);
}
});
this.events.filter(event => (event.replyEventId && !event.replyEvent)).forEach(event => {
const parentEvent = this.timelineSet.findEventById(event.replyEventId) || this.room.findEventById(event.replyEventId);
if (parentEvent) {
Vue.set(event, "replyEvent", parentEvent);
}
});
// Wait a tick so UI is updated.
return new Promise((resolve, ignoredReject) => {
this.$nextTick(() => {
@ -264,129 +283,192 @@ export default {
.then(() => {
// UI updated, start processing events
zip = new JSZip();
var avatarFolder = zip.folder("avatars");
var imageFolder = zip.folder("images");
var audioFolder = zip.folder("audio");
var videoFolder = zip.folder("video");
var downloadPromises = [];
let components = this.$refs.exportedEvent;
for (const comp of components) {
let componentClass = comp.$vnode.tag.split("-").reverse()[0];
switch (componentClass) {
case "MessageIncomingImageExport":
case "MessageOutgoingImageExport":
// TODO - maybe consider what media to download based on the file size we already have?
// info = comp.event.getContent().info;
// if (info && info.size && currentMediaSize + info.size > maxMediaSize) {
// // No need to even download.
// console.log("Dont download!");
// continue;
// }
for (const parentComp of components) {
let childComponents = [parentComp];
downloadPromises.push(
util
.getAttachment(this.$matrix.matrixClient, comp.event, null, true)
.then((blob) => {
return new Promise((resolve, ignoredReject) => {
let mime = blob.type;
var extension = ".png";
switch (mime) {
case "image/jpeg":
case "image/jpg":
extension = ".jpg";
break;
case "image/gif":
extension = ".gif";
// Some components, i.e. the media threads, have subcomponents
// that we want to export. So pickup subcomponents here as well.
if (parentComp.$refs && parentComp.$refs.exportedEvent) {
if (Array.isArray(parentComp.$refs.exportedEvent)) {
for (const child of parentComp.$refs.exportedEvent) {
childComponents.push(child);
}
} else {
childComponents.push(parentComp.$refs.exportedEvent);
}
}
for (const comp of childComponents) {
// Avatars need downloading?
if (comp.$el) {
const avatars = comp.$el.getElementsByClassName("v-avatar");
if (avatars && avatars.length > 0) {
const member = this.room.getMember(comp.event.getSender());
if (member) {
const fileName = comp.event.getSender() + ".png";
const setSource = (fileName) => {
for (let avatarIndex = 0; avatarIndex < avatars.length; avatarIndex++) {
const avatarElement = avatars[avatarIndex];
const images = avatarElement.getElementsByTagName("img");
for (let imageIndex = 0; imageIndex < images.length; imageIndex++) {
const img = images[imageIndex];
img.onerror = undefined;
img.src = './avatars/' + fileName;
}
}
}
if (!avatarFolder.file(fileName)) {
const url = member.getAvatarUrl(this.$matrix.matrixClient.getHomeserverUrl(), 40, 40, "scale", true);
if (url) {
avatarFolder.file(fileName, "empty");
downloadPromises.push(
axios.get(url, {
responseType: 'blob'
})
.then(result => {
if (result.data) {
avatarFolder.file(fileName, result.data);
setSource(fileName);
}
})
.catch(err => {
console.error("Download error: ", err);
avatarFolder.remove(fileName);
}));
}
} else {
setSource(fileName);
}
}
}
}
let componentClass = comp.$vnode.tag.split("-").reverse()[0];
switch (componentClass) {
case "MessageIncomingImageExport":
case "MessageOutgoingImageExport":
// TODO - maybe consider what media to download based on the file size we already have?
// info = comp.event.getContent().info;
// if (info && info.size && currentMediaSize + info.size > maxMediaSize) {
// // No need to even download.
// console.log("Dont download!");
// continue;
// }
downloadPromises.push(
util
.getAttachment(this.$matrix.matrixClient, comp.event, null, true)
.then((blob) => {
return new Promise((resolve, ignoredReject) => {
let mime = blob.type;
var extension = ".png";
switch (mime) {
case "image/jpeg":
case "image/jpg":
extension = ".jpg";
break;
case "image/gif":
extension = ".gif";
}
if (currentMediaSize + blob.size <= maxMediaSize) {
currentMediaSize += blob.size;
let fileName = comp.event.getId() + extension;
imageFolder.file(fileName, blob); // TODO calc bytes
let blobUrl = URL.createObjectURL(blob);
comp.src = blobUrl;
this.$nextTick(() => {
// Update source
let elements = comp.$el.getElementsByClassName("v-image__image");
let element = elements && elements[0];
if (element) {
element.style.backgroundImage = 'url("./images/' + fileName + '")';
element.classList.remove("v-image__image--preload");
}
URL.revokeObjectURL(blobUrl); // Give the blob back
this.processedEvents += 1;
resolve(true);
});
}
});
})
.catch((ignoredErr) => {
this.processedEvents += 1;
})
);
break;
case "MessageIncomingAudioExport":
case "MessageOutgoingAudioExport":
downloadPromises.push(
util
.getAttachment(this.$matrix.matrixClient, comp.event, null, true)
.then((blob) => {
if (currentMediaSize + blob.size <= maxMediaSize) {
currentMediaSize += blob.size;
let fileName = comp.event.getId() + extension;
imageFolder.file(fileName, blob); // TODO calc bytes
let blobUrl = URL.createObjectURL(blob);
comp.src = blobUrl;
this.$nextTick(() => {
// Update source
let elements = comp.$el.getElementsByClassName("v-image__image");
return new Promise((resolve, ignoredReject) => {
//let mime = blob.type;
var extension = ".mp3";
let fileName = comp.event.getId() + extension;
audioFolder.file(fileName, blob); // TODO calc bytes
let elements = comp.$el.getElementsByTagName("audio");
let element = elements && elements[0];
if (element) {
element.style.backgroundImage = 'url("./images/' + fileName + '")';
element.classList.remove("v-image__image--preload");
element.src = "./audio/" + fileName;
}
URL.revokeObjectURL(blobUrl); // Give the blob back
this.processedEvents += 1;
resolve(true);
});
}
});
})
.catch((ignoredErr) => {
this.processedEvents += 1;
})
);
break;
case "MessageIncomingAudioExport":
case "MessageOutgoingAudioExport":
downloadPromises.push(
util
.getAttachment(this.$matrix.matrixClient, comp.event, null, true)
.then((blob) => {
if (currentMediaSize + blob.size <= maxMediaSize) {
currentMediaSize += blob.size;
return new Promise((resolve, ignoredReject) => {
//let mime = blob.type;
var extension = ".mp3";
let fileName = comp.event.getId() + extension;
audioFolder.file(fileName, blob); // TODO calc bytes
let elements = comp.$el.getElementsByTagName("audio");
let element = elements && elements[0];
if (element) {
element.src = "./audio/" + fileName;
}
this.processedEvents += 1;
resolve(true);
});
}
})
.catch((ignoredErr) => {
this.processedEvents += 1;
})
);
break;
case "MessageIncomingVideoExport":
case "MessageOutgoingVideoExport":
downloadPromises.push(
util
.getAttachment(this.$matrix.matrixClient, comp.event, null, true)
.then((blob) => {
if (currentMediaSize + blob.size <= maxMediaSize) {
currentMediaSize += blob.size;
return new Promise((resolve, ignoredReject) => {
//let mime = blob.type;
var extension = ".mp4";
let fileName = comp.event.getId() + extension;
videoFolder.file(fileName, blob); // TODO calc bytes
let elements = comp.$el.getElementsByTagName("video");
let element = elements && elements[0];
if (element) {
element.src = "./video/" + fileName;
}
this.processedEvents += 1;
})
.catch((ignoredErr) => {
this.processedEvents += 1;
})
);
break;
case "MessageIncomingVideoExport":
case "MessageOutgoingVideoExport":
downloadPromises.push(
util
.getAttachment(this.$matrix.matrixClient, comp.event, null, true)
.then((blob) => {
if (currentMediaSize + blob.size <= maxMediaSize) {
currentMediaSize += blob.size;
return new Promise((resolve, ignoredReject) => {
//let mime = blob.type;
var extension = ".mp4";
let fileName = comp.event.getId() + extension;
videoFolder.file(fileName, blob); // TODO calc bytes
let elements = comp.$el.getElementsByTagName("video");
let element = elements && elements[0];
if (element) {
element.src = "./video/" + fileName;
}
this.processedEvents += 1;
resolve(true);
});
}
})
.catch((ignoredErr) => {
this.processedEvents += 1;
})
);
break;
default:
this.processedEvents += 1;
break;
resolve(true);
});
}
})
.catch((ignoredErr) => {
this.processedEvents += 1;
})
);
break;
default:
this.processedEvents += 1;
break;
}
}
}
return Promise.all(downloadPromises);
@ -410,7 +492,7 @@ export default {
}
doc +=
"</head><body><div class='v-application v-application--is-ltr theme--light' style='height:100%;overflow-y:auto'>";
const getCssRules = function(el) {
const getCssRules = function (el) {
if (el.classList.contains("op-button")) {
el.innerHTML = "";
} else {
@ -441,6 +523,30 @@ export default {
this.$emit("close");
});
},
onLayoutChange(action, ignoredelement) {
action();
},
},
};
</script>
<style lang="scss">
.chat-root.export {
.messageIn-thread, .messageOut-thread {
/** For media threads, hide all duplicated metadata, like
sender, sender avatar, time, quick reactions etc. They are
shown for the root thread event */
.messageIn {
margin-left: 50px !important;
}
.messageOut {
margin-right: 50px !important;
}
.messageIn, .messageOut {
.quick-reaction-container, .senderAndTime, .avatar {
display: none;
}
}
}
}
</style>

10
src/components/chatMixin.js
View file

@ -18,9 +18,11 @@ import MessageOutgoingThread from "./messages/MessageOutgoingThread.vue";
import MessageIncomingImageExport from "./messages/export/MessageIncomingImageExport";
import MessageIncomingAudioExport from "./messages/export/MessageIncomingAudioExport";
import MessageIncomingVideoExport from "./messages/export/MessageIncomingVideoExport";
import MessageIncomingThreadExport from "./messages/export/MessageIncomingThreadExport";
import MessageOutgoingImageExport from "./messages/export/MessageOutgoingImageExport";
import MessageOutgoingAudioExport from "./messages/export/MessageOutgoingAudioExport";
import MessageOutgoingVideoExport from "./messages/export/MessageOutgoingVideoExport";
import MessageOutgoingThreadExport from "./messages/export/MessageOutgoingThreadExport";
import ContactJoin from "./messages/ContactJoin.vue";
import ContactLeave from "./messages/ContactLeave.vue";
import ContactInvited from "./messages/ContactInvited.vue";
@ -159,9 +161,9 @@ export default {
case "m.room.message":
if (event.getSender() != this.$matrix.currentUserId) {
if (event.isThreadRoot || event.isThread) {
if (event.isMxThread) {
// Incoming thread, e.g. a file drop!
return MessageIncomingThread;
return isForExport ? MessageIncomingThreadExport : MessageIncomingThread;
}
if (event.getContent().msgtype == "m.image") {
// For SVG, make downloadable
@ -193,9 +195,9 @@ export default {
}
return MessageIncomingText;
} else {
if (event.isThreadRoot || event.isThread) {
if (event.isMxThread) {
// Outgoing thread
return MessageOutgoingThread;
return isForExport ? MessageOutgoingThreadExport : MessageOutgoingThread;
}
if (event.getContent().msgtype == "m.image") {
// For SVG, make downloadable

4
src/components/messages/MessageIncoming.vue
View file

@ -8,7 +8,7 @@
</div>
</div>
<v-avatar class="avatar" ref="avatar" size="32" color="#ededed" @click.stop="otherAvatarClicked($refs.avatar.$el)">
<img v-if="messageEventAvatar(event)" :src="messageEventAvatar(event)" />
<img v-if="messageEventAvatar(event)" :src="messageEventAvatar(event)" onerror="this.style.display='none'" />
<span v-else class="white--text headline">{{
eventSenderDisplayName(event).substring(0, 1).toUpperCase()
}}</span>
@ -20,7 +20,7 @@
<v-icon>more_vert</v-icon>
</v-btn>
</div>
<QuickReactions :event="event" :timelineSet="timelineSet" v-on="$listeners"/>
<QuickReactions :event="eventForReactions" :timelineSet="timelineSet" v-on="$listeners"/>
<SeenBy :room="room" :event="event"/>
</div>
</template>

5
src/components/messages/MessageIncomingFile.vue
View file

@ -2,14 +2,13 @@
<message-incoming v-bind="{...$props, ...$attrs}" v-on="$listeners">
<div class="bubble">
<div class="original-message" v-if="inReplyToText">
<div class="original-message-sender">
{{ $t('message.user_said', {user: inReplyToSender || "Someone"}) }}
</div>
<div class="original-message-sender">{{ inReplyToSender }}</div>
<div
class="original-message-text"
v-html="linkify($sanitize(inReplyToText))"
/>
</div>
<div class="message">
<span>{{ $t('message.file_prefix') }}</span>
<span

5
src/components/messages/MessageIncomingText.vue
View file

@ -2,14 +2,13 @@
<message-incoming v-bind="{...$props, ...$attrs}" v-on="$listeners">
<div class="bubble">
<div class="original-message" v-if="inReplyToText">
<div class="original-message-sender">
{{ $t('message.user_said', {user: inReplyToSender || "Someone"}) }}
</div>
<div class="original-message-sender">{{ inReplyToSender }}</div>
<div
class="original-message-text"
v-html="linkify($sanitize(inReplyToText))"
/>
</div>
<div class="message">
<i v-if="event.isRedacted()" class="deleted-text">
<v-icon :color="this.senderIsAdminOrModerator(this.event)?'white':''" size="small">block</v-icon>

69
src/components/messages/MessageIncomingThread.vue
View file

@ -2,14 +2,13 @@
<message-incoming v-bind="{ ...$props, ...$attrs }" v-on="$listeners" v-if="items.length > 1">
<div class="bubble">
<div class="original-message" v-if="inReplyToText">
<div class="original-message-sender">
{{ $t('message.user_said', {user: inReplyToSender || "Someone"}) }}
</div>
<div class="original-message-sender">{{ inReplyToSender }}</div>
<div
class="original-message-text"
v-html="linkify($sanitize(inReplyToText))"
/>
</div>
<div class="message">
<v-container fluid class="imageCollection">
<v-row wrap>
@ -51,54 +50,46 @@ export default {
return {
items: [],
showItem: null,
thread: null,
}
},
mounted() {
this.thread = this.timelineSet.relations.getChildEventsForEvent(this.event.getId(), "m.thread", "m.room.message");
this.processThread();
},
beforeDestroy() {
this.thread = null;
},
watch: {
thread: {
handler(newValue, oldValue) {
if (oldValue) {
oldValue.off('Relations.add', this.onAddRelation);
}
if (newValue) {
newValue.on('Relations.add', this.onAddRelation);
}
this.processThread();
},
immediate: true
if (!this.thread) {
this.event.on("Event.relationsCreated", this.onRelationsCreated);
}
},
beforeDestroy() {
this.event.off("Event.relationsCreated", this.onRelationsCreated);
},
methods: {
onAddRelation() {
this.processThread();
onRelationsCreated() {
this.thread = this.timelineSet.relations.getChildEventsForEvent(this.event.getId(), "m.thread", "m.room.message");
this.event.off("Event.relationsCreated", this.onRelationsCreated);
},
onItemClick(event) {
this.showItem = event.item;
},
processThread() {
this.items = this.timelineSet.relations.getAllChildEventsForEvent(this.event.getId()).map(e => {
let ret = {
event: e,
src: null,
};
ret.promise =
util
.getThumbnail(this.$matrix.matrixClient, e, 100, 100)
.then((url) => {
ret.src = url;
})
.catch((err) => {
console.log("Failed to fetch thumbnail: ", err);
});
return ret;
});
this.$emit('layout-change', () => {
this.items = this.timelineSet.relations.getAllChildEventsForEvent(this.event.getId())
.filter(e => util.downloadableTypes().includes(e.getContent().msgtype))
.map(e => {
let ret = {
event: e,
src: null,
};
ret.promise =
util
.getThumbnail(this.$matrix.matrixClient, e, 100, 100)
.then((url) => {
ret.src = url;
})
.catch((err) => {
console.log("Failed to fetch thumbnail: ", err);
});
return ret;
});
}, this.$el);
},
layoutedItems() {
if (!this.items || this.items.length == 0) { return [] }

2
src/components/messages/MessageOutgoing.vue
View file

@ -24,7 +24,7 @@
<img v-if="userAvatar" :src="userAvatar" />
<span v-else class="white--text headline">{{ userAvatarLetter }}</span>
</v-avatar>
<QuickReactions :event="event" :timelineSet="timelineSet" v-on="$listeners"/>
<QuickReactions :event="eventForReactions" :timelineSet="timelineSet" v-on="$listeners"/>
<SeenBy :room="room" :event="event"/>
</div>
</template>

5
src/components/messages/MessageOutgoingFile.vue
View file

@ -2,15 +2,14 @@
<message-outgoing v-bind="{ ...$props, ...$attrs }" v-on="$listeners">
<div class="bubble">
<div class="original-message" v-if="inReplyToText">
<div class="original-message-sender">
{{ $t('message.user_said', {user: inReplyToSender || "Someone"}) }}
</div>
<div class="original-message-sender">{{ inReplyToSender }}</div>
<div
class="original-message-text"
v-html="linkify($sanitize(inReplyToText))"
/>
</div>
<div class="message">
<span>{{ $t('message.file_prefix') }}</span>
<span

4
src/components/messages/MessageOutgoingText.vue
View file

@ -2,9 +2,7 @@
<message-outgoing v-bind="{ ...$props, ...$attrs }" v-on="$listeners">
<div class="bubble">
<div class="original-message" v-if="inReplyToText">
<div class="original-message-sender">
{{ $t('message.user_said', {user: inReplyToSender || "Someone"}) }}
</div>
<div class="original-message-sender">{{ inReplyToSender }}</div>
<div
class="original-message-text"
v-html="linkify($sanitize(inReplyToText))"

74
src/components/messages/MessageOutgoingThread.vue
View file

@ -2,12 +2,14 @@
<message-outgoing v-bind="{ ...$props, ...$attrs }" v-on="$listeners" v-if="items.length > 1">
<div class="bubble">
<div class="original-message" v-if="inReplyToText">
<div class="original-message-sender">
{{ $t('message.user_said', { user: inReplyToSender || "Someone" }) }}
</div>
<div class="original-message-text" v-html="linkify($sanitize(inReplyToText))" />
<div class="original-message-sender">{{ inReplyToSender }}</div>
<div
class="original-message-text"
v-html="linkify($sanitize(inReplyToText))"
/>
</div>
<div class="message">
<v-container fluid class="imageCollection">
<v-row wrap>
@ -49,54 +51,46 @@ export default {
return {
items: [],
showItem: null,
thread: null,
}
},
mounted() {
this.thread = this.timelineSet.relations.getChildEventsForEvent(this.event.getId(), "m.thread", "m.room.message");
this.processThread();
},
beforeDestroy() {
this.thread = null;
},
watch: {
thread: {
handler(newValue, oldValue) {
if (oldValue) {
oldValue.off('Relations.add', this.onAddRelation);
}
if (newValue) {
newValue.on('Relations.add', this.onAddRelation);
}
this.processThread();
},
immediate: true
if (!this.thread) {
this.event.on("Event.relationsCreated", this.onRelationsCreated);
}
},
beforeDestroy() {
this.event.off("Event.relationsCreated", this.onRelationsCreated);
},
methods: {
onAddRelation() {
this.processThread();
onRelationsCreated() {
this.thread = this.timelineSet.relations.getChildEventsForEvent(this.event.getId(), "m.thread", "m.room.message");
this.event.off("Event.relationsCreated", this.onRelationsCreated);
},
onItemClick(event) {
this.showItem = event.item;
},
processThread() {
this.items = this.timelineSet.relations.getAllChildEventsForEvent(this.event.getId()).map(e => {
let ret = {
event: e,
src: null,
};
ret.promise =
util
.getThumbnail(this.$matrix.matrixClient, e, 100, 100)
.then((url) => {
ret.src = url;
})
.catch((err) => {
console.log("Failed to fetch thumbnail: ", err);
});
return ret;
});
this.$emit('layout-change', () => {
this.items = this.timelineSet.relations.getAllChildEventsForEvent(this.event.getId())
.filter(e => util.downloadableTypes().includes(e.getContent().msgtype))
.map(e => {
let ret = {
event: e,
src: null,
};
ret.promise =
util
.getThumbnail(this.$matrix.matrixClient, e, 100, 100)
.then((url) => {
ret.src = url;
})
.catch((err) => {
console.log("Failed to fetch thumbnail: ", err);
});
return ret;
});
}, this.$el);
},
layoutedItems() {
if (!this.items || this.items.length == 0) { return [] }

59
src/components/messages/export/MessageIncomingThreadExport.vue Normal file
View file

@ -0,0 +1,59 @@
<template>
<message-incoming class="messageIn-thread" v-bind="{ ...$props, ...$attrs }" v-on="$listeners">
<component v-for="item in items" :is="componentFn(item.event)" :originalEvent="item.event" :key="item.event.getId()"
v-bind="{ ...$props }" v-on="$listeners" ref="exportedEvent" />
</message-incoming>
</template>
<script>
import MessageIncoming from "../MessageIncoming.vue";
import messageMixin from "./../messageMixin";
import util from "../../../plugins/utils";
export default {
extends: MessageIncoming,
components: { MessageIncoming },
mixins: [messageMixin],
data() {
return {
items: [],
}
},
mounted() {
this.thread = this.timelineSet.relations.getChildEventsForEvent(this.event.getId(), "m.thread", "m.room.message");
if (!this.thread) {
this.event.on("Event.relationsCreated", this.onRelationsCreated);
}
},
beforeDestroy() {
this.event.off("Event.relationsCreated", this.onRelationsCreated);
},
methods: {
onRelationsCreated() {
this.thread = this.timelineSet.relations.getChildEventsForEvent(this.event.getId(), "m.thread", "m.room.message");
this.event.off("Event.relationsCreated", this.onRelationsCreated);
},
processThread() {
this.items = this.timelineSet.relations.getAllChildEventsForEvent(this.event.getId())
.filter(e => util.downloadableTypes().includes(e.getContent().msgtype))
.map(e => {
let ret = {
event: e,
src: null,
};
return ret;
});
},
}
};
</script>
<style lang="scss">
@import "@/assets/css/chat.scss";
</style>
<style lang="scss" scoped>
.bubble {
width: 100%;
}
</style>

59
src/components/messages/export/MessageOutgoingThreadExport.vue Normal file
View file

@ -0,0 +1,59 @@
<template>
<message-outgoing class="messageOut-thread" v-bind="{ ...$props, ...$attrs }" v-on="$listeners">
<component v-for="item in items" :is="componentFn(item.event)" :originalEvent="item.event" :key="item.event.getId()"
v-bind="{ ...$props }" v-on="$listeners" ref="exportedEvent" />
</message-outgoing>
</template>
<script>
import MessageOutgoing from "../MessageOutgoing.vue";
import messageMixin from "./../messageMixin";
import util from "../../../plugins/utils";
export default {
extends: MessageOutgoing,
components: { MessageOutgoing },
mixins: [messageMixin],
data() {
return {
items: [],
}
},
mounted() {
this.thread = this.timelineSet.relations.getChildEventsForEvent(this.event.getId(), "m.thread", "m.room.message");
if (!this.thread) {
this.event.on("Event.relationsCreated", this.onRelationsCreated);
}
},
beforeDestroy() {
this.event.off("Event.relationsCreated", this.onRelationsCreated);
},
methods: {
onRelationsCreated() {
this.thread = this.timelineSet.relations.getChildEventsForEvent(this.event.getId(), "m.thread", "m.room.message");
this.event.off("Event.relationsCreated", this.onRelationsCreated);
},
processThread() {
this.items = this.timelineSet.relations.getAllChildEventsForEvent(this.event.getId())
.filter(e => util.downloadableTypes().includes(e.getContent().msgtype))
.map(e => {
let ret = {
event: e,
src: null,
};
return ret;
});
},
}
};
</script>
<style lang="scss">
@import "@/assets/css/chat.scss";
</style>
<style lang="scss" scoped>
.bubble {
width: 100%;
}
</style>

106
src/components/messages/messageMixin.js
View file

@ -2,7 +2,7 @@ import QuickReactions from "./QuickReactions.vue";
import * as linkify from 'linkifyjs';
import linkifyHtml from 'linkify-html';
import utils from "../../plugins/utils"
import Vue from "vue";
import util from "../../plugins/utils";
linkify.options.defaults.className = "link";
linkify.options.defaults.target = { url: "_blank" };
@ -40,51 +40,22 @@ export default {
type: Function,
default: function () {
return () => {};
}
},
},
},
data() {
return {
event: {},
inReplyToEvent: null,
inReplyToSender: null,
utils
thread: null,
utils,
};
},
mounted() {
const relatesTo = this.validEvent && this.event.getWireContent()["m.relates_to"];
if (relatesTo && relatesTo["m.in_reply_to"]) {
// Can we find the original message?
const originalEventId = relatesTo["m.in_reply_to"].event_id;
if (originalEventId && this.timelineSet) {
const originalEvent = this.timelineSet.findEventById(originalEventId);
if (originalEvent) {
this.inReplyToEvent = originalEvent;
this.inReplyToSender = this.eventSenderDisplayName(originalEvent);
}
}
}
},
beforeUnmount() {
if (this.validEvent) {
this.event.off("Event.relationsCreated", this.onRelationsCreated);
}
beforeDestroy() {
this.thread = null;
},
watch: {
event: {
immediate: true,
handler(newValue, oldValue) {
if (oldValue && oldValue.getId) {
oldValue.off("Event.relationsCreated", this.onRelationsCreated);
}
if (newValue && newValue.getId) {
newValue.on("Event.relationsCreated", this.onRelationsCreated);
if (newValue.isThreadRoot) {
Vue.set(newValue, "isThread", true);
}
}
}
},
originalEvent: {
immediate: true,
handler(originalEvent, ignoredOldValue) {
@ -96,7 +67,19 @@ export default {
});
}
},
}
},
thread: {
handler(newValue, oldValue) {
if (oldValue) {
oldValue.off("Relations.add", this.onAddRelation);
}
if (newValue) {
newValue.on("Relations.add", this.onAddRelation);
}
this.processThread();
},
immediate: true,
},
},
computed: {
/**
@ -107,6 +90,16 @@ export default {
return this.event && Object.keys(this.event).length !== 0;
},
/**
* If this is a thread event, we return the root here, so all reactions will land on the root event.
*/
eventForReactions() {
if (this.event.parentThread) {
return this.event.parentThread;
}
return this.event;
},
incoming() {
return this.event && this.event.getSender() != this.$matrix.currentUserId;
},
@ -123,11 +116,34 @@ export default {
return true;
},
inReplyToSender() {
const originalEvent = this.validEvent && this.event.replyEvent;
if (originalEvent) {
const sender = this.eventSenderDisplayName(originalEvent);
if (originalEvent.isThreadRoot || originalEvent.isMxThread) {
return sender || this.$t("message.someone");
} else {
return this.$t("message.user_said", { user: sender || this.$t("message.someone") });
}
}
return null;
},
inReplyToEvent() {
return this.validEvent && this.event.replyEvent;
},
inReplyToText() {
const relatesTo = this.event.getWireContent()["m.relates_to"];
if (relatesTo && relatesTo["m.in_reply_to"]) {
if (this.inReplyToEvent && (this.inReplyToEvent.isThreadRoot || this.inReplyToEvent.isMxThread)) {
const children = this.timelineSet.relations
.getAllChildEventsForEvent(this.inReplyToEvent.getId())
.filter((e) => util.downloadableTypes().includes(e.getContent().msgtype));
return this.$t("message.sent_media", { count: children.length });
}
const content = this.event.getContent();
if ('body' in content) {
if ("body" in content) {
const lines = content.body.split("\n").reverse() || [];
while (lines.length && !lines[0].startsWith("> ")) lines.shift();
// Reply fallback has a blank line after it, so remove it to prevent leading newline
@ -137,12 +153,10 @@ export default {
return text;
}
}
if (this.inReplyToEvent) {
var c = this.inReplyToEvent.getContent();
return c.body;
}
// We don't have the original text (at the moment at least)
return this.$t("fallbacks.original_text");
}
@ -153,7 +167,7 @@ export default {
const relatesTo = this.event.getWireContent()["m.relates_to"];
if (relatesTo && relatesTo["m.in_reply_to"]) {
const content = this.event.getContent();
if ('body' in content) {
if ("body" in content) {
// Remove the new text and strip "> " from the old original text
const lines = content.body.split("\n");
while (lines.length && lines[0].startsWith("> ")) lines.shift();
@ -190,10 +204,9 @@ export default {
},
},
methods: {
onRelationsCreated(relationType, ignoredEventType) {
if (relationType === "m.thread") {
Vue.set(this.event, "isThread", true);
}
onAddRelation() {
console.error("onAddRelation");
this.processThread();
},
ownAvatarClicked() {
this.$emit("own-avatar-clicked", { event: this.event });
@ -308,5 +321,10 @@ export default {
linkify(text) {
return linkifyHtml(text);
},
/**
* Override this to handle updates to (the) message thread.
*/
processThread() {},
},
};

7
src/components/messages/messageOperationsMixin.js
View file

@ -1,3 +1,4 @@
import util from "../../plugins/utils";
export default {
computed: {
@ -5,8 +6,12 @@ export default {
return !this.incoming && this.event.getContent().msgtype == "m.text";
},
isDownloadable() {
if ((this.event.isThreadRoot || this.event.isMxThread) && this.timelineSet) {
const children = this.timelineSet.relations.getAllChildEventsForEvent(this.event.getId()).filter(e => util.downloadableTypes().includes(e.getContent().msgtype));
return children.length > 0;
}
const msgtype = this.event.getContent().msgtype;
return ['m.video','m.audio','m.image','m.file'].includes(msgtype);
return util.downloadableTypes().includes(msgtype);
},
isRedactable() {
const room = this.$matrix.matrixClient.getRoom(this.event.getRoomId());