Cleanup MessageFile component

src/components/messages/composition/MessageFile.vue

@@ -1,7 +1,6 @@
 <template>
   <component :is="rootComponent" v-bind="{ ...$props, ...$attrs }">
     <div class="bubble">
-          {{ inOut }}
       <div class="original-message" v-if="inReplyToText">
         <div class="original-message-sender">{{ inReplyToSender }}</div>
         <div class="original-message-text" v-html="linkify($$sanitize(inReplyToText))" />
@@ -19,13 +18,13 @@
             icon="arrow_back"
             @click="showPdfDialog = false"
           ></v-btn>
-          <v-toolbar-title>{{ attachment.name }}</v-toolbar-title>
+          <v-toolbar-title>{{ attachment?.name }}</v-toolbar-title>
         </v-toolbar>
         <div class="pdf-container">
           <div
             v-for="(pageNum, index) in pageNums"
             :key="pageNum"
-            :ref="(el) => { if (el) pageRefs[index] = el }"
+            :ref="(el) => { if ((el != null && el as Element)) pageRefs[index] = el as Element }"
           >
             <vue-pdf-embed
               v-if="pageVisibility[pageNum]"
@@ -47,15 +46,14 @@ import ThumbnailView from "../../file_mode/ThumbnailView.vue";
 import { useI18n } from "vue-i18n";
 import { MessageProps, useMessage } from "./useMessage";
 import { KeanuEvent } from "../../../models/eventAttachment";
-import VuePdfEmbed, { useVuePdfEmbed } from 'vue-pdf-embed'
+import VuePdfEmbed, { useVuePdfEmbed } from 'vue-pdf-embed';
+import { Source } from 'vue-pdf-embed/types';
 import util from "@/plugins/utils";
 
 const { t } = useI18n();
 const $matrix: any = inject("globalMatrix");
 const $$sanitize: any = inject("globalSanitize");
 
-const inOut: Ref<"in" | "out"> = ref("in");
-
 const emits = defineEmits<{ (event: "download", value: KeanuEvent | undefined): void }>();
 const props = defineProps<MessageProps>();
 
@@ -80,10 +78,10 @@ const onItemClicked = () => {
 };
 
 const showPdfDialog = ref(false)
-const pageRefs = ref([]);
-const pageVisibility = ref({});
-let pageIntersectionObserver = null;
-const pdfSource = ref(null);
+const pageRefs: Ref<(Element)[]> = ref([]);
+const pageVisibility: Ref<{ [n: number]: boolean }> = ref({});
+let pageIntersectionObserver: IntersectionObserver | null = null;
+const pdfSource: Ref<Source | null> = ref(null);
 
 const { doc } = useVuePdfEmbed({
   source: pdfSource,
@@ -109,7 +107,7 @@ const resetPageIntersectionObserver = () => {
   })
 
   pageRefs.value.forEach((element) => {
-    if (element) pageIntersectionObserver.observe(element)
+    if (element && pageIntersectionObserver) pageIntersectionObserver.observe(element)
   })
 };
 
@@ -122,7 +120,7 @@ watch(pageNums, (newPageNums) => {
 
 watch(showPdfDialog, (pdfViewerShown) => {
   if(!util.isMobileOrTabletBrowser()) return
-  if(pdfViewerShown && !pdfSource.value) {
+  if(attachment.value && pdfViewerShown && !pdfSource.value) {
     pdfSource.value = attachment.value.src
   }
 });

src/models/eventAttachment.ts

@@ -1,6 +1,6 @@
 import { MatrixEvent, Room } from "matrix-js-sdk";
 import { AttachmentBatch } from "./attachment";
-import { Proof, MediaMetadata } from "./proof";
+import { Proof, MediaMetadata, MediaInterventionFlags } from "./proof";
 
 export type KeanuEventExtension = {
     isMxThread?: boolean;