butter/keanu-weblite
3
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) {
return MessageIncomingImageExport;
}
return MessageImage;
return MessageThread;
} else if (event.getContent().msgtype == "m.audio") {
if (isForExport) {
return MessageIncomingAudioExport;
@ -245,7 +245,7 @@ export default {
if (isForExport) {
return MessageOutgoingImageExport;
}
return MessageImage;
return MessageThread;
} else if (event.getContent().msgtype == "m.audio") {
if (isForExport) {
return MessageOutgoingAudioExport;

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

@ -1,7 +1,9 @@
<template>
<component :is="rootComponent" ref="root" v-bind="{ ...$props, ...$attrs }" v-if="showMultiview">
<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-sender">{{ inReplyToSender }}</div>
<div class="original-message-text" v-html="linkify($$sanitize(inReplyToText))" />
@ -20,7 +22,7 @@
</v-col>
</v-row>
</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">
<v-icon :color="isIncoming && senderIsAdminOrModerator(event) ? 'white' : ''" size="small">block</v-icon>
{{
@ -126,7 +128,16 @@ watch(
event,
() => {
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(
event.value.getId() ?? "",
util.threadMessageType(),
@ -145,7 +156,17 @@ onBeforeUnmount(() => {
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 => {
if (event.value?.getContent().msgtype == "m.image") {
return true;
}
return (
(isIncoming.value && props.room.displayType == ROOM_TYPE_FILE_MODE) ||
items.value?.length > 1 ||
@ -240,7 +261,7 @@ const layoutedItems = computed(() => {
}
.bubble-inset {
padding: 8px 8px;
padding: 8px 8px;
}
.imageCollection {