Merge branch 'main' of github.com:ReflectsLight/al-quran.reflectslight.io into production
This commit is contained in:
commit
9e982bb635
1 changed files with 81 additions and 0 deletions
81
src/js/components/SurahStream/Stream.tsx
Normal file
81
src/js/components/SurahStream/Stream.tsx
Normal file
|
@ -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;
|
||||
}
|
Loading…
Reference in a new issue