@primer/react-brand/esm/VideoPlayer/VideoPlayer.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 { useProvidedRefOrCreate as t } from "../hooks/useRef.js";
import { Text as n } from "../Text/Text.js";
import { MarkGithubIcon as r } from "../node_modules/@primer/octicons-react/dist/index.esm.js";
import { PlayIcon as i } from "./components/PlayIcon/PlayIcon.js";
import a from "./VideoPlayer.module.js";
import { VideoContext as o, VideoProvider as s, useVideo as c } from "./hooks/useVideo.js";
import { Captions as l } from "./components/Captions/Captions.js";
import { CCButton as u } from "./components/CCButton/CCButton.js";
import { ControlsBar as d } from "./components/ControlsBar/ControlsBar.js";
import { useVideoResizeObserver as f } from "./hooks/useVideoResizeObserver.js";
import { FullScreenButton as p } from "./components/FullScreenButton/FullScreenButton.js";
import { MuteButton as m } from "./components/MuteButton/MuteButton.js";
import { PlayPauseButton as h } from "./components/PlayPauseButton/PlayPauseButton.js";
import { SeekControl as g } from "./components/SeekControl/SeekControl.js";
import { VolumeControl as _ } from "./components/VolumeControl/VolumeControl.js";
import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/video-player/colors-with-modes-CTkp-z-l.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/video-player/base-Bs0Tq22P.css';/* empty css                                                                                             */
/* empty css                                                                                                          */
import { forwardRef as v, useCallback as y, useContext as b } from "react";
import { jsx as x, jsxs as S } from "react/jsx-runtime";
//#region src/VideoPlayer/VideoPlayer.tsx
var C = v(({ title: o, visuallyHiddenTitle: s, showBranding: v = !0, children: b, className: C, showPlayPauseButton: T = !0, showSeekControl: E = !0, showCCButton: D = !0, showMuteButton: O = !0, showVolumeControl: k = !0, showFullScreenButton: A = !0, playIcon: j = () => /* @__PURE__ */ x(i, { className: a.VideoPlayer__playButton }), ...M }, N) => {
	let { ccEnabled: P, fullscreenRef: F, isPlaying: I, ref: L, togglePlaying: R } = c(), z = t(y((e) => {
		w(N, e);
	}, [N])), B = y((e) => {
		w(L, e), w(z, e);
	}, [L, z]), V = f({
		videoWrapperRef: F,
		className: a["VideoPlayer__container--small"]
	}), H = T || E, U = D || O || k || A, W = H || U;
	return /* @__PURE__ */ S("div", {
		"data-video-player-container": !0,
		className: a.VideoPlayer__container,
		ref: F,
		children: [
			/* @__PURE__ */ S("div", {
				className: a.VideoPlayer__overlayContainer,
				children: [
					/* @__PURE__ */ S("video", {
						ref: B,
						title: o,
						controls: !1,
						className: e(a.VideoPlayer, C),
						...M,
						children: [b, /* @__PURE__ */ x("track", { kind: "captions" })]
					}),
					v || !s ? /* @__PURE__ */ S("div", {
						className: e(a.VideoPlayer__title, I && a["VideoPlayer__title--hidden"]),
						children: [v && /* @__PURE__ */ x(r, {
							size: 40,
							"aria-label": "GitHub logo"
						}), !s && /* @__PURE__ */ x(n, {
							size: "400",
							weight: "medium",
							className: a.VideoPlayer__controlTextColor,
							children: o
						})]
					}) : null,
					/* @__PURE__ */ x("button", {
						className: e(a.VideoPlayer__playButtonOverlay, I && a["VideoPlayer__playButtonOverlay--transparent"]),
						onClick: R,
						"aria-label": I ? "Pause" : "Play",
						children: !I && /* @__PURE__ */ x(j, {})
					})
				]
			}),
			P && /* @__PURE__ */ x(l, {}),
			W && /* @__PURE__ */ S(d, { children: [H && /* @__PURE__ */ S("div", {
				className: a.VideoPlayer__controlsBar__row1,
				children: [T && /* @__PURE__ */ x(h, {}), E && /* @__PURE__ */ x(g, {})]
			}), U && /* @__PURE__ */ S("div", {
				className: a.VideoPlayer__controlsBar__row2,
				children: [
					D && /* @__PURE__ */ x(u, {}),
					O && /* @__PURE__ */ x(m, {}),
					k && !V && /* @__PURE__ */ x(_, {}),
					A && /* @__PURE__ */ x(p, {})
				]
			})] })
		]
	});
});
function w(e, t) {
	if (e) {
		if (typeof e == "function") {
			e(t);
			return;
		}
		e.current = t;
	}
}
var T = (e) => /* @__PURE__ */ x("source", { ...e }), E = ({ kind: e = "captions", ...t }) => /* @__PURE__ */ x("track", {
	kind: e,
	...t
}), D = v((e, t) => b(o) ? /* @__PURE__ */ x(C, {
	ref: t,
	...e
}) : /* @__PURE__ */ x(s, { children: /* @__PURE__ */ x(C, {
	ref: t,
	...e
}) })), O = Object.assign(D, {
	Source: T,
	Track: E,
	Provider: s
});
//#endregion
export { O as VideoPlayer };

//# sourceMappingURL=VideoPlayer.js.map