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

Display single image messages using the thread component

Browse source
This commit is contained in:
N-Pex 2025-09-09 11:52:42 +02:00
parent a27864e3d2
commit 4a275c116b
2 changed files with 27 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/components/chatMixin.js
View file

@ -198,7 +198,7 @@ export default {
if (isForExport) { if (isForExport) {
return MessageIncomingImageExport; return MessageIncomingImageExport;
} }
return MessageImage; return MessageThread;
} else if (event.getContent().msgtype == "m.audio") { } else if (event.getContent().msgtype == "m.audio") {
if (isForExport) { if (isForExport) {
return MessageIncomingAudioExport; return MessageIncomingAudioExport;
@ -245,7 +245,7 @@ export default {
if (isForExport) { if (isForExport) {
return MessageOutgoingImageExport; return MessageOutgoingImageExport;
} }
return MessageImage; return MessageThread;
} else if (event.getContent().msgtype == "m.audio") { } else if (event.getContent().msgtype == "m.audio") {
if (isForExport) { if (isForExport) {
return MessageOutgoingAudioExport; return MessageOutgoingAudioExport;

29
src/components/messages/composition/MessageThread.vue
View file

@ -1,7 +1,9 @@
<template> <template>
<component :is="rootComponent" ref="root" v-bind="{ ...$props, ...$attrs }" v-if="showMultiview"> <component :is="rootComponent" ref="root" v-bind="{ ...$props, ...$attrs }" v-if="showMultiview">
<div class="bubble"> <div class="bubble">
<div class="bubble-inset" v-if="showCCSummary"><CCSummary :multiple="items.length > 1" :flags="proofHintFlags" /></div> <div class="bubble-inset" v-if="showCCSummary">
<CCSummary :multiple="items.length > 1" :flags="proofHintFlags" />
</div>
<div class="original-message bubble-inset" v-if="inReplyToText"> <div class="original-message bubble-inset" v-if="inReplyToText">
<div class="original-message-sender">{{ inReplyToSender }}</div> <div class="original-message-sender">{{ inReplyToSender }}</div>
<div class="original-message-text" v-html="linkify($$sanitize(inReplyToText))" /> <div class="original-message-text" v-html="linkify($$sanitize(inReplyToText))" />
@ -20,7 +22,7 @@
</v-col> </v-col>
</v-row> </v-row>
</v-container> </v-container>
<div class="bubble-inset"> <div class="bubble-inset" v-if="showMessageText || event?.isRedacted() || event?.replacingEventId()">
<i v-if="event && event.isRedacted()" class="deleted-text"> <i v-if="event && event.isRedacted()" class="deleted-text">
<v-icon :color="isIncoming && senderIsAdminOrModerator(event) ? 'white' : ''" size="small">block</v-icon> <v-icon :color="isIncoming && senderIsAdminOrModerator(event) ? 'white' : ''" size="small">block</v-icon>
{{ {{
@ -126,7 +128,16 @@ watch(
event, event,
() => { () => {
if (event.value) { if (event.value) {
if (thread.value === undefined) { if (event.value.getContent().msgtype == "m.image") {
// Single image mode
items.value = [event.value].map((e: MatrixEvent) => {
let ea = $matrix.attachmentManager.getEventAttachment(e);
if (isVisible.value) {
ea.loadThumbnail();
}
return ea;
});
} else if (thread.value === undefined) {
thread.value = props.timelineSet.relations.getChildEventsForEvent( thread.value = props.timelineSet.relations.getChildEventsForEvent(
event.value.getId() ?? "", event.value.getId() ?? "",
util.threadMessageType(), util.threadMessageType(),
@ -145,7 +156,17 @@ onBeforeUnmount(() => {
event.value?.off(MatrixEventEvent.RelationsCreated, onRelationsCreated); event.value?.off(MatrixEventEvent.RelationsCreated, onRelationsCreated);
}); });
const showMessageText = computed((): boolean => {
if (event.value?.getContent().msgtype == "m.image") {
return false;
}
return true;
});
const showMultiview = computed((): boolean => { const showMultiview = computed((): boolean => {
if (event.value?.getContent().msgtype == "m.image") {
return true;
}
return ( return (
(isIncoming.value && props.room.displayType == ROOM_TYPE_FILE_MODE) || (isIncoming.value && props.room.displayType == ROOM_TYPE_FILE_MODE) ||
items.value?.length > 1 || items.value?.length > 1 ||
@ -240,7 +261,7 @@ const layoutedItems = computed(() => {
} }
.bubble-inset { .bubble-inset {
padding: 8px 8px; padding: 8px 8px;
} }
.imageCollection { .imageCollection {