Render <audio> tag conditionally
This commit is contained in:
parent
2c74cc9dd2
commit
a98703978f
2 changed files with 9 additions and 6 deletions
|
@ -34,7 +34,7 @@ export function Timer({
|
||||||
}, [ayah.id, soundOn]);
|
}, [ayah.id, soundOn]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (isStalled || isPaused) {
|
if ((soundOn && isStalled) || isPaused) {
|
||||||
return;
|
return;
|
||||||
} else if (ms <= 0) {
|
} else if (ms <= 0) {
|
||||||
setStream([...stream, surah.ayat[ayah.id]]);
|
setStream([...stream, surah.ayat[ayah.id]]);
|
||||||
|
|
|
@ -87,23 +87,26 @@ function SurahStream({ node, reciters, locale, slice, paused, t }: Props) {
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const audio = audioRef.current;
|
const audio = audioRef.current;
|
||||||
if (!audio) {
|
if (!readyToRender) {
|
||||||
return;
|
return;
|
||||||
} else if (isPaused || !soundOn) {
|
} else if (isPaused || !soundOn) {
|
||||||
audio.pause();
|
audio.pause();
|
||||||
} else if (soundOn) {
|
} else if (soundOn) {
|
||||||
audio.play().catch(() => setSoundOn(false));
|
audio.play();
|
||||||
}
|
}
|
||||||
}, [stream, isPaused, soundOn]);
|
}, [readyToRender, stream, isPaused, soundOn]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
if (!readyToRender) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
const audio = audioRef.current;
|
const audio = audioRef.current;
|
||||||
audio.addEventListener("ended", () => audio.setAttribute("src", src));
|
audio.addEventListener("ended", () => audio.setAttribute("src", src));
|
||||||
audio.addEventListener("stalled", () => setIsStalled(true));
|
audio.addEventListener("stalled", () => setIsStalled(true));
|
||||||
audio.addEventListener("waiting", () => setIsStalled(true));
|
audio.addEventListener("waiting", () => setIsStalled(true));
|
||||||
audio.addEventListener("playing", () => setIsStalled(false));
|
audio.addEventListener("playing", () => setIsStalled(false));
|
||||||
audio.addEventListener("play", () => setIsStalled(false));
|
audio.addEventListener("play", () => setIsStalled(false));
|
||||||
}, []);
|
}, [readyToRender]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={classNames("content", "theme", theme, locale)}>
|
<div className={classNames("content", "theme", theme, locale)}>
|
||||||
|
@ -162,7 +165,7 @@ function SurahStream({ node, reciters, locale, slice, paused, t }: Props) {
|
||||||
)}
|
)}
|
||||||
{readyToRender && endOfStream && <RefreshShape onClick={() => setStream([])} />}
|
{readyToRender && endOfStream && <RefreshShape onClick={() => setStream([])} />}
|
||||||
</div>
|
</div>
|
||||||
<audio src={src} ref={audioRef} />
|
{readyToRender && <audio src={src} ref={audioRef} />}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue