migrate to new modal api

src/renderer/components/ScreenSharePicker.tsx

@@ -8,7 +8,6 @@ import "./screenSharePicker.css";
 
 import { classNameFactory } from "@vencord/types/api/Styles";
 import {
-    BaseText,
     Button,
     Card,
     CogWheel,
@@ -20,18 +19,18 @@ import {
     RestartIcon,
     Span
 } from "@vencord/types/components";
+import { Logger, useAwaiter, useForceUpdater } from "@vencord/types/utils";
+import { onceReady } from "@vencord/types/webpack";
 import {
     closeModal,
-    Logger,
-    ModalCloseButton,
-    Modals,
-    ModalSize,
+    FluxDispatcher,
+    MediaEngineStore,
+    Modal,
     openModal,
-    useAwaiter,
-    useForceUpdater
-} from "@vencord/types/utils";
-import { onceReady } from "@vencord/types/webpack";
-import { FluxDispatcher, MediaEngineStore, Select, UserStore, useState } from "@vencord/types/webpack/common";
+    Select,
+    UserStore,
+    useState
+} from "@vencord/types/webpack/common";
 import { Node } from "@vencord/venmic";
 import type { Dispatch, SetStateAction } from "react";
 import { addPatch } from "renderer/patches/shared";
@@ -220,15 +219,13 @@ function AudioSettingsModal({
     const Settings = useSettings();
 
     return (
-        <Modals.ModalRoot {...modalProps} size={ModalSize.MEDIUM}>
-            <Modals.ModalHeader className={cl("header")}>
-                <BaseText size="lg" weight="semibold" tag="h3" style={{ flexGrow: 1 }}>
-                    Audio Settings
-                </BaseText>
-                <ModalCloseButton onClick={close} />
-            </Modals.ModalHeader>
-
-            <Modals.ModalContent className={cl("modal", "venmic-settings")}>
+        <Modal
+            {...modalProps}
+            size="lg"
+            title="Audio Settings"
+            actions={[{ text: "Back", variant: "secondary", onClick: close }]}
+        >
+            <div className={cl("venmic-settings")}>
                 <FormSwitch
                     title="Initial Mute"
                     description="Fix an initial audio spike caused by chromium."
@@ -319,13 +316,8 @@ function AudioSettingsModal({
                     value={Settings.audio?.deviceSelect ?? false}
                     disabled={Settings.audio?.ignoreDevices}
                 />
-            </Modals.ModalContent>
-            <Modals.ModalFooter className={cl("footer")}>
-                <Button variant="secondary" onClick={close}>
-                    Back
-                </Button>
-            </Modals.ModalFooter>
-        </Modals.ModalRoot>
+            </div>
+        </Modal>
     );
 }
 
@@ -723,101 +715,91 @@ function ModalComponent({
         frameRate: "30"
     });
 
+    function handleGoLive() {
+        currentSettings = settings;
+        try {
+            const frameRate = Number(qualitySettings.frameRate);
+            const height = Number(qualitySettings.resolution);
+            const width = Math.round(height * (16 / 9));
+
+            const conn = [...MediaEngineStore.getMediaEngine().connections].find(
+                connection => connection.streamUserId === UserStore.getCurrentUser().id
+            );
+
+            if (conn) {
+                conn.videoStreamParameters[0].maxFrameRate = frameRate;
+                conn.videoStreamParameters[0].maxResolution ??= { width: 0, height: 0 };
+                conn.videoStreamParameters[0].maxResolution.height = height;
+                conn.videoStreamParameters[0].maxResolution.width = width;
+            }
+
+            submit({
+                id: selected!,
+                ...settings
+            });
+
+            setTimeout(async () => {
+                const conn = [...MediaEngineStore.getMediaEngine().connections].find(
+                    connection => connection.streamUserId === UserStore.getCurrentUser().id
+                );
+                if (!conn) return;
+
+                // @ts-expect-error incorrect type
+                const track = conn.input.stream.getVideoTracks()[0];
+
+                const constraints = {
+                    ...track.getConstraints(),
+                    frameRate: { min: frameRate, ideal: frameRate },
+                    width: { min: 640, ideal: width, max: width },
+                    height: { min: 480, ideal: height, max: height },
+                    advanced: [{ width: width, height: height }],
+                    resizeMode: "none"
+                };
+
+                try {
+                    await track.applyConstraints(constraints);
+
+                    logger.info("Applied constraints successfully. New constraints:", track.getConstraints());
+                } catch (e) {
+                    logger.error("Failed to apply constraints.", e);
+                }
+            }, 100);
+        } catch (error) {
+            logger.error("Error while submitting stream.", error);
+        }
+
+        close();
+    }
+
+    const showGoBack = selected && !skipPicker;
     return (
-        <Modals.ModalRoot {...modalProps} size={ModalSize.MEDIUM}>
-            <Modals.ModalHeader className={cl("header")}>
-                <BaseText size="lg" weight="semibold" tag="h3" style={{ flexGrow: 1 }}>
-                    Screen Share Picker
-                </BaseText>
-                <ModalCloseButton onClick={close} />
-            </Modals.ModalHeader>
-            <Modals.ModalContent className={cl("modal")}>
-                {!selected ? (
-                    <ScreenPicker screens={screens} chooseScreen={setSelected} />
-                ) : (
-                    <StreamSettingsUi
-                        source={screens.find(s => s.id === selected)!}
-                        settings={settings}
-                        setSettings={setSettings}
-                        skipPicker={skipPicker}
-                    />
-                )}
-            </Modals.ModalContent>
-            <Modals.ModalFooter className={cl("footer")}>
-                <Button
-                    disabled={!selected}
-                    onClick={() => {
-                        currentSettings = settings;
-                        try {
-                            const frameRate = Number(qualitySettings.frameRate);
-                            const height = Number(qualitySettings.resolution);
-                            const width = Math.round(height * (16 / 9));
-
-                            const conn = [...MediaEngineStore.getMediaEngine().connections].find(
-                                connection => connection.streamUserId === UserStore.getCurrentUser().id
-                            );
-
-                            if (conn) {
-                                conn.videoStreamParameters[0].maxFrameRate = frameRate;
-                                conn.videoStreamParameters[0].maxResolution ??= { width: 0, height: 0 };
-                                conn.videoStreamParameters[0].maxResolution.height = height;
-                                conn.videoStreamParameters[0].maxResolution.width = width;
-                            }
-
-                            submit({
-                                id: selected!,
-                                ...settings
-                            });
-
-                            setTimeout(async () => {
-                                const conn = [...MediaEngineStore.getMediaEngine().connections].find(
-                                    connection => connection.streamUserId === UserStore.getCurrentUser().id
-                                );
-                                if (!conn) return;
-
-                                // @ts-expect-error incorrect type
-                                const track = conn.input.stream.getVideoTracks()[0];
-
-                                const constraints = {
-                                    ...track.getConstraints(),
-                                    frameRate: { min: frameRate, ideal: frameRate },
-                                    width: { min: 640, ideal: width, max: width },
-                                    height: { min: 480, ideal: height, max: height },
-                                    advanced: [{ width: width, height: height }],
-                                    resizeMode: "none"
-                                };
-
-                                try {
-                                    await track.applyConstraints(constraints);
-
-                                    logger.info(
-                                        "Applied constraints successfully. New constraints:",
-                                        track.getConstraints()
-                                    );
-                                } catch (e) {
-                                    logger.error("Failed to apply constraints.", e);
-                                }
-                            }, 100);
-                        } catch (error) {
-                            logger.error("Error while submitting stream.", error);
-                        }
-
-                        close();
-                    }}
-                >
-                    Go Live
-                </Button>
-
-                {selected && !skipPicker ? (
-                    <Button variant="secondary" onClick={() => setSelected(void 0)}>
-                        Back
-                    </Button>
-                ) : (
-                    <Button variant="secondary" onClick={close}>
-                        Cancel
-                    </Button>
-                )}
-            </Modals.ModalFooter>
-        </Modals.ModalRoot>
+        <Modal
+            {...modalProps}
+            size="lg"
+            title="Screen Share Picker"
+            actions={[
+                {
+                    text: showGoBack ? "Back" : "Cancel",
+                    variant: "secondary",
+                    onClick: () => (showGoBack ? setSelected(void 0) : close())
+                },
+                {
+                    text: "Go Live",
+                    disabled: !selected,
+                    onClick: handleGoLive
+                }
+            ]}
+        >
+            {!selected ? (
+                <ScreenPicker screens={screens} chooseScreen={setSelected} />
+            ) : (
+                <StreamSettingsUi
+                    source={screens.find(s => s.id === selected)!}
+                    settings={settings}
+                    setSettings={setSettings}
+                    skipPicker={skipPicker}
+                />
+            )}
+        </Modal>
     );
 }

src/renderer/components/screenSharePicker.css

@@ -1,7 +1,3 @@
-.vcd-screen-picker-modal {
-    padding: 1em;
-}
-
 .vcd-screen-picker-header-close-button {
     margin-left: auto;
 }

src/renderer/components/settings/DeveloperOptions.tsx

@@ -4,18 +4,9 @@
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
-import { BaseText, Button, Heading, Paragraph, TextButton } from "@vencord/types/components";
-import {
-    Margins,
-    ModalCloseButton,
-    ModalContent,
-    ModalHeader,
-    ModalRoot,
-    ModalSize,
-    openModal,
-    useForceUpdater
-} from "@vencord/types/utils";
-import { Toasts } from "@vencord/types/webpack/common";
+import { Button, Heading, Paragraph, TextButton } from "@vencord/types/components";
+import { Margins, useForceUpdater } from "@vencord/types/utils";
+import { Modal, openModal, Toasts } from "@vencord/types/webpack/common";
 import { Settings } from "shared/settings";
 
 import { cl, SettingsComponent } from "./Settings";
@@ -26,31 +17,20 @@ export const DeveloperOptionsButton: SettingsComponent = ({ settings }) => {
 
 function openDeveloperOptionsModal(settings: Settings) {
     openModal(props => (
-        <ModalRoot {...props} size={ModalSize.MEDIUM}>
-            <ModalHeader>
-                <BaseText size="lg" weight="semibold" tag="h3" style={{ flexGrow: 1 }}>
-                    Vesktop Developer Options
-                </BaseText>
-                <ModalCloseButton onClick={props.onClose} />
-            </ModalHeader>
+        <Modal {...props} size="lg" title="Vesktop Developer Options">
+            <Heading tag="h4">Vencord Location</Heading>
+            <VencordLocationPicker settings={settings} />
 
-            <ModalContent>
-                <div style={{ padding: "1em 0" }}>
-                    <Heading tag="h5">Vencord Location</Heading>
-                    <VencordLocationPicker settings={settings} />
-
-                    <Heading tag="h5" className={Margins.top16}>
-                        Debugging
-                    </Heading>
-                    <div className={cl("button-grid")}>
-                        <Button onClick={() => VesktopNative.debug.launchGpu()}>Open chrome://gpu</Button>
-                        <Button onClick={() => VesktopNative.debug.launchWebrtcInternals()}>
-                            Open chrome://webrtc-internals
-                        </Button>
-                    </div>
-                </div>
-            </ModalContent>
-        </ModalRoot>
+            <Heading tag="h4" className={Margins.top16}>
+                Debugging
+            </Heading>
+            <div className={cl("button-grid")}>
+                <Button onClick={() => VesktopNative.debug.launchGpu()}>Open chrome://gpu</Button>
+                <Button onClick={() => VesktopNative.debug.launchWebrtcInternals()}>
+                    Open chrome://webrtc-internals
+                </Button>
+            </div>
+        </Modal>
     ));
 }
 

src/renderer/components/settings/UserAssets.tsx

@@ -7,18 +7,8 @@
 import "./UserAssets.css";
 
 import { BaseText, Button, FormSwitch } from "@vencord/types/components";
-import {
-    Margins,
-    ModalCloseButton,
-    ModalContent,
-    ModalHeader,
-    ModalRoot,
-    ModalSize,
-    openModal,
-    wordsFromCamel,
-    wordsToTitle
-} from "@vencord/types/utils";
-import { showToast, useState } from "@vencord/types/webpack/common";
+import { Margins, wordsFromCamel, wordsToTitle } from "@vencord/types/utils";
+import { Modal, openModal, showToast, useState } from "@vencord/types/webpack/common";
 import { UserAssetType } from "main/userAssets";
 import { useSettings } from "renderer/settings";
 
@@ -32,22 +22,13 @@ export const UserAssetsButton: SettingsComponent = () => {
 
 function openAssetsModal() {
     openModal(props => (
-        <ModalRoot {...props} size={ModalSize.MEDIUM}>
-            <ModalHeader>
-                <BaseText size="lg" weight="semibold" tag="h3" style={{ flexGrow: 1 }}>
-                    User Assets
-                </BaseText>
-                <ModalCloseButton onClick={props.onClose} />
-            </ModalHeader>
-
-            <ModalContent>
-                <div className="vcd-user-assets">
-                    {CUSTOMIZABLE_ASSETS.map(asset => (
-                        <Asset key={asset} asset={asset} />
-                    ))}
-                </div>
-            </ModalContent>
-        </ModalRoot>
+        <Modal {...props} size="lg" title="User Assets">
+            <div className="vcd-user-assets">
+                {CUSTOMIZABLE_ASSETS.map(asset => (
+                    <Asset key={asset} asset={asset} />
+                ))}
+            </div>
+        </Modal>
     ));
 }