From a6d8cacd9357ce2f4a66fda7acd693689bd15640 Mon Sep 17 00:00:00 2001 From: 0x1eef <0x1eef@protonmail.com> Date: Fri, 15 Sep 2023 09:39:53 -0300 Subject: [PATCH] Remove `Quran.Slice` Fix #147 --- src/js/components/Stream.tsx | 19 ++------------ src/js/lib/Quran/Slice.ts | 48 ----------------------------------- src/js/pages/surah/stream.tsx | 33 +++--------------------- 3 files changed, 6 insertions(+), 94 deletions(-) delete mode 100644 src/js/lib/Quran/Slice.ts diff --git a/src/js/components/Stream.tsx b/src/js/components/Stream.tsx index 2b85f1e80..6a95cd572 100644 --- a/src/js/components/Stream.tsx +++ b/src/js/components/Stream.tsx @@ -1,28 +1,18 @@ import * as Quran from "lib/Quran"; import React, { useEffect } from "react"; import { formatNumber, TFunction } from "lib/i18n"; -import { Slice } from "lib/Quran/Slice"; import classNames from "classnames"; interface Props { surah: Quran.Surah; stream: Quran.Ayat; locale: Quran.Locale; - slice: Slice; endOfStream: boolean; isPaused: boolean; t: TFunction; } -export function Stream({ - surah, - stream, - locale, - slice, - endOfStream, - isPaused, - t, -}: Props) { +export function Stream({ surah, stream, locale, endOfStream, isPaused, t }: Props) { const className = classNames("body", "stream"); const style: React.CSSProperties = endOfStream || isPaused ? { overflowY: "auto" } : { overflowY: "hidden" }; @@ -40,12 +30,7 @@ export function Stream({ useEffect(() => { const ul: HTMLElement = document.querySelector("ul.stream")!; - if (slice.coversOneAyah) { - const li: HTMLLIElement = ul.querySelector("li:last-child")!; - li.scrollIntoView(); - } else { - ul.scroll({ top: ul.scrollHeight, behavior: "smooth" }); - } + ul.scroll({ top: ul.scrollHeight, behavior: "smooth" }); }, [stream]); return ( diff --git a/src/js/lib/Quran/Slice.ts b/src/js/lib/Quran/Slice.ts deleted file mode 100644 index 0ba0fb6d2..000000000 --- a/src/js/lib/Quran/Slice.ts +++ /dev/null @@ -1,48 +0,0 @@ -export interface Slice { - begin: number; - end: number | null; - coversOneAyah: boolean; - coversOneSurah: boolean; - coversSubsetOfSurah: boolean; - subsetLength: number; - toParam: () => string | null; -} - -export function Slice(begin: number, end: number | null): Slice { - const self: Slice = Object.create(null); - - self.begin = begin; - self.end = end; - self.coversOneAyah = end === null; - self.coversOneSurah = begin === 1 && end === 286; - self.coversSubsetOfSurah = end !== null && begin >= 1 && end < 286; - self.subsetLength = getSubsetLength(self); - - return self; -} - -const getSubsetLength = (slice: Slice) => { - const { begin, end } = slice; - if (end) { - return end - (begin - 1); - } else { - return 0; - } -}; - -const digitsRange = /^(\d{1,3})\.\.(\d{1,3})$/; -const digits = /^\d{1,3}$/; -Slice.fromParam = function (param: string | null): Slice { - if (!param) { - return Slice(1, 286); - } - const match = param.match(digitsRange); - if (match) { - const [, begin, end] = match; - return Slice(parseInt(begin), parseInt(end)); - } else if (digits.test(param)) { - return Slice(parseInt(param), null); - } else { - return Slice(1, 286); - } -}; diff --git a/src/js/pages/surah/stream.tsx b/src/js/pages/surah/stream.tsx index 7f31d8be2..359f45709 100644 --- a/src/js/pages/surah/stream.tsx +++ b/src/js/pages/surah/stream.tsx @@ -16,14 +16,12 @@ import { LoadingShape, } from "components/Shape"; import * as Quran from "lib/Quran"; -import { Slice } from "lib/Quran/Slice"; import { i18n, TFunction } from "lib/i18n"; interface Props { node: HTMLScriptElement; reciters: Quran.Reciter[]; locale: Quran.Locale; - slice: Slice; paused: boolean; t: TFunction; } @@ -40,7 +38,7 @@ const getAudioURL = (reciter: Quran.Reciter, surah: Quran.Surah, stream: Quran.A return `${baseUrl}/${surah.id}/${ayah?.id}.mp3`; }; -function SurahStream({ node, reciters, locale, slice, paused, t }: Props) { +function SurahStream({ node, reciters, locale, paused, t }: Props) { const [stream, setStream] = useState([]); const [isPaused, setIsPaused] = useState(paused); const [soundOn, setSoundOn] = useState(false); @@ -53,19 +51,9 @@ function SurahStream({ node, reciters, locale, slice, paused, t }: Props) { ); const readyToRender = stream.length > 0; const audioRef = useRef(null); - const getAyahParam = (slice: Slice, stream: Quran.Ayat) => { - if (slice.coversSubsetOfSurah) { - return `${slice.begin}..${slice.end}`; - } else { - return stream.length; - } - }; const onLanguageChange = (o: SelectOption) => { const locale = o.value; - const params = [ - ["ayah", getAyahParam(slice, stream)], - ["paused", isPaused ? "t" : null], - ]; + const params = [["paused", isPaused ? "t" : null]]; const query = params .filter(([, v]) => v) .flatMap(([k, v]) => `${k}=${v}`) @@ -74,11 +62,7 @@ function SurahStream({ node, reciters, locale, slice, paused, t }: Props) { }; useEffect(() => { - if (slice.coversOneAyah) { - setStream([...surah.ayat.slice(0, slice.begin)]); - } else { - setStream([surah.ayat[slice.begin - 1]]); - } + setStream([surah.ayat[0]]); }, [stream.length === 0]); useEffect(() => { @@ -137,7 +121,6 @@ function SurahStream({ node, reciters, locale, slice, paused, t }: Props) { )} {readyToRender && ( str !== null && ["1", "t", "true", "yes"].includes(str); const params = new URLSearchParams(location.search); - const slice = Slice.fromParam(params.get("ayah")); const paused = toBoolean(params.get("paused")); const reciters = JSON.parse( document.querySelector(".json.reciters")!.innerText, @@ -200,13 +182,6 @@ function SurahStream({ node, reciters, locale, slice, paused, t }: Props) { const t = i18n(document.querySelector(".json.i18n")!.innerText); ReactDOM.createRoot(root).render( - , + , ); })();