updated some stuff and fixed window resizing breaking streams
This commit is contained in:
kaitlynkittyy
parent
419bfd0fd1
commit
c9b1c6592c
3 changed files with 119 additions and 122 deletions
|
|
@ -181,119 +181,123 @@ function StreamSettings({
|
|||
deps: [source.id]
|
||||
}
|
||||
);
|
||||
const notVisible = false;
|
||||
function setVisible() {
|
||||
return !notVisible;
|
||||
}
|
||||
// the source's name is not properly being displayed
|
||||
return (
|
||||
<div className="vcd-screen-picker">
|
||||
<div className="vcd-screen-picker-content">
|
||||
<Forms.FormTitle>What you're streaming</Forms.FormTitle>
|
||||
<Card className="vcd-screen-picker-card vcd-screen-picker-preview">
|
||||
<img src={thumb} alt="" />
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<div>
|
||||
<Forms.FormTitle>What you're streaming</Forms.FormTitle>
|
||||
<Switch
|
||||
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>
|
||||
</Card>
|
||||
<Forms.FormTitle>Stream Settings</Forms.FormTitle>
|
||||
<Card className="vcd-screen-picker-card">
|
||||
<div className="vcd-screen-picker-quality">
|
||||
<section>
|
||||
<Forms.FormTitle>Content Type</Forms.FormTitle>
|
||||
<div>
|
||||
<div className="vcd-screen-picker-radios vcd-screen-picker-hints">
|
||||
<label
|
||||
className="vcd-screen-picker-radio"
|
||||
data-checked={settings.contentHint === "motion"}
|
||||
>
|
||||
<Text variant="text-sm/bold">Prefer Smoothness</Text>
|
||||
<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="contenthint"
|
||||
value="motion"
|
||||
checked={settings.contentHint === "motion"}
|
||||
onChange={() => setSettings(s => ({ ...s, contentHint: "motion" }))}
|
||||
name="resolution"
|
||||
value={res}
|
||||
checked={settings.resolution === res}
|
||||
onChange={() => setSettings(s => ({ ...s, resolution: res }))}
|
||||
/>
|
||||
</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>
|
||||
<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>
|
||||
</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>
|
||||
);
|
||||
}
|
||||
|
|
@ -381,13 +385,9 @@ function ModalComponent({
|
|||
contentHint: "motion",
|
||||
audio: true
|
||||
});
|
||||
const newModalProps = {
|
||||
...modalProps,
|
||||
size: "large"
|
||||
};
|
||||
|
||||
return (
|
||||
<Modals.ModalRoot {...newModalProps}>
|
||||
<Modals.ModalRoot {...modalProps}>
|
||||
<Modals.ModalHeader className="vcd-screen-picker-header">
|
||||
<Forms.FormTitle tag="h2">ScreenShare</Forms.FormTitle>
|
||||
<Modals.ModalCloseButton onClick={close} />
|
||||
|
|
@ -424,7 +424,8 @@ function ModalComponent({
|
|||
const newConstraints = {
|
||||
...constraints,
|
||||
frameRate,
|
||||
advanced: [{ width: width, height: height }]
|
||||
advanced: [{ width: width, height: height }],
|
||||
resizeMode: "none"
|
||||
};
|
||||
track.applyConstraints(newConstraints).then(() => {
|
||||
console.log("Applied constraints from ScreenSharePicker successfully.");
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
padding: 1em;
|
||||
}
|
||||
|
|
@ -139,6 +129,11 @@
|
|||
width: 100%;
|
||||
font-weight: 400;
|
||||
}
|
||||
.vcd-screen-picker-hints {
|
||||
white-space: nowrap;
|
||||
|
||||
.vcd-screen-picker-preview-switch {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.not-visible {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -34,7 +34,8 @@ if (isLinux) {
|
|||
const newConstraints = {
|
||||
...constraints,
|
||||
frameRate,
|
||||
advanced: [{ width: width, height: height }]
|
||||
advanced: [{ width: width, height: height }],
|
||||
resizeMode: "none"
|
||||
};
|
||||
|
||||
track.applyConstraints(newConstraints).then(() => {
|
||||
|
|
|
|||
Reference in a new issue