0x1eef/al-quran.reflectslight.io
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

useRef / useMemo in Stream.tsx

Browse source
This commit is contained in:
0x1eef 2023-12-04 01:36:58 -03:00
parent f2db229dd0
commit 1a7af1be2a
1 changed files with 34 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
src/js/components/Stream.tsx
View file

@ -1,4 +1,4 @@
import React, { useEffect } from "react"; import React, { useEffect, useMemo, useRef } from "react";
import * as Quran from "lib/Quran"; import * as Quran from "lib/Quran";
import { AudioControl } from "components/AudioControl"; import { AudioControl } from "components/AudioControl";
import { formatNumber, TFunction } from "lib/i18n"; import { formatNumber, TFunction } from "lib/i18n";
@ -26,37 +26,43 @@ export function Stream({
const className = classNames("body", "stream"); const className = classNames("body", "stream");
const style: React.CSSProperties = const style: React.CSSProperties =
endOfStream || isPaused ? { overflowY: "auto" } : { overflowY: "hidden" }; endOfStream || isPaused ? { overflowY: "auto" } : { overflowY: "hidden" };
const ayat = stream.map((ayah: Quran.Ayah) => { const ul = useRef<HTMLUListElement>();
return ( const ayat = useMemo<JSX.Element[]>(() => {
<li key={ayah.id} className="ayah fade"> return stream.map((ayah: Quran.Ayah) => {
<span className="title"> return (
{(isPaused || endOfStream) && ( <li key={ayah.id} className="ayah fade">
<AudioControl <span className="title">
recitation={recitation} {(isPaused || endOfStream) && (
surah={surah} <AudioControl
ayah={ayah} recitation={recitation}
onEnd={turnOffSound => turnOffSound()} surah={surah}
/> ayah={ayah}
)} onEnd={turnOffSound => turnOffSound()}
<span> />
{t(locale, "surah")} {formatNumber(surah.id, locale)} )}
{t(locale, "comma")} {t(locale, "ayah")}{" "} <span>
{formatNumber(ayah.id, locale)} {t(locale, "surah")} {formatNumber(surah.id, locale)}
{t(locale, "comma")} {t(locale, "ayah")}{" "}
{formatNumber(ayah.id, locale)}
</span>
</span> </span>
</span> <p>{ayah.text}</p>
<p>{ayah.text}</p> </li>
</li> );
); });
});
useEffect(() => {
const ul: HTMLElement = document.querySelector("ul.stream")!;
const top = ul.offsetHeight + ul.scrollTop;
ul.scrollBy({ behavior: "smooth", top });
}, [stream.length]); }, [stream.length]);
useEffect(() => {
const el = ul.current;
if (el) {
const top = el.scrollHeight + el.scrollTop;
el.scrollTo({ behavior: "smooth", top });
el.scrollIntoView({ behavior: "smooth" });
}
}, [ul.current, stream.length]);
return ( return (
<ul lang={locale} className={className} style={style}> <ul lang={locale} className={className} style={style} ref={ul}>
{ayat} {ayat}
</ul> </ul>
); );