From 664eeaa0684827f58e91493cddaebe41c0738086 Mon Sep 17 00:00:00 2001
From: Noah Petherbridge <root@kirsle.net>
Date: Thu, 17 Aug 2023 18:45:43 -0700
Subject: [PATCH] Refresh video devices on demand

---
 web/static/js/BareRTC.js | 9 +++++++++
 web/templates/chat.html  | 7 +++++++
 2 files changed, 16 insertions(+)

diff --git a/web/static/js/BareRTC.js b/web/static/js/BareRTC.js
index 3b59786..a5519be 100644
--- a/web/static/js/BareRTC.js
+++ b/web/static/js/BareRTC.js
@@ -150,6 +150,7 @@ const app = Vue.createApp({
                 ],
 
                 // Available cameras and microphones for the Settings modal.
+                gettingDevices: false, // busy indicator for refreshing devices
                 videoDevices: [],
                 videoDeviceID: null,
                 audioDevices: [],
@@ -1488,6 +1489,9 @@ const app = Vue.createApp({
                 return;
             }
 
+            if (this.webcam.gettingDevices) return;
+            this.webcam.gettingDevices = true;
+
             navigator.mediaDevices.enumerateDevices().then(devices => {
                 this.webcam.videoDevices = [];
                 this.webcam.audioDevices = [];
@@ -1508,6 +1512,11 @@ const app = Vue.createApp({
                 })
             }).catch(err => {
                 this.ChatClient(`Error listing your cameras and microphones: ${err.name}: ${err.message}`);
+            }).finally(() => {
+                // In the settings modal, let the spinner spin for a moment.
+                setTimeout(() => {
+                    this.webcam.gettingDevices = false;
+                }, 500);
             })
         },
 
diff --git a/web/templates/chat.html b/web/templates/chat.html
index 92dd754..f5a37be 100644
--- a/web/templates/chat.html
+++ b/web/templates/chat.html
@@ -296,6 +296,13 @@
 
                         <h3 class="subtitle mb-2" v-if="webcam.videoDevices.length > 0 || webcam.audioDevices.length > 0">
                             Webcam Devices
+                            <button type="button" class="button is-primary is-small is-outlined ml-2"
+                                @click="getDevices()"
+                                title="Refresh list of devices">
+                                <i class="fa fa-arrows-rotate"
+                                    :class="{'fa-spin': webcam.gettingDevices}">
+                                </i>
+                            </button>
                         </h3>
                         <div class="columns is-mobile" v-if="webcam.videoDevices.length > 0 || webcam.audioDevices.length > 0">