Add mux support. (#58)

* add mux support.

* usemux to mux.

* lint fix.

* dev script mux.

* add mux to readme.

client/src/api/api.ts

@@ -590,6 +590,12 @@ export interface RoomsConfig {
      * @memberof RoomsConfig
      */
     'storage_enabled'?: boolean;
+    /**
+     * 
+     * @type {boolean}
+     * @memberof RoomsConfig
+     */
+    'uses_mux'?: boolean;
 }
 
 /**

client/src/components/RoomInfo.vue

@@ -25,10 +25,10 @@
               :rotate="270"
               :size="100"
               :width="15"
-              :value="(stats.connections / settings.max_connections) * 100"
+              :value="usesMux ? 100 : ((stats.connections / settings.max_connections) * 100)"
               color="blue"
             >
-              {{ stats.connections }} / {{ settings.max_connections }}
+              {{ stats.connections }} <template v-if="!usesMux">/ {{ settings.max_connections }}</template>
             </v-progress-circular>
           </div>
         </v-col>
@@ -99,7 +99,7 @@
                 <span>Invite link for admins</span>
               </v-tooltip>
             </td></tr>
-            <tr><th> Max connections </th><td>{{ settings.max_connections }}</td></tr>
+            <tr v-if="!usesMux"><th> Max connections </th><td>{{ settings.max_connections }}</td></tr>
             <tr><th> Control protection </th><td>{{ settings.control_protection }}</td></tr>
             <tr><th> Implicit Control </th><td>{{ settings.implicit_control }}</td></tr>
           </tbody>
@@ -274,6 +274,11 @@ export default class RoomInfo extends Vue {
     }
   }
 
+  get usesMux() {
+    // old rooms might not use mux despite enabled server wide, simple check for that
+    return this.$store.state.roomsConfig.uses_mux && this.settings?.max_connections == 1
+  }
+
   get allBrowserExtensions() {
     if (!this.settings?.browser_policy?.type) return {}
 

client/src/components/RoomsCreate.vue

@@ -56,7 +56,28 @@
           </v-col>
         </v-row>
 
-        <v-row align="center">
+        <!-- if uses mux vs. old logic -->
+        <v-row align="center" v-if="usesMux">
+          <v-col class="pt-0">
+            <v-checkbox
+              v-model="data.control_protection"
+              label="Enable control protection"
+              hide-details
+              class="shrink ml-2 mt-0"
+            ></v-checkbox>
+            <div style="margin-left: 41px;"><i>Users can gain control only if at least one admin is in the room.</i></div>
+          </v-col>
+          <v-col class="pt-0">
+            <v-checkbox
+              v-model="data.implicit_control"
+              label="Enable implicit control"
+              hide-details
+              class="shrink ml-2 mt-0"
+            ></v-checkbox>
+            <div style="margin-left: 41px;"><i>Users do not need to request control prior usage.</i></div>
+          </v-col>
+        </v-row>
+        <v-row align="center" v-else>
           <v-col class="pt-0">
             <v-text-field
               label="Max connections"
@@ -482,6 +503,10 @@ export default class RoomsCreate extends Vue {
     return this.$store.state.roomsConfig.storage_enabled
   }
 
+  get usesMux() {
+    return this.$store.state.roomsConfig.uses_mux
+  }
+
   get videoCodecs() {
     return this.$store.state.videoCodecs
   }
@@ -579,7 +604,7 @@ export default class RoomsCreate extends Vue {
         // eslint-disable-next-line
         admin_pass: this.data.admin_pass || randomPassword(),
         // eslint-disable-next-line
-        max_connections: Number(this.data.max_connections),
+        max_connections: Number(this.data.max_connections), // not needed when uses mux
         // eslint-disable-next-line
         control_protection: Boolean(this.data.control_protection),
         // eslint-disable-next-line

client/src/components/RoomsList.vue

@@ -89,29 +89,34 @@ export default class RoomsList extends Vue {
   private roomId = ''
   private roomLoading = [] as Array<string>
 
-  private headers = [
-    {
-      text: 'Deployment',
-      value: 'url',
-      sortable: false,
-    },
-    { text: 'Name', value: 'name' },
-    { text: 'Max connections', value: 'max_connections' },
-    { text: 'Neko image', value: 'neko_image' },
-    { text: 'Status', value: 'status' },
-    { text: 'Created', value: 'created' },
-    {
-      text: 'Actions',
-      value: 'actions',
-      sortable: false,
-    },
-    {
-      text: 'Destroy',
-      value: 'destroy',
-      align: 'end',
-      sortable: false,
-    },
-  ]
+  get headers() {
+    return [
+      {
+        text: 'Deployment',
+        value: 'url',
+        sortable: false,
+      },
+      { text: 'Name', value: 'name' },
+      // when using mux we don't have max connections
+      ...(!this.$store.state.roomsConfig.uses_mux ? [
+        { text: 'Max connections', value: 'max_connections' }
+      ] : []),
+      { text: 'Neko image', value: 'neko_image' },
+      { text: 'Status', value: 'status' },
+      { text: 'Created', value: 'created' },
+      {
+        text: 'Actions',
+        value: 'actions',
+        sortable: false,
+      },
+      {
+        text: 'Destroy',
+        value: 'destroy',
+        align: 'end',
+        sortable: false,
+      },
+    ]
+  }
 
   get rooms() {
     return this.$store.state.rooms