From c9b1c6592c6c895e338999675030183cfe9c8339 Mon Sep 17 00:00:00 2001
From: kaitlynkittyy <kaitlynyaadev@kaitlynyaa.dev>
Date: Tue, 9 Apr 2024 13:30:55 -0400
Subject: [PATCH] updated some stuff and fixed window resizing breaking streams

---
 src/renderer/components/ScreenSharePicker.tsx | 219 +++++++++---------
 src/renderer/components/screenSharePicker.css |  19 +-
 src/renderer/patches/screenShareFixes.ts      |   3 +-
 3 files changed, 119 insertions(+), 122 deletions(-)

diff --git a/src/renderer/components/ScreenSharePicker.tsx b/src/renderer/components/ScreenSharePicker.tsx
index 6130747..3fbc98d 100644
--- a/src/renderer/components/ScreenSharePicker.tsx
+++ b/src/renderer/components/ScreenSharePicker.tsx
@@ -181,119 +181,123 @@ function StreamSettings({
             deps: [source.id]
         }
     );
+    const notVisible = false;
+    function setVisible() {
+        return !notVisible;
+    }
     // the source's name is not properly being displayed
     return (
-        <div className="vcd-screen-picker">
-            <div className="vcd-screen-picker-content">
-                <Forms.FormTitle>What you're streaming</Forms.FormTitle>
-                <Card className="vcd-screen-picker-card vcd-screen-picker-preview">
-                    <img src={thumb} alt="" />
-                    <Text variant="text-sm/normal">{source.name}</Text>
-                </Card>
-            </div>
-            <div className="vcd-screen-picker-content">
-                <Forms.FormTitle>Stream Settings</Forms.FormTitle>
-                <Card className="vcd-screen-picker-card">
-                    <div className="vcd-screen-picker-quality">
-                        <section>
-                            <Forms.FormTitle>Resolution</Forms.FormTitle>
-                            <div className="vcd-screen-picker-radios">
-                                {StreamResolutions.map(res => (
-                                    <label
-                                        className="vcd-screen-picker-radio"
-                                        data-checked={settings.resolution === res}
-                                    >
-                                        <Text variant="text-sm/bold">{res}</Text>
-                                        <input
-                                            type="radio"
-                                            name="resolution"
-                                            value={res}
-                                            checked={settings.resolution === res}
-                                            onChange={() => setSettings(s => ({ ...s, resolution: res }))}
-                                        />
-                                    </label>
-                                ))}
-                            </div>
-                        </section>
-
-                        <section>
-                            <Forms.FormTitle>Frame Rate</Forms.FormTitle>
-                            <div className="vcd-screen-picker-radios">
-                                {StreamFps.map(fps => (
-                                    <label className="vcd-screen-picker-radio" data-checked={settings.fps === fps}>
-                                        <Text variant="text-sm/bold">{fps}</Text>
-                                        <input
-                                            type="radio"
-                                            name="fps"
-                                            value={fps}
-                                            checked={settings.fps === fps}
-                                            onChange={() => setSettings(s => ({ ...s, fps }))}
-                                        />
-                                    </label>
-                                ))}
-                            </div>
-                        </section>
-                    </div>
+        <div>
+            <Forms.FormTitle>What you're streaming</Forms.FormTitle>
+            <Switch
+                onChange={setVisible}
+                value={notVisible ?? false}
+                className="vcd-screen-picker-audio vcd-screen-picker-preview-switch"
+            >
+                Show Preview
+            </Switch>
+            <Card
+                className={
+                    notVisible
+                        ? "vcd-screen-picker-card vcd-screen-picker-preview not-visible"
+                        : "vcd-screen-picker-card vcd-screen-picker-preview"
+                }
+            >
+                <img src={thumb} alt="stream preview" />
+                <Text variant="text-sm/normal">{source.name}</Text>
+            </Card>
+            <Forms.FormTitle>Stream Settings</Forms.FormTitle>
+            <Card className="vcd-screen-picker-card">
+                <div className="vcd-screen-picker-quality">
                     <section>
-                        <Forms.FormTitle>Content Type</Forms.FormTitle>
-                        <div>
-                            <div className="vcd-screen-picker-radios vcd-screen-picker-hints">
-                                <label
-                                    className="vcd-screen-picker-radio"
-                                    data-checked={settings.contentHint === "motion"}
-                                >
-                                    <Text variant="text-sm/bold">Prefer Smoothness</Text>
+                        <Forms.FormTitle>Resolution</Forms.FormTitle>
+                        <div className="vcd-screen-picker-radios">
+                            {StreamResolutions.map(res => (
+                                <label className="vcd-screen-picker-radio" data-checked={settings.resolution === res}>
+                                    <Text variant="text-sm/bold">{res}</Text>
                                     <input
                                         type="radio"
-                                        name="contenthint"
-                                        value="motion"
-                                        checked={settings.contentHint === "motion"}
-                                        onChange={() => setSettings(s => ({ ...s, contentHint: "motion" }))}
+                                        name="resolution"
+                                        value={res}
+                                        checked={settings.resolution === res}
+                                        onChange={() => setSettings(s => ({ ...s, resolution: res }))}
                                     />
                                 </label>
-                                <label
-                                    className="vcd-screen-picker-radio"
-                                    data-checked={settings.contentHint === "detail"}
-                                >
-                                    <Text variant="text-sm/bold">Prefer Clarity</Text>
-                                    <input
-                                        type="radio"
-                                        name="contenthint"
-                                        value="detail"
-                                        checked={settings.contentHint === "detail"}
-                                        onChange={() => setSettings(s => ({ ...s, contentHint: "detail" }))}
-                                    />
-                                </label>
-                            </div>
-                            <div className="vcd-screen-picker-hint-description">
-                                <p>
-                                    Choosing "Prefer Clarity" will result in a significantly lower framerate in exchange
-                                    for a much sharper and clearer image.
-                                </p>
-                            </div>
+                            ))}
                         </div>
                     </section>
-                    {isWindows && (
-                        <Switch
-                            value={settings.audio}
-                            onChange={checked => setSettings(s => ({ ...s, audio: checked }))}
-                            hideBorder
-                            className="vcd-screen-picker-audio"
-                        >
-                            Stream With Audio
-                        </Switch>
-                    )}
 
-                    {isLinux && (
-                        <AudioSourcePickerLinux
-                            audioSource={settings.audioSource}
-                            workaround={settings.workaround}
-                            setAudioSource={source => setSettings(s => ({ ...s, audioSource: source }))}
-                            setWorkaround={workaround => setSettings(s => ({ ...s, workaround: workaround }))}
-                        />
-                    )}
-                </Card>
-            </div>
+                    <section>
+                        <Forms.FormTitle>Frame Rate</Forms.FormTitle>
+                        <div className="vcd-screen-picker-radios">
+                            {StreamFps.map(fps => (
+                                <label className="vcd-screen-picker-radio" data-checked={settings.fps === fps}>
+                                    <Text variant="text-sm/bold">{fps}</Text>
+                                    <input
+                                        type="radio"
+                                        name="fps"
+                                        value={fps}
+                                        checked={settings.fps === fps}
+                                        onChange={() => setSettings(s => ({ ...s, fps }))}
+                                    />
+                                </label>
+                            ))}
+                        </div>
+                    </section>
+                </div>
+                <section>
+                    <Forms.FormTitle>Content Type</Forms.FormTitle>
+                    <div>
+                        <div className="vcd-screen-picker-radios">
+                            <label className="vcd-screen-picker-radio" data-checked={settings.contentHint === "motion"}>
+                                <Text variant="text-sm/bold">Prefer Smoothness</Text>
+                                <input
+                                    type="radio"
+                                    name="contenthint"
+                                    value="motion"
+                                    checked={settings.contentHint === "motion"}
+                                    onChange={() => setSettings(s => ({ ...s, contentHint: "motion" }))}
+                                />
+                            </label>
+                            <label className="vcd-screen-picker-radio" data-checked={settings.contentHint === "detail"}>
+                                <Text variant="text-sm/bold">Prefer Clarity</Text>
+                                <input
+                                    type="radio"
+                                    name="contenthint"
+                                    value="detail"
+                                    checked={settings.contentHint === "detail"}
+                                    onChange={() => setSettings(s => ({ ...s, contentHint: "detail" }))}
+                                />
+                            </label>
+                        </div>
+                        <div className="vcd-screen-picker-hint-description">
+                            <p>
+                                Choosing "Prefer Clarity" will result in a significantly lower framerate in exchange for
+                                a much sharper and clearer image.
+                            </p>
+                        </div>
+                    </div>
+                </section>
+                {isWindows && (
+                    <Switch
+                        value={settings.audio}
+                        onChange={checked => setSettings(s => ({ ...s, audio: checked }))}
+                        hideBorder
+                        className="vcd-screen-picker-audio"
+                    >
+                        Stream With Audio
+                    </Switch>
+                )}
+
+                {isLinux && (
+                    <AudioSourcePickerLinux
+                        audioSource={settings.audioSource}
+                        workaround={settings.workaround}
+                        setAudioSource={source => setSettings(s => ({ ...s, audioSource: source }))}
+                        setWorkaround={workaround => setSettings(s => ({ ...s, workaround: workaround }))}
+                    />
+                )}
+            </Card>
         </div>
     );
 }
@@ -381,13 +385,9 @@ function ModalComponent({
         contentHint: "motion",
         audio: true
     });
-    const newModalProps = {
-        ...modalProps,
-        size: "large"
-    };
 
     return (
-        <Modals.ModalRoot {...newModalProps}>
+        <Modals.ModalRoot {...modalProps}>
             <Modals.ModalHeader className="vcd-screen-picker-header">
                 <Forms.FormTitle tag="h2">ScreenShare</Forms.FormTitle>
                 <Modals.ModalCloseButton onClick={close} />
@@ -424,7 +424,8 @@ function ModalComponent({
                                 const newConstraints = {
                                     ...constraints,
                                     frameRate,
-                                    advanced: [{ width: width, height: height }]
+                                    advanced: [{ width: width, height: height }],
+                                    resizeMode: "none"
                                 };
                                 track.applyConstraints(newConstraints).then(() => {
                                     console.log("Applied constraints from ScreenSharePicker successfully.");
diff --git a/src/renderer/components/screenSharePicker.css b/src/renderer/components/screenSharePicker.css
index 6c78139..1ef60f2 100644
--- a/src/renderer/components/screenSharePicker.css
+++ b/src/renderer/components/screenSharePicker.css
@@ -1,13 +1,3 @@
-.vcd-screen-picker {
-    display: flex;
-    flex-direction: row;
-}
-
-.vcd-screen-picker-content {
-    margin: 1em;
-    align-self: center;
-}
-
 .vcd-screen-picker-modal {
     padding: 1em;
 }
@@ -139,6 +129,11 @@
     width: 100%;
     font-weight: 400;
 }
-.vcd-screen-picker-hints {
-    white-space: nowrap;
+
+.vcd-screen-picker-preview-switch {
+    margin-top: 1em;
+}
+
+.not-visible {
+    display: none;
 }
\ No newline at end of file
diff --git a/src/renderer/patches/screenShareFixes.ts b/src/renderer/patches/screenShareFixes.ts
index c66f366..d238a34 100644
--- a/src/renderer/patches/screenShareFixes.ts
+++ b/src/renderer/patches/screenShareFixes.ts
@@ -34,7 +34,8 @@ if (isLinux) {
         const newConstraints = {
             ...constraints,
             frameRate,
-            advanced: [{ width: width, height: height }]
+            advanced: [{ width: width, height: height }],
+            resizeMode: "none"
         };
 
         track.applyConstraints(newConstraints).then(() => {