diff --git a/src/components/Banner.js b/src/components/Banner.js
new file mode 100644
index 0000000..b916d67
--- /dev/null
+++ b/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 (
+
+ {children}
+
+
+ );
+}
+
+export default Banner;
diff --git a/src/components/Modal.js b/src/components/Modal.js
index 66ee3c2..607d2a8 100644
--- a/src/components/Modal.js
+++ b/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}
diff --git a/src/components/Nickname.js b/src/components/Nickname.js
index 4f3faec..f06f570 100644
--- a/src/components/Nickname.js
+++ b/src/components/Nickname.js
@@ -1,64 +1,118 @@
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 (
- stream && setStreamMuted(!streamMuted)}
- >
- {nickname}
- {stream && (
-
-
-
- )}
- {stream && (
-
- )}
-
+
+
+ )}
+ {stream && (
+
+ )}
+
+ setShowStreamInteractBanner(false)}
+ >
+
+
+ {nickname} has started streaming. Click
+ {
+ {
+ setStreamMuted(false);
+ setShowStreamInteractBanner(false);
+ }}
+ >
+
+
+ }
+ to listen.
+
+
+
+ >
);
}