diff --git a/src/components/Nickname.js b/src/components/Nickname.js index 72fee68..290d410 100644 --- a/src/components/Nickname.js +++ b/src/components/Nickname.js @@ -1,134 +1,21 @@ -import React, { useState, useRef, useEffect } from "react"; -import { Text, IconButton, Box } from "theme-ui"; +import React from "react"; +import { Text } from "theme-ui"; -import Banner from "./Banner"; +import Stream from "./Stream"; function Nickname({ nickname, stream }) { - 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(); - } - }} - > - {nickname} - {stream && ( - - - {streamMuted ? ( - - ) : ( - - )} - - - )} - {stream && - setShowStreamInteractBanner(false)} - > - - - {nickname} has started streaming. Click - { - - - - - - } - to listen. - - - - + + {nickname} + {stream && } + ); } diff --git a/src/components/Stream.js b/src/components/Stream.js new file mode 100644 index 0000000..a557a15 --- /dev/null +++ b/src/components/Stream.js @@ -0,0 +1,122 @@ +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(); + } + }} + > + + {streamMuted ? ( + + ) : ( + + )} + + + {stream &&