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

Fix audio sharing volume control

Browse Source
This commit is contained in:
Mitchell McCaffrey 2020-10-16 08:25:51 +11:00
parent af7ea2c7f3
commit e6d2fb5640
1 changed files with 10 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/party/Stream.js
View File

@ -6,7 +6,7 @@ import StreamMuteIcon from "../../icons/StreamMuteIcon";
import Banner from "../Banner"; import Banner from "../Banner";
function Stream({ stream, nickname }) { function Stream({ stream, nickname }) {
const [streamVolume, setStreamVolume] = useState(1); const [streamVolume, setStreamVolume] = useState(0);
const [showStreamInteractBanner, setShowStreamInteractBanner] = useState( const [showStreamInteractBanner, setShowStreamInteractBanner] = useState(
false false
); );
@ -21,6 +21,7 @@ function Stream({ stream, nickname }) {
.play() .play()
.then(() => { .then(() => {
// Played fine // Played fine
setStreamVolume(1);
}) })
.catch(() => { .catch(() => {
// Unable to autoplay // Unable to autoplay
@ -46,12 +47,17 @@ function Stream({ stream, nickname }) {
function handleVolumeChange(event) { function handleVolumeChange(event) {
const volume = parseFloat(event.target.value); const volume = parseFloat(event.target.value);
setStreamVolume(volume); setStreamVolume(volume);
if (showStreamInteractBanner) {
audioRef.current.play().then(() => {
setShowStreamInteractBanner(false);
});
}
} }
// Use an audio context gain node to control volume to go past 100% // Use an audio context gain node to control volume to go past 100%
const audioGainRef = useRef(); const audioGainRef = useRef();
useEffect(() => { useEffect(() => {
if (stream) { if (stream && !streamMuted) {
let audioContext = new AudioContext(); let audioContext = new AudioContext();
let source = audioContext.createMediaStreamSource(stream); let source = audioContext.createMediaStreamSource(stream);
let gainNode = audioContext.createGain(); let gainNode = audioContext.createGain();
@ -60,7 +66,7 @@ function Stream({ stream, nickname }) {
gainNode.connect(audioContext.destination); gainNode.connect(audioContext.destination);
audioGainRef.current = gainNode; audioGainRef.current = gainNode;
} }
}, [stream]); }, [stream, streamMuted]);
// Platforms like iOS don't allow you to control audio volume // Platforms like iOS don't allow you to control audio volume
// Detect this by trying to change the audio volume // Detect this by trying to change the audio volume
@ -71,7 +77,7 @@ function Stream({ stream, nickname }) {
if (audioRef.current) { if (audioRef.current) {
const prevVolume = audioRef.current.volume; const prevVolume = audioRef.current.volume;
audioRef.current.volume = 0.5; audioRef.current.volume = 0.5;
setIsVolumeControlAvailable(audioRef.current.volume !== 0.5); setIsVolumeControlAvailable(audioRef.current.volume === 0.5);
audioRef.current.volume = prevVolume; audioRef.current.volume = prevVolume;
} }
}, [stream]); }, [stream]);