diff --git a/components/teks/lekte.js b/components/teks/lekte.js index 32770a3..a0740ac 100644 --- a/components/teks/lekte.js +++ b/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(() => {