@primer/react-brand
Version:
Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.
76 lines (75 loc) • 2.48 kB
JavaScript
import e from "../node_modules/clsx/dist/clsx.js";
import { useReducedMotion as t } from "../hooks/useReducedMotion.js";
import { PauseIcon as n } from "../node_modules/@primer/octicons-react/dist/index.esm.js";
import { useMinimalVideoPlayback as r } from "./useMinimalVideoPlayback.js";
import i from "./MinimalVideoPlayer.module.js";
import { forwardRef as a } from "react";
import { jsx as o, jsxs as s } from "react/jsx-runtime";
//#region src/MinimalVideoPlayer/MinimalVideoPlayer.tsx
var c = {
play: "Play video",
pause: "Pause video"
}, l = {
root: "MinimalVideoPlayer",
get video() {
return `${this.root}-video`;
},
get control() {
return `${this.root}-control`;
}
}, u = a(({ autoPlay: a = !0, children: u, className: d, "data-testid": f, internalAccessibleLabels: p = c, loop: m = !0, onEnded: h, onPause: g, onPlay: _, onPlaying: v, title: y, ...b }, x) => {
let { handlePlaybackEnded: S, handlePlaybackPaused: C, handlePlaybackStarted: w, isPlaying: T, togglePlayback: E, videoRef: D } = r({
autoPlay: a,
forwardedRef: x,
prefersReducedMotion: t()
});
return /* @__PURE__ */ s("div", {
className: i.MinimalVideoPlayer,
"data-testid": f || l.root,
children: [/* @__PURE__ */ o("video", {
...b,
ref: D,
autoPlay: !1,
className: e(i.MinimalVideoPlayer__video, d),
controls: !1,
"data-testid": l.video,
loop: m,
muted: !0,
onEnded: (e) => {
S(), h?.(e);
},
onPause: (e) => {
C(), g?.(e);
},
onPlay: (e) => {
w(), _?.(e);
},
onPlaying: (e) => {
w(), v?.(e);
},
playsInline: !0,
title: y,
children: u
}), /* @__PURE__ */ o("button", {
"aria-label": T ? p.pause : p.play,
className: i.MinimalVideoPlayer__control,
"data-testid": l.control,
onClick: E,
type: "button",
children: T ? /* @__PURE__ */ o(n, { "aria-hidden": "true" }) : /* @__PURE__ */ o("svg", {
width: "16",
height: "16",
viewBox: "0 0 16 16",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
children: /* @__PURE__ */ o("path", {
d: "M13.3777 6.94756C14.2069 7.40341 14.2069 8.59489 13.3777 9.05073L5.37808 13.4483C4.57834 13.8879 3.60001 13.3093 3.60001 12.3967L3.60001 3.60161C3.60001 2.689 4.57834 2.1104 5.37808 2.55003L13.3777 6.94756Z",
fill: "currentColor"
})
})
})]
});
}), d = Object.assign(u, { testIds: l });
//#endregion
export { d as MinimalVideoPlayer, u as _MinimalVideoPlayer };
//# sourceMappingURL=MinimalVideoPlayer.js.map