feat: release v0.0.1

dist/react/video-player/components/with-duration-badge/index.js

@@ -0,0 +1,71 @@
+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) => `<span style="color: red; margin-right: 4px;">●</span>${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