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.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "keanuapp-weblite",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",

src/assets/css/chat.scss

@@ -260,12 +260,16 @@ $admin-fg: white;
         width: fit-content;
         max-width: 70%;
     }
+    .video2-bubble {
+        background-color: #e5e5e5;
+        border-radius: 10px 10px 0 10px;
+    }
     .bubble.image-bubble {
         padding: 0px;
         display: inline-block;
         width: 70%;
         max-width: 70%;
-        .v-image {
+        .v-image, video {
             border-radius: 10px 10px 0 10px;
         }
     }
@@ -428,6 +432,21 @@ $admin-fg: white;
     }
 }
 
+.download-overlay {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width:100%;
+    height:100%;
+    background-color: rgba(0,0,0,0.4);
+    align-items: center;
+    display: flex;
+    .download-text {
+        width: 100%;
+        color: white;
+    }
+}
+
 .room-name {
     font-family: 'Poppins', sans-serif;
     font-weight: 700;

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;
       })

src/plugins/utils.js

@@ -12,7 +12,7 @@ var duration = require('dayjs/plugin/duration')
 dayjs.extend(duration);
 
 class Util {
-    getAttachment(matrixClient, event) {
+    getAttachment(matrixClient, event, progressCallback) {
         return new Promise((resolve, reject) => {
             const content = event.getContent();
             if (content.url != null) {
@@ -31,7 +31,13 @@ class Util {
                 reject("No url found!");
             }
 
-            axios.get(url, { responseType: 'arraybuffer' })
+            axios.get(url, { responseType: 'arraybuffer', onDownloadProgress: progressEvent => {
+                let percentCompleted = Math.floor((progressEvent.loaded * 100) / progressEvent.total);
+                        if (progressCallback) {
+                            progressCallback(percentCompleted);
+                        }
+                    }
+                 })
                 .then(response => {
                     return this.decryptIfNeeded(file, response);
                 })
@@ -41,7 +47,12 @@ class Util {
                 .catch(err => {
                     console.log("Download error: ", err);
                     reject(err);
-                });
+                })
+                .finally(() => {
+                    if (progressCallback) {
+                        progressCallback(null);
+                    }
+                });   
         });
     }