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

major changes to the UI/UX of the screenshare modal

Browse source
This commit is contained in:
kaitlynkittyy 2024-04-11 13:25:55 -04:00
parent c34533295c
commit 6bb5f8a1a6
2 changed files with 134 additions and 118 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -16,6 +16,7 @@ import {
Select,
Switch,
Text,
Tooltip,
UserStore,
useState
} from "@vencord/types/webpack/common";
@ -187,26 +188,31 @@ function StreamSettings({
deps: [source.id]
}
);
const [visible, setVisible] = useState(false);
const preview = (
<div className="vcd-screen-picker-preview">
<img src={thumb} alt="stream preview" />;
</div>
);
// the source's name is not properly being displayed
return (
<div>
<Forms.FormTitle>What you're streaming</Forms.FormTitle>
<section>
<Card className={"vcd-screen-picker-card vcd-screen-picker-preview-buttons"}>
<button
className="vcd-screen-picker-subtle-button"
onClick={() => {
setVisible(!visible);
}}
<div className="vcd-screen-picker-tooltip">
<Card className={"vcd-screen-picker-card"}>
<Tooltip text={preview}>
{({ onMouseEnter, onMouseLeave }) => (
<div
className="vcd-screen-picker-tooltip"
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
>
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" />
</div>
)}
</Tooltip>
</Card>
</div>
</section>
<Forms.FormTitle>Stream Settings</Forms.FormTitle>
<Card className="vcd-screen-picker-card">
@ -409,7 +415,19 @@ function ModalComponent({
</Modals.ModalContent>
<Modals.ModalFooter className="vcd-screen-picker-footer">
<div className="vcd-screen-picker-footerbuttons">
<Button
color={Button.Colors.TRANSPARENT}
className="vcd-screen-picker-startbuttons"
onClick={() => {
close();
navigator.mediaDevices.getDisplayMedia();
}}
>
Go Back
</Button>
<Button
className="vcd-screen-picker-startbuttons"
disabled={!selected}
onClick={() => {
currentSettings = settings;
@ -481,8 +499,12 @@ function ModalComponent({
// changing stream quality description
conn.videoStreamParameters[0].maxFrameRate = Number(settings.fps);
conn.videoStreamParameters[0].maxResolution.height = Number(settings.resolution);
conn.videoStreamParameters[0].maxResolution.width = Math.round(height * (16 / 9));
conn.videoStreamParameters[0].maxResolution.height = Number(
settings.resolution
);
conn.videoStreamParameters[0].maxResolution.width = Math.round(
height * (16 / 9)
);
}, 100);
}
} catch {
@ -494,7 +516,8 @@ function ModalComponent({
>
Go Live
</Button>
</div>
<div className="vcd-screen-picker-cancel">
{selected && !skipPicker ? (
<Button color={Button.Colors.TRANSPARENT} onClick={() => setSelected(void 0)}>
Back
@ -504,6 +527,7 @@ function ModalComponent({
Cancel
</Button>
)}
</div>
</Modals.ModalFooter>
</Modals.ModalRoot>
);

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

@ -8,6 +8,7 @@
.vcd-screen-picker-footer {
display: flex;
justify-content: space-between;
gap: 1em;
}
@ -52,17 +53,16 @@
box-sizing: border-box;
}
.vcd-screen-picker-preview img {
width: 100%;
margin-bottom: 0.5em;
}
.vcd-screen-picker-preview {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-bottom: 1em;
top: 105%;
}
.vcd-screen-picker-preview img {
width: 50%;
}
.vcd-screen-picker-radio input {
@ -130,29 +130,17 @@
font-weight: 400;
}
.vcd-screen-picker-preview-switch {
margin-top: 1em;
}
.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 {
.vcd-screen-picker-tooltip {
background-color: transparent;
color: var(--primary-500);
color: var(--text-normal);
font-weight: 500;
font-size: 14px;
font-style: bold;
text-transform: uppercase;
display: flex;
justify-content: center;
}
.vcd-screen-picker-button{
@ -163,19 +151,23 @@
border-radius: 3px;
}
.fade-in {
animation-name: fade-in;
animation-duration: .25s;
animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
.vcd-screen-picker-cancel {
display: flex;
flex-wrap: nowrap;
flex-direction: row;
justify-content: space-around;
}
@keyframes fade-in {
0% {
opacity: 0;
transform: scale(0, 0);
.vcd-screen-picker-startbuttons {
margin-left: 0.5em;
margin-right: 0.5em;
}
100% {
opacity: 1;
transform: scale(1, 1);
}
.vcd-screen-picker-footerbuttons {
box-sizing: border-box;
margin-left: none;
justify-content: space-between;
display: flex;
flex-wrap: nowrap;
flex-direction: row;
}