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

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

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