feat: release v0.0.1

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

@@ -0,0 +1,7 @@
+import { IWithBlurVideoPlayerProps } from "../with-blur";
+export interface IWithDurationBadgePlayerProps extends IWithBlurVideoPlayerProps {
+    duration?: boolean | number;
+}
+declare const WithDurationBadge: ({ duration, onReady, children, ...props }: IWithDurationBadgePlayerProps) => import("react/jsx-runtime").JSX.Element;
+export default WithDurationBadge;
+//# sourceMappingURL=index.d.ts.map

dist/react/video-player/components/with-duration-badge/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/react/video-player/components/with-duration-badge/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,yBAAyB,EAAE,MAAM,cAAc,CAAC;AAGzD,MAAM,WAAW,6BAChB,SAAQ,yBAAyB;IACjC,QAAQ,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CAC5B;AAED,QAAA,MAAM,iBAAiB,GAAI,2CAKxB,6BAA6B,4CAqF/B,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/react/video-player/components/with-duration-badge/index.tsx"],"names":[],"mappings":"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"}

dist/react/video-player/components/with-duration-badge/with-duration-badge.module.scss

@@ -0,0 +1,22 @@
+.videoMain {
+	width: 100%;
+	height: 100%;
+	position: relative;
+}
+
+.videoDurationOverlay {
+	position: absolute;
+	bottom: 12px;
+	right: 12px;
+	background: var(--Opacity-BlackOpacity45, rgba(0, 0, 0, 0.45));
+	color: var(--Default-White, #fff);
+	padding: 6px var(--corner-S, 8px);
+	border-radius: var(--Corner-XL, 32px);
+	font-size: 10px;
+	font-weight: 600;
+	line-height: 12px; /* 120% */
+	pointer-events: none;
+	transition: opacity 0.7s ease;
+	opacity: 0;
+	z-index: 3;
+}