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

updated some stuff and fixed window resizing breaking streams

Browse source
This commit is contained in:
kaitlynkittyy 2024-04-09 13:30:55 -04:00
parent 419bfd0fd1
commit c9b1c6592c
3 changed files with 119 additions and 122 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -181,119 +181,123 @@ function StreamSettings({
deps: [source.id] deps: [source.id]
} }
); );
const notVisible = false;
function setVisible() {
return !notVisible;
}
// the source's name is not properly being displayed // the source's name is not properly being displayed
return ( return (
<div className="vcd-screen-picker"> <div>
<div className="vcd-screen-picker-content"> <Forms.FormTitle>What you're streaming</Forms.FormTitle>
<Forms.FormTitle>What you're streaming</Forms.FormTitle> <Switch
<Card className="vcd-screen-picker-card vcd-screen-picker-preview"> onChange={setVisible}
<img src={thumb} alt="" /> value={notVisible ?? false}
<Text variant="text-sm/normal">{source.name}</Text> className="vcd-screen-picker-audio vcd-screen-picker-preview-switch"
</Card> >
</div> Show Preview
<div className="vcd-screen-picker-content"> </Switch>
<Forms.FormTitle>Stream Settings</Forms.FormTitle> <Card
<Card className="vcd-screen-picker-card"> className={
<div className="vcd-screen-picker-quality"> notVisible
<section> ? "vcd-screen-picker-card vcd-screen-picker-preview not-visible"
<Forms.FormTitle>Resolution</Forms.FormTitle> : "vcd-screen-picker-card vcd-screen-picker-preview"
<div className="vcd-screen-picker-radios"> }
{StreamResolutions.map(res => ( >
<label <img src={thumb} alt="stream preview" />
className="vcd-screen-picker-radio" <Text variant="text-sm/normal">{source.name}</Text>
data-checked={settings.resolution === res} </Card>
> <Forms.FormTitle>Stream Settings</Forms.FormTitle>
<Text variant="text-sm/bold">{res}</Text> <Card className="vcd-screen-picker-card">
<input <div className="vcd-screen-picker-quality">
type="radio"
name="resolution"
value={res}
checked={settings.resolution === res}
onChange={() => setSettings(s => ({ ...s, resolution: res }))}
/>
</label>
))}
</div>
</section>
<section>
<Forms.FormTitle>Frame Rate</Forms.FormTitle>
<div className="vcd-screen-picker-radios">
{StreamFps.map(fps => (
<label className="vcd-screen-picker-radio" data-checked={settings.fps === fps}>
<Text variant="text-sm/bold">{fps}</Text>
<input
type="radio"
name="fps"
value={fps}
checked={settings.fps === fps}
onChange={() => setSettings(s => ({ ...s, fps }))}
/>
</label>
))}
</div>
</section>
</div>
<section> <section>
<Forms.FormTitle>Content Type</Forms.FormTitle> <Forms.FormTitle>Resolution</Forms.FormTitle>
<div> <div className="vcd-screen-picker-radios">
<div className="vcd-screen-picker-radios vcd-screen-picker-hints"> {StreamResolutions.map(res => (
<label <label className="vcd-screen-picker-radio" data-checked={settings.resolution === res}>
className="vcd-screen-picker-radio" <Text variant="text-sm/bold">{res}</Text>
data-checked={settings.contentHint === "motion"}
>
<Text variant="text-sm/bold">Prefer Smoothness</Text>
<input <input
type="radio" type="radio"
name="contenthint" name="resolution"
value="motion" value={res}
checked={settings.contentHint === "motion"} checked={settings.resolution === res}
onChange={() => setSettings(s => ({ ...s, contentHint: "motion" }))} onChange={() => setSettings(s => ({ ...s, resolution: res }))}
/> />
</label> </label>
<label ))}
className="vcd-screen-picker-radio"
data-checked={settings.contentHint === "detail"}
>
<Text variant="text-sm/bold">Prefer Clarity</Text>
<input
type="radio"
name="contenthint"
value="detail"
checked={settings.contentHint === "detail"}
onChange={() => setSettings(s => ({ ...s, contentHint: "detail" }))}
/>
</label>
</div>
<div className="vcd-screen-picker-hint-description">
<p>
Choosing "Prefer Clarity" will result in a significantly lower framerate in exchange
for a much sharper and clearer image.
</p>
</div>
</div> </div>
</section> </section>
{isWindows && (
<Switch
value={settings.audio}
onChange={checked => setSettings(s => ({ ...s, audio: checked }))}
hideBorder
className="vcd-screen-picker-audio"
>
Stream With Audio
</Switch>
)}
{isLinux && ( <section>
<AudioSourcePickerLinux <Forms.FormTitle>Frame Rate</Forms.FormTitle>
audioSource={settings.audioSource} <div className="vcd-screen-picker-radios">
workaround={settings.workaround} {StreamFps.map(fps => (
setAudioSource={source => setSettings(s => ({ ...s, audioSource: source }))} <label className="vcd-screen-picker-radio" data-checked={settings.fps === fps}>
setWorkaround={workaround => setSettings(s => ({ ...s, workaround: workaround }))} <Text variant="text-sm/bold">{fps}</Text>
/> <input
)} type="radio"
</Card> name="fps"
</div> value={fps}
checked={settings.fps === fps}
onChange={() => setSettings(s => ({ ...s, fps }))}
/>
</label>
))}
</div>
</section>
</div>
<section>
<Forms.FormTitle>Content Type</Forms.FormTitle>
<div>
<div className="vcd-screen-picker-radios">
<label className="vcd-screen-picker-radio" data-checked={settings.contentHint === "motion"}>
<Text variant="text-sm/bold">Prefer Smoothness</Text>
<input
type="radio"
name="contenthint"
value="motion"
checked={settings.contentHint === "motion"}
onChange={() => setSettings(s => ({ ...s, contentHint: "motion" }))}
/>
</label>
<label className="vcd-screen-picker-radio" data-checked={settings.contentHint === "detail"}>
<Text variant="text-sm/bold">Prefer Clarity</Text>
<input
type="radio"
name="contenthint"
value="detail"
checked={settings.contentHint === "detail"}
onChange={() => setSettings(s => ({ ...s, contentHint: "detail" }))}
/>
</label>
</div>
<div className="vcd-screen-picker-hint-description">
<p>
Choosing "Prefer Clarity" will result in a significantly lower framerate in exchange for
a much sharper and clearer image.
</p>
</div>
</div>
</section>
{isWindows && (
<Switch
value={settings.audio}
onChange={checked => setSettings(s => ({ ...s, audio: checked }))}
hideBorder
className="vcd-screen-picker-audio"
>
Stream With Audio
</Switch>
)}
{isLinux && (
<AudioSourcePickerLinux
audioSource={settings.audioSource}
workaround={settings.workaround}
setAudioSource={source => setSettings(s => ({ ...s, audioSource: source }))}
setWorkaround={workaround => setSettings(s => ({ ...s, workaround: workaround }))}
/>
)}
</Card>
</div> </div>
); );
} }
@ -381,13 +385,9 @@ function ModalComponent({
contentHint: "motion", contentHint: "motion",
audio: true audio: true
}); });
const newModalProps = {
...modalProps,
size: "large"
};
return ( return (
<Modals.ModalRoot {...newModalProps}> <Modals.ModalRoot {...modalProps}>
<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} />
@ -424,7 +424,8 @@ function ModalComponent({
const newConstraints = { const newConstraints = {
...constraints, ...constraints,
frameRate, frameRate,
advanced: [{ width: width, height: height }] advanced: [{ width: width, height: height }],
resizeMode: "none"
}; };
track.applyConstraints(newConstraints).then(() => { track.applyConstraints(newConstraints).then(() => {
console.log("Applied constraints from ScreenSharePicker successfully."); console.log("Applied constraints from ScreenSharePicker successfully.");

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

@ -1,13 +1,3 @@
.vcd-screen-picker {
display: flex;
flex-direction: row;
}
.vcd-screen-picker-content {
margin: 1em;
align-self: center;
}
.vcd-screen-picker-modal { .vcd-screen-picker-modal {
padding: 1em; padding: 1em;
} }
@ -139,6 +129,11 @@
width: 100%; width: 100%;
font-weight: 400; font-weight: 400;
} }
.vcd-screen-picker-hints {
white-space: nowrap; .vcd-screen-picker-preview-switch {
margin-top: 1em;
}
.not-visible {
display: none;
} }

3
src/renderer/patches/screenShareFixes.ts
View file

@ -34,7 +34,8 @@ if (isLinux) {
const newConstraints = { const newConstraints = {
...constraints, ...constraints,
frameRate, frameRate,
advanced: [{ width: width, height: height }] advanced: [{ width: width, height: height }],
resizeMode: "none"
}; };
track.applyConstraints(newConstraints).then(() => { track.applyConstraints(newConstraints).then(() => {