Support send/receive of videos

Naive approach, just downloading the whole chunk every time! Need to figure out caching and streaming for long-play stuff.

src/components/Chat.vue

@@ -302,9 +302,11 @@ import { TimelineWindow, EventTimeline } from "matrix-js-sdk";
 import MessageIncomingText from "./messages/MessageIncomingText";
 import MessageIncomingImage from "./messages/MessageIncomingImage.vue";
 import MessageIncomingAudio from "./messages/MessageIncomingAudio.vue";
+import MessageIncomingVideo from "./messages/MessageIncomingVideo.vue";
 import MessageOutgoingText from "./messages/MessageOutgoingText";
 import MessageOutgoingImage from "./messages/MessageOutgoingImage.vue";
 import MessageOutgoingAudio from "./messages/MessageOutgoingAudio.vue";
+import MessageOutgoingVideo from "./messages/MessageOutgoingVideo.vue";
 import ContactJoin from "./messages/ContactJoin.vue";
 import ContactLeave from "./messages/ContactLeave.vue";
 import ContactInvited from "./messages/ContactInvited.vue";
@@ -357,9 +359,11 @@ export default {
     MessageIncomingText,
     MessageIncomingImage,
     MessageIncomingAudio,
+    MessageIncomingVideo,
     MessageOutgoingText,
     MessageOutgoingImage,
     MessageOutgoingAudio,
+    MessageOutgoingVideo,
     ContactJoin,
     ContactLeave,
     ContactInvited,
@@ -728,6 +732,8 @@ export default {
               return MessageIncomingImage;
             } else if (event.getContent().msgtype == "m.audio") {
               return MessageIncomingAudio;
+            } else if (event.getContent().msgtype == "m.video") {
+              return MessageIncomingVideo;
             }
             return MessageIncomingText;
           } else {
@@ -735,6 +741,8 @@ export default {
               return MessageOutgoingImage;
             } else if (event.getContent().msgtype == "m.audio") {
               return MessageOutgoingAudio;
+            } else if (event.getContent().msgtype == "m.video") {
+              return MessageOutgoingVideo;
             }
             return MessageOutgoingText;
           }

src/components/messages/MessageIncomingVideo.vue

@@ -0,0 +1,43 @@
+<template>
+  <div :class="messageClasses">
+    <v-avatar class="avatar" size="32" color="#ededed">
+      <img v-if="messageEventAvatar(event)" :src="messageEventAvatar(event)" />
+      <span v-else class="white--text headline">{{
+        messageEventDisplayName(event).substring(0, 1).toUpperCase()
+      }}</span>
+    </v-avatar>
+    <div class="bubble image-bubble">
+      <v-responsive :aspect-ratio="16 / 9" :src="src">
+        <video :src="src" controls style="width:100%;height:100%">Video file</video>
+        <div v-if="downloadProgress" class="download-overlay">
+          <div class="text-center download-text">{{ downloadProgress }}% downloaded</div>
+        </div>
+      </v-responsive>
+      <QuickReactions :event="event" :reactions="reactions" />
+    </div>
+    <div class="op-button" ref="opbutton">
+      <v-btn icon @click.stop="showContextMenu($refs.opbutton)"
+        ><v-icon>more_vert</v-icon></v-btn
+      >
+    </div>
+    <div v-if="showSenderAndTime" class="senderAndTime">
+      <div class="sender">{{ messageEventDisplayName(event) }}</div>
+      <div class="time">
+        {{ formatTime(event.event.origin_server_ts) }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import messageMixin from "./messageMixin";
+import attachmentMixin from "./attachmentMixin";
+
+export default {
+  mixins: [messageMixin, attachmentMixin],
+};
+</script>
+
+<style lang="scss">
+@import "@/assets/css/chat.scss";
+</style>

src/components/messages/MessageOutgoingVideo.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="messageOut">
+    <div class="op-button" ref="opbutton">
+      <v-btn icon @click.stop="showContextMenu($refs.opbutton)"
+        ><v-icon>more_vert</v-icon></v-btn
+      >
+    </div>
+    <div class="bubble image-bubble">
+      <v-responsive :aspect-ratio="16 / 9" class="ma-0 pa-0">
+        <video :src="src" controls style="width:100%;height:100%">Video file</video>
+      </v-responsive>
+            <QuickReactions :event="event" :reactions="reactions" />
+    </div>
+    <v-avatar class="avatar" size="32" color="#ededed" @click.stop="ownAvatarClicked">
+      <img v-if="userAvatar" :src="userAvatar" />
+      <span v-else class="white--text headline">{{ userAvatarLetter }}</span>
+    </v-avatar>
+    <div class="senderAndTime">
+      <!-- <div class="sender">{{ "You" }}</div> -->
+      <div class="time">
+        {{ formatTime(event.event.origin_server_ts) }}
+      </div>
+      <div class="status">{{ event.status }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import messageMixin from "./messageMixin";
+import attachmentMixin from "./attachmentMixin";
+
+export default {
+  mixins: [messageMixin, attachmentMixin],
+};
+</script>
+
+<style lang="scss">
+@import "@/assets/css/chat.scss";
+</style>

src/components/messages/attachmentMixin.js

@@ -3,13 +3,17 @@ import util from "../../plugins/utils";
 export default {
   data() {
     return {
-      src: null
+      src: null,
+      downloadProgress: null
     }
   },
   mounted() {
     console.log("Mounted with event:", JSON.stringify(this.event.getContent()))
     util
-      .getAttachment(this.$matrix.matrixClient, this.event)
+      .getAttachment(this.$matrix.matrixClient, this.event, (progress) => {
+        this.downloadProgress = progress;
+        console.log("Progress: " + progress);
+      })
       .then((url) => {
         this.src = url;
       })