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

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

@ -181,17 +181,31 @@ 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>
<Card className="vcd-screen-picker-card vcd-screen-picker-preview"> <Switch
<img src={thumb} alt="" /> onChange={setVisible}
value={notVisible ?? false}
className="vcd-screen-picker-audio vcd-screen-picker-preview-switch"
>
Show Preview
</Switch>
<Card
className={
notVisible
? "vcd-screen-picker-card vcd-screen-picker-preview not-visible"
: "vcd-screen-picker-card vcd-screen-picker-preview"
}
>
<img src={thumb} alt="stream preview" />
<Text variant="text-sm/normal">{source.name}</Text> <Text variant="text-sm/normal">{source.name}</Text>
</Card> </Card>
</div>
<div className="vcd-screen-picker-content">
<Forms.FormTitle>Stream Settings</Forms.FormTitle> <Forms.FormTitle>Stream Settings</Forms.FormTitle>
<Card className="vcd-screen-picker-card"> <Card className="vcd-screen-picker-card">
<div className="vcd-screen-picker-quality"> <div className="vcd-screen-picker-quality">
@ -199,10 +213,7 @@ function StreamSettings({
<Forms.FormTitle>Resolution</Forms.FormTitle> <Forms.FormTitle>Resolution</Forms.FormTitle>
<div className="vcd-screen-picker-radios"> <div className="vcd-screen-picker-radios">
{StreamResolutions.map(res => ( {StreamResolutions.map(res => (
<label <label className="vcd-screen-picker-radio" data-checked={settings.resolution === res}>
className="vcd-screen-picker-radio"
data-checked={settings.resolution === res}
>
<Text variant="text-sm/bold">{res}</Text> <Text variant="text-sm/bold">{res}</Text>
<input <input
type="radio" type="radio"
@ -237,11 +248,8 @@ function StreamSettings({
<section> <section>
<Forms.FormTitle>Content Type</Forms.FormTitle> <Forms.FormTitle>Content Type</Forms.FormTitle>
<div> <div>
<div className="vcd-screen-picker-radios vcd-screen-picker-hints"> <div className="vcd-screen-picker-radios">
<label <label className="vcd-screen-picker-radio" data-checked={settings.contentHint === "motion"}>
className="vcd-screen-picker-radio"
data-checked={settings.contentHint === "motion"}
>
<Text variant="text-sm/bold">Prefer Smoothness</Text> <Text variant="text-sm/bold">Prefer Smoothness</Text>
<input <input
type="radio" type="radio"
@ -251,10 +259,7 @@ function StreamSettings({
onChange={() => setSettings(s => ({ ...s, contentHint: "motion" }))} onChange={() => setSettings(s => ({ ...s, contentHint: "motion" }))}
/> />
</label> </label>
<label <label className="vcd-screen-picker-radio" data-checked={settings.contentHint === "detail"}>
className="vcd-screen-picker-radio"
data-checked={settings.contentHint === "detail"}
>
<Text variant="text-sm/bold">Prefer Clarity</Text> <Text variant="text-sm/bold">Prefer Clarity</Text>
<input <input
type="radio" type="radio"
@ -267,8 +272,8 @@ function StreamSettings({
</div> </div>
<div className="vcd-screen-picker-hint-description"> <div className="vcd-screen-picker-hint-description">
<p> <p>
Choosing "Prefer Clarity" will result in a significantly lower framerate in exchange Choosing "Prefer Clarity" will result in a significantly lower framerate in exchange for
for a much sharper and clearer image. a much sharper and clearer image.
</p> </p>
</div> </div>
</div> </div>
@ -294,7 +299,6 @@ function StreamSettings({
)} )}
</Card> </Card>
</div> </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(() => {