Test

nacheco · Aug 11, 2022 · 7c1ddea · 7c1ddea
1 parent 35a1081
commit 7c1ddea
Show file tree

Hide file tree

Showing 9 changed files with 1,106 additions and 77 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,6 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@material-ui/core": "^4.12.4",
+    "@material-ui/icons": "^4.11.3",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
@@ -12,11 +14,14 @@
     "flowbite-react": "^0.1.5",
     "nodemon": "^2.0.19",
     "react": "^18.2.0",
+    "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.4.0",
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
+    "simple-peer": "^9.11.1",
     "socket.io": "^4.5.1",
+    "socket.io-client": "^4.5.1",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

diff --git a/src/components/Dashboard/Dashboard.jsx b/src/components/Dashboard/Dashboard.jsx
@@ -1,7 +1,53 @@
-import React from "react";
+import React from 'react';
+import { Typography, AppBar } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+
+import VideoPlayer from './VideoPlayer';
+import Sidebar from './Sidebar';
+import Notifications from './Notification';
+
+
+const useStyles = makeStyles((theme) => ({
+  appBar: {
+    borderRadius: 15,
+    margin: '30px 100px',
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: '600px',
+    border: '2px solid black',
+
+    [theme.breakpoints.down('xs')]: {
+      width: '90%',
+    },
+  },
+  image: {
+    marginLeft: '15px',
+  },
+  wrapper: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    width: '100%',
+  },
+}));
 
 const Dashboard = () => {
-  return <div>Dashboard</div>;
+  const classes = useStyles();
+
+  return (
+    <div className={classes.wrapper}>
+      <AppBar className={classes.appBar} position="static" color="inherit">
+        <Typography variant="h2" align="center">Video Chat</Typography>
+      </AppBar>
+      <VideoPlayer />
+      <Sidebar>
+        <Notifications />
+      </Sidebar>
+    </div>
+  );
 };
 
+
 export default Dashboard;
diff --git a/src/components/Dashboard/Notification.jsx b/src/components/Dashboard/Notification.jsx
@@ -0,0 +1,23 @@
+import React, { useContext } from 'react';
+import { Button } from '@material-ui/core';
+
+import { SocketContext } from '../../Context';
+
+const Notifications = () => {
+  const { answerCall, call, callAccepted } = useContext(SocketContext);
+
+  return (
+    <>
+      {call.isReceivingCall && !callAccepted && (
+        <div style={{ display: 'flex', justifyContent: 'space-around' }}>
+          <h1>{call.name} is calling:</h1>
+          <Button variant="contained" color="primary" onClick={answerCall}>
+            Answer
+          </Button>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default Notifications;
diff --git a/src/components/Dashboard/Sidebar.jsx b/src/components/Dashboard/Sidebar.jsx
@@ -0,0 +1,80 @@
+import React, { useState, useContext } from 'react';
+import { Button, TextField, Grid, Typography, Container, Paper } from '@material-ui/core';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+import { Assignment, Phone, PhoneDisabled } from '@material-ui/icons';
+import { makeStyles } from '@material-ui/core/styles';
+
+import { SocketContext } from '../../Context';
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  gridContainer: {
+    width: '100%',
+    [theme.breakpoints.down('xs')]: {
+      flexDirection: 'column',
+    },
+  },
+  container: {
+    width: '600px',
+    margin: '35px 0',
+    padding: 0,
+    [theme.breakpoints.down('xs')]: {
+      width: '80%',
+    },
+  },
+  margin: {
+    marginTop: 20,
+  },
+  padding: {
+    padding: 20,
+  },
+  paper: {
+    padding: '10px 20px',
+    border: '2px solid black',
+  },
+}));
+
+const Sidebar = ({ children }) => {
+  const { me, callAccepted, name, setName, callEnded, leaveCall, callUser } = useContext(SocketContext);
+  const [idToCall, setIdToCall] = useState('');
+  const classes = useStyles();
+
+  return (
+    <Container className={classes.container}>
+      <Paper elevation={10} className={classes.paper}>
+        <form className={classes.root} noValidate autoComplete="off">
+          <Grid container className={classes.gridContainer}>
+            <Grid item xs={12} md={6} className={classes.padding}>
+              <Typography gutterBottom variant="h6">Account Info</Typography>
+              <TextField label="Name" value={name} onChange={(e) => setName(e.target.value)} fullWidth />
+              <CopyToClipboard text={me} className={classes.margin}>
+                <Button variant="contained" color="primary" fullWidth startIcon={<Assignment fontSize="large" />}>
+                  Copy Your ID
+                </Button>
+              </CopyToClipboard>
+            </Grid>
+            <Grid item xs={12} md={6} className={classes.padding}>
+              <Typography gutterBottom variant="h6">Make a call</Typography>
+              <TextField label="ID to call" value={idToCall} onChange={(e) => setIdToCall(e.target.value)} fullWidth />
+              {callAccepted && !callEnded ? (
+                <Button variant="contained" color="secondary" startIcon={<PhoneDisabled fontSize="large" />} fullWidth onClick={leaveCall} className={classes.margin}>
+                  Hang Up
+                </Button>
+              ) : (
+                <Button variant="contained" color="primary" startIcon={<Phone fontSize="large" />} fullWidth onClick={() => callUser(idToCall)} className={classes.margin}>
+                  Call
+                </Button>
+              )}
+            </Grid>
+          </Grid>
+        </form>
+        {children}
+      </Paper>
+    </Container>
+  );
+};
+
+export default Sidebar;
diff --git a/src/components/Dashboard/VideoPlayer.jsx b/src/components/Dashboard/VideoPlayer.jsx
@@ -0,0 +1,52 @@
+import React, { useContext } from 'react';
+import { Grid, Typography, Paper, makeStyles } from '@material-ui/core';
+
+import { SocketContext } from '../../Context';
+
+const useStyles = makeStyles((theme) => ({
+  video: {
+    width: '550px',
+    [theme.breakpoints.down('xs')]: {
+      width: '300px',
+    },
+  },
+  gridContainer: {
+    justifyContent: 'center',
+    [theme.breakpoints.down('xs')]: {
+      flexDirection: 'column',
+    },
+  },
+  paper: {
+    padding: '10px',
+    border: '2px solid black',
+    margin: '10px',
+  },
+}));
+
+const VideoPlayer = () => {
+  const { name, callAccepted, myVideo, userVideo, callEnded, stream, call } = useContext(SocketContext);
+  const classes = useStyles();
+
+  return (
+    <Grid container className={classes.gridContainer}>
+      {stream && (
+        <Paper className={classes.paper}>
+          <Grid item xs={12} md={6}>
+            <Typography variant="h5" gutterBottom>{name || 'Name'}</Typography>
+            <video playsInline muted ref={myVideo} autoPlay className={classes.video} />
+          </Grid>
+        </Paper>
+      )}
+      {callAccepted && !callEnded && (
+        <Paper className={classes.paper}>
+          <Grid item xs={12} md={6}>
+            <Typography variant="h5" gutterBottom>{call.name || 'Name'}</Typography>
+            <video playsInline ref={userVideo} autoPlay className={classes.video} />
+          </Grid>
+        </Paper>
+      )}
+    </Grid>
+  );
+};
+
+export default VideoPlayer;
diff --git a/src/components/Landing-Page/Home.jsx b/src/components/Landing-Page/Home.jsx
@@ -24,14 +24,14 @@ const Home = () => {
           </p>
           <div className="flex items-center">
             <a
-              href="/#"
+              href="/dashboard"
               className="inline-flex items-center justify-center px-5 py-4 md:px-8 md:py-4  mr-3 text-base font-medium text-center text-white rounded-[5px] bg-slate-900 hover:bg-indigo-500 focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-900 transition-all"
             >
               <BsCameraVideo className="w-5 h-5 ml-2 mr-2" />
               Create a Call
             </a>
             <a
-              href="/#"
+              href="https://github.com/Zeviks/volt-v2"
               className="inline-flex items-center justify-center px-3 py-3 text-base font-medium text-center text-white bg-indigo-300 border-slate-900 rounded-lg hover:bg-indigo-500 hover:text-white transition-all"
             >
               <FaGithub className="w-[2rem] h-[2rem]" />

diff --git a/src/components/Landing-Page/Navbar.jsx b/src/components/Landing-Page/Navbar.jsx
@@ -16,7 +16,7 @@ const Navbar = () => {
             type="button"
             className="text-black hover:text-white border-[1px] border-black hover:bg-indigo-500 font-medium rounded-[5px] text-sm px-8 py-2.5 text-center mr-3 md:mr-0 transition-all"
           >
-            Contact
+            Try It
           </button>
           <button
             data-collapse-toggle="navbar-cta"

diff --git a/src/components/Landing-Page/Steps.jsx b/src/components/Landing-Page/Steps.jsx
@@ -51,7 +51,7 @@ const Steps = () => {
           </div>
           <p className="text-sm text-slate-900">
             To get started, click the <br />"
-            <a href="/#" className="text-indigo-500 hover:text-indigo-400">
+            <a href="/dashboard" className="text-indigo-500 hover:text-indigo-400">
               Create a Call
             </a>
             " to be taken to the call dashboard.
@@ -90,14 +90,14 @@ const Steps = () => {
             </p>
           </div>
           <p className="text-sm text-slate-900">
-            If you would like someone to call you, just have them input your
+            If you would like someone to call you, just have them enter your
             code to call you.
           </p>
         </div>
       </div>
       <div className="text-center">
         <a
-          href="/"
+          href="/dashboard"
           className="inline-flex items-center justify-center w-full h-12 px-6 font-medium tracking-wide text-white bg-indigo-500 hover:bg-indigo-400 transition duration-200 rounded shadow-md md:w-auto bg-deep-purple-accent-400 hover:bg-deep-purple-accent-700 focus:shadow-outline focus:outline-none"
         >
           Get Started