Migrate media thread views to composition API

This commit is contained in:
N-Pex 2025-06-10 13:35:51 +02:00
parent 77eebafb79
commit 44578048aa
22 changed files with 1144 additions and 598 deletions

View file

@ -89,7 +89,7 @@
see below. Otherwise things like context menus won't work as designed.
-->
<component :is="event.component" :room="room" :originalEvent="event" :nextEvent="event.nextDisplayedEvent"
:timelineSet="timelineSet" v-on:send-quick-reaction.stop="sendQuickReaction"
:timelineSet="timelineSet" v-on:send-quick-reaction="sendQuickReaction"
:componentFn="componentForEvent"
v-on:context-menu="showContextMenuForEvent({event: event, anchor: $event.anchor})"
v-on:own-avatar-clicked="viewProfile"
@ -415,6 +415,7 @@ import { markRaw } from "vue";
import timerIcon from '@/assets/icons/ic_timer.svg';
import proofmode from "../plugins/proofmode.js";
import C2PABadge from "./c2pa/C2PABadge.vue";
import { consoleWarn } from "vuetify/lib/util/console.mjs";
const READ_RECEIPT_TIMEOUT = 5000; /* How long a message must have been visible before the read marker is updated */
const WINDOW_BUFFER_SIZE = 0.3; /** Relative window height of when we start paginating. Always keep this much loaded before and after our scroll position! */
@ -609,7 +610,7 @@ export default {
return (contentArr && contentArr.length > 0) ? contentArr[0].replace(/^> (<.*> )?/g, "") : "";
},
heartEmoji() {
return this.$refs.emojiPicker.mapEmojis["Symbols"].find(({ aliases }) => aliases.includes('heart')).data;
return "❤️";
},
compActiveMember() {
const currentUserId= this.selectedEvent?.sender.userId || this.$matrix.currentUserId
@ -1347,7 +1348,7 @@ export default {
const sel = "[eventId=\"" + parentEvent.getId() + "\"]";
const element = document.querySelector(sel);
if (element) {
this.onLayoutChange(fn, element);
this.onLayoutChange({action: fn, element: element});
} else {
fn();
}
@ -1377,7 +1378,7 @@ export default {
const sel = "[eventId=\"" + parentEvent.getId() + "\"]";
const element = document.querySelector(sel);
if (element) {
this.onLayoutChange(fn, element);
this.onLayoutChange({action: fn, element: element});
} else {
fn();
}
@ -1598,7 +1599,8 @@ export default {
* @param {} action A function that performs desired layout changes.
* @param {*} element Root element for the chat message.
*/
onLayoutChange(action, element) {
onLayoutChange(event) {
const { action, element } = event;
if (!element || !element.parentElement || this.useVoiceMode || this.useFileModeNonAdmin) {
action();
return