improve UI

Vencord · Jan 1, 2024 · 3dd118e · 3dd118e
1 parent 619ffbe
commit 3dd118e
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 35 deletions.
diff --git a/src/renderer/components/ScreenSharePicker.tsx b/src/renderer/components/ScreenSharePicker.tsx
@@ -104,15 +104,16 @@ 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 {
                                 await VesktopNative.virtmic.start([v.audioSource]);
                             }
                         }
 
-                        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,37 +266,37 @@ 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: [] }
     });
     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
@@ -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%;