react-responsive-gallery
Version:
React responsive gallery
1,222 lines (1,221 loc) • 47.7 kB
JavaScript
import { j as sn } from "./index-8a2e908b.js";
import * as n from "react";
import { forwardRef as ln, useReducer as cn, useImperativeHandle as an } from "react";
import { createPortal as un } from "react-dom";
import "styled-components";
const _t = "carousel", Ue = "controller", dn = "navigation", fn = "no-scroll", bt = "portal", pn = "root", xt = "toolbar", nt = "captions", Ve = "fullscreen", ot = "thumbnails", Ee = "loading", mn = "playing", Re = "error", ge = "complete", hn = "placeholder", xe = (e) => `active-slide-${e}`, vn = xe(Ee), En = xe(mn), gn = xe(ge), Ct = "fullsize", Xe = "flex_center", _n = "no_scroll", Pt = "no_scroll_padding", Z = "prev", J = "next", rt = "swipe", se = "close", Lt = "onPointerDown", It = "onPointerMove", Nt = "onPointerUp", Ot = "onPointerLeave", wt = "onPointerCancel", yt = "onKeyDown", bn = "onKeyUp", St = "onWheel", xn = "Escape", Cn = "ArrowLeft", Pn = "ArrowRight", Ln = "button", He = "icon", Mt = "contain", st = "cover", In = "Unknown action type", We = {
open: !1,
close: () => {
},
index: 0,
slides: [],
render: {},
plugins: [],
toolbar: { buttons: [se] },
labels: {},
animation: {
fade: 250,
swipe: 500,
easing: {
fade: "ease",
swipe: "ease-out",
navigation: "ease-in-out"
}
},
carousel: {
finite: !1,
preload: 2,
padding: "16px",
spacing: "30%",
imageFit: Mt,
imageProps: {}
},
controller: {
ref: null,
focus: !0,
aria: !1,
touchAction: "none",
closeOnPullDown: !1,
closeOnBackdropClick: !1
},
portal: {},
noScroll: {
disabled: !1
},
on: {},
styles: {},
className: ""
};
function z(e, t) {
return { name: e, component: t };
}
function R(e, t) {
return { module: e, children: t };
}
function Tt(e, t, o) {
return e.module.name === t ? o(e) : e.children ? [
R(e.module, e.children.flatMap((r) => {
var s;
return (s = Tt(r, t, o)) !== null && s !== void 0 ? s : [];
}))
] : [e];
}
function oe(e, t, o) {
return e.flatMap((r) => {
var s;
return (s = Tt(r, t, o)) !== null && s !== void 0 ? s : [];
});
}
function Nn(e, t = [], o = []) {
let r = e;
const s = (v) => {
const m = [...r];
for (; m.length > 0; ) {
const a = m.pop();
if ((a == null ? void 0 : a.module.name) === v)
return !0;
a != null && a.children && m.push(...a.children);
}
return !1;
}, l = (v, m) => {
if (v === "") {
r = [R(m, r)];
return;
}
r = oe(r, v, (a) => [R(m, [a])]);
}, i = (v, m) => {
r = oe(r, v, (a) => [R(a.module, [R(m, a.children)])]);
}, c = (v, m, a) => {
r = oe(r, v, (d) => {
var g;
return [
R(d.module, [
...a ? [R(m)] : [],
...(g = d.children) !== null && g !== void 0 ? g : [],
...a ? [] : [R(m)]
])
];
});
}, f = (v, m, a) => {
r = oe(r, v, (d) => [
...a ? [R(m)] : [],
d,
...a ? [] : [R(m)]
]);
}, u = (v) => {
i(Ue, v);
}, E = (v, m) => {
r = oe(r, v, (a) => [R(m, a.children)]);
}, h = (v) => {
r = oe(r, v, (m) => m.children);
}, b = (v) => {
o.push(v);
};
return t.forEach((v) => {
v({
contains: s,
addParent: l,
append: i,
addChild: c,
addSibling: f,
addModule: u,
replace: E,
remove: h,
augment: b
});
}), {
config: r,
augmentation: (v) => o.reduce((m, a) => a(m), v)
};
}
const W = (...e) => [...e].filter((t) => !!t).join(" "), Rt = "yarl__", C = (e) => `${Rt}${e}`, k = (e) => `--${Rt}${e}`, de = (e, t) => `${e}${t ? `_${t}` : ""}`, ze = (e) => (t) => de(e, t), On = (e, t) => e && e[t] ? e[t] : t, kt = (...e) => () => {
e.forEach((t) => {
t();
});
}, K = (e, t, o) => () => {
const r = n.useContext(o);
if (!r)
throw new Error(`${e} must be used within a ${t}.Provider`);
return r;
}, Dt = () => typeof window < "u";
function wn(e, t = 0) {
const o = 10 ** t;
return Math.round((e + Number.EPSILON) * o) / o;
}
const yn = (e) => e.type === void 0 || e.type === "image", Sn = (e, t) => e.imageFit === st || e.imageFit !== Mt && t === st;
function be(e) {
if (typeof e == "number")
return { pixel: e };
if (typeof e == "string") {
const t = parseInt(e, 10);
return e.endsWith("%") ? { percent: t } : { pixel: t };
}
return { pixel: 0 };
}
function Mn(e, t) {
const o = be(t), r = o.percent !== void 0 ? e.width / 100 * o.percent : o.pixel;
return {
width: Math.max(e.width - 2 * r, 0),
height: Math.max(e.height - 2 * r, 0)
};
}
const At = (e, t) => t > 0 ? (e % t + t) % t : 0, Ft = (e) => e.length > 0, Tn = (e, t) => e[At(t, e.length)], Be = (e, t) => Ft(e) ? Tn(e, t) : void 0;
function Vt(e, t, o) {
if (!o)
return e;
const { buttons: r, ...s } = e, l = r.findIndex((c) => c === t), i = n.isValidElement(o) ? n.cloneElement(o, { key: t }, null) : o;
if (l >= 0) {
const c = [...r];
return c.splice(l, 1, i), { buttons: c, ...s };
}
return { buttons: [i, ...r], ...s };
}
function Rn() {
const e = (t) => {
t.stopPropagation();
};
return { onPointerDown: e, onKeyDown: e, onWheel: e };
}
function kn(e, t, o = 0) {
return Math.min(e.preload, Math.max(e.finite ? t.length - 1 : Math.floor(t.length / 2), o));
}
const Ht = n.createContext(null), fe = K("useEvents", "EventsContext", Ht);
function Dn({ children: e }) {
const [t] = n.useState({});
n.useEffect(() => () => {
Object.keys(t).forEach((r) => delete t[r]);
}, [t]);
const o = n.useMemo(() => {
const r = (i, c) => {
var f;
(f = t[i]) === null || f === void 0 || f.splice(0, t[i].length, ...t[i].filter((u) => u !== c));
};
return { publish: (...[i, c]) => {
var f;
(f = t[i]) === null || f === void 0 || f.forEach((u) => u(c));
}, subscribe: (i, c) => (t[i] || (t[i] = []), t[i].push(c), () => r(i, c)), unsubscribe: r };
}, [t]);
return n.createElement(Ht.Provider, { value: o }, e);
}
const Wt = n.createContext(null), $ = K("useLightboxProps", "LightboxPropsContext", Wt);
function An({ children: e, ...t }) {
return n.createElement(Wt.Provider, { value: t }, e);
}
const Bt = n.createContext(null), Ce = K("useLightboxState", "LightboxStateContext", Bt), $t = n.createContext(null), Fn = K("useLightboxDispatch", "LightboxDispatchContext", $t);
function Vn(e, t) {
switch (t.type) {
case "swipe": {
const { slides: o } = e, r = (t == null ? void 0 : t.increment) || 0, s = e.globalIndex + r, l = At(s, o.length), i = Be(o, l), c = r || t.duration ? {
increment: r,
duration: t.duration,
easing: t.easing
} : void 0;
return { slides: o, currentIndex: l, globalIndex: s, currentSlide: i, animation: c };
}
case "update":
return {
slides: t.slides,
currentIndex: t.index,
globalIndex: t.index,
currentSlide: Be(t.slides, t.index)
};
default:
throw new Error(In);
}
}
function Hn({ slides: e, index: t, children: o }) {
const [r, s] = n.useReducer(Vn, {
slides: e,
currentIndex: t,
globalIndex: t,
currentSlide: Be(e, t)
});
n.useEffect(() => {
s({ type: "update", slides: e, index: t });
}, [e, t]);
const l = n.useMemo(() => ({ ...r, state: r, dispatch: s }), [r, s]);
return n.createElement(
$t.Provider,
{ value: s },
n.createElement(Bt.Provider, { value: l }, o)
);
}
const Ut = n.createContext(null), Pe = K("useTimeouts", "TimeoutsContext", Ut);
function Wn({ children: e }) {
const [t] = n.useState([]);
n.useEffect(() => () => {
t.forEach((r) => window.clearTimeout(r)), t.splice(0, t.length);
}, [t]);
const o = n.useMemo(() => {
const r = (i) => {
t.splice(0, t.length, ...t.filter((c) => c !== i));
};
return { setTimeout: (i, c) => {
const f = window.setTimeout(() => {
r(f), i();
}, c);
return t.push(f), f;
}, clearTimeout: (i) => {
i !== void 0 && (r(i), window.clearTimeout(i));
} };
}, [t]);
return n.createElement(Ut.Provider, { value: o }, e);
}
const Le = n.forwardRef(function({ label: t, className: o, icon: r, renderIcon: s, onClick: l, style: i, ...c }, f) {
const { styles: u, labels: E } = $();
return n.createElement("button", { ref: f, type: "button", "aria-label": On(E, t), className: W(C(Ln), o), onClick: l, style: { ...i, ...u.button }, ...c }, s ? s() : n.createElement(r, { className: C(He), style: u.icon }));
});
function Xt(e, t) {
const o = (r) => n.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24", "aria-hidden": "true", focusable: "false", ...r }, t);
return o.displayName = e, o;
}
function j(e, t) {
return Xt(e, n.createElement(
"g",
{ fill: "currentColor" },
n.createElement("path", { d: "M0 0h24v24H0z", fill: "none" }),
t
));
}
function Bn(e, t) {
return Xt(e, n.createElement(
n.Fragment,
null,
n.createElement(
"defs",
null,
n.createElement(
"mask",
{ id: "strike" },
n.createElement("path", { d: "M0 0h24v24H0z", fill: "white" }),
n.createElement("path", { d: "M0 0L24 24", stroke: "black", strokeWidth: 4 })
)
),
n.createElement("path", { d: "M0.70707 2.121320L21.878680 23.292883", stroke: "currentColor", strokeWidth: 2 }),
n.createElement(
"g",
{ fill: "currentColor", mask: "url(#strike)" },
n.createElement("path", { d: "M0 0h24v24H0z", fill: "none" }),
t
)
));
}
const $n = j("Close", n.createElement("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" })), Un = j("Previous", n.createElement("path", { d: "M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" })), Xn = j("Next", n.createElement("path", { d: "M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" })), zn = j("Loading", n.createElement(n.Fragment, null, Array.from({ length: 8 }).map((e, t, o) => n.createElement("line", { key: t, x1: "12", y1: "6.5", x2: "12", y2: "1.8", strokeLinecap: "round", strokeWidth: "2.6", stroke: "currentColor", strokeOpacity: 1 / o.length * (t + 1), transform: `rotate(${360 / o.length * t}, 12, 12)` })))), Gn = j("Error", n.createElement("path", { d: "M21.9,21.9l-8.49-8.49l0,0L3.59,3.59l0,0L2.1,2.1L0.69,3.51L3,5.83V19c0,1.1,0.9,2,2,2h13.17l2.31,2.31L21.9,21.9z M5,18 l3.5-4.5l2.5,3.01L12.17,15l3,3H5z M21,18.17L5.83,3H19c1.1,0,2,0.9,2,2V18.17z" })), te = Dt() ? n.useLayoutEffect : n.useEffect;
function zt() {
const [e, t] = n.useState(!1);
return n.useEffect(() => {
var o, r;
const s = (o = window.matchMedia) === null || o === void 0 ? void 0 : o.call(window, "(prefers-reduced-motion: reduce)");
t(s == null ? void 0 : s.matches);
const l = (i) => t(i.matches);
return (r = s == null ? void 0 : s.addEventListener) === null || r === void 0 || r.call(s, "change", l), () => {
var i;
return (i = s == null ? void 0 : s.removeEventListener) === null || i === void 0 ? void 0 : i.call(s, "change", l);
};
}, []), e;
}
function Yn(e) {
let t = 0, o = 0, r = 0;
const l = window.getComputedStyle(e).transform.match(/matrix.*\((.+)\)/);
if (l) {
const i = l[1].split(",").map((c) => Number.parseInt(c, 10));
i.length === 6 ? (t = i[4], o = i[5]) : i.length === 16 && (t = i[12], o = i[13], r = i[14]);
}
return { x: t, y: o, z: r };
}
function lt(e, t) {
const o = n.useRef(), r = n.useRef(), s = zt();
return te(() => {
var l, i, c;
if (e.current && o.current !== void 0 && !s) {
const { keyframes: f, duration: u, easing: E, onfinish: h } = t(o.current, e.current.getBoundingClientRect(), Yn(e.current)) || {};
if (f && u) {
(l = r.current) === null || l === void 0 || l.cancel(), r.current = void 0;
try {
r.current = (c = (i = e.current).animate) === null || c === void 0 ? void 0 : c.call(i, f, { duration: u, easing: E });
} catch (b) {
console.error(b);
}
r.current && (r.current.onfinish = () => {
r.current = void 0, h == null || h();
});
}
}
o.current = void 0;
}), {
prepareAnimation: (l) => {
o.current = l;
},
isAnimationPlaying: () => {
var l;
return ((l = r.current) === null || l === void 0 ? void 0 : l.playState) === "running";
}
};
}
function Ge() {
const e = n.useRef(null), t = n.useRef(), [o, r] = n.useState();
return { setContainerRef: n.useCallback((l) => {
e.current = l, t.current && (t.current.disconnect(), t.current = void 0);
const i = () => {
if (l) {
const c = window.getComputedStyle(l), f = (u) => parseFloat(u) || 0;
r({
width: Math.round(l.clientWidth - f(c.paddingLeft) - f(c.paddingRight)),
height: Math.round(l.clientHeight - f(c.paddingTop) - f(c.paddingBottom))
});
} else
r(void 0);
};
i(), l && typeof ResizeObserver < "u" && (t.current = new ResizeObserver(i), t.current.observe(l));
}, []), containerRef: e, containerRect: o };
}
function _e() {
const e = n.useRef(), { setTimeout: t, clearTimeout: o } = Pe();
return n.useCallback((r, s) => {
o(e.current), e.current = t(r, s > 0 ? s : 0);
}, [t, o]);
}
function T(e) {
const t = n.useRef(e);
return te(() => {
t.current = e;
}), n.useCallback((...o) => {
var r;
return (r = t.current) === null || r === void 0 ? void 0 : r.call(t, ...o);
}, []);
}
function it(e, t) {
typeof e == "function" ? e(t) : e && (e.current = t);
}
function ct(e, t) {
return n.useMemo(() => e == null && t == null ? null : (o) => {
it(e, o), it(t, o);
}, [e, t]);
}
function Kn(e, t = !1) {
const o = n.useRef();
te(() => {
t && o.current && (o.current = !1, e());
}, [t, e]);
const r = n.useCallback(() => {
o.current = !0;
}, []), s = n.useCallback(() => {
o.current = !1;
}, []);
return { onFocus: r, onBlur: s };
}
function Ye() {
const [e, t] = n.useState(!1);
return te(() => {
t(window.getComputedStyle(window.document.documentElement).direction === "rtl");
}, []), e;
}
function jn() {
const [e] = n.useState({}), t = n.useCallback((s, l) => {
var i;
(i = e[s]) === null || i === void 0 || i.forEach((c) => {
l.isPropagationStopped() || c(l);
});
}, [e]), o = n.useMemo(() => ({
onPointerDown: (s) => t(Lt, s),
onPointerMove: (s) => t(It, s),
onPointerUp: (s) => t(Nt, s),
onPointerLeave: (s) => t(Ot, s),
onPointerCancel: (s) => t(wt, s),
onKeyDown: (s) => t(yt, s),
onKeyUp: (s) => t(bn, s),
onWheel: (s) => t(St, s)
}), [t]), r = n.useCallback((s, l) => (e[s] || (e[s] = []), e[s].unshift(l), () => {
const i = e[s];
i && i.splice(0, i.length, ...i.filter((c) => c !== l));
}), [e]);
return { registerSensors: o, subscribeSensors: r };
}
function at(e, t) {
const o = n.useRef(0), r = _e(), s = T((...l) => {
o.current = Date.now(), e(l);
});
return n.useCallback((...l) => {
r(() => {
s(l);
}, t - (Date.now() - o.current));
}, [t, s, r]);
}
const ke = ze("slide"), De = ze("slide_image");
function qn({ slide: e, offset: t, render: o, rect: r, imageFit: s, imageProps: l, onClick: i, onLoad: c, style: f }) {
var u, E, h, b, v, m, a;
const [d, g] = n.useState(Ee), { publish: P } = fe(), { setTimeout: M } = Pe(), N = n.useRef(null);
n.useEffect(() => {
t === 0 && P(xe(d));
}, [t, d, P]);
const I = T((L) => {
("decode" in L ? L.decode() : Promise.resolve()).catch(() => {
}).then(() => {
L.parentNode && (g(ge), M(() => {
c == null || c(L);
}, 0));
});
}), O = n.useCallback((L) => {
N.current = L, L != null && L.complete && I(L);
}, [I]), _ = n.useCallback((L) => {
I(L.currentTarget);
}, [I]), w = n.useCallback(() => {
g(Re);
}, []), x = Sn(e, s), D = (L, Y) => Number.isFinite(L) ? L : Y, y = D(Math.max(...((E = (u = e.srcSet) === null || u === void 0 ? void 0 : u.map((L) => L.width)) !== null && E !== void 0 ? E : []).concat(e.width ? [e.width] : []).filter(Boolean)), ((h = N.current) === null || h === void 0 ? void 0 : h.naturalWidth) || 0), q = D(Math.max(...((v = (b = e.srcSet) === null || b === void 0 ? void 0 : b.map((L) => L.height)) !== null && v !== void 0 ? v : []).concat(e.height ? [e.height] : []).filter(Boolean)), ((m = N.current) === null || m === void 0 ? void 0 : m.naturalHeight) || 0), V = y && q ? {
maxWidth: `min(${y}px, 100%)`,
maxHeight: `min(${q}px, 100%)`
} : {
maxWidth: "100%",
maxHeight: "100%"
}, ie = (a = e.srcSet) === null || a === void 0 ? void 0 : a.sort((L, Y) => L.width - Y.width).map((L) => `${L.src} ${L.width}w`).join(", "), Ie = () => r && !x && e.width && e.height ? r.height / e.height * e.width : Number.MAX_VALUE, G = ie && r && Dt() ? `${Math.round(Math.min(Ie(), r.width))}px` : void 0, { style: ne, className: pe, ...me } = l || {};
return n.createElement(
n.Fragment,
null,
n.createElement("img", { ref: O, onLoad: _, onError: w, onClick: i, draggable: !1, className: W(C(De()), x && C(De("cover")), d !== ge && C(De("loading")), pe), style: { ...V, ...f, ...ne }, ...me, alt: e.alt, sizes: G, srcSet: ie, src: e.src }),
d !== ge && n.createElement(
"div",
{ className: C(ke(hn)) },
d === Ee && (o != null && o.iconLoading ? o.iconLoading() : n.createElement(zn, { className: W(C(He), C(ke(Ee))) })),
d === Re && (o != null && o.iconError ? o.iconError() : n.createElement(Gn, { className: W(C(He), C(ke(Re))) }))
)
);
}
var A;
(function(e) {
e[e.NONE = 0] = "NONE", e[e.SWIPE = 1] = "SWIPE", e[e.PULL_DOWN = 2] = "PULL_DOWN", e[e.ANIMATION = 3] = "ANIMATION";
})(A || (A = {}));
function Qn(e, t, o, r, s) {
n.useEffect(() => s ? () => {
} : kt(e(Lt, t), e(It, o), e(Nt, r), e(Ot, r), e(wt, r)), [e, t, o, r, s]);
}
var B;
(function(e) {
e[e.NONE = 0] = "NONE", e[e.SWIPE = 1] = "SWIPE", e[e.PULL_DOWN = 2] = "PULL_DOWN";
})(B || (B = {}));
const Ae = 30;
function Zn(e, t, o, r, s, l, i, c, f, u, E, h, b) {
const v = n.useRef(0), m = n.useRef([]), a = n.useRef(), d = n.useRef(0), g = n.useRef(B.NONE), P = n.useCallback((_) => {
a.current === _.pointerId && (a.current = void 0, g.current = B.NONE);
const w = m.current;
w.splice(0, w.length, ...w.filter((x) => x.pointerId !== _.pointerId));
}, []), M = n.useCallback((_) => {
P(_), _.persist(), m.current.push(_);
}, [P]), N = T((_) => {
M(_);
}), I = T((_) => {
if (m.current.find((w) => w.pointerId === _.pointerId) && a.current === _.pointerId) {
const w = Date.now() - d.current, x = v.current;
g.current === B.SWIPE ? Math.abs(x) > 0.3 * o || Math.abs(x) > 5 && w < r ? i(x, w) : c(x) : g.current === B.PULL_DOWN && (x > 2 * Ae ? h(x, w) : b(x)), v.current = 0, g.current = B.NONE;
}
P(_);
}), O = T((_) => {
const w = m.current.find((x) => x.pointerId === _.pointerId);
if (w) {
const x = a.current === _.pointerId;
if (_.buttons === 0) {
x && v.current !== 0 ? I(_) : P(w);
return;
}
const D = _.clientX - w.clientX, y = _.clientY - w.clientY;
if (a.current === void 0) {
const q = (V) => {
M(_), a.current = _.pointerId, d.current = Date.now(), g.current = V;
};
Math.abs(D) > Math.abs(y) && Math.abs(D) > Ae && t(D) ? (q(B.SWIPE), s()) : f && Math.abs(y) > Math.abs(D) && y > Ae && (q(B.PULL_DOWN), u());
} else
x && (g.current === B.SWIPE ? (v.current = D, l(D)) : g.current === B.PULL_DOWN && (v.current = y, E(y)));
}
});
Qn(e, N, O, I);
}
const ut = "wheel";
function dt(e) {
(Math.abs(e.deltaX) > Math.abs(e.deltaY) || e.ctrlKey) && e.preventDefault();
}
function Jn() {
const e = n.useRef(null);
return n.useCallback((t) => {
var o;
t ? t.addEventListener(ut, dt, { passive: !1 }) : (o = e.current) === null || o === void 0 || o.removeEventListener(ut, dt), e.current = t;
}, []);
}
function eo(e, t, o, r, s, l, i, c, f) {
const u = n.useRef(0), E = n.useRef(0), h = n.useRef(), b = n.useRef(), v = n.useRef(0), m = n.useRef(0), { setTimeout: a, clearTimeout: d } = Pe(), g = n.useCallback(() => {
h.current && (d(h.current), h.current = void 0);
}, [d]), P = n.useCallback(() => {
b.current && (d(b.current), b.current = void 0);
}, [d]), M = T(() => {
e !== A.SWIPE && (u.current = 0, m.current = 0, g(), P());
});
n.useEffect(M, [e, M]);
const N = T((O) => {
b.current = void 0, u.current === O && f(u.current);
}), I = T((O) => {
if (!O.ctrlKey && !(Math.abs(O.deltaY) > Math.abs(O.deltaX)))
if (e === A.NONE) {
if (Math.abs(O.deltaX) <= 1.2 * Math.abs(v.current)) {
v.current = O.deltaX;
return;
}
if (!o(-O.deltaX))
return;
if (E.current += O.deltaX, g(), Math.abs(E.current) > 30)
E.current = 0, v.current = 0, m.current = Date.now(), l();
else {
const _ = E.current;
h.current = a(() => {
h.current = void 0, _ === E.current && (E.current = 0);
}, s);
}
} else if (e === A.SWIPE) {
let _ = u.current - O.deltaX;
if (_ = Math.min(Math.abs(_), r) * Math.sign(_), u.current = _, i(_), P(), Math.abs(_) > 0.2 * r) {
v.current = O.deltaX, c(_, Date.now() - m.current);
return;
}
b.current = a(() => N(_), 2 * s);
} else
v.current = O.deltaX;
});
n.useEffect(() => t(St, I), [t, I]);
}
const to = ze("container"), Gt = n.createContext(null), le = K("useController", "ControllerContext", Gt);
function no({ children: e, ...t }) {
var o;
const { carousel: r, animation: s, controller: l, on: i, styles: c, render: f } = t, [u, E] = n.useState(), h = Ce(), b = Fn(), [v, m] = n.useState(A.NONE), a = n.useRef(0), d = n.useRef(0), g = n.useRef(1), { registerSensors: P, subscribeSensors: M } = jn(), { subscribe: N, publish: I } = fe(), O = _e(), _ = _e(), w = _e(), { containerRef: x, setContainerRef: D, containerRect: y } = Ge(), q = ct(Jn(), D), V = n.useRef(null), ie = ct(V, void 0), Ie = Ye(), G = (p) => (Ie ? -1 : 1) * (typeof p == "number" ? p : 1), ne = T(() => {
var p;
return (p = x.current) === null || p === void 0 ? void 0 : p.focus();
}), pe = T(() => t), me = T(() => h), L = n.useCallback((p) => I(Z, p), [I]), Y = n.useCallback((p) => I(J, p), [I]), ce = n.useCallback(() => I(se), [I]), Ne = (p) => !(r.finite && (G(p) > 0 && h.currentIndex === 0 || G(p) < 0 && h.currentIndex === h.slides.length - 1)), qe = (p) => {
var S;
a.current = p, (S = x.current) === null || S === void 0 || S.style.setProperty(k("swipe_offset"), `${Math.round(p)}px`);
}, { closeOnPullDown: Oe } = l, we = (p) => {
var S, F;
d.current = p, g.current = (() => Math.min(Math.max(wn(1 - p / 60 * (1 - 0.5), 2), 0.5), 1))(), (S = x.current) === null || S === void 0 || S.style.setProperty(k("pull_down_offset"), `${Math.round(p)}px`), (F = x.current) === null || F === void 0 || F.style.setProperty(k("pull_down_opacity"), `${g.current}`);
}, { prepareAnimation: en } = lt(V, (p, S, F) => {
if (V.current && y)
return {
keyframes: [
{
transform: `translate(0, ${p.rect.y - S.y + F.y}px)`,
opacity: p.opacity
},
{ transform: "translate(0, 0)", opacity: 1 }
],
duration: p.duration,
easing: s.easing.fade
};
}), Qe = (p, S) => {
if (Oe) {
we(p);
let F = 0;
V.current && (F = s.fade * (S ? 2 : 1), en({
rect: V.current.getBoundingClientRect(),
opacity: g.current,
duration: F
})), w(() => {
we(0), m(A.NONE);
}, F), m(A.ANIMATION), S || ce();
}
}, { prepareAnimation: tn, isAnimationPlaying: nn } = lt(V, (p, S, F) => {
var U;
if (V.current && y && (!((U = h.animation) === null || U === void 0) && U.duration)) {
const H = be(r.spacing), ye = (H.percent ? H.percent * y.width / 100 : H.pixel) || 0;
return {
keyframes: [
{
transform: `translate(${G(h.globalIndex - p.index) * (y.width + ye) + p.rect.x - S.x + F.x}px, 0)`
},
{ transform: "translate(0, 0)" }
],
duration: h.animation.duration,
easing: h.animation.easing
};
}
}), ae = T((p) => {
var S, F;
const U = p.offset || 0, H = U ? s.swipe : (S = s.navigation) !== null && S !== void 0 ? S : s.swipe, ye = !U && !nn() ? s.easing.navigation : s.easing.swipe;
let { direction: he } = p;
const ve = (F = p.count) !== null && F !== void 0 ? F : 1;
let Se = A.ANIMATION, X = H * ve;
if (!he) {
const ue = y == null ? void 0 : y.width, tt = p.duration || 0, Te = ue ? H / ue * Math.abs(U) : H;
ve !== 0 ? (tt < Te ? X = X / Te * Math.max(tt, Te / 5) : ue && (X = H / ue * (ue - Math.abs(U))), he = G(U) > 0 ? Z : J) : X = H / 2;
}
let Me = 0;
he === Z ? Ne(G(1)) ? Me = -ve : (Se = A.NONE, X = H) : he === J && (Ne(G(-1)) ? Me = ve : (Se = A.NONE, X = H)), X = Math.round(X), _(() => {
qe(0), m(A.NONE);
}, X), V.current && tn({
rect: V.current.getBoundingClientRect(),
index: h.globalIndex
}), m(Se), I(rt, {
type: "swipe",
increment: Me,
duration: X,
easing: ye
});
});
n.useEffect(() => {
var p, S;
!((p = h.animation) === null || p === void 0) && p.increment && (!((S = h.animation) === null || S === void 0) && S.duration) && O(() => b({ type: "swipe", increment: 0 }), h.animation.duration);
}, [h.animation, b, O]);
const Ze = [
M,
Ne,
(y == null ? void 0 : y.width) || 0,
s.swipe,
() => m(A.SWIPE),
(p) => qe(p),
(p, S) => ae({ offset: p, duration: S, count: 1 }),
(p) => ae({ offset: p, count: 0 })
], on = [
() => {
Oe && m(A.PULL_DOWN);
},
(p) => we(p),
(p) => Qe(p),
(p) => Qe(p, !0)
];
Zn(...Ze, Oe, ...on), eo(v, ...Ze);
const Je = T(() => {
var p;
l.focus && ((p = x.current) === null || p === void 0 || p.focus());
});
n.useEffect(Je, [Je]);
const et = T(() => {
var p;
(p = i.view) === null || p === void 0 || p.call(i, { index: h.currentIndex });
});
n.useEffect(et, [h.globalIndex, et]), n.useEffect(() => kt(N(Z, (p) => ae({ direction: Z, ...p })), N(J, (p) => ae({ direction: J, ...p })), N(rt, (p) => b(p))), [N, ae, b]);
const rn = n.useMemo(() => ({
prev: L,
next: Y,
close: ce,
focus: ne,
slideRect: y ? Mn(y, r.padding) : { width: 0, height: 0 },
containerRect: y || { width: 0, height: 0 },
subscribeSensors: M,
containerRef: x,
setCarouselRef: ie,
toolbarWidth: u,
setToolbarWidth: E
}), [
L,
Y,
ce,
ne,
M,
y,
x,
ie,
u,
E,
r.padding
]);
return n.useImperativeHandle(l.ref, () => ({
prev: L,
next: Y,
close: ce,
focus: ne,
getLightboxProps: pe,
getLightboxState: me
}), [L, Y, ce, ne, pe, me]), n.createElement("div", { ref: q, className: W(C(to()), C(Xe)), style: {
...v === A.SWIPE ? { [k("swipe_offset")]: `${Math.round(a.current)}px` } : null,
...v === A.PULL_DOWN ? {
[k("pull_down_offset")]: `${Math.round(d.current)}px`,
[k("pull_down_opacity")]: `${g.current}`
} : null,
...l.touchAction !== "none" ? { [k("controller_touch_action")]: l.touchAction } : null,
...c.container
}, ...l.aria ? { role: "presentation", "aria-live": "polite" } : null, tabIndex: -1, ...P }, y && n.createElement(
Gt.Provider,
{ value: rn },
e,
(o = f.controls) === null || o === void 0 ? void 0 : o.call(f)
));
}
const oo = z(Ue, no);
function Q(e) {
return de(_t, e);
}
function ft(e) {
return de("slide", e);
}
function Fe({ slide: e, offset: t }) {
const o = n.useRef(null), { currentIndex: r } = Ce(), { slideRect: s, close: l } = le(), { render: i, carousel: { imageFit: c, imageProps: f }, on: { click: u }, controller: { closeOnBackdropClick: E }, styles: { slide: h } } = $(), b = () => {
var m, a, d, g;
let P = (m = i.slide) === null || m === void 0 ? void 0 : m.call(i, { slide: e, offset: t, rect: s });
return !P && yn(e) && (P = n.createElement(qn, { slide: e, offset: t, render: i, rect: s, imageFit: c, imageProps: f, onClick: t === 0 ? () => u == null ? void 0 : u({ index: r }) : void 0 })), P ? n.createElement(
n.Fragment,
null,
(a = i.slideHeader) === null || a === void 0 ? void 0 : a.call(i, { slide: e }),
((d = i.slideContainer) !== null && d !== void 0 ? d : ({ children: M }) => M)({ slide: e, children: P }),
(g = i.slideFooter) === null || g === void 0 ? void 0 : g.call(i, { slide: e })
) : null;
}, v = (m) => {
const a = o.current, d = m.target instanceof HTMLElement ? m.target : void 0;
E && d && a && (d === a || Array.from(a.children).find((g) => g === d) && d.classList.contains(C(Ct))) && l();
};
return n.createElement("div", { ref: o, className: W(C(ft()), t === 0 && C(ft("current")), C(Xe)), onClick: v, style: h }, b());
}
function pt() {
const e = $().styles.slide;
return n.createElement("div", { className: C("slide"), style: e });
}
function ro({ carousel: e }) {
const { slides: t, currentIndex: o, globalIndex: r } = Ce(), { setCarouselRef: s } = le(), l = be(e.spacing), i = be(e.padding), c = [], f = kn(e, t, 1);
if (Ft(t)) {
for (let u = o - f; u < o; u += 1) {
const E = r + u - o;
c.push(!e.finite || u >= 0 ? n.createElement(Fe, { key: E, slide: t[(u + f * t.length) % t.length], offset: u - o }) : n.createElement(pt, { key: E }));
}
c.push(n.createElement(Fe, { key: r, slide: t[o], offset: 0 }));
for (let u = o + 1; u <= o + f; u += 1) {
const E = r + u - o;
c.push(!e.finite || u <= t.length - 1 ? n.createElement(Fe, { key: E, slide: t[u % t.length], offset: u - o }) : n.createElement(pt, { key: E }));
}
}
return n.createElement("div", { ref: s, className: W(C(Q()), c.length > 0 && C(Q("with_slides"))), style: {
[`${k(Q("slides_count"))}`]: c.length,
[`${k(Q("spacing_px"))}`]: l.pixel || 0,
[`${k(Q("spacing_percent"))}`]: l.percent || 0,
[`${k(Q("padding_px"))}`]: i.pixel || 0,
[`${k(Q("padding_percent"))}`]: i.percent || 0
} }, c);
}
const so = z(_t, ro);
function Yt() {
const { carousel: e } = $(), { slides: t, currentIndex: o } = Ce(), r = t.length === 0 || e.finite && o === 0, s = t.length === 0 || e.finite && o === t.length - 1;
return { prevDisabled: r, nextDisabled: s };
}
function lo(e) {
var t;
const o = Ye(), { publish: r } = fe(), { animation: s } = $(), { prevDisabled: l, nextDisabled: i } = Yt(), c = ((t = s.navigation) !== null && t !== void 0 ? t : s.swipe) / 2, f = at(() => r(Z), c), u = at(() => r(J), c), E = T((h) => {
switch (h.key) {
case xn:
r(se);
break;
case Cn:
(o ? i : l) || (o ? u : f)();
break;
case Pn:
(o ? l : i) || (o ? f : u)();
break;
}
});
n.useEffect(() => e(yt, E), [e, E]);
}
function mt({ label: e, icon: t, renderIcon: o, action: r, onClick: s, disabled: l, style: i }) {
return n.createElement(Le, { label: e, icon: t, renderIcon: o, className: C(`navigation_${r}`), disabled: l, onClick: s, style: i, ...Kn(le().focus, l) });
}
function io({ render: { buttonPrev: e, buttonNext: t, iconPrev: o, iconNext: r }, styles: s }) {
const { prev: l, next: i, subscribeSensors: c } = le(), { prevDisabled: f, nextDisabled: u } = Yt();
return lo(c), n.createElement(
n.Fragment,
null,
e ? e() : n.createElement(mt, { label: "Previous", action: Z, icon: Un, renderIcon: o, style: s.navigationPrev, disabled: f, onClick: l }),
t ? t() : n.createElement(mt, { label: "Next", action: J, icon: Xn, renderIcon: r, style: s.navigationNext, disabled: u, onClick: i })
);
}
const co = z(dn, io), ht = C(_n), ao = C(Pt);
function uo(e) {
return "style" in e;
}
function vt(e, t, o) {
const r = window.getComputedStyle(e), s = o ? "padding-left" : "padding-right", l = o ? r.paddingLeft : r.paddingRight, i = e.style.getPropertyValue(s);
return e.style.setProperty(s, `${(parseInt(l, 10) || 0) + t}px`), () => {
i ? e.style.setProperty(s, i) : e.style.removeProperty(s);
};
}
function fo({ noScroll: { disabled: e }, children: t }) {
const o = Ye();
return te(() => {
if (e)
return () => {
};
const r = [], { body: s, documentElement: l } = document, i = Math.round(window.innerWidth - l.clientWidth);
if (i > 0) {
r.push(vt(s, i, o));
const c = s.getElementsByTagName("*");
for (let f = 0; f < c.length; f += 1) {
const u = c[f];
uo(u) && window.getComputedStyle(u).getPropertyValue("position") === "fixed" && !u.classList.contains(ao) && r.push(vt(u, i, o));
}
}
return s.classList.add(ht), () => {
s.classList.remove(ht), r.forEach((c) => c());
};
}, [o, e]), n.createElement(n.Fragment, null, t);
}
const po = z(fn, fo);
function Et(e) {
return de(bt, e);
}
function gt(e, t, o) {
const r = e.getAttribute(t);
return e.setAttribute(t, o), () => {
r ? e.setAttribute(t, r) : e.removeAttribute(t);
};
}
function mo({ children: e, animation: t, styles: o, className: r, on: s, portal: l, close: i }) {
const [c, f] = n.useState(!1), [u, E] = n.useState(!1), h = n.useRef([]), { setTimeout: b } = Pe(), { subscribe: v } = fe(), a = zt() ? 0 : t.fade;
n.useEffect(() => (f(!0), () => {
f(!1), E(!1);
}), []);
const d = T(() => {
var N;
E(!1), (N = s.exiting) === null || N === void 0 || N.call(s), b(() => {
var I;
(I = s.exited) === null || I === void 0 || I.call(s), i();
}, a);
});
n.useEffect(() => v(se, d), [v, d]);
const g = T((N) => {
var I, O, _;
N.scrollTop, E(!0), (I = s.entering) === null || I === void 0 || I.call(s);
const w = (_ = (O = N.parentNode) === null || O === void 0 ? void 0 : O.children) !== null && _ !== void 0 ? _ : [];
for (let x = 0; x < w.length; x += 1) {
const D = w[x];
["TEMPLATE", "SCRIPT", "STYLE"].indexOf(D.tagName) === -1 && D !== N && (h.current.push(gt(D, "inert", "true")), h.current.push(gt(D, "aria-hidden", "true")));
}
b(() => {
var x;
(x = s.entered) === null || x === void 0 || x.call(s);
}, a);
}), P = T(() => {
h.current.forEach((N) => N()), h.current = [];
}), M = n.useCallback((N) => {
N ? g(N) : P();
}, [g, P]);
return c ? un(n.createElement("div", { ref: M, className: W(r, C("root"), C(Et()), C(Pt), u && C(Et("open"))), role: "presentation", "aria-live": "polite", style: {
...t.fade !== We.animation.fade ? { [k("fade_animation_duration")]: `${a}ms` } : null,
...t.easing.fade !== We.animation.easing.fade ? { [k("fade_animation_timing_function")]: t.easing.fade } : null,
...o.root
} }, e), l.root || document.body) : null;
}
const ho = z(bt, mo);
function vo({ children: e }) {
return n.createElement(n.Fragment, null, e);
}
const Eo = z(pn, vo);
function go(e) {
return de(xt, e);
}
function _o({ toolbar: { buttons: e }, render: { buttonClose: t, iconClose: o }, styles: r }) {
const { close: s, setToolbarWidth: l } = le(), { setContainerRef: i, containerRect: c } = Ge();
te(() => {
l(c == null ? void 0 : c.width);
}, [l, c == null ? void 0 : c.width]);
const f = () => t ? t() : n.createElement(Le, { key: se, label: "Close", icon: $n, renderIcon: o, onClick: s });
return n.createElement("div", { ref: i, style: r.toolbar, className: C(go()), ...Rn() }, e == null ? void 0 : e.map((u) => u === se ? f() : u));
}
const bo = z(xt, _o);
function Kt(e, t) {
var o;
return n.createElement(e.module.component, { key: e.module.name, ...t }, (o = e.children) === null || o === void 0 ? void 0 : o.map((r) => Kt(r, t)));
}
function xo(e, t = {}) {
const { easing: o, ...r } = e, { easing: s, ...l } = t;
return {
easing: { ...o, ...s },
...r,
...l
};
}
function Co({ carousel: e, animation: t, render: o, toolbar: r, controller: s, noScroll: l, on: i, plugins: c, slides: f, index: u, ...E }) {
const { animation: h, carousel: b, render: v, toolbar: m, controller: a, noScroll: d, on: g, slides: P, index: M, plugins: N, ...I } = We, { config: O, augmentation: _ } = Nn([
R(ho, [
R(po, [
R(oo, [
R(so),
R(bo),
R(co)
])
])
])
], c || N), w = _({
animation: xo(h, t),
carousel: { ...b, ...e },
render: { ...v, ...o },
toolbar: { ...m, ...r },
controller: { ...a, ...s },
noScroll: { ...d, ...l },
on: { ...g, ...i },
...I,
...E
});
return w.open ? n.createElement(
An,
{ ...w },
n.createElement(
Hn,
{ slides: f || P, index: u || M },
n.createElement(
Wn,
null,
n.createElement(Dn, null, Kt(R(Eo, O), w))
)
)
) : null;
}
var ee = /* @__PURE__ */ ((e) => (e.LIGHT_BOX_OPEN = "LIGHT_BOX_OPEN", e.LIGHT_BOX_CLOSE = "LIGHT_BOX_CLOSE", e.LIGHT_BOX_OPEN_BY_MEDIA_INDEX = "LIGHT_BOX_OPEN_BY_MEDIA_INDEX", e.LIGHT_BOX_MOVE_PHOTO_BY_INDEX = "LIGHT_BOX_MOVE_PHOTO_BY_INDEX", e))(ee || {});
const Po = {
mediaIndex: 0,
isOpen: !1
}, Lo = (e, t) => {
switch (t.type) {
case ee.LIGHT_BOX_OPEN:
return { ...e, isOpen: !0 };
case ee.LIGHT_BOX_CLOSE:
return { ...e, isOpen: !1 };
case ee.LIGHT_BOX_OPEN_BY_MEDIA_INDEX:
return { isOpen: !0, mediaIndex: t.payload };
case ee.LIGHT_BOX_MOVE_PHOTO_BY_INDEX:
return { isOpen: !0, mediaIndex: t.payload };
default:
return e;
}
};
const re = (e) => C(`slide_${e}`), $e = {
descriptionTextAlign: "start",
descriptionMaxLines: 3,
showToggle: !1
}, Ke = (e) => ({
...$e,
...e
});
function Io() {
const { captions: e } = $();
return Ke(e);
}
const jt = n.createContext(null), je = K("useCaptions", "CaptionsContext", jt);
function No({ captions: e, children: t }) {
const { ref: o } = Ke(e), [r, s] = n.useState(!0), l = n.useMemo(() => ({
visible: r,
show: () => s(!0),
hide: () => s(!1)
}), [r]);
return n.useImperativeHandle(o, () => l, [l]), n.createElement(jt.Provider, { value: l }, t);
}
function Oo({ title: e }) {
const { toolbarWidth: t } = le(), { styles: o } = $(), { visible: r } = je();
return r ? n.createElement(
"div",
{ style: o.captionsTitleContainer, className: W(re("captions_container"), re("title_container")) },
n.createElement("div", { className: re("title"), style: {
...t ? { [k("toolbar_width")]: `${t}px` } : null,
...o.captionsTitle
} }, e)
) : null;
}
function wo({ description: e }) {
const { descriptionTextAlign: t, descriptionMaxLines: o } = Io(), { styles: r } = $(), { visible: s } = je();
return s ? n.createElement(
"div",
{ style: r.captionsDescriptionContainer, className: W(re("captions_container"), re("description_container")) },
n.createElement("div", { className: re("description"), style: {
...t !== $e.descriptionTextAlign || o !== $e.descriptionMaxLines ? {
[k("slide_description_text_align")]: t,
[k("slide_description_max_lines")]: o
} : null,
...r.captionsDescription
} }, typeof e == "string" ? e.split(`
`).flatMap((l, i) => [...i > 0 ? [n.createElement("br", { key: i })] : [], l]) : e)
) : null;
}
const qt = () => n.createElement(
n.Fragment,
null,
n.createElement("path", { strokeWidth: 2, stroke: "currentColor", strokeLinejoin: "round", fill: "none", d: "M3 5l18 0l0 14l-18 0l0-14z" }),
n.createElement("path", { d: "M7 15h3c.55 0 1-.45 1-1v-1H9.5v.5h-2v-3h2v.5H11v-1c0-.55-.45-1-1-1H7c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1zm7 0h3c.55 0 1-.45 1-1v-1h-1.5v.5h-2v-3h2v.5H18v-1c0-.55-.45-1-1-1h-3c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1z" })
), yo = j("CaptionsVisible", qt()), So = Bn("CaptionsVisible", qt());
function Mo() {
const { visible: e, show: t, hide: o } = je(), { render: r } = $();
return r.buttonCaptions ? n.createElement(n.Fragment, null, r.buttonCaptions({ visible: e, show: t, hide: o })) : n.createElement(Le, { label: e ? "Hide captions" : "Show captions", icon: e ? yo : So, renderIcon: e ? r.iconCaptionsVisible : r.iconCaptionsHidden, onClick: e ? o : t });
}
function To({ augment: e, addModule: t }) {
e(({ captions: o, render: { slideFooter: r, ...s }, toolbar: l, ...i }) => {
const c = Ke(o);
return {
render: {
slideFooter: ({ slide: f }) => n.createElement(
n.Fragment,
null,
r == null ? void 0 : r({ slide: f }),
f.title && n.createElement(Oo, { title: f.title }),
f.description && n.createElement(wo, { description: f.description })
),
...s
},
toolbar: Vt(l, nt, c.showToggle ? n.createElement(Mo, null) : null),
captions: c,
...i
};
}), t(z(nt, No));
}
const Ro = {
auto: !1,
ref: null
}, Qt = (e) => ({
...Ro,
...e
}), Zt = n.createContext(null), ko = K("useFullscreen", "FullscreenContext", Zt);
function Do({ fullscreen: e, children: t }) {
const { auto: o, ref: r } = Qt(e), s = n.useRef(null), [l, i] = n.useState(!1), [c, f] = n.useState();
te(() => {
var a, d, g, P;
f(!((P = (g = (d = (a = document.fullscreenEnabled) !== null && a !== void 0 ? a : document.webkitFullscreenEnabled) !== null && d !== void 0 ? d : document.mozFullScreenEnabled) !== null && g !== void 0 ? g : document.msFullscreenEnabled) !== null && P !== void 0 && P));
}, []);
const u = n.useCallback(() => {
var a, d, g;
return (g = (d = (a = document.fullscreenElement) !== null && a !== void 0 ? a : document.webkitFullscreenElement) !== null && d !== void 0 ? d : document.mozFullScreenElement) !== null && g !== void 0 ? g : document.msFullscreenElement;
}, []), E = n.useCallback(() => {
const a = s.current;
if (a)
try {
a.requestFullscreen ? a.requestFullscreen().catch(() => {
}) : a.webkitRequestFullscreen ? a.webkitRequestFullscreen() : a.mozRequestFullScreen ? a.mozRequestFullScreen() : a.msRequestFullscreen && a.msRequestFullscreen();
} catch {
}
}, []), h = n.useCallback(() => {
if (u())
try {
document.exitFullscreen ? document.exitFullscreen().catch(() => {
}) : document.webkitExitFullscreen ? document.webkitExitFullscreen() : document.mozCancelFullScreen ? document.mozCancelFullScreen() : document.msExitFullscreen && document.msExitFullscreen();
} catch {
}
}, [u]), b = n.useCallback(() => {
u() === s.current ? i(!0) : i(!1);
}, [u]);
n.useEffect(() => {
const a = ["fullscreenchange", "webkitfullscreenchange", "mozfullscreenchange", "MSFullscreenChange"];
return a.forEach((d) => {
document.addEventListener(d, b);
}), () => {
a.forEach((d) => {
document.removeEventListener(d, b);
});
};
}, [b]);
const v = T(() => {
var a;
return (a = o ? E : null) === null || a === void 0 ? void 0 : a();
});
n.useEffect(() => (v(), () => h()), [v, h]);
const m = n.useMemo(() => ({
fullscreen: l,
disabled: c,
enter: E,
exit: h
}), [l, c, E, h]);
return n.useImperativeHandle(r, () => m, [m]), n.createElement(
"div",
{ ref: s, className: W(C(Ve), C(Ct)) },
n.createElement(Zt.Provider, { value: m }, t)
);
}
const Ao = j("EnterFullscreen", n.createElement("path", { d: "M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" })), Fo = j("ExitFullscreen", n.createElement("path", { d: "M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z" }));
function Vo() {
var e;
const { fullscreen: t, disabled: o, enter: r, exit: s } = ko(), { render: l } = $();
return o ? null : l.buttonFullscreen ? n.createElement(n.Fragment, null, (e = l.buttonFullscreen) === null || e === void 0 ? void 0 : e.call(l, { fullscreen: t, disabled: o, enter: r, exit: s })) : n.createElement(Le, { disabled: o, label: t ? "Exit Fullscreen" : "Enter Fullscreen", icon: t ? Fo : Ao, renderIcon: t ? l.iconExitFullscreen : l.iconEnterFullscreen, onClick: t ? s : r });
}
function Ho({ augment: e, contains: t, addParent: o }) {
e(({ fullscreen: r, toolbar: s, ...l }) => ({
toolbar: Vt(s, Ve, n.createElement(Vo, null)),
fullscreen: Qt(r),
...l
})), o(t(ot) ? ot : Ue, z(Ve, Do));
}
const Wo = {
controls: !0,
playsInline: !0
}, Jt = (e) => ({
...Wo,
...e
});
function Bo() {
const { video: e } = $();
return Jt(e);
}
function $o({ slide: e, offset: t }) {
const o = Bo(), { publish: r } = fe(), { setContainerRef: s, containerRect: l } = Ge(), i = n.useRef(null);
n.useEffect(() => {
t !== 0 && i.current && !i.current.paused && i.current.pause();
}, [t]), n.useEffect(() => {
t === 0 && i.current && (e.autoPlay || o.autoPlay) && (r(vn), i.current.play().catch(() => {
}));
}, [t, o.autoPlay, e.autoPlay, r]);
const c = T((d) => {
t === 0 && (o.autoPlay || e.autoPlay) && d.paused && d.play().catch(() => {
});
}), f = n.useCallback((d) => {
i.current = d, d && c(d);
}, [c]), { width: u, height: E, poster: h, sources: b } = e, v = () => {
const d = {};
if (d.style = { maxWidth: "100%", maxHeight: "100%" }, u && E && l) {
const g = u / E > l.width / l.height, P = g ? l.width : Math.round(l.height / E * u), M = g ? Math.round(l.width / u * E) : l.height;
d.width = P, d.height = M, d.style.width = P, d.style.height = M;
}
return d;
}, m = (d) => e[d] === !1 ? null : e[d] === !0 ? { [d]: !0 } : o[d] === !1 ? null : o[d] === !0 ? { [d]: !0 } : null, a = (d) => o[d] || e[d] ? { [d]: e[d] || o[d] } : null;
return n.createElement(n.Fragment, null, b && n.createElement("div", { ref: s, style: {
width: "100%",
height: "100%",
...u ? { maxWidth: `${u}px` } : null
}, className: W(C("video_container"), C(Xe)) }, l && n.createElement("video", { ref: f, poster: h, ...v(), ...m("controls"), ...m("playsInline"), ...m("loop"), ...m("muted"), ...m("playsInline"), ...m("disablePictureInPicture"), ...m("disableRemotePlayback"), ...a("controlsList"), ...a("crossOrigin"), ...a("preload"), onPlay: () => {
r(En);
}, onEnded: () => {
r(gn);
} }, b.map(({ src: d, type: g }, P) => n.createElement("source", { key: P, src: d, type: g })))));
}
function Uo(e) {
return e.type === "video";
}
function Xo({ augment: e }) {
e(({ render: { slide: t, ...o }, video: r, ...s }) => ({
render: {
slide: ({ slide: l, offset: i, rect: c }) => {
var f;
return Uo(l) ? n.createElement($o, { key: (f = l.sources) === null || f === void 0 ? void 0 : f.map((u) => u.src).join(" "), slide: l, offset: i }) : t == null ? void 0 : t({ slide: l, offset: i, rect: c });
},
...o
},
video: Jt(r),
...s
}));
}
const zo = ln((e, t) => {
const [o, r] = cn(
Lo,
Po
), { numOfMediaPerRow: s, mediaLightbox: l, lightBoxAdditionalProps: i } = e;
an(
t,
() => ({
openMediaByIndex(E, h) {
r({
type: ee.LIGHT_BOX_OPEN_BY_MEDIA_INDEX,
payload: E === 0 ? h : h + E * s
});
}
}),
[s]
);
const { mediaIndex: c, isOpen: f } = o, u = (i == null ? void 0 : i.plugins) || [];
return f ? /* @__PURE__ */ sn.jsx(
Co,
{
close: () => r({ type: ee.LIGHT_BOX_CLOSE }),
open: f,
slides: l,
index: c,
plugins: [To, Ho, Xo, ...u],
...i
}
) : null;
});
zo.displayName = "MediaLightBox";
export {
zo as MediaLightBox,
zo as default
};