From a3a9f4abb5f0f50e6592a9f17512d4617272566d Mon Sep 17 00:00:00 2001
From: 0x1eef <0x1eef@protonmail.com>
Date: Mon, 4 Dec 2023 05:03:35 -0300
Subject: [PATCH] Really fix auto-scroll on iOS

---
 src/css/pages/SurahStream.scss | 12 +++++++++++-
 src/js/components/Stream.tsx   | 11 +++++------
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/css/pages/SurahStream.scss b/src/css/pages/SurahStream.scss
index 9d45ae4..bf0db04 100644
--- a/src/css/pages/SurahStream.scss
+++ b/src/css/pages/SurahStream.scss
@@ -14,7 +14,6 @@ body .root .content.theme {
 
   ul.body.stream {
     scrollbar-gutter: stable;
-
     li.ayah {
       padding: 10px 0 10px 0;
       span.title {
@@ -45,6 +44,17 @@ body .root .content.theme {
     }
   }
 
+  ul.body.stream.stopped {
+    overflow-y: auto;
+  }
+
+  ul.body.stream.playing {
+    overflow-y: auto;
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
   footer {
     .timer {
       display: flex;
diff --git a/src/js/components/Stream.tsx b/src/js/components/Stream.tsx
index 8008467..a94364f 100644
--- a/src/js/components/Stream.tsx
+++ b/src/js/components/Stream.tsx
@@ -24,12 +24,11 @@ export function Stream({
   t,
 }: Props) {
   const className = classNames("body", "stream");
-  const style: React.CSSProperties =
-    endOfStream || isPaused ? { overflowY: "auto" } : { overflowY: "hidden" };
+  const playState = endOfStream || isPaused ? "stopped" : "playing";
   const ref = useRef<HTMLUListElement>();
   const ul = useMemo<JSX.Element>(() => {
     return (
-      <ul lang={locale} className={className} style={style} ref={ref}>
+      <ul lang={locale} className={classNames(className, playState)} ref={ref}>
         {stream.map((ayah: Quran.Ayah) => {
           return (
             <li key={ayah.id} className="ayah fade">
@@ -54,13 +53,13 @@ export function Stream({
         })}
       </ul>
     );
-  }, [stream.length]);
+  }, [stream.length, isPaused]);
 
   useEffect(() => {
     const el = ref.current;
     if (el) {
-      const top = 1024 + el.scrollHeight + el.scrollTop;
-      el.scrollBy({ behavior: "smooth", top });
+      const top = el.scrollHeight;
+      el.scrollTo({ behavior: "smooth", top });
     }
   }, [stream.length]);