Add support for more file formats

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>