feat: working file preview expand on click

src/components/inbox/InboxMessaging.vue

@@ -78,16 +78,20 @@
 <script lang="ts">
 // NPM
 import { PropType, shallowRef } from "vue";
+import download from "browser-downloads";
 import { JID, Room } from "@prose-im/prose-sdk-js";
 import {
   Modifier as MessagingModifier,
   Platform as MessagingPlatform,
   Messaging as MessagingRuntime,
   SeekDirection as MessagingSeekDirection,
   Theme as MessagingTheme,
+  FileType as MessagingFileType,
+  FileAction as MessagingFileAction,
   EventMessageActionsView,
   EventMessageReactionsView,
   EventMessageReactionsReact,
+  EventMessageFileView,
   EventMessageHistorySeek
 } from "@prose-im/prose-core-views/types/messaging";
 
@@ -101,6 +105,10 @@ import {
   ItemType as PopoverItemType
 } from "@/components/base/BasePopoverList.vue";
 import ToolEmojiPicker from "@/components/tool/ToolEmojiPicker.vue";
+import {
+  File as FilePreviewFile,
+  FileType as FilePreviewFileType
+} from "@/components/inbox/InboxFilePreview.vue";
 
 // PROJECT: MODALS
 import EditMessage from "@/modals/inbox/EditMessage.vue";
@@ -167,7 +175,7 @@ export default {
     }
   },
 
-  emits: ["dragover"],
+  emits: ["file", "dragover"],
 
   data() {
     return {
@@ -185,6 +193,7 @@ export default {
         "message:actions:view": this.onMessagingMessageActionsView,
         "message:reactions:view": this.onMessagingMessageReactionsView,
         "message:reactions:react": this.onMessagingMessageReactionsReact,
+        "message:file:view": this.onMessagingMessageFileView,
         "message:history:seek": this.onMessagingMessageHistorySeek
       },
 
@@ -1098,6 +1107,41 @@ export default {
       );
     },
 
+    onMessagingMessageFileView(event: EventMessageFileView): void {
+      this.$log.debug("Got message file view", event);
+
+      // Handle file view action
+      switch (event.action) {
+        case MessagingFileAction.Expand: {
+          if (event.file.type !== MessagingFileType.Other) {
+            // Request to expand file into preview
+            this.$emit("file", {
+              type: event.file.type as FilePreviewFileType,
+              url: event.file.url,
+              name: event.file.name || ""
+            } as FilePreviewFile);
+          } else {
+            this.$log.error(
+              `Cannot expand non-media file of type: ${event.file.type}`
+            );
+          }
+
+          break;
+        }
+
+        case MessagingFileAction.Download: {
+          // Trigger a browser download of the file
+          download(event.file.url, event.file.name || "");
+
+          break;
+        }
+
+        default: {
+          this.$log.error(`Got unsupported file view action: ${event.action}`);
+        }
+      }
+    },
+
     onMessagingMessageHistorySeek(event: EventMessageHistorySeek): void {
       this.$log.debug("Got message history seek", event);
 

src/views/app/inbox/AppInboxBase.vue

@@ -38,6 +38,7 @@
       inbox-banner
 
       inbox-messaging(
+        @file="onMessagesFile"
         @dragover="onMessagesDragOver"
         :room="room"
         class="v-app-inbox-base__timeline"
@@ -71,7 +72,7 @@ import Store from "@/store";
 import {
   default as InboxFilePreview,
   Collection as FilePreviewCollection,
-  FileType as FilePreviewFileType
+  File as FilePreviewFile
 } from "@/components/inbox/InboxFilePreview.vue";
 import InboxDropzone from "@/components/inbox/InboxDropzone.vue";
 import InboxBanner from "@/components/inbox/InboxBanner.vue";
@@ -148,9 +149,13 @@ export default {
       }
     },
 
+    onMessagesFile(file: FilePreviewFile): void {
+      this.filePreview.collection = [file];
+      this.filePreview.index = 0;
+    },
+
     onMessagesFilePreviewClose(): void {
       this.filePreview.collection = [];
-      this.filePreview.index = 0;
     }
   }
 };