From 976c000d7934c1e2495850890b6bdeb5be150927 Mon Sep 17 00:00:00 2001
From: kaitlynkittyy <kaitlynyaadev@kaitlynyaa.dev>
Date: Thu, 11 Apr 2024 13:41:28 -0400
Subject: [PATCH] Revert "major changes to the UI/UX of the screenshare modal"

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

diff --git a/src/renderer/components/ScreenSharePicker.tsx b/src/renderer/components/ScreenSharePicker.tsx
index e83a324..c6aa2e7 100644
--- a/src/renderer/components/ScreenSharePicker.tsx
+++ b/src/renderer/components/ScreenSharePicker.tsx
@@ -16,7 +16,6 @@ import {
     Select,
     Switch,
     Text,
-    Tooltip,
     UserStore,
     useState
 } from "@vencord/types/webpack/common";
@@ -188,31 +187,26 @@ function StreamSettings({
             deps: [source.id]
         }
     );
-    const preview = (
-        <div className="vcd-screen-picker-preview">
-            <img src={thumb} alt="stream preview" />;
-        </div>
-    );
+    const [visible, setVisible] = useState(false);
     // the source's name is not properly being displayed
     return (
         <div>
             <Forms.FormTitle>What you're streaming</Forms.FormTitle>
             <section>
-                <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>
+                <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>
             </section>
             <Forms.FormTitle>Stream Settings</Forms.FormTitle>
             <Card className="vcd-screen-picker-card">
@@ -415,34 +409,58 @@ function ModalComponent({
             </Modals.ModalContent>
 
             <Modals.ModalFooter className="vcd-screen-picker-footer">
-                <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.");
+                <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));
                             }
-                            console.log([...MediaEngineStore.getMediaEngine().connections]);
-                            try {
-                                if (conn) {
+                        } 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(conn);
                                     const track = conn.input.stream.getVideoTracks()[0];
                                     console.log(track);
@@ -465,69 +483,27 @@ 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));
-                                }
-                            } catch {
-                                console.log("No current stream.");
+                                }, 100);
                             }
-                            try {
-                                submit({
-                                    id: selected!,
-                                    ...settings
-                                });
+                        } catch {
+                            console.log("Unable to start stream.");
+                        }
 
-                                // 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());
-                                        });
+                        close();
+                    }}
+                >
+                    Go Live
+                </Button>
 
-                                        // 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
+                {selected && !skipPicker ? (
+                    <Button color={Button.Colors.TRANSPARENT} onClick={() => setSelected(void 0)}>
+                        Back
                     </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>
+                ) : (
+                    <Button color={Button.Colors.TRANSPARENT} onClick={close}>
+                        Cancel
+                    </Button>
+                )}
             </Modals.ModalFooter>
         </Modals.ModalRoot>
     );
diff --git a/src/renderer/components/screenSharePicker.css b/src/renderer/components/screenSharePicker.css
index 87db0e3..d1215c2 100644
--- a/src/renderer/components/screenSharePicker.css
+++ b/src/renderer/components/screenSharePicker.css
@@ -8,7 +8,6 @@
 
 .vcd-screen-picker-footer {
     display: flex;
-    justify-content: space-between;
     gap: 1em;
 }
 
@@ -53,16 +52,17 @@
     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,17 +130,29 @@
     font-weight: 400;
 }
 
+.vcd-screen-picker-preview-switch {
+    margin-top: 1em;
+}
+
 .not-visible {
     display: none;
 }
 
-.vcd-screen-picker-tooltip {
+.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 {
     background-color: transparent;
-    color: var(--text-normal);
+    color: var(--primary-500);
     font-weight: 500;
     font-size: 14px;
-    display: flex;
-    justify-content: center;
+    font-style: bold;
+    text-transform: uppercase;
 }
 
 .vcd-screen-picker-button{
@@ -151,23 +163,19 @@
     border-radius: 3px;
 }
 
-.vcd-screen-picker-cancel {
-    display: flex;
-    flex-wrap: nowrap;
-    flex-direction: row;
-    justify-content: space-around;
+.fade-in { 
+    animation-name: fade-in; 
+    animation-duration: .25s;
+    animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
 }
-
-.vcd-screen-picker-startbuttons {
-    margin-left: 0.5em;
-    margin-right: 0.5em;
+  
+  @keyframes fade-in {
+  0% {
+    opacity: 0;
+    transform: scale(0, 0);
 }
-
-.vcd-screen-picker-footerbuttons {
-    box-sizing: border-box;
-    margin-left: none;
-    justify-content: space-between;
-    display: flex;
-    flex-wrap: nowrap;
-    flex-direction: row;
+100% {
+    opacity: 1;
+    transform: scale(1, 1);
+    }
 }
\ No newline at end of file