@primer/react-brand/esm/river/RiverStoryScroll/RiverStoryScrollResponder.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 { useStoryScrollContext as t } from "./RiverStoryScrollProvider.js";
import n from "./RiverStoryScroll.module.js";
import r, { useEffect as i, useRef as a } from "react";
import { jsx as o } from "react/jsx-runtime";
//#region src/river/RiverStoryScroll/RiverStoryScrollResponder.tsx
function s({ index: s, children: c, className: l, visibleClassName: u = n["tracker-in-viewport"], hiddenClassName: d = n["tracker-outside-viewport"] }) {
	let { visibilityStates: f } = t(), p = f[s], m = a(null);
	i(() => {
		let e = m.current;
		e && (p ? e.play().catch((e) => {
			console.error("Error playing the video:", e);
		}) : e.pause());
	}, [p]);
	let h = r.Children.map(c, (e) => r.isValidElement(e) && e.type === "video" ? r.cloneElement(e, { ref: m }) : e);
	return /* @__PURE__ */ o("div", {
		className: e(l, p ? u : d),
		children: h
	});
}
//#endregion
export { s as RiverStoryScrollResponder };

//# sourceMappingURL=RiverStoryScrollResponder.js.map