Defaulted to muting stream and showing banner to unmute

src/components/Banner.js

@@ -0,0 +1,38 @@
+import React from "react";
+import Modal from "react-modal";
+import { useThemeUI, Close } from "theme-ui";
+
+function Banner({ isOpen, onRequestClose, children }) {
+  const { theme } = useThemeUI();
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onRequestClose={onRequestClose}
+      style={{
+        overlay: { bottom: "0", top: "initial" },
+        content: {
+          backgroundColor: theme.colors.highlight,
+          top: "initial",
+          left: "50%",
+          right: 0,
+          bottom: 0,
+          border: "none",
+          padding: "8px",
+          margin: "8px",
+          maxWidth: "500px",
+          transform: "translateX(-50%)",
+        },
+      }}
+    >
+      {children}
+      <Close
+        m={0}
+        sx={{ position: "absolute", top: "4px", right: 0 }}
+        onClick={onRequestClose}
+      />
+    </Modal>
+  );
+}
+
+export default Banner;

src/components/Modal.js

@@ -18,8 +18,8 @@ function StyledModal({ isOpen, onRequestClose, children }) {
           right: "auto",
           bottom: "auto",
           marginRight: "-50%",
-          transform: "translate(-50%, -50%)"
-        }
+          transform: "translate(-50%, -50%)",
+        },
       }}
     >
       {children}

src/components/Nickname.js

@@ -1,20 +1,24 @@
 import React, { useState, useRef, useEffect } from "react";
-import { Text, IconButton } from "theme-ui";
+import { Text, IconButton, Box } from "theme-ui";
+
+import Banner from "./Banner";
 
 function Nickname({ nickname, stream }) {
-  const [streamMuted, setStreamMuted] = useState(false);
+  const [streamMuted, setStreamMuted] = useState(true);
+  const [showStreamInteractBanner, setShowStreamInteractBanner] = useState(
+    false
+  );
   const audioRef = useRef();
 
   useEffect(() => {
     if (audioRef.current) {
       audioRef.current.srcObject = stream;
-      audioRef.current.onplay = () => {
-        setStreamMuted(audioRef.current.defaultMuted);
-      };
+      setShowStreamInteractBanner(true);
     }
   }, [stream]);
 
   return (
+    <>
       <Text
         as="p"
         my={1}
@@ -24,7 +28,12 @@ function Nickname({ nickname, stream }) {
           cursor: stream ? "pointer" : "default",
           fontSize: "12px",
         }}
-      onClick={() => stream && setStreamMuted(!streamMuted)}
+        onClick={() => {
+          if (stream) {
+            setStreamMuted(!streamMuted);
+            setShowStreamInteractBanner(false);
+          }
+        }}
       >
         {nickname}
         {stream && (
@@ -59,6 +68,51 @@ function Nickname({ nickname, stream }) {
           <audio ref={audioRef} autoPlay playsInline muted={streamMuted} />
         )}
       </Text>
+      <Banner
+        isOpen={showStreamInteractBanner}
+        onRequestClose={() => setShowStreamInteractBanner(false)}
+      >
+        <Box p={1}>
+          <Text
+            as="p"
+            variant="body2"
+            sx={{
+              fontSize: "12px",
+            }}
+          >
+            {nickname} has started streaming. Click
+            {
+              <IconButton
+                sx={{
+                  width: "14px",
+                  height: "14px",
+                  padding: 0,
+                  margin: "0 4px",
+                  verticalAlign: "bottom",
+                }}
+                aria-label={"Unmute Player"}
+                title={"Unmute Player"}
+                onClick={() => {
+                  setStreamMuted(false);
+                  setShowStreamInteractBanner(false);
+                }}
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  height="14"
+                  viewBox="0 0 24 24"
+                  width="14"
+                  fill="currentcolor"
+                >
+                  <path d="M3.63 3.63c-.39.39-.39 1.02 0 1.41L7.29 8.7 7 9H4c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1h3l3.29 3.29c.63.63 1.71.18 1.71-.71v-4.17l4.18 4.18c-.49.37-1.02.68-1.6.91-.36.15-.58.53-.58.92 0 .72.73 1.18 1.39.91.8-.33 1.55-.77 2.22-1.31l1.34 1.34c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L5.05 3.63c-.39-.39-1.02-.39-1.42 0zM19 12c0 .82-.15 1.61-.41 2.34l1.53 1.53c.56-1.17.88-2.48.88-3.87 0-3.83-2.4-7.11-5.78-8.4-.59-.23-1.22.23-1.22.86v.19c0 .38.25.71.61.85C17.18 6.54 19 9.06 19 12zm-8.71-6.29l-.17.17L12 7.76V6.41c0-.89-1.08-1.33-1.71-.7zM16.5 12c0-1.77-1.02-3.29-2.5-4.03v1.79l2.48 2.48c.01-.08.02-.16.02-.24z" />
+                </svg>
+              </IconButton>
+            }
+            to listen.
+          </Text>
+        </Box>
+      </Banner>
+    </>
   );
 }