Atlas48/grungnet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Updated stream to only show interaction banner when autoplay was unsuccesful

Browse Source
This commit is contained in:
Mitchell McCaffrey 2020-04-09 14:24:52 +10:00
parent ae4c857c65
commit 296401f472
1 changed files with 28 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/components/Nickname.js
View File

@ -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;
setShowStreamInteractBanner(true); // Try and auto play the audio
audioRef.current
.play()
.then(() => {
// Played fine
})
.catch(() => {
// Unable to autoplay
setStreamMuted(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"