From eb2de869b8098122e188a3c8e66aca0b2ea75a6b Mon Sep 17 00:00:00 2001
From: Johannes Marbach <johannesm@element.io>
Date: Thu, 7 Jul 2022 10:18:11 +0200
Subject: [PATCH 1/3] Prevent empty device labels

Fixes: #324
Signed-off-by: Johannes Marbach <johannesm@element.io>
---
 src/settings/SettingsModal.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/settings/SettingsModal.tsx b/src/settings/SettingsModal.tsx
index 1e45d55..90e4e46 100644
--- a/src/settings/SettingsModal.tsx
+++ b/src/settings/SettingsModal.tsx
@@ -78,7 +78,7 @@ export const SettingsModal = (props: Props) => {
             onSelectionChange={setAudioInput}
           >
             {audioInputs.map(({ deviceId, label }) => (
-              <Item key={deviceId}>{label}</Item>
+              <Item key={deviceId}>{!!label && label.trim().length > 0 ? label : "Default microphone"}</Item>
             ))}
           </SelectInput>
           {audioOutputs.length > 0 && (
@@ -88,7 +88,7 @@ export const SettingsModal = (props: Props) => {
               onSelectionChange={setAudioOutput}
             >
               {audioOutputs.map(({ deviceId, label }) => (
-                <Item key={deviceId}>{label}</Item>
+                <Item key={deviceId}>{!!label && label.trim().length > 0 ? label : "Default speaker"}</Item>
               ))}
             </SelectInput>
           )}
@@ -119,7 +119,7 @@ export const SettingsModal = (props: Props) => {
             onSelectionChange={setVideoInput}
           >
             {videoInputs.map(({ deviceId, label }) => (
-              <Item key={deviceId}>{label}</Item>
+              <Item key={deviceId}>{!!label && label.trim().length > 0 ? label : "Default camera"}</Item>
             ))}
           </SelectInput>
         </TabItem>

From f6d356c5cec3a30bbea666dfd72cb46c94d49bc1 Mon Sep 17 00:00:00 2001
From: Johannes Marbach <johannesm@element.io>
Date: Thu, 7 Jul 2022 10:31:44 +0200
Subject: [PATCH 2/3] Prettify the thing

---
 src/settings/SettingsModal.tsx | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/settings/SettingsModal.tsx b/src/settings/SettingsModal.tsx
index 90e4e46..34f3530 100644
--- a/src/settings/SettingsModal.tsx
+++ b/src/settings/SettingsModal.tsx
@@ -78,7 +78,11 @@ export const SettingsModal = (props: Props) => {
             onSelectionChange={setAudioInput}
           >
             {audioInputs.map(({ deviceId, label }) => (
-              <Item key={deviceId}>{!!label && label.trim().length > 0 ? label : "Default microphone"}</Item>
+              <Item key={deviceId}>
+                {!!label && label.trim().length > 0
+                  ? label
+                  : "Default microphone"}
+              </Item>
             ))}
           </SelectInput>
           {audioOutputs.length > 0 && (
@@ -88,7 +92,11 @@ export const SettingsModal = (props: Props) => {
               onSelectionChange={setAudioOutput}
             >
               {audioOutputs.map(({ deviceId, label }) => (
-                <Item key={deviceId}>{!!label && label.trim().length > 0 ? label : "Default speaker"}</Item>
+                <Item key={deviceId}>
+                  {!!label && label.trim().length > 0
+                    ? label
+                    : "Default speaker"}
+                </Item>
               ))}
             </SelectInput>
           )}
@@ -119,7 +127,9 @@ export const SettingsModal = (props: Props) => {
             onSelectionChange={setVideoInput}
           >
             {videoInputs.map(({ deviceId, label }) => (
-              <Item key={deviceId}>{!!label && label.trim().length > 0 ? label : "Default camera"}</Item>
+              <Item key={deviceId}>
+                {!!label && label.trim().length > 0 ? label : "Default camera"}
+              </Item>
             ))}
           </SelectInput>
         </TabItem>

From 1308e52e42789099acec5ae027caf04dbd6ead92 Mon Sep 17 00:00:00 2001
From: Johannes Marbach <johannesm@element.io>
Date: Thu, 7 Jul 2022 12:10:08 +0200
Subject: [PATCH 3/3] Enumerate devices

---
 src/settings/SettingsModal.tsx | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/settings/SettingsModal.tsx b/src/settings/SettingsModal.tsx
index 34f3530..7613f0d 100644
--- a/src/settings/SettingsModal.tsx
+++ b/src/settings/SettingsModal.tsx
@@ -77,11 +77,11 @@ export const SettingsModal = (props: Props) => {
             selectedKey={audioInput}
             onSelectionChange={setAudioInput}
           >
-            {audioInputs.map(({ deviceId, label }) => (
+            {audioInputs.map(({ deviceId, label }, index) => (
               <Item key={deviceId}>
                 {!!label && label.trim().length > 0
                   ? label
-                  : "Default microphone"}
+                  : `Microphone ${index + 1}`}
               </Item>
             ))}
           </SelectInput>
@@ -91,11 +91,11 @@ export const SettingsModal = (props: Props) => {
               selectedKey={audioOutput}
               onSelectionChange={setAudioOutput}
             >
-              {audioOutputs.map(({ deviceId, label }) => (
+              {audioOutputs.map(({ deviceId, label }, index) => (
                 <Item key={deviceId}>
                   {!!label && label.trim().length > 0
                     ? label
-                    : "Default speaker"}
+                    : `Speaker ${index + 1}`}
                 </Item>
               ))}
             </SelectInput>
@@ -126,9 +126,11 @@ export const SettingsModal = (props: Props) => {
             selectedKey={videoInput}
             onSelectionChange={setVideoInput}
           >
-            {videoInputs.map(({ deviceId, label }) => (
+            {videoInputs.map(({ deviceId, label }, index) => (
               <Item key={deviceId}>
-                {!!label && label.trim().length > 0 ? label : "Default camera"}
+                {!!label && label.trim().length > 0
+                  ? label
+                  : `Camera ${index + 1}`}
               </Item>
             ))}
           </SelectInput>