import { jsx as _jsx } from "react/jsx-runtime";
import React, { useEffect } from 'react';
const formatTime = (timeInSeconds) => {
    const minutes = Math.floor(timeInSeconds / 60);
    const seconds = Math.floor(timeInSeconds - minutes * 60);
    return `${String(minutes)}:${String(seconds).padStart(2, '0')}`;
};
export const TimeDisplay = ({ fps, playerRef }) => {
    const [time, setTime] = React.useState(0);
    useEffect(() => {
        const { current } = playerRef;
        if (!current) {
            return;
        }
        const onTimeUpdate = () => {
            setTime(current.getCurrentFrame());
        };
        current.addEventListener('frameupdate', onTimeUpdate);
        return () => {
            current.removeEventListener('frameupdate', onTimeUpdate);
        };
    }, [playerRef]);
    return (_jsx("div", { style: {
            fontSize: 16,
            fontVariantNumeric: 'tabular-nums',
        }, children: _jsx("span", { children: formatTime(time / fps) }) }));
};
