zib/Vesktop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

migrate to new modal api

Browse Source
This commit is contained in:
Vendicated
2026-08-17 02:40:16 +02:00
parent 1c9f6871c2
commit 04e902705e
4 changed files with 128 additions and 189 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/components/ScreenSharePicker.tsx
+103 -121
View File
@@ -8,7 +8,6 @@ import "./screenSharePicker.css";
import { classNameFactory } from "@vencord/types/api/Styles"; import { classNameFactory } from "@vencord/types/api/Styles";
import { import {
BaseText,
Button, Button,
Card, Card,
CogWheel, CogWheel,
@@ -20,18 +19,18 @@ import {
RestartIcon, RestartIcon,
Span Span
} from "@vencord/types/components"; } from "@vencord/types/components";
import { Logger, useAwaiter, useForceUpdater } from "@vencord/types/utils";
import { onceReady } from "@vencord/types/webpack";
import { import {
closeModal, closeModal,
Logger, FluxDispatcher,
ModalCloseButton, MediaEngineStore,
Modals, Modal,
ModalSize,
openModal, openModal,
useAwaiter, Select,
useForceUpdater UserStore,
} from "@vencord/types/utils"; useState
import { onceReady } from "@vencord/types/webpack"; } from "@vencord/types/webpack/common";
import { FluxDispatcher, MediaEngineStore, Select, UserStore, useState } from "@vencord/types/webpack/common";
import { Node } from "@vencord/venmic"; import { Node } from "@vencord/venmic";
import type { Dispatch, SetStateAction } from "react"; import type { Dispatch, SetStateAction } from "react";
import { addPatch } from "renderer/patches/shared"; import { addPatch } from "renderer/patches/shared";
@@ -220,15 +219,13 @@ function AudioSettingsModal({
const Settings = useSettings(); const Settings = useSettings();
return ( return (
<Modals.ModalRoot {...modalProps} size={ModalSize.MEDIUM}> <Modal
<Modals.ModalHeader className={cl("header")}> {...modalProps}
<BaseText size="lg" weight="semibold" tag="h3" style={{ flexGrow: 1 }}> size="lg"
Audio Settings title="Audio Settings"
</BaseText> actions={[{ text: "Back", variant: "secondary", onClick: close }]}
<ModalCloseButton onClick={close} /> >
</Modals.ModalHeader> <div className={cl("venmic-settings")}>
<Modals.ModalContent className={cl("modal", "venmic-settings")}>
<FormSwitch <FormSwitch
title="Initial Mute" title="Initial Mute"
description="Fix an initial audio spike caused by chromium." description="Fix an initial audio spike caused by chromium."
@@ -319,13 +316,8 @@ function AudioSettingsModal({
value={Settings.audio?.deviceSelect ?? false} value={Settings.audio?.deviceSelect ?? false}
disabled={Settings.audio?.ignoreDevices} disabled={Settings.audio?.ignoreDevices}
/> />
</Modals.ModalContent> </div>
<Modals.ModalFooter className={cl("footer")}> </Modal>
<Button variant="secondary" onClick={close}>
Back
</Button>
</Modals.ModalFooter>
</Modals.ModalRoot>
); );
} }
@@ -723,101 +715,91 @@ function ModalComponent({
frameRate: "30" 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 ( return (
<Modals.ModalRoot {...modalProps} size={ModalSize.MEDIUM}> <Modal
<Modals.ModalHeader className={cl("header")}> {...modalProps}
<BaseText size="lg" weight="semibold" tag="h3" style={{ flexGrow: 1 }}> size="lg"
Screen Share Picker title="Screen Share Picker"
</BaseText> actions={[
<ModalCloseButton onClick={close} /> {
</Modals.ModalHeader> text: showGoBack ? "Back" : "Cancel",
<Modals.ModalContent className={cl("modal")}> variant: "secondary",
{!selected ? ( onClick: () => (showGoBack ? setSelected(void 0) : close())
<ScreenPicker screens={screens} chooseScreen={setSelected} /> },
) : ( {
<StreamSettingsUi text: "Go Live",
source={screens.find(s => s.id === selected)!} disabled: !selected,
settings={settings} onClick: handleGoLive
setSettings={setSettings} }
skipPicker={skipPicker} ]}
/> >
)} {!selected ? (
</Modals.ModalContent> <ScreenPicker screens={screens} chooseScreen={setSelected} />
<Modals.ModalFooter className={cl("footer")}> ) : (
<Button <StreamSettingsUi
disabled={!selected} source={screens.find(s => s.id === selected)!}
onClick={() => { settings={settings}
currentSettings = settings; setSettings={setSettings}
try { skipPicker={skipPicker}
const frameRate = Number(qualitySettings.frameRate); />
const height = Number(qualitySettings.resolution); )}
const width = Math.round(height * (16 / 9)); </Modal>
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>
); );
} }
src/renderer/components/screenSharePicker.css
-4
View File
@@ -1,7 +1,3 @@
.vcd-screen-picker-modal {
padding: 1em;
}
.vcd-screen-picker-header-close-button { .vcd-screen-picker-header-close-button {
margin-left: auto; margin-left: auto;
} }
src/renderer/components/settings/DeveloperOptions.tsx
+16 -36
View File
@@ -4,18 +4,9 @@
* SPDX-License-Identifier: GPL-3.0-or-later * SPDX-License-Identifier: GPL-3.0-or-later
*/ */
import { BaseText, Button, Heading, Paragraph, TextButton } from "@vencord/types/components"; import { Button, Heading, Paragraph, TextButton } from "@vencord/types/components";
import { import { Margins, useForceUpdater } from "@vencord/types/utils";
Margins, import { Modal, openModal, Toasts } from "@vencord/types/webpack/common";
ModalCloseButton,
ModalContent,
ModalHeader,
ModalRoot,
ModalSize,
openModal,
useForceUpdater
} from "@vencord/types/utils";
import { Toasts } from "@vencord/types/webpack/common";
import { Settings } from "shared/settings"; import { Settings } from "shared/settings";
import { cl, SettingsComponent } from "./Settings"; import { cl, SettingsComponent } from "./Settings";
@@ -26,31 +17,20 @@ export const DeveloperOptionsButton: SettingsComponent = ({ settings }) => {
function openDeveloperOptionsModal(settings: Settings) { function openDeveloperOptionsModal(settings: Settings) {
openModal(props => ( openModal(props => (
<ModalRoot {...props} size={ModalSize.MEDIUM}> <Modal {...props} size="lg" title="Vesktop Developer Options">
<ModalHeader> <Heading tag="h4">Vencord Location</Heading>
<BaseText size="lg" weight="semibold" tag="h3" style={{ flexGrow: 1 }}> <VencordLocationPicker settings={settings} />
Vesktop Developer Options
</BaseText>
<ModalCloseButton onClick={props.onClose} />
</ModalHeader>
<ModalContent> <Heading tag="h4" className={Margins.top16}>
<div style={{ padding: "1em 0" }}> Debugging
<Heading tag="h5">Vencord Location</Heading> </Heading>
<VencordLocationPicker settings={settings} /> <div className={cl("button-grid")}>
<Button onClick={() => VesktopNative.debug.launchGpu()}>Open chrome://gpu</Button>
<Heading tag="h5" className={Margins.top16}> <Button onClick={() => VesktopNative.debug.launchWebrtcInternals()}>
Debugging Open chrome://webrtc-internals
</Heading> </Button>
<div className={cl("button-grid")}> </div>
<Button onClick={() => VesktopNative.debug.launchGpu()}>Open chrome://gpu</Button> </Modal>
<Button onClick={() => VesktopNative.debug.launchWebrtcInternals()}>
Open chrome://webrtc-internals
</Button>
</div>
</div>
</ModalContent>
</ModalRoot>
)); ));
} }
src/renderer/components/settings/UserAssets.tsx
+9 -28
View File
@@ -7,18 +7,8 @@
import "./UserAssets.css"; import "./UserAssets.css";
import { BaseText, Button, FormSwitch } from "@vencord/types/components"; import { BaseText, Button, FormSwitch } from "@vencord/types/components";
import { import { Margins, wordsFromCamel, wordsToTitle } from "@vencord/types/utils";
Margins, import { Modal, openModal, showToast, useState } from "@vencord/types/webpack/common";
ModalCloseButton,
ModalContent,
ModalHeader,
ModalRoot,
ModalSize,
openModal,
wordsFromCamel,
wordsToTitle
} from "@vencord/types/utils";
import { showToast, useState } from "@vencord/types/webpack/common";
import { UserAssetType } from "main/userAssets"; import { UserAssetType } from "main/userAssets";
import { useSettings } from "renderer/settings"; import { useSettings } from "renderer/settings";
@@ -32,22 +22,13 @@ export const UserAssetsButton: SettingsComponent = () => {
function openAssetsModal() { function openAssetsModal() {
openModal(props => ( openModal(props => (
<ModalRoot {...props} size={ModalSize.MEDIUM}> <Modal {...props} size="lg" title="User Assets">
<ModalHeader> <div className="vcd-user-assets">
<BaseText size="lg" weight="semibold" tag="h3" style={{ flexGrow: 1 }}> {CUSTOMIZABLE_ASSETS.map(asset => (
User Assets <Asset key={asset} asset={asset} />
</BaseText> ))}
<ModalCloseButton onClick={props.onClose} /> </div>
</ModalHeader> </Modal>
<ModalContent>
<div className="vcd-user-assets">
{CUSTOMIZABLE_ASSETS.map(asset => (
<Asset key={asset} asset={asset} />
))}
</div>
</ModalContent>
</ModalRoot>
)); ));
} }