webui: add amix enable/disable

Studio-Link · Oct 1, 2024 · 4abb6b8 · 4abb6b8
1 parent 2d06f3d
commit 4abb6b8
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 13 deletions.
diff --git a/webui/src/api.ts b/webui/src/api.ts
@@ -173,6 +173,11 @@ export default {
         else await api_fetch('PUT', '/webrtc/audio/disable', null)
     },
 
+    async amix(user_id: string, enable: boolean) {
+        if (enable) await api_fetch('PUT', '/webrtc/amix/enable', user_id)
+        else await api_fetch('PUT', '/webrtc/amix/disable', user_id)
+    },
+
     async source_focus(dev: string) {
         await api_fetch('PUT', '/webrtc/focus', dev)
     },

diff --git a/webui/src/components/Speakers.vue b/webui/src/components/Speakers.vue
@@ -16,7 +16,11 @@
                       :src="'/avatars/' + item.id + '.png'"
                       alt="Avatar Image"
                     />
-                    <span v-if="!item.audio" class="absolute bottom-0 right-0 bg-indigo-600 rounded-lg text-gray-200">
+                    <button
+                      v-if="!item.audio"
+                      @click="api.amix(item.id, true)"
+                      class="absolute bottom-0 right-0 bg-indigo-600 rounded-lg text-gray-200"
+                    >
                       <svg
                         aria-hidden="true"
                         focusable="false"
@@ -32,8 +36,12 @@
                           d="M383.1 464l-39.1-.0001v-33.77c20.6-2.824 39.98-9.402 57.69-18.72l-43.26-33.91c-14.66 4.65-30.28 7.179-46.68 6.144C245.7 379.6 191.1 317.1 191.1 250.9V247.2L143.1 209.5l.0001 38.61c0 89.65 63.97 169.6 151.1 181.7v34.15l-40 .0001c-17.67 0-31.1 14.33-31.1 31.1C223.1 504.8 231.2 512 239.1 512h159.1c8.838 0 15.1-7.164 15.1-15.1C415.1 478.3 401.7 464 383.1 464zM630.8 469.1l-159.3-124.9c15.37-25.94 24.53-55.91 24.53-88.21V216c0-13.25-10.75-24-23.1-24c-13.25 0-24 10.75-24 24l-.0001 39.1c0 21.12-5.559 40.77-14.77 58.24l-25.72-20.16c5.234-11.68 8.493-24.42 8.493-38.08l-.001-155.1c0-52.57-40.52-98.41-93.07-99.97c-54.37-1.617-98.93 41.95-98.93 95.95l0 54.25L38.81 5.111C34.41 1.673 29.19 0 24.03 0C16.91 0 9.839 3.158 5.12 9.189c-8.187 10.44-6.37 25.53 4.068 33.7l591.1 463.1c10.5 8.203 25.57 6.328 33.69-4.078C643.1 492.4 641.2 477.3 630.8 469.1z"
                         ></path>
                       </svg>
-                    </span>
-                    <span v-if="item.audio" class="absolute bottom-0 right-0 bg-gray-600 rounded-lg text-gray-200">
+                    </button>
+                    <button
+                      v-if="item.audio"
+                      @click="api.amix(item.id, false)"
+                      class="absolute bottom-0 right-0 bg-gray-600 rounded-lg text-gray-200"
+                    >
                       <svg
                         aria-hidden="true"
                         focusable="false"
@@ -49,7 +57,7 @@
                           d="M192 352c53.03 0 96-42.97 96-96v-160c0-53.03-42.97-96-96-96s-96 42.97-96 96v160C96 309 138.1 352 192 352zM344 192C330.7 192 320 202.7 320 215.1V256c0 73.33-61.97 132.4-136.3 127.7c-66.08-4.169-119.7-66.59-119.7-132.8L64 215.1C64 202.7 53.25 192 40 192S16 202.7 16 215.1v32.15c0 89.66 63.97 169.6 152 181.7V464H128c-18.19 0-32.84 15.18-31.96 33.57C96.43 505.8 103.8 512 112 512h160c8.222 0 15.57-6.216 15.96-14.43C288.8 479.2 274.2 464 256 464h-40v-33.77C301.7 418.5 368 344.9 368 256V215.1C368 202.7 357.3 192 344 192z"
                         ></path>
                       </svg>
-                    </span>
+                    </button>
                     <span
                       v-if="!item.video"
                       class="absolute -bottom-0 left-0 bg-indigo-600 rounded-lg text-gray-200 p-0.5"

diff --git a/webui/src/components/WebrtcVideo.vue b/webui/src/components/WebrtcVideo.vue
@@ -152,7 +152,53 @@ Audio RTT: {{ item.stats.artt }} ms
             class="hidden group-hover:inline-flex ml-2 items-center rounded-md border border-transparent bg-indigo-600 px-2.5 py-1.5 text-xs font-bold text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
           >
             <PresentationChartBarIcon class="-ml-0.5 mr-1 h-4 w-4" aria-hidden="true" />
-            Disable Solo 
+            Disable Solo
+          </button>
+          <button
+            v-if="Users.host_status.value && !item.audio"
+            @click="api.amix(item.id, true)"
+            type="button"
+            class="hidden group-hover:inline-flex ml-2 items-center rounded-md border border-transparent bg-indigo-600 px-2.5 py-1.5 text-xs font-bold text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+          >
+            <svg
+              aria-hidden="true"
+              focusable="false"
+              data-prefix="fas"
+              data-icon="microphone-slash"
+              class="h-5 w-5"
+              role="img"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 640 512"
+            >
+              <path
+                fill="currentColor"
+                d="M383.1 464l-39.1-.0001v-33.77c20.6-2.824 39.98-9.402 57.69-18.72l-43.26-33.91c-14.66 4.65-30.28 7.179-46.68 6.144C245.7 379.6 191.1 317.1 191.1 250.9V247.2L143.1 209.5l.0001 38.61c0 89.65 63.97 169.6 151.1 181.7v34.15l-40 .0001c-17.67 0-31.1 14.33-31.1 31.1C223.1 504.8 231.2 512 239.1 512h159.1c8.838 0 15.1-7.164 15.1-15.1C415.1 478.3 401.7 464 383.1 464zM630.8 469.1l-159.3-124.9c15.37-25.94 24.53-55.91 24.53-88.21V216c0-13.25-10.75-24-23.1-24c-13.25 0-24 10.75-24 24l-.0001 39.1c0 21.12-5.559 40.77-14.77 58.24l-25.72-20.16c5.234-11.68 8.493-24.42 8.493-38.08l-.001-155.1c0-52.57-40.52-98.41-93.07-99.97c-54.37-1.617-98.93 41.95-98.93 95.95l0 54.25L38.81 5.111C34.41 1.673 29.19 0 24.03 0C16.91 0 9.839 3.158 5.12 9.189c-8.187 10.44-6.37 25.53 4.068 33.7l591.1 463.1c10.5 8.203 25.57 6.328 33.69-4.078C643.1 492.4 641.2 477.3 630.8 469.1z"
+              ></path>
+            </svg>
+            Enable Audio
+          </button>
+          <button
+            v-if="Users.host_status.value && item.audio"
+            @click="api.amix(item.id, false)"
+            type="button"
+            class="hidden group-hover:inline-flex ml-2 items-center rounded-md border border-transparent bg-indigo-600 px-2.5 py-1.5 text-xs font-bold text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+          >
+            <svg
+              aria-hidden="true"
+              focusable="false"
+              data-prefix="fas"
+              data-icon="microphone"
+              class="h-5 w-5"
+              role="img"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 384 512"
+            >
+              <path
+                fill="currentColor"
+                d="M192 352c53.03 0 96-42.97 96-96v-160c0-53.03-42.97-96-96-96s-96 42.97-96 96v160C96 309 138.1 352 192 352zM344 192C330.7 192 320 202.7 320 215.1V256c0 73.33-61.97 132.4-136.3 127.7c-66.08-4.169-119.7-66.59-119.7-132.8L64 215.1C64 202.7 53.25 192 40 192S16 202.7 16 215.1v32.15c0 89.66 63.97 169.6 152 181.7V464H128c-18.19 0-32.84 15.18-31.96 33.57C96.43 505.8 103.8 512 112 512h160c8.222 0 15.57-6.216 15.96-14.43C288.8 479.2 274.2 464 256 464h-40v-33.77C301.7 418.5 368 344.9 368 256V215.1C368 202.7 357.3 192 344 192z"
+              ></path>
+            </svg>
+            Disable Audio
           </button>
         </div>
       </div>
@@ -273,31 +319,27 @@ function calc_rows() {
 }
 
 function calc_width() {
-  if (!video.value)
-    return '0 px'
+  if (!video.value) return '0 px'
   const rows = calc_rows()
   return Math.floor(video.value.clientWidth / rows) + 'px'
 }
 
 function calc_height() {
-  if (!video.value)
-    return '0 px'
+  if (!video.value) return '0 px'
   const rows = calc_rows()
   return Math.floor(video.value.clientHeight / rows) + 'px'
 }
 
 function calc_top(idx: number) {
-  if (!video.value)
-    return '0 px'
+  if (!video.value) return '0 px'
   const rows = calc_rows()
   const h = Math.floor(video.value.clientHeight / rows)
 
   return h * Math.floor(idx / rows) + 'px'
 }
 
 function calc_left(idx: number) {
-  if (!video.value)
-    return '0 px'
+  if (!video.value) return '0 px'
   const rows = calc_rows()
   const w = Math.floor(video.value.clientWidth / rows)
   let offset