From e92129d8eaf15882b0c9bd7de4534f9840f46965 Mon Sep 17 00:00:00 2001
From: nicola <nthouliss@gmail.com>
Date: Thu, 19 Mar 2020 15:07:14 +1100
Subject: [PATCH] Add audio functionality to videos

co-authored-by: mitchemmc <mitchemmc@gmail.com>
---
 src/components/Party.js      | 4 ++--
 src/components/PartyVideo.js | 4 ++--
 src/routes/Game.js           | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/Party.js b/src/components/Party.js
index 0ec7e87..e3f267d 100644
--- a/src/components/Party.js
+++ b/src/components/Party.js
@@ -4,11 +4,11 @@ import { Flex } from "theme-ui";
 
 import PartyVideo from "./PartyVideo";
 
-function Party({ streams }) {
+function Party({ streams, localStreamId }) {
   return (
     <Flex p={4} bg="highlight" sx={{ flexDirection: "column", width: "200px" }}>
       {Object.entries(streams).map(([id, stream]) => (
-        <PartyVideo key={id} stream={stream} />
+        <PartyVideo key={id} stream={stream} muted={id === localStreamId}/>
       ))}
     </Flex>
   );
diff --git a/src/components/PartyVideo.js b/src/components/PartyVideo.js
index 5c8ca1a..d835b66 100644
--- a/src/components/PartyVideo.js
+++ b/src/components/PartyVideo.js
@@ -1,6 +1,6 @@
 import React, { useRef, useEffect } from "react";
 
-function PartyVideo({ stream }) {
+function PartyVideo({ stream, muted }) {
   const videoRef = useRef();
 
   useEffect(() => {
@@ -9,7 +9,7 @@ function PartyVideo({ stream }) {
     }
   }, [stream]);
 
-  return <video ref={videoRef} autoPlay muted />;
+  return <video ref={videoRef} autoPlay muted={muted} />;
 }
 
 export default PartyVideo;
diff --git a/src/routes/Game.js b/src/routes/Game.js
index 21551a8..854662d 100644
--- a/src/routes/Game.js
+++ b/src/routes/Game.js
@@ -83,7 +83,7 @@ function Game() {
           />
         </Box>
       </Flex>
-      <Party streams={streams} />
+      <Party streams={streams} localStreamId={peerId} />
       <Flex sx={{ justifyContent: "center" }}>
         <Image src={imageSource} />
       </Flex>