Determine Timer.tsx duration from MP3, otherwise default on fallback

This change repurposes /json/durations/alafasy/<id>.json as
/json/durations/<id>.json. A file from /json/durations/ is
used by Timer.tsx when sound is disabled. Otherwise the
duration is taken from an MP3.

This change facilitates changing the recitation author
without needing to provide a JSON file that described the
duration of each MP3.

Rules

@@ -55,7 +55,7 @@ end
 
 ##
 # /json/durations/*/*.json
-passthrough "/json/durations/*/*.json"
+passthrough "/json/durations/*.json"
 
 ##
 # require rules

src/js/components/SurahStream/index.tsx

@@ -91,6 +91,7 @@ export function SurahStream({ surah, locale, t }: Props) {
             surah={surah}
             ayah={ayah}
             isPaused={isPaused}
+            audio={audio}
             audioStatus={audioStatus}
             onComplete={(surah, ayah) => {
               const layah = surah.ayat[surah.ayat.length - 1];

src/js/components/Timer/index.tsx

@@ -9,17 +9,38 @@ type Props = {
   surah: Surah;
   ayah: Maybe<Ayah>;
   isPaused: boolean;
+  audio: HTMLAudioElement;
   audioStatus: Maybe<string>;
   onComplete: (surah: Surah, ayah: Ayah) => void;
 };
 
-export function Timer({ locale, surah, ayah, isPaused, audioStatus, onComplete }: Props) {
+export function Timer({
+  locale,
+  surah,
+  ayah,
+  isPaused,
+  audio,
+  audioStatus,
+  onComplete,
+}: Props) {
   const [ms, setMs] = useState<number | null>(null);
   const isStalled = audioStatus === "wait";
 
+  const getMs = () => {
+    const fallback =
+      audioStatus === null || audioStatus === "pause" || isNaN(audio.duration);
+    if (fallback) {
+      console.info("timer: length determined by ayah.ms");
+      return ayah?.ms || 0;
+    } else {
+      console.info("timer: length determined by HTMLAudioElement");
+      return audio.duration * 1000;
+    }
+  };
+
   useEffect(() => {
     if (ayah) {
-      setMs(ayah.ms);
+      setMs(getMs());
     }
   }, [ayah?.id]);
 
@@ -27,7 +48,7 @@ export function Timer({ locale, surah, ayah, isPaused, audioStatus, onComplete }
     if (!ayah) {
       return;
     } else if (audioStatus === "play") {
-      setMs(ayah.ms);
+      setMs(getMs());
     }
   }, [audioStatus]);
 

src/js/loaders/SurahStreamLoader.ts

@@ -22,7 +22,7 @@ import postman, { item } from "postman";
     item.json(`/json/${locale}/${surahId}/surah.json`, {
       className: "json surah",
     }),
-    item.json(`/json/durations/alafasy/${surahId}.json`, {
+    item.json(`/json/durations/${surahId}.json`, {
       className: "json durations",
     }),
     item.progress((percent: number) => {