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

started styling the screenshare picker and added a change window button to the picker(not currently functional)

Browse source
This commit is contained in:
kaitlynkittyy 2024-04-10 23:34:54 -04:00
parent 45e4e1bd86
commit b9b336126a
2 changed files with 59 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -187,31 +187,27 @@ function StreamSettings({
deps: [source.id]
}
);
const notVisible = false;
function setVisible() {
return !notVisible;
}
const [visible, setVisible] = useState(false);
// the source's name is not properly being displayed
return (
<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>
<section>
<Card className={"vcd-screen-picker-card vcd-screen-picker-preview-buttons"}>
<button
className="vcd-screen-picker-subtle-button"
onClick={() => {
setVisible(!visible);
}}
>
Show Preview
</button>
<button className="vcd-screen-picker-button">Change</button>
</Card>
<Card className={visible ? "vcd-screen-picker-card vcd-screen-picker-preview fade-in" : "not-visible"}>
<img src={thumb} alt="stream preview" />
</Card>
</section>
<Forms.FormTitle>Stream Settings</Forms.FormTitle>
<Card className="vcd-screen-picker-card">
<div className="vcd-screen-picker-quality">

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

@ -136,4 +136,46 @@
.not-visible {
display: none;
}
.vcd-screen-picker-preview-buttons {
display: flex;
flex-direction: row;
justify-content: space-between;
background-color: var(--background-secondary);
margin-bottom: 1em;
}
.vcd-screen-picker-subtle-button {
background-color: transparent;
color: var(--primary-500);
font-weight: 500;
font-size: 14px;
font-style: bold;
text-transform: uppercase;
}
.vcd-screen-picker-button{
background-color: var(--primary-500);
color: var(--text-normal);
font-weight: 500;
font-size: 14px;
border-radius: 3px;
}
.fade-in {
animation-name: fade-in;
animation-duration: .25s;
animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}
@keyframes fade-in {
0% {
opacity: 0;
transform: scale(0, 0);
}
100% {
opacity: 1;
transform: scale(1, 1);
}
}