Add support for more file formats

matrixgw_frontend/src/api/WsApi.ts

@@ -1,4 +1,5 @@
 import { APIClient } from "./ApiClient";
+import type { MessageType } from "./matrix/MatrixApiEvent";
 
 interface BaseRoomEvent {
   time: number;
@@ -8,8 +9,6 @@ interface BaseRoomEvent {
   origin_server_ts: number;
 }
 
-type MessageType = "m.text" | "m.image" | string;
-
 export interface RoomMessageEvent extends BaseRoomEvent {
   type: "RoomMessageEvent";
   data: {

matrixgw_frontend/src/api/matrix/MatrixApiEvent.ts

@@ -1,11 +1,19 @@
 import { APIClient } from "../ApiClient";
 import type { Room } from "./MatrixApiRoom";
 
+export type MessageType =
+  | "m.text"
+  | "m.image"
+  | "m.audio"
+  | "m.file"
+  | "m.video"
+  | "_OTHER_";
+
 export interface MatrixRoomMessage {
   type: "m.room.message";
   content: {
     body: string;
-    msgtype: "m.text" | "m.image" | string;
+    msgtype: MessageType;
     "m.relates_to"?: {
       event_id: string;
       rel_type: "m.replace" | string;

matrixgw_frontend/src/utils/RoomEventsManager.ts

@@ -3,6 +3,7 @@ import type {
   MatrixEvent,
   MatrixEventData,
   MatrixEventsList,
+  MessageType,
 } from "../api/matrix/MatrixApiEvent";
 import type { Room } from "../api/matrix/MatrixApiRoom";
 import type { WsMessage } from "../api/WsApi";
@@ -21,7 +22,8 @@ export interface Message {
   modified: boolean;
   reactions: Map<string, MessageReaction[]>;
   content: string;
-  image?: string;
+  type: MessageType;
+  file?: string;
 }
 
 export class RoomEventsManager {
@@ -141,7 +143,8 @@ export class RoomEventsManager {
           reactions: new Map(),
           time_sent: evt.time,
           time_sent_dayjs: dayjs.unix(evt.time / 1000),
-          image: data.content.file?.url ?? data.content.url,
+          type: data.content.msgtype,
+          file: data.content.file?.url ?? data.content.url,
           content: data.content.body,
         });
       }

matrixgw_frontend/src/widgets/messages/RoomMessagesList.tsx

@@ -1,6 +1,7 @@
 import AddReactionIcon from "@mui/icons-material/AddReaction";
 import DeleteIcon from "@mui/icons-material/Delete";
 import EditIcon from "@mui/icons-material/Edit";
+import DownloadIcon from "@mui/icons-material/Download";
 import {
   Box,
   Button,
@@ -220,7 +221,8 @@ function RoomMessage(p: {
 
         {/** Message itself */}
         <div style={{ marginLeft: "15px", whiteSpace: "pre-wrap" }}>
-          {p.message.image ? (
+          {/* Image */}
+          {p.message.type === "m.image" && (
             <img
               onClick={() => setShowImageFullScreen(true)}
               src={MatrixApiEvent.GetEventFileURL(
@@ -232,9 +234,53 @@ function RoomMessage(p: {
                 maxWidth: "200px",
               }}
             />
-          ) : (
-            p.message.content
           )}
+
+          {/* Audio */}
+          {p.message.type === "m.audio" && (
+            <audio controls>
+              <source
+                src={MatrixApiEvent.GetEventFileURL(
+                  p.room,
+                  p.message.event_id,
+                  false
+                )}
+              />
+            </audio>
+          )}
+
+          {/* Video */}
+          {p.message.type === "m.video" && (
+            <video controls style={{ maxHeight: "300px", maxWidth: "300px" }}>
+              <source
+                src={MatrixApiEvent.GetEventFileURL(
+                  p.room,
+                  p.message.event_id,
+                  false
+                )}
+              />
+            </video>
+          )}
+
+          {/* File */}
+          {p.message.type === "m.file" && (
+            <a
+              href={MatrixApiEvent.GetEventFileURL(
+                p.room,
+                p.message.event_id,
+                false
+              )}
+              target="_blank"
+              rel="noopener"
+            >
+              <Button variant="outlined" startIcon={<DownloadIcon />}>
+                {p.message.content}
+              </Button>
+            </a>
+          )}
+
+          {/* Text message */}
+          {p.message.type === "m.text" && p.message.content}
         </div>
         <ButtonGroup
           className="buttons"
@@ -257,7 +303,7 @@ function RoomMessage(p: {
           </Button>
           {/* Edit text message */}
           {p.message.account === user.info.matrix_user_id &&
-            !p.message.image && (
+            !p.message.file && (
               <Button onClick={handleEditMessage}>
                 <EditIcon />
               </Button>