From 6bb5f8a1a6063f2ff0cf492760789a9d3b339424 Mon Sep 17 00:00:00 2001
From: kaitlynkittyy <kaitlynyaadev@kaitlynyaa.dev>
Date: Thu, 11 Apr 2024 13:25:55 -0400
Subject: [PATCH] major changes to the UI/UX of the screenshare modal

---
 src/renderer/components/ScreenSharePicker.tsx | 190 ++++++++++--------
 src/renderer/components/screenSharePicker.css |  62 +++---
 2 files changed, 134 insertions(+), 118 deletions(-)

diff --git a/src/renderer/components/ScreenSharePicker.tsx b/src/renderer/components/ScreenSharePicker.tsx
index c6aa2e7..e83a324 100644
--- a/src/renderer/components/ScreenSharePicker.tsx
+++ b/src/renderer/components/ScreenSharePicker.tsx
@@ -16,6 +16,7 @@ import {
     Select,
     Switch,
     Text,
+    Tooltip,
     UserStore,
     useState
 } from "@vencord/types/webpack/common";
@@ -187,26 +188,31 @@ function StreamSettings({
             deps: [source.id]
         }
     );
-    const [visible, setVisible] = useState(false);
+    const preview = (
+        <div className="vcd-screen-picker-preview">
+            <img src={thumb} alt="stream preview" />;
+        </div>
+    );
     // the source's name is not properly being displayed
     return (
         <div>
             <Forms.FormTitle>What you're streaming</Forms.FormTitle>
             <section>
-                <Card className={"vcd-screen-picker-card vcd-screen-picker-preview-buttons"}>
-                    <button
-                        className="vcd-screen-picker-subtle-button"
-                        onClick={() => {
-                            setVisible(!visible);
-                        }}
-                    >
-                        Show Preview
-                    </button>
-                    <button className="vcd-screen-picker-button">Change</button>
-                </Card>
-                <Card className={visible ? "vcd-screen-picker-card vcd-screen-picker-preview fade-in" : "not-visible"}>
-                    <img src={thumb} alt="stream preview" />
-                </Card>
+                <div className="vcd-screen-picker-tooltip">
+                    <Card className={"vcd-screen-picker-card"}>
+                        <Tooltip text={preview}>
+                            {({ onMouseEnter, onMouseLeave }) => (
+                                <div
+                                    className="vcd-screen-picker-tooltip"
+                                    onMouseEnter={onMouseEnter}
+                                    onMouseLeave={onMouseLeave}
+                                >
+                                    Show Preview
+                                </div>
+                            )}
+                        </Tooltip>
+                    </Card>
+                </div>
             </section>
             <Forms.FormTitle>Stream Settings</Forms.FormTitle>
             <Card className="vcd-screen-picker-card">
@@ -409,58 +415,34 @@ function ModalComponent({
             </Modals.ModalContent>
 
             <Modals.ModalFooter className="vcd-screen-picker-footer">
-                <Button
-                    disabled={!selected}
-                    onClick={() => {
-                        currentSettings = settings;
-                        // If there are 2 connections, the second one is the existing stream.
-                        // In that case, we patch its quality
-                        try {
-                            var conn = [...MediaEngineStore.getMediaEngine().connections].find(
-                                connection => connection.streamUserId === UserStore.getCurrentUser().id
-                            );
-                        } catch {
-                            console.log("No current stream.");
-                        }
-                        console.log([...MediaEngineStore.getMediaEngine().connections]);
-                        try {
-                            if (conn) {
-                                console.log(conn);
-                                const track = conn.input.stream.getVideoTracks()[0];
-                                console.log(track);
-                                const frameRate = Number(settings.fps);
-                                const height = Number(settings.resolution);
-                                const width = Math.round(height * (16 / 9));
-                                var constraints = track.getConstraints();
-                                const newConstraints = {
-                                    ...constraints,
-                                    frameRate,
-                                    advanced: [{ width: width, height: height }],
-                                    resizeMode: "none"
-                                };
-                                track.applyConstraints(newConstraints).then(() => {
-                                    console.log("Applied constraints from ScreenSharePicker successfully.");
-                                    console.log("New constraints:", track.getConstraints());
-                                });
-
-                                // changing stream quality description
-                                conn.videoStreamParameters[0].maxFrameRate = Number(settings.fps);
-                                conn.videoStreamParameters[0].maxResolution.height = Number(settings.resolution);
-                                conn.videoStreamParameters[0].maxResolution.width = Math.round(height * (16 / 9));
+                <div className="vcd-screen-picker-footerbuttons">
+                    <Button
+                        color={Button.Colors.TRANSPARENT}
+                        className="vcd-screen-picker-startbuttons"
+                        onClick={() => {
+                            close();
+                            navigator.mediaDevices.getDisplayMedia();
+                        }}
+                    >
+                        Go Back
+                    </Button>
+                    <Button
+                        className="vcd-screen-picker-startbuttons"
+                        disabled={!selected}
+                        onClick={() => {
+                            currentSettings = settings;
+                            // If there are 2 connections, the second one is the existing stream.
+                            // In that case, we patch its quality
+                            try {
+                                var conn = [...MediaEngineStore.getMediaEngine().connections].find(
+                                    connection => connection.streamUserId === UserStore.getCurrentUser().id
+                                );
+                            } catch {
+                                console.log("No current stream.");
                             }
-                        } catch {
-                            console.log("No current stream.");
-                        }
-                        try {
-                            submit({
-                                id: selected!,
-                                ...settings
-                            });
-
-                            // reapply contraints after some time to let discord resubmit stream
-                            // i believe there MUST be way to do it cleaner..
-                            if (conn) {
-                                setTimeout(() => {
+                            console.log([...MediaEngineStore.getMediaEngine().connections]);
+                            try {
+                                if (conn) {
                                     console.log(conn);
                                     const track = conn.input.stream.getVideoTracks()[0];
                                     console.log(track);
@@ -483,27 +465,69 @@ function ModalComponent({
                                     conn.videoStreamParameters[0].maxFrameRate = Number(settings.fps);
                                     conn.videoStreamParameters[0].maxResolution.height = Number(settings.resolution);
                                     conn.videoStreamParameters[0].maxResolution.width = Math.round(height * (16 / 9));
-                                }, 100);
+                                }
+                            } catch {
+                                console.log("No current stream.");
                             }
-                        } catch {
-                            console.log("Unable to start stream.");
-                        }
+                            try {
+                                submit({
+                                    id: selected!,
+                                    ...settings
+                                });
 
-                        close();
-                    }}
-                >
-                    Go Live
-                </Button>
+                                // reapply contraints after some time to let discord resubmit stream
+                                // i believe there MUST be way to do it cleaner..
+                                if (conn) {
+                                    setTimeout(() => {
+                                        console.log(conn);
+                                        const track = conn.input.stream.getVideoTracks()[0];
+                                        console.log(track);
+                                        const frameRate = Number(settings.fps);
+                                        const height = Number(settings.resolution);
+                                        const width = Math.round(height * (16 / 9));
+                                        var constraints = track.getConstraints();
+                                        const newConstraints = {
+                                            ...constraints,
+                                            frameRate,
+                                            advanced: [{ width: width, height: height }],
+                                            resizeMode: "none"
+                                        };
+                                        track.applyConstraints(newConstraints).then(() => {
+                                            console.log("Applied constraints from ScreenSharePicker successfully.");
+                                            console.log("New constraints:", track.getConstraints());
+                                        });
 
-                {selected && !skipPicker ? (
-                    <Button color={Button.Colors.TRANSPARENT} onClick={() => setSelected(void 0)}>
-                        Back
+                                        // changing stream quality description
+                                        conn.videoStreamParameters[0].maxFrameRate = Number(settings.fps);
+                                        conn.videoStreamParameters[0].maxResolution.height = Number(
+                                            settings.resolution
+                                        );
+                                        conn.videoStreamParameters[0].maxResolution.width = Math.round(
+                                            height * (16 / 9)
+                                        );
+                                    }, 100);
+                                }
+                            } catch {
+                                console.log("Unable to start stream.");
+                            }
+
+                            close();
+                        }}
+                    >
+                        Go Live
                     </Button>
-                ) : (
-                    <Button color={Button.Colors.TRANSPARENT} onClick={close}>
-                        Cancel
-                    </Button>
-                )}
+                </div>
+                <div className="vcd-screen-picker-cancel">
+                    {selected && !skipPicker ? (
+                        <Button color={Button.Colors.TRANSPARENT} onClick={() => setSelected(void 0)}>
+                            Back
+                        </Button>
+                    ) : (
+                        <Button color={Button.Colors.TRANSPARENT} onClick={close}>
+                            Cancel
+                        </Button>
+                    )}
+                </div>
             </Modals.ModalFooter>
         </Modals.ModalRoot>
     );
diff --git a/src/renderer/components/screenSharePicker.css b/src/renderer/components/screenSharePicker.css
index d1215c2..87db0e3 100644
--- a/src/renderer/components/screenSharePicker.css
+++ b/src/renderer/components/screenSharePicker.css
@@ -8,6 +8,7 @@
 
 .vcd-screen-picker-footer {
     display: flex;
+    justify-content: space-between;
     gap: 1em;
 }
 
@@ -52,17 +53,16 @@
     box-sizing: border-box;
 }
 
-.vcd-screen-picker-preview img {
-    width: 100%;
-    margin-bottom: 0.5em;
-}
-
 .vcd-screen-picker-preview {
     display: flex;
-    flex-direction: column;
     justify-content: center;
     align-items: center;
     margin-bottom: 1em;
+    top: 105%;
+}
+
+.vcd-screen-picker-preview img {
+    width: 50%;
 }
 
 .vcd-screen-picker-radio input {
@@ -130,29 +130,17 @@
     font-weight: 400;
 }
 
-.vcd-screen-picker-preview-switch {
-    margin-top: 1em;
-}
-
 .not-visible {
     display: none;
 }
 
-.vcd-screen-picker-preview-buttons {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    background-color: var(--background-secondary);
-    margin-bottom: 1em;
-}
-
-.vcd-screen-picker-subtle-button {
+.vcd-screen-picker-tooltip {
     background-color: transparent;
-    color: var(--primary-500);
+    color: var(--text-normal);
     font-weight: 500;
     font-size: 14px;
-    font-style: bold;
-    text-transform: uppercase;
+    display: flex;
+    justify-content: center;
 }
 
 .vcd-screen-picker-button{
@@ -163,19 +151,23 @@
     border-radius: 3px;
 }
 
-.fade-in { 
-    animation-name: fade-in; 
-    animation-duration: .25s;
-    animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
+.vcd-screen-picker-cancel {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: row;
+    justify-content: space-around;
 }
-  
-  @keyframes fade-in {
-  0% {
-    opacity: 0;
-    transform: scale(0, 0);
+
+.vcd-screen-picker-startbuttons {
+    margin-left: 0.5em;
+    margin-right: 0.5em;
 }
-100% {
-    opacity: 1;
-    transform: scale(1, 1);
-    }
+
+.vcd-screen-picker-footerbuttons {
+    box-sizing: border-box;
+    margin-left: none;
+    justify-content: space-between;
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: row;
 }
\ No newline at end of file