Introduce a list of image mime types we can support as images

E.g. TIFF will now be handled as a generic file, not image, even though it has mime prefix "image/"

src/components/CreateRoom.vue

@@ -68,7 +68,7 @@
     <interactive-auth ref="interactiveAuth" />
 
     <input id="user-avatar-picker" ref="useravatar" type="file" name="user-avatar"
-      @change="handlePickedUserAvatar($event)" accept="image/*" class="d-none" />
+      @change="handlePickedUserAvatar($event)" :accept="supportedImageTypes" class="d-none" />
 
     <v-dialog v-model="enterRoomDialog" :width="$vuetify.display.smAndUp ? '50%' : '90%'">
       <v-card>

src/components/Join.vue

@@ -114,7 +114,7 @@
     </div>
 
     <input id="room-avatar-picker" ref="avatar" type="file" name="avatar" @change="handlePickedAvatar($event)"
-      accept="image/*" class="d-none" />
+      :accept="supportedImageTypes" class="d-none" />
 
     <div class="join-lang">
       <h3 class="mb-2">{{ $t("profile.select_language") }}</h3>

src/components/Profile.vue

@@ -33,7 +33,7 @@
               type="file"
               name="avatar"
               @change="handlePickedAvatar($event)"
-              accept="image/*"
+              :accept="supportedImageTypes"
               class="d-none"
             />
           </v-avatar>

src/components/RoomAvatarPicker.vue

@@ -10,7 +10,7 @@
       type="file"
       name="roomAvatar"
       @change="handleRoomPickedAvatar($event)"
-      accept="image/*"
+      :accept="supportedImageTypes"
       class="d-none"
     />
   </v-avatar>

src/components/RoomExport.vue

@@ -384,7 +384,7 @@ export default {
 
                     const mime = blob.type;
 
-                    if (mime.startsWith("image/")) {
+                    if (util.isSupportedImageType(mime)) {
                       var extension = ".png";
                       switch (mime) {
                         case "image/jpeg":

src/components/create/CreateRoomAvatar.vue

@@ -4,7 +4,7 @@
         <v-icon class="create-room-avatar__icon default" v-else>$vuetify.icons.room_avatar_placeholder</v-icon>
         <v-icon class="create-room-avatar__camera clickable" v-if="!modelValue || !modelValue.image" @click.stop="showRoomAvatarPicker">$vuetify.icons.ic_camera</v-icon>
         <input id="room-avatar-picker" ref="roomAvatar" type="file" name="roomAvatar"
-            @change="handlePickedRoomAvatar($event)" accept="image/*" class="d-none" />
+            @change="handlePickedRoomAvatar($event)" :accept="supportedImageTypes" class="d-none" />
     </div>
 </template>
 

src/components/messages/composition/useThumbnail.ts

@@ -32,7 +32,7 @@ export const useThumbnail = (source: KeanuEvent | File | undefined) => {
   } else if (source) {
     const file = source as File;
     isVideo.value = file.type.startsWith("video/");
-    isImage.value = file.type.startsWith("image/");
+    isImage.value = utils.isSupportedImageType(file.type);
     fileName.value = file.name;
     fileSize.value = prettyBytes(file.size);
   }