diff --git a/src/components/Nickname.js b/src/components/Nickname.js
index f06f570..5600ab4 100644
--- a/src/components/Nickname.js
+++ b/src/components/Nickname.js
@@ -4,7 +4,7 @@ import { Text, IconButton, Box } from "theme-ui";
import Banner from "./Banner";
function Nickname({ nickname, stream }) {
- const [streamMuted, setStreamMuted] = useState(true);
+ const [streamMuted, setStreamMuted] = useState(false);
const [showStreamInteractBanner, setShowStreamInteractBanner] = useState(
false
);
@@ -13,10 +13,33 @@ function Nickname({ nickname, stream }) {
useEffect(() => {
if (audioRef.current) {
audioRef.current.srcObject = stream;
- setShowStreamInteractBanner(true);
+ // Try and auto play the audio
+ audioRef.current
+ .play()
+ .then(() => {
+ // Played fine
+ })
+ .catch(() => {
+ // Unable to autoplay
+ setStreamMuted(true);
+ setShowStreamInteractBanner(true);
+ });
}
}, [stream]);
+ function toggleMute() {
+ if (audioRef.current) {
+ if (streamMuted) {
+ audioRef.current.play().then(() => {
+ setStreamMuted(false);
+ setShowStreamInteractBanner(false);
+ });
+ } else {
+ setStreamMuted(true);
+ }
+ }
+ }
+
return (
<>
{
if (stream) {
- setStreamMuted(!streamMuted);
- setShowStreamInteractBanner(false);
+ toggleMute();
}
}}
>
@@ -64,9 +86,7 @@ function Nickname({ nickname, stream }) {
)}
- {stream && (
-
- )}
+ {stream && }
{
- setStreamMuted(false);
- setShowStreamInteractBanner(false);
- }}
+ onClick={toggleMute}
>