Skip to content

Commit ab07a9e

Browse files
InvectivusTacoInvectivusTaco
committed
Austin 5/3 updated Tutorial, Refactored Electron
> > Co-author-by: Zack Vandiver <[email protected]> Co-author-by: Heather Pfeiffer <[email protected]> Co-author-by: Austin Alvarez <InvectivusTaco> Co-author-by: Jesse Wowczuk <[email protected]>
2 parents 0ac829c + 902905e commit ab07a9e

23 files changed

+6830
-1189
lines changed

‎app/src/components/bottom/BottomPanel.tsx

Lines changed: 85 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -1,78 +1,85 @@
1-
import React, { useEffect, useRef, useState } from 'react';
2-
import BottomTabs from './BottomTabs';
3-
import { ExpandLess, ExpandMore } from '@mui/icons-material';
4-
5-
const BottomPanel = (props): JSX.Element => {
6-
let y: number = 0;
7-
let h: number = 0;
8-
const node = useRef() as React.MutableRefObject<HTMLDivElement>;
9-
10-
const [isDragging, setIsDragging] = useState(false);
11-
12-
const mouseDownHandler = (e): void => {
13-
y = e.clientY;
14-
15-
const styles = window.getComputedStyle(node.current);
16-
h = parseInt(styles.height, 10);
17-
18-
document.addEventListener('mousemove', mouseMoveHandler);
19-
document.addEventListener('mouseup', mouseUpHandler);
20-
window.addEventListener('message', handleIframeMessage); //listens for messages from the iframe when the mouse is over it
21-
};
22-
23-
//Interpret the messages from the iframe
24-
const handleIframeMessage = (e) => {
25-
if (e.data === 'iframeMouseUp') {
26-
mouseUpHandler();
27-
} else if (e.data.type === 'iframeMouseMove') {
28-
mouseMoveHandler(e.data);
29-
}
30-
};
31-
32-
const mouseMoveHandler = function (e: MouseEvent): void {
33-
if (!props.bottomShow) return; // prevent drag calculation to occur when bottom menu is not showing
34-
35-
const dy = y - e.clientY;
36-
37-
const newVal = h + dy;
38-
const styles = window.getComputedStyle(node.current);
39-
const min = parseInt(styles.minHeight, 10);
40-
node.current.style.height = newVal > min ? `${h + dy}px` : `${min}px`;
41-
};
42-
43-
const mouseUpHandler = function () {
44-
// puts false in callback queue after OnDragStart sets to true (b/c react 17 doesn't have onDragEnd)
45-
setTimeout(() => setIsDragging(false), 0);
46-
document.removeEventListener('mousemove', mouseMoveHandler);
47-
document.removeEventListener('mouseup', mouseUpHandler);
48-
window.removeEventListener('message', handleIframeMessage);
49-
};
50-
51-
useEffect(() => {
52-
node.current.style.height = '50vh';
53-
node.current.style.minHeight = '50vh';
54-
}, []);
55-
56-
return (
57-
<>
58-
<div className="bottom-panel" id="resize" ref={node}>
59-
<div
60-
id="resize-drag"
61-
onMouseDown={mouseDownHandler}
62-
draggable
63-
onDragStart={() => setIsDragging(true)}
64-
onClick={() => !isDragging && props.setBottomShow(!props.bottomShow)}
65-
tabIndex={0}
66-
>
67-
{props.bottomShow ? <ExpandMore /> : <ExpandLess />}
68-
</div>
69-
<BottomTabs
70-
setBottomShow={props.setBottomShow}
71-
isThemeLight={props.isThemeLight}
72-
/>
73-
</div>
74-
</>
75-
);
76-
};
77-
78-
export default BottomPanel;
1+
import React, { useEffect, useRef, useState } from 'react';
2+
import BottomTabs from './BottomTabs';
3+
import { ExpandLess, ExpandMore } from '@mui/icons-material';
4+
5+
const BottomPanel = (props): JSX.Element => {
6+
let y: number = 0;
7+
let h: number = 0;
8+
const node = useRef() as React.MutableRefObject<HTMLDivElement>;
9+
10+
const [isDragging, setIsDragging] = useState(false);
11+
12+
const mouseDownHandler = (e): void => {
13+
y = e.clientY;
14+
15+
const styles = window.getComputedStyle(node.current);
16+
h = parseInt(styles.height, 10);
17+
18+
document.addEventListener('mousemove', mouseMoveHandler);
19+
document.addEventListener('mouseup', mouseUpHandler);
20+
window.addEventListener('message', handleIframeMessage); //listens for messages from the iframe when the mouse is over it
21+
};
22+
23+
//Interpret the messages from the iframe
24+
const handleIframeMessage = (e) => {
25+
if (e.data === 'iframeMouseUp') {
26+
mouseUpHandler();
27+
} else if (e.data.type === 'iframeMouseMove') {
28+
mouseMoveHandler(e.data);
29+
}
30+
};
31+
32+
const mouseMoveHandler = function (e: MouseEvent): void {
33+
if (!props.bottomShow) return; // prevent drag calculation to occur when bottom menu is not showing
34+
35+
const dy = y - e.clientY;
36+
const newHeight = h + dy;
37+
38+
const styles = window.getComputedStyle(node.current);
39+
const minHeight = parseInt(styles.minHeight, 10);
40+
const maxHeight = window.innerHeight * 0.8; // Set a maximum height, e.g., 90% of window height
41+
42+
node.current.style.height = `${Math.max(minHeight, Math.min(maxHeight, newHeight))}px`;
43+
};
44+
45+
const mouseUpHandler = function () {
46+
// puts false in callback queue after OnDragStart sets to true (b/c react 17 doesn't have onDragEnd)
47+
setTimeout(() => setIsDragging(false), 0);
48+
document.removeEventListener('mousemove', mouseMoveHandler);
49+
document.removeEventListener('mouseup', mouseUpHandler);
50+
window.removeEventListener('message', handleIframeMessage);
51+
};
52+
53+
useEffect(() => {
54+
if (props.bottomShow) {
55+
node.current.style.height = '50vh'; // Initial height when bottom panel is open
56+
node.current.style.minHeight = '20vh'; // Minimum height when bottom panel is open
57+
} else {
58+
node.current.style.height = '0.1'; // Initial height when bottom panel is closed
59+
node.current.style.minHeight = '0.1'; // Minimum height when bottom panel is closed
60+
}
61+
}, [props.bottomShow]);
62+
63+
return (
64+
<>
65+
<div className="bottom-panel" id="resize" ref={node} >
66+
<div
67+
id="resize-drag"
68+
onMouseDown={mouseDownHandler}
69+
draggable
70+
onDragStart={() => setIsDragging(true)}
71+
onClick={() => !isDragging && props.setBottomShow(!props.bottomShow)}
72+
tabIndex={0}
73+
>
74+
{props.bottomShow ? <ExpandMore /> : <ExpandLess />}
75+
</div>
76+
<BottomTabs
77+
setBottomShow={props.setBottomShow}
78+
isThemeLight={props.isThemeLight}
79+
/>
80+
</div>
81+
</>
82+
);
83+
};
84+
85+
export default BottomPanel;

‎app/src/components/bottom/BottomTabs.tsx

Lines changed: 23 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,26 @@
11
import React, { useState } from 'react';
2-
import makeStyles from '@mui/styles/makeStyles';
3-
import Tabs from '@mui/material/Tabs';
4-
import Tab from '@mui/material/Tab';
5-
import StylesEditor from './StylesEditor';
6-
import CustomizationPanel from '../../containers/CustomizationPanel';
2+
import { useDispatch, useSelector } from 'react-redux';
3+
import { changeProjectType } from '../../redux/reducers/slice/appStateSlice';
4+
import { RootState } from '../../redux/store';
5+
import { MeetingProvider } from '@videosdk.live/react-sdk';
6+
const videoSDKToken = `${import.meta.env.VITE_VIDEOSDK_TOKEN}`;
7+
import Chatroom from './ChatRoom';
78
import CreationPanel from './CreationPanel';
9+
import CustomizationPanel from '../../containers/CustomizationPanel';
10+
import StylesEditor from './StylesEditor';
11+
import Tree from '../../tree/TreeChart';
812
import ContextManager from '../ContextAPIManager/ContextManager';
913
import StateManager from '../StateManagement/StateManagement';
10-
import Chatroom from './ChatRoom';
14+
import MUIProps from './MUIProps';
15+
import makeStyles from '@mui/styles/makeStyles';
16+
import Tabs from '@mui/material/Tabs';
17+
import Tab from '@mui/material/Tab';
1118
import Box from '@mui/material/Box';
12-
import Tree from '../../tree/TreeChart';
1319
import FormControl from '@mui/material/FormControl';
1420
import MenuItem from '@mui/material/MenuItem';
1521
import Select from '@mui/material/Select';
1622
import arrow from '../main/Arrow';
17-
import { useDispatch, useSelector } from 'react-redux';
18-
import { changeProjectType } from '../../redux/reducers/slice/appStateSlice';
19-
import { RootState } from '../../redux/store';
20-
import { MeetingProvider } from '@videosdk.live/react-sdk';
21-
const videoSDKToken = `${import.meta.env.VITE_VIDEOSDK_TOKEN}`;
23+
2224

2325
const BottomTabs = (props): JSX.Element => {
2426
const { setBottomShow, isThemeLight } = props;
@@ -73,54 +75,52 @@ const BottomTabs = (props): JSX.Element => {
7375
indicator: classes.tabsIndicator
7476
}}
7577
variant="scrollable"
76-
scrollButtons="auto"
78+
scrollButtons="auto"
7779
>
78-
<Tab
79-
disableRipple
80+
<Tab
8081
classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
8182
label="Live Chat"
8283
onClick={showBottomPanel}
8384
sx={{ borderTop: '2px solid #191919' }}
8485
/>
8586
<Tab
86-
disableRipple
8787
classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
8888
label="Creation Panel"
8989
onClick={showBottomPanel}
9090
sx={{ borderTop: '2px solid #191919' }}
9191
/>
9292
<Tab
93-
disableRipple
9493
classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
9594
label="Customization"
9695
onClick={showBottomPanel}
9796
sx={{ borderTop: '2px solid #191919' }}
9897
/>
9998
<Tab
100-
disableRipple
10199
classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
102100
label="CSS Editor"
103101
onClick={showBottomPanel}
104102
sx={{ borderTop: '2px solid #191919' }}
105103
/>
106104
<Tab
107-
disableRipple
108105
classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
109106
label="Component Tree"
110107
onClick={showBottomPanel}
111108
/>
112109
<Tab
113-
disableRipple
114110
classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
115111
label="Context Manager"
116112
onClick={showBottomPanel}
117113
/>
118114
<Tab
119-
disableRipple
120115
classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
121116
label="State Manager"
122117
onClick={showBottomPanel}
123118
/>
119+
<Tab
120+
classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
121+
label="MUI Props"
122+
onClick={showBottomPanel}
123+
/>
124124
</Tabs>
125125

126126
<div className={classes.projectTypeWrapper}>
@@ -161,13 +161,8 @@ const BottomTabs = (props): JSX.Element => {
161161
{tab === 3 && <StylesEditor theme={theme} setTheme={setTheme} />}
162162
{tab === 4 && <Tree data={components} />}
163163
{tab === 5 && <ContextManager theme={theme} setTheme={setTheme} />}
164-
{tab === 6 && (
165-
<StateManager
166-
theme={theme}
167-
setTheme={setTheme}
168-
isThemeLight={isThemeLight}
169-
/>
170-
)}
164+
{tab === 6 && (<StateManager theme={theme} setTheme={setTheme} isThemeLight={isThemeLight} />)}
165+
{tab === 7 && <MUIProps theme={theme} setTheme={setTheme} />}
171166
</div>
172167
</div>
173168
</MeetingProvider>

‎app/src/components/bottom/MUIProps.tsx

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import React, { useState } from 'react';
2+
import { Button, TextField } from "@mui/material";
3+
import { Send } from "@mui/icons-material";
4+
import MUITypes from "../../redux/MUITypes";
5+
import { MUIType } from '../../interfaces/Interfaces';
6+
import { emitEvent } from '../../helperFunctions/socket';
7+
8+
const MUIProps = (props): JSX.Element => {
9+
const [selectedComponent, setSelectedComponent] = useState<MUIType | null>(null);
10+
11+
const handleComponentSelect = (component: MUIType) => {
12+
setSelectedComponent(component);
13+
};
14+
15+
const handleSend = () => {
16+
if (selectedComponent) {
17+
emitEvent("add-component", selectedComponent, {placeholder: "Placeholder"});
18+
}
19+
};
20+
21+
return (
22+
<div>
23+
<div style={{ display: "flex", flexDirection: "column" }}>
24+
{MUITypes.map((component) => (
25+
<Button
26+
key={component.id}
27+
onClick={() => handleComponentSelect(component)}
28+
sx={{ marginBottom: "0.5rem" }}
29+
>
30+
{component.name}
31+
</Button>
32+
))}
33+
</div>
34+
<Button
35+
onClick={handleSend}
36+
variant="contained"
37+
endIcon={<Send />}
38+
sx={{ marginTop: "1rem" }}
39+
>
40+
Save
41+
</Button>
42+
</div>
43+
);
44+
};
45+
46+
export default MUIProps;
47+

‎app/src/components/left/ComponentDrag.tsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import makeStyles from '@mui/styles/makeStyles';
55
import { useSelector } from 'react-redux';
66
import ComponentPanelItem from '../right/ComponentPanelItem';
77

8-
98
const useStyles = makeStyles({
109
panelWrapper: {
1110
display: 'flex',
@@ -21,7 +20,7 @@ const useStyles = makeStyles({
2120
color: '#fff'
2221
},
2322
darkThemeFontColor: {
24-
color: '#fff'
23+
color: '#00008B,'
2524
}
2625
});
2726

@@ -70,4 +69,3 @@ const ComponentDrag = ({ isVisible, isThemeLight }): JSX.Element | null => {
7069
};
7170

7271
export default ComponentDrag;
73-

‎app/src/components/left/DragDropPanel.tsx

Lines changed: 0 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -101,33 +101,6 @@ const DragDropPanel = (props): JSX.Element => {
101101
</AccordionDetails>
102102
</Accordion>
103103

104-
{/* MUI Components */}
105-
<Accordion className={classes.accordion}>
106-
<AccordionSummary
107-
expandIcon={<ExpandMoreIcon />}
108-
aria-controls="panel2a-content"
109-
id="panel2a-header"
110-
className={classes.accordionSummary}
111-
>
112-
<h3>MUI Components</h3>
113-
</AccordionSummary>
114-
<AccordionDetails>
115-
<Grid container justifyContent="center">
116-
{muiTypesToRender.map((option) => {
117-
return (
118-
<MUIItem
119-
name={option.name}
120-
key={`mui-${option.name}`}
121-
id={option.id}
122-
icon={option.icon}
123-
handleDelete={handleDelete}
124-
/>
125-
);
126-
})}
127-
</Grid>
128-
</AccordionDetails>
129-
</Accordion>
130-
131104
{/* React Router */}
132105
<Accordion className={classes.accordion}>
133106
<AccordionSummary

0 commit comments

Comments
 (0)