71 lines
3.3 KiB
JavaScript
71 lines
3.3 KiB
JavaScript
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
|