fix: display audio length & reset curretTime at the end

components/teks/lekte.js

@@ -71,7 +71,7 @@ export default function Lekte({audio, url, parole}) {
   const audioRef = useRef(new Audio(audio))
   const intervalRef = useRef()
   const isReady = useRef(false)
-  const {duration} = audioRef.current
+  const [duration, setDuration] = useState(0)
   const theme = useTheme()
   const {mode} = useColorScheme()
   const [position, setPosition] = useState(0)
@@ -139,6 +139,24 @@ export default function Lekte({audio, url, parole}) {
     setIsPlaying(false)
     setVolume(100)
     setPosition(0)
+    setDuration(0)
+  }, [audio])
+
+  useEffect(() => {
+    const el = audioRef.current
+    const onLoaded = () => setDuration(Math.round(el.duration))
+    const onEnded = () => {
+      clearInterval(intervalRef.current)
+      setIsPlaying(false)
+      setPosition(0)
+      el.currentTime = 0
+    }
+    el.addEventListener('loadedmetadata', onLoaded)
+    el.addEventListener('ended', onEnded)
+    return () => {
+      el.removeEventListener('loadedmetadata', onLoaded)
+      el.removeEventListener('ended', onEnded)
+    }
   }, [audio])
 
   useEffect(() => {