Removed stream component and set muted state when stream is loaded
This commit is contained in:
parent
09ac7cf3b7
commit
1c978c999c
@ -1,10 +1,16 @@
|
||||
import React, { useState } from "react";
|
||||
import React, { useState, useRef, useEffect } from "react";
|
||||
import { Text, IconButton } from "theme-ui";
|
||||
|
||||
import Stream from "./Stream";
|
||||
|
||||
function Nickname({ nickname, stream }) {
|
||||
const [streamMuted, setStreamMuted] = useState(false);
|
||||
const audioRef = useRef();
|
||||
|
||||
useEffect(() => {
|
||||
if (audioRef.current) {
|
||||
audioRef.current.srcObject = stream;
|
||||
setStreamMuted(audioRef.current.defaultMuted);
|
||||
}
|
||||
}, [stream]);
|
||||
|
||||
return (
|
||||
<Text
|
||||
@ -47,7 +53,9 @@ function Nickname({ nickname, stream }) {
|
||||
</svg>
|
||||
</IconButton>
|
||||
)}
|
||||
{stream && <Stream stream={stream} muted={streamMuted} />}
|
||||
{stream && (
|
||||
<audio ref={audioRef} autoPlay playsInline muted={streamMuted} />
|
||||
)}
|
||||
</Text>
|
||||
);
|
||||
}
|
||||
|
@ -1,19 +0,0 @@
|
||||
import React, { useRef, useEffect } from "react";
|
||||
|
||||
function Stream({ stream, muted }) {
|
||||
const audioRef = useRef();
|
||||
useEffect(() => {
|
||||
if (audioRef.current) {
|
||||
audioRef.current.srcObject = stream;
|
||||
audioRef.current.play();
|
||||
}
|
||||
}, [stream]);
|
||||
|
||||
return <audio ref={audioRef} playsInline muted={muted} />;
|
||||
}
|
||||
|
||||
Stream.defaultProps = {
|
||||
muted: false,
|
||||
};
|
||||
|
||||
export default Stream;
|
Loading…
Reference in New Issue
Block a user