import React, { useState, useRef, useEffect } from "react";
import { Text, IconButton, Box } from "theme-ui";
import Banner from "./Banner";
function Stream({ stream, nickname }) {
const [streamMuted, setStreamMuted] = useState(false);
const [showStreamInteractBanner, setShowStreamInteractBanner] = useState(
false
);
const audioRef = useRef();
useEffect(() => {
if (audioRef.current) {
audioRef.current.srcObject = stream;
// 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) {
toggleMute();
}
}}
>
{stream && }
setShowStreamInteractBanner(false)}
>
{nickname} has started streaming. Click
{
}
to listen.
);
}
export default Stream;