@primer/react-brand
Version:
Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.
59 lines (58 loc) • 1.89 kB
JavaScript
import e from "../../../node_modules/clsx/dist/clsx.js";
import { Text as t } from "../../../Text/Text.js";
import n from "../../VideoPlayer.module.js";
import { useVideo as r } from "../../hooks/useVideo.js";
import { Range as i } from "../Range/Range.js";
import { useCallback as a, useEffect as o, useState as s } from "react";
import { jsx as c, jsxs as l } from "react/jsx-runtime";
//#region src/VideoPlayer/components/SeekControl/SeekControl.tsx
var u = (e) => e.toString().padStart(2, "0"), d = (e, t) => {
if (isNaN(e) || e < 0) return "00:00";
t && e > t && (e = t);
let n = `${u(Math.floor(e % 3600 / 60))}:${u(Math.floor(e % 60))}`;
return e > 3600 && (n = `${u(Math.floor(e / 3600))}:${n}`), n;
}, f = ({ className: u, ...f }) => {
let { ref: p, duration: m } = r(), [h, g] = s(0), _ = a((e) => {
let t = e.currentTarget.valueAsNumber;
p?.current && (p.current.currentTime = t);
}, [p]);
return o(() => {
let e = p?.current;
if (!e) return;
let t = () => {
g(e.currentTime);
};
return e.addEventListener("timeupdate", t), () => {
e.removeEventListener("timeupdate", t);
};
}, [p]), /* @__PURE__ */ l("div", {
className: e(n.VideoPlayer__seek, u),
...f,
children: [/* @__PURE__ */ c(i, {
type: "range",
min: "0",
max: m,
step: 1e-4,
onInput: _,
value: h,
className: n.VideoPlayer__progressBar,
tooltip: !0,
tooltipFormatter: (e) => d(e, m),
name: "Seek"
}), /* @__PURE__ */ c("div", {
className: n.VideoPlayer__progressTime,
children: /* @__PURE__ */ l(t, {
as: "p",
className: e(n.VideoPlayer__controlTextColor, n.VideoPlayer__seekTime),
font: "monospace",
children: [d(h, m), /* @__PURE__ */ l("span", {
className: n.VideoPlayer__totalTime,
children: [" / ", d(m)]
})]
})
})]
});
};
//#endregion
export { f as SeekControl };
//# sourceMappingURL=SeekControl.js.map