add mounts to GUI.

client/src/components/RoomInfo.vue

@@ -145,6 +145,15 @@
           </tbody>
         </template>
       </v-simple-table>
+
+      <div class="my-3 headline">Mounts</div>
+      <v-simple-table>
+        <template v-slot:default>
+          <tbody>
+            <tr v-for="({ host_path, container_path }, index) in settings.mounts" :key="index"><th style="width:50%;">{{ host_path }}</th><td>{{ container_path }}</td></tr>
+          </tbody>
+        </template>
+      </v-simple-table>
     </template>
   </div>
 </template>

client/src/components/RoomsCreate.vue

@@ -187,7 +187,7 @@
             <v-btn @click="addEnv" icon color="green"><v-icon>mdi-plus</v-icon></v-btn>
           </v-row>
           <v-row align="center" v-for="({ key, val }, index) in envList" :key="index">
-            <v-col class="pb-0">
+            <v-col class="py-0">
               <v-text-field
                 label="Key"
                 :value="key"
@@ -195,7 +195,8 @@
                 autocomplete="off"
               ></v-text-field>
             </v-col>
-            <v-col class="pb-0">
+            <div> : </div>
+            <v-col class="py-0">
               <v-text-field
                 label="Value"
                 :value="val"
@@ -207,6 +208,32 @@
               <v-btn @click="delEnv(index)" icon color="red"><v-icon>mdi-close</v-icon></v-btn>
             </div>
           </v-row>
+          <v-row align="center" no-gutters class="mt-3">
+            <h2> Mounts </h2>
+            <v-btn @click="data.mounts = [ ...data.mounts, { host_path: '', container_path: '' }]" icon color="green"><v-icon>mdi-plus</v-icon></v-btn>
+          </v-row>
+          <v-row align="center" v-for="({ host_path, container_path }, index) in data.mounts" :key="index">
+            <v-col class="py-0">
+              <v-text-field
+                label="Host path"
+                :value="host_path"
+                @input="$set(data.mounts, index, { host_path: $event, container_path })"
+                autocomplete="off"
+              ></v-text-field>
+            </v-col>
+            <div> : </div>
+            <v-col class="py-0">
+              <v-text-field
+                label="Container path"
+                :value="container_path"
+                @input="$set(data.mounts, index, { host_path, container_path: $event})"
+                autocomplete="off"
+              ></v-text-field>
+            </v-col>
+            <div>
+              <v-btn @click="$delete(data.mounts, index)" icon color="red"><v-icon>mdi-close</v-icon></v-btn>
+            </div>
+          </v-row>
         </template>
       </v-form>
     </v-card-text>

client/src/store/state.ts

@@ -37,6 +37,11 @@ export const state = {
   
     // eslint-disable-next-line
     broadcast_pipeline: '',
+  
+    // eslint-disable-next-line
+    envs: {},
+    // eslint-disable-next-line
+    mounts: [],
   } as RoomSettings,
   videoCodecs: [
     "VP8",