Skip to content

Commit fa31cb3

Browse files
cyburnscyburns
authored
Merge branch 'dev' into cyrus-styling
2 parents 2289813 + 4070969 commit fa31cb3

File tree

11 files changed

+796
-217
lines changed

11 files changed

+796
-217
lines changed

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

Lines changed: 120 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import React, { useState } from 'react';
22
import makeStyles from '@mui/styles/makeStyles';
33
import Tabs from '@mui/material/Tabs';
44
import Tab from '@mui/material/Tab';
5-
import CodePreview from './CodePreview';
65
import StylesEditor from './StylesEditor';
76
import CustomizationPanel from '../../containers/CustomizationPanel';
87
import CreationPanel from './CreationPanel';
@@ -18,8 +17,11 @@ import arrow from '../main/Arrow';
1817
import { useDispatch, useSelector } from 'react-redux';
1918
import { changeProjectType } from '../../redux/reducers/slice/appStateSlice';
2019
import { RootState } from '../../redux/store';
20+
import { MeetingProvider } from '@videosdk.live/react-sdk';
21+
const videoSDKToken = `${import.meta.env.VITE_VIDEOSDK_TOKEN}`;
2122

2223
const BottomTabs = (props): JSX.Element => {
24+
const { setBottomShow, isThemeLight } = props;
2325
const dispatch = useDispatch();
2426
const state = useSelector((store: RootState) => store.appState);
2527
const contextParam = useSelector((store: RootState) => store.contextSlice);
@@ -42,131 +44,132 @@ const BottomTabs = (props): JSX.Element => {
4244
arrow.renderArrow(state.canvasFocus?.childId);
4345

4446
const showBottomPanel = () => {
45-
props.setBottomShow(true);
47+
setBottomShow(true);
4648
};
4749

4850
return (
49-
<div
50-
className={`${classes.root} ${classes.rootLight}`}
51-
style={{
52-
backgroundColor: '#191919',
53-
zIndex: 1,
54-
borderTop: '2px solid grey'
51+
<MeetingProvider
52+
config={{
53+
meetingId: `${collaborationRoom.meetingId}`,
54+
micEnabled: false,
55+
webcamEnabled: false,
56+
name: `${collaborationRoom.userName}`
5557
}}
58+
token={videoSDKToken}
5659
>
57-
<Box
58-
display="flex"
59-
justifyContent="space-between"
60-
alignItems="center"
61-
paddingBottom="10px"
62-
paddingRight="10px"
60+
<div
61+
className={`${classes.root} ${classes.rootLight}`}
62+
style={{
63+
backgroundColor: '#191919',
64+
zIndex: 1,
65+
borderTop: '2px solid grey'
66+
}}
67+
onClick={() => {
68+
setBottomShow(true);
69+
}}
6370
>
64-
<Tabs
65-
value={tab}
66-
onChange={handleChange}
67-
classes={{ root: classes.tabsRoot, indicator: classes.tabsIndicator }}
68-
variant="scrollable"
69-
scrollButtons="auto"
71+
<Box
72+
display="flex"
73+
justifyContent="space-between"
74+
alignItems="center"
75+
paddingBottom="10px"
76+
paddingRight="10px"
7077
>
71-
<Tab
72-
disableRipple
73-
classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
74-
label="Creation Panel"
75-
onClick={showBottomPanel}
76-
/>
77-
<Tab
78-
disableRipple
79-
classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
80-
label="Customization"
81-
onClick={showBottomPanel}
82-
/>
83-
<Tab
84-
disableRipple
85-
classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
86-
label="CSS Editor"
87-
onClick={showBottomPanel}
88-
/>
89-
<Tab
90-
disableRipple
91-
classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
92-
label="Component Tree"
93-
onClick={showBottomPanel}
94-
/>
95-
<Tab
96-
disableRipple
97-
classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
98-
label="Context Manager"
99-
onClick={showBottomPanel}
100-
/>
101-
<Tab
102-
disableRipple
103-
classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
104-
label="State Manager"
105-
onClick={showBottomPanel}
106-
/>
107-
<Tab
108-
disableRipple
109-
classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
110-
label="Live Chat"
111-
onClick={showBottomPanel}
112-
/>
113-
</Tabs>
114-
<div className={classes.projectTypeWrapper}>
115-
<FormControl size="small">
116-
<Select
117-
variant="outlined"
118-
labelId="project-type-label"
119-
id="demo-simple-select"
120-
className={classes.projectSelector}
121-
value={state.projectType}
122-
onChange={handleProjectChange}
123-
MenuProps={{ disablePortal: true }}
124-
>
125-
<MenuItem style={{ color: 'white' }} value={'Classic React'}>
126-
Classic React
127-
</MenuItem>
128-
<MenuItem style={{ color: 'white' }} value={'Gatsby.js'}>
129-
Gatsby.js
130-
</MenuItem>
131-
<MenuItem style={{ color: 'white' }} value={'Next.js'}>
132-
Next.js
133-
</MenuItem>
134-
</Select>
135-
</FormControl>
78+
<Tabs
79+
value={tab}
80+
onChange={handleChange}
81+
classes={{
82+
root: classes.tabsRoot,
83+
indicator: classes.tabsIndicator
84+
}}
85+
variant="scrollable"
86+
scrollButtons="auto"
87+
>
88+
<Tab
89+
disableRipple
90+
classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
91+
label="Creation Panel"
92+
onClick={showBottomPanel}
93+
/>
94+
<Tab
95+
disableRipple
96+
classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
97+
label="Customization"
98+
onClick={showBottomPanel}
99+
/>
100+
<Tab
101+
disableRipple
102+
classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
103+
label="CSS Editor"
104+
onClick={showBottomPanel}
105+
/>
106+
<Tab
107+
disableRipple
108+
classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
109+
label="Component Tree"
110+
onClick={showBottomPanel}
111+
/>
112+
<Tab
113+
disableRipple
114+
classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
115+
label="Context Manager"
116+
onClick={showBottomPanel}
117+
/>
118+
<Tab
119+
disableRipple
120+
classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
121+
label="State Manager"
122+
onClick={showBottomPanel}
123+
/>
124+
<Tab
125+
disableRipple
126+
classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
127+
label="Live Chat"
128+
onClick={showBottomPanel}
129+
/>
130+
</Tabs>
131+
132+
<div className={classes.projectTypeWrapper}>
133+
<FormControl size="small">
134+
<Select
135+
variant="outlined"
136+
labelId="project-type-label"
137+
id="demo-simple-select"
138+
className={classes.projectSelector}
139+
value={state.projectType}
140+
onChange={handleProjectChange}
141+
MenuProps={{ disablePortal: true }}
142+
>
143+
<MenuItem style={{ color: 'white' }} value={'Classic React'}>
144+
Classic React
145+
</MenuItem>
146+
<MenuItem style={{ color: 'white' }} value={'Gatsby.js'}>
147+
Gatsby.js
148+
</MenuItem>
149+
<MenuItem style={{ color: 'white' }} value={'Next.js'}>
150+
Next.js
151+
</MenuItem>
152+
</Select>
153+
</FormControl>
154+
</div>
155+
</Box>
156+
<div className="tab-content">
157+
{tab === 0 && <CreationPanel isThemeLight={isThemeLight} />}
158+
{tab === 1 && <CustomizationPanel isThemeLight={isThemeLight} />}
159+
{tab === 2 && <StylesEditor theme={theme} setTheme={setTheme} />}
160+
{tab === 3 && <Tree data={components} />}
161+
{tab === 4 && <ContextManager theme={theme} setTheme={setTheme} />}
162+
{tab === 5 && (
163+
<StateManager
164+
theme={theme}
165+
setTheme={setTheme}
166+
isThemeLight={isThemeLight}
167+
/>
168+
)}
169+
{tab === 6 && <Chatroom />}
136170
</div>
137-
</Box>
138-
<div className="tab-content">
139-
{tab === 0 && <CreationPanel isThemeLight={props.isThemeLight} />}
140-
{tab === 1 && <CustomizationPanel isThemeLight={props.isThemeLight} />}
141-
{tab === 2 && <StylesEditor theme={theme} setTheme={setTheme} />}
142-
{tab === 3 && <Tree data={components} />}
143-
{tab === 4 && <ContextManager theme={theme} setTheme={setTheme} />}
144-
{tab === 5 && (
145-
<StateManager
146-
theme={theme}
147-
setTheme={setTheme}
148-
isThemeLight={props.isThemeLight}
149-
/>
150-
)}
151-
{tab === 6 &&
152-
(collaborationRoom.userJoined ? (
153-
<Chatroom />
154-
) : (
155-
<div
156-
style={{
157-
display: 'flex',
158-
justifyContent: 'center',
159-
alignItems: 'center',
160-
height: '100%'
161-
}}
162-
>
163-
<p style={{ color: 'white', fontSize: '18px' }}>
164-
Please join a collaboration room to enable this function
165-
</p>
166-
</div>
167-
))}
168171
</div>
169-
</div>
172+
</MeetingProvider>
170173
);
171174
};
172175

0 commit comments

Comments
 (0)