Updated stream to only show interaction banner when autoplay was unsuccesful
This commit is contained in:
parent
ae4c857c65
commit
296401f472
@ -4,7 +4,7 @@ import { Text, IconButton, Box } from "theme-ui";
|
|||||||
import Banner from "./Banner";
|
import Banner from "./Banner";
|
||||||
|
|
||||||
function Nickname({ nickname, stream }) {
|
function Nickname({ nickname, stream }) {
|
||||||
const [streamMuted, setStreamMuted] = useState(true);
|
const [streamMuted, setStreamMuted] = useState(false);
|
||||||
const [showStreamInteractBanner, setShowStreamInteractBanner] = useState(
|
const [showStreamInteractBanner, setShowStreamInteractBanner] = useState(
|
||||||
false
|
false
|
||||||
);
|
);
|
||||||
@ -13,10 +13,33 @@ function Nickname({ nickname, stream }) {
|
|||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (audioRef.current) {
|
if (audioRef.current) {
|
||||||
audioRef.current.srcObject = stream;
|
audioRef.current.srcObject = stream;
|
||||||
|
// Try and auto play the audio
|
||||||
|
audioRef.current
|
||||||
|
.play()
|
||||||
|
.then(() => {
|
||||||
|
// Played fine
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
// Unable to autoplay
|
||||||
|
setStreamMuted(true);
|
||||||
setShowStreamInteractBanner(true);
|
setShowStreamInteractBanner(true);
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}, [stream]);
|
}, [stream]);
|
||||||
|
|
||||||
|
function toggleMute() {
|
||||||
|
if (audioRef.current) {
|
||||||
|
if (streamMuted) {
|
||||||
|
audioRef.current.play().then(() => {
|
||||||
|
setStreamMuted(false);
|
||||||
|
setShowStreamInteractBanner(false);
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
setStreamMuted(true);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Text
|
<Text
|
||||||
@ -30,8 +53,7 @@ function Nickname({ nickname, stream }) {
|
|||||||
}}
|
}}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
if (stream) {
|
if (stream) {
|
||||||
setStreamMuted(!streamMuted);
|
toggleMute();
|
||||||
setShowStreamInteractBanner(false);
|
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
@ -64,9 +86,7 @@ function Nickname({ nickname, stream }) {
|
|||||||
</svg>
|
</svg>
|
||||||
</IconButton>
|
</IconButton>
|
||||||
)}
|
)}
|
||||||
{stream && (
|
{stream && <audio ref={audioRef} playsInline muted={streamMuted} />}
|
||||||
<audio ref={audioRef} autoPlay playsInline muted={streamMuted} />
|
|
||||||
)}
|
|
||||||
</Text>
|
</Text>
|
||||||
<Banner
|
<Banner
|
||||||
isOpen={showStreamInteractBanner}
|
isOpen={showStreamInteractBanner}
|
||||||
@ -92,10 +112,7 @@ function Nickname({ nickname, stream }) {
|
|||||||
}}
|
}}
|
||||||
aria-label={"Unmute Player"}
|
aria-label={"Unmute Player"}
|
||||||
title={"Unmute Player"}
|
title={"Unmute Player"}
|
||||||
onClick={() => {
|
onClick={toggleMute}
|
||||||
setStreamMuted(false);
|
|
||||||
setShowStreamInteractBanner(false);
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
<svg
|
<svg
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
Loading…
Reference in New Issue
Block a user