@primer/react-brand/esm/VideoPlayer/components/Captions/Captions.js

Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.

import e from "../../../node_modules/clsx/dist/clsx.js";
import { Text as t } from "../../../Text/Text.js";
import n from "./Captions.module.js";
import { useVideo as r } from "../../hooks/useVideo.js";
import { useEffect as i, useState as a } from "react";
import { jsx as o } from "react/jsx-runtime";
//#region src/VideoPlayer/components/Captions/Captions.tsx
var s = ({ className: s, ...c }) => {
	let [l, u] = a(""), { ref: d } = r(), f = d?.current, p = f?.textTracks[0]?.cues;
	return i(() => {
		if (!f) return;
		let e = () => {
			if (p) for (let e = 0; e < p.length; e++) {
				let t = p[e];
				if (f.currentTime >= t.startTime && f.currentTime < t.endTime) {
					u(t.text);
					break;
				}
				u("");
			}
		};
		return f.addEventListener("timeupdate", e), () => f.removeEventListener("timeupdate", e);
	}, [f, p]), p ? /* @__PURE__ */ o("div", {
		className: e(s, n.Captions),
		...c,
		children: /* @__PURE__ */ o(t, {
			as: "p",
			className: n.Captions__text,
			align: "center",
			children: l
		})
	}) : null;
};
//#endregion
export { s as Captions };

//# sourceMappingURL=Captions.js.map