@car-cutter/react-webplayer 0.10.0 → 0.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,2880 +0,0 @@
1
- import { jsx as t, jsxs as R, Fragment as ie } from "react/jsx-runtime";
2
- import { useState as Y, useEffect as W, createContext as xe, useContext as Ce, useMemo as re, useCallback as z, useRef as j, Fragment as It } from "react";
3
- const Pe = "cc-webplayer", $e = "cc-webplayer-custom-media", Ue = "cc-webplayer-icon", Ge = "composition-loading", Be = "composition-loaded", qe = "composition-load-error", Ke = "item-change", Je = "extend-mode-on", Qe = "extend-mode-off", et = "hotspots-on", tt = "hotspots-off", rt = "gallery-open", nt = "gallery-close", Mt = !1, Nt = !1, Tt = !1, zt = "quality", St = 0, _t = 1 / 0, Vt = 1, Ht = !1, ot = "cc-webplayer:", Pt = !1;
4
- function jr(e, r) {
5
- return `https://cdn.car-cutter.com/gallery/${e}/${r}/composition_v3.json`;
6
- }
7
- function Dt(e, r) {
8
- const n = e.split("/"), o = n.pop();
9
- return [n.join("/"), r, o].join("/");
10
- }
11
- function $r() {
12
- return !!customElements.get(Pe) && !!customElements.get($e) && !!customElements.get(Ue);
13
- }
14
- async function Rt(e) {
15
- const r = await fetch(e);
16
- if (!r.ok)
17
- throw new Error(`Failed to fetch composition: ${r.statusText}`);
18
- return await r.json();
19
- }
20
- const _e = /* @__PURE__ */ new Map(), At = (e) => {
21
- const [r, n] = Y({
22
- status: "pending",
23
- isSuccess: !1
24
- });
25
- return W(() => {
26
- const o = (u) => n({ status: "success", data: u, isSuccess: !0 }), a = _e.get(e);
27
- if (a && !(a instanceof Promise)) {
28
- o(a);
29
- return;
30
- }
31
- n({
32
- status: "fetching",
33
- isSuccess: !1
34
- }), async function() {
35
- try {
36
- let u;
37
- if (a)
38
- u = await a;
39
- else {
40
- const h = Rt(e);
41
- _e.set(e, h), u = await h, _e.set(e, u);
42
- }
43
- o(u);
44
- } catch (u) {
45
- n({
46
- status: "error",
47
- isSuccess: !1,
48
- error: u
49
- });
50
- }
51
- }();
52
- }, [e]), r;
53
- }, st = xe(null), ne = () => {
54
- const e = Ce(st);
55
- if (!e)
56
- throw new Error(
57
- "useGlobalContext must be used within a GlobalContextProvider"
58
- );
59
- return e;
60
- }, Wt = ({ children: e, ...r }) => /* @__PURE__ */ t(st.Provider, { value: r, children: e }), at = xe(null), se = () => {
61
- const e = Ce(at);
62
- if (!e)
63
- throw new Error(
64
- "useCompositionContext must be used within a CompositionContextProvider"
65
- );
66
- return e;
67
- }, Ot = ({ composition: e, children: r }) => {
68
- const {
69
- aspectRatio: n,
70
- categories: o,
71
- imageHdWidth: a,
72
- imageSubWidths: u
73
- } = e, { minMediaWidth: h, maxMediaWidth: p } = ne(), L = re(
74
- () => o.flatMap(({ items: C }) => C),
75
- [o]
76
- ), I = {
77
- aspectRatio: n.replace(":", " / ")
78
- }, f = re(() => {
79
- const C = u.concat(a), H = C.sort((s, m) => s - m), S = H.filter(
80
- (s) => s >= h && s <= p
81
- );
82
- if (S.length === 0) {
83
- const s = (h + p) / 2, m = C.reduce(
84
- (w, y) => Math.abs(y - s) < Math.abs(w - s) ? y : w,
85
- a
86
- );
87
- return console.warn(
88
- `None of available media widths (${H.join("|")}) match the given constraints (${h > 0 ? `${h} ≤ ` : ""}width${p < 1 / 0 ? ` ≤ ${p}` : ""}).`,
89
- `Using the closest width instead (${m}).`
90
- ), [m];
91
- }
92
- return S;
93
- }, [u, a, h, p]);
94
- return /* @__PURE__ */ t(
95
- at.Provider,
96
- {
97
- value: {
98
- ...e,
99
- items: L,
100
- aspectRatioStyle: I,
101
- usedMediaWidths: f
102
- },
103
- children: r
104
- }
105
- );
106
- }, it = 500, He = 0.75, ye = 1 + He * 2;
107
- function ce(e, r, n) {
108
- return Math.min(Math.max(e, r), n);
109
- }
110
- const be = (e, r, n) => e + (r - e) * n, ct = xe(null), De = () => Ce(ct), ge = () => {
111
- const e = De();
112
- if (!e)
113
- throw new Error(
114
- "useCustomizationContext must be used within a CustomizationContextProvider"
115
- );
116
- return e;
117
- }, Xe = "*:size-full", Ze = "*:object-cover *:size-full", Xt = ({ children: e }) => {
118
- const { compositionUrl: r } = ne(), n = z(
119
- () => document.querySelector(
120
- `${Pe}[composition-url="${r}"]`
121
- ),
122
- [r]
123
- ), o = z((s) => {
124
- const m = s.querySelectorAll(Ue), w = /* @__PURE__ */ new Map();
125
- for (const y of m) {
126
- const v = y.getAttribute("name");
127
- if (!v) {
128
- console.warn("Icon element is missing a name attribute");
129
- continue;
130
- }
131
- const l = y.innerHTML, i = l ? /* @__PURE__ */ t(
132
- "div",
133
- {
134
- className: Xe,
135
- dangerouslySetInnerHTML: { __html: l }
136
- }
137
- ) : void 0;
138
- if (!i) {
139
- console.warn(`Icon "${v}" customization is empty.`);
140
- continue;
141
- }
142
- w.set(v, { Icon: i });
143
- }
144
- return w;
145
- }, []), [a, u] = Y(
146
- () => {
147
- const s = n();
148
- return s ? o(s) : /* @__PURE__ */ new Map();
149
- }
150
- );
151
- W(() => {
152
- const s = n();
153
- if (!s)
154
- return;
155
- const m = new MutationObserver(() => {
156
- u(o(s));
157
- });
158
- return m.observe(s, {
159
- childList: !0,
160
- subtree: !0
161
- }), () => m.disconnect();
162
- }, [o, n]);
163
- const h = z(
164
- (s) => a.get(s),
165
- [a]
166
- ), p = z(
167
- (s, m) => {
168
- u((w) => {
169
- const { Icon: y, ...v } = m;
170
- return new Map(
171
- w.set(s, {
172
- ...v,
173
- Icon: /* @__PURE__ */ t("div", { className: Xe, children: y })
174
- })
175
- );
176
- });
177
- },
178
- []
179
- ), L = z((s) => {
180
- u((m) => (m.delete(s), new Map(m)));
181
- }, []), I = z((s) => {
182
- const m = s.querySelectorAll(
183
- $e
184
- ), w = new Array();
185
- for (const y of m) {
186
- const v = y.innerHTML;
187
- if (!v) {
188
- console.warn("Custom media element is empty");
189
- continue;
190
- }
191
- const l = Number(y.getAttribute("index"));
192
- if (Number.isNaN(l)) {
193
- console.warn("Custom media element is missing the 'index' attribute");
194
- continue;
195
- }
196
- const i = y.getAttribute("thumbnail-src") ?? void 0, g = JSON.stringify({ index: l, thumbnailSrc: i });
197
- w.push({
198
- id: g,
199
- Media: /* @__PURE__ */ t(
200
- "div",
201
- {
202
- className: Ze,
203
- dangerouslySetInnerHTML: { __html: v }
204
- }
205
- ),
206
- index: l,
207
- thumbnailSrc: i
208
- });
209
- }
210
- return w;
211
- }, []), [f, C] = Y(() => {
212
- const s = n();
213
- return s ? I(s) : [];
214
- });
215
- W(() => {
216
- const s = n();
217
- if (!s)
218
- return;
219
- const m = new MutationObserver(() => {
220
- C(I(s));
221
- });
222
- return m.observe(s, {
223
- childList: !0,
224
- subtree: !0
225
- }), () => m.disconnect();
226
- }, [I, n]);
227
- const H = z((s) => {
228
- const { Media: m, ...w } = s, y = /* @__PURE__ */ t("div", { className: Ze, children: m }), v = JSON.stringify(w);
229
- return C((l) => [
230
- ...l,
231
- {
232
- id: v,
233
- Media: y,
234
- ...w
235
- }
236
- ]), v;
237
- }, []), S = z((s) => {
238
- C(
239
- (m) => m.filter((w) => w.id !== s)
240
- );
241
- }, []);
242
- return /* @__PURE__ */ t(
243
- ct.Provider,
244
- {
245
- value: {
246
- getIconConfig: h,
247
- registerIconConfig: p,
248
- unregisterIconConfig: L,
249
- customMediaList: f,
250
- registerCustomMedia: H,
251
- unregisterCustomMedia: S
252
- },
253
- children: e
254
- }
255
- );
256
- }, lt = xe(null), J = () => {
257
- const e = Ce(lt);
258
- if (!e)
259
- throw new Error(
260
- "useControlsContext must be used within a ControlsContextProvider"
261
- );
262
- return e;
263
- }, Zt = ({
264
- children: e
265
- }) => {
266
- const {
267
- infiniteCarrousel: r,
268
- preventFullScreen: n,
269
- emitEvent: o,
270
- isFullScreen: a,
271
- requestFullscreen: u,
272
- exitFullscreen: h
273
- } = ne(), { customMediaList: p } = ge(), { categories: L, items: I } = se(), f = re(() => {
274
- const A = new Array(
275
- ...I
276
- ), B = p.slice().sort((U, q) => U.index < 0 && q.index < 0 ? q.index - U.index : U.index < 0 ? 1 : q.index < 0 ? -1 : U.index - q.index);
277
- for (const U of B) {
278
- let q = U.index;
279
- q < 0 && (q = A.length + q + 1), A.splice(q, 0, {
280
- type: "custom",
281
- ...U
282
- });
283
- }
284
- return A;
285
- }, [I, p]), [C, H] = Y(f.map(() => null));
286
- W(() => {
287
- H(f.map(() => null));
288
- }, [f]);
289
- const S = z(
290
- (A, B) => {
291
- H(
292
- (U) => U.map((q, Se) => Se === A ? B : q)
293
- );
294
- },
295
- []
296
- ), [s, m] = Y(0), [w, y] = Y(null), v = w ?? s, l = f[v], i = C[v], [g, b] = Y(
297
- null
298
- ), k = !!g, O = z(() => b(null), []), P = z(() => {
299
- if (k || w !== null)
300
- return;
301
- const A = s - 1;
302
- A >= 0 ? y(A) : r && (b("first_to_last"), y(f.length - 1));
303
- }, [
304
- k,
305
- w,
306
- s,
307
- r,
308
- f.length
309
- ]), x = z(() => {
310
- if (k || w !== null)
311
- return;
312
- const A = s + 1;
313
- A < f.length ? y(A) : r && (b("last_to_first"), y(0));
314
- }, [
315
- k,
316
- w,
317
- s,
318
- f.length,
319
- r
320
- ]), N = z(
321
- (A) => {
322
- const B = Math.min(s, A), U = Math.max(s, A);
323
- C.slice(B, U + 1).filter((Se) => Se === null).length > 2 && b("instant"), y(A);
324
- },
325
- [s, C]
326
- );
327
- W(() => {
328
- o(Ke, {
329
- index: v,
330
- item: l
331
- });
332
- }, [l, o, v]);
333
- const _ = re(() => {
334
- let A;
335
- if (l.type === "custom") {
336
- const B = f.slice(0, v).reverse().find((U) => U.type !== "custom") ?? f.slice(v + 1).find((U) => U.type !== "custom");
337
- if (!B)
338
- throw new Error("No non-custom item found");
339
- A = B;
340
- } else
341
- A = l;
342
- for (const B of L)
343
- if (B.items.includes(A))
344
- return B.id;
345
- throw new Error("Current item not found in any category");
346
- }, [L, l, f, v]), V = z(
347
- (A) => {
348
- const B = L.find(({ id: q }) => q === A)?.items[0];
349
- if (B === void 0)
350
- throw new Error("Failed to find target category");
351
- const U = f.findIndex((q) => q === B);
352
- N(U);
353
- },
354
- [L, f, N]
355
- ), d = re(() => {
356
- switch (l.type) {
357
- case "image":
358
- return !!l.hotspots?.length;
359
- case "360":
360
- return i === "running";
361
- default:
362
- return !1;
363
- }
364
- }, [l, i]), [T, c] = Y(!0), E = z(() => {
365
- const A = !T;
366
- c(A), o(A ? et : tt);
367
- }, [o, T]), M = re(() => {
368
- switch (l.type) {
369
- case "video":
370
- return i !== "running";
371
- default:
372
- return !0;
373
- }
374
- }, [l, i]), [X, Z] = Y(!1), $ = z(() => {
375
- const A = !X;
376
- Z(A), o(A ? rt : nt);
377
- }, [o, X]), [F, Q] = Y(null), K = z(() => Q(null), []), te = !!F, ae = re(() => {
378
- switch (l.type) {
379
- case "image":
380
- return !0;
381
- case "360":
382
- return i === "running";
383
- default:
384
- return !1;
385
- }
386
- }, [l.type, i]), [oe, we] = Y(1), ve = oe !== 1, Ee = oe < ye, ke = oe > 1, le = z((A) => {
387
- we((B) => ce(B + A, 1, ye));
388
- }, []), Le = z(() => we(1), []), Ct = z(() => le(He), [le]), Et = z(() => le(-He), [le]), Ie = z(() => {
389
- Le(), K();
390
- }, [Le, K]), [ue, kt] = Y(!1), [Me, We] = Y(), [Ne, Oe] = Y(!1), de = z(
391
- async (A) => {
392
- Ie(), kt(A), o(A ? Je : Qe);
393
- },
394
- [o, Ie]
395
- ), me = z(() => {
396
- clearTimeout(Me);
397
- const A = setTimeout(() => {
398
- We(void 0);
399
- }, it);
400
- We(A);
401
- }, [Me]), Te = z(async () => {
402
- if (me(), !n) {
403
- const A = await u();
404
- if (Oe(!A), A)
405
- return;
406
- }
407
- de(!0);
408
- }, [
409
- n,
410
- de,
411
- u,
412
- me
413
- ]), ze = z(async () => {
414
- me(), !(!n && (Oe(!1), await h())) && de(!1);
415
- }, [
416
- n,
417
- de,
418
- h,
419
- me
420
- ]), Lt = z(() => {
421
- ue ? ze() : Te();
422
- }, [ze, Te, ue]);
423
- return W(() => {
424
- n || Ne && ue || a !== ue && (me(), de(a));
425
- }, [
426
- n,
427
- de,
428
- ue,
429
- Ne,
430
- a,
431
- me
432
- ]), /* @__PURE__ */ t(
433
- lt.Provider,
434
- {
435
- value: {
436
- items: f,
437
- setItemInteraction: S,
438
- slidable: f.length > 1,
439
- carrouselItemIndex: s,
440
- setCarrouselItemIndex: m,
441
- itemIndexCommand: w,
442
- setItemIndexCommand: y,
443
- masterItemIndex: v,
444
- specialCommand: g,
445
- isRunningSpecialCommand: k,
446
- finishSpecialCommand: O,
447
- prevItem: P,
448
- nextItem: x,
449
- scrollToItemIndex: N,
450
- displayedCategoryId: _,
451
- changeCategory: V,
452
- enableHotspotsControl: d,
453
- showHotspots: T,
454
- toggleHotspots: E,
455
- showGalleryControls: M,
456
- showGallery: X,
457
- toggleGallery: $,
458
- shownDetails: F,
459
- isShowingDetails: te,
460
- setShownDetails: Q,
461
- resetShownDetails: K,
462
- showZoomControls: ae,
463
- zoom: oe,
464
- isZooming: ve,
465
- setZoom: we,
466
- resetZoom: Le,
467
- canZoomIn: Ee,
468
- zoomIn: Ct,
469
- canZoomOut: ke,
470
- zoomOut: Et,
471
- resetView: Ie,
472
- extendMode: ue,
473
- enableExtendMode: Te,
474
- disableExtendMode: ze,
475
- toggleExtendMode: Lt,
476
- extendTransition: !!Me,
477
- fakeFullScreen: Ne
478
- },
479
- children: e
480
- }
481
- );
482
- }, ut = ["left", "center", "right", "fullW"], dt = ["top", "middle", "bottom", "fullH"], Yt = [
483
- ...ut,
484
- ...dt,
485
- "top-left",
486
- "top-center",
487
- "top-right",
488
- "top-fullW",
489
- "middle-left",
490
- "middle-center",
491
- "middle-right",
492
- "middle-fullW",
493
- "bottom-left",
494
- "bottom-center",
495
- "bottom-right",
496
- "bottom-fullW",
497
- "fullH-left",
498
- "fullH-center",
499
- "fullH-right",
500
- "fullW-fullW"
501
- ];
502
- function Ft(e) {
503
- return ut.includes(e);
504
- }
505
- function jt(e) {
506
- return dt.includes(e);
507
- }
508
- function $t(e) {
509
- return Yt.includes(e);
510
- }
511
- function Ut(e) {
512
- if (!$t(e))
513
- throw new Error(`Invalid position: ${e}`);
514
- return jt(e) ? [e, void 0] : Ft(e) ? [void 0, e] : e.split("-");
515
- }
516
- function D(...e) {
517
- return e.filter((r) => !!r).map((r) => r.trim()).join(" ");
518
- }
519
- function Gt(e) {
520
- switch (e) {
521
- case "left":
522
- return "left-1 small:left-2";
523
- case "right":
524
- return "right-1 small:right-2";
525
- case "center":
526
- return "left-1/2 -translate-x-1/2";
527
- case "fullW":
528
- return "inset-x-1 small:inset-x-2";
529
- }
530
- }
531
- function mt(e) {
532
- switch (e) {
533
- case "top":
534
- return "top-1 small:top-2";
535
- case "bottom":
536
- return "bottom-1 small:bottom-2";
537
- case "middle":
538
- return "top-1/2 -translate-y-1/2";
539
- case "fullH":
540
- return "inset-y-1 small:inset-y-2";
541
- }
542
- }
543
- function Bt({
544
- positionX: e,
545
- positionY: r
546
- }) {
547
- const n = new Array();
548
- return e && n.push(Gt(e)), r && n.push(mt(r)), n.join(" ");
549
- }
550
- function pe(e) {
551
- const [r, n] = Ut(e);
552
- return Bt({ positionX: n, positionY: r });
553
- }
554
- const G = ({
555
- customizationKey: e,
556
- className: r,
557
- children: n
558
- }) => {
559
- const { getIconConfig: o } = ge(), u = o(e)?.Icon;
560
- return u ? r ? /* @__PURE__ */ t("div", { className: r, children: u }) : u : n;
561
- }, qt = ({ className: e }) => /* @__PURE__ */ t(G, { className: e, customizationKey: "UI_CLOSE", children: /* @__PURE__ */ t(
562
- "svg",
563
- {
564
- className: e,
565
- width: "24",
566
- height: "24",
567
- viewBox: "0 0 24 24",
568
- fill: "none",
569
- xmlns: "http://www.w3.org/2000/svg",
570
- children: /* @__PURE__ */ t(
571
- "path",
572
- {
573
- d: "M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z",
574
- fill: "currentColor"
575
- }
576
- )
577
- }
578
- ) }), Kt = {
579
- fill: {
580
- primary: "bg-primary text-primary-foreground hover:opacity-80",
581
- neutral: "bg-background text-neutral-foreground hover:opacity-80"
582
- },
583
- ghost: {
584
- primary: "bg-transparent text-foreground hover:bg-primary/25",
585
- neutral: "bg-transparent text-background hover:bg-foreground/25"
586
- }
587
- }, Jt = {
588
- button: "h-8 px-2",
589
- icon: "size-8 p-2"
590
- }, ee = ({
591
- variant: e = "fill",
592
- shape: r = "button",
593
- color: n = "primary",
594
- className: o,
595
- children: a,
596
- ...u
597
- }) => {
598
- const h = Kt[e][n], p = Jt[r];
599
- return /* @__PURE__ */ t(
600
- "button",
601
- {
602
- className: D(
603
- "flex items-center justify-center rounded-ui text-sm transition-all disabled:opacity-60",
604
- h,
605
- p,
606
- o
607
- ),
608
- ...u,
609
- children: a
610
- }
611
- );
612
- }, pt = (e) => /* @__PURE__ */ t(ee, { color: "neutral", shape: "icon", ...e, children: /* @__PURE__ */ t(qt, { className: "size-full" }) }), ht = ({ text: e, className: r }) => /* @__PURE__ */ R(
613
- "div",
614
- {
615
- className: D(
616
- "flex size-full flex-col items-center justify-center gap-y-4",
617
- r
618
- ),
619
- children: [
620
- /* @__PURE__ */ t(
621
- "img",
622
- {
623
- className: "h-20 small:h-28",
624
- src: "https://cdn.car-cutter.com/libs/web-player/v3/assets/car_placeholder.png"
625
- }
626
- ),
627
- /* @__PURE__ */ t("div", { className: "text-2xl font-bold", children: e })
628
- ]
629
- }
630
- ), Qt = {
631
- primary: "border-primary",
632
- foreground: "border-foreground",
633
- background: "border-background"
634
- }, er = {
635
- sm: "size-4 border",
636
- md: "size-8 border-2",
637
- lg: "size-12 border-4"
638
- }, ft = ({
639
- color: e = "foreground",
640
- size: r = "md"
641
- }) => {
642
- const n = Qt[e], o = er[r];
643
- return /* @__PURE__ */ t(
644
- "div",
645
- {
646
- className: D(
647
- "inline-block animate-rotation rounded-full border-b-transparent",
648
- o,
649
- n
650
- )
651
- }
652
- );
653
- }, he = ({
654
- src: e,
655
- className: r,
656
- onLoad: n,
657
- imgInPlayerWidthRatio: o = 1,
658
- onlyThumbnail: a,
659
- fadeIn: u,
660
- ...h
661
- }) => {
662
- const { mediaLoadStrategy: p, playerInViewportWidthRatio: L } = ne(), { imageHdWidth: I, usedMediaWidths: f } = se(), [C, H] = re(() => {
663
- const m = f.map((y) => `${y !== I ? Dt(e, y) : e} ${y}w`);
664
- let w;
665
- if (a)
666
- w = [`${f[0]}px`];
667
- else {
668
- const y = 1 / (o * L);
669
- switch (p) {
670
- case "quality": {
671
- const v = [...f], l = v.pop();
672
- w = v.map(
673
- (i) => `(max-width: ${y * i}px) ${i}px`
674
- ), w.push(`${l}px`);
675
- break;
676
- }
677
- case "balanced": {
678
- w = [];
679
- for (let v = 0; v < f.length - 1; v++) {
680
- const l = f[v], i = f[v + 1], g = Math.round((l + i) / 2);
681
- w.push(
682
- `(max-width: ${y * g}px) ${l}px`
683
- );
684
- }
685
- w.push(`${f[f.length - 1]}px`);
686
- break;
687
- }
688
- case "speed": {
689
- const v = [...f], l = v.shift();
690
- w = v.reverse().map(
691
- (i) => `(min-width: ${y * i}px) ${i}px`
692
- ), w.push(`${l}px`);
693
- break;
694
- }
695
- }
696
- }
697
- return [m.join(", "), w.join(", ")];
698
- }, [
699
- I,
700
- o,
701
- p,
702
- a,
703
- L,
704
- e,
705
- f
706
- ]), [S, s] = Y();
707
- return W(() => {
708
- if (S === !0)
709
- return;
710
- const m = setTimeout(() => {
711
- s((w) => w ?? !1);
712
- }, 30);
713
- return () => clearTimeout(m);
714
- }, [S]), /* @__PURE__ */ t(
715
- "img",
716
- {
717
- src: e,
718
- srcSet: C,
719
- sizes: H,
720
- className: D(
721
- r,
722
- u && D(
723
- S !== void 0 && "transition-opacity duration-200",
724
- S === !1 && "opacity-0",
725
- S === !0 && "opacity-100"
726
- )
727
- ),
728
- onLoad: (m) => {
729
- s(!0), n?.(m);
730
- },
731
- ...h
732
- }
733
- );
734
- }, gt = ({ className: e }) => /* @__PURE__ */ t(G, { className: e, customizationKey: "UI_IMAGE", children: /* @__PURE__ */ t("svg", { className: e, viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ t(
735
- "path",
736
- {
737
- d: "M9.5 2.5V9.5H2.5V2.5H9.5ZM9.5 1.5H2.5C1.95 1.5 1.5 1.95 1.5 2.5V9.5C1.5 10.05 1.95 10.5 2.5 10.5H9.5C10.05 10.5 10.5 10.05 10.5 9.5V2.5C10.5 1.95 10.05 1.5 9.5 1.5ZM7.07 5.93L5.57 7.865L4.5 6.57L3 8.5H9L7.07 5.93Z",
738
- fill: "currentColor"
739
- }
740
- ) }) }), Re = ({ className: e }) => /* @__PURE__ */ t(G, { className: e, customizationKey: "UI_PLAY", children: /* @__PURE__ */ t(
741
- "svg",
742
- {
743
- className: e,
744
- viewBox: "0 0 24 24",
745
- fill: "none",
746
- stroke: "currentColor",
747
- strokeWidth: "1.5",
748
- strokeLinecap: "round",
749
- strokeLinejoin: "round",
750
- children: /* @__PURE__ */ t("polygon", { points: "6 3 20 12 6 21 6 3" })
751
- }
752
- ) }), wt = ({ className: e }) => /* @__PURE__ */ t(G, { className: e, customizationKey: "UI_360", children: /* @__PURE__ */ R(
753
- "svg",
754
- {
755
- className: e,
756
- viewBox: "0 0 56 56",
757
- fill: "none",
758
- xmlns: "http://www.w3.org/2000/svg",
759
- children: [
760
- /* @__PURE__ */ R("g", { clipPath: "url(#clip0_134_843)", children: [
761
- /* @__PURE__ */ t(
762
- "path",
763
- {
764
- d: "M35.2497 43.93C34.4358 43.93 33.7296 43.325 33.6241 42.4966C33.51 41.5977 34.1457 40.7765 35.0442 40.662C40.2284 40.0015 44.8709 38.5967 48.1162 36.7057C51.0843 34.9767 52.7185 32.9438 52.7185 30.9819C52.7185 28.8196 50.8062 27.0504 49.2014 25.9464C48.455 25.4329 48.2662 24.4117 48.7798 23.6649C49.2933 22.9185 50.3148 22.7297 51.0612 23.2432C54.2921 25.4657 55.9998 28.1416 55.9998 30.9823C55.9998 34.2063 53.8452 37.1659 49.7684 39.5409C46.0988 41.6789 41.1509 43.1922 35.4591 43.9172C35.3886 43.9257 35.3185 43.93 35.2497 43.93Z",
765
- fill: "currentColor"
766
- }
767
- ),
768
- /* @__PURE__ */ t(
769
- "path",
770
- {
771
- d: "M27.6 41.5797L23.225 37.2047C22.5842 36.5638 21.5455 36.5638 20.9047 37.2047C20.2642 37.8451 20.2642 38.8842 20.9047 39.5246L22.183 40.8029C17.2816 40.2966 12.8289 39.1555 9.38102 37.4973C5.50463 35.6333 3.28124 33.2582 3.28124 30.9818C3.28124 29.0511 4.87316 27.0443 7.76347 25.3311C8.5432 24.8692 8.8004 23.8626 8.33854 23.0833C7.87627 22.3036 6.86968 22.0464 6.09038 22.5083C1.05658 25.4922 0 28.7631 0 30.9818C0 34.622 2.82665 37.9861 7.95915 40.4547C11.9428 42.3701 17.0958 43.6531 22.7098 44.1495L20.9047 45.9546C20.2642 46.5951 20.2642 47.6341 20.9047 48.275C21.2251 48.595 21.6451 48.7552 22.0651 48.7552C22.4846 48.7552 22.9046 48.595 23.225 48.275L27.6 43.9C28.2405 43.2592 28.2405 42.2201 27.6 41.5797Z",
772
- fill: "currentColor"
773
- }
774
- ),
775
- /* @__PURE__ */ t(
776
- "path",
777
- {
778
- d: "M17.1827 27.6963V27.3016C17.1827 25.9092 16.3303 25.6391 15.1874 25.6391C14.4808 25.6391 14.2522 25.0158 14.2522 24.3924C14.2522 23.7687 14.4808 23.1453 15.1874 23.1453C15.977 23.1453 16.8084 23.0415 16.8084 21.3581C16.8084 20.1529 16.1227 19.8619 15.2703 19.8619C14.2522 19.8619 13.7327 20.1114 13.7327 20.9219C13.7327 21.6282 13.4208 22.1063 12.2155 22.1063C10.7193 22.1063 10.5326 21.7944 10.5326 20.7967C10.5326 19.1762 11.696 17.0771 15.2703 17.0771C17.9098 17.0771 19.9046 18.0329 19.9046 20.8386C19.9046 22.3553 19.3437 23.7687 18.3046 24.2468C19.5308 24.7039 20.4242 25.6182 20.4242 27.3016V27.6963C20.4242 31.1045 18.076 32.393 15.1665 32.393C11.5922 32.393 10.2207 30.2111 10.2207 28.4654C10.2207 27.5301 10.6155 27.2806 11.7584 27.2806C13.0884 27.2806 13.4208 27.5716 13.4208 28.3616C13.4208 29.3382 14.3355 29.5668 15.2703 29.5668C16.6836 29.5668 17.1827 29.0473 17.1827 27.6963Z",
779
- fill: "white"
780
- }
781
- ),
782
- /* @__PURE__ */ t(
783
- "path",
784
- {
785
- d: "M33.0384 27.3016V27.4887C33.0384 31.063 30.8146 32.393 27.9469 32.393C25.0792 32.393 22.8345 31.063 22.8345 27.4887V21.9815C22.8345 18.4072 25.1412 17.0771 28.134 17.0771C31.646 17.0771 33.0384 19.2591 33.0384 20.9839C33.0384 21.9815 32.5603 22.293 31.5212 22.293C30.6279 22.293 29.8379 22.0644 29.8379 21.1086C29.8379 20.3191 29.0069 19.9034 28.0302 19.9034C26.804 19.9034 26.0764 20.5477 26.0764 21.9815V23.8515C26.7416 23.1244 27.6769 22.9372 28.6745 22.9372C31.0431 22.9372 33.0384 23.9763 33.0384 27.3016ZM26.0764 27.7173C26.0764 29.1511 26.7831 29.7745 27.9469 29.7745C29.1107 29.7745 29.7964 29.1511 29.7964 27.7173V27.5301C29.7964 26.013 29.1107 25.4311 27.926 25.4311C26.804 25.4311 26.0764 25.9715 26.0764 27.343V27.7173Z",
786
- fill: "white"
787
- }
788
- ),
789
- /* @__PURE__ */ t(
790
- "path",
791
- {
792
- d: "M35.5527 27.4887V21.9815C35.5527 18.4072 37.7761 17.0771 40.6442 17.0771C43.5119 17.0771 45.7562 18.4072 45.7562 21.9815V27.4887C45.7562 31.063 43.5119 32.393 40.6442 32.393C37.7761 32.393 35.5527 31.063 35.5527 27.4887ZM42.5143 21.9815C42.5143 20.5477 41.808 19.9034 40.6442 19.9034C39.4804 19.9034 38.7947 20.5477 38.7947 21.9815V27.4887C38.7947 28.9225 39.4804 29.5668 40.6442 29.5668C41.808 29.5668 42.5143 28.9225 42.5143 27.4887V21.9815Z",
793
- fill: "white"
794
- }
795
- ),
796
- /* @__PURE__ */ t(
797
- "path",
798
- {
799
- d: "M49.6948 17.0625C46.9805 17.0625 44.7729 14.8545 44.7729 12.1406C44.7729 9.42675 46.9805 7.21875 49.6948 7.21875C52.4087 7.21875 54.6167 9.42675 54.6167 12.1406C54.6167 14.8545 52.4087 17.0625 49.6948 17.0625ZM49.6948 10.5C48.7899 10.5 48.0542 11.2361 48.0542 12.1406C48.0542 13.0455 48.7899 13.7812 49.6948 13.7812C50.5993 13.7812 51.3354 13.0455 51.3354 12.1406C51.3354 11.2361 50.5993 10.5 49.6948 10.5Z",
800
- fill: "white"
801
- }
802
- )
803
- ] }),
804
- /* @__PURE__ */ t("defs", { children: /* @__PURE__ */ t("clipPath", { id: "clip0_134_843", children: /* @__PURE__ */ t("rect", { width: "56", height: "56", fill: "white" }) }) })
805
- ]
806
- }
807
- ) }), tr = ({
808
- src: e,
809
- withCdn: r
810
- }) => {
811
- const { permanentGallery: n } = ne();
812
- if (!e)
813
- return null;
814
- const o = "size-full object-cover";
815
- return r ? /* @__PURE__ */ t(
816
- he,
817
- {
818
- className: o,
819
- src: e,
820
- onlyThumbnail: !0,
821
- fadeIn: !n
822
- }
823
- ) : /* @__PURE__ */ t("img", { className: o, src: e });
824
- }, Ve = ({
825
- children: e
826
- }) => {
827
- const { extendMode: r } = J();
828
- return /* @__PURE__ */ t(
829
- "div",
830
- {
831
- className: D(
832
- "flex aspect-square h-3/4 items-center justify-center rounded-full bg-foreground/50 p-1",
833
- r && "large:h-3/5 large:p-2"
834
- ),
835
- children: e
836
- }
837
- );
838
- }, rr = ({ item: e }) => {
839
- const { aspectRatioStyle: r } = se(), { type: n } = e;
840
- let o, a;
841
- switch (n) {
842
- case "360":
843
- o = e.images[0].src, a = !0;
844
- break;
845
- case "image":
846
- o = e.src, a = !0;
847
- break;
848
- case "video":
849
- o = e.poster, a = !0;
850
- break;
851
- case "custom":
852
- o = e.thumbnailSrc, a = !1;
853
- break;
854
- }
855
- const u = /* @__PURE__ */ t(tr, { src: o, withCdn: a });
856
- let h;
857
- switch (n) {
858
- case "360":
859
- h = /* @__PURE__ */ t(Ve, { children: /* @__PURE__ */ t(wt, { className: "size-full text-primary-light" }) });
860
- break;
861
- case "video":
862
- h = /* @__PURE__ */ t(Ve, { children: /* @__PURE__ */ t(Re, { className: "size-full p-0.5 text-background" }) });
863
- break;
864
- case "custom":
865
- h = o ? null : /* @__PURE__ */ t(Ve, { children: /* @__PURE__ */ t(gt, { className: "size-full p-0.5 text-background" }) });
866
- break;
867
- }
868
- return /* @__PURE__ */ R("div", { className: "relative bg-foreground/30", style: r, children: [
869
- u,
870
- h && /* @__PURE__ */ t("div", { className: "absolute inset-0 flex items-center justify-center bg-foreground/25", children: h })
871
- ] });
872
- }, nr = {
873
- primary: "bg-primary/50",
874
- neutral: "bg-neutral/50",
875
- background: "bg-background/50",
876
- foreground: "bg-foreground/50"
877
- }, vt = ({
878
- color: e = "neutral",
879
- orientation: r = "horizontal"
880
- }) => {
881
- const n = nr[e];
882
- return /* @__PURE__ */ t("div", { className: D(n, r === "horizontal" ? "h-px w-full" : "w-px h-full") });
883
- }, bt = ({
884
- className: e = "",
885
- containerClassName: r = ""
886
- }) => {
887
- const { hideCategories: n, infiniteCarrousel: o, permanentGallery: a, isFullScreen: u } = ne(), { categories: h, aspectRatioStyle: p } = se(), {
888
- items: L,
889
- extendMode: I,
890
- extendTransition: f,
891
- masterItemIndex: C,
892
- prevItem: H,
893
- nextItem: S,
894
- scrollToItemIndex: s,
895
- resetView: m
896
- } = J(), w = re(() => {
897
- if (n)
898
- return [];
899
- const x = new Array();
900
- let N = h[0];
901
- const _ = (V) => h.find(
902
- (d) => d.items.some((T) => T === V)
903
- );
904
- for (let V = 0; V < L.length; V++) {
905
- const d = L[V], T = _(d);
906
- T && T !== N && (x.push(V), N = T);
907
- }
908
- return x;
909
- }, [h, n, L]), y = j(null), v = z(() => {
910
- if (!y.current)
911
- throw new Error("slider.current is null");
912
- return y.current;
913
- }, []), l = j(!1), i = j(
914
- null
915
- ), [g, b] = Y(!1), k = z(
916
- (x, N) => {
917
- const _ = v(), V = _.clientWidth, d = _.scrollWidth / L.length, T = (x + 1 / 2) * d - V / 2, c = _.scrollWidth - _.clientWidth;
918
- _.scrollTo({
919
- left: ce(T, 0, c),
920
- behavior: N
921
- });
922
- },
923
- [L.length, v]
924
- );
925
- W(() => {
926
- const x = y.current;
927
- if (!x)
928
- return;
929
- const N = (d) => {
930
- d.preventDefault(), l.current = !0, i.current = {
931
- x: d.pageX - x.offsetLeft,
932
- scrollLeft: x.scrollLeft
933
- };
934
- }, _ = (d) => {
935
- if (!l.current)
936
- return;
937
- if (i.current === null)
938
- throw new Error("[onMouseMove] scrollStart is null");
939
- const c = d.pageX - x.offsetLeft - i.current.x;
940
- if (!g && Math.abs(c) < 5)
941
- return;
942
- const E = i.current.scrollLeft - c;
943
- b(!0), requestAnimationFrame(() => {
944
- x.scrollLeft = E;
945
- });
946
- }, V = () => {
947
- l.current && (l.current = !1, requestAnimationFrame(() => {
948
- b(!1);
949
- }));
950
- };
951
- return x.addEventListener("mousedown", N), document.addEventListener("mousemove", _), document.addEventListener("mouseleave", V), document.addEventListener("mouseup", V), document.addEventListener("contextmenu", V), () => {
952
- x.removeEventListener("mousedown", N), document.removeEventListener("mousemove", _), document.removeEventListener("mouseleave", V), document.removeEventListener("mouseup", V), document.removeEventListener("contextmenu", V);
953
- };
954
- }, [g]);
955
- const O = j(C);
956
- W(() => {
957
- y.current && (k(C, "smooth"), O.current = C);
958
- }, [C, k]), W(() => {
959
- y.current && k(O.current, "instant");
960
- }, [
961
- k,
962
- // - Run the effect when those values change
963
- u,
964
- I,
965
- f
966
- ]);
967
- const P = (x) => {
968
- g || (o && x === L.length - 1 && C === 0 ? H() : o && x === 0 && C === L.length - 1 ? S() : s(x), m());
969
- };
970
- return /* @__PURE__ */ t(
971
- "div",
972
- {
973
- ref: y,
974
- className: D(
975
- "relative w-full overflow-x-auto no-scrollbar",
976
- g ? "cursor-grab" : "cursor-grabbing",
977
- e
978
- ),
979
- children: /* @__PURE__ */ t(
980
- "div",
981
- {
982
- className: D(
983
- "flex h-10 w-fit gap-1 small:h-12 small:gap-2",
984
- I && "large:h-20 large:gap-4",
985
- r
986
- ),
987
- children: L.map((x, N) => /* @__PURE__ */ R(It, { children: [
988
- w.includes(N) && /* @__PURE__ */ t("div", { className: "my-2", children: /* @__PURE__ */ t(
989
- vt,
990
- {
991
- color: a && !u ? "neutral" : "background",
992
- orientation: "vertical"
993
- }
994
- ) }),
995
- /* @__PURE__ */ t(
996
- "div",
997
- {
998
- className: D(
999
- "relative h-full overflow-hidden rounded-gallery transition-radius",
1000
- !g && "cursor-pointer",
1001
- "after:absolute after:inset-0 after:rounded-gallery after:border-2 after:border-primary after:transition-all",
1002
- N === C ? "after:opacity-100" : "after:opacity-0 hover:after:opacity-70"
1003
- ),
1004
- style: p,
1005
- onClick: () => P(N),
1006
- children: /* @__PURE__ */ t(rr, { item: x })
1007
- }
1008
- )
1009
- ] }, N))
1010
- }
1011
- )
1012
- }
1013
- );
1014
- }, yt = (e) => 1 - Math.pow(1 - e, 2), or = ({
1015
- Media: e,
1016
- itemIndex: r
1017
- }) => {
1018
- const { setItemInteraction: n } = J();
1019
- return W(() => {
1020
- n(r, "ready");
1021
- }, [r, n]), e;
1022
- }, Ye = (e, r) => Math.sqrt(
1023
- (e.clientX - r.clientX) ** 2 + (e.clientY - r.clientY) ** 2
1024
- ), sr = ({
1025
- onlyPreload: e,
1026
- ...r
1027
- }) => {
1028
- const { zoom: n, isZooming: o, setZoom: a } = J(), u = j(null), h = j(null), p = z((l) => {
1029
- if (!h.current)
1030
- throw new Error(
1031
- `[${l ?? "getTransformElementOrThrow"}] transformElementRef.current is null`
1032
- );
1033
- return h.current;
1034
- }, []), L = j(!1), I = j(null), f = j(/* @__PURE__ */ new Map()), C = j({ x: 0, y: 0, scale: 1 }), H = j(null), S = z(
1035
- (l) => {
1036
- const i = p("setTransformStyle"), {
1037
- x: g,
1038
- y: b,
1039
- scale: k
1040
- } = {
1041
- ...C.current,
1042
- ...l
1043
- }, O = ce(k, 1, ye), P = i.clientWidth, x = i.clientHeight, N = P * O, _ = x * O, V = ce(g, -(N - P), 0), d = ce(b, -(_ - x), 0);
1044
- C.current = { x: V, y: d, scale: O }, i.style.transform = `translate(${V}px, ${d}px) scale(${O})`;
1045
- },
1046
- [p]
1047
- ), s = z(
1048
- (l, i) => {
1049
- const {
1050
- x: g,
1051
- y: b,
1052
- scale: k
1053
- } = C.current, {
1054
- x: O,
1055
- y: P,
1056
- scale: x
1057
- } = {
1058
- ...C.current,
1059
- ...l
1060
- };
1061
- H.current && (cancelAnimationFrame(H.current), H.current = null);
1062
- const N = () => {
1063
- S({ x: O, y: P, scale: x }), a(x);
1064
- }, _ = Math.abs(O - g) < 1 && Math.abs(P - b) < 1 && Math.abs(x - k) < 5e-3;
1065
- if (!i || _) {
1066
- N();
1067
- return;
1068
- }
1069
- const V = (/* @__PURE__ */ new Date()).getTime(), d = () => {
1070
- const T = () => {
1071
- const E = (/* @__PURE__ */ new Date()).getTime() - V;
1072
- if (E >= i) {
1073
- N(), H.current = null;
1074
- return;
1075
- }
1076
- const M = Math.min(E / i, 1), X = yt(M), Z = be(g, O, X), $ = be(b, P, X), F = be(k, x, X);
1077
- S({ x: Z, y: $, scale: F }), d();
1078
- };
1079
- H.current = requestAnimationFrame(T);
1080
- };
1081
- d();
1082
- },
1083
- [S, a]
1084
- ), m = z(
1085
- (l, i) => {
1086
- let { x: g, y: b } = C.current;
1087
- l.x && (g += l.x), l.y && (b += l.y), s(
1088
- {
1089
- x: g,
1090
- y: b
1091
- },
1092
- i
1093
- );
1094
- },
1095
- [s]
1096
- ), w = z(
1097
- (l, i, g) => {
1098
- const b = C.current.scale, k = ce(l, 1, ye), O = k / b, { x: P, y: x } = C.current, { x: N, y: _ } = i, V = -P + N, d = -x + _, T = V * O, c = d * O, E = T - N, M = c - _, X = -E, Z = -M;
1099
- s(
1100
- {
1101
- x: X,
1102
- y: Z,
1103
- scale: k
1104
- },
1105
- g
1106
- );
1107
- },
1108
- [s]
1109
- ), y = z(
1110
- (l) => {
1111
- const i = p(
1112
- "shiftZoomFromButton"
1113
- ), g = i.clientWidth, b = i.clientHeight;
1114
- w(
1115
- l,
1116
- {
1117
- x: g / 2,
1118
- y: b / 2
1119
- },
1120
- 200
1121
- );
1122
- },
1123
- [p, w]
1124
- ), v = z(
1125
- (l, i, g) => {
1126
- const { scale: b } = C.current;
1127
- w(
1128
- b + l,
1129
- i,
1130
- g
1131
- );
1132
- },
1133
- [w]
1134
- );
1135
- return W(() => {
1136
- e || h.current && y(n);
1137
- }, [e, y, n]), W(() => {
1138
- if (e || !o)
1139
- return;
1140
- const l = h.current;
1141
- if (!l)
1142
- return;
1143
- const i = (k) => {
1144
- k.preventDefault(), k.stopPropagation(), L.current = !0, I.current = {
1145
- x: k.clientX,
1146
- y: k.clientY
1147
- };
1148
- }, g = (k) => {
1149
- if (!L.current)
1150
- return;
1151
- if (!I.current)
1152
- throw new Error("mouseStartXY.current is null");
1153
- k.stopPropagation();
1154
- const O = k.clientX - I.current.x, P = k.clientY - I.current.y;
1155
- m({
1156
- x: O,
1157
- y: P
1158
- }), I.current = {
1159
- x: k.clientX,
1160
- y: k.clientY
1161
- };
1162
- }, b = () => {
1163
- L.current = !1;
1164
- };
1165
- return l.addEventListener("mousedown", i), document.addEventListener("mousemove", g), document.addEventListener("mouseleave", b), document.addEventListener("mouseup", b), document.addEventListener("contextmenu", b), () => {
1166
- l.removeEventListener("mousedown", i), document.removeEventListener("mousemove", g), document.removeEventListener("mouseleave", b), document.removeEventListener("mouseup", b), document.removeEventListener("contextmenu", b);
1167
- };
1168
- }, [o, m, e]), W(() => {
1169
- if (e)
1170
- return;
1171
- const l = u.current;
1172
- if (!l)
1173
- return;
1174
- const i = (g) => {
1175
- const { ctrlKey: b, clientX: k, clientY: O, deltaX: P, deltaY: x } = g;
1176
- if (b) {
1177
- if (!o && x >= 0)
1178
- return;
1179
- const { left: N, top: _ } = l.getBoundingClientRect(), V = k - N, d = O - _;
1180
- v(-0.01 * x, {
1181
- x: V,
1182
- y: d
1183
- });
1184
- } else {
1185
- if (!o)
1186
- return;
1187
- m({
1188
- x: -2 * P,
1189
- y: -2 * x
1190
- });
1191
- }
1192
- g.preventDefault();
1193
- };
1194
- return l.addEventListener("wheel", i), () => {
1195
- l.removeEventListener("wheel", i);
1196
- };
1197
- }, [o, m, v, e]), W(() => {
1198
- const l = u.current, i = h.current;
1199
- if (!l || !i)
1200
- return;
1201
- const g = f.current, b = (P) => {
1202
- for (let x = 0; x < P.changedTouches.length; x++) {
1203
- const N = P.changedTouches[x];
1204
- g.set(N.identifier, N);
1205
- }
1206
- }, k = (P) => {
1207
- for (let x = 0; x < P.changedTouches.length; x++) {
1208
- const N = P.changedTouches[x];
1209
- g.delete(N.identifier);
1210
- }
1211
- }, O = (P) => {
1212
- const x = P.touches.length;
1213
- if (x === 1) {
1214
- if (!o)
1215
- return;
1216
- P.preventDefault();
1217
- const N = P.touches[0], _ = g.get(N.identifier);
1218
- if (!_)
1219
- throw new Error("touchStart is null");
1220
- const V = N.clientX - _.clientX, d = N.clientY - _.clientY;
1221
- m({
1222
- x: V,
1223
- y: d
1224
- }), g.set(N.identifier, N);
1225
- } else if (x === 2) {
1226
- P.preventDefault();
1227
- const [N, _] = P.touches, V = g.get(N.identifier), d = g.get(_.identifier);
1228
- if (!V || !d)
1229
- throw new Error("intialTouch1 or intialTouch2 is null");
1230
- const T = Ye(
1231
- V,
1232
- d
1233
- ), E = Ye(N, _) / T, { left: M, top: X } = l.getBoundingClientRect();
1234
- v(E - 1, {
1235
- x: (N.clientX + _.clientX) / 2 - M,
1236
- y: (N.clientY + _.clientY) / 2 - X
1237
- }), g.set(N.identifier, N), g.set(_.identifier, _);
1238
- }
1239
- };
1240
- return i.addEventListener("touchstart", b), i.addEventListener("touchmove", O), i.addEventListener("touchend", k), i.addEventListener("touchcancel", k), () => {
1241
- i.removeEventListener("touchstart", b), i.removeEventListener("touchmove", O), i.removeEventListener("touchend", k), i.removeEventListener("touchcancel", k);
1242
- };
1243
- }, [o, m, v]), /* @__PURE__ */ t(
1244
- "div",
1245
- {
1246
- ref: u,
1247
- className: `relative size-full overflow-hidden ${o ? "z-zoomed-image cursor-move" : ""}`,
1248
- children: /* @__PURE__ */ t(
1249
- "div",
1250
- {
1251
- ref: h,
1252
- className: "origin-top-left",
1253
- children: /* @__PURE__ */ t(
1254
- he,
1255
- {
1256
- ...r,
1257
- imgInPlayerWidthRatio: e ? 1 : n
1258
- }
1259
- )
1260
- }
1261
- )
1262
- }
1263
- );
1264
- }, ar = ({ hotspot: e }) => {
1265
- const { title: r, icon: n, description: o, position: a, detail: u } = e, { getIconConfig: h } = ge(), p = n ? h(n) : void 0, { extendMode: L, setShownDetails: I } = J(), f = !!u, C = u?.type === "image", H = !!r || !!o, S = C ? /* @__PURE__ */ t(gt, { className: "size-4" }) : /* @__PURE__ */ t("div", { className: "size-1" }), s = () => {
1266
- C && I({
1267
- src: u.src,
1268
- title: r,
1269
- text: o
1270
- });
1271
- };
1272
- return /* @__PURE__ */ R(
1273
- "div",
1274
- {
1275
- className: D(
1276
- "group absolute z-hotspot -translate-x-1/2 -translate-y-1/2 hover:z-hotspot-hover",
1277
- f ? "cursor-pointer" : "cursor-help"
1278
- ),
1279
- style: {
1280
- top: `${100 * e.position.y}%`,
1281
- left: `${100 * e.position.x}%`
1282
- },
1283
- onClick: s,
1284
- children: [
1285
- /* @__PURE__ */ R(
1286
- "div",
1287
- {
1288
- className: "relative flex items-center justify-center rounded-full border-2 border-background bg-primary text-primary-foreground",
1289
- children: [
1290
- /* @__PURE__ */ t(
1291
- "div",
1292
- {
1293
- className: "pointer-events-none absolute -z-20 size-8 animate-hotspot-ping rounded-full border-2 border-background"
1294
- }
1295
- ),
1296
- /* @__PURE__ */ t("div", { className: "p-1", children: p?.Icon ? /* @__PURE__ */ t("div", { className: "size-4", children: p.Icon }) : S })
1297
- ]
1298
- }
1299
- ),
1300
- !C && H && /* @__PURE__ */ t(
1301
- "div",
1302
- {
1303
- className: D(
1304
- "absolute -z-10 w-max max-w-40 text-pretty rounded-ui bg-background p-2 small:max-w-48",
1305
- L && "large:max-w-56",
1306
- a.y < 0.55 ? "-top-1" : "-bottom-1",
1307
- a.x < 0.55 ? "-left-1 pl-6 small:pl-8" : "-right-1 pr-4 small:pr-6",
1308
- "pointer-events-none opacity-0 transition-opacity duration-200 group-hover:pointer-events-auto group-hover:opacity-100"
1309
- ),
1310
- children: /* @__PURE__ */ R("div", { className: "space-y-1 text-pretty", children: [
1311
- r && /* @__PURE__ */ t("div", { className: "text-sm font-semibold small:text-base small:font-bold", children: r }),
1312
- o && /* @__PURE__ */ t("div", { className: "text-xs text-foreground/65 small:text-sm", children: o })
1313
- ] })
1314
- }
1315
- )
1316
- ]
1317
- }
1318
- );
1319
- }, ir = ({ hotspot: e }) => {
1320
- const { detail: r } = e, n = /* @__PURE__ */ t(ar, { hotspot: e });
1321
- switch (r?.type) {
1322
- case "link":
1323
- case "pdf":
1324
- return /* @__PURE__ */ t("a", { href: r.src, target: "_blank", rel: "noreferrer", children: n });
1325
- default:
1326
- return n;
1327
- }
1328
- }, xt = ({
1329
- hotspots: e,
1330
- itemIndex: r,
1331
- className: n,
1332
- onLoad: o,
1333
- ...a
1334
- }) => {
1335
- const { isShowingDetails: u, showHotspots: h, setItemInteraction: p } = J();
1336
- return /* @__PURE__ */ t("div", { className: D("relative size-full overflow-hidden", n), children: /* @__PURE__ */ R(
1337
- "div",
1338
- {
1339
- className: D(
1340
- "size-full duration-details",
1341
- u ? "scale-105" : "scale-100"
1342
- ),
1343
- children: [
1344
- /* @__PURE__ */ t(
1345
- sr,
1346
- {
1347
- className: "size-full object-cover",
1348
- onLoad: (L) => {
1349
- r !== void 0 && p(r, "ready"), o?.(L);
1350
- },
1351
- ...a
1352
- }
1353
- ),
1354
- h && e?.map((L, I) => /* @__PURE__ */ t(ir, { hotspot: L }, I))
1355
- ]
1356
- }
1357
- ) });
1358
- }, fe = 10, cr = 15, lr = ({
1359
- images: e,
1360
- onlyPreload: r
1361
- }) => {
1362
- const { reverse360: n } = ne(), { isShowingDetails: o, isZooming: a } = J(), u = a || o, h = j(null), p = j(null), [L, I] = Y(0), f = e.length, C = z(() => {
1363
- I((S) => (S - 1 + f) % f);
1364
- }, [f]), H = z(() => {
1365
- I((S) => (S + 1) % f);
1366
- }, [f]);
1367
- return W(() => {
1368
- if (u)
1369
- return;
1370
- const S = h.current, s = p.current;
1371
- if (!S || !s)
1372
- return;
1373
- let m = null, w = [], y = null;
1374
- const v = (c) => {
1375
- w.push(c), w.length > 20 && w.shift();
1376
- }, l = () => {
1377
- const c = Date.now(), E = (() => {
1378
- const $ = Date.now(), F = w.filter(
1379
- (te) => $ - te.timestamp < 50
1380
- );
1381
- if (F.length < 2)
1382
- return 0;
1383
- const Q = F[0], K = F[F.length - 1];
1384
- return (K.value - Q.value) / (1e-3 * Math.max(K.timestamp - Q.timestamp, 1));
1385
- })();
1386
- let M = 0, X = c;
1387
- const Z = () => {
1388
- y = requestAnimationFrame(() => {
1389
- const F = Date.now(), Q = (F - c) / 1e3, K = Math.pow(0.05, Q), te = E * K, ae = (F - X) / 1e3;
1390
- if (M += te * ae, Math.abs(te) < 5 * fe && Math.abs(M) < fe) {
1391
- y = null;
1392
- return;
1393
- }
1394
- Math.abs(M) >= fe && (M > 0 !== n ? H() : C(), M = 0), X = F, Z();
1395
- });
1396
- };
1397
- Z();
1398
- }, i = () => {
1399
- y && (cancelAnimationFrame(y), y = null);
1400
- }, g = (c) => {
1401
- if (c.button !== 0)
1402
- return;
1403
- c.preventDefault(), c.stopPropagation(), i();
1404
- const E = c.clientX;
1405
- m = E, w = [{ timestamp: Date.now(), value: E }];
1406
- }, b = (c) => {
1407
- if (m === null)
1408
- return;
1409
- c.stopPropagation();
1410
- const { clientX: E } = c;
1411
- v({ timestamp: Date.now(), value: E });
1412
- const M = E - m;
1413
- Math.abs(M) < fe || (M > 0 !== n ? H() : C(), m = E);
1414
- }, k = () => {
1415
- m !== null && (m = null, l());
1416
- };
1417
- S.addEventListener("mousedown", g), document.addEventListener("mousemove", b), document.addEventListener("mouseleave", k), document.addEventListener("mouseup", k), document.addEventListener("contextmenu", k);
1418
- const O = () => s.getBoundingClientRect().width, P = () => s.scrollWidth / 2 - O() / 2, x = () => {
1419
- const c = P();
1420
- s.scrollLeft = c;
1421
- };
1422
- x();
1423
- const N = () => {
1424
- const c = s.scrollLeft - P();
1425
- Math.abs(c) < cr || (c < 0 !== n ? H() : C(), x());
1426
- };
1427
- s.addEventListener("scroll", N);
1428
- let _ = null;
1429
- const V = (c) => {
1430
- if (_ !== null || c.changedTouches.length !== 1)
1431
- return;
1432
- i();
1433
- const { identifier: E, clientX: M } = c.changedTouches[0];
1434
- _ = E, m = M, w = [{ timestamp: Date.now(), value: M }];
1435
- }, d = (c) => {
1436
- if (!m)
1437
- return;
1438
- const E = Array.from(c.changedTouches).find(
1439
- ({ identifier: Z }) => Z === _
1440
- );
1441
- if (!E)
1442
- return;
1443
- c.preventDefault();
1444
- const { clientX: M } = E;
1445
- v({ timestamp: Date.now(), value: M });
1446
- const X = M - m;
1447
- Math.abs(X) < fe || (X > 0 !== n ? H() : C(), m = M);
1448
- }, T = (c) => {
1449
- !m || !Array.from(c.changedTouches).some(
1450
- ({ identifier: M }) => M === _
1451
- ) || (_ = null, m = null, l());
1452
- };
1453
- return s.addEventListener("touchstart", V), s.addEventListener("touchmove", d), s.addEventListener("touchend", T), s.addEventListener("touchcancel", T), () => {
1454
- S.removeEventListener("mousedown", g), document.removeEventListener("mousemove", b), document.removeEventListener("mouseleave", k), document.removeEventListener("mouseup", k), document.removeEventListener("contextmenu", k), s.removeEventListener("scroll", N), s.removeEventListener("touchstart", V), s.removeEventListener("touchmove", d), s.removeEventListener("touchend", T), s.removeEventListener("touchcancel", T);
1455
- };
1456
- }, [H, C, u, n]), /* @__PURE__ */ t("div", { ref: h, className: "cursor-ew-resize", children: /* @__PURE__ */ R("div", { ref: p, className: "overflow-x-scroll no-scrollbar", children: [
1457
- /* @__PURE__ */ R("div", { className: "sticky left-0 top-0", children: [
1458
- e.map((S) => /* @__PURE__ */ t(
1459
- he,
1460
- {
1461
- src: S.src,
1462
- className: "pointer-events-none !absolute left-0 top-0 -z-10"
1463
- },
1464
- S.src
1465
- )),
1466
- /* @__PURE__ */ t(xt, { ...e[L], onlyPreload: r })
1467
- ] }),
1468
- /* @__PURE__ */ t("div", { className: "pointer-events-none -mt-px h-px w-[calc(100%+1024px)]" })
1469
- ] }) });
1470
- }, ur = ({ images: e, onPlaceholderImageLoaded: r, onSpinImagesLoaded: n, onError: o }) => {
1471
- const a = re(() => e.map(({ src: f }) => f), [e]), [u, h] = Y(null), p = u ? [...u.values()].filter((f) => f).length / e.length * 100 : null, L = z(() => {
1472
- p === null && h(new Map(a.map((f) => [f, !1])));
1473
- }, [a, p]), I = z((f) => {
1474
- h((C) => {
1475
- const H = new Map(C);
1476
- return H.set(f, !0), H;
1477
- });
1478
- }, []);
1479
- return W(() => {
1480
- p === 100 && n();
1481
- }, [p, n]), /* @__PURE__ */ R("div", { className: "relative size-full", children: [
1482
- p !== null && p !== 100 && // Add images to DOM to preload them
1483
- /* @__PURE__ */ t("div", { className: "hidden", children: a.map((f) => /* @__PURE__ */ t(
1484
- he,
1485
- {
1486
- src: f,
1487
- onLoad: () => I(f),
1488
- onError: o
1489
- },
1490
- f
1491
- )) }),
1492
- /* @__PURE__ */ t(
1493
- he,
1494
- {
1495
- className: "size-full",
1496
- src: a[0],
1497
- onLoad: r
1498
- }
1499
- ),
1500
- /* @__PURE__ */ R("div", { className: "absolute inset-0 flex flex-col items-center justify-center gap-y-4 bg-foreground/35", children: [
1501
- /* @__PURE__ */ t(wt, { className: "size-20 text-primary-light" }),
1502
- /* @__PURE__ */ t(ee, { color: "neutral", shape: "icon", onClick: L, children: /* @__PURE__ */ t(Re, { className: "size-full" }) }),
1503
- /* @__PURE__ */ t(
1504
- "div",
1505
- {
1506
- className: D(
1507
- "relative h-1 w-3/5 overflow-hidden rounded-full bg-background",
1508
- p === null && "invisible"
1509
- ),
1510
- children: /* @__PURE__ */ t(
1511
- "div",
1512
- {
1513
- className: "h-full bg-primary transition-[width]",
1514
- style: { width: `${p ?? 0}%` }
1515
- }
1516
- )
1517
- }
1518
- )
1519
- ] })
1520
- ] });
1521
- }, dr = (e) => {
1522
- const { itemIndex: r } = e, { setItemInteraction: n } = J(), [o, a] = Y();
1523
- return W(() => {
1524
- o === null || o === "error" || n(r, o === "spin" ? "running" : "ready");
1525
- }, [r, n, o]), o === "error" ? /* @__PURE__ */ t(
1526
- ht,
1527
- {
1528
- className: "text-background",
1529
- text: "Spin could not be loaded"
1530
- }
1531
- ) : o !== "spin" ? /* @__PURE__ */ t(
1532
- ur,
1533
- {
1534
- ...e,
1535
- onPlaceholderImageLoaded: () => a("placeholder"),
1536
- onSpinImagesLoaded: () => a("spin"),
1537
- onError: () => a("error")
1538
- }
1539
- ) : /* @__PURE__ */ t(lr, { ...e });
1540
- }, mr = (e) => /* @__PURE__ */ t(ee, { color: "neutral", shape: "icon", ...e, children: /* @__PURE__ */ t(Re, { className: "size-full" }) }), pr = ({ className: e }) => /* @__PURE__ */ t(G, { className: e, customizationKey: "UI_PAUSE", children: /* @__PURE__ */ t(
1541
- "svg",
1542
- {
1543
- className: e,
1544
- width: "16",
1545
- height: "16",
1546
- viewBox: "0 0 16 16",
1547
- fill: "none",
1548
- xmlns: "http://www.w3.org/2000/svg",
1549
- children: /* @__PURE__ */ t(
1550
- "path",
1551
- {
1552
- d: "M4 12.6667H6.66667V3.33333H4V12.6667ZM9.33333 3.33333V12.6667H12V3.33333H9.33333Z",
1553
- fill: "currentColor"
1554
- }
1555
- )
1556
- }
1557
- ) }), hr = ({ className: e }) => /* @__PURE__ */ t(G, { className: e, customizationKey: "UI_VOLUME", children: /* @__PURE__ */ t(
1558
- "svg",
1559
- {
1560
- className: e,
1561
- width: "16",
1562
- height: "16",
1563
- viewBox: "0 0 16 16",
1564
- fill: "none",
1565
- xmlns: "http://www.w3.org/2000/svg",
1566
- children: /* @__PURE__ */ t(
1567
- "path",
1568
- {
1569
- d: "M2 6V10H4.66667L8 13.3333V2.66667L4.66667 6H2ZM11 8C11 6.82 10.32 5.80667 9.33333 5.31334V10.68C10.32 10.1933 11 9.18 11 8ZM9.33333 2.15334V3.52667C11.26 4.1 12.6667 5.88667 12.6667 8C12.6667 10.1133 11.26 11.9 9.33333 12.4733V13.8467C12.0067 13.24 14 10.8533 14 8C14 5.14667 12.0067 2.76 9.33333 2.15334Z",
1570
- fill: "currentColor"
1571
- }
1572
- )
1573
- }
1574
- ) }), fr = ({ className: e }) => /* @__PURE__ */ t(G, { className: e, customizationKey: "UI_VOLUME_OFF", children: /* @__PURE__ */ t(
1575
- "svg",
1576
- {
1577
- className: e,
1578
- width: "16",
1579
- height: "16",
1580
- viewBox: "0 0 16 16",
1581
- fill: "none",
1582
- xmlns: "http://www.w3.org/2000/svg",
1583
- children: /* @__PURE__ */ t(
1584
- "path",
1585
- {
1586
- d: "M11 8C11 6.82 10.32 5.80667 9.33333 5.31333V6.78667L10.9667 8.42C10.9867 8.28667 11 8.14667 11 8ZM12.6667 8C12.6667 8.62667 12.5333 9.21333 12.3067 9.76L13.3133 10.7667C13.7533 9.94 14 9 14 8C14 5.14667 12.0067 2.76 9.33333 2.15333V3.52667C11.26 4.1 12.6667 5.88667 12.6667 8ZM2.84667 2L2 2.84667L5.15333 6H2V10H4.66667L8 13.3333V8.84667L10.8333 11.68C10.3867 12.0267 9.88667 12.3 9.33333 12.4667V13.84C10.2533 13.6333 11.0867 13.2067 11.7933 12.6333L13.1533 14L14 13.1533L2.84667 2ZM8 2.66667L6.60667 4.06L8 5.45333V2.66667Z",
1587
- fill: "currentColor"
1588
- }
1589
- )
1590
- }
1591
- ) }), Fe = ({ progress: e }) => /* @__PURE__ */ t("div", { className: "h-1 w-full overflow-hidden rounded-ui-sm bg-background/25", children: /* @__PURE__ */ t(
1592
- "div",
1593
- {
1594
- className: "size-full rounded-ui-sm bg-background transition-transform",
1595
- style: { transform: `translateX(-${100 * (1 - e)}%)` }
1596
- }
1597
- ) }), gr = 3e3, wr = ({ src: e, poster: r, itemIndex: n }) => {
1598
- const { carrouselItemIndex: o, setItemInteraction: a } = J(), u = j(null), h = j(null), p = z(() => {
1599
- if (!h.current)
1600
- throw new Error("videoRef.current is null");
1601
- return h.current;
1602
- }, []);
1603
- W(() => {
1604
- a(n, "ready");
1605
- }, [n, a]);
1606
- const L = z(() => {
1607
- p().play();
1608
- }, [p]), I = z(() => {
1609
- p().pause();
1610
- }, [p]);
1611
- W(() => {
1612
- o === n || I();
1613
- }, [o, n, I]);
1614
- const [f, C] = Y(!1), [H, S] = Y(!0), s = () => {
1615
- C(!0), a(n, "running");
1616
- }, m = () => {
1617
- C(!1), a(n, "ready");
1618
- }, w = () => {
1619
- S(!1);
1620
- }, y = () => {
1621
- S(!0);
1622
- }, [v, l] = Y(null), i = (c) => {
1623
- const E = p(), M = c.currentTarget.getBoundingClientRect(), Z = (c.clientX - M.left) / M.width, $ = Math.min(1, Math.max(0, Z));
1624
- E.volume = $, E.muted = !1;
1625
- }, g = (c) => {
1626
- const E = p();
1627
- E.muted = c;
1628
- };
1629
- W(() => {
1630
- const c = h.current;
1631
- if (!c)
1632
- return;
1633
- const E = () => {
1634
- l({
1635
- volume: c.volume,
1636
- isMuted: c.muted
1637
- });
1638
- };
1639
- return E(), c.addEventListener("volumechange", E), () => {
1640
- c.removeEventListener("volumechange", E);
1641
- };
1642
- }, []);
1643
- const [b, k] = Y(null), O = b ? b.currentTime / b.duration : 0;
1644
- W(() => {
1645
- const c = h.current;
1646
- if (!c) return;
1647
- const E = () => {
1648
- const M = c.currentTime, X = c.duration;
1649
- isNaN(M) || isNaN(X) || k({
1650
- currentTime: M,
1651
- duration: X
1652
- });
1653
- };
1654
- return E(), c.addEventListener("timeupdate", E), () => {
1655
- c.removeEventListener("timeupdate", E);
1656
- };
1657
- }, []);
1658
- const P = (c) => {
1659
- const E = p(), M = c.currentTarget.getBoundingClientRect(), Z = (c.clientX - M.left) / M.width, $ = E.duration * Z;
1660
- E.currentTime = $;
1661
- }, x = (c) => {
1662
- const E = Math.floor(c % 3600 / 60), M = Math.floor(c % 60);
1663
- return `${E}:${M.toString().padStart(2, "0")}`;
1664
- }, [N, _] = Y(!1), V = j(void 0), d = z(
1665
- () => clearTimeout(V.current),
1666
- []
1667
- ), T = z(() => {
1668
- d(), V.current = setTimeout(() => {
1669
- _(!1);
1670
- }, gr);
1671
- }, [d]);
1672
- return W(() => {
1673
- const c = u.current, E = h.current;
1674
- if (!c || !E)
1675
- return;
1676
- const M = () => {
1677
- T(), _(!0);
1678
- }, X = () => {
1679
- d(), _(!1);
1680
- };
1681
- let Z = !1;
1682
- const $ = () => {
1683
- Z = !0;
1684
- }, F = () => {
1685
- Z && (Z = !1, I());
1686
- }, Q = () => {
1687
- Z = !1, M();
1688
- }, K = (te) => {
1689
- te.preventDefault(), te.touches.length === 1 && (T(), _((oe) => !oe));
1690
- };
1691
- return c.addEventListener("mousedown", $), c.addEventListener("mouseup", F), c.addEventListener("mouseenter", M), c.addEventListener("mousemove", Q), c.addEventListener("mouseleave", X), E.addEventListener("touchstart", K), () => {
1692
- c.removeEventListener("mousedown", $), c.removeEventListener("mouseup", F), c.removeEventListener("mouseenter", M), c.removeEventListener("mousemove", M), c.removeEventListener("mouseleave", X), E.removeEventListener("touchstart", K);
1693
- };
1694
- }, [d, I, T]), /* @__PURE__ */ R("div", { ref: u, className: "relative size-full", children: [
1695
- /* @__PURE__ */ t(
1696
- "video",
1697
- {
1698
- ref: h,
1699
- className: "size-full",
1700
- src: e,
1701
- poster: r,
1702
- disablePictureInPicture: !0,
1703
- playsInline: !0,
1704
- onPlay: s,
1705
- onPause: m,
1706
- onEnded: m,
1707
- onCanPlay: w,
1708
- onWaiting: y
1709
- }
1710
- ),
1711
- f ? /* @__PURE__ */ R(ie, { children: [
1712
- /* @__PURE__ */ R(
1713
- "div",
1714
- {
1715
- className: D(
1716
- "absolute inset-x-0 bottom-0 cursor-auto space-y-2 bg-gradient-to-t from-foreground to-transparent p-4 pr-12 pt-8 transition-opacity duration-300",
1717
- N ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0"
1718
- ),
1719
- onMouseDownCapture: (c) => c.stopPropagation(),
1720
- children: [
1721
- /* @__PURE__ */ R("div", { className: "flex items-center justify-between text-background", children: [
1722
- /* @__PURE__ */ R(
1723
- "div",
1724
- {
1725
- className: "flex items-center gap-x-4",
1726
- children: [
1727
- /* @__PURE__ */ t(
1728
- ee,
1729
- {
1730
- shape: "icon",
1731
- variant: "ghost",
1732
- color: "neutral",
1733
- onClick: I,
1734
- children: /* @__PURE__ */ t(pr, { className: "size-full" })
1735
- }
1736
- ),
1737
- b && /* @__PURE__ */ R("span", { className: "text-sm", children: [
1738
- x(b.currentTime),
1739
- " /",
1740
- " ",
1741
- x(b.duration)
1742
- ] })
1743
- ]
1744
- }
1745
- ),
1746
- v && /* @__PURE__ */ R(
1747
- "div",
1748
- {
1749
- className: "group/volume flex items-center gap-x-4 rounded-ui-md p-2 transition-colors hover:bg-foreground/25",
1750
- children: [
1751
- /* @__PURE__ */ t(
1752
- "div",
1753
- {
1754
- className: `w-12 cursor-pointer py-1 opacity-0 transition-opacity ${v.isMuted ? "group-hover/volume:opacity-50" : "group-hover/volume:opacity-100"}`,
1755
- onClick: i,
1756
- children: /* @__PURE__ */ t(Fe, { progress: v.volume })
1757
- }
1758
- ),
1759
- /* @__PURE__ */ t(
1760
- "div",
1761
- {
1762
- className: "size-5 cursor-pointer",
1763
- onClick: () => g(!v.isMuted),
1764
- children: v.isMuted ? /* @__PURE__ */ t(fr, { className: "size-full" }) : /* @__PURE__ */ t(hr, { className: "size-full" })
1765
- }
1766
- )
1767
- ]
1768
- }
1769
- )
1770
- ] }),
1771
- /* @__PURE__ */ t(
1772
- "div",
1773
- {
1774
- className: "cursor-pointer py-1",
1775
- onClick: P,
1776
- children: /* @__PURE__ */ t(Fe, { progress: O })
1777
- }
1778
- )
1779
- ]
1780
- }
1781
- ),
1782
- H && /* @__PURE__ */ t(
1783
- "div",
1784
- {
1785
- className: "pointer-events-none absolute inset-0 flex items-center justify-center bg-foreground/25",
1786
- children: /* @__PURE__ */ t(ft, { size: "lg", color: "background" })
1787
- }
1788
- )
1789
- ] }) : /* @__PURE__ */ t(
1790
- "div",
1791
- {
1792
- className: "absolute inset-0 flex items-center justify-center bg-foreground/25",
1793
- children: /* @__PURE__ */ t(mr, { onClick: L })
1794
- }
1795
- )
1796
- ] });
1797
- }, vr = ({ index: e, item: r, isShown: n }) => {
1798
- const { type: o } = r;
1799
- let a;
1800
- switch (o) {
1801
- case "image":
1802
- a = /* @__PURE__ */ t(xt, { itemIndex: e, onlyPreload: !n, ...r });
1803
- break;
1804
- case "video":
1805
- a = /* @__PURE__ */ t(wr, { itemIndex: e, ...r });
1806
- break;
1807
- case "360":
1808
- a = /* @__PURE__ */ t(dr, { itemIndex: e, onlyPreload: !n, ...r });
1809
- break;
1810
- case "custom":
1811
- a = /* @__PURE__ */ t(or, { itemIndex: e, ...r });
1812
- }
1813
- return a = /* @__PURE__ */ t("div", { className: "-ml-px h-full w-[calc(100%+2px)]", children: a }), a;
1814
- }, br = (e) => {
1815
- W(() => {
1816
- const r = (n) => {
1817
- n.key === "Escape" && e();
1818
- };
1819
- return addEventListener("keydown", r), () => {
1820
- removeEventListener("keydown", r);
1821
- };
1822
- }, [e]);
1823
- };
1824
- function yr(e) {
1825
- return e.target === e.currentTarget;
1826
- }
1827
- const xr = ({ currentIndex: e, maxIndex: r }) => /* @__PURE__ */ R("div", { className: "space-x-0.5 rounded-ui bg-foreground/40 px-1.5 py-0.5 text-xs text-background/75 transition-radius small:space-x-1 small:px-2 small:py-1 small:text-sm", children: [
1828
- /* @__PURE__ */ t("span", { children: e + 1 }),
1829
- /* @__PURE__ */ t("span", { children: "/" }),
1830
- /* @__PURE__ */ t("span", { children: r + 1 })
1831
- ] }), je = ({ className: e }) => /* @__PURE__ */ t(G, { className: e, customizationKey: "UI_ARROW_RIGHT", children: /* @__PURE__ */ t("svg", { className: e, viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ t(
1832
- "path",
1833
- {
1834
- d: "M4.07666 13.4868L5.25666 14.6668L11.9233 8.00016L5.25666 1.3335L4.07666 2.5135L9.56333 8.00016L4.07666 13.4868Z",
1835
- fill: "currentColor"
1836
- }
1837
- ) }) }), Cr = ({ className: e }) => /* @__PURE__ */ t(G, { className: e, customizationKey: "UI_EXTEND", children: /* @__PURE__ */ t("svg", { className: e, viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ t(
1838
- "path",
1839
- {
1840
- d: "M4.66683 9.3335H3.3335V12.6668H6.66683V11.3335H4.66683V9.3335ZM3.3335 6.66683H4.66683V4.66683H6.66683V3.3335H3.3335V6.66683ZM11.3335 11.3335H9.3335V12.6668H12.6668V9.3335H11.3335V11.3335ZM9.3335 3.3335V4.66683H11.3335V6.66683H12.6668V3.3335H9.3335Z",
1841
- fill: "currentColor"
1842
- }
1843
- ) }) }), Er = ({ className: e }) => /* @__PURE__ */ t(G, { className: e, customizationKey: "UI_GALLERY", children: /* @__PURE__ */ t("svg", { className: e, viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ t(
1844
- "path",
1845
- {
1846
- d: "M13.3334 2.66683V10.6668H5.33337V2.66683H13.3334ZM13.3334 1.3335H5.33337C4.60004 1.3335 4.00004 1.9335 4.00004 2.66683V10.6668C4.00004 11.4002 4.60004 12.0002 5.33337 12.0002H13.3334C14.0667 12.0002 14.6667 11.4002 14.6667 10.6668V2.66683C14.6667 1.9335 14.0667 1.3335 13.3334 1.3335ZM7.66671 7.78016L8.79337 9.28683L10.4467 7.22016L12.6667 10.0002H6.00004L7.66671 7.78016ZM1.33337 4.00016V13.3335C1.33337 14.0668 1.93337 14.6668 2.66671 14.6668H12V13.3335H2.66671V4.00016H1.33337Z",
1847
- fill: "currentColor"
1848
- }
1849
- ) }) }), kr = ({ className: e }) => /* @__PURE__ */ t(G, { className: e, customizationKey: "UI_HOTSPOTS", children: /* @__PURE__ */ R(
1850
- "svg",
1851
- {
1852
- className: e,
1853
- width: "12",
1854
- height: "12",
1855
- viewBox: "0 0 12 12",
1856
- fill: "none",
1857
- xmlns: "http://www.w3.org/2000/svg",
1858
- children: [
1859
- /* @__PURE__ */ t("g", { clipPath: "url(#clip0_418_982)", children: /* @__PURE__ */ t(
1860
- "path",
1861
- {
1862
- d: "M6 4C4.895 4 4 4.895 4 6C4 7.105 4.895 8 6 8C7.105 8 8 7.105 8 6C8 4.895 7.105 4 6 4ZM10.47 5.5C10.24 3.415 8.585 1.76 6.5 1.53V0.5H5.5V1.53C3.415 1.76 1.76 3.415 1.53 5.5H0.5V6.5H1.53C1.76 8.585 3.415 10.24 5.5 10.47V11.5H6.5V10.47C8.585 10.24 10.24 8.585 10.47 6.5H11.5V5.5H10.47ZM6 9.5C4.065 9.5 2.5 7.935 2.5 6C2.5 4.065 4.065 2.5 6 2.5C7.935 2.5 9.5 4.065 9.5 6C9.5 7.935 7.935 9.5 6 9.5Z",
1863
- fill: "currentColor"
1864
- }
1865
- ) }),
1866
- /* @__PURE__ */ t("defs", { children: /* @__PURE__ */ t("clipPath", { id: "clip0_418_982", children: /* @__PURE__ */ t("rect", { width: "12", height: "12", fill: "white" }) }) })
1867
- ]
1868
- }
1869
- ) }), Lr = ({ className: e }) => /* @__PURE__ */ t(G, { className: e, customizationKey: "UI_MINUS", children: /* @__PURE__ */ t(
1870
- "svg",
1871
- {
1872
- className: e,
1873
- width: "16",
1874
- height: "16",
1875
- viewBox: "0 0 16 16",
1876
- fill: "none",
1877
- xmlns: "http://www.w3.org/2000/svg",
1878
- children: /* @__PURE__ */ t(
1879
- "path",
1880
- {
1881
- d: "M12.6666 8.66634H3.33325V7.33301H12.6666V8.66634Z",
1882
- fill: "currentColor"
1883
- }
1884
- )
1885
- }
1886
- ) }), Ir = ({ className: e }) => /* @__PURE__ */ t(G, { className: e, customizationKey: "UI_PLUS", children: /* @__PURE__ */ t(
1887
- "svg",
1888
- {
1889
- className: e,
1890
- width: "16",
1891
- height: "16",
1892
- viewBox: "0 0 16 16",
1893
- fill: "none",
1894
- xmlns: "http://www.w3.org/2000/svg",
1895
- children: /* @__PURE__ */ t(
1896
- "path",
1897
- {
1898
- d: "M12.6666 8.66634H8.66659V12.6663H7.33325V8.66634H3.33325V7.33301H7.33325V3.33301H8.66659V7.33301H12.6666V8.66634Z",
1899
- fill: "currentColor"
1900
- }
1901
- )
1902
- }
1903
- ) }), Mr = ({ className: e }) => /* @__PURE__ */ t(G, { className: e, customizationKey: "UI_REDUCE", children: /* @__PURE__ */ t("svg", { className: e, viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ t(
1904
- "path",
1905
- {
1906
- d: "M3.33325 10.6668H5.33325V12.6668H6.66659V9.3335H3.33325V10.6668ZM5.33325 5.3335H3.33325V6.66683H6.66659V3.3335H5.33325V5.3335ZM9.33325 12.6668H10.6666V10.6668H12.6666V9.3335H9.33325V12.6668ZM10.6666 5.3335V3.3335H9.33325V6.66683H12.6666V5.3335H10.6666Z",
1907
- fill: "currentColor"
1908
- }
1909
- ) }) }), Nr = ({
1910
- enabled: e,
1911
- onToggle: r,
1912
- label: n,
1913
- className: o,
1914
- children: a
1915
- }) => /* @__PURE__ */ R(
1916
- "label",
1917
- {
1918
- className: D(
1919
- "flex cursor-pointer items-center justify-center gap-x-2",
1920
- o
1921
- ),
1922
- children: [
1923
- /* @__PURE__ */ t(
1924
- "input",
1925
- {
1926
- type: "checkbox",
1927
- className: "sr-only",
1928
- checked: e,
1929
- onChange: r
1930
- }
1931
- ),
1932
- n && /* @__PURE__ */ t("div", { className: "text-xs text-background", children: n }),
1933
- /* @__PURE__ */ t(
1934
- "div",
1935
- {
1936
- className: D(
1937
- "flex h-5 w-8 items-center justify-center rounded-full transition-colors",
1938
- e ? "bg-primary" : "bg-background/60"
1939
- ),
1940
- children: /* @__PURE__ */ t(
1941
- "div",
1942
- {
1943
- className: D(
1944
- "flex size-4 items-center justify-center rounded-full p-0.5 transition",
1945
- e ? "translate-x-1.5 bg-primary-foreground text-primary" : "-translate-x-1.5 bg-background text-foreground"
1946
- ),
1947
- children: a
1948
- }
1949
- )
1950
- }
1951
- )
1952
- ]
1953
- }
1954
- ), Tr = ({ className: e }) => /* @__PURE__ */ t(G, { className: e, customizationKey: "UI_BURGER", children: /* @__PURE__ */ t(
1955
- "svg",
1956
- {
1957
- className: e,
1958
- width: "16",
1959
- height: "16",
1960
- viewBox: "0 0 16 16",
1961
- fill: "none",
1962
- xmlns: "http://www.w3.org/2000/svg",
1963
- children: /* @__PURE__ */ t(
1964
- "path",
1965
- {
1966
- d: "M2 12H14V10.6667H2V12ZM2 8.66667H14V7.33333H2V8.66667ZM2 4V5.33333H14V4H2Z",
1967
- fill: "currentColor"
1968
- }
1969
- )
1970
- }
1971
- ) }), zr = ({ sharedClassName: e }) => {
1972
- const { categories: r } = se(), { displayedCategoryId: n, changeCategory: o } = J(), [a, u] = Y(!1), h = () => {
1973
- u(!a);
1974
- }, p = () => {
1975
- u(!1);
1976
- };
1977
- return /* @__PURE__ */ R(ie, { children: [
1978
- a && /* @__PURE__ */ t(
1979
- "div",
1980
- {
1981
- className: D(e, "inset-0 small:hidden"),
1982
- onClick: p
1983
- }
1984
- ),
1985
- /* @__PURE__ */ R(
1986
- "div",
1987
- {
1988
- className: D(
1989
- e,
1990
- pe("top-left"),
1991
- "flex gap-x-2 small:hidden"
1992
- ),
1993
- children: [
1994
- /* @__PURE__ */ t(
1995
- ee,
1996
- {
1997
- shape: "icon",
1998
- color: a ? "primary" : "neutral",
1999
- onClick: h,
2000
- children: /* @__PURE__ */ t(Tr, {})
2001
- }
2002
- ),
2003
- a && /* @__PURE__ */ t("div", { className: "rounded-ui-md bg-background transition-radius", children: /* @__PURE__ */ t("ul", { className: "space-y-0.5 p-1", children: r.map(({ id: L, title: I }) => /* @__PURE__ */ t(
2004
- "li",
2005
- {
2006
- className: D(
2007
- "cursor-pointer rounded-ui px-2 py-1 text-sm font-bold transition-all hover:bg-primary/30",
2008
- L === n && "bg-primary/50"
2009
- ),
2010
- onClick: () => {
2011
- o(L), u(!1);
2012
- },
2013
- children: I
2014
- },
2015
- L
2016
- )) }) })
2017
- ]
2018
- }
2019
- ),
2020
- /* @__PURE__ */ t(
2021
- "div",
2022
- {
2023
- className: D(
2024
- e,
2025
- mt("top"),
2026
- "w-full overflow-x-auto max-small:hidden"
2027
- ),
2028
- children: /* @__PURE__ */ t("div", { className: "mx-auto flex w-fit gap-x-1 rounded-ui-md bg-background p-1 shadow", children: r.map(({ id: L, title: I }) => /* @__PURE__ */ t(
2029
- ee,
2030
- {
2031
- variant: L === n ? "fill" : "ghost",
2032
- onClick: () => o(L),
2033
- children: I
2034
- },
2035
- L
2036
- )) })
2037
- }
2038
- )
2039
- ] });
2040
- }, Sr = () => {
2041
- const { hideCategories: e, infiniteCarrousel: r, permanentGallery: n } = ne(), { aspectRatioStyle: o } = se(), {
2042
- items: { length: a },
2043
- slidable: u,
2044
- carrouselItemIndex: h,
2045
- masterItemIndex: p,
2046
- prevItem: L,
2047
- nextItem: I,
2048
- showGalleryControls: f,
2049
- enableHotspotsControl: C,
2050
- showHotspots: H,
2051
- toggleHotspots: S,
2052
- showGallery: s,
2053
- toggleGallery: m,
2054
- extendMode: w,
2055
- toggleExtendMode: y,
2056
- shownDetails: v,
2057
- isShowingDetails: l,
2058
- resetShownDetails: i,
2059
- showZoomControls: g,
2060
- isZooming: b,
2061
- canZoomIn: k,
2062
- zoomIn: O,
2063
- canZoomOut: P,
2064
- zoomOut: x,
2065
- resetView: N
2066
- } = J(), _ = z(
2067
- (d) => {
2068
- yr(d) && i();
2069
- },
2070
- [i]
2071
- );
2072
- br(i);
2073
- const V = "absolute z-overlay";
2074
- return /* @__PURE__ */ R(ie, { children: [
2075
- !e && /* @__PURE__ */ t(
2076
- zr,
2077
- {
2078
- sharedClassName: D(
2079
- V,
2080
- "transition-opacity",
2081
- b ? "!pointer-events-none opacity-0" : "opacity-100"
2082
- )
2083
- }
2084
- ),
2085
- u && !b && /* @__PURE__ */ t("div", { className: D(V, pe("top-right")), children: /* @__PURE__ */ t(
2086
- xr,
2087
- {
2088
- currentIndex: h,
2089
- maxIndex: a - 1
2090
- }
2091
- ) }),
2092
- u && /* @__PURE__ */ R(ie, { children: [
2093
- /* @__PURE__ */ t(
2094
- ee,
2095
- {
2096
- shape: "icon",
2097
- color: "neutral",
2098
- className: D(
2099
- V,
2100
- pe("middle-left"),
2101
- b ? "!pointer-events-none opacity-0" : "opacity-100"
2102
- ),
2103
- onClick: L,
2104
- disabled: !r && p <= 0,
2105
- children: /* @__PURE__ */ t(G, { customizationKey: "CONTROLS_PREV", children: /* @__PURE__ */ t(je, { className: "size-full -scale-x-100" }) })
2106
- }
2107
- ),
2108
- /* @__PURE__ */ t(
2109
- ee,
2110
- {
2111
- shape: "icon",
2112
- color: "neutral",
2113
- className: D(
2114
- V,
2115
- pe("middle-right"),
2116
- b ? "!pointer-events-none opacity-0" : "opacity-100"
2117
- ),
2118
- onClick: I,
2119
- disabled: !r && p >= a - 1,
2120
- children: /* @__PURE__ */ t(G, { customizationKey: "CONTROLS_NEXT", children: /* @__PURE__ */ t(je, { className: "size-full" }) })
2121
- }
2122
- )
2123
- ] }),
2124
- /* @__PURE__ */ R(
2125
- "div",
2126
- {
2127
- className: D(
2128
- V,
2129
- pe("bottom-fullW"),
2130
- "pointer-events-none grid grid-cols-[auto,1fr,auto] items-end *:pointer-events-auto small:gap-x-2"
2131
- ),
2132
- children: [
2133
- !n && u && /* @__PURE__ */ R(ie, { children: [
2134
- /* @__PURE__ */ t(
2135
- ee,
2136
- {
2137
- className: f && !b ? "opacity-100" : "!pointer-events-none opacity-0",
2138
- variant: "fill",
2139
- color: s ? "primary" : "neutral",
2140
- shape: "icon",
2141
- onClick: m,
2142
- children: /* @__PURE__ */ t(Er, { className: "size-full" })
2143
- }
2144
- ),
2145
- s && /* @__PURE__ */ t(
2146
- bt,
2147
- {
2148
- className: D(
2149
- "transition-opacity",
2150
- f && !b ? "opacity-100" : "!pointer-events-none opacity-0",
2151
- // Left & Right gradient mask to fade the gallery
2152
- "[mask-image:linear-gradient(to_left,transparent_0px,black_4px,black_calc(100%-4px),transparent_100%)]"
2153
- ),
2154
- containerClassName: "mx-1"
2155
- }
2156
- )
2157
- ] }),
2158
- /* @__PURE__ */ R("div", { className: "col-start-3 flex flex-col items-end gap-y-1 small:gap-y-2", children: [
2159
- C && /* @__PURE__ */ t(
2160
- Nr,
2161
- {
2162
- className: D(
2163
- "transition-opacity",
2164
- b ? "!pointer-events-none opacity-0" : "opacity-100"
2165
- ),
2166
- enabled: H,
2167
- onToggle: S,
2168
- children: /* @__PURE__ */ t(kr, { className: "size-full" })
2169
- }
2170
- ),
2171
- g && /* @__PURE__ */ R("div", { className: "max-small:hidden", children: [
2172
- /* @__PURE__ */ t(
2173
- ee,
2174
- {
2175
- className: "rounded-b-none",
2176
- color: "neutral",
2177
- shape: "icon",
2178
- disabled: !k,
2179
- onClick: O,
2180
- children: /* @__PURE__ */ t(Ir, { className: "size-full" })
2181
- }
2182
- ),
2183
- /* @__PURE__ */ t(vt, { color: "background" }),
2184
- /* @__PURE__ */ t(
2185
- ee,
2186
- {
2187
- className: "rounded-t-none",
2188
- color: "neutral",
2189
- shape: "icon",
2190
- disabled: !P,
2191
- onClick: x,
2192
- children: /* @__PURE__ */ t(Lr, { className: "size-full" })
2193
- }
2194
- )
2195
- ] }),
2196
- /* @__PURE__ */ t(
2197
- ee,
2198
- {
2199
- variant: "fill",
2200
- color: w ? "primary" : "neutral",
2201
- shape: "icon",
2202
- onClick: y,
2203
- children: w ? /* @__PURE__ */ t(Mr, { className: "size-full" }) : /* @__PURE__ */ t(Cr, { className: "size-full" })
2204
- }
2205
- )
2206
- ] })
2207
- ]
2208
- }
2209
- ),
2210
- /* @__PURE__ */ t(
2211
- "div",
2212
- {
2213
- className: D(
2214
- V,
2215
- "inset-0 flex justify-end overflow-hidden bg-foreground/60 transition-opacity duration-details",
2216
- l ? "opacity-100" : "pointer-events-none opacity-0"
2217
- ),
2218
- onClick: _,
2219
- children: /* @__PURE__ */ t(
2220
- "div",
2221
- {
2222
- className: D(
2223
- "h-full w-3/5 bg-background transition-transform duration-details",
2224
- l ? "translate-x-0" : "translate-x-full"
2225
- ),
2226
- children: !!v && /* @__PURE__ */ R(ie, { children: [
2227
- /* @__PURE__ */ t(
2228
- he,
2229
- {
2230
- className: "w-full bg-foreground/65",
2231
- style: o,
2232
- src: v.src,
2233
- imgInPlayerWidthRatio: 0.6
2234
- }
2235
- ),
2236
- /* @__PURE__ */ R(
2237
- "div",
2238
- {
2239
- className: D(
2240
- "space-y-1 px-2 py-1 small:p-3",
2241
- w && "large:p-4"
2242
- ),
2243
- children: [
2244
- v.title && /* @__PURE__ */ t(
2245
- "span",
2246
- {
2247
- className: D(
2248
- "text-sm font-semibold small:text-base small:font-bold",
2249
- w && "large:text-lg"
2250
- ),
2251
- children: v.title
2252
- }
2253
- ),
2254
- v.text && /* @__PURE__ */ t(
2255
- "p",
2256
- {
2257
- className: D(
2258
- "text-xs text-foreground/65 small:text-sm",
2259
- w && "large:text-base"
2260
- ),
2261
- children: v.text
2262
- }
2263
- )
2264
- ]
2265
- }
2266
- )
2267
- ] })
2268
- }
2269
- )
2270
- }
2271
- ),
2272
- (b || l) && /* @__PURE__ */ t(
2273
- pt,
2274
- {
2275
- className: D(V, pe("top-right")),
2276
- onClick: N
2277
- }
2278
- )
2279
- ] });
2280
- }, _r = ({ className: e = "" }) => {
2281
- const { infiniteCarrousel: r, preloadRange: n, isFullScreen: o } = ne(), { aspectRatioStyle: a } = se(), {
2282
- items: u,
2283
- slidable: h,
2284
- carrouselItemIndex: p,
2285
- setCarrouselItemIndex: L,
2286
- itemIndexCommand: I,
2287
- setItemIndexCommand: f,
2288
- specialCommand: C,
2289
- isRunningSpecialCommand: H,
2290
- finishSpecialCommand: S,
2291
- extendMode: s,
2292
- extendTransition: m
2293
- } = J(), w = j(null), y = z((d) => {
2294
- if (!w.current)
2295
- throw new Error(`[${d ?? "sliderOrThrow"}] slider.current is null`);
2296
- return w.current;
2297
- }, []), v = j(!1), l = j(null), i = j(null), g = j(null), b = z(() => {
2298
- g.current && cancelAnimationFrame(g.current);
2299
- }, []), k = z(() => {
2300
- const d = y("computeClosestSnapIndex"), T = Array.from(d.children), c = d.scrollLeft;
2301
- return T.reduce(
2302
- (M, X, Z) => {
2303
- const $ = X.offsetLeft;
2304
- return Math.abs($ - c) < Math.abs(T[M].offsetLeft - c) ? Z : M;
2305
- },
2306
- 0
2307
- );
2308
- }, [y]), O = z(
2309
- (d) => {
2310
- const T = y("setStyleCursor");
2311
- T.style.cursor = d;
2312
- },
2313
- [y]
2314
- ), P = z(
2315
- (d) => {
2316
- const T = y("setStyleSnapState");
2317
- d === "mandatory" ? T.style.scrollSnapType = "x mandatory" : T.style.scrollSnapType = "none";
2318
- },
2319
- [y]
2320
- ), x = z(
2321
- (d, T, c) => {
2322
- b();
2323
- const E = y("scrollToIndex"), M = Array.from(E.children), X = E.scrollLeft, Z = M[d].offsetLeft, $ = (oe) => {
2324
- E.scrollTo({
2325
- left: oe,
2326
- behavior: "instant"
2327
- });
2328
- }, F = () => {
2329
- $(Z), P("mandatory"), c?.();
2330
- }, Q = Math.abs(X - Z);
2331
- if (Q < 1 || T === "instant") {
2332
- F();
2333
- return;
2334
- }
2335
- const K = ce(Q / 2.5, 300, 1e3), te = (/* @__PURE__ */ new Date()).getTime();
2336
- P("none");
2337
- const ae = () => {
2338
- const oe = () => {
2339
- const ve = (/* @__PURE__ */ new Date()).getTime() - te;
2340
- if (ve >= K) {
2341
- F();
2342
- return;
2343
- }
2344
- const Ee = Math.min(ve / K, 1), ke = yt(Ee), le = be(X, Z, ke);
2345
- $(le), ae();
2346
- };
2347
- g.current = requestAnimationFrame(oe);
2348
- };
2349
- ae();
2350
- },
2351
- [b, y, P]
2352
- ), [N, _] = Y(), V = !!N;
2353
- return W(() => {
2354
- const d = () => {
2355
- clearTimeout(N);
2356
- const T = setTimeout(() => {
2357
- _(void 0);
2358
- }, it);
2359
- _(T);
2360
- };
2361
- return addEventListener("resize", d), document.addEventListener("fullscreenchange", d), () => {
2362
- removeEventListener("resize", d), document.removeEventListener("fullscreenchange", d);
2363
- };
2364
- }, [N]), W(() => {
2365
- if (C)
2366
- return;
2367
- const d = k();
2368
- Number.isNaN(d) || d !== p && x(p, "instant");
2369
- }, [
2370
- p,
2371
- k,
2372
- x,
2373
- C,
2374
- // - Run the effect when those values change
2375
- u,
2376
- N,
2377
- o,
2378
- s,
2379
- m
2380
- ]), W(() => {
2381
- if (!h || H) {
2382
- O("auto");
2383
- return;
2384
- }
2385
- const d = w.current;
2386
- if (!d)
2387
- return;
2388
- O("grab"), P("mandatory");
2389
- const T = (M) => {
2390
- M.button === 0 && (M.preventDefault(), M.stopPropagation(), b(), v.current = !0, l.current = M.pageX - d.offsetLeft, i.current = d.scrollLeft, O("grabbing"));
2391
- }, c = (M) => {
2392
- if (!v.current)
2393
- return;
2394
- if (l.current === null)
2395
- throw new Error("[onMouseMove] startX is null");
2396
- P("none");
2397
- const Z = M.pageX - d.offsetLeft - l.current;
2398
- requestAnimationFrame(() => {
2399
- if (i.current === null)
2400
- throw new Error("[onMouseMove] scrollLeft is null");
2401
- d.scrollLeft = i.current - Z;
2402
- });
2403
- }, E = () => {
2404
- if (!v.current)
2405
- return;
2406
- v.current = !1, O("grab");
2407
- const M = k();
2408
- x(M, "smooth");
2409
- };
2410
- return d.addEventListener("mousedown", T), document.addEventListener("mousemove", c), document.addEventListener("mouseleave", E), document.addEventListener("mouseup", E), document.addEventListener("contextmenu", E), () => {
2411
- d.removeEventListener("mousedown", T), document.removeEventListener("mousemove", c), document.removeEventListener("mouseleave", E), document.removeEventListener("mouseup", E), document.removeEventListener("contextmenu", E);
2412
- };
2413
- }, [
2414
- b,
2415
- k,
2416
- H,
2417
- x,
2418
- O,
2419
- P,
2420
- h
2421
- ]), W(() => {
2422
- if (m || V)
2423
- return;
2424
- const d = w.current;
2425
- if (!d)
2426
- return;
2427
- const T = () => {
2428
- const c = k();
2429
- Number.isNaN(c) || (L(c), c === I && f(null));
2430
- };
2431
- return d.addEventListener("scroll", T), () => {
2432
- d.removeEventListener("scroll", T);
2433
- };
2434
- }, [
2435
- k,
2436
- m,
2437
- V,
2438
- I,
2439
- L,
2440
- f
2441
- ]), W(() => {
2442
- if (I === null)
2443
- return;
2444
- const d = () => {
2445
- setTimeout(() => {
2446
- f(null), S();
2447
- }, 75);
2448
- };
2449
- switch (C) {
2450
- case "first_to_last":
2451
- x(u.length - 1, "instant", d);
2452
- break;
2453
- case "last_to_first":
2454
- x(0, "instant", d);
2455
- break;
2456
- case "instant":
2457
- x(I, "instant", d);
2458
- break;
2459
- default:
2460
- x(I, "smooth");
2461
- break;
2462
- }
2463
- }, [
2464
- C,
2465
- S,
2466
- I,
2467
- u.length,
2468
- x,
2469
- f
2470
- ]), /* @__PURE__ */ R(
2471
- "div",
2472
- {
2473
- className: D(
2474
- "relative overflow-hidden rounded-carrousel transition-radius",
2475
- e
2476
- ),
2477
- style: a,
2478
- children: [
2479
- /* @__PURE__ */ t(
2480
- "div",
2481
- {
2482
- ref: w,
2483
- className: `flex size-full ${h ? "overflow-x-auto no-scrollbar *:snap-start *:snap-always" : "justify-center"}`,
2484
- children: u.map((d, T) => {
2485
- const c = T === p, E = T === 0, M = T === u.length - 1, X = (() => {
2486
- if (C === "first_to_last" && E)
2487
- return {
2488
- transform: `translateX(${100 * u.length}%)`
2489
- };
2490
- if (C === "last_to_first" && M)
2491
- return {
2492
- transform: `translateX(-${100 * u.length}%)`
2493
- };
2494
- })();
2495
- let Z = Math.abs(T - p) <= n;
2496
- Z ||= T === I, r && (Z ||= p < n && u.length - T <= n - p, Z ||= p >= u.length - n && T <= n - (u.length - p));
2497
- const $ = (() => {
2498
- let F;
2499
- switch (d.type) {
2500
- case "360":
2501
- F = d.images[0].src;
2502
- break;
2503
- case "image":
2504
- F = d.src;
2505
- break;
2506
- case "video":
2507
- F = d.poster ?? "video";
2508
- break;
2509
- case "custom":
2510
- F = "custom";
2511
- break;
2512
- }
2513
- return `${T}_${F}`;
2514
- })();
2515
- return /* @__PURE__ */ t(
2516
- "div",
2517
- {
2518
- className: D(
2519
- "h-full bg-foreground/35",
2520
- p === T && "z-1"
2521
- // Give high-ground to the shown item (to avoid 1px vertical line)
2522
- ),
2523
- style: { ...a, ...X },
2524
- children: Z && /* @__PURE__ */ t(vr, { index: T, item: d, isShown: c })
2525
- },
2526
- $
2527
- );
2528
- })
2529
- }
2530
- ),
2531
- /* @__PURE__ */ t(Sr, {})
2532
- ]
2533
- }
2534
- );
2535
- }, Vr = () => {
2536
- const { permanentGallery: e } = ne(), { aspectRatioStyle: r } = se(), {
2537
- prevItem: n,
2538
- nextItem: o,
2539
- isShowingDetails: a,
2540
- resetShownDetails: u,
2541
- extendMode: h,
2542
- disableExtendMode: p,
2543
- isZooming: L,
2544
- resetZoom: I,
2545
- fakeFullScreen: f
2546
- } = J(), C = j(null), H = j(null), S = j(null);
2547
- return W(() => {
2548
- if (!h)
2549
- return;
2550
- const s = C.current, m = H.current, w = S.current;
2551
- if (!s || !m || !w)
2552
- return;
2553
- let y = !1;
2554
- const v = (g) => [s, m, w].includes(g.target), l = (g) => {
2555
- y = v(g);
2556
- }, i = (g) => {
2557
- y && (v(g) && p(), y = !1);
2558
- };
2559
- return s.addEventListener("mousedown", l), s.addEventListener("mouseup", i), () => {
2560
- s.removeEventListener("mousedown", l), s.removeEventListener("mouseup", i);
2561
- };
2562
- }, [p, h]), W(() => {
2563
- const s = (m) => {
2564
- m.key === "Escape" && (L ? I() : a ? u() : p());
2565
- };
2566
- return addEventListener("keydown", s), () => {
2567
- removeEventListener("keydown", s);
2568
- };
2569
- }, [
2570
- p,
2571
- a,
2572
- L,
2573
- o,
2574
- n,
2575
- u,
2576
- I
2577
- ]), /* @__PURE__ */ R(
2578
- "div",
2579
- {
2580
- ref: C,
2581
- className: D(
2582
- f ? "fixed inset-0 z-overlay" : "relative",
2583
- h && "flex size-full items-center justify-center bg-foreground/75"
2584
- ),
2585
- children: [
2586
- /* @__PURE__ */ R(
2587
- "div",
2588
- {
2589
- ref: H,
2590
- className: h ? "flex size-full flex-col justify-center gap-y-2 small:gap-y-4" : "space-y-2",
2591
- children: [
2592
- /* @__PURE__ */ t(
2593
- "div",
2594
- {
2595
- ref: S,
2596
- className: D(
2597
- h && "mx-auto flex min-h-0 w-full max-w-[1600px] justify-center"
2598
- ),
2599
- style: r,
2600
- children: /* @__PURE__ */ t(_r, { className: D(h && "h-full min-w-0") })
2601
- }
2602
- ),
2603
- e && /* @__PURE__ */ t(bt, { className: D(h && "my-2 shrink-0 small:my-4") })
2604
- ]
2605
- }
2606
- ),
2607
- h && /* @__PURE__ */ t(
2608
- pt,
2609
- {
2610
- className: "absolute right-2 top-2 small:right-4 small:top-4",
2611
- onClick: p
2612
- }
2613
- )
2614
- ]
2615
- }
2616
- );
2617
- }, Hr = () => {
2618
- const { emitEvent: e, compositionUrl: r } = ne(), {
2619
- data: n,
2620
- status: o,
2621
- isSuccess: a,
2622
- error: u
2623
- } = At(r);
2624
- return W(() => {
2625
- u ? e(qe, u) : o === "fetching" ? e(Ge, r) : a && e(Be, n);
2626
- }, [n, r, e, u, a, o]), u ? /* @__PURE__ */ t(
2627
- ht,
2628
- {
2629
- className: "aspect-square text-foreground/70",
2630
- text: "Player could not be loaded"
2631
- }
2632
- ) : a ? /* @__PURE__ */ t(Ot, { composition: n, children: /* @__PURE__ */ t(Zt, { children: /* @__PURE__ */ t(Vr, {}) }) }) : /* @__PURE__ */ R("div", { className: "flex aspect-square size-full flex-col items-center justify-center gap-y-4", children: [
2633
- /* @__PURE__ */ t("div", { className: "animate-pulse text-xl", children: "Loading Player" }),
2634
- /* @__PURE__ */ t(ft, { color: "foreground" })
2635
- ] });
2636
- }, Pr = ({
2637
- compositionUrl: e,
2638
- hideCategories: r = Mt,
2639
- infiniteCarrousel: n = Nt,
2640
- permanentGallery: o = Tt,
2641
- mediaLoadStrategy: a = zt,
2642
- minMediaWidth: u = St,
2643
- maxMediaWidth: h = _t,
2644
- preloadRange: p = Vt,
2645
- preventFullScreen: L = Ht,
2646
- eventPrefix: I = ot,
2647
- reverse360: f = Pt,
2648
- children: C
2649
- // NOTE: use to customize the player, not to display the content
2650
- }) => {
2651
- const H = j(null), [S, s] = Y(0.5), [m, w] = Y(!1), y = z(
2652
- (i, g) => {
2653
- const b = I + i, k = new CustomEvent(b, { detail: g });
2654
- document.dispatchEvent(k);
2655
- },
2656
- [I]
2657
- );
2658
- W(() => {
2659
- if (m) {
2660
- s(1);
2661
- return;
2662
- }
2663
- if (!H.current)
2664
- return;
2665
- const i = H.current, g = () => {
2666
- const b = window.innerWidth, k = i.clientWidth;
2667
- s(k / b);
2668
- };
2669
- return g(), addEventListener("resize", g), () => {
2670
- removeEventListener("resize", g);
2671
- };
2672
- }, [m]), W(() => {
2673
- if (L)
2674
- return;
2675
- const i = H.current;
2676
- if (!i)
2677
- throw new Error("Wrapper not found");
2678
- const g = () => {
2679
- const { fullscreenElement: b } = document;
2680
- w(
2681
- b === i || // NOTE: For custom element, the web browser is making the whole custom element full-screen and not only the wrapper
2682
- b?.localName === Pe
2683
- );
2684
- };
2685
- return document.addEventListener("fullscreenchange", g), () => {
2686
- document.removeEventListener("fullscreenchange", g);
2687
- };
2688
- }, [L]);
2689
- const v = z(async () => {
2690
- const i = H.current;
2691
- if (!i)
2692
- throw new Error("Wrapper not found");
2693
- try {
2694
- return await i.requestFullscreen(), !0;
2695
- } catch {
2696
- return !1;
2697
- }
2698
- }, []), l = z(async () => {
2699
- try {
2700
- return await document.exitFullscreen(), !0;
2701
- } catch {
2702
- return !1;
2703
- }
2704
- }, []);
2705
- return /* @__PURE__ */ t(
2706
- Wt,
2707
- {
2708
- compositionUrl: e,
2709
- hideCategories: r,
2710
- infiniteCarrousel: n,
2711
- permanentGallery: o,
2712
- mediaLoadStrategy: a,
2713
- minMediaWidth: u,
2714
- maxMediaWidth: h,
2715
- preloadRange: p,
2716
- preventFullScreen: L,
2717
- reverse360: f,
2718
- emitEvent: y,
2719
- playerInViewportWidthRatio: S,
2720
- isFullScreen: m,
2721
- requestFullscreen: v,
2722
- exitFullscreen: l,
2723
- children: /* @__PURE__ */ R(Xt, { children: [
2724
- /* @__PURE__ */ t(
2725
- "div",
2726
- {
2727
- ref: H,
2728
- className: "select-none text-foreground",
2729
- style: {
2730
- "--background": "var(--cc-webplayer-background, 0 0% 100%)",
2731
- "--foreground": "var(--cc-webplayer-foreground, 240 10% 3.9%)",
2732
- "--primary": "var(--cc-webplayer-primary, 216 100% 52%)",
2733
- "--primary-foreground": "var(--cc-webplayer-primary-foreground, var(--background))",
2734
- "--primary-light": "var(--cc-webplayer-primary-light, var(--primary))",
2735
- "--neutral": "var(--cc-webplayer-neutral, 0 0% 39%)",
2736
- "--neutral-foreground": "var(--cc-webplayer-neutral-foreground, var(--foreground))",
2737
- "--radius-ui": "var(--cc-webplayer-radius-ui, 1rem)",
2738
- "--radius-carrousel": "var(--cc-webplayer-radius-carrousel, 0)",
2739
- "--radius-gallery": "var(--cc-webplayer-radius-gallery, 0)"
2740
- },
2741
- children: /* @__PURE__ */ t(Hr, {})
2742
- }
2743
- ),
2744
- C
2745
- ] })
2746
- }
2747
- );
2748
- }, Dr = ({ children: e, index: r, thumbnailSrc: n }) => {
2749
- const { registerCustomMedia: o, unregisterCustomMedia: a } = ge();
2750
- return W(() => {
2751
- if (!e)
2752
- return;
2753
- const u = o({
2754
- Media: e,
2755
- index: r,
2756
- thumbnailSrc: n
2757
- });
2758
- return () => {
2759
- a(u);
2760
- };
2761
- }, [e, a, r, o, n]), null;
2762
- }, Ur = (e) => De() ? /* @__PURE__ */ t(Dr, { ...e }) : /* @__PURE__ */ t("slot", {}), Rr = ({ name: e, children: r }) => {
2763
- const { registerIconConfig: n, unregisterIconConfig: o } = ge();
2764
- return W(() => {
2765
- if (r)
2766
- return n(e, {
2767
- Icon: r
2768
- }), () => {
2769
- o(e);
2770
- };
2771
- }, [r, e, n, o]), null;
2772
- }, Gr = (e) => De() ? /* @__PURE__ */ t(Rr, { ...e }) : /* @__PURE__ */ t("slot", {}), Ar = '*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:currentColor}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.\\!container{width:100%!important}.container{width:100%}@media (min-width: 1280px){.\\!container{max-width:1280px!important}.container{max-width:1280px}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.\\!pointer-events-none{pointer-events:none!important}.pointer-events-none{pointer-events:none}.pointer-events-auto{pointer-events:auto}.invisible{visibility:hidden}.fixed{position:fixed}.\\!absolute{position:absolute!important}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.inset-x-0{left:0;right:0}.inset-x-1{left:.25rem;right:.25rem}.inset-y-1{top:.25rem;bottom:.25rem}.-bottom-1{bottom:-.25rem}.-left-1{left:-.25rem}.-right-1{right:-.25rem}.-top-1{top:-.25rem}.bottom-0{bottom:0}.bottom-1{bottom:.25rem}.left-0{left:0}.left-1{left:.25rem}.left-1\\/2{left:50%}.right-1{right:.25rem}.right-2{right:.5rem}.top-0{top:0}.top-1{top:.25rem}.top-1\\/2{top:50%}.top-2{top:.5rem}.-z-10{z-index:-10}.-z-20{z-index:-20}.z-1{z-index:1}.z-hotspot{z-index:10}.z-overlay{z-index:30}.z-zoomed-image{z-index:20}.col-start-3{grid-column-start:3}.mx-1{margin-left:.25rem;margin-right:.25rem}.mx-auto{margin-left:auto;margin-right:auto}.my-2{margin-top:.5rem;margin-bottom:.5rem}.-ml-px{margin-left:-1px}.-mt-px{margin-top:-1px}.inline-block{display:inline-block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.aspect-square{aspect-ratio:1 / 1}.size-1{width:.25rem;height:.25rem}.size-12{width:3rem;height:3rem}.size-20{width:5rem;height:5rem}.size-4{width:1rem;height:1rem}.size-5{width:1.25rem;height:1.25rem}.size-8{width:2rem;height:2rem}.size-full{width:100%;height:100%}.h-1{height:.25rem}.h-10{height:2.5rem}.h-20{height:5rem}.h-3\\/4{height:75%}.h-5{height:1.25rem}.h-8{height:2rem}.h-full{height:100%}.h-px{height:1px}.min-h-0{min-height:0px}.w-12{width:3rem}.w-3\\/5{width:60%}.w-8{width:2rem}.w-\\[calc\\(100\\%\\+1024px\\)\\]{width:calc(100% + 1024px)}.w-\\[calc\\(100\\%\\+2px\\)\\]{width:calc(100% + 2px)}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.w-max{width:-moz-max-content;width:max-content}.w-px{width:1px}.min-w-0{min-width:0px}.max-w-40{max-width:10rem}.max-w-\\[1600px\\]{max-width:1600px}.shrink-0{flex-shrink:0}.origin-top-left{transform-origin:top left}.-translate-x-1\\.5{--tw-translate-x: -.375rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-x-1\\/2{--tw-translate-x: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\\/2{--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-0{--tw-translate-x: 0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-1\\.5{--tw-translate-x: .375rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-full{--tw-translate-x: 100%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-100{--tw-scale-x: 1;--tw-scale-y: 1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-105{--tw-scale-x: 1.05;--tw-scale-y: 1.05;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-scale-x-100{--tw-scale-x: -1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes hotspot-ping{0%{transform:scale(0)}25%{opacity:1}75%,to{transform:scale(1.5);opacity:0}}.animate-hotspot-ping{animation:hotspot-ping 3s cubic-bezier(0,0,.2,1) infinite}@keyframes pulse{50%{opacity:1}0%,to{opacity:0}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.animate-rotation{animation:rotation 1s linear infinite}.cursor-auto{cursor:auto}.cursor-ew-resize{cursor:ew-resize}.cursor-grab{cursor:grab}.cursor-grabbing{cursor:grabbing}.cursor-help{cursor:help}.cursor-move{cursor:move}.cursor-pointer{cursor:pointer}.resize{resize:both}.grid-cols-\\[auto\\,1fr\\,auto\\]{grid-template-columns:auto 1fr auto}.flex-col{flex-direction:column}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-x-1{-moz-column-gap:.25rem;column-gap:.25rem}.gap-x-2{-moz-column-gap:.5rem;column-gap:.5rem}.gap-x-4{-moz-column-gap:1rem;column-gap:1rem}.gap-y-1{row-gap:.25rem}.gap-y-2{row-gap:.5rem}.gap-y-4{row-gap:1rem}.space-x-0\\.5>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.125rem * var(--tw-space-x-reverse));margin-left:calc(.125rem * calc(1 - var(--tw-space-x-reverse)))}.space-y-0\\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.125rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.125rem * var(--tw-space-y-reverse))}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem * var(--tw-space-y-reverse))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem * var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-x-scroll{overflow-x:scroll}.text-pretty{text-wrap:pretty}.rounded-carrousel{border-radius:var(--radius-carrousel)}.rounded-full{border-radius:9999px}.rounded-gallery{border-radius:var(--radius-gallery)}.rounded-ui{border-radius:var(--radius-ui)}.rounded-ui-md{border-radius:calc(var(--radius-ui) + .125rem)}.rounded-ui-sm{border-radius:calc(var(--radius-ui) - .125rem)}.rounded-b-none{border-bottom-right-radius:0;border-bottom-left-radius:0}.rounded-t-none{border-top-left-radius:0;border-top-right-radius:0}.border{border-width:1px}.border-2{border-width:2px}.border-4{border-width:4px}.border-background{border-color:hsl(var(--background))}.border-foreground{border-color:hsl(var(--foreground))}.border-primary{border-color:hsl(var(--primary))}.border-b-transparent{border-bottom-color:transparent}.bg-background{background-color:hsl(var(--background))}.bg-background\\/25{background-color:hsl(var(--background) / .25)}.bg-background\\/50{background-color:hsl(var(--background) / .5)}.bg-background\\/60{background-color:hsl(var(--background) / .6)}.bg-foreground\\/25{background-color:hsl(var(--foreground) / .25)}.bg-foreground\\/30{background-color:hsl(var(--foreground) / .3)}.bg-foreground\\/35{background-color:hsl(var(--foreground) / .35)}.bg-foreground\\/40{background-color:hsl(var(--foreground) / .4)}.bg-foreground\\/50{background-color:hsl(var(--foreground) / .5)}.bg-foreground\\/60{background-color:hsl(var(--foreground) / .6)}.bg-foreground\\/65{background-color:hsl(var(--foreground) / .65)}.bg-foreground\\/75{background-color:hsl(var(--foreground) / .75)}.bg-neutral\\/50{background-color:hsl(var(--neutral) / .5)}.bg-primary{background-color:hsl(var(--primary))}.bg-primary-foreground{background-color:hsl(var(--primary-foreground))}.bg-primary\\/50{background-color:hsl(var(--primary) / .5)}.bg-transparent{background-color:transparent}.bg-gradient-to-t{background-image:linear-gradient(to top,var(--tw-gradient-stops))}.from-foreground{--tw-gradient-from: hsl(var(--foreground)) var(--tw-gradient-from-position);--tw-gradient-to: hsl(var(--foreground) / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.to-transparent{--tw-gradient-to: transparent var(--tw-gradient-to-position)}.object-cover{-o-object-fit:cover;object-fit:cover}.p-0\\.5{padding:.125rem}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-4{padding:1rem}.px-1\\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.py-0\\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.pl-6{padding-left:1.5rem}.pr-12{padding-right:3rem}.pr-4{padding-right:1rem}.pt-8{padding-top:2rem}.text-2xl{font-size:1.5rem;line-height:2rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-semibold{font-weight:600}.text-background{color:hsl(var(--background))}.text-background\\/75{color:hsl(var(--background) / .75)}.text-foreground{color:hsl(var(--foreground))}.text-foreground\\/65{color:hsl(var(--foreground) / .65)}.text-foreground\\/70{color:hsl(var(--foreground) / .7)}.text-neutral-foreground{color:hsl(var(--neutral-foreground))}.text-primary{color:hsl(var(--primary))}.text-primary-foreground{color:hsl(var(--primary-foreground))}.text-primary-light{color:hsl(var(--primary-light))}.opacity-0{opacity:0}.opacity-100{opacity:1}.shadow{--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-\\[width\\]{transition-property:width;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-radius{transition-property:border-radius;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.duration-details{transition-duration:.35s}.no-scrollbar{scrollbar-width:none;-ms-overflow-style:none}.no-scrollbar::-webkit-scrollbar{display:none}.\\[mask-image\\:linear-gradient\\(to_left\\,transparent_0px\\,black_4px\\,black_calc\\(100\\%-4px\\)\\,transparent_100\\%\\)\\]{-webkit-mask-image:linear-gradient(to left,transparent 0px,black 4px,black calc(100% - 4px),transparent 100%);mask-image:linear-gradient(to left,transparent 0px,black 4px,black calc(100% - 4px),transparent 100%)}.\\*\\:pointer-events-auto>*{pointer-events:auto}.\\*\\:size-full>*{width:100%;height:100%}.\\*\\:snap-start>*{scroll-snap-align:start}.\\*\\:snap-always>*{scroll-snap-stop:always}.\\*\\:object-cover>*{-o-object-fit:cover;object-fit:cover}.after\\:absolute:after{content:var(--tw-content);position:absolute}.after\\:inset-0:after{content:var(--tw-content);inset:0}.after\\:rounded-gallery:after{content:var(--tw-content);border-radius:var(--radius-gallery)}.after\\:border-2:after{content:var(--tw-content);border-width:2px}.after\\:border-primary:after{content:var(--tw-content);border-color:hsl(var(--primary))}.after\\:opacity-0:after{content:var(--tw-content);opacity:0}.after\\:opacity-100:after{content:var(--tw-content);opacity:1}.after\\:transition-all:after{content:var(--tw-content);transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.hover\\:z-hotspot-hover:hover{z-index:11}.hover\\:bg-foreground\\/25:hover{background-color:hsl(var(--foreground) / .25)}.hover\\:bg-primary\\/25:hover{background-color:hsl(var(--primary) / .25)}.hover\\:bg-primary\\/30:hover{background-color:hsl(var(--primary) / .3)}.hover\\:opacity-80:hover{opacity:.8}.hover\\:after\\:opacity-70:hover:after{content:var(--tw-content);opacity:.7}.disabled\\:opacity-60:disabled{opacity:.6}.group:hover .group-hover\\:pointer-events-auto{pointer-events:auto}.group\\/volume:hover .group-hover\\/volume\\:opacity-100{opacity:1}.group\\/volume:hover .group-hover\\/volume\\:opacity-50{opacity:.5}.group:hover .group-hover\\:opacity-100{opacity:1}@media ((orientation: portrait) and (max-width: 767px)) or ((orientation: landscape) and (max-width: 1023px)){.max-small\\:hidden{display:none}}@media ((orientation: portrait) and (min-width: 768px)) or ((orientation: landscape) and (min-width: 1024px)){.small\\:inset-x-2{left:.5rem;right:.5rem}.small\\:inset-y-2{top:.5rem;bottom:.5rem}.small\\:bottom-2{bottom:.5rem}.small\\:left-2{left:.5rem}.small\\:right-2{right:.5rem}.small\\:right-4{right:1rem}.small\\:top-2{top:.5rem}.small\\:top-4{top:1rem}.small\\:my-4{margin-top:1rem;margin-bottom:1rem}.small\\:hidden{display:none}.small\\:h-12{height:3rem}.small\\:h-28{height:7rem}.small\\:max-w-48{max-width:12rem}.small\\:gap-2{gap:.5rem}.small\\:gap-x-2{-moz-column-gap:.5rem;column-gap:.5rem}.small\\:gap-y-2{row-gap:.5rem}.small\\:gap-y-4{row-gap:1rem}.small\\:space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.25rem * var(--tw-space-x-reverse));margin-left:calc(.25rem * calc(1 - var(--tw-space-x-reverse)))}.small\\:p-3{padding:.75rem}.small\\:px-2{padding-left:.5rem;padding-right:.5rem}.small\\:py-1{padding-top:.25rem;padding-bottom:.25rem}.small\\:pl-8{padding-left:2rem}.small\\:pr-6{padding-right:1.5rem}.small\\:text-base{font-size:1rem;line-height:1.5rem}.small\\:text-sm{font-size:.875rem;line-height:1.25rem}.small\\:font-bold{font-weight:700}}@media (min-width: 1280px){.large\\:h-20{height:5rem}.large\\:h-3\\/5{height:60%}.large\\:max-w-56{max-width:14rem}.large\\:gap-4{gap:1rem}.large\\:p-2{padding:.5rem}.large\\:p-4{padding:1rem}.large\\:text-base{font-size:1rem;line-height:1.5rem}.large\\:text-lg{font-size:1.125rem;line-height:1.75rem}}';
2773
- function Wr(e) {
2774
- return e.replace(
2775
- /([a-z0-9])([A-Z])/g,
2776
- (r, n, o) => `${n}-${o.toLowerCase()}`
2777
- );
2778
- }
2779
- function Ae(e) {
2780
- return Object.entries(e).reduce((r, [n, o]) => {
2781
- if (o !== void 0) {
2782
- const a = Wr(n);
2783
- r[a] = o.toString();
2784
- }
2785
- return r;
2786
- }, {});
2787
- }
2788
- const Br = (e) => /* @__PURE__ */ R(ie, { children: [
2789
- /* @__PURE__ */ t("style", { children: Ar }),
2790
- /* @__PURE__ */ t(Pr, { ...e })
2791
- ] }), Or = (e) => Ae(e), Xr = (e) => Ae(e), Zr = (e) => Ae(e), qr = ({
2792
- onCompositionLoading: e,
2793
- onCompositionLoaded: r,
2794
- onCompositionLoadError: n,
2795
- onItemChange: o,
2796
- onExtendModeOn: a,
2797
- onExtendModeOff: u,
2798
- onHotspotsOn: h,
2799
- onHotspotsOff: p,
2800
- onGalleryOpen: L,
2801
- onGalleryClose: I,
2802
- className: f,
2803
- style: C = {},
2804
- children: H,
2805
- ...S
2806
- }) => {
2807
- const s = re(() => {
2808
- const m = Or(S);
2809
- return f && Object.assign(m, { class: f }), m;
2810
- }, [f, S]);
2811
- return W(() => {
2812
- const m = S.eventPrefix ?? ot, w = (l) => `${m}${l}`, y = {
2813
- [Ge]: e,
2814
- [Be]: r,
2815
- [qe]: n,
2816
- [Ke]: o,
2817
- [Je]: a,
2818
- [Qe]: u,
2819
- [et]: h,
2820
- [tt]: p,
2821
- [rt]: L,
2822
- [nt]: I
2823
- }, v = /* @__PURE__ */ new Map();
2824
- return Object.entries(y).forEach(([l, i]) => {
2825
- if (!i)
2826
- return;
2827
- const g = w(l), b = (k) => i(k.detail);
2828
- v.set(g, b), document.addEventListener(g, b);
2829
- }), () => {
2830
- v.forEach((l, i) => {
2831
- document.removeEventListener(i, l);
2832
- });
2833
- };
2834
- }, [
2835
- S.eventPrefix,
2836
- e,
2837
- r,
2838
- n,
2839
- o,
2840
- a,
2841
- u,
2842
- h,
2843
- p,
2844
- L,
2845
- I
2846
- ]), /* @__PURE__ */ t("cc-webplayer", { style: { display: "block", ...C }, ...s, children: H });
2847
- }, Kr = ({ children: e, ...r }) => {
2848
- const n = Xr(r);
2849
- return /* @__PURE__ */ t("cc-webplayer-custom-media", { ...n, children: e });
2850
- }, Jr = ({
2851
- children: e,
2852
- ...r
2853
- }) => {
2854
- const n = Zr(r);
2855
- return /* @__PURE__ */ t("cc-webplayer-icon", { ...n, children: e });
2856
- };
2857
- export {
2858
- ot as D,
2859
- Ge as E,
2860
- Br as W,
2861
- Ur as a,
2862
- Gr as b,
2863
- $r as c,
2864
- Pe as d,
2865
- $e as e,
2866
- Ue as f,
2867
- qr as g,
2868
- Kr as h,
2869
- Jr as i,
2870
- Be as j,
2871
- qe as k,
2872
- Ke as l,
2873
- Je as m,
2874
- Qe as n,
2875
- et as o,
2876
- tt as p,
2877
- rt as q,
2878
- nt as r,
2879
- jr as s
2880
- };