Handle message rendering errors via the errorCaptured hook

Also, fix some issues with uploads on iOS

src/assets/translations/en.json

@@ -109,7 +109,8 @@
     "files": "Files",
     "images": "Images",
     "send_attachements_dialog_title": "Do you want to send following attachments ?",
-    "download_all": "Download all"
+    "download_all": "Download all",
+    "failed_to_render": "Failed to render event"
   },
   "room": {
     "invitations": "You have no invitations | You have 1 invitation | You have {count} invitations",

src/components/Chat.vue

@@ -62,6 +62,7 @@
         <div v-if="showDayMarkerBeforeEvent(event) && !!componentForEvent(event, isForExport = false)" class="day-marker"><div class="line"></div><div class="text">{{ dayForEvent(event) }}</div><div class="line"></div></div>
 
         <div v-if="!event.isRelation() && !event.isRedaction()" :ref="event.getId()">
+          <MessageErrorHandler>
             <div class="message-wrapper" v-on:touchstart="
               (e) => {
                 touchStart(e, event);
@@ -91,6 +92,7 @@
               <!-- <div v-if="debugging" style="user-select:text">Event: {{ JSON.stringify(event) }}</div> -->
               <div v-if="event.getId() == readMarker && index < filteredEvents.length - 1" class="read-marker"><div class="line"></div><div class="text">{{ $t('message.unread_messages') }}</div><div class="line"></div></div>
             </div>
+          </MessageErrorHandler>
         </div>
       </div>
 
@@ -213,7 +215,7 @@
     </v-container>
 
     <input ref="attachment" type="file" name="attachment" @change="handlePickedAttachment($event)"
-                accept="image/*,audio/*,video/*,.pdf,application/pdf,.apk,application/vnd.android.package-archive,.ipa,.zip,application/zip,application/x-zip-compressed,multipart/x-zip" class="d-none" multiple/>
+                accept="image/*,audio/*,video/*,.mp3,.mp4,.wav,.m4a,.pdf,application/pdf,.apk,application/vnd.android.package-archive,.ipa,.zip,application/zip,application/x-zip-compressed,multipart/x-zip" class="d-none" multiple/>
 
     <div v-if="currentFileInputsDialog && !useFileModeNonAdmin">
       <v-dialog v-model="currentFileInputsDialog" class="ma-0 pa-0" :width="$vuetify.breakpoint.smAndUp ? '50%' : '85%'" persistent scrollable>
@@ -364,6 +366,7 @@ import FileDropLayout from "./file_mode/FileDropLayout";
 import roomTypeMixin from "./roomTypeMixin";
 import roomMembersMixin from "./roomMembersMixin";
 import PurgeRoomDialog from "../components/PurgeRoomDialog";
+import MessageErrorHandler from "./MessageErrorHandler";
 
 const sizeOf = require("image-size");
 const dataUriToBuffer = require("data-uri-to-buffer");
@@ -417,7 +420,8 @@ export default {
     FileDropLayout,
     UserProfileDialog,
     PurgeRoomDialog,
-    WelcomeHeaderChannelUser
+    WelcomeHeaderChannelUser,
+    MessageErrorHandler
   },
 
   data() {

src/components/MessageErrorHandler.vue

@@ -0,0 +1,29 @@
+
+<template>
+  <div>
+    <slot
+      v-if="err"
+      name="error"
+      v-bind:err="err"
+    ><div class="text-center">{{ $t('message.failed_to_render') }}</div></slot>
+    <slot v-else></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "MessageErrorHandler",
+  data() {
+    return {
+      err: false,
+    };
+  },
+  errorCaptured(err, ignoredvm, ignoredinfo) {
+    this.err = err;
+    return false;
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

src/components/messages/MessageIncomingImage.vue

@@ -27,7 +27,7 @@ export default {
   components: { MessageIncoming },
   data() {
     return {
-      src: null,
+      src: undefined,
       cover: true,
       contain: false,
       dialog: false

src/components/messages/MessageOutgoingImage.vue

@@ -27,7 +27,7 @@ export default {
   components: { MessageOutgoing },
   data() {
     return {
-      src: null,
+      src: undefined,
       cover: true,
       contain: false,
       dialog: false