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

Defaulted to muting stream and showing banner to unmute

Browse Source
This commit is contained in:
Mitchell McCaffrey 2020-04-09 13:39:25 +10:00
parent 1f5e3106d0
commit 1afc8b8d68
3 changed files with 142 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/components/Banner.js Normal file
View File

@ -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 (
<Modal
isOpen={isOpen}
onRequestClose={onRequestClose}
style={{
overlay: { bottom: "0", top: "initial" },
content: {
backgroundColor: theme.colors.highlight,
top: "initial",
left: "50%",
right: 0,
bottom: 0,
border: "none",
padding: "8px",
margin: "8px",
maxWidth: "500px",
transform: "translateX(-50%)",
},
}}
>
{children}
<Close
m={0}
sx={{ position: "absolute", top: "4px", right: 0 }}
onClick={onRequestClose}
/>
</Modal>
);
}
export default Banner;

4
src/components/Modal.js
View File

@ -18,8 +18,8 @@ function StyledModal({ isOpen, onRequestClose, children }) {
right: "auto", right: "auto",
bottom: "auto", bottom: "auto",
marginRight: "-50%", marginRight: "-50%",
transform: "translate(-50%, -50%)" transform: "translate(-50%, -50%)",
} },
}} }}
> >
{children} {children}

150
src/components/Nickname.js
View File

@ -1,64 +1,118 @@
import React, { useState, useRef, useEffect } from "react"; 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 }) { function Nickname({ nickname, stream }) {
const [streamMuted, setStreamMuted] = useState(false); const [streamMuted, setStreamMuted] = useState(true);
const [showStreamInteractBanner, setShowStreamInteractBanner] = useState(
false
);
const audioRef = useRef(); const audioRef = useRef();
useEffect(() => { useEffect(() => {
if (audioRef.current) { if (audioRef.current) {
audioRef.current.srcObject = stream; audioRef.current.srcObject = stream;
audioRef.current.onplay = () => { setShowStreamInteractBanner(true);
setStreamMuted(audioRef.current.defaultMuted);
};
} }
}, [stream]); }, [stream]);
return ( return (
<Text <>
as="p" <Text
my={1} as="p"
variant="body2" my={1}
sx={{ variant="body2"
position: "relative", sx={{
cursor: stream ? "pointer" : "default", position: "relative",
fontSize: "12px", cursor: stream ? "pointer" : "default",
}} fontSize: "12px",
onClick={() => stream && setStreamMuted(!streamMuted)} }}
> onClick={() => {
{nickname} if (stream) {
{stream && ( setStreamMuted(!streamMuted);
<IconButton setShowStreamInteractBanner(false);
sx={{ }
width: "14px", }}
height: "14px", >
padding: 0, {nickname}
marginLeft: "2px", {stream && (
position: "absolute", <IconButton
bottom: "-2px", sx={{
}} width: "14px",
aria-label={streamMuted ? "Unmute Player" : "Mute Player"} height: "14px",
title={streamMuted ? "Unmute Player" : "Mute Player"} padding: 0,
> marginLeft: "2px",
<svg position: "absolute",
xmlns="http://www.w3.org/2000/svg" bottom: "-2px",
height="14" }}
viewBox="0 0 24 24" aria-label={streamMuted ? "Unmute Player" : "Mute Player"}
width="14" title={streamMuted ? "Unmute Player" : "Mute Player"}
fill="currentcolor"
> >
{streamMuted ? ( <svg
<path d="M3.63 3.63c-.39.39-.39 1.02 0 1.41L7.29 8.7 7 9H4c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1h3l3.29 3.29c.63.63 1.71.18 1.71-.71v-4.17l4.18 4.18c-.49.37-1.02.68-1.6.91-.36.15-.58.53-.58.92 0 .72.73 1.18 1.39.91.8-.33 1.55-.77 2.22-1.31l1.34 1.34c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L5.05 3.63c-.39-.39-1.02-.39-1.42 0zM19 12c0 .82-.15 1.61-.41 2.34l1.53 1.53c.56-1.17.88-2.48.88-3.87 0-3.83-2.4-7.11-5.78-8.4-.59-.23-1.22.23-1.22.86v.19c0 .38.25.71.61.85C17.18 6.54 19 9.06 19 12zm-8.71-6.29l-.17.17L12 7.76V6.41c0-.89-1.08-1.33-1.71-.7zM16.5 12c0-1.77-1.02-3.29-2.5-4.03v1.79l2.48 2.48c.01-.08.02-.16.02-.24z" /> xmlns="http://www.w3.org/2000/svg"
) : ( height="14"
<path d="M3 10v4c0 .55.45 1 1 1h3l3.29 3.29c.63.63 1.71.18 1.71-.71V6.41c0-.89-1.08-1.34-1.71-.71L7 9H4c-.55 0-1 .45-1 1zm13.5 2c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 4.45v.2c0 .38.25.71.6.85C17.18 6.53 19 9.06 19 12s-1.82 5.47-4.4 6.5c-.36.14-.6.47-.6.85v.2c0 .63.63 1.07 1.21.85C18.6 19.11 21 15.84 21 12s-2.4-7.11-5.79-8.4c-.58-.23-1.21.22-1.21.85z" /> viewBox="0 0 24 24"
)} width="14"
</svg> fill="currentcolor"
</IconButton> >
)} {streamMuted ? (
{stream && ( <path d="M3.63 3.63c-.39.39-.39 1.02 0 1.41L7.29 8.7 7 9H4c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1h3l3.29 3.29c.63.63 1.71.18 1.71-.71v-4.17l4.18 4.18c-.49.37-1.02.68-1.6.91-.36.15-.58.53-.58.92 0 .72.73 1.18 1.39.91.8-.33 1.55-.77 2.22-1.31l1.34 1.34c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L5.05 3.63c-.39-.39-1.02-.39-1.42 0zM19 12c0 .82-.15 1.61-.41 2.34l1.53 1.53c.56-1.17.88-2.48.88-3.87 0-3.83-2.4-7.11-5.78-8.4-.59-.23-1.22.23-1.22.86v.19c0 .38.25.71.61.85C17.18 6.54 19 9.06 19 12zm-8.71-6.29l-.17.17L12 7.76V6.41c0-.89-1.08-1.33-1.71-.7zM16.5 12c0-1.77-1.02-3.29-2.5-4.03v1.79l2.48 2.48c.01-.08.02-.16.02-.24z" />
<audio ref={audioRef} autoPlay playsInline muted={streamMuted} /> ) : (
)} <path d="M3 10v4c0 .55.45 1 1 1h3l3.29 3.29c.63.63 1.71.18 1.71-.71V6.41c0-.89-1.08-1.34-1.71-.71L7 9H4c-.55 0-1 .45-1 1zm13.5 2c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 4.45v.2c0 .38.25.71.6.85C17.18 6.53 19 9.06 19 12s-1.82 5.47-4.4 6.5c-.36.14-.6.47-.6.85v.2c0 .63.63 1.07 1.21.85C18.6 19.11 21 15.84 21 12s-2.4-7.11-5.79-8.4c-.58-.23-1.21.22-1.21.85z" />
</Text> )}
</svg>
</IconButton>
)}
{stream && (
<audio ref={audioRef} autoPlay playsInline muted={streamMuted} />
)}
</Text>
<Banner
isOpen={showStreamInteractBanner}
onRequestClose={() => setShowStreamInteractBanner(false)}
>
<Box p={1}>
<Text
as="p"
variant="body2"
sx={{
fontSize: "12px",
}}
>
{nickname} has started streaming. Click
{
<IconButton
sx={{
width: "14px",
height: "14px",
padding: 0,
margin: "0 4px",
verticalAlign: "bottom",
}}
aria-label={"Unmute Player"}
title={"Unmute Player"}
onClick={() => {
setStreamMuted(false);
setShowStreamInteractBanner(false);
}}
>
<svg
xmlns="http://www.w3.org/2000/svg"
height="14"
viewBox="0 0 24 24"
width="14"
fill="currentcolor"
>
<path d="M3.63 3.63c-.39.39-.39 1.02 0 1.41L7.29 8.7 7 9H4c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1h3l3.29 3.29c.63.63 1.71.18 1.71-.71v-4.17l4.18 4.18c-.49.37-1.02.68-1.6.91-.36.15-.58.53-.58.92 0 .72.73 1.18 1.39.91.8-.33 1.55-.77 2.22-1.31l1.34 1.34c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L5.05 3.63c-.39-.39-1.02-.39-1.42 0zM19 12c0 .82-.15 1.61-.41 2.34l1.53 1.53c.56-1.17.88-2.48.88-3.87 0-3.83-2.4-7.11-5.78-8.4-.59-.23-1.22.23-1.22.86v.19c0 .38.25.71.61.85C17.18 6.54 19 9.06 19 12zm-8.71-6.29l-.17.17L12 7.76V6.41c0-.89-1.08-1.33-1.71-.7zM16.5 12c0-1.77-1.02-3.29-2.5-4.03v1.79l2.48 2.48c.01-.08.02-.16.02-.24z" />
</svg>
</IconButton>
}
to listen.
</Text>
</Box>
</Banner>
</>
); );
} }