useDuration.ts

import {useEffect, useState} from "react";
import {PlayerApi} from "../../routes/player/video/PlayerApi";

export const useDuration = (video: PlayerApi | null) => {
    const [duration, setDuration] = useState<number>(0);
    useEffect(() => {
        if (video !== null) {
            if (video.canPlay()) {
                setDuration(video.getDuration());
            } else {
                const listener = () => {
                    window.requestAnimationFrame(() => {
                        setDuration(video.getDuration());
                    })
                };
                video.addEventListener(video.METADATA_EVENT, listener)
                return () => {
                    video.removeEventListener(video.METADATA_EVENT, listener)
                }
            }
        }
    }, [video]);
    return duration;
}