Add audio functionality to videos

co-authored-by: mitchemmc <mitchemmc@gmail.com>

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>
   );

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;

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>