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

begin reworking screenshare modal to properly fit all elements

Browse source
This commit is contained in:
kaitlynkittyy 2024-04-08 23:40:24 -04:00
parent c9229d7cc1
commit 419bfd0fd1
2 changed files with 128 additions and 100 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -183,106 +183,117 @@ function StreamSettings({
); );
// the source's name is not properly being displayed // the source's name is not properly being displayed
return ( return (
<div> <div className="vcd-screen-picker">
<Forms.FormTitle>What you're streaming</Forms.FormTitle> <div className="vcd-screen-picker-content">
<Card className="vcd-screen-picker-card vcd-screen-picker-preview"> <Forms.FormTitle>What you're streaming</Forms.FormTitle>
<img src={thumb} alt="" /> <Card className="vcd-screen-picker-card vcd-screen-picker-preview">
<Text variant="text-sm/normal">{source.name}</Text> <img src={thumb} alt="" />
</Card> <Text variant="text-sm/normal">{source.name}</Text>
</Card>
</div>
<div className="vcd-screen-picker-content">
<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>
<Forms.FormTitle>Stream Settings</Forms.FormTitle> <section>
<Forms.FormTitle>Frame Rate</Forms.FormTitle>
<Card className="vcd-screen-picker-card"> <div className="vcd-screen-picker-radios">
<div className="vcd-screen-picker-quality"> {StreamFps.map(fps => (
<section> <label className="vcd-screen-picker-radio" data-checked={settings.fps === fps}>
<Forms.FormTitle>Resolution</Forms.FormTitle> <Text variant="text-sm/bold">{fps}</Text>
<div className="vcd-screen-picker-radios"> <input
{StreamResolutions.map(res => ( type="radio"
<label className="vcd-screen-picker-radio" data-checked={settings.resolution === res}> name="fps"
<Text variant="text-sm/bold">{res}</Text> value={fps}
<input checked={settings.fps === fps}
type="radio" onChange={() => setSettings(s => ({ ...s, fps }))}
name="resolution" />
value={res} </label>
checked={settings.resolution === res} ))}
onChange={() => setSettings(s => ({ ...s, resolution: res }))} </div>
/> </section>
</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>
<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> </div>
</section> <section>
{isWindows && ( <Forms.FormTitle>Content Type</Forms.FormTitle>
<Switch <div>
value={settings.audio} <div className="vcd-screen-picker-radios vcd-screen-picker-hints">
onChange={checked => setSettings(s => ({ ...s, audio: checked }))} <label
hideBorder className="vcd-screen-picker-radio"
className="vcd-screen-picker-audio" data-checked={settings.contentHint === "motion"}
> >
Stream With Audio <Text variant="text-sm/bold">Prefer Smoothness</Text>
</Switch> <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 && ( {isLinux && (
<AudioSourcePickerLinux <AudioSourcePickerLinux
audioSource={settings.audioSource} audioSource={settings.audioSource}
workaround={settings.workaround} workaround={settings.workaround}
setAudioSource={source => setSettings(s => ({ ...s, audioSource: source }))} setAudioSource={source => setSettings(s => ({ ...s, audioSource: source }))}
setWorkaround={workaround => setSettings(s => ({ ...s, workaround: workaround }))} setWorkaround={workaround => setSettings(s => ({ ...s, workaround: workaround }))}
/> />
)} )}
</Card> </Card>
</div>
</div> </div>
); );
} }
@ -370,9 +381,13 @@ function ModalComponent({
contentHint: "motion", contentHint: "motion",
audio: true audio: true
}); });
const newModalProps = {
...modalProps,
size: "large"
};
return ( return (
<Modals.ModalRoot {...modalProps}> <Modals.ModalRoot {...newModalProps}>
<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} />

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

@ -1,3 +1,13 @@
.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;
} }
@ -125,7 +135,10 @@
.vcd-screen-picker-hint-description { .vcd-screen-picker-hint-description {
font-size: 14px; font-size: 14px;
color: var(--header-secondary); color: var(--text-normal);
width: 100%; width: 100%;
font-weight: 400;
}
.vcd-screen-picker-hints {
white-space: nowrap;
} }