Merge branch 'main' into production

src/css/components/Icon.scss

@@ -29,7 +29,6 @@
   display: inline-block;
   position: relative;
   left: 30px;
-  top: 10px;
   height: 4px;
 
   div {

src/js/components/Timer.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect } from "react";
 import * as Quran from "lib/Quran";
 import { formatNumber } from "lib/i18n";
 
@@ -9,6 +9,8 @@ interface Props {
   soundOn: boolean;
   setStream: (stream: Quran.Ayat) => void;
   setEndOfStream: (v: boolean) => void;
+  ms: number | null;
+  setMs: (n: number) => void;
   isPaused: boolean;
   isStalled: boolean;
 }
@@ -22,10 +24,11 @@ export function Timer({
   setEndOfStream,
   locale,
   isPaused,
+  ms,
+  setMs,
 }: Props) {
   const ayah = stream[stream.length - 1];
   const lastAyah = surah.ayat[surah.ayat.length - 1];
-  const [ms, setMs] = useState(ayah.readTimeMs);
 
   useEffect(() => {
     setMs(ayah.readTimeMs);

src/js/pages/SurahStream.tsx

@@ -39,6 +39,7 @@ function SurahStream({ node, recitations, locale, paused, t }: Props) {
   );
   const readyToRender = stream.length > 0;
   const ayah = stream[stream.length - 1];
+  const [ms, setMs] = useState<number | null>(null);
   const ref = useRef<HTMLDivElement>();
 
   useEffect(() => {
@@ -53,6 +54,12 @@ function SurahStream({ node, recitations, locale, paused, t }: Props) {
     setStream([surah.ayat[0]]);
   }, [stream.length === 0]);
 
+  useEffect(() => {
+    if (ayah) {
+      setMs(ayah.readTimeMs);
+    }
+  }, [ayah]);
+
   return (
     <article
       ref={ref}
@@ -107,7 +114,7 @@ function SurahStream({ node, recitations, locale, paused, t }: Props) {
           <PauseIcon onClick={() => setIsPaused(true)} />
         )}
         {readyToRender && !endOfStream && (
-          <div className="flex w-14 justify-end">
+          <div className="flex w-10 justify-end">
             <AudioControl
               recitation={recitation}
               surah={surah}
@@ -129,6 +136,8 @@ function SurahStream({ node, recitations, locale, paused, t }: Props) {
             isPaused={isPaused}
             soundOn={soundOn}
             isStalled={isStalled}
+            ms={ms}
+            setMs={setMs}
           />
         )}
         {readyToRender && soundOn && isStalled && <StalledIcon />}