Experimental "file drop" mode

src/components/RoomInfo.vue

@@ -127,16 +127,13 @@
       </v-card-text>
     </v-card>
 
-    <v-card class="account ma-3" flat v-if="$config.experimental_voice_mode || canChangeReadOnly()">
+    <v-card class="account ma-3" flat v-if="availableRoomTypes.length > 1 || canChangeReadOnly()">
       <v-card-title class="h2 with-right-label"><div>{{ $t("room_info.experimental_features") }}</div><div></div></v-card-title>
-      <v-card-text class="with-right-label" v-if="$config.experimental_voice_mode">
+      <v-card-text class="with-right-label" v-if="availableRoomTypes.length > 1">
         <div>
-          <div class="option-title">{{ $t('room_info.voice_mode') }}</div>
-          <div class="option-text">{{ $t('room_info.voice_mode_info') }}</div>
+          <div class="option-title">{{ $t('room_info.room_type') }}</div>
         </div>
-        <v-switch
-        v-model="useVoiceMode"
-      ></v-switch>
+        <RoomTypeSelector v-model="roomType" />
       </v-card-text>
       <v-card-text class="with-right-label" v-if="canChangeReadOnly()">
         <div>
@@ -260,25 +257,27 @@ import DeviceList from "../components/DeviceList";
 import RoomExport from "../components/RoomExport";
 import RoomAvatarPicker from "../components/RoomAvatarPicker";
 import CopyLink from "../components/CopyLink.vue"
+import RoomTypeSelector from "./RoomTypeSelector.vue";
 import roomInfoMixin from "./roomInfoMixin";
-import util from "../plugins/utils";
+import roomTypeMixin from "./roomTypeMixin";
+import util, { ROOM_TYPE_DEFAULT, ROOM_TYPE_FILE_MODE, ROOM_TYPE_VOICE_MODE } from "../plugins/utils";
 
 export default {
   name: "RoomInfo",
-  mixins: [roomInfoMixin],
+  mixins: [roomInfoMixin, roomTypeMixin],
   components: {
     LeaveRoomDialog,
     PurgeRoomDialog,
     DeviceList,
     RoomExport,
     RoomAvatarPicker,
+    RoomTypeSelector,
     CopyLink
   },
   data() {
     return {
       members: [],
       user: null,
-      displayName: "",
       showAllMembers: false,
       showLeaveConfirmation: false,
       showPurgeConfirmation: false,
@@ -305,7 +304,6 @@ export default {
     this.$matrix.on("Room.timeline", this.onEvent);
     this.updateMembers();
     this.user = this.$matrix.matrixClient.getUser(this.$matrix.currentUserId);
-    this.displayName = this.user.displayName;
 
     // Display build version
     const version = require("!!raw-loader!../assets/version.txt").default;
@@ -340,15 +338,26 @@ export default {
       return "";
     },
 
-    useVoiceMode: {
+    roomType: {
       get: function () {
-        return util.useVoiceMode(this.room);
-      },
-      set: function (audioLayout) {
         if (this.room && this.room.tags) {
           let options = this.room.tags["ui_options"] || {}
-          options["voice_mode"] = (audioLayout ? 1 : 0);
-          this.room.tags["ui_options"] = options;
+          if (options["voice_mode"]) {
+            return ROOM_TYPE_VOICE_MODE;
+          } else if (options["file_mode"]) {
+            return ROOM_TYPE_FILE_MODE;
+          }
+        }
+        return ROOM_TYPE_DEFAULT;
+      },
+      set: function (roomType) {
+        if (this.room) {
+          let tags = this.room.tags || {};
+          let options = tags["ui_options"] || {}
+          options["voice_mode"] = (roomType == ROOM_TYPE_VOICE_MODE ? 1 : 0);
+          options["file_mode"] = (roomType == ROOM_TYPE_FILE_MODE ? 1 : 0);
+          tags["ui_options"] = options;
+          this.room.tags = tags;
           this.$matrix.matrixClient.setRoomTag(this.room.roomId, "ui_options", options);
         }
       },
@@ -618,7 +627,7 @@ export default {
         -1
       );
       }
-    }
+    },
   },
 };
 </script>