Merge branch 'main' of github.com:ReflectsLight/al-quran.reflectslight.io into production

src/js/components/SurahStream/Stream.tsx

@@ -0,0 +1,81 @@
+import React, { useEffect, useMemo, useRef } from "react";
+import type { Surah, Ayah, TAyat, TLocale } from "Quran";
+import { AudioControl } from "~/components/AudioControl";
+import { formatNumber, TFunction } from "~/lib/t";
+import classNames from "classnames";
+
+type Props = {
+  locale: TLocale;
+  surah: Surah;
+  stream: TAyat;
+  endOfStream: boolean;
+  isPaused: boolean;
+  t: TFunction;
+};
+
+export function Stream({
+  locale,
+  surah,
+  stream,
+  endOfStream,
+  isPaused,
+  t,
+}: Props) {
+  const className = endOfStream || isPaused ? ["scroll-y"] : [];
+  const ref = useRef<HTMLUListElement>(null);
+  const ul = useMemo<JSX.Element>(() => {
+    const ltr = locale.direction === "ltr";
+    const rtl = locale.direction === "rtl";
+    return (
+      <ul
+        lang={locale.name}
+        className={classNames(
+          "body stream scroll-y list-none p-0 m-0 h-5/6",
+          ...className,
+          { "mt-6": ltr || rtl },
+        )}
+        ref={ref}
+      >
+        {stream.map((ayah: Ayah) => {
+          return (
+            <li
+              key={ayah.id}
+              className={classNames("ayah fade", { "mb-5": rtl, "mb-4": ltr })}
+            >
+              <span className="flex h-8 items-center">
+                <AudioControl
+                  hidden={!(isPaused || endOfStream)}
+                  audio={new Audio()}
+                  surah={surah}
+                  ayah={ayah}
+                  onStatusChange={(status, [, disable]) => {
+                    if (status === "end") {
+                      disable();
+                    }
+                  }}
+                />
+                <span>
+                  {t(locale, "surah")} {formatNumber(locale, surah.id)}
+                  {t(locale, "comma")} {t(locale, "ayah")}{" "}
+                  {formatNumber(locale, ayah.id)} {t(locale, "of")}{" "}
+                  {formatNumber(locale, surah.ayat.length)}
+                </span>
+              </span>
+              <p className="m-0">{ayah.body}</p>
+            </li>
+          );
+        })}
+      </ul>
+    );
+  }, [stream.length, isPaused, endOfStream]);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (el) {
+      const top = el.scrollHeight;
+      el.scrollTo({ behavior: "smooth", top });
+    }
+  }, [stream.length]);
+
+  return ul;
+}