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

Revert "major changes to the UI/UX of the screenshare modal"

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

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

@ -16,7 +16,6 @@ import {
Select, Select,
Switch, Switch,
Text, Text,
Tooltip,
UserStore, UserStore,
useState useState
} from "@vencord/types/webpack/common"; } from "@vencord/types/webpack/common";
@ -188,31 +187,26 @@ function StreamSettings({
deps: [source.id] deps: [source.id]
} }
); );
const preview = ( const [visible, setVisible] = useState(false);
<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>
<div className="vcd-screen-picker-tooltip"> <Card className={"vcd-screen-picker-card vcd-screen-picker-preview-buttons"}>
<Card className={"vcd-screen-picker-card"}> <button
<Tooltip text={preview}> className="vcd-screen-picker-subtle-button"
{({ onMouseEnter, onMouseLeave }) => ( onClick={() => {
<div setVisible(!visible);
className="vcd-screen-picker-tooltip" }}
onMouseEnter={onMouseEnter} >
onMouseLeave={onMouseLeave} Show Preview
> </button>
Show Preview <button className="vcd-screen-picker-button">Change</button>
</div> </Card>
)} <Card className={visible ? "vcd-screen-picker-card vcd-screen-picker-preview fade-in" : "not-visible"}>
</Tooltip> <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">
@ -415,34 +409,58 @@ 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 disabled={!selected}
color={Button.Colors.TRANSPARENT} onClick={() => {
className="vcd-screen-picker-startbuttons" currentSettings = settings;
onClick={() => { // If there are 2 connections, the second one is the existing stream.
close(); // In that case, we patch its quality
navigator.mediaDevices.getDisplayMedia(); try {
}} var conn = [...MediaEngineStore.getMediaEngine().connections].find(
> connection => connection.streamUserId === UserStore.getCurrentUser().id
Go Back );
</Button> } catch {
<Button console.log("No current stream.");
className="vcd-screen-picker-startbuttons" }
disabled={!selected} console.log([...MediaEngineStore.getMediaEngine().connections]);
onClick={() => { try {
currentSettings = settings; if (conn) {
// If there are 2 connections, the second one is the existing stream. console.log(conn);
// In that case, we patch its quality const track = conn.input.stream.getVideoTracks()[0];
try { console.log(track);
var conn = [...MediaEngineStore.getMediaEngine().connections].find( const frameRate = Number(settings.fps);
connection => connection.streamUserId === UserStore.getCurrentUser().id const height = Number(settings.resolution);
); const width = Math.round(height * (16 / 9));
} catch { var constraints = track.getConstraints();
console.log("No current stream."); 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());
});
// 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));
} }
console.log([...MediaEngineStore.getMediaEngine().connections]); } catch {
try { console.log("No current stream.");
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);
@ -465,69 +483,27 @@ 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.");
} }
try { } catch {
submit({ console.log("Unable to start stream.");
id: selected!, }
...settings
});
// reapply contraints after some time to let discord resubmit stream close();
// i believe there MUST be way to do it cleaner.. }}
if (conn) { >
setTimeout(() => { Go Live
console.log(conn); </Button>
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());
});
// changing stream quality description {selected && !skipPicker ? (
conn.videoStreamParameters[0].maxFrameRate = Number(settings.fps); <Button color={Button.Colors.TRANSPARENT} onClick={() => setSelected(void 0)}>
conn.videoStreamParameters[0].maxResolution.height = Number( Back
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> ) : (
<div className="vcd-screen-picker-cancel"> <Button color={Button.Colors.TRANSPARENT} onClick={close}>
{selected && !skipPicker ? ( Cancel
<Button color={Button.Colors.TRANSPARENT} onClick={() => setSelected(void 0)}> </Button>
Back )}
</Button>
) : (
<Button color={Button.Colors.TRANSPARENT} onClick={close}>
Cancel
</Button>
)}
</div>
</Modals.ModalFooter> </Modals.ModalFooter>
</Modals.ModalRoot> </Modals.ModalRoot>
); );

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

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