From a98703978f7dea8c4862f3fc503e94269a8226d3 Mon Sep 17 00:00:00 2001
From: 0x1eef <0x1eef@protonmail.com>
Date: Thu, 13 Jul 2023 18:17:07 -0300
Subject: [PATCH] Render <audio> tag conditionally

---
 src/js/components/Timer.tsx   |  2 +-
 src/js/pages/surah/stream.tsx | 13 ++++++++-----
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/js/components/Timer.tsx b/src/js/components/Timer.tsx
index e00a99d..80b855d 100644
--- a/src/js/components/Timer.tsx
+++ b/src/js/components/Timer.tsx
@@ -34,7 +34,7 @@ export function Timer({
   }, [ayah.id, soundOn]);
 
   useEffect(() => {
-    if (isStalled || isPaused) {
+    if ((soundOn && isStalled) || isPaused) {
       return;
     } else if (ms <= 0) {
       setStream([...stream, surah.ayat[ayah.id]]);
diff --git a/src/js/pages/surah/stream.tsx b/src/js/pages/surah/stream.tsx
index 8e9d760..9c51e08 100644
--- a/src/js/pages/surah/stream.tsx
+++ b/src/js/pages/surah/stream.tsx
@@ -87,23 +87,26 @@ function SurahStream({ node, reciters, locale, slice, paused, t }: Props) {
 
   useEffect(() => {
     const audio = audioRef.current;
-    if (!audio) {
+    if (!readyToRender) {
       return;
     } else if (isPaused || !soundOn) {
       audio.pause();
     } else if (soundOn) {
-      audio.play().catch(() => setSoundOn(false));
+      audio.play();
     }
-  }, [stream, isPaused, soundOn]);
+  }, [readyToRender, stream, isPaused, soundOn]);
 
   useEffect(() => {
+    if (!readyToRender) {
+      return;
+    }
     const audio = audioRef.current;
     audio.addEventListener("ended", () => audio.setAttribute("src", src));
     audio.addEventListener("stalled", () => setIsStalled(true));
     audio.addEventListener("waiting", () => setIsStalled(true));
     audio.addEventListener("playing", () => setIsStalled(false));
     audio.addEventListener("play", () => setIsStalled(false));
-  }, []);
+  }, [readyToRender]);
 
   return (
     <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([])} />}
       </div>
-      <audio src={src} ref={audioRef} />
+      {readyToRender && <audio src={src} ref={audioRef} />}
     </div>
   );
 }