import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime"; import React, { useCallback, useEffect, useRef } from "react"; import { formatTime } from "../video-js/utils"; import styles from "./with-duration-badge.module.scss"; const WithDurationBadge = ({ duration = false, onReady, children, ...props }) => { const durationRef = useRef(null); // Форматирование для живого видео: добавляет красную точку перед временем const formatLiveElapsed = (elapsed) => `${formatTime(elapsed)}`; useEffect(() => { const overlay = durationRef.current; if (!overlay || duration === false) return; if (typeof duration === "number") { overlay.textContent = formatTime(duration); overlay.style.opacity = "1"; } }, [duration]); const handlePlayer = useCallback((player) => { player.one("loadedmetadata", () => { const overlay = durationRef.current; if (!overlay) return; if (typeof duration !== "number") { const playerDuration = player.duration(); const hls = player.hlsInstance; const levelDetails = hls?.levels[0]?.details; if (playerDuration && playerDuration !== Infinity && !levelDetails?.live) { overlay.textContent = formatTime(playerDuration); if (!player.controls()) overlay.style.opacity = "1"; } else { const streamStart = Date.now() - (levelDetails?.live ? player.duration() || 0 : player.currentTime() || 0) * 1000; const updateLiveDuration = () => { const elapsed = (Date.now() - streamStart) / 1000; overlay.innerHTML = formatLiveElapsed(elapsed); }; updateLiveDuration(); const intervalId = setInterval(updateLiveDuration, 1000); player.one("dispose", () => clearInterval(intervalId)); } } }); player.on("play", () => { const overlay = durationRef.current; if (overlay) overlay.style.opacity = "0"; }); player.on("pause", () => { const overlay = durationRef.current; if (overlay && !player.controls()) overlay.style.opacity = "1"; }); player.on("dispose", () => { const overlay = durationRef.current; if (overlay && !player.controls()) overlay.style.opacity = "1"; }); if (onReady) onReady(player); }, [duration, onReady]); return (_jsxs("div", { className: styles.videoMain, children: [duration !== false && (_jsx("div", { style: { opacity: "0" }, ref: durationRef, className: styles.videoDurationOverlay })), React.cloneElement(children, { ...props, onReady: handlePlayer })] })); }; export default WithDurationBadge; //# sourceMappingURL=index.js.map