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

190
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}
Show Preview onMouseLeave={onMouseLeave}
</button> >
<button className="vcd-screen-picker-button">Change</button> Show Preview
</Card> </div>
<Card className={visible ? "vcd-screen-picker-card vcd-screen-picker-preview fade-in" : "not-visible"}> )}
<img src={thumb} alt="stream preview" /> </Tooltip>
</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,58 +415,34 @@ function ModalComponent({
</Modals.ModalContent> </Modals.ModalContent>
<Modals.ModalFooter className="vcd-screen-picker-footer"> <Modals.ModalFooter className="vcd-screen-picker-footer">
<Button <div className="vcd-screen-picker-footerbuttons">
disabled={!selected} <Button
onClick={() => { color={Button.Colors.TRANSPARENT}
currentSettings = settings; className="vcd-screen-picker-startbuttons"
// If there are 2 connections, the second one is the existing stream. onClick={() => {
// In that case, we patch its quality close();
try { navigator.mediaDevices.getDisplayMedia();
var conn = [...MediaEngineStore.getMediaEngine().connections].find( }}
connection => connection.streamUserId === UserStore.getCurrentUser().id >
); Go Back
} catch { </Button>
console.log("No current stream."); <Button
} className="vcd-screen-picker-startbuttons"
console.log([...MediaEngineStore.getMediaEngine().connections]); disabled={!selected}
try { onClick={() => {
if (conn) { currentSettings = settings;
console.log(conn); // If there are 2 connections, the second one is the existing stream.
const track = conn.input.stream.getVideoTracks()[0]; // In that case, we patch its quality
console.log(track); try {
const frameRate = Number(settings.fps); var conn = [...MediaEngineStore.getMediaEngine().connections].find(
const height = Number(settings.resolution); connection => connection.streamUserId === UserStore.getCurrentUser().id
const width = Math.round(height * (16 / 9)); );
var constraints = track.getConstraints(); } catch {
const newConstraints = { console.log("No current stream.");
...constraints,
frameRate,
advanced: [{ width: width, height: height }],
resizeMode: "none"
};
track.applyConstraints(newConstraints).then(() => {
console.log("Applied constraints from ScreenSharePicker successfully.");
console.log("New constraints:", track.getConstraints());
});
// 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));
} }
} catch { console.log([...MediaEngineStore.getMediaEngine().connections]);
console.log("No current stream."); try {
} if (conn) {
try {
submit({
id: selected!,
...settings
});
// reapply contraints after some time to let discord resubmit stream
// i believe there MUST be way to do it cleaner..
if (conn) {
setTimeout(() => {
console.log(conn); console.log(conn);
const track = conn.input.stream.getVideoTracks()[0]; const track = conn.input.stream.getVideoTracks()[0];
console.log(track); console.log(track);
@ -483,27 +465,69 @@ function ModalComponent({
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(settings.resolution);
conn.videoStreamParameters[0].maxResolution.width = Math.round(height * (16 / 9)); conn.videoStreamParameters[0].maxResolution.width = Math.round(height * (16 / 9));
}, 100); }
} catch {
console.log("No current stream.");
} }
} catch { try {
console.log("Unable to start stream."); submit({
} id: selected!,
...settings
});
close(); // reapply contraints after some time to let discord resubmit stream
}} // i believe there MUST be way to do it cleaner..
> if (conn) {
Go Live setTimeout(() => {
</Button> console.log(conn);
const track = conn.input.stream.getVideoTracks()[0];
console.log(track);
const frameRate = Number(settings.fps);
const height = Number(settings.resolution);
const width = Math.round(height * (16 / 9));
var constraints = track.getConstraints();
const newConstraints = {
...constraints,
frameRate,
advanced: [{ width: width, height: height }],
resizeMode: "none"
};
track.applyConstraints(newConstraints).then(() => {
console.log("Applied constraints from ScreenSharePicker successfully.");
console.log("New constraints:", track.getConstraints());
});
{selected && !skipPicker ? ( // changing stream quality description
<Button color={Button.Colors.TRANSPARENT} onClick={() => setSelected(void 0)}> conn.videoStreamParameters[0].maxFrameRate = Number(settings.fps);
Back conn.videoStreamParameters[0].maxResolution.height = Number(
settings.resolution
);
conn.videoStreamParameters[0].maxResolution.width = Math.round(
height * (16 / 9)
);
}, 100);
}
} catch {
console.log("Unable to start stream.");
}
close();
}}
>
Go Live
</Button> </Button>
) : ( </div>
<Button color={Button.Colors.TRANSPARENT} onClick={close}> <div className="vcd-screen-picker-cancel">
Cancel {selected && !skipPicker ? (
</Button> <Button color={Button.Colors.TRANSPARENT} onClick={() => setSelected(void 0)}>
)} Back
</Button>
) : (
<Button color={Button.Colors.TRANSPARENT} onClick={close}>
Cancel
</Button>
)}
</div>
</Modals.ModalFooter> </Modals.ModalFooter>
</Modals.ModalRoot> </Modals.ModalRoot>
); );

62
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;
} }