@primer/react-brand/esm/VideoPlayer/components/Range/Range.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 { useId as t } from "../../../hooks/useId.js";
import n from "../../VideoPlayer.module.js";
import { VideoTooltip as r } from "../VideoTooltip/VideoTooltip.js";
import { useEffect as i, useRef as a, useState as o } from "react";
import { jsx as s, jsxs as c } from "react/jsx-runtime";
//#region src/VideoPlayer/components/Range/Range.tsx
var l = ({ className: l, onChange: u = (e) => e, value: d, max: f, onKeyDown: p = (e) => e, a11yStep: m = 1, tooltip: h, tooltipFormatter: g = (e) => e.toString(), name: _, id: v, ...y }) => {
	let [b, x] = o(d), [S, C] = o(0), [w, T] = o(0), E = t(), D = v || E, O = a(null);
	i(() => {
		x(d);
	}, [d]), i(() => {
		let e = O.current;
		if (!f || !h || !e) return;
		let t = (t) => {
			if (t.target !== e) {
				T(0), C(0);
				return;
			}
			C(t.offsetX), T(t.offsetX / t.target.clientWidth * f);
		};
		return e.addEventListener("mousemove", t), () => {
			e.removeEventListener("mousemove", t);
		};
	}, [
		f,
		h,
		O
	]);
	let k = (e) => {
		typeof b == "number" && (e.key === "ArrowUp" ? (e.stopPropagation(), x(b + m)) : e.key === "ArrowDown" && (e.stopPropagation(), x(b - m)));
	};
	return /* @__PURE__ */ c("div", {
		className: e(n.VideoPlayer__range, l),
		children: [
			/* @__PURE__ */ s("progress", {
				"aria-hidden": "true",
				className: n.VideoPlayer__rangeProgress,
				value: b,
				max: f
			}),
			/* @__PURE__ */ c("label", {
				htmlFor: D,
				children: [/* @__PURE__ */ s("span", {
					className: "visually-hidden",
					children: _
				}), /* @__PURE__ */ s("input", {
					tabIndex: 0,
					type: "range",
					className: e(n.VideoPlayer__rangeInput, n.VideoPlayer__progressBar),
					value: b,
					onChange: (e) => {
						x(e.currentTarget.valueAsNumber), u(e);
					},
					max: f,
					onKeyDown: (e) => {
						k(e), p(e);
					},
					id: D,
					name: _,
					ref: O,
					...y
				})]
			}),
			h && w ? /* @__PURE__ */ s(r, {
				style: { left: S },
				children: g(w)
			}) : null
		]
	});
};
//#endregion
export { l as Range };

//# sourceMappingURL=Range.js.map