Added simple stream sharing

src/components/Nickname.js

@@ -3,7 +3,7 @@ import { Text, Box, Input, Button, Label, IconButton, Flex } from "theme-ui";
 
 import Modal from "./Modal";
 
-function Nickname({ nickname, allowChanging, onChange }) {
+function Nickname({ nickname, allowChanging, onChange, onStream }) {
   const [isChangeModalOpen, setIsChangeModalOpen] = useState(false);
   function openModal() {
     setIsChangeModalOpen(true);
@@ -32,16 +32,8 @@ function Nickname({ nickname, allowChanging, onChange }) {
         variant="caption"
         sx={{
           fontSize: 10,
-          cursor: allowChanging ? "pointer" : "default",
-          ":hover": allowChanging && {
-            color: "primary",
-          },
-          ":active": allowChanging && {
-            color: "secondary",
-          },
           position: "relative",
         }}
-        onClick={() => allowChanging && openModal()}
       >
         {nickname}
         {allowChanging && (
@@ -54,7 +46,33 @@ function Nickname({ nickname, allowChanging, onChange }) {
               position: "absolute",
               bottom: "-2px",
             }}
+            aria-label="Start Radio Stream"
+            onClick={() => allowChanging && onStream()}
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              height="10"
+              viewBox="0 0 24 24"
+              width="10"
+              fill="currentcolor"
+            >
+              <path d="M3.24 6.15C2.51 6.43 2 7.17 2 8v12c0 1.1.9 2 2 2h16c1.11 0 2-.9 2-2V8c0-1.1-.9-2-2-2H8.3l7.43-3c.46-.19.68-.71.49-1.17-.19-.46-.71-.68-1.17-.49L3.24 6.15zM7 20c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm13-8h-2v-1c0-.55-.45-1-1-1s-1 .45-1 1v1H4V9c0-.55.45-1 1-1h14c.55 0 1 .45 1 1v3z" />
+            </svg>
+          </IconButton>
+        )}
+        {allowChanging && (
+          <IconButton
+            sx={{
+              width: "10px",
+              height: "10px",
+              padding: 0,
+              margin: "2px",
+              position: "absolute",
+              bottom: "-2px",
+              transform: "translateX(12px)",
+            }}
             aria-label="Change Nickname"
+            onClick={() => allowChanging && openModal()}
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -93,6 +111,7 @@ function Nickname({ nickname, allowChanging, onChange }) {
 Nickname.defaultProps = {
   allowChanging: false,
   onChange: () => {},
+  onStream: () => {},
 };
 
 export default Nickname;

src/components/Party.js

@@ -3,8 +3,17 @@ import { Flex, Box, Text } from "theme-ui";
 
 import AddPartyMemberButton from "./AddPartyMemberButton";
 import Nickname from "./Nickname";
+import Stream from "./Stream";
 
-function Party({ nickname, partyNicknames, gameId, onNicknameChange }) {
+function Party({
+  nickname,
+  partyNicknames,
+  gameId,
+  onNicknameChange,
+  stream,
+  partyStreams,
+  onStreamStart,
+}) {
   return (
     <Flex
       p={3}
@@ -36,10 +45,19 @@ function Party({ nickname, partyNicknames, gameId, onNicknameChange }) {
           nickname={nickname || ""}
           allowChanging
           onChange={onNicknameChange}
+          onStream={onStreamStart}
         />
         {Object.entries(partyNicknames).map(([id, partyNickname]) => (
           <Nickname nickname={partyNickname} key={id} />
         ))}
+        {(stream || Object.keys(partyStreams).length !== 0) && (
+          <Text>Streams</Text>
+        )}
+        {stream && <Stream stream={stream} muted />}
+        {partyStreams &&
+          Object.entries(partyStreams).map(([id, partyStream]) => (
+            <Stream stream={partyStream} key={id} />
+          ))}
       </Box>
       <Box>
         <AddPartyMemberButton gameId={gameId} />

src/components/Stream.js

@@ -0,0 +1,26 @@
+import React, { useRef, useEffect } from "react";
+
+function Stream({ stream, muted }) {
+  const videoRef = useRef();
+  useEffect(() => {
+    if (videoRef.current) {
+      videoRef.current.srcObject = stream;
+    }
+  }, [stream]);
+
+  return (
+    <video
+      ref={videoRef}
+      autoPlay
+      playsInline
+      muted={muted}
+      style={{ width: "100%" }}
+    />
+  );
+}
+
+Stream.defaultProps = {
+  muted: false,
+};
+
+export default Stream;