From fac6a2a55816a146af76220f5d6784327e9c5cfd Mon Sep 17 00:00:00 2001
From: Ryan Cao <70191398+ryanccn@users.noreply.github.com>
Date: Sat, 28 Oct 2023 23:43:40 +0800
Subject: [PATCH] improve UI

---
 src/renderer/components/ScreenSharePicker.tsx | 76 ++++++++++---------
 src/renderer/components/screenSharePicker.css |  7 +-
 2 files changed, 48 insertions(+), 35 deletions(-)

diff --git a/src/renderer/components/ScreenSharePicker.tsx b/src/renderer/components/ScreenSharePicker.tsx
index 47c0fc475..a235118aa 100644
--- a/src/renderer/components/ScreenSharePicker.tsx
+++ b/src/renderer/components/ScreenSharePicker.tsx
@@ -104,7 +104,8 @@ export function openScreenSharePicker(screens: Source[], skipPicker: boolean) {
                     modalProps={props}
                     submit={async v => {
                         didSubmit = true;
-                        if (v.audioSource && v.audioSource !== "None") {
+
+                        if (!v.audioDevice && v.audioSource && v.audioSource !== "None") {
                             if (v.audioSource === "Entire System") {
                                 await VesktopNative.virtmic.startSystem();
                             } else {
@@ -112,7 +113,7 @@ export function openScreenSharePicker(screens: Source[], skipPicker: boolean) {
                             }
                         }
 
-                        patchAudioWithDevice(v.audioDevice);
+                        if (v.audioDevice) patchAudioWithDevice(v.audioDevice);
 
                         resolve(v);
                     }}
@@ -216,28 +217,34 @@ function StreamSettings({
                     </section>
                 </div>
 
-                <AudioSourceAnyDevice
-                    audioDevice={settings.audioDevice}
-                    setAudioDevice={source => setSettings(s => ({ ...s, audioDevice: source }))}
-                />
-
-                {isWindows && (
-                    <Switch
-                        value={settings.audio}
-                        onChange={checked => setSettings(s => ({ ...s, audio: checked }))}
-                        hideBorder
-                        className="vcd-screen-picker-audio"
-                    >
-                        Stream With Audio
-                    </Switch>
-                )}
+                <div className="vcd-screen-picker-audio">
+                    <Forms.FormTitle>Audio</Forms.FormTitle>
 
-                {isLinux && (
-                    <AudioSourcePickerLinux
-                        audioSource={settings.audioSource}
-                        setAudioSource={source => setSettings(s => ({ ...s, audioSource: source }))}
+                    <AudioSourceAnyDevice
+                        audioDevice={settings.audioDevice}
+                        setAudioDevice={source => setSettings(s => ({ ...s, audioDevice: source }))}
                     />
-                )}
+
+                    {isWindows && (
+                        <Switch
+                            value={settings.audio}
+                            onChange={checked => setSettings(s => ({ ...s, audio: checked }))}
+                            hideBorder
+                            className="vcd-screen-picker-audio"
+                            disabled={!!settings.audioDevice}
+                        >
+                            Stream with Windows loopback audio
+                        </Switch>
+                    )}
+
+                    {isLinux && (
+                        <AudioSourcePickerLinux
+                            audioSource={settings.audioSource}
+                            setAudioSource={source => setSettings(s => ({ ...s, audioSource: source }))}
+                            disabled={!!settings.audioDevice}
+                        />
+                    )}
+                </div>
             </Card>
         </div>
     );
@@ -248,7 +255,7 @@ function AudioSourceAnyDevice({
     setAudioDevice
 }: {
     audioDevice?: string;
-    setAudioDevice(s: string): void;
+    setAudioDevice(s: string | undefined): void;
 }) {
     const [sources, _, loading] = useAwaiter(
         () =>
@@ -259,28 +266,29 @@ function AudioSourceAnyDevice({
     );
 
     return (
-        <section>
-            <Forms.FormTitle>Audio</Forms.FormTitle>
-            {loading && <Forms.FormTitle>Loading audio devices...</Forms.FormTitle>}
-
+        <>
             {sources.length > 0 && (
                 <Select
-                    options={sources.map((s, idx) => ({ label: s.label, value: s.deviceId, default: idx === 0 }))}
+                    clearable={true}
+                    options={sources.map(s => ({ label: s.label, value: s.deviceId }))}
                     isSelected={s => s === audioDevice}
-                    select={setAudioDevice}
+                    select={s => setAudioDevice(s)}
+                    clear={() => setAudioDevice(undefined)}
                     serialize={String}
                 />
             )}
-        </section>
+        </>
     );
 }
 
 function AudioSourcePickerLinux({
     audioSource,
-    setAudioSource
+    setAudioSource,
+    disabled = false
 }: {
     audioSource?: string;
     setAudioSource(s: string): void;
+    disabled: boolean;
 }) {
     const [sources, _, loading] = useAwaiter(() => VesktopNative.virtmic.list(), {
         fallbackValue: { ok: true, targets: [] }
@@ -288,8 +296,7 @@ function AudioSourcePickerLinux({
     const allSources = sources.ok ? ["None", "Entire System", ...sources.targets] : null;
 
     return (
-        <section>
-            <Forms.FormTitle>Audio</Forms.FormTitle>
+        <>
             {loading && <Forms.FormTitle>Loading Audio sources...</Forms.FormTitle>}
             {!sources.ok &&
                 (sources.isGlibcxxToOld ? (
@@ -313,9 +320,10 @@ function AudioSourcePickerLinux({
                     isSelected={s => s === audioSource}
                     select={setAudioSource}
                     serialize={String}
+                    isDisabled={disabled}
                 />
             )}
-        </section>
+        </>
     );
 }
 
diff --git a/src/renderer/components/screenSharePicker.css b/src/renderer/components/screenSharePicker.css
index 356a1caa4..b4ed3881c 100644
--- a/src/renderer/components/screenSharePicker.css
+++ b/src/renderer/components/screenSharePicker.css
@@ -37,7 +37,6 @@
     outline: 2px solid var(--brand-experiment);
 }
 
-
 .vcd-screen-picker-grid div {
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -100,6 +99,12 @@
     flex: 1 1 auto;
 }
 
+.vcd-screen-picker-audio {
+    display: flex;
+    flex-direction: column;
+    gap: 1em;
+}
+
 .vcd-screen-picker-radios {
     display: flex;
     width: 100%;