wh64/project-client
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

rebase off of latest commit

Browse source
This commit is contained in:
kaitlynkittyy 2024-04-13 21:02:47 -04:00
parent d0ff6192cb
commit a2dcb9009d
5 changed files with 150 additions and 200 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -27,7 +27,7 @@
"arrpc": "github:OpenAsar/arrpc#98879cae0565e6fce34e4cb6f544bf42c6a7e7c8" "arrpc": "github:OpenAsar/arrpc#98879cae0565e6fce34e4cb6f544bf42c6a7e7c8"
}, },
"optionalDependencies": { "optionalDependencies": {
"@vencord/venmic": "^3.3.3" "@vencord/venmic": "^3.4.1"
}, },
"devDependencies": { "devDependencies": {
"@fal-works/esbuild-plugin-global-externals": "^2.1.2", "@fal-works/esbuild-plugin-global-externals": "^2.1.2",

20
pnpm-lock.yaml
View file

@ -11,8 +11,8 @@ dependencies:
optionalDependencies: optionalDependencies:
'@vencord/venmic': '@vencord/venmic':
specifier: ^3.3.3 specifier: ^3.4.1
version: 3.3.3 version: 3.4.1
devDependencies: devDependencies:
'@fal-works/esbuild-plugin-global-externals': '@fal-works/esbuild-plugin-global-externals':
@ -1000,8 +1000,8 @@ packages:
type-fest: 3.13.1 type-fest: 3.13.1
dev: true dev: true
/@vencord/venmic@3.3.3: /@vencord/venmic@3.4.1:
resolution: {integrity: sha512-qC3fPAUtw8j5L6uV3m9BGEnKpuOAlrYeZzFgILF3bFnDNFE9ANJsYttoHt80laBU7C1Xo56tHG2vVpLBsH+sgw==} resolution: {integrity: sha512-PkMXx53nxiYBLWxiMRaBjBm8aTTJTcueKsMZ0v35TtIQ93yfuSzfCilDFLs3kYz1uQHArTaI9IGQykgmSfe/2w==}
engines: {node: '>=14.15'} engines: {node: '>=14.15'}
os: [linux] os: [linux]
requiresBuild: true requiresBuild: true
@ -1333,11 +1333,11 @@ packages:
possible-typed-array-names: 1.0.0 possible-typed-array-names: 1.0.0
dev: true dev: true
/axios@1.6.7(debug@4.3.4): /axios@1.6.8(debug@4.3.4):
resolution: {integrity: sha512-/hDJGff6/c7u0hDkvkGxR/oy6CbCs8ziCsC7SqmhjfozqiJGc8Z11wrv9z9lYfY4K8l+H9TpjcMDX0xOZmx+RA==} resolution: {integrity: sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==}
requiresBuild: true requiresBuild: true
dependencies: dependencies:
follow-redirects: 1.15.5(debug@4.3.4) follow-redirects: 1.15.6(debug@4.3.4)
form-data: 4.0.0 form-data: 4.0.0
proxy-from-env: 1.1.0 proxy-from-env: 1.1.0
transitivePeerDependencies: transitivePeerDependencies:
@ -1576,7 +1576,7 @@ packages:
hasBin: true hasBin: true
requiresBuild: true requiresBuild: true
dependencies: dependencies:
axios: 1.6.7(debug@4.3.4) axios: 1.6.8(debug@4.3.4)
debug: 4.3.4 debug: 4.3.4
fs-extra: 11.2.0 fs-extra: 11.2.0
lodash.isplainobject: 4.0.6 lodash.isplainobject: 4.0.6
@ -2540,8 +2540,8 @@ packages:
resolution: {integrity: sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==} resolution: {integrity: sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==}
dev: true dev: true
/follow-redirects@1.15.5(debug@4.3.4): /follow-redirects@1.15.6(debug@4.3.4):
resolution: {integrity: sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==} resolution: {integrity: sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==}
engines: {node: '>=4.0'} engines: {node: '>=4.0'}
requiresBuild: true requiresBuild: true
peerDependencies: peerDependencies:

3
src/preload/VesktopNative.ts
View file

@ -64,7 +64,8 @@ export const VesktopNative = {
list: () => list: () =>
invoke<{ ok: false; isGlibcxxToOld: boolean } | { ok: true; targets: string[] }>(IpcEvents.VIRT_MIC_LIST), invoke<{ ok: false; isGlibcxxToOld: boolean } | { ok: true; targets: string[] }>(IpcEvents.VIRT_MIC_LIST),
start: (targets: string[], workaround?: boolean) => invoke<void>(IpcEvents.VIRT_MIC_START, targets, workaround), start: (targets: string[], workaround?: boolean) => invoke<void>(IpcEvents.VIRT_MIC_START, targets, workaround),
startSystem: (workaround?: boolean) => invoke<void>(IpcEvents.VIRT_MIC_START_SYSTEM, workaround), startSystem: (workaround?: boolean, onlyDefaultSpeakers?: boolean) =>
invoke<void>(IpcEvents.VIRT_MIC_START_SYSTEM, workaround, onlyDefaultSpeakers),
stop: () => invoke<void>(IpcEvents.VIRT_MIC_STOP) stop: () => invoke<void>(IpcEvents.VIRT_MIC_STOP)
}, },
arrpc: { arrpc: {

287
src/renderer/components/ScreenSharePicker.tsx
View file

@ -6,7 +6,7 @@
import "./screenSharePicker.css"; import "./screenSharePicker.css";
import { closeModal, Margins, Modals, openModal, useAwaiter } from "@vencord/types/utils"; import { closeModal, Margins, Modals, ModalSize, openModal, useAwaiter } from "@vencord/types/utils";
import { findStoreLazy, onceReady } from "@vencord/types/webpack"; import { findStoreLazy, onceReady } from "@vencord/types/webpack";
import { import {
Button, Button,
@ -16,7 +16,6 @@ import {
Select, Select,
Switch, Switch,
Text, Text,
Tooltip,
UserStore, UserStore,
useState useState
} from "@vencord/types/webpack/common"; } from "@vencord/types/webpack/common";
@ -39,6 +38,7 @@ interface StreamSettings {
audioSource?: string; audioSource?: string;
contentHint?: string; contentHint?: string;
workaround?: boolean; workaround?: boolean;
onlyDefaultSpeakers?: boolean;
} }
export interface StreamPick extends StreamSettings { export interface StreamPick extends StreamSettings {
@ -190,113 +190,63 @@ function StreamSettings({
deps: [source.id] deps: [source.id]
} }
); );
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>
<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>
<Button
color={Button.Colors.TRANSPARENT}
className="vcd-screen-picker-startbuttons"
onClick={() => {
navigator.mediaDevices.getDisplayMedia();
}}
>
Go Back
</Button>
</Card>
</div>
</section>
<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> return (
<Forms.FormTitle>Frame Rate</Forms.FormTitle> <div className="vcd-screen-picker-settings-grid">
<div className="vcd-screen-picker-radios"> <div>
{StreamFps.map(fps => ( <Forms.FormTitle>What you're streaming</Forms.FormTitle>
<label className="vcd-screen-picker-radio" data-checked={settings.fps === fps}> <Card className="vcd-screen-picker-card vcd-screen-picker-preview">
<Text variant="text-sm/bold">{fps}</Text> <img src={thumb} alt="" />
<input <Text variant="text-sm/normal">{source.name}</Text>
type="radio" </Card>
name="fps"
value={fps} <Forms.FormTitle>Stream Settings</Forms.FormTitle>
checked={settings.fps === fps}
onChange={() => setSettings(s => ({ ...s, fps }))} <Card className="vcd-screen-picker-card">
/> <div className="vcd-screen-picker-quality">
</label> <section>
))} <Forms.FormTitle>Resolution</Forms.FormTitle>
</div> <div className="vcd-screen-picker-radios">
</section> {StreamResolutions.map(res => (
</div> <label
<section> className="vcd-screen-picker-radio"
<Forms.FormTitle>Content Type</Forms.FormTitle> data-checked={settings.resolution === res}
<div> >
<div className="vcd-screen-picker-radios"> <Text variant="text-sm/bold">{res}</Text>
<label className="vcd-screen-picker-radio" data-checked={settings.contentHint === "motion"}> <input
<Text variant="text-sm/bold">Prefer Smoothness</Text> type="radio"
<input name="resolution"
type="radio" value={res}
name="contenthint" checked={settings.resolution === res}
value="motion" onChange={() => setSettings(s => ({ ...s, resolution: res }))}
checked={settings.contentHint === "motion"} />
onChange={() => setSettings(s => ({ ...s, contentHint: "motion" }))} </label>
/> ))}
</label> </div>
<label className="vcd-screen-picker-radio" data-checked={settings.contentHint === "detail"}> </section>
<Text variant="text-sm/bold">Prefer Clarity</Text>
<input <section>
type="radio" <Forms.FormTitle>Frame Rate</Forms.FormTitle>
name="contenthint" <div className="vcd-screen-picker-radios">
value="detail" {StreamFps.map(fps => (
checked={settings.contentHint === "detail"} <label className="vcd-screen-picker-radio" data-checked={settings.fps === fps}>
onChange={() => setSettings(s => ({ ...s, contentHint: "detail" }))} <Text variant="text-sm/bold">{fps}</Text>
/> <input
</label> type="radio"
</div> name="fps"
<div className="vcd-screen-picker-hint-description"> value={fps}
<p> checked={settings.fps === fps}
Choosing "Prefer Clarity" will result in a significantly lower framerate in exchange for onChange={() => setSettings(s => ({ ...s, fps }))}
a much sharper and clearer image. />
</p> </label>
</div> ))}
</div>
</section>
</div> </div>
</section> </Card>
</div>
<div>
{isWindows && ( {isWindows && (
<Switch <Switch
value={settings.audio} value={settings.audio}
@ -312,11 +262,13 @@ function StreamSettings({
<AudioSourcePickerLinux <AudioSourcePickerLinux
audioSource={settings.audioSource} audioSource={settings.audioSource}
workaround={settings.workaround} workaround={settings.workaround}
onlyDefaultSpeakers={settings.onlyDefaultSpeakers}
setAudioSource={source => setSettings(s => ({ ...s, audioSource: source }))} setAudioSource={source => setSettings(s => ({ ...s, audioSource: source }))}
setWorkaround={workaround => setSettings(s => ({ ...s, workaround: workaround }))} setWorkaround={value => setSettings(s => ({ ...s, workaround: value }))}
setOnlyDefaultSpeakers={value => setSettings(s => ({ ...s, onlyDefaultSpeakers: value }))}
/> />
)} )}
</Card> </div>
</div> </div>
); );
} }
@ -324,13 +276,17 @@ function StreamSettings({
function AudioSourcePickerLinux({ function AudioSourcePickerLinux({
audioSource, audioSource,
workaround, workaround,
onlyDefaultSpeakers,
setAudioSource, setAudioSource,
setWorkaround setWorkaround,
setOnlyDefaultSpeakers
}: { }: {
audioSource?: string; audioSource?: string;
workaround?: boolean; workaround?: boolean;
onlyDefaultSpeakers?: boolean;
setAudioSource(s: string): void; setAudioSource(s: string): void;
setWorkaround(b: boolean): void; setWorkaround(b: boolean): void;
setOnlyDefaultSpeakers(b: boolean): void;
}) { }) {
const [sources, _, loading] = useAwaiter(() => VesktopNative.virtmic.list(), { const [sources, _, loading] = useAwaiter(() => VesktopNative.virtmic.list(), {
fallbackValue: { ok: true, targets: [] } fallbackValue: { ok: true, targets: [] }
@ -338,49 +294,74 @@ function AudioSourcePickerLinux({
const allSources = sources.ok ? ["None", "Entire System", ...sources.targets] : null; const allSources = sources.ok ? ["None", "Entire System", ...sources.targets] : null;
return ( return (
<section> <>
<Forms.FormTitle>Audio</Forms.FormTitle> <Forms.FormTitle>Audio Settings</Forms.FormTitle>
{loading && <Forms.FormTitle>Loading Audio sources...</Forms.FormTitle>} <Card className="vcd-screen-picker-card">
{!sources.ok && {loading ? (
(sources.isGlibcxxToOld ? ( <Forms.FormTitle>Loading Audio Sources...</Forms.FormTitle>
<Forms.FormText>
Failed to retrieve Audio Sources because your C++ library is too old to run venmic. If you would
like to stream with Audio, see{" "}
<a href="https://gist.github.com/Vendicated/b655044ffbb16b2716095a448c6d827a" target="_blank">
this guide
</a>
</Forms.FormText>
) : ( ) : (
<Forms.FormText> <Forms.FormTitle>Audio Source</Forms.FormTitle>
Failed to retrieve Audio Sources. If you would like to stream with Audio, make sure you're using )}
Pipewire, not Pulseaudio
</Forms.FormText>
))}
{allSources && ( {!sources.ok &&
<Select (sources.isGlibcxxToOld ? (
options={allSources.map(s => ({ label: s, value: s, default: s === "None" }))} <Forms.FormText>
isSelected={s => s === audioSource} Failed to retrieve Audio Sources because your C++ library is too old to run venmic. If you
select={setAudioSource} would like to stream with Audio, see{" "}
serialize={String} <a
/> href="https://gist.github.com/Vendicated/b655044ffbb16b2716095a448c6d827a"
)} target="_blank"
>
this guide
</a>
</Forms.FormText>
) : (
<Forms.FormText>
Failed to retrieve Audio Sources. If you would like to stream with Audio, make sure you're
using Pipewire, not Pulseaudio
</Forms.FormText>
))}
<Forms.FormDivider className={Margins.top16 + " " + Margins.bottom16} /> {allSources && (
<Select
options={allSources.map(s => ({ label: s, value: s, default: s === "None" }))}
isSelected={s => s === audioSource}
select={setAudioSource}
serialize={String}
/>
)}
<Switch <Forms.FormDivider className={Margins.top16 + " " + Margins.bottom16} />
onChange={setWorkaround}
value={workaround ?? false} <Switch
note={ onChange={setWorkaround}
<> value={workaround ?? false}
Work around an issue that causes the microphone to be shared instead of the correct audio. Only note={
enable if you're experiencing this issue. <>
</> Work around an issue that causes the microphone to be shared instead of the correct audio.
} Only enable if you're experiencing this issue.
> </>
Microphone Workaround }
</Switch> >
</section> Microphone Workaround
</Switch>
<Switch
hideBorder
onChange={setOnlyDefaultSpeakers}
disabled={audioSource !== "Entire System"}
value={onlyDefaultSpeakers ?? true}
note={
<>
When sharing entire desktop audio, only share apps that play to the default speakers and
ignore apps that play to other speakers or devices.
</>
}
>
Only Default Speakers
</Switch>
</Card>
</>
); );
} }
@ -406,12 +387,11 @@ function ModalComponent({
}); });
return ( return (
<Modals.ModalRoot {...modalProps}> <Modals.ModalRoot {...modalProps} size={ModalSize.MEDIUM}>
<Modals.ModalHeader className="vcd-screen-picker-header"> <Modals.ModalHeader className="vcd-screen-picker-header">
<Forms.FormTitle tag="h2">ScreenShare</Forms.FormTitle> <Forms.FormTitle tag="h2">ScreenShare</Forms.FormTitle>
<Modals.ModalCloseButton onClick={close} /> <Modals.ModalCloseButton onClick={close} />
</Modals.ModalHeader> </Modals.ModalHeader>
<Modals.ModalContent className="vcd-screen-picker-modal"> <Modals.ModalContent className="vcd-screen-picker-modal">
{!selected ? ( {!selected ? (
<ScreenPicker screens={screens} chooseScreen={setSelected} /> <ScreenPicker screens={screens} chooseScreen={setSelected} />
@ -424,7 +404,6 @@ function ModalComponent({
/> />
)} )}
</Modals.ModalContent> </Modals.ModalContent>
<Modals.ModalFooter className="vcd-screen-picker-footer"> <Modals.ModalFooter className="vcd-screen-picker-footer">
<Button <Button
disabled={!selected} disabled={!selected}
@ -452,8 +431,6 @@ function ModalComponent({
const newConstraints = { const newConstraints = {
...constraints, ...constraints,
frameRate, frameRate,
width,
height,
advanced: [{ width: width, height: height }], advanced: [{ width: width, height: height }],
resizeMode: "none" resizeMode: "none"
}; };
@ -490,8 +467,6 @@ function ModalComponent({
const newConstraints = { const newConstraints = {
...constraints, ...constraints,
frameRate, frameRate,
width,
height,
advanced: [{ width: width, height: height }], advanced: [{ width: width, height: height }],
resizeMode: "none" resizeMode: "none"
}; };

38
src/renderer/components/screenSharePicker.css
View file

@ -11,6 +11,12 @@
gap: 1em; gap: 1em;
} }
.vcd-screen-picker-settings-grid {
gap: 1em;
display: grid;
grid-template-columns: 1fr 1fr;
}
.vcd-screen-picker-grid { .vcd-screen-picker-grid {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
@ -122,35 +128,3 @@
.vcd-screen-picker-audio { .vcd-screen-picker-audio {
margin-bottom: 0; margin-bottom: 0;
} }
.vcd-screen-picker-hint-description {
font-size: 14px;
color: var(--text-normal);
width: 100%;
font-weight: 400;
}
.vcd-screen-picker-preview-switch {
margin-top: 1em;
}
.not-visible {
display: none;
}
.vcd-screen-picker-tooltip {
background-color: transparent;
color: var(--text-normal);
font-weight: 500;
font-size: 14px;
display: flex;
justify-content: center;
}
.vcd-screen-picker-button{
background-color: var(--primary-500);
color: var(--text-normal);
font-weight: 500;
font-size: 14px;
border-radius: 3px;
}