Migrate media thread views to composition API

src/components/messages/composition/MessageIncomingThread.vue

@@ -0,0 +1,220 @@
+<template>
+  <MessageIncoming
+    ref="root"
+    v-bind="{ ...$props, ...$attrs }"
+    v-if="showMultiview"
+  >
+    <div class="bubble">
+      <div class="original-message" v-if="inReplyToText">
+        <div class="original-message-sender">{{ inReplyToSender }}</div>
+        <div class="original-message-text" v-html="linkify($$sanitize(inReplyToText))" />
+      </div>
+
+      <div class="message">
+        <SwipeableThumbnailsView
+          :items="items"
+          v-if="event && !event.isRedacted() && room.displayType == ROOM_TYPE_CHANNEL"
+          v-bind="$attrs"
+        />
+        <v-container v-else-if="event && !event.isRedacted()" fluid class="imageCollection">
+          <v-row wrap>
+            <v-col v-for="{ size, item } in layoutedItems" :key="item.event.getId()" :cols="size">
+              <ThumbnailView :item="item" :previewOnly="true" v-on:itemclick="onItemClick($event)" />
+            </v-col>
+          </v-row>
+        </v-container>
+        <i v-if="event && event.isRedacted()" class="deleted-text">
+          <v-icon :color="senderIsAdminOrModerator(event) ? 'white' : ''" size="small">block</v-icon>
+          {{
+            redactedBySomeoneElse(event)
+              ? $t("message.incoming_message_deleted_text")
+              : $t("message.outgoing_message_deleted_text")
+          }}
+        </i>
+        <span v-html="linkify($$sanitize(messageText))" v-else-if="messageText" />
+        <span class="edit-marker" v-if="event && event.replacingEventId() && !event.isRedacted()">
+          {{ t("message.edited") }}
+        </span>
+      </div>
+    </div>
+    <GalleryItemsView
+      :originalEvent="originalEvent"
+      :items="items"
+      :initialItem="showItem"
+      v-if="!!showItem"
+      v-on:close="showItem = undefined"
+    />
+  </MessageIncoming>
+  <component
+    v-else-if="items.length == 1"
+    :is="componentFn(items[0].event)"
+    v-bind="{ ...$props, ...$attrs }"
+    :originalEvent="items[0].event"
+  />
+</template>
+
+<script setup lang="ts">
+import MessageIncoming from "./MessageIncoming.vue";
+import { MessageEmits, MessageProps, useMessage } from "./messageMixin";
+import util, { ROOM_TYPE_CHANNEL, ROOM_TYPE_FILE_MODE } from "@/plugins/utils";
+import GalleryItemsView from "../../file_mode/GalleryItemsView.vue";
+import ThumbnailView from "../../file_mode/ThumbnailView.vue";
+import SwipeableThumbnailsView from "../channel/SwipeableThumbnailsView.vue";
+import { computed, inject, onBeforeUnmount, ref, Ref, watch } from "vue";
+import { EventAttachment } from "../../../models/eventAttachment";
+import { useI18n } from 'vue-i18n'  
+import { MatrixEvent, MatrixEventEvent } from "matrix-js-sdk";
+
+const { t } = useI18n()
+const $matrix: any = inject('globalMatrix');
+const $$sanitize: any = inject('globalSanitize');
+
+const root = ref(undefined);
+const emits = defineEmits<MessageEmits & {(event: "layout-change", value: {element: Element | undefined, action: () => void}): void}>();
+
+const items: Ref<EventAttachment[]> = ref([]);
+const showItem: Ref<EventAttachment | undefined> = ref(undefined);
+
+const props = defineProps<MessageProps>();
+
+const { room } = props;
+
+const processThread = () => {
+  if (!event.value?.isRedacted()) {
+    emits("layout-change", {element: root.value, action: _processThread});
+  }
+};
+
+const {
+  event,
+  thread,
+  senderIsAdminOrModerator,
+  inReplyToSender,
+  inReplyToText,
+  messageText,
+  redactedBySomeoneElse,
+  linkify,
+} = useMessage($matrix, t, props, emits, processThread);
+
+watch(event, () => {
+  if (event.value) {
+    if (thread.value === undefined) {
+      thread.value = props.timelineSet.relations.getChildEventsForEvent(
+        event.value.getId() ?? "",
+        util.threadMessageType(),
+        "m.room.message"
+      );
+    }
+    if (!thread.value) {
+      event.value.on(MatrixEventEvent.RelationsCreated, onRelationsCreated);
+    }
+  }
+}, { immediate: true});
+
+onBeforeUnmount(() => {
+  event.value?.off(MatrixEventEvent.RelationsCreated, onRelationsCreated);
+});
+
+const showMultiview = computed((): boolean => {
+  return props.room.displayType == ROOM_TYPE_FILE_MODE ||
+    items.value?.length > 1 || 
+    (event.value && event.value.isRedacted()) || 
+    (props.room.displayType == ROOM_TYPE_CHANNEL && items.value.length == 1 && util.isFileTypePDF(items.value[0].event)) || 
+    messageText.value?.length > 0
+});
+
+const onRelationsCreated = () => {
+  if (event.value) {
+    thread.value = props.timelineSet.relations.getChildEventsForEvent(
+      event.value.getId() ?? "",
+      util.threadMessageType(),
+      "m.room.message"
+    );
+    event.value.off(MatrixEventEvent.RelationsCreated, onRelationsCreated);
+  }
+};
+
+const onItemClick = (event: any) => {
+  showItem.value = event.item;
+};
+
+const _processThread = () => {
+  const eventItems = props.timelineSet.relations
+    .getAllChildEventsForEvent(event.value?.getId() ?? "")
+    .filter((e: MatrixEvent) => !e.isRedacted() && util.downloadableTypes().includes(e.getContent().msgtype));
+
+  items.value = eventItems.map((e: MatrixEvent) => {
+    let ea = $matrix.attachmentManager.getEventAttachment(e);
+    if (showMultiview.value) {
+      ea.loadThumbnail();
+    }
+    return ea;
+  });
+};
+
+const layoutedItems = computed(() => {
+  if (!items.value || items.value.length == 0) {
+    return [];
+  }
+  let array = items.value.slice(0);
+  let rows = [];
+  while (array.length > 0) {
+    if (array.length >= 7) {
+      rows.push({ size: 6, item: array[0] });
+      rows.push({ size: 6, item: array[1] });
+      rows.push({ size: 12, item: array[2] });
+      rows.push({ size: 3, item: array[3] });
+      rows.push({ size: 3, item: array[4] });
+      rows.push({ size: 3, item: array[5] });
+      rows.push({ size: 3, item: array[6] });
+      array = array.slice(7);
+    } else if (array.length >= 3) {
+      rows.push({ size: 6, item: array[0] });
+      rows.push({ size: 6, item: array[1] });
+      rows.push({ size: 12, item: array[2] });
+      array = array.slice(3);
+    } else if (array.length >= 2) {
+      rows.push({ size: 6, item: array[0] });
+      rows.push({ size: 6, item: array[1] });
+      array = array.slice(2);
+    } else {
+      rows.push({ size: 12, item: array[0] });
+      array = array.slice(1);
+    }
+  }
+  return rows;
+});
+</script>
+<style lang="scss">
+@use "@/assets/css/chat.scss" as *;
+</style>
+
+<style lang="scss" scoped>
+.bubble {
+  width: 100%;
+}
+
+.imageCollection {
+  border-radius: 15px;
+  padding: 0;
+  overflow: hidden;
+
+  .row {
+    margin: -4px; // Compensate for column padding, so the border-radius above looks round!
+    padding: 0;
+  }
+
+  .col {
+    padding: 2px;
+  }
+
+  .file-item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.6rem;
+    flex-direction: column;
+    padding: 20px;
+  }
+}
+</style>