Issue 22: WebRTC implementation

client/package.json

@@ -10,6 +10,7 @@
     "react-dom": "^16.8.6",
     "react-router-dom": "^5.0.1",
     "react-scripts": "^3.4.1",
+    "simple-peer": "^9.7.2",
     "socket.io-client": "^2.3.0"
   },
   "scripts": {

client/src/App.js

@@ -5,6 +5,7 @@ import "./App.css";
 
 import { theme } from "./themes/theme";
 import { AuthContext } from "./context/AuthContext";
+import { RTCContextProvider } from "./context/RTCContext";
 
 import LoginOrSignUp from "./pages/LoginOrSignUp";
 import CreateOrJoinGame from "./pages/CreateOrJoinGame";
@@ -56,13 +57,14 @@ function App() {
             component={PreGameLobby}
             auth={auth}
           />
-          <ProtectedRoute
-            exact
-            path="/session/:gameId"
-            component={GameSession}
-            auth={auth}
-          />
-
+          <RTCContextProvider>
+            <ProtectedRoute
+              exact
+              path="/session/:gameId"
+              component={GameSession}
+              auth={auth}
+            />
+          </RTCContextProvider>
           <Route component={PageNotFound} />
         </Switch>
       </BrowserRouter>

client/src/components/game-session/CurrentPlayerTile.js

@@ -0,0 +1,68 @@
+import React from "react";
+import {
+    Grid,
+    Card,
+    CardMedia,
+    makeStyles
+} from "@material-ui/core";
+import CheckCircleIcon from "@material-ui/icons/CheckCircle";
+
+function CurrentPlayerTile({ email, videoStream }) {
+    const classes = useStyles();
+
+    return (
+        <Grid item xs={6}>
+            <Card className={classes.card} raised>
+                <CardMedia className={classes.playerCam} component="video" ref={videoStream} muted autoPlay />
+                <div className={classes.playerInfoContainer}>
+                    <div className={classes.playerInfo}>
+                        {email}:<strong className={classes.clue}>Clue</strong>
+                    </div>
+                    <CheckCircleIcon className={classes.icon} />
+                </div>
+            </Card>
+        </Grid>
+    )
+};
+
+const useStyles = makeStyles((theme) => ({
+    card: {
+        maxWidth: "350px",
+        margin: "0 auto",
+        borderRadius: theme.shape.borderRadius,
+    },
+    playerCam: {
+        minWidth: "250px",
+        height: "250px",
+        backgroundSize: "contain", // change to cover with video I think is best option - Darren
+        borderBottom: "solid 1px rgba(255,255,255,0.15)",
+    },
+    playerInfoContainer: {
+        margin: "0.75rem 1.5rem",
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        // border: "solid pink 1px",
+    },
+    playerInfo: {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        // border: "solid green 1px",
+    },
+    clue: {
+        margin: "0 0 0.25rem 1rem",
+        fontSize: "2rem",
+    },
+    icon: {
+        fontSize: theme.icon.small.fontSize,
+    },
+    video: {
+        maxWidth: "350px",
+        margin: "0 auto",
+        borderRadius: theme.shape.borderRadius,
+    }
+}));
+
+
+export default CurrentPlayerTile

client/src/components/game-session/GuessPanel.js

@@ -7,7 +7,6 @@ import useForm from "../../utils/hooks/useForm";
 function GuessPanel() {
   const classes = useStyles();
   const [guess, setGuess] = useForm({ guess: "" });
-  console.log(guess);
 
   function submitGuess(event) {
     event.preventDefault();

client/src/components/game-session/PlayerPanel.js

@@ -1,43 +1,37 @@
-import React from "react";
+import React, { useContext, useEffect } from "react";
 import {
   Container,
   Grid,
-  Card,
-  CardMedia,
   makeStyles,
 } from "@material-ui/core";
-import CheckCircleIcon from "@material-ui/icons/CheckCircle";
+import CurrentPlayerTile from './CurrentPlayerTile';
+import { RTCContext } from '../../context/RTCContext';
+import PlayerTile from "./PlayerTile";
 
-function PlayerPanel() {
+function PlayerPanel({ players, gameId }) {
   const classes = useStyles();
-  const players = [
-    "BOT Vitaliy",
-    "BOT Cayde-6",
-    "BOT Cortana",
-    "BOT Doomslayer",
-  ];
-  const staticImg =
-    "https://www.bungie.net/common/destiny2_content/icons/28f45711da09ad4b22c67be7bacf038a.png";
+  const currentPlayer = JSON.parse(localStorage.getItem('user'));
+  const { currentPlayerVideo, initVideoCall, peers } = useContext(RTCContext);
+  useEffect(()=>{
+    initVideoCall(gameId);
+  },[gameId, initVideoCall])
+
   return (
     <Container className={classes.sectionContainer} component="section">
       <Grid container spacing={6}>
-        {players.map((player) => (
-          <Grid key={player} item xs={6}>
-            <Card className={classes.card} raised>
-              <CardMedia className={classes.playerCam} image={staticImg} />
-              <div className={classes.playerInfoContainer}>
-                <div className={classes.playerInfo}>
-                  {player}:<strong className={classes.clue}>Clue</strong>
-                </div>
-                <CheckCircleIcon className={classes.icon} />
-              </div>
-            </Card>
-          </Grid>
-        ))}
+        <CurrentPlayerTile email={currentPlayer.email} videoStream={currentPlayerVideo} />
+        {
+          players.map((player) => (
+            player.email !== currentPlayer.email &&
+            <PlayerTile key={player.email} email={player.email} videoPeer={peers[player.email]} />
+          ))
+        }
       </Grid>
     </Container>
   );
 }
+
+
 // Uncomment all borders to see where things line up on the page
 // There could be a better way of laying out where things should be
 // but I am currently unsure - Darren
@@ -48,38 +42,7 @@ const useStyles = makeStyles((theme) => ({
     justifyContent: "center",
     alignItems: "center",
     // border: "solid white 1px",
-  },
-  card: {
-    maxWidth: "350px",
-    margin: "0 auto",
-    borderRadius: theme.shape.borderRadius,
-  },
-  playerCam: {
-    minWidth: "250px",
-    height: "250px",
-    backgroundSize: "contain", // change to cover with video I think is best option - Darren
-    borderBottom: "solid 1px rgba(255,255,255,0.15)",
-  },
-  playerInfoContainer: {
-    margin: "0.75rem 1.5rem",
-    display: "flex",
-    justifyContent: "space-between",
-    alignItems: "center",
-    // border: "solid pink 1px",
-  },
-  playerInfo: {
-    display: "flex",
-    justifyContent: "space-between",
-    alignItems: "center",
-    // border: "solid green 1px",
-  },
-  clue: {
-    margin: "0 0 0.25rem 1rem",
-    fontSize: "2rem",
-  },
-  icon: {
-    fontSize: theme.icon.small.fontSize,
-  },
+  }
 }));
 
 export default PlayerPanel;

client/src/components/game-session/PlayerTile.js

@@ -0,0 +1,75 @@
+import React, { useRef, useEffect } from "react";
+import {
+    Grid,
+    Card,
+    CardMedia,
+    makeStyles
+} from "@material-ui/core";
+import CheckCircleIcon from "@material-ui/icons/CheckCircle";
+
+function PlayerTile({ email, videoPeer }) {
+    const classes = useStyles();
+    const videoRef = useRef();
+    useEffect(() => {
+        if (videoPeer) {
+            videoPeer.on("stream", stream => {
+                videoRef.current.srcObject = stream;
+            });
+        }
+    }, [videoPeer]);
+
+    return (
+        <Grid item xs={6}>
+            <Card className={classes.card} raised>
+                <CardMedia className={classes.playerCam} component="video" ref={videoRef} autoPlay/>
+                <div className={classes.playerInfoContainer}>
+                    <div className={classes.playerInfo}>
+                        {email}:<strong className={classes.clue}>Clue</strong>
+                    </div>
+                    <CheckCircleIcon className={classes.icon} />
+                </div>
+            </Card>
+        </Grid>
+    )
+};
+
+const useStyles = makeStyles((theme) => ({
+    card: {
+        maxWidth: "350px",
+        margin: "0 auto",
+        borderRadius: theme.shape.borderRadius,
+    },
+    playerCam: {
+        minWidth: "250px",
+        height: "250px",
+        backgroundSize: "contain", // change to cover with video I think is best option - Darren
+        borderBottom: "solid 1px rgba(255,255,255,0.15)",
+    },
+    playerInfoContainer: {
+        margin: "0.75rem 1.5rem",
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        // border: "solid pink 1px",
+    },
+    playerInfo: {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        // border: "solid green 1px",
+    },
+    clue: {
+        margin: "0 0 0.25rem 1rem",
+        fontSize: "2rem",
+    },
+    icon: {
+        fontSize: theme.icon.small.fontSize,
+    },
+    video: {
+        maxWidth: "350px",
+        margin: "0 auto",
+        borderRadius: theme.shape.borderRadius,
+    }
+}));
+
+export default PlayerTile;

client/src/context/AuthContext.js

@@ -69,7 +69,6 @@ function AuthContextProvider({ children }) {
         throw new Error(response.status);
       }
       const json = await response.json();
-      console.log(response);
       localStorage.setItem("user", JSON.stringify(json));
       setAuth(true);
       // clear errors after successful login

client/src/context/GameContext.js

@@ -4,7 +4,7 @@ import sockets from "../utils/sockets";
 const GameContext = createContext();
 
 const GameContextProvider = ({ children }) => {
-  const [game, setGame] = useState({ gameId: null, players: [] });
+  const [game, setGame] = useState({ gameId: null, isStarted: false, players: [] });
   const [errors, setErrors] = useState({
     inviteError: "",
     joinError: "",
@@ -35,6 +35,11 @@ const GameContextProvider = ({ children }) => {
         msg: `${joinedPlayer} joined the game!`,
       });
     });
+
+    sockets.on("game-started", () => {
+      setGame((game) => ({ ...game, isStarted: true }));
+    });
+
   }, []);
 
   const createGame = async () => {
@@ -145,6 +150,11 @@ const GameContextProvider = ({ children }) => {
     return false;
   };
 
+  const startGame = ()=> {
+    setGame((game) => ({ ...game, isStarted: true }));
+    sockets.emit("start-game", game.gameId);
+  }
+
   return (
     <GameContext.Provider
       value={{
@@ -158,6 +168,7 @@ const GameContextProvider = ({ children }) => {
         closeGameNotification,
         isCurrentUserHost,
         setGameId,
+        startGame
       }}
     >
       {children}