40 lines
1.1 KiB
JavaScript
40 lines
1.1 KiB
JavaScript
import React, { useRef, useEffect } from 'react';
|
|
import { useUIState } from '@custom/shared/contexts/UIStateProvider';
|
|
import PropTypes from 'prop-types';
|
|
|
|
export const AudioTrack = ({ track }) => {
|
|
const audioRef = useRef(null);
|
|
const { setShowAutoplayFailedModal } = useUIState();
|
|
|
|
useEffect(() => {
|
|
const audioTag = audioRef.current;
|
|
if (!audioTag) return false;
|
|
let playTimeout;
|
|
|
|
const handleCanPlay = () => {
|
|
playTimeout = setTimeout(() => {
|
|
setShowAutoplayFailedModal(true);
|
|
}, 1500);
|
|
};
|
|
const handlePlay = () => {
|
|
clearTimeout(playTimeout);
|
|
};
|
|
audioTag.addEventListener('canplay', handleCanPlay);
|
|
audioTag.addEventListener('play', handlePlay);
|
|
audioTag.srcObject = new MediaStream([track]);
|
|
|
|
return () => {
|
|
audioTag?.removeEventListener('canplay', handleCanPlay);
|
|
audioTag?.removeEventListener('play', handlePlay);
|
|
};
|
|
}, [setShowAutoplayFailedModal, track]);
|
|
|
|
return track ? <audio autoPlay playsInline ref={audioRef} /> : null;
|
|
};
|
|
|
|
AudioTrack.propTypes = {
|
|
track: PropTypes.object,
|
|
};
|
|
|
|
export default AudioTrack;
|