Skip to content

Commit b1e3f0f

Browse files
vivek9patelvivek9patel
committed
chore: update sideVideoPanel
1 parent 24dc82f commit b1e3f0f

File tree

8 files changed

+994
-30
lines changed

8 files changed

+994
-30
lines changed

‎package.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,10 @@
44
"private": true,
55
"dependencies": {
66
"@auth0/auth0-react": "^1.6.0",
7+
"@chakra-ui/react": "^1.6.7",
78
"@craco/craco": "^6.2.0",
9+
"@emotion/react": "^11",
10+
"@emotion/styled": "^11",
811
"@iconify/icons-bi": "^1.1.6",
912
"@iconify/icons-fluent": "^1.1.23",
1013
"@iconify/react": "^3.0.0",
@@ -13,6 +16,7 @@
1316
"@testing-library/user-event": "^12.1.10",
1417
"axios": "^0.21.1",
1518
"codemirror": "^5.62.2",
19+
"framer-motion": "^4",
1620
"iconify": "^1.3.0",
1721
"peerjs": "^1.3.2",
1822
"react": "^17.0.2",

‎src/components/IDE.js‎

Lines changed: 27 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -603,23 +603,35 @@ export default function IDE({ docId, modal, toggleModal, python, setpython, inpu
603603

604604
function RightVideoPanel({ muteCam, muteMic }) {
605605

606+
const [isMuteCam, setIsMuteCam] = useState(false)
607+
const [isMuteMic, setIsMuteMic] = useState(false)
608+
606609
return (
607-
<div style={{ height: "calc(100vh - 47px)" }} className="flex flex-col items-center relative p-2 bg-purple-dark shadow-lg">
608-
{/* <button><img className="h-4 my-2" src={upArrow} alt="scroll up arrow" /></button> */}
609-
<div className="flex flex-col items-center overflow-y-auto justify-center pb-10" id="video-grid"></div>
610-
{/* <button><img className="h-4 my-2 transform rotate-180" src={upArrow} alt="scroll down arrow" /></button> */}
611-
<div className="flex items-center backdrop-filter backdrop-blur absolute left-0 bottom-0 pt-2 rounded-lg pb-4 w-full justify-around mt-2">
612-
<button className="bg-orange-standard border border-r rounded-full h-8 w-8 p-1.5">
613-
<img src={muteIcon} alt="mute icon" />
614-
</button>
615-
<button className="bg-orange-standard border border-r rounded-full h-8 w-8 p-1.5">
616-
<img src={videoIcon} onClick={muteCam} alt="video icon" />
617-
</button>
618-
<button className="bg-orange-standard border border-r rounded-full h-8 w-8 p-1.5">
619-
<img src={phoneIcon} onClick={() => {
610+
<div style={{ height: "calc(100vh - 47px)" }} className="overflow-hidden duration-300 flex flex-col items-center justify-center">
611+
<div style={{ height: "calc(100vh - 47px)" }} className="flex overflow-hidden justify-between flex-col bg-theme-teal-dark relative py-2 px-2.5 shadow-lg">
612+
{/* <button><img className="h-4 my-2" src={upArrow} alt="scroll up arrow" /></button> */}
613+
<div style={{ width: "200px" }} className="flex flex-col items-center overflow-y-auto justify-center pt-10" id="video-grid">
614+
</div>
615+
{/* <button><img className="h-4 my-2 transform rotate-180" src={upArrow} alt="scroll down arrow" /></button> */}
616+
<div className="flex items-center absolute backdrop-filter backdrop-blur left-0 bottom-0 pt-2 rounded-lg pb-4 w-full justify-around mt-2">
617+
<button onClick={() => {
618+
setIsMuteMic(!isMuteMic)
619+
muteMic();
620+
}} className={` ${isMuteMic ? "bg-theme-orange text-white" : " bg-theme-grey"} border transform duration-300 hover:shadow-2xl shadow-lg border-transparent rounded-full h-8 w-8 p-1.5`}>
621+
<img src={muteIcon} alt="mute icon" />
622+
</button>
623+
<button onClick={() => {
624+
setIsMuteCam(!isMuteCam)
625+
muteCam();
626+
}} className={`${isMuteCam ? "bg-theme-orange text-white" : " bg-theme-grey"} border transform duration-300 hover:shadow-2xl shadow-lg border-transparent rounded-full h-8 w-8 p-1.5`}>
627+
<img src={videoIcon} onClick={muteCam} alt="video icon" />
628+
</button>
629+
<button onClick={() => {
620630
window.location.href = "/"
621-
}} alt="phone icon" />
622-
</button>
631+
}} className=" bg-red-600 border border-transparent shadow-2xl rounded-full h-8 w-8 p-1.5">
632+
<img src={phoneIcon} alt="phone icon" />
633+
</button>
634+
</div>
623635
</div>
624636
</div>
625637
)

‎src/images/icons/mute.svg‎

Lines changed: 3 additions & 3 deletions
Loading

‎src/images/icons/phone.svg‎

Lines changed: 2 additions & 2 deletions
Loading

‎src/index.css‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -54,10 +54,11 @@ body,html{
5454
}
5555

5656
video{
57-
height: 200px;
57+
height: 200px !important;
5858
width: 200px;
5959
object-fit: cover;
60-
border-radius: 0.25rem;
60+
border-radius: 0.5rem;
61+
box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
6162
}
6263

6364
/* resizable panels */
@@ -113,6 +114,8 @@ video{
113114

114115
.video-off{
115116
position: relative;
117+
height: 200px;
118+
width: 200px;
116119
}
117120

118121
.video-off:after{

‎src/index.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import App from './App';
55
import reportWebVitals from './reportWebVitals';
66
import { Auth0Provider } from '@auth0/auth0-react';
77
import ReactGA from 'react-ga';
8+
import { ChakraProvider } from "@chakra-ui/react"
89

910
const trackingId = process.env.REACT_APP_TRACKING_ID
1011
const domain = process.env.REACT_APP_AUTH0_DOMAIN;
@@ -19,7 +20,9 @@ ReactDOM.render(
1920
clientId={clientId}
2021
redirectUri={window.location.origin}
2122
>
22-
<App />
23+
<ChakraProvider>
24+
<App />
25+
</ChakraProvider>
2326
</Auth0Provider>
2427
</React.StrictMode>,
2528
document.getElementById('root')

‎tailwind.config.js‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,17 @@ module.exports = {
77
'purple-standard': '#22223B',
88
'purple-dark': '#4A4E69',
99
'orange-standard': '#EE9B00',
10-
'gray-standard': '#1F2833'
10+
'gray-standard': '#1F2833',
11+
'theme-dark-blue': '#05060a',
12+
'theme-cyan': '#16cff7',
13+
'theme-teal-light': '#14b0d5',
14+
'theme-teal-dark': '#224f5c',
15+
'theme-blue': '#0a6ab4',
16+
'theme-orange': '#cd8951',
17+
'theme-grey': '#c8d8d7'
18+
},
19+
padding: {
20+
"54": '260px',
1121
}
1222
},
1323
},

0 commit comments

Comments
 (0)