import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useCallback, useState } from "react";
import PlayerExtension from "../player-extension";
import ContentSkeleton from "../../shared/ui/content-skeleton";
import styles from "./with-loader.module.scss";
const WithLoading = ({ withLoading = false, onReady, children, ...props }) => {
    const [loading, setIsLoading] = useState(withLoading);
    const handlePlayer = useCallback((player) => {
        player.on("loadedmetadata", () => {
            setIsLoading(false);
        });
        player.on("error", () => {
            setIsLoading(false);
        });
        player.on("dispose", () => {
            setIsLoading(true);
        });
        onReady && onReady(player);
    }, []);
    return (_jsxs(PlayerExtension, { className: props.className, children: [withLoading && loading && _jsx(ContentSkeleton, { className: styles.loading }), React.cloneElement(children, { ...props, onReady: handlePlayer })] }));
};
export default WithLoading;
//# sourceMappingURL=index.js.map