@car-cutter/next-webplayer 0.7.0 → 0.9.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,2812 +0,0 @@
1
- import { D as jt, a as Ct, b as kt, c as Et, d as Nt, e as Lt, f as zt, g as _t, W as Pe, E as It, h as Mt, i as Tt, j as Ze, k as Vt, l as St, m as Ht, n as Ot, o as Rt, p as Dt, q as Pt, r as Zt } from "./index-DYx3WCW7.js";
2
- import Le, { createContext as ze, useContext as _e, useRef as W, useState as F, useCallback as I, useEffect as Z, useMemo as te, Fragment as At } from "react";
3
- import { createRoot as Ft } from "react-dom/client";
4
- var Je = { exports: {} }, fe = {};
5
- /**
6
- * @license React
7
- * react-jsx-runtime.production.min.js
8
- *
9
- * Copyright (c) Facebook, Inc. and its affiliates.
10
- *
11
- * This source code is licensed under the MIT license found in the
12
- * LICENSE file in the root directory of this source tree.
13
- */
14
- var $e;
15
- function Wt() {
16
- if ($e) return fe;
17
- $e = 1;
18
- var e = Le, r = Symbol.for("react.element"), n = Symbol.for("react.fragment"), o = Object.prototype.hasOwnProperty, s = e.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, p = { key: !0, ref: !0, __self: !0, __source: !0 };
19
- function c(i, d, y) {
20
- var x, l = {}, w = null, M = null;
21
- y !== void 0 && (w = "" + y), d.key !== void 0 && (w = "" + d.key), d.ref !== void 0 && (M = d.ref);
22
- for (x in d) o.call(d, x) && !p.hasOwnProperty(x) && (l[x] = d[x]);
23
- if (i && i.defaultProps) for (x in d = i.defaultProps, d) l[x] === void 0 && (l[x] = d[x]);
24
- return { $$typeof: r, type: i, key: w, ref: M, props: l, _owner: s.current };
25
- }
26
- return fe.Fragment = n, fe.jsx = c, fe.jsxs = c, fe;
27
- }
28
- Je.exports = Wt();
29
- var t = Je.exports;
30
- async function Yt(e) {
31
- const r = await fetch(e);
32
- if (!r.ok)
33
- throw new Error(`Failed to fetch composition: ${r.statusText}`);
34
- return await r.json();
35
- }
36
- const Oe = /* @__PURE__ */ new Map(), $t = (e) => {
37
- const [r, n] = F({
38
- status: "pending",
39
- isSuccess: !1
40
- });
41
- return Z(() => {
42
- const o = (p) => n({ status: "success", data: p, isSuccess: !0 }), s = Oe.get(e);
43
- if (s && !(s instanceof Promise)) {
44
- o(s);
45
- return;
46
- }
47
- n({
48
- status: "fetching",
49
- isSuccess: !1
50
- }), async function() {
51
- try {
52
- let p;
53
- if (s)
54
- p = await s;
55
- else {
56
- const c = Yt(e);
57
- Oe.set(e, c), p = await c, Oe.set(e, p);
58
- }
59
- o(p);
60
- } catch (p) {
61
- n({
62
- status: "error",
63
- isSuccess: !1,
64
- error: p
65
- });
66
- }
67
- }();
68
- }, [e]), r;
69
- }, Qe = ze(null), re = () => {
70
- const e = _e(Qe);
71
- if (!e)
72
- throw new Error(
73
- "useCompositionContext must be used within a CompositionContextProvider"
74
- );
75
- return e;
76
- }, Ut = ({ composition: e, children: r }) => {
77
- const { aspectRatio: n, categories: o } = e, s = te(
78
- () => o.flatMap(({ items: c }) => c),
79
- [o]
80
- ), p = {
81
- aspectRatio: n.replace(":", " / ")
82
- };
83
- return /* @__PURE__ */ t.jsx(
84
- Qe.Provider,
85
- {
86
- value: {
87
- ...e,
88
- items: s,
89
- aspectRatioStyle: p
90
- },
91
- children: r
92
- }
93
- );
94
- }, et = 500, De = 0.75, Ne = 1 + De * 2;
95
- function ae(e, r, n) {
96
- return Math.min(Math.max(e, r), n);
97
- }
98
- const Ee = (e, r, n) => e + (r - e) * n, Ue = (e, r) => (e % r + r) % r, tt = ze(null), J = () => {
99
- const e = _e(tt);
100
- if (!e)
101
- throw new Error(
102
- "useGlobalContext must be used within a GlobalContextProvider"
103
- );
104
- return e;
105
- }, Xt = ({ children: e, ...r }) => /* @__PURE__ */ t.jsx(tt.Provider, { value: r, children: e }), rt = ze(null), q = () => {
106
- const e = _e(rt);
107
- if (!e)
108
- throw new Error(
109
- "useControlsContext must be used within a ControlsContextProvider"
110
- );
111
- return e;
112
- }, Gt = ({
113
- children: e
114
- }) => {
115
- const {
116
- infiniteCarrousel: r,
117
- preventFullScreen: n,
118
- emitEvent: o,
119
- isFullScreen: s,
120
- requestFullscreen: p,
121
- exitFullscreen: c
122
- } = J(), { categories: i, items: d } = re(), [y, x] = F(d.map(() => null)), l = I(
123
- (P, Q) => {
124
- x(
125
- (ge) => ge.map((oe, yt) => yt === P ? Q : oe)
126
- );
127
- },
128
- []
129
- ), [w, M] = F(0), [v, j] = F(null), z = v ?? w, g = d[z], V = y[z], [h, u] = F(
130
- null
131
- ), m = !!h, f = I(() => u(null), []), L = I(() => {
132
- if (m || v !== null)
133
- return;
134
- const P = w - 1;
135
- P >= 0 ? j(P) : r && (u("first_to_last"), j(d.length - 1));
136
- }, [
137
- m,
138
- v,
139
- w,
140
- r,
141
- d.length
142
- ]), O = I(() => {
143
- if (m || v !== null)
144
- return;
145
- const P = w + 1;
146
- P < d.length ? j(P) : r && (u("last_to_first"), j(0));
147
- }, [
148
- m,
149
- v,
150
- w,
151
- d.length,
152
- r
153
- ]), S = I(
154
- (P) => {
155
- const Q = Math.min(w, P), ge = Math.max(w, P);
156
- y.slice(Q, ge + 1).filter((oe) => oe === null).length > 2 && u("instant"), j(P);
157
- },
158
- [w, y]
159
- );
160
- Z(() => {
161
- o(Vt, {
162
- index: z,
163
- item: g
164
- });
165
- }, [g, o, z]);
166
- const b = te(() => {
167
- for (const P of i)
168
- if (P.items.includes(g))
169
- return P.id;
170
- throw new Error("Current item not found in any category");
171
- }, [i, g]), E = I(
172
- (P) => {
173
- const Q = i.find(({ id: oe }) => oe === P)?.items[0];
174
- if (Q === void 0)
175
- throw new Error("Failed to find target category");
176
- const ge = d.findIndex((oe) => oe === Q);
177
- S(ge);
178
- },
179
- [i, d, S]
180
- ), _ = te(() => {
181
- switch (g.type) {
182
- case "image":
183
- return !!g.hotspots?.length;
184
- case "360":
185
- return V === "running";
186
- case "video":
187
- return !1;
188
- }
189
- }, [g, V]), [T, D] = F(!0), C = I(() => {
190
- const P = !T;
191
- D(P), o(P ? St : Ht);
192
- }, [o, T]), a = te(() => {
193
- switch (g.type) {
194
- case "image":
195
- case "360":
196
- return !0;
197
- case "video":
198
- return V !== "running";
199
- }
200
- }, [g, V]), [k, N] = F(!1), R = I(() => {
201
- const P = !k;
202
- N(P), o(P ? Ot : Rt);
203
- }, [o, k]), [A, $] = F(null), Y = I(() => $(null), []), K = !!A, G = te(() => {
204
- switch (g.type) {
205
- case "image":
206
- return !0;
207
- case "360":
208
- return V === "running";
209
- case "video":
210
- return !1;
211
- }
212
- }, [g.type, V]), [X, ne] = F(1), ve = X !== 1, pe = X < Ne, be = X > 1, ie = I((P) => {
213
- ne((Q) => ae(Q + P, 1, Ne));
214
- }, []), he = I(() => ne(1), []), Ie = I(() => ie(De), [ie]), wt = I(() => ie(-De), [ie]), Me = I(() => {
215
- he(), Y();
216
- }, [he, Y]), [le, vt] = F(!1), [Te, We] = F(), [Ve, Ye] = F(!1), ce = I(
217
- async (P) => {
218
- Me(), vt(P), o(P ? Dt : Pt);
219
- },
220
- [o, Me]
221
- ), de = I(() => {
222
- clearTimeout(Te);
223
- const P = setTimeout(() => {
224
- We(void 0);
225
- }, et);
226
- We(P);
227
- }, [Te]), Se = I(async () => {
228
- if (de(), !n) {
229
- const P = await p();
230
- if (Ye(!P), P)
231
- return;
232
- }
233
- ce(!0);
234
- }, [
235
- n,
236
- ce,
237
- p,
238
- de
239
- ]), He = I(async () => {
240
- de(), !(!n && (Ye(!1), await c())) && ce(!1);
241
- }, [
242
- n,
243
- ce,
244
- c,
245
- de
246
- ]), bt = I(() => {
247
- le ? He() : Se();
248
- }, [He, Se, le]);
249
- return Z(() => {
250
- n || Ve && le || s !== le && (de(), ce(s));
251
- }, [
252
- n,
253
- ce,
254
- le,
255
- Ve,
256
- s,
257
- de
258
- ]), /* @__PURE__ */ t.jsx(
259
- rt.Provider,
260
- {
261
- value: {
262
- setItemInteraction: l,
263
- slidable: d.length > 1,
264
- carrouselItemIndex: w,
265
- setCarrouselItemIndex: M,
266
- itemIndexCommand: v,
267
- setItemIndexCommand: j,
268
- masterItemIndex: z,
269
- specialCommand: h,
270
- isRunningSpecialCommand: m,
271
- finishSpecialCommand: f,
272
- prevItem: L,
273
- nextItem: O,
274
- scrollToItemIndex: S,
275
- displayedCategoryId: b,
276
- changeCategory: E,
277
- enableHotspotsControl: _,
278
- showHotspots: T,
279
- toggleHotspots: C,
280
- showGalleryControls: a,
281
- showGallery: k,
282
- toggleGallery: R,
283
- shownDetails: A,
284
- isShowingDetails: K,
285
- setShownDetails: $,
286
- resetShownDetails: Y,
287
- showZoomControls: G,
288
- zoom: X,
289
- isZooming: ve,
290
- setZoom: ne,
291
- resetZoom: he,
292
- canZoomIn: pe,
293
- zoomIn: Ie,
294
- canZoomOut: be,
295
- zoomOut: wt,
296
- resetView: Me,
297
- extendMode: le,
298
- enableExtendMode: Se,
299
- disableExtendMode: He,
300
- toggleExtendMode: bt,
301
- extendTransition: !!Te,
302
- fakeFullScreen: Ve
303
- },
304
- children: e
305
- }
306
- );
307
- }, nt = ["left", "center", "right", "fullW"], ot = ["top", "middle", "bottom", "fullH"], Bt = [
308
- ...nt,
309
- ...ot,
310
- "top-left",
311
- "top-center",
312
- "top-right",
313
- "top-fullW",
314
- "middle-left",
315
- "middle-center",
316
- "middle-right",
317
- "middle-fullW",
318
- "bottom-left",
319
- "bottom-center",
320
- "bottom-right",
321
- "bottom-fullW",
322
- "fullH-left",
323
- "fullH-center",
324
- "fullH-right",
325
- "fullW-fullW"
326
- ];
327
- function qt(e) {
328
- return nt.includes(e);
329
- }
330
- function Kt(e) {
331
- return ot.includes(e);
332
- }
333
- function Jt(e) {
334
- return Bt.includes(e);
335
- }
336
- function Qt(e) {
337
- if (!Jt(e))
338
- throw new Error(`Invalid position: ${e}`);
339
- return Kt(e) ? [e, void 0] : qt(e) ? [void 0, e] : e.split("-");
340
- }
341
- function H(...e) {
342
- return e.filter((r) => !!r).map((r) => r.trim()).join(" ");
343
- }
344
- function er(e) {
345
- switch (e) {
346
- case "left":
347
- return "left-1 small:left-2";
348
- case "right":
349
- return "right-1 small:right-2";
350
- case "center":
351
- return "left-1/2 -translate-x-1/2";
352
- case "fullW":
353
- return "inset-x-1 small:inset-x-2";
354
- }
355
- }
356
- function st(e) {
357
- switch (e) {
358
- case "top":
359
- return "top-1 small:top-2";
360
- case "bottom":
361
- return "bottom-1 small:bottom-2";
362
- case "middle":
363
- return "top-1/2 -translate-y-1/2";
364
- case "fullH":
365
- return "inset-y-1 small:inset-y-2";
366
- }
367
- }
368
- function tr({
369
- positionX: e,
370
- positionY: r
371
- }) {
372
- const n = new Array();
373
- return e && n.push(er(e)), r && n.push(st(r)), n.join(" ");
374
- }
375
- function ue(e) {
376
- const [r, n] = Qt(e);
377
- return tr({ positionX: n, positionY: r });
378
- }
379
- const at = ze(null), it = () => _e(at), Ae = () => {
380
- const e = it();
381
- if (!e)
382
- throw new Error(
383
- "useCustomizationContext must be used within a CustomizationContextProvider"
384
- );
385
- return e;
386
- }, rr = ({ children: e }) => {
387
- const [r, n] = F(
388
- /* @__PURE__ */ new Map()
389
- ), o = I(
390
- (c) => {
391
- const i = r.get(c);
392
- if (i)
393
- return i;
394
- const d = document.querySelector(
395
- `${Pe}[name="${c}"]`
396
- );
397
- if (!d)
398
- return;
399
- const y = d.getAttribute("color") ?? void 0, x = d.innerHTML, l = x ? /* @__PURE__ */ t.jsx(
400
- "div",
401
- {
402
- className: "size-full",
403
- dangerouslySetInnerHTML: { __html: x }
404
- }
405
- ) : void 0;
406
- if (!(!y && !l))
407
- return { Icon: l, color: y };
408
- },
409
- [r]
410
- ), s = I(
411
- (c, i) => {
412
- n((d) => new Map(d.set(c, i)));
413
- },
414
- []
415
- ), p = I((c) => {
416
- n((i) => (i.delete(c), new Map(i)));
417
- }, []);
418
- return /* @__PURE__ */ t.jsx(
419
- at.Provider,
420
- {
421
- value: {
422
- getIconConfig: o,
423
- setIconConfig: s,
424
- resetIconConfig: p
425
- },
426
- children: e
427
- }
428
- );
429
- }, U = ({
430
- customizationKey: e,
431
- className: r = "",
432
- children: n
433
- }) => {
434
- const { getIconConfig: o } = Ae(), s = o(e);
435
- return s ? /* @__PURE__ */ t.jsx(
436
- "div",
437
- {
438
- className: r,
439
- style: { color: s?.color },
440
- children: s?.Icon ?? n
441
- }
442
- ) : n;
443
- }, nr = ({ className: e }) => /* @__PURE__ */ t.jsx(U, { className: e, customizationKey: "UI_CLOSE", children: /* @__PURE__ */ t.jsx(
444
- "svg",
445
- {
446
- className: e,
447
- width: "24",
448
- height: "24",
449
- viewBox: "0 0 24 24",
450
- fill: "none",
451
- xmlns: "http://www.w3.org/2000/svg",
452
- children: /* @__PURE__ */ t.jsx(
453
- "path",
454
- {
455
- 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",
456
- fill: "currentColor"
457
- }
458
- )
459
- }
460
- ) }), or = {
461
- fill: {
462
- primary: "bg-primary text-primary-foreground hover:opacity-80",
463
- neutral: "bg-background text-neutral-foreground hover:opacity-80"
464
- },
465
- ghost: {
466
- primary: "bg-transparent text-foreground hover:bg-primary/25",
467
- neutral: "bg-transparent text-background hover:bg-foreground/25"
468
- }
469
- }, sr = {
470
- button: "h-8 px-2",
471
- icon: "size-8 p-2"
472
- }, B = ({
473
- variant: e = "fill",
474
- shape: r = "button",
475
- color: n = "primary",
476
- className: o,
477
- children: s,
478
- ...p
479
- }) => {
480
- const c = or[e][n], i = sr[r];
481
- return /* @__PURE__ */ t.jsx(
482
- "button",
483
- {
484
- className: H(
485
- "flex items-center justify-center rounded-ui text-sm transition-all disabled:opacity-60",
486
- c,
487
- i,
488
- o
489
- ),
490
- ...p,
491
- children: s
492
- }
493
- );
494
- }, lt = (e) => /* @__PURE__ */ t.jsx(B, { color: "neutral", shape: "icon", ...e, children: /* @__PURE__ */ t.jsx(nr, { className: "size-full" }) }), ct = ({ text: e, className: r }) => /* @__PURE__ */ t.jsxs(
495
- "div",
496
- {
497
- className: H(
498
- "flex size-full flex-col items-center justify-center gap-y-4",
499
- r
500
- ),
501
- children: [
502
- /* @__PURE__ */ t.jsx(
503
- "img",
504
- {
505
- className: "h-20 small:h-28",
506
- src: "https://cdn.car-cutter.com/libs/web-player/v3/assets/car_placeholder.png"
507
- }
508
- ),
509
- /* @__PURE__ */ t.jsx("div", { className: "text-2xl font-bold", children: e })
510
- ]
511
- }
512
- ), ar = {
513
- primary: "border-primary",
514
- foreground: "border-foreground",
515
- background: "border-background"
516
- }, ir = {
517
- sm: "size-4 border",
518
- md: "size-8 border-2",
519
- lg: "size-12 border-4"
520
- }, dt = ({
521
- color: e = "foreground",
522
- size: r = "md"
523
- }) => {
524
- const n = ar[e], o = ir[r];
525
- return /* @__PURE__ */ t.jsx(
526
- "div",
527
- {
528
- className: H(
529
- "inline-block animate-rotation rounded-full border-b-transparent",
530
- o,
531
- n
532
- )
533
- }
534
- );
535
- }, me = ({
536
- src: e,
537
- className: r,
538
- onLoad: n,
539
- imgInPlayerWidthRatio: o = 1,
540
- onlyThumbnail: s,
541
- fadeIn: p,
542
- ...c
543
- }) => {
544
- const {
545
- minMediaWidth: i,
546
- maxMediaWidth: d,
547
- mediaLoadStrategy: y,
548
- playerInViewportWidthRatio: x
549
- } = J(), { imageHdWidth: l, imageSubWidths: w } = re(), [M, v] = te(() => {
550
- const g = w.concat(l).sort((u, m) => u - m).filter((u) => !(i && u < i || d && u > d));
551
- if (g.length === 0)
552
- throw new Error("No image widths available for the given constraints");
553
- const V = g.map((u) => `${u !== l ? Zt(e, u) : e} ${u}w`);
554
- let h;
555
- if (s)
556
- h = [`${g.shift()}px`];
557
- else {
558
- const u = 1 / (o * x);
559
- switch (y) {
560
- case "quality": {
561
- const m = g.pop();
562
- h = g.map(
563
- (f) => `(max-width: ${u * f}px) ${f}px`
564
- ), h.push(`${m}px`);
565
- break;
566
- }
567
- case "speed": {
568
- const m = g.shift();
569
- h = g.reverse().map(
570
- (f) => `(min-width: ${u * f}px) ${f}px`
571
- ), h.push(`${m}px`);
572
- break;
573
- }
574
- case "balanced": {
575
- h = [];
576
- for (let m = 0; m < g.length - 1; m++) {
577
- const f = g[m], L = g[m + 1], O = (f + L) / 2;
578
- h.push(
579
- `(max-width: ${u * O}px) ${f}px`
580
- );
581
- }
582
- h.push(`${g[g.length - 1]}px`);
583
- break;
584
- }
585
- }
586
- }
587
- return [V.join(", "), h.join(", ")];
588
- }, [
589
- l,
590
- y,
591
- w,
592
- o,
593
- d,
594
- i,
595
- s,
596
- x,
597
- e
598
- ]), [j, z] = F();
599
- return Z(() => {
600
- if (j === !0)
601
- return;
602
- const g = setTimeout(() => {
603
- z((V) => V ?? !1);
604
- }, 30);
605
- return () => clearTimeout(g);
606
- }, [j]), /* @__PURE__ */ t.jsx(
607
- "img",
608
- {
609
- src: e,
610
- srcSet: M,
611
- sizes: v,
612
- className: H(
613
- r,
614
- p && H(
615
- j !== void 0 && "transition-opacity duration-200",
616
- j === !1 && "opacity-0",
617
- j === !0 && "opacity-100"
618
- )
619
- ),
620
- onLoad: (g) => {
621
- z(!0), n?.(g);
622
- },
623
- ...c
624
- }
625
- );
626
- }, Fe = ({ className: e }) => /* @__PURE__ */ t.jsx(U, { className: e, customizationKey: "UI_PLAY", children: /* @__PURE__ */ t.jsx(
627
- "svg",
628
- {
629
- className: e,
630
- viewBox: "0 0 24 24",
631
- fill: "none",
632
- stroke: "currentColor",
633
- strokeWidth: "1.5",
634
- strokeLinecap: "round",
635
- strokeLinejoin: "round",
636
- children: /* @__PURE__ */ t.jsx("polygon", { points: "6 3 20 12 6 21 6 3" })
637
- }
638
- ) }), ut = ({ className: e }) => /* @__PURE__ */ t.jsx(U, { className: e, customizationKey: "UI_360", children: /* @__PURE__ */ t.jsxs(
639
- "svg",
640
- {
641
- className: e,
642
- viewBox: "0 0 56 56",
643
- fill: "none",
644
- xmlns: "http://www.w3.org/2000/svg",
645
- children: [
646
- /* @__PURE__ */ t.jsxs("g", { clipPath: "url(#clip0_134_843)", children: [
647
- /* @__PURE__ */ t.jsx(
648
- "path",
649
- {
650
- 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",
651
- fill: "currentColor"
652
- }
653
- ),
654
- /* @__PURE__ */ t.jsx(
655
- "path",
656
- {
657
- 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",
658
- fill: "currentColor"
659
- }
660
- ),
661
- /* @__PURE__ */ t.jsx(
662
- "path",
663
- {
664
- 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",
665
- fill: "white"
666
- }
667
- ),
668
- /* @__PURE__ */ t.jsx(
669
- "path",
670
- {
671
- 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",
672
- fill: "white"
673
- }
674
- ),
675
- /* @__PURE__ */ t.jsx(
676
- "path",
677
- {
678
- 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",
679
- fill: "white"
680
- }
681
- ),
682
- /* @__PURE__ */ t.jsx(
683
- "path",
684
- {
685
- 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",
686
- fill: "white"
687
- }
688
- )
689
- ] }),
690
- /* @__PURE__ */ t.jsx("defs", { children: /* @__PURE__ */ t.jsx("clipPath", { id: "clip0_134_843", children: /* @__PURE__ */ t.jsx("rect", { width: "56", height: "56", fill: "white" }) }) })
691
- ]
692
- }
693
- ) }), Xe = ({
694
- children: e
695
- }) => {
696
- const { extendMode: r } = q();
697
- return /* @__PURE__ */ t.jsx(
698
- "div",
699
- {
700
- className: H(
701
- "flex aspect-square h-3/4 items-center justify-center rounded-full bg-foreground/50 p-1",
702
- r && "large:h-3/5 large:p-2"
703
- ),
704
- children: e
705
- }
706
- );
707
- }, lr = ({ item: e }) => {
708
- const { permanentGallery: r } = J(), { aspectRatioStyle: n } = re(), { type: o } = e;
709
- let s;
710
- switch (o) {
711
- case "360":
712
- s = e.images[0].src;
713
- break;
714
- case "image":
715
- s = e.src;
716
- break;
717
- case "video":
718
- s = e.poster;
719
- break;
720
- }
721
- const p = /* @__PURE__ */ t.jsx(
722
- me,
723
- {
724
- className: "size-full object-cover",
725
- src: s,
726
- onlyThumbnail: !0,
727
- fadeIn: !r
728
- }
729
- );
730
- let c;
731
- switch (o) {
732
- case "360":
733
- c = /* @__PURE__ */ t.jsx(Xe, { children: /* @__PURE__ */ t.jsx(ut, { className: "size-full text-primary-light" }) });
734
- break;
735
- case "video":
736
- c = /* @__PURE__ */ t.jsx(Xe, { children: /* @__PURE__ */ t.jsx(Fe, { className: "size-full p-0.5 text-background" }) });
737
- break;
738
- }
739
- return /* @__PURE__ */ t.jsxs("div", { className: "relative bg-foreground/30", style: n, children: [
740
- p,
741
- c && /* @__PURE__ */ t.jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-foreground/25", children: c })
742
- ] });
743
- }, cr = {
744
- primary: "bg-primary/50",
745
- neutral: "bg-neutral/50",
746
- background: "bg-background/50",
747
- foreground: "bg-foreground/50"
748
- }, mt = ({
749
- color: e = "neutral",
750
- orientation: r = "horizontal"
751
- }) => {
752
- const n = cr[e], o = r === "horizontal" ? "h-px w-full" : "w-px h-full";
753
- return /* @__PURE__ */ t.jsx("div", { className: H(n, o) });
754
- }, pt = ({
755
- className: e = "",
756
- containerClassName: r = ""
757
- }) => {
758
- const { hideCategories: n, infiniteCarrousel: o, permanentGallery: s, isFullScreen: p } = J(), { categories: c, items: i, aspectRatioStyle: d } = re(), {
759
- extendMode: y,
760
- extendTransition: x,
761
- masterItemIndex: l,
762
- prevItem: w,
763
- nextItem: M,
764
- scrollToItemIndex: v,
765
- resetView: j
766
- } = q(), z = te(() => {
767
- if (n)
768
- return [];
769
- const b = new Array();
770
- let E = 0;
771
- for (let _ = 0; _ < c.length - 1; _++) {
772
- const T = c[_].items.length;
773
- b.push(E + T), E += T;
774
- }
775
- return b;
776
- }, [c, n]), g = W(null), V = I(() => {
777
- if (!g.current)
778
- throw new Error("slider.current is null");
779
- return g.current;
780
- }, []), h = W(!1), u = W(
781
- null
782
- ), [m, f] = F(!1), L = I(
783
- (b, E) => {
784
- const _ = V(), T = _.clientWidth, D = _.scrollWidth / i.length, C = (b + 1 / 2) * D - T / 2, a = _.scrollWidth - _.clientWidth;
785
- _.scrollTo({
786
- left: ae(C, 0, a),
787
- behavior: E
788
- });
789
- },
790
- [i.length, V]
791
- );
792
- Z(() => {
793
- const b = g.current;
794
- if (!b)
795
- return;
796
- const E = (D) => {
797
- D.preventDefault(), h.current = !0, u.current = {
798
- x: D.pageX - b.offsetLeft,
799
- scrollLeft: b.scrollLeft
800
- };
801
- }, _ = (D) => {
802
- if (!h.current)
803
- return;
804
- if (u.current === null)
805
- throw new Error("[onMouseMove] scrollStart is null");
806
- const C = D.pageX - b.offsetLeft - u.current.x;
807
- if (!m && Math.abs(C) < 5)
808
- return;
809
- const a = u.current.scrollLeft - C;
810
- f(!0), requestAnimationFrame(() => {
811
- b.scrollLeft = a;
812
- });
813
- }, T = () => {
814
- h.current && (h.current = !1, requestAnimationFrame(() => {
815
- f(!1);
816
- }));
817
- };
818
- return b.addEventListener("mousedown", E), document.addEventListener("mousemove", _), document.addEventListener("mouseleave", T), document.addEventListener("mouseup", T), document.addEventListener("contextmenu", T), () => {
819
- b.removeEventListener("mousedown", E), document.removeEventListener("mousemove", _), document.removeEventListener("mouseleave", T), document.removeEventListener("mouseup", T), document.removeEventListener("contextmenu", T);
820
- };
821
- }, [m]);
822
- const O = W(l);
823
- Z(() => {
824
- g.current && (L(l, "smooth"), O.current = l);
825
- }, [l, L]), Z(() => {
826
- g.current && L(O.current, "instant");
827
- }, [
828
- L,
829
- // - Run the effect when those values change
830
- p,
831
- y,
832
- x
833
- ]);
834
- const S = (b, E) => {
835
- m || (o && E === i.length - 1 && l === 0 ? w() : o && E === 0 && l === i.length - 1 ? M() : v(E), j());
836
- };
837
- return /* @__PURE__ */ t.jsx(
838
- "div",
839
- {
840
- ref: g,
841
- className: H(
842
- "relative w-full overflow-x-auto no-scrollbar",
843
- m ? "cursor-grab" : "cursor-grabbing",
844
- e
845
- ),
846
- children: /* @__PURE__ */ t.jsx(
847
- "div",
848
- {
849
- className: H(
850
- "flex h-10 w-fit gap-1 small:h-12 small:gap-2",
851
- y && "large:h-20 large:gap-4",
852
- r
853
- ),
854
- children: i.map((b, E) => /* @__PURE__ */ t.jsxs(At, { children: [
855
- z.includes(E) && /* @__PURE__ */ t.jsx("div", { className: "my-2", children: /* @__PURE__ */ t.jsx(
856
- mt,
857
- {
858
- color: s && !p ? "neutral" : "background",
859
- orientation: "vertical"
860
- }
861
- ) }),
862
- /* @__PURE__ */ t.jsx(
863
- "div",
864
- {
865
- className: H(
866
- "relative h-full overflow-hidden rounded-gallery transition-radius",
867
- !m && "cursor-pointer",
868
- "after:absolute after:inset-0 after:rounded-gallery after:border-2 after:border-primary after:transition-all",
869
- E === l ? "after:opacity-100" : "after:opacity-0 hover:after:opacity-70"
870
- ),
871
- style: d,
872
- onClick: () => S(b, E),
873
- children: /* @__PURE__ */ t.jsx(lr, { item: b })
874
- }
875
- )
876
- ] }, E))
877
- }
878
- )
879
- }
880
- );
881
- }, ht = (e) => 1 - Math.pow(1 - e, 2), Ge = (e, r) => Math.sqrt(
882
- (e.clientX - r.clientX) ** 2 + (e.clientY - r.clientY) ** 2
883
- ), dr = ({
884
- onlyPreload: e,
885
- ...r
886
- }) => {
887
- const { zoom: n, isZooming: o, setZoom: s } = q(), p = W(null), c = W(null), i = I((h) => {
888
- if (!c.current)
889
- throw new Error(
890
- `[${h ?? "getTransformElementOrThrow"}] transformElementRef.current is null`
891
- );
892
- return c.current;
893
- }, []), d = W(!1), y = W(null), x = W(/* @__PURE__ */ new Map()), l = W({ x: 0, y: 0, scale: 1 }), w = W(null), M = I(
894
- (h) => {
895
- const u = i("setTransformStyle"), {
896
- x: m,
897
- y: f,
898
- scale: L
899
- } = {
900
- ...l.current,
901
- ...h
902
- }, O = ae(L, 1, Ne), S = u.clientWidth, b = u.clientHeight, E = S * O, _ = b * O, T = ae(m, -(E - S), 0), D = ae(f, -(_ - b), 0);
903
- l.current = { x: T, y: D, scale: O }, u.style.transform = `translate(${T}px, ${D}px) scale(${O})`;
904
- },
905
- [i]
906
- ), v = I(
907
- (h, u) => {
908
- const {
909
- x: m,
910
- y: f,
911
- scale: L
912
- } = l.current, {
913
- x: O,
914
- y: S,
915
- scale: b
916
- } = {
917
- ...l.current,
918
- ...h
919
- };
920
- w.current && (cancelAnimationFrame(w.current), w.current = null);
921
- const E = () => {
922
- M({ x: O, y: S, scale: b }), s(b);
923
- }, _ = Math.abs(O - m) < 1 && Math.abs(S - f) < 1 && Math.abs(b - L) < 5e-3;
924
- if (!u || _) {
925
- E();
926
- return;
927
- }
928
- const T = (/* @__PURE__ */ new Date()).getTime(), D = () => {
929
- const C = () => {
930
- const a = (/* @__PURE__ */ new Date()).getTime() - T;
931
- if (a >= u) {
932
- E(), w.current = null;
933
- return;
934
- }
935
- const k = Math.min(a / u, 1), N = ht(k), R = Ee(m, O, N), A = Ee(f, S, N), $ = Ee(L, b, N);
936
- M({ x: R, y: A, scale: $ }), D();
937
- };
938
- w.current = requestAnimationFrame(C);
939
- };
940
- D();
941
- },
942
- [M, s]
943
- ), j = I(
944
- (h, u) => {
945
- let { x: m, y: f } = l.current;
946
- h.x && (m += h.x), h.y && (f += h.y), v(
947
- {
948
- x: m,
949
- y: f
950
- },
951
- u
952
- );
953
- },
954
- [v]
955
- ), z = I(
956
- (h, u, m) => {
957
- const f = l.current.scale, L = ae(h, 1, Ne), O = L / f, { x: S, y: b } = l.current, { x: E, y: _ } = u, T = -S + E, D = -b + _, C = T * O, a = D * O, k = C - E, N = a - _, R = -k, A = -N;
958
- v(
959
- {
960
- x: R,
961
- y: A,
962
- scale: L
963
- },
964
- m
965
- );
966
- },
967
- [v]
968
- ), g = I(
969
- (h) => {
970
- const u = i(
971
- "shiftZoomFromButton"
972
- ), m = u.clientWidth, f = u.clientHeight;
973
- z(
974
- h,
975
- {
976
- x: m / 2,
977
- y: f / 2
978
- },
979
- 200
980
- );
981
- },
982
- [i, z]
983
- ), V = I(
984
- (h, u, m) => {
985
- const { scale: f } = l.current;
986
- z(
987
- f + h,
988
- u,
989
- m
990
- );
991
- },
992
- [z]
993
- );
994
- return Z(() => {
995
- e || c.current && g(n);
996
- }, [e, g, n]), Z(() => {
997
- if (e || !o)
998
- return;
999
- const h = c.current;
1000
- if (!h)
1001
- return;
1002
- const u = (L) => {
1003
- L.preventDefault(), L.stopPropagation(), d.current = !0, y.current = {
1004
- x: L.clientX,
1005
- y: L.clientY
1006
- };
1007
- }, m = (L) => {
1008
- if (!d.current)
1009
- return;
1010
- if (!y.current)
1011
- throw new Error("mouseStartXY.current is null");
1012
- L.stopPropagation();
1013
- const O = L.clientX - y.current.x, S = L.clientY - y.current.y;
1014
- j({
1015
- x: O,
1016
- y: S
1017
- }), y.current = {
1018
- x: L.clientX,
1019
- y: L.clientY
1020
- };
1021
- }, f = () => {
1022
- d.current = !1;
1023
- };
1024
- return h.addEventListener("mousedown", u), document.addEventListener("mousemove", m), document.addEventListener("mouseleave", f), document.addEventListener("mouseup", f), document.addEventListener("contextmenu", f), () => {
1025
- h.removeEventListener("mousedown", u), document.removeEventListener("mousemove", m), document.removeEventListener("mouseleave", f), document.removeEventListener("mouseup", f), document.removeEventListener("contextmenu", f);
1026
- };
1027
- }, [o, j, e]), Z(() => {
1028
- if (e)
1029
- return;
1030
- const h = p.current;
1031
- if (!h)
1032
- return;
1033
- const u = (m) => {
1034
- const { ctrlKey: f, clientX: L, clientY: O, deltaX: S, deltaY: b } = m;
1035
- if (f) {
1036
- if (!o && b >= 0)
1037
- return;
1038
- const { left: E, top: _ } = h.getBoundingClientRect(), T = L - E, D = O - _;
1039
- V(-0.01 * b, {
1040
- x: T,
1041
- y: D
1042
- });
1043
- } else {
1044
- if (!o)
1045
- return;
1046
- j({
1047
- x: -2 * S,
1048
- y: -2 * b
1049
- });
1050
- }
1051
- m.preventDefault();
1052
- };
1053
- return h.addEventListener("wheel", u), () => {
1054
- h.removeEventListener("wheel", u);
1055
- };
1056
- }, [o, j, V, e]), Z(() => {
1057
- const h = p.current, u = c.current;
1058
- if (!h || !u)
1059
- return;
1060
- const m = x.current, f = (S) => {
1061
- for (let b = 0; b < S.changedTouches.length; b++) {
1062
- const E = S.changedTouches[b];
1063
- m.set(E.identifier, E);
1064
- }
1065
- }, L = (S) => {
1066
- for (let b = 0; b < S.changedTouches.length; b++) {
1067
- const E = S.changedTouches[b];
1068
- m.delete(E.identifier);
1069
- }
1070
- }, O = (S) => {
1071
- const b = S.touches.length;
1072
- if (b === 1) {
1073
- if (!o)
1074
- return;
1075
- S.preventDefault();
1076
- const E = S.touches[0], _ = m.get(E.identifier);
1077
- if (!_)
1078
- throw new Error("touchStart is null");
1079
- const T = E.clientX - _.clientX, D = E.clientY - _.clientY;
1080
- j({
1081
- x: T,
1082
- y: D
1083
- }), m.set(E.identifier, E);
1084
- } else if (b === 2) {
1085
- S.preventDefault();
1086
- const [E, _] = S.touches, T = m.get(E.identifier), D = m.get(_.identifier);
1087
- if (!T || !D)
1088
- throw new Error("intialTouch1 or intialTouch2 is null");
1089
- const C = Ge(
1090
- T,
1091
- D
1092
- ), a = Ge(E, _) / C, { left: k, top: N } = h.getBoundingClientRect();
1093
- V(a - 1, {
1094
- x: (E.clientX + _.clientX) / 2 - k,
1095
- y: (E.clientY + _.clientY) / 2 - N
1096
- }), m.set(E.identifier, E), m.set(_.identifier, _);
1097
- }
1098
- };
1099
- return u.addEventListener("touchstart", f), u.addEventListener("touchmove", O), u.addEventListener("touchend", L), u.addEventListener("touchcancel", L), () => {
1100
- u.removeEventListener("touchstart", f), u.removeEventListener("touchmove", O), u.removeEventListener("touchend", L), u.removeEventListener("touchcancel", L);
1101
- };
1102
- }, [o, j, V]), /* @__PURE__ */ t.jsx(
1103
- "div",
1104
- {
1105
- ref: p,
1106
- className: `relative size-full overflow-hidden ${o ? "z-zoomed-image cursor-move" : ""}`,
1107
- children: /* @__PURE__ */ t.jsx(
1108
- "div",
1109
- {
1110
- ref: c,
1111
- className: "origin-top-left",
1112
- children: /* @__PURE__ */ t.jsx(
1113
- me,
1114
- {
1115
- ...r,
1116
- imgInPlayerWidthRatio: e ? 1 : n
1117
- }
1118
- )
1119
- }
1120
- )
1121
- }
1122
- );
1123
- }, ur = ({ className: e }) => /* @__PURE__ */ t.jsx(U, { className: e, customizationKey: "UI_IMAGE", children: /* @__PURE__ */ t.jsx("svg", { className: e, viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ t.jsx(
1124
- "path",
1125
- {
1126
- 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",
1127
- fill: "currentColor"
1128
- }
1129
- ) }) }), mr = ({ hotspot: e }) => {
1130
- const { title: r, icon: n, description: o, position: s, detail: p } = e, { getIconConfig: c } = Ae(), i = n ? c(n) : void 0, { extendMode: d, setShownDetails: y } = q(), x = !!p, l = p?.type === "image", w = !!r || !!o, M = l ? /* @__PURE__ */ t.jsx(ur, { className: "size-4" }) : /* @__PURE__ */ t.jsx("div", { className: "size-1" }), v = () => {
1131
- l && y({
1132
- src: p.src,
1133
- title: r,
1134
- text: o
1135
- });
1136
- };
1137
- return /* @__PURE__ */ t.jsxs(
1138
- "div",
1139
- {
1140
- className: H(
1141
- "group absolute z-hotspot -translate-x-1/2 -translate-y-1/2 hover:z-hotspot-hover",
1142
- x ? "cursor-pointer" : "cursor-help"
1143
- ),
1144
- style: {
1145
- top: `${100 * e.position.y}%`,
1146
- left: `${100 * e.position.x}%`
1147
- },
1148
- onClick: v,
1149
- children: [
1150
- /* @__PURE__ */ t.jsxs(
1151
- "div",
1152
- {
1153
- className: "relative flex items-center justify-center rounded-full border-2 border-background bg-primary text-primary-foreground",
1154
- style: { backgroundColor: i?.color },
1155
- children: [
1156
- /* @__PURE__ */ t.jsx(
1157
- "div",
1158
- {
1159
- className: "pointer-events-none absolute -z-20 size-8 animate-hotspot-ping rounded-full border-2 border-background"
1160
- }
1161
- ),
1162
- i?.Icon ? /* @__PURE__ */ t.jsx("div", { className: "size-5", children: i.Icon }) : /* @__PURE__ */ t.jsx("div", { className: "p-1", children: M })
1163
- ]
1164
- }
1165
- ),
1166
- !l && w && /* @__PURE__ */ t.jsx(
1167
- "div",
1168
- {
1169
- className: H(
1170
- "absolute -z-10 w-max max-w-40 text-pretty rounded-ui bg-background p-2 small:max-w-48",
1171
- d && "large:max-w-56",
1172
- s.y < 0.55 ? "-top-1" : "-bottom-1",
1173
- s.x < 0.55 ? "-left-1 pl-6 small:pl-8" : "-right-1 pr-4 small:pr-6",
1174
- "pointer-events-none opacity-0 transition-opacity duration-200 group-hover:pointer-events-auto group-hover:opacity-100"
1175
- ),
1176
- children: /* @__PURE__ */ t.jsxs("div", { className: "space-y-1 text-pretty", children: [
1177
- r && /* @__PURE__ */ t.jsx("div", { className: "text-sm font-semibold small:text-base small:font-bold", children: r }),
1178
- o && /* @__PURE__ */ t.jsx("div", { className: "text-xs text-foreground/65 small:text-sm", children: o })
1179
- ] })
1180
- }
1181
- )
1182
- ]
1183
- }
1184
- );
1185
- }, pr = ({ hotspot: e }) => {
1186
- const { icon: r, detail: n } = e;
1187
- let o;
1188
- switch (r) {
1189
- case "WINDOW STICKER":
1190
- o = /* @__PURE__ */ t.jsx(
1191
- "img",
1192
- {
1193
- className: "h-10",
1194
- src: "https://cdn.car-cutter.com/libs/web-player/v2/assets/images/customers/autonation/window_sticker.png",
1195
- alt: "Window sticker"
1196
- }
1197
- );
1198
- break;
1199
- case "CARFAX":
1200
- o = /* @__PURE__ */ t.jsx(
1201
- "img",
1202
- {
1203
- className: "h-10",
1204
- src: "https://cdn.car-cutter.com/libs/web-player/v2/assets/images/customers/autonation/carfax.png",
1205
- alt: "Carfax"
1206
- }
1207
- );
1208
- break;
1209
- default:
1210
- o = /* @__PURE__ */ t.jsx(mr, { hotspot: e });
1211
- break;
1212
- }
1213
- switch (n?.type) {
1214
- case "link":
1215
- case "pdf":
1216
- return /* @__PURE__ */ t.jsx("a", { href: n.src, target: "_blank", rel: "noreferrer", children: o });
1217
- default:
1218
- return o;
1219
- }
1220
- }, gt = ({
1221
- hotspots: e,
1222
- itemIndex: r,
1223
- className: n,
1224
- onLoad: o,
1225
- ...s
1226
- }) => {
1227
- const { isShowingDetails: p, showHotspots: c, setItemInteraction: i } = q();
1228
- return /* @__PURE__ */ t.jsx("div", { className: H("relative size-full overflow-hidden", n), children: /* @__PURE__ */ t.jsxs(
1229
- "div",
1230
- {
1231
- className: H(
1232
- "size-full duration-details",
1233
- p ? "scale-105" : "scale-100"
1234
- ),
1235
- children: [
1236
- /* @__PURE__ */ t.jsx(
1237
- dr,
1238
- {
1239
- className: "size-full object-cover",
1240
- onLoad: (d) => {
1241
- r !== void 0 && i(r, "ready"), o?.(d);
1242
- },
1243
- ...s
1244
- }
1245
- ),
1246
- c && e?.map((d, y) => /* @__PURE__ */ t.jsx(pr, { hotspot: d }, y))
1247
- ]
1248
- }
1249
- ) });
1250
- }, xe = 10, hr = 15, gr = ({
1251
- images: e,
1252
- onlyPreload: r
1253
- }) => {
1254
- const { reverse360: n } = J(), { isShowingDetails: o, isZooming: s } = q(), p = s || o, c = W(null), i = W(null), [d, y] = F(0), x = e.length, l = I(() => {
1255
- y((M) => (M - 1 + x) % x);
1256
- }, [x]), w = I(() => {
1257
- y((M) => (M + 1) % x);
1258
- }, [x]);
1259
- return Z(() => {
1260
- if (p)
1261
- return;
1262
- const M = c.current, v = i.current;
1263
- if (!M || !v)
1264
- return;
1265
- let j = null, z = [], g = null;
1266
- const V = (a) => {
1267
- z.push(a), z.length > 20 && z.shift();
1268
- }, h = () => {
1269
- const a = Date.now(), k = (() => {
1270
- const $ = Date.now(), Y = z.filter(
1271
- (X) => $ - X.timestamp < 50
1272
- );
1273
- if (Y.length < 2)
1274
- return 0;
1275
- const K = Y[0], G = Y[Y.length - 1];
1276
- return (G.value - K.value) / (1e-3 * Math.max(G.timestamp - K.timestamp, 1));
1277
- })();
1278
- let N = 0, R = a;
1279
- const A = () => {
1280
- g = requestAnimationFrame(() => {
1281
- const $ = Date.now(), Y = ($ - a) / 1e3, K = Math.pow(0.05, Y), G = k * K, X = ($ - R) / 1e3;
1282
- if (N += G * X, Math.abs(G) < 5 * xe && Math.abs(N) < xe) {
1283
- g = null;
1284
- return;
1285
- }
1286
- Math.abs(N) >= xe && (N > 0 !== n ? w() : l(), N = 0), R = $, A();
1287
- });
1288
- };
1289
- A();
1290
- }, u = () => {
1291
- g && (cancelAnimationFrame(g), g = null);
1292
- }, m = (a) => {
1293
- if (a.button !== 0)
1294
- return;
1295
- a.preventDefault(), a.stopPropagation(), u();
1296
- const k = a.clientX;
1297
- j = k, z = [{ timestamp: Date.now(), value: k }];
1298
- }, f = (a) => {
1299
- if (j === null)
1300
- return;
1301
- a.stopPropagation();
1302
- const { clientX: k } = a;
1303
- V({ timestamp: Date.now(), value: k });
1304
- const N = k - j;
1305
- Math.abs(N) < xe || (N > 0 !== n ? w() : l(), j = k);
1306
- }, L = () => {
1307
- j !== null && (j = null, h());
1308
- };
1309
- M.addEventListener("mousedown", m), document.addEventListener("mousemove", f), document.addEventListener("mouseleave", L), document.addEventListener("mouseup", L), document.addEventListener("contextmenu", L);
1310
- const O = () => v.getBoundingClientRect().width, S = () => v.scrollWidth / 2 - O() / 2, b = () => {
1311
- const a = S();
1312
- v.scrollLeft = a;
1313
- };
1314
- b();
1315
- const E = () => {
1316
- const a = v.scrollLeft - S();
1317
- Math.abs(a) < hr || (a < 0 !== n ? w() : l(), b());
1318
- };
1319
- v.addEventListener("scroll", E);
1320
- let _ = null;
1321
- const T = (a) => {
1322
- if (_ !== null || a.changedTouches.length !== 1)
1323
- return;
1324
- u();
1325
- const { identifier: k, clientX: N } = a.changedTouches[0];
1326
- _ = k, j = N, z = [{ timestamp: Date.now(), value: N }];
1327
- }, D = (a) => {
1328
- if (!j)
1329
- return;
1330
- const k = Array.from(a.changedTouches).find(
1331
- ({ identifier: A }) => A === _
1332
- );
1333
- if (!k)
1334
- return;
1335
- a.preventDefault();
1336
- const { clientX: N } = k;
1337
- V({ timestamp: Date.now(), value: N });
1338
- const R = N - j;
1339
- Math.abs(R) < xe || (R > 0 !== n ? w() : l(), j = N);
1340
- }, C = (a) => {
1341
- !j || !Array.from(a.changedTouches).some(
1342
- ({ identifier: k }) => k === _
1343
- ) || (_ = null, j = null, h());
1344
- };
1345
- return v.addEventListener("touchstart", T), v.addEventListener("touchmove", D), v.addEventListener("touchend", C), v.addEventListener("touchcancel", C), () => {
1346
- M.removeEventListener("mousedown", m), document.removeEventListener("mousemove", f), document.removeEventListener("mouseleave", L), document.removeEventListener("mouseup", L), document.removeEventListener("contextmenu", L), v.removeEventListener("scroll", E), v.removeEventListener("touchstart", T), v.removeEventListener("touchmove", D), v.removeEventListener("touchend", C), v.removeEventListener("touchcancel", C);
1347
- };
1348
- }, [w, l, p, n]), /* @__PURE__ */ t.jsx("div", { ref: c, className: "cursor-ew-resize", children: /* @__PURE__ */ t.jsxs("div", { ref: i, className: "overflow-x-scroll no-scrollbar", children: [
1349
- /* @__PURE__ */ t.jsxs("div", { className: "sticky left-0 top-0", children: [
1350
- e.map((M) => /* @__PURE__ */ t.jsx(
1351
- me,
1352
- {
1353
- src: M.src,
1354
- className: "pointer-events-none !absolute left-0 top-0 -z-10"
1355
- },
1356
- M.src
1357
- )),
1358
- /* @__PURE__ */ t.jsx(gt, { ...e[d], onlyPreload: r })
1359
- ] }),
1360
- /* @__PURE__ */ t.jsx("div", { className: "pointer-events-none -mt-px h-px w-[calc(100%+1024px)]" })
1361
- ] }) });
1362
- }, fr = ({ images: e, onPlaceholderImageLoaded: r, onSpinImagesLoaded: n, onError: o }) => {
1363
- const s = te(() => e.map(({ src: x }) => x), [e]), [p, c] = F(null), i = p ? [...p.values()].filter((x) => x).length / e.length * 100 : null, d = I(() => {
1364
- i === null && c(new Map(s.map((x) => [x, !1])));
1365
- }, [s, i]), y = I((x) => {
1366
- c((l) => {
1367
- const w = new Map(l);
1368
- return w.set(x, !0), w;
1369
- });
1370
- }, []);
1371
- return Z(() => {
1372
- i === 100 && n();
1373
- }, [i, n]), /* @__PURE__ */ t.jsxs("div", { className: "relative size-full", children: [
1374
- i !== null && i !== 100 && // Add images to DOM to preload them
1375
- /* @__PURE__ */ t.jsx("div", { className: "hidden", children: s.map((x) => /* @__PURE__ */ t.jsx(
1376
- me,
1377
- {
1378
- src: x,
1379
- onLoad: () => y(x),
1380
- onError: o
1381
- },
1382
- x
1383
- )) }),
1384
- /* @__PURE__ */ t.jsx(
1385
- me,
1386
- {
1387
- className: "size-full",
1388
- src: s[0],
1389
- onLoad: r
1390
- }
1391
- ),
1392
- /* @__PURE__ */ t.jsxs("div", { className: "absolute inset-0 flex flex-col items-center justify-center gap-y-4 bg-foreground/35", children: [
1393
- /* @__PURE__ */ t.jsx(ut, { className: "size-20 text-primary-light" }),
1394
- /* @__PURE__ */ t.jsx(B, { color: "neutral", shape: "icon", onClick: d, children: /* @__PURE__ */ t.jsx(Fe, { className: "size-full" }) }),
1395
- /* @__PURE__ */ t.jsx(
1396
- "div",
1397
- {
1398
- className: H(
1399
- "relative h-1 w-3/5 overflow-hidden rounded-full bg-background",
1400
- i === null && "invisible"
1401
- ),
1402
- children: /* @__PURE__ */ t.jsx(
1403
- "div",
1404
- {
1405
- className: "h-full bg-primary transition-[width]",
1406
- style: { width: `${i ?? 0}%` }
1407
- }
1408
- )
1409
- }
1410
- )
1411
- ] })
1412
- ] });
1413
- }, xr = (e) => {
1414
- const { itemIndex: r } = e, { setItemInteraction: n } = q(), [o, s] = F();
1415
- return Z(() => {
1416
- o === null || o === "error" || n(r, o === "spin" ? "running" : "ready");
1417
- }, [r, n, o]), o === "error" ? /* @__PURE__ */ t.jsx(
1418
- ct,
1419
- {
1420
- className: "text-background",
1421
- text: "Spin could not be loaded"
1422
- }
1423
- ) : o !== "spin" ? /* @__PURE__ */ t.jsx(
1424
- fr,
1425
- {
1426
- ...e,
1427
- onPlaceholderImageLoaded: () => s("placeholder"),
1428
- onSpinImagesLoaded: () => s("spin"),
1429
- onError: () => s("error")
1430
- }
1431
- ) : /* @__PURE__ */ t.jsx(gr, { ...e });
1432
- }, wr = (e) => /* @__PURE__ */ t.jsx(B, { color: "neutral", shape: "icon", ...e, children: /* @__PURE__ */ t.jsx(Fe, { className: "size-full" }) }), vr = ({ className: e }) => /* @__PURE__ */ t.jsx(U, { className: e, customizationKey: "UI_PAUSE", children: /* @__PURE__ */ t.jsx(
1433
- "svg",
1434
- {
1435
- className: e,
1436
- width: "16",
1437
- height: "16",
1438
- viewBox: "0 0 16 16",
1439
- fill: "none",
1440
- xmlns: "http://www.w3.org/2000/svg",
1441
- children: /* @__PURE__ */ t.jsx(
1442
- "path",
1443
- {
1444
- d: "M4 12.6667H6.66667V3.33333H4V12.6667ZM9.33333 3.33333V12.6667H12V3.33333H9.33333Z",
1445
- fill: "currentColor"
1446
- }
1447
- )
1448
- }
1449
- ) }), br = ({ className: e }) => /* @__PURE__ */ t.jsx(U, { className: e, customizationKey: "UI_VOLUME", children: /* @__PURE__ */ t.jsx(
1450
- "svg",
1451
- {
1452
- className: e,
1453
- width: "16",
1454
- height: "16",
1455
- viewBox: "0 0 16 16",
1456
- fill: "none",
1457
- xmlns: "http://www.w3.org/2000/svg",
1458
- children: /* @__PURE__ */ t.jsx(
1459
- "path",
1460
- {
1461
- 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",
1462
- fill: "currentColor"
1463
- }
1464
- )
1465
- }
1466
- ) }), yr = ({ className: e }) => /* @__PURE__ */ t.jsx(U, { className: e, customizationKey: "UI_VOLUME_OFF", children: /* @__PURE__ */ t.jsx(
1467
- "svg",
1468
- {
1469
- className: e,
1470
- width: "16",
1471
- height: "16",
1472
- viewBox: "0 0 16 16",
1473
- fill: "none",
1474
- xmlns: "http://www.w3.org/2000/svg",
1475
- children: /* @__PURE__ */ t.jsx(
1476
- "path",
1477
- {
1478
- 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",
1479
- fill: "currentColor"
1480
- }
1481
- )
1482
- }
1483
- ) }), Be = ({ progress: e }) => /* @__PURE__ */ t.jsx("div", { className: "h-1 w-full overflow-hidden rounded-ui-sm bg-background/25", children: /* @__PURE__ */ t.jsx(
1484
- "div",
1485
- {
1486
- className: "size-full rounded-ui-sm bg-background transition-transform",
1487
- style: { transform: `translateX(-${100 * (1 - e)}%)` }
1488
- }
1489
- ) }), jr = 3e3, Cr = ({ src: e, poster: r, itemIndex: n }) => {
1490
- const { carrouselItemIndex: o, setItemInteraction: s } = q(), p = W(null), c = W(null), i = I(() => {
1491
- if (!c.current)
1492
- throw new Error("videoRef.current is null");
1493
- return c.current;
1494
- }, []);
1495
- Z(() => {
1496
- s(n, "ready");
1497
- }, [n, s]);
1498
- const d = I(() => {
1499
- i().play();
1500
- }, [i]), y = I(() => {
1501
- i().pause();
1502
- }, [i]);
1503
- Z(() => {
1504
- o === n || y();
1505
- }, [o, n, y]);
1506
- const [x, l] = F(!1), [w, M] = F(!0), v = () => {
1507
- l(!0), s(n, "running");
1508
- }, j = () => {
1509
- l(!1), s(n, "ready");
1510
- }, z = () => {
1511
- M(!1);
1512
- }, g = () => {
1513
- M(!0);
1514
- }, [V, h] = F(null), u = (a) => {
1515
- const k = i(), N = a.currentTarget.getBoundingClientRect(), R = (a.clientX - N.left) / N.width, A = Math.min(1, Math.max(0, R));
1516
- k.volume = A, k.muted = !1;
1517
- }, m = (a) => {
1518
- const k = i();
1519
- k.muted = a;
1520
- };
1521
- Z(() => {
1522
- const a = c.current;
1523
- if (!a)
1524
- return;
1525
- const k = () => {
1526
- h({
1527
- volume: a.volume,
1528
- isMuted: a.muted
1529
- });
1530
- };
1531
- return k(), a.addEventListener("volumechange", k), () => {
1532
- a.removeEventListener("volumechange", k);
1533
- };
1534
- }, []);
1535
- const [f, L] = F(null), O = f ? f.currentTime / f.duration : 0;
1536
- Z(() => {
1537
- const a = c.current;
1538
- if (!a) return;
1539
- const k = () => {
1540
- const N = a.currentTime, R = a.duration;
1541
- isNaN(N) || isNaN(R) || L({
1542
- currentTime: N,
1543
- duration: R
1544
- });
1545
- };
1546
- return k(), a.addEventListener("timeupdate", k), () => {
1547
- a.removeEventListener("timeupdate", k);
1548
- };
1549
- }, []);
1550
- const S = (a) => {
1551
- const k = i(), N = a.currentTarget.getBoundingClientRect(), R = (a.clientX - N.left) / N.width, A = k.duration * R;
1552
- k.currentTime = A;
1553
- }, b = (a) => {
1554
- const k = Math.floor(a % 3600 / 60), N = Math.floor(a % 60);
1555
- return `${k}:${N.toString().padStart(2, "0")}`;
1556
- }, [E, _] = F(!1), T = W(void 0), D = I(
1557
- () => clearTimeout(T.current),
1558
- []
1559
- ), C = I(() => {
1560
- D(), T.current = setTimeout(() => {
1561
- _(!1);
1562
- }, jr);
1563
- }, [D]);
1564
- return Z(() => {
1565
- const a = p.current, k = c.current;
1566
- if (!a || !k)
1567
- return;
1568
- const N = () => {
1569
- C(), _(!0);
1570
- }, R = () => {
1571
- D(), _(!1);
1572
- };
1573
- let A = !1;
1574
- const $ = () => {
1575
- A = !0;
1576
- }, Y = () => {
1577
- A && (A = !1, y());
1578
- }, K = () => {
1579
- A = !1, N();
1580
- }, G = (X) => {
1581
- X.preventDefault(), X.touches.length === 1 && (C(), _((ne) => !ne));
1582
- };
1583
- return a.addEventListener("mousedown", $), a.addEventListener("mouseup", Y), a.addEventListener("mouseenter", N), a.addEventListener("mousemove", K), a.addEventListener("mouseleave", R), k.addEventListener("touchstart", G), () => {
1584
- a.removeEventListener("mousedown", $), a.removeEventListener("mouseup", Y), a.removeEventListener("mouseenter", N), a.removeEventListener("mousemove", N), a.removeEventListener("mouseleave", R), k.removeEventListener("touchstart", G);
1585
- };
1586
- }, [D, y, C]), /* @__PURE__ */ t.jsxs("div", { ref: p, className: "relative size-full", children: [
1587
- /* @__PURE__ */ t.jsx(
1588
- "video",
1589
- {
1590
- ref: c,
1591
- className: "size-full",
1592
- src: e,
1593
- poster: r,
1594
- disablePictureInPicture: !0,
1595
- playsInline: !0,
1596
- onPlay: v,
1597
- onPause: j,
1598
- onEnded: j,
1599
- onCanPlay: z,
1600
- onWaiting: g
1601
- }
1602
- ),
1603
- x ? /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
1604
- /* @__PURE__ */ t.jsxs(
1605
- "div",
1606
- {
1607
- className: H(
1608
- "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",
1609
- E ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0"
1610
- ),
1611
- onMouseDownCapture: (a) => a.stopPropagation(),
1612
- children: [
1613
- /* @__PURE__ */ t.jsxs("div", { className: "flex items-center justify-between text-background", children: [
1614
- /* @__PURE__ */ t.jsxs(
1615
- "div",
1616
- {
1617
- className: "flex items-center gap-x-4",
1618
- children: [
1619
- /* @__PURE__ */ t.jsx(
1620
- B,
1621
- {
1622
- shape: "icon",
1623
- variant: "ghost",
1624
- color: "neutral",
1625
- onClick: y,
1626
- children: /* @__PURE__ */ t.jsx(vr, { className: "size-full" })
1627
- }
1628
- ),
1629
- f && /* @__PURE__ */ t.jsxs("span", { className: "text-sm", children: [
1630
- b(f.currentTime),
1631
- " /",
1632
- " ",
1633
- b(f.duration)
1634
- ] })
1635
- ]
1636
- }
1637
- ),
1638
- V && /* @__PURE__ */ t.jsxs(
1639
- "div",
1640
- {
1641
- className: "group/volume flex items-center gap-x-4 rounded-ui-md p-2 transition-colors hover:bg-foreground/25",
1642
- children: [
1643
- /* @__PURE__ */ t.jsx(
1644
- "div",
1645
- {
1646
- className: `w-12 cursor-pointer py-1 opacity-0 transition-opacity ${V.isMuted ? "group-hover/volume:opacity-50" : "group-hover/volume:opacity-100"}`,
1647
- onClick: u,
1648
- children: /* @__PURE__ */ t.jsx(Be, { progress: V.volume })
1649
- }
1650
- ),
1651
- /* @__PURE__ */ t.jsx(
1652
- "div",
1653
- {
1654
- className: "size-5 cursor-pointer",
1655
- onClick: () => m(!V.isMuted),
1656
- children: V.isMuted ? /* @__PURE__ */ t.jsx(yr, { className: "size-full" }) : /* @__PURE__ */ t.jsx(br, { className: "size-full" })
1657
- }
1658
- )
1659
- ]
1660
- }
1661
- )
1662
- ] }),
1663
- /* @__PURE__ */ t.jsx(
1664
- "div",
1665
- {
1666
- className: "cursor-pointer py-1",
1667
- onClick: S,
1668
- children: /* @__PURE__ */ t.jsx(Be, { progress: O })
1669
- }
1670
- )
1671
- ]
1672
- }
1673
- ),
1674
- w && /* @__PURE__ */ t.jsx(
1675
- "div",
1676
- {
1677
- className: "pointer-events-none absolute inset-0 flex items-center justify-center bg-foreground/25",
1678
- children: /* @__PURE__ */ t.jsx(dt, { size: "lg", color: "background" })
1679
- }
1680
- )
1681
- ] }) : /* @__PURE__ */ t.jsx(
1682
- "div",
1683
- {
1684
- className: "absolute inset-0 flex items-center justify-center bg-foreground/25",
1685
- children: /* @__PURE__ */ t.jsx(wr, { onClick: d })
1686
- }
1687
- )
1688
- ] });
1689
- }, kr = ({ index: e, item: r, isShown: n }) => {
1690
- const { type: o } = r;
1691
- let s;
1692
- switch (o) {
1693
- case "image":
1694
- s = /* @__PURE__ */ t.jsx(gt, { itemIndex: e, onlyPreload: !n, ...r });
1695
- break;
1696
- case "video":
1697
- s = /* @__PURE__ */ t.jsx(Cr, { itemIndex: e, ...r });
1698
- break;
1699
- case "360":
1700
- s = /* @__PURE__ */ t.jsx(xr, { itemIndex: e, onlyPreload: !n, ...r });
1701
- break;
1702
- }
1703
- return s = /* @__PURE__ */ t.jsx("div", { className: H("-ml-px h-full w-[calc(100%+2px)]"), children: s }), s;
1704
- }, Er = (e) => {
1705
- Z(() => {
1706
- const r = (n) => {
1707
- n.key === "Escape" && e();
1708
- };
1709
- return addEventListener("keydown", r), () => {
1710
- removeEventListener("keydown", r);
1711
- };
1712
- }, [e]);
1713
- };
1714
- function Nr(e) {
1715
- return e.target === e.currentTarget;
1716
- }
1717
- const Lr = ({ currentIndex: e, maxIndex: r }) => /* @__PURE__ */ t.jsxs("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: [
1718
- /* @__PURE__ */ t.jsx("span", { children: e + 1 }),
1719
- /* @__PURE__ */ t.jsx("span", { children: "/" }),
1720
- /* @__PURE__ */ t.jsx("span", { children: r + 1 })
1721
- ] }), qe = ({ className: e }) => /* @__PURE__ */ t.jsx(U, { className: e, customizationKey: "UI_ARROW_RIGHT", children: /* @__PURE__ */ t.jsx("svg", { className: e, viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ t.jsx(
1722
- "path",
1723
- {
1724
- d: "M4.07666 13.4868L5.25666 14.6668L11.9233 8.00016L5.25666 1.3335L4.07666 2.5135L9.56333 8.00016L4.07666 13.4868Z",
1725
- fill: "currentColor"
1726
- }
1727
- ) }) }), zr = ({ className: e }) => /* @__PURE__ */ t.jsx(U, { className: e, customizationKey: "UI_EXTEND", children: /* @__PURE__ */ t.jsx("svg", { className: e, viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ t.jsx(
1728
- "path",
1729
- {
1730
- 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",
1731
- fill: "currentColor"
1732
- }
1733
- ) }) }), _r = ({ className: e }) => /* @__PURE__ */ t.jsx(U, { className: e, customizationKey: "UI_GALLERY", children: /* @__PURE__ */ t.jsx("svg", { className: e, viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ t.jsx(
1734
- "path",
1735
- {
1736
- 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",
1737
- fill: "currentColor"
1738
- }
1739
- ) }) }), Ir = ({ className: e }) => /* @__PURE__ */ t.jsx(U, { className: e, customizationKey: "UI_HOTSPOTS", children: /* @__PURE__ */ t.jsxs(
1740
- "svg",
1741
- {
1742
- className: e,
1743
- width: "12",
1744
- height: "12",
1745
- viewBox: "0 0 12 12",
1746
- fill: "none",
1747
- xmlns: "http://www.w3.org/2000/svg",
1748
- children: [
1749
- /* @__PURE__ */ t.jsx("g", { clipPath: "url(#clip0_418_982)", children: /* @__PURE__ */ t.jsx(
1750
- "path",
1751
- {
1752
- 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",
1753
- fill: "currentColor"
1754
- }
1755
- ) }),
1756
- /* @__PURE__ */ t.jsx("defs", { children: /* @__PURE__ */ t.jsx("clipPath", { id: "clip0_418_982", children: /* @__PURE__ */ t.jsx("rect", { width: "12", height: "12", fill: "white" }) }) })
1757
- ]
1758
- }
1759
- ) }), Mr = ({ className: e }) => /* @__PURE__ */ t.jsx(U, { className: e, customizationKey: "UI_MINUS", children: /* @__PURE__ */ t.jsx(
1760
- "svg",
1761
- {
1762
- className: e,
1763
- width: "16",
1764
- height: "16",
1765
- viewBox: "0 0 16 16",
1766
- fill: "none",
1767
- xmlns: "http://www.w3.org/2000/svg",
1768
- children: /* @__PURE__ */ t.jsx(
1769
- "path",
1770
- {
1771
- d: "M12.6666 8.66634H3.33325V7.33301H12.6666V8.66634Z",
1772
- fill: "currentColor"
1773
- }
1774
- )
1775
- }
1776
- ) }), Tr = ({ className: e }) => /* @__PURE__ */ t.jsx(U, { className: e, customizationKey: "UI_PLUS", children: /* @__PURE__ */ t.jsx(
1777
- "svg",
1778
- {
1779
- className: e,
1780
- width: "16",
1781
- height: "16",
1782
- viewBox: "0 0 16 16",
1783
- fill: "none",
1784
- xmlns: "http://www.w3.org/2000/svg",
1785
- children: /* @__PURE__ */ t.jsx(
1786
- "path",
1787
- {
1788
- d: "M12.6666 8.66634H8.66659V12.6663H7.33325V8.66634H3.33325V7.33301H7.33325V3.33301H8.66659V7.33301H12.6666V8.66634Z",
1789
- fill: "currentColor"
1790
- }
1791
- )
1792
- }
1793
- ) }), Vr = ({ className: e }) => /* @__PURE__ */ t.jsx(U, { className: e, customizationKey: "UI_REDUCE", children: /* @__PURE__ */ t.jsx("svg", { className: e, viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ t.jsx(
1794
- "path",
1795
- {
1796
- 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",
1797
- fill: "currentColor"
1798
- }
1799
- ) }) }), Sr = ({
1800
- enabled: e,
1801
- onToggle: r,
1802
- label: n,
1803
- className: o,
1804
- children: s
1805
- }) => /* @__PURE__ */ t.jsxs(
1806
- "label",
1807
- {
1808
- className: H(
1809
- "flex cursor-pointer items-center justify-center gap-x-2",
1810
- o
1811
- ),
1812
- children: [
1813
- /* @__PURE__ */ t.jsx(
1814
- "input",
1815
- {
1816
- type: "checkbox",
1817
- className: "sr-only",
1818
- checked: e,
1819
- onChange: r
1820
- }
1821
- ),
1822
- n && /* @__PURE__ */ t.jsx("div", { className: "text-xs text-background", children: n }),
1823
- /* @__PURE__ */ t.jsx(
1824
- "div",
1825
- {
1826
- className: H(
1827
- "flex h-5 w-8 items-center justify-center rounded-full transition-colors",
1828
- e ? "bg-primary" : "bg-background/60"
1829
- ),
1830
- children: /* @__PURE__ */ t.jsx(
1831
- "div",
1832
- {
1833
- className: H(
1834
- "flex size-4 items-center justify-center rounded-full p-0.5 transition",
1835
- e ? "translate-x-1.5 bg-primary-foreground text-primary" : "-translate-x-1.5 bg-background text-foreground"
1836
- ),
1837
- children: s
1838
- }
1839
- )
1840
- }
1841
- )
1842
- ]
1843
- }
1844
- ), Hr = ({ className: e }) => /* @__PURE__ */ t.jsx(U, { className: e, customizationKey: "UI_BURGER", children: /* @__PURE__ */ t.jsx(
1845
- "svg",
1846
- {
1847
- className: e,
1848
- width: "16",
1849
- height: "16",
1850
- viewBox: "0 0 16 16",
1851
- fill: "none",
1852
- xmlns: "http://www.w3.org/2000/svg",
1853
- children: /* @__PURE__ */ t.jsx(
1854
- "path",
1855
- {
1856
- d: "M2 12H14V10.6667H2V12ZM2 8.66667H14V7.33333H2V8.66667ZM2 4V5.33333H14V4H2Z",
1857
- fill: "currentColor"
1858
- }
1859
- )
1860
- }
1861
- ) }), Or = ({ sharedClassName: e }) => {
1862
- const { categories: r } = re(), { displayedCategoryId: n, changeCategory: o } = q(), [s, p] = F(!1), c = () => {
1863
- p(!s);
1864
- }, i = () => {
1865
- p(!1);
1866
- };
1867
- return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
1868
- s && /* @__PURE__ */ t.jsx(
1869
- "div",
1870
- {
1871
- className: H(e, "inset-0 small:hidden"),
1872
- onClick: i
1873
- }
1874
- ),
1875
- /* @__PURE__ */ t.jsxs(
1876
- "div",
1877
- {
1878
- className: H(
1879
- e,
1880
- ue("top-left"),
1881
- "flex gap-x-2 small:hidden"
1882
- ),
1883
- children: [
1884
- /* @__PURE__ */ t.jsx(
1885
- B,
1886
- {
1887
- shape: "icon",
1888
- color: s ? "primary" : "neutral",
1889
- onClick: c,
1890
- children: /* @__PURE__ */ t.jsx(Hr, {})
1891
- }
1892
- ),
1893
- s && /* @__PURE__ */ t.jsx("div", { className: "rounded-ui-md bg-background transition-radius", children: /* @__PURE__ */ t.jsx("ul", { className: "space-y-0.5 p-1", children: r.map(({ id: d, title: y }) => /* @__PURE__ */ t.jsx(
1894
- "li",
1895
- {
1896
- className: H(
1897
- "cursor-pointer rounded-ui px-2 py-1 text-sm font-bold transition-all hover:bg-primary/30",
1898
- d === n && "bg-primary/50"
1899
- ),
1900
- onClick: () => {
1901
- o(d), p(!1);
1902
- },
1903
- children: y
1904
- },
1905
- d
1906
- )) }) })
1907
- ]
1908
- }
1909
- ),
1910
- /* @__PURE__ */ t.jsx(
1911
- "div",
1912
- {
1913
- className: H(
1914
- e,
1915
- st("top"),
1916
- "w-full overflow-x-auto max-small:hidden"
1917
- ),
1918
- children: /* @__PURE__ */ t.jsx("div", { className: "mx-auto flex w-fit gap-x-1 rounded-ui-md bg-background p-1 shadow", children: r.map(({ id: d, title: y }) => /* @__PURE__ */ t.jsx(
1919
- B,
1920
- {
1921
- variant: d === n ? "fill" : "ghost",
1922
- onClick: () => o(d),
1923
- children: y
1924
- },
1925
- d
1926
- )) })
1927
- }
1928
- )
1929
- ] });
1930
- }, Rr = () => {
1931
- const { hideCategories: e, infiniteCarrousel: r, permanentGallery: n } = J(), {
1932
- items: { length: o },
1933
- aspectRatioStyle: s
1934
- } = re(), {
1935
- slidable: p,
1936
- carrouselItemIndex: c,
1937
- masterItemIndex: i,
1938
- prevItem: d,
1939
- nextItem: y,
1940
- showGalleryControls: x,
1941
- enableHotspotsControl: l,
1942
- showHotspots: w,
1943
- toggleHotspots: M,
1944
- showGallery: v,
1945
- toggleGallery: j,
1946
- extendMode: z,
1947
- toggleExtendMode: g,
1948
- shownDetails: V,
1949
- isShowingDetails: h,
1950
- resetShownDetails: u,
1951
- showZoomControls: m,
1952
- isZooming: f,
1953
- canZoomIn: L,
1954
- zoomIn: O,
1955
- canZoomOut: S,
1956
- zoomOut: b,
1957
- resetView: E
1958
- } = q(), _ = I(
1959
- (D) => {
1960
- Nr(D) && u();
1961
- },
1962
- [u]
1963
- );
1964
- Er(u);
1965
- const T = "absolute z-overlay";
1966
- return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
1967
- !e && /* @__PURE__ */ t.jsx(
1968
- Or,
1969
- {
1970
- sharedClassName: H(
1971
- T,
1972
- "transition-opacity",
1973
- f ? "!pointer-events-none opacity-0" : "opacity-100"
1974
- )
1975
- }
1976
- ),
1977
- p && !f && /* @__PURE__ */ t.jsx("div", { className: H(T, ue("top-right")), children: /* @__PURE__ */ t.jsx(
1978
- Lr,
1979
- {
1980
- currentIndex: c,
1981
- maxIndex: o - 1
1982
- }
1983
- ) }),
1984
- p && /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
1985
- /* @__PURE__ */ t.jsx(
1986
- B,
1987
- {
1988
- shape: "icon",
1989
- color: "neutral",
1990
- className: H(
1991
- T,
1992
- ue("middle-left"),
1993
- f ? "!pointer-events-none opacity-0" : "opacity-100"
1994
- ),
1995
- onClick: d,
1996
- disabled: !r && i <= 0,
1997
- children: /* @__PURE__ */ t.jsx(U, { customizationKey: "CONTROLS_ARROW_LEFT", children: /* @__PURE__ */ t.jsx(qe, { className: "size-full rotate-180" }) })
1998
- }
1999
- ),
2000
- /* @__PURE__ */ t.jsx(
2001
- B,
2002
- {
2003
- shape: "icon",
2004
- color: "neutral",
2005
- className: H(
2006
- T,
2007
- ue("middle-right"),
2008
- f ? "!pointer-events-none opacity-0" : "opacity-100"
2009
- ),
2010
- onClick: y,
2011
- disabled: !r && i >= o - 1,
2012
- children: /* @__PURE__ */ t.jsx(U, { customizationKey: "CONTROLS_ARROW_RIGHT", children: /* @__PURE__ */ t.jsx(qe, { className: "size-full" }) })
2013
- }
2014
- )
2015
- ] }),
2016
- /* @__PURE__ */ t.jsxs(
2017
- "div",
2018
- {
2019
- className: H(
2020
- T,
2021
- ue("bottom-fullW"),
2022
- "pointer-events-none grid grid-cols-[auto,1fr,auto] items-end *:pointer-events-auto small:gap-x-2"
2023
- ),
2024
- children: [
2025
- !n && p && /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
2026
- /* @__PURE__ */ t.jsx(
2027
- B,
2028
- {
2029
- className: x && !f ? "opacity-100" : "!pointer-events-none opacity-0",
2030
- variant: "fill",
2031
- color: v ? "primary" : "neutral",
2032
- shape: "icon",
2033
- onClick: j,
2034
- children: /* @__PURE__ */ t.jsx(U, { customizationKey: "CONTROLS_GALLERY", children: /* @__PURE__ */ t.jsx(_r, { className: "size-full" }) })
2035
- }
2036
- ),
2037
- v && /* @__PURE__ */ t.jsx(
2038
- pt,
2039
- {
2040
- className: H(
2041
- "transition-opacity",
2042
- x && !f ? "opacity-100" : "!pointer-events-none opacity-0",
2043
- // Left & Right gradient mask to fade the gallery
2044
- "[mask-image:linear-gradient(to_left,transparent_0px,black_4px,black_calc(100%-4px),transparent_100%)]"
2045
- ),
2046
- containerClassName: "mx-1"
2047
- }
2048
- )
2049
- ] }),
2050
- /* @__PURE__ */ t.jsxs("div", { className: "col-start-3 flex flex-col items-end gap-y-1 small:gap-y-2", children: [
2051
- l && /* @__PURE__ */ t.jsx(
2052
- Sr,
2053
- {
2054
- className: H(
2055
- "transition-opacity",
2056
- f ? "!pointer-events-none opacity-0" : "opacity-100"
2057
- ),
2058
- enabled: w,
2059
- onToggle: M,
2060
- children: /* @__PURE__ */ t.jsx(Ir, { className: "size-full" })
2061
- }
2062
- ),
2063
- m && /* @__PURE__ */ t.jsxs("div", { className: "max-small:hidden", children: [
2064
- /* @__PURE__ */ t.jsx(
2065
- B,
2066
- {
2067
- className: "rounded-b-none",
2068
- color: "neutral",
2069
- shape: "icon",
2070
- disabled: !L,
2071
- onClick: O,
2072
- children: /* @__PURE__ */ t.jsx(Tr, { className: "size-full" })
2073
- }
2074
- ),
2075
- /* @__PURE__ */ t.jsx(mt, { color: "background" }),
2076
- /* @__PURE__ */ t.jsx(
2077
- B,
2078
- {
2079
- className: "rounded-t-none",
2080
- color: "neutral",
2081
- shape: "icon",
2082
- disabled: !S,
2083
- onClick: b,
2084
- children: /* @__PURE__ */ t.jsx(Mr, { className: "size-full" })
2085
- }
2086
- )
2087
- ] }),
2088
- /* @__PURE__ */ t.jsx(
2089
- B,
2090
- {
2091
- variant: "fill",
2092
- color: z ? "primary" : "neutral",
2093
- shape: "icon",
2094
- onClick: g,
2095
- children: z ? /* @__PURE__ */ t.jsx(Vr, { className: "size-full" }) : /* @__PURE__ */ t.jsx(zr, { className: "size-full" })
2096
- }
2097
- )
2098
- ] })
2099
- ]
2100
- }
2101
- ),
2102
- /* @__PURE__ */ t.jsx(
2103
- "div",
2104
- {
2105
- className: H(
2106
- T,
2107
- "inset-0 flex justify-end overflow-hidden bg-foreground/60 transition-opacity duration-details",
2108
- h ? "opacity-100" : "pointer-events-none opacity-0"
2109
- ),
2110
- onClick: _,
2111
- children: /* @__PURE__ */ t.jsx(
2112
- "div",
2113
- {
2114
- className: H(
2115
- "h-full w-3/5 bg-background transition-transform duration-details",
2116
- h ? "translate-x-0" : "translate-x-full"
2117
- ),
2118
- children: !!V && /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
2119
- /* @__PURE__ */ t.jsx(
2120
- me,
2121
- {
2122
- className: "w-full bg-foreground/65",
2123
- style: s,
2124
- src: V.src,
2125
- imgInPlayerWidthRatio: 0.6
2126
- }
2127
- ),
2128
- /* @__PURE__ */ t.jsxs(
2129
- "div",
2130
- {
2131
- className: H(
2132
- "space-y-1 px-2 py-1 small:p-3",
2133
- z && "large:p-4"
2134
- ),
2135
- children: [
2136
- V.title && /* @__PURE__ */ t.jsx(
2137
- "span",
2138
- {
2139
- className: H(
2140
- "text-sm font-semibold small:text-base small:font-bold",
2141
- z && "large:text-lg"
2142
- ),
2143
- children: V.title
2144
- }
2145
- ),
2146
- V.text && /* @__PURE__ */ t.jsx(
2147
- "p",
2148
- {
2149
- className: H(
2150
- "text-xs text-foreground/65 small:text-sm",
2151
- z && "large:text-base"
2152
- ),
2153
- children: V.text
2154
- }
2155
- )
2156
- ]
2157
- }
2158
- )
2159
- ] })
2160
- }
2161
- )
2162
- }
2163
- ),
2164
- (f || h) && /* @__PURE__ */ t.jsx(
2165
- lt,
2166
- {
2167
- className: H(T, ue("top-right")),
2168
- onClick: E
2169
- }
2170
- )
2171
- ] });
2172
- }, Dr = ({ className: e = "" }) => {
2173
- const { infiniteCarrousel: r, preloadRange: n, isFullScreen: o } = J(), { items: s, aspectRatioStyle: p } = re(), {
2174
- slidable: c,
2175
- carrouselItemIndex: i,
2176
- setCarrouselItemIndex: d,
2177
- itemIndexCommand: y,
2178
- setItemIndexCommand: x,
2179
- specialCommand: l,
2180
- isRunningSpecialCommand: w,
2181
- finishSpecialCommand: M,
2182
- extendMode: v,
2183
- extendTransition: j
2184
- } = q(), z = W(null), g = I((C) => {
2185
- if (!z.current)
2186
- throw new Error(`[${C ?? "sliderOrThrow"}] slider.current is null`);
2187
- return z.current;
2188
- }, []), V = W(!1), h = W(null), u = W(null), m = W(null), f = I(() => {
2189
- m.current && cancelAnimationFrame(m.current);
2190
- }, []), L = I(() => {
2191
- const C = g("computeClosestSnapIndex"), a = Array.from(C.children), k = C.scrollLeft, N = a.reduce(
2192
- (R, A, $) => {
2193
- const Y = A.offsetLeft;
2194
- return Math.abs(Y - k) < Math.abs(a[R].offsetLeft - k) ? $ : R;
2195
- },
2196
- 0
2197
- );
2198
- return l === "first_to_last" ? Ue(N, s.length) : l === "last_to_first" ? Ue(N - 1, s.length) : N;
2199
- }, [l, g, s.length]), O = I(
2200
- (C) => {
2201
- const a = g("setStyleCursor");
2202
- a.style.cursor = C;
2203
- },
2204
- [g]
2205
- ), S = I(
2206
- (C) => {
2207
- const a = g("setStyleSnapState");
2208
- C === "mandatory" ? a.style.scrollSnapType = "x mandatory" : a.style.scrollSnapType = "none";
2209
- },
2210
- [g]
2211
- ), b = I(
2212
- (C, a, k) => {
2213
- f();
2214
- const N = g("scrollToIndex"), R = Array.from(N.children), A = N.scrollLeft, $ = R[C].offsetLeft, Y = (pe) => {
2215
- N.scrollTo({
2216
- left: pe,
2217
- behavior: "instant"
2218
- });
2219
- }, K = () => {
2220
- Y($), S("mandatory"), k?.();
2221
- }, G = Math.abs(A - $);
2222
- if (G < 1 || a === "instant") {
2223
- K();
2224
- return;
2225
- }
2226
- const X = ae(G / 2.5, 300, 1e3), ne = (/* @__PURE__ */ new Date()).getTime();
2227
- S("none");
2228
- const ve = () => {
2229
- const pe = () => {
2230
- const be = (/* @__PURE__ */ new Date()).getTime() - ne;
2231
- if (be >= X) {
2232
- K();
2233
- return;
2234
- }
2235
- const ie = Math.min(be / X, 1), he = ht(ie), Ie = Ee(A, $, he);
2236
- Y(Ie), ve();
2237
- };
2238
- m.current = requestAnimationFrame(pe);
2239
- };
2240
- ve();
2241
- },
2242
- [f, g, S]
2243
- ), [E, _] = F(), T = !!E;
2244
- Z(() => {
2245
- const C = () => {
2246
- clearTimeout(E);
2247
- const a = setTimeout(() => {
2248
- _(void 0);
2249
- }, et);
2250
- _(a);
2251
- };
2252
- return addEventListener("resize", C), document.addEventListener("fullscreenchange", C), () => {
2253
- removeEventListener("resize", C), document.removeEventListener("fullscreenchange", C);
2254
- };
2255
- }, [E]), Z(() => {
2256
- const C = L();
2257
- Number.isNaN(C) || C !== i && b(i, "instant");
2258
- }, [
2259
- i,
2260
- b,
2261
- L,
2262
- // - Run the effect when those values change
2263
- s,
2264
- E,
2265
- o,
2266
- v,
2267
- j
2268
- ]), Z(() => {
2269
- if (!c || w) {
2270
- O("auto");
2271
- return;
2272
- }
2273
- const C = z.current;
2274
- if (!C)
2275
- return;
2276
- O("grab"), S("mandatory");
2277
- const a = (R) => {
2278
- R.button === 0 && (R.preventDefault(), R.stopPropagation(), f(), V.current = !0, h.current = R.pageX - C.offsetLeft, u.current = C.scrollLeft, O("grabbing"));
2279
- }, k = (R) => {
2280
- if (!V.current)
2281
- return;
2282
- if (h.current === null)
2283
- throw new Error("[onMouseMove] startX is null");
2284
- S("none");
2285
- const A = R.pageX - C.offsetLeft - h.current;
2286
- requestAnimationFrame(() => {
2287
- if (u.current === null)
2288
- throw new Error("[onMouseMove] scrollLeft is null");
2289
- C.scrollLeft = u.current - A;
2290
- });
2291
- }, N = () => {
2292
- if (!V.current)
2293
- return;
2294
- V.current = !1, O("grab");
2295
- const R = L();
2296
- b(R, "smooth");
2297
- };
2298
- return C.addEventListener("mousedown", a), document.addEventListener("mousemove", k), document.addEventListener("mouseleave", N), document.addEventListener("mouseup", N), document.addEventListener("contextmenu", N), () => {
2299
- C.removeEventListener("mousedown", a), document.removeEventListener("mousemove", k), document.removeEventListener("mouseleave", N), document.removeEventListener("mouseup", N), document.removeEventListener("contextmenu", N);
2300
- };
2301
- }, [
2302
- f,
2303
- L,
2304
- w,
2305
- b,
2306
- O,
2307
- S,
2308
- c
2309
- ]), Z(() => {
2310
- if (j || T)
2311
- return;
2312
- const C = z.current;
2313
- if (!C)
2314
- return;
2315
- const a = () => {
2316
- const k = L();
2317
- Number.isNaN(k) || (d(k), k === y && x(null));
2318
- };
2319
- return C.addEventListener("scroll", a), () => {
2320
- C.removeEventListener("scroll", a);
2321
- };
2322
- }, [
2323
- L,
2324
- j,
2325
- w,
2326
- T,
2327
- y,
2328
- s.length,
2329
- d,
2330
- x
2331
- ]), Z(() => {
2332
- if (y === null)
2333
- return;
2334
- const C = () => M();
2335
- switch (l) {
2336
- case "first_to_last":
2337
- b(s.length, "instant"), b(s.length - 1, "smooth", C);
2338
- break;
2339
- case "last_to_first":
2340
- b(0, "instant"), b(1, "smooth", C);
2341
- break;
2342
- case "instant":
2343
- b(y, "instant", C);
2344
- break;
2345
- default:
2346
- b(y, "smooth");
2347
- break;
2348
- }
2349
- }, [
2350
- l,
2351
- M,
2352
- y,
2353
- s.length,
2354
- b
2355
- ]);
2356
- const D = () => /* @__PURE__ */ t.jsx("div", { className: "h-full", style: p });
2357
- return /* @__PURE__ */ t.jsxs(
2358
- "div",
2359
- {
2360
- className: H(
2361
- "relative overflow-hidden rounded-carrousel transition-radius",
2362
- e
2363
- ),
2364
- style: p,
2365
- children: [
2366
- /* @__PURE__ */ t.jsxs(
2367
- "div",
2368
- {
2369
- ref: z,
2370
- className: `flex size-full ${c ? "overflow-x-auto no-scrollbar *:snap-start *:snap-always" : "justify-center"}`,
2371
- children: [
2372
- l === "last_to_first" && /* @__PURE__ */ t.jsx(D, {}),
2373
- s.map((C, a) => {
2374
- const k = C.type === "360" ? C.images[0] : C.src, N = a === i, R = a === 0, A = a === s.length - 1, $ = (() => {
2375
- if (l === "first_to_last" && R)
2376
- return {
2377
- transform: `translateX(${100 * s.length}%)`
2378
- };
2379
- if (l === "last_to_first" && A)
2380
- return {
2381
- transform: `translateX(-${100 * s.length}%)`
2382
- };
2383
- })();
2384
- let Y = Math.abs(a - i) <= n;
2385
- return Y ||= a === y, r && (Y ||= i < n && s.length - a <= n - i, Y ||= i >= s.length - n && a <= n - (s.length - i)), /* @__PURE__ */ t.jsx(
2386
- "div",
2387
- {
2388
- className: H(
2389
- "h-full bg-foreground/35",
2390
- i === a && "z-1"
2391
- // Give high-ground to the shown item (to avoid 1px vertical line)
2392
- ),
2393
- style: { ...p, ...$ },
2394
- children: Y && /* @__PURE__ */ t.jsx(kr, { index: a, item: C, isShown: N })
2395
- },
2396
- `${a}_${k}`
2397
- );
2398
- }),
2399
- l === "first_to_last" && /* @__PURE__ */ t.jsx(D, {})
2400
- ]
2401
- }
2402
- ),
2403
- /* @__PURE__ */ t.jsx(Rr, {})
2404
- ]
2405
- }
2406
- );
2407
- }, Pr = () => {
2408
- const { permanentGallery: e } = J(), { aspectRatioStyle: r } = re(), {
2409
- prevItem: n,
2410
- nextItem: o,
2411
- isShowingDetails: s,
2412
- resetShownDetails: p,
2413
- extendMode: c,
2414
- disableExtendMode: i,
2415
- isZooming: d,
2416
- resetZoom: y,
2417
- fakeFullScreen: x
2418
- } = q(), l = W(null), w = W(null), M = W(null);
2419
- return Z(() => {
2420
- if (!c)
2421
- return;
2422
- const v = l.current, j = w.current, z = M.current;
2423
- if (!v || !j || !z)
2424
- return;
2425
- let g = !1;
2426
- const V = (m) => [v, j, z].includes(m.target), h = (m) => {
2427
- g = V(m);
2428
- }, u = (m) => {
2429
- g && (V(m) && i(), g = !1);
2430
- };
2431
- return v.addEventListener("mousedown", h), v.addEventListener("mouseup", u), () => {
2432
- v.removeEventListener("mousedown", h), v.removeEventListener("mouseup", u);
2433
- };
2434
- }, [i, c]), Z(() => {
2435
- const v = (j) => {
2436
- j.key === "Escape" && (d ? y() : s ? p() : i());
2437
- };
2438
- return addEventListener("keydown", v), () => {
2439
- removeEventListener("keydown", v);
2440
- };
2441
- }, [
2442
- i,
2443
- s,
2444
- d,
2445
- o,
2446
- n,
2447
- p,
2448
- y
2449
- ]), /* @__PURE__ */ t.jsxs(
2450
- "div",
2451
- {
2452
- ref: l,
2453
- className: H(
2454
- x ? "fixed inset-0 z-overlay" : "relative",
2455
- c && "flex size-full items-center justify-center bg-foreground/75"
2456
- ),
2457
- children: [
2458
- /* @__PURE__ */ t.jsxs(
2459
- "div",
2460
- {
2461
- ref: w,
2462
- className: c ? "flex size-full flex-col justify-center gap-y-2 small:gap-y-4" : "space-y-2",
2463
- children: [
2464
- /* @__PURE__ */ t.jsx(
2465
- "div",
2466
- {
2467
- ref: M,
2468
- className: H(
2469
- c && "mx-auto flex min-h-0 w-full max-w-[1600px] justify-center"
2470
- ),
2471
- style: r,
2472
- children: /* @__PURE__ */ t.jsx(Dr, { className: H(c && "h-full min-w-0") })
2473
- }
2474
- ),
2475
- e && /* @__PURE__ */ t.jsx(pt, { className: H(c && "my-2 shrink-0 small:my-4") })
2476
- ]
2477
- }
2478
- ),
2479
- c && /* @__PURE__ */ t.jsx(
2480
- lt,
2481
- {
2482
- className: "absolute right-2 top-2 small:right-4 small:top-4",
2483
- onClick: i
2484
- }
2485
- )
2486
- ]
2487
- }
2488
- );
2489
- }, Zr = ({
2490
- compositionUrl: e
2491
- }) => {
2492
- const { emitEvent: r } = J(), {
2493
- data: n,
2494
- status: o,
2495
- isSuccess: s,
2496
- error: p
2497
- } = $t(e);
2498
- return Z(() => {
2499
- p ? r(It, p) : o === "fetching" ? r(Mt, e) : s && r(Tt, n);
2500
- }, [n, e, r, p, s, o]), p ? /* @__PURE__ */ t.jsx(
2501
- ct,
2502
- {
2503
- className: "aspect-square text-foreground/70",
2504
- text: "Player could not be loaded"
2505
- }
2506
- ) : s ? /* @__PURE__ */ t.jsx(Ut, { composition: n, children: /* @__PURE__ */ t.jsx(Gt, { children: /* @__PURE__ */ t.jsx(Pr, {}) }) }) : /* @__PURE__ */ t.jsxs("div", { className: "flex aspect-square size-full flex-col items-center justify-center gap-y-4", children: [
2507
- /* @__PURE__ */ t.jsx("div", { className: "animate-pulse text-xl", children: "Loading Player" }),
2508
- /* @__PURE__ */ t.jsx(dt, { color: "foreground" })
2509
- ] });
2510
- }, Ar = ({
2511
- compositionUrl: e,
2512
- hideCategories: r = jt,
2513
- infiniteCarrousel: n = Ct,
2514
- permanentGallery: o = kt,
2515
- mediaLoadStrategy: s = Et,
2516
- preloadRange: p = Nt,
2517
- preventFullScreen: c = Lt,
2518
- eventPrefix: i = zt,
2519
- reverse360: d = _t,
2520
- children: y,
2521
- // NOTE: use to customize the player, not to display the content
2522
- ...x
2523
- // Contains the rest of the props (minMediaWidth / maxMediaWidth)
2524
- }) => {
2525
- const l = W(null), [w, M] = F(0.5), [v, j] = F(!1), z = I(
2526
- (h, u) => {
2527
- const m = i + h, f = new CustomEvent(m, { detail: u });
2528
- document.dispatchEvent(f);
2529
- },
2530
- [i]
2531
- );
2532
- Z(() => {
2533
- if (v) {
2534
- M(1);
2535
- return;
2536
- }
2537
- if (!l.current)
2538
- return;
2539
- const h = l.current, u = () => {
2540
- const m = window.innerWidth, f = h.clientWidth;
2541
- M(f / m);
2542
- };
2543
- return u(), addEventListener("resize", u), () => {
2544
- removeEventListener("resize", u);
2545
- };
2546
- }, [v]), Z(() => {
2547
- if (c)
2548
- return;
2549
- const h = l.current;
2550
- if (!h)
2551
- throw new Error("Wrapper not found");
2552
- const u = () => {
2553
- const { fullscreenElement: m } = document;
2554
- j(
2555
- m === h || // NOTE: For custom element, the web browser is making the whole custom element full-screen and not only the wrapper
2556
- m?.localName === Ze
2557
- );
2558
- };
2559
- return document.addEventListener("fullscreenchange", u), () => {
2560
- document.removeEventListener("fullscreenchange", u);
2561
- };
2562
- }, [c]);
2563
- const g = I(async () => {
2564
- const h = l.current;
2565
- if (!h)
2566
- throw new Error("Wrapper not found");
2567
- try {
2568
- return await h.requestFullscreen(), !0;
2569
- } catch {
2570
- return !1;
2571
- }
2572
- }, []), V = I(async () => {
2573
- try {
2574
- return await document.exitFullscreen(), !0;
2575
- } catch {
2576
- return !1;
2577
- }
2578
- }, []);
2579
- return /* @__PURE__ */ t.jsx(
2580
- Xt,
2581
- {
2582
- ...x,
2583
- hideCategories: r,
2584
- infiniteCarrousel: n,
2585
- permanentGallery: o,
2586
- mediaLoadStrategy: s,
2587
- preloadRange: p,
2588
- preventFullScreen: c,
2589
- reverse360: d,
2590
- emitEvent: z,
2591
- playerInViewportWidthRatio: w,
2592
- isFullScreen: v,
2593
- requestFullscreen: g,
2594
- exitFullscreen: V,
2595
- children: /* @__PURE__ */ t.jsxs(rr, { children: [
2596
- /* @__PURE__ */ t.jsx(
2597
- "div",
2598
- {
2599
- id: "cc-webplayer-wrapper",
2600
- ref: l,
2601
- className: "select-none text-foreground",
2602
- children: /* @__PURE__ */ t.jsx(Zr, { compositionUrl: e })
2603
- }
2604
- ),
2605
- y
2606
- ] })
2607
- }
2608
- );
2609
- }, Fr = ({ name: e, color: r, children: n }) => {
2610
- const { setIconConfig: o, resetIconConfig: s } = Ae();
2611
- return Z(() => {
2612
- if (!(!n && !r))
2613
- return o(e, {
2614
- Icon: n,
2615
- color: r
2616
- }), () => {
2617
- s(e);
2618
- };
2619
- }, [n, r, e, s, o]), null;
2620
- }, Wr = (e) => it() ? /* @__PURE__ */ t.jsx(Fr, { ...e }) : /* @__PURE__ */ t.jsx("slot", {}), Yr = '*,: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}#cc-webplayer-wrapper{--background: var(--cc-webplayer-background, 0 0% 100%);--foreground: var(--cc-webplayer-foreground, 240 10% 3.9%);--primary: var(--cc-webplayer-primary, 216 100% 52%);--primary-foreground: var( --cc-webplayer-primary-foreground, var(--background) );--primary-light: var(--cc-webplayer-primary-light, var(--primary));--neutral: var(--cc-webplayer-neutral, 0 0% 39%);--neutral-foreground: var( --cc-webplayer-neutral-foreground, var(--foreground) );--radius-ui: var(--cc-webplayer-radius-ui, 1rem);--radius-carrousel: var(--cc-webplayer-radius-carrousel, 0);--radius-gallery: var(--cc-webplayer-radius-gallery, 0)}*,: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))}.rotate-180{--tw-rotate: 180deg;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))}.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}.\\*\\:snap-start>*{scroll-snap-align:start}.\\*\\:snap-always>*{scroll-snap-stop:always}.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}}';
2621
- var ft = { exports: {} }, we = {};
2622
- /**
2623
- * @license React
2624
- * react-jsx-runtime.production.min.js
2625
- *
2626
- * Copyright (c) Facebook, Inc. and its affiliates.
2627
- *
2628
- * This source code is licensed under the MIT license found in the
2629
- * LICENSE file in the root directory of this source tree.
2630
- */
2631
- var Ke;
2632
- function $r() {
2633
- if (Ke) return we;
2634
- Ke = 1;
2635
- var e = Le, r = Symbol.for("react.element"), n = Symbol.for("react.fragment"), o = Object.prototype.hasOwnProperty, s = e.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, p = { key: !0, ref: !0, __self: !0, __source: !0 };
2636
- function c(i, d, y) {
2637
- var x, l = {}, w = null, M = null;
2638
- y !== void 0 && (w = "" + y), d.key !== void 0 && (w = "" + d.key), d.ref !== void 0 && (M = d.ref);
2639
- for (x in d) o.call(d, x) && !p.hasOwnProperty(x) && (l[x] = d[x]);
2640
- if (i && i.defaultProps) for (x in d = i.defaultProps, d) l[x] === void 0 && (l[x] = d[x]);
2641
- return { $$typeof: r, type: i, key: w, ref: M, props: l, _owner: s.current };
2642
- }
2643
- return we.Fragment = n, we.jsx = c, we.jsxs = c, we;
2644
- }
2645
- ft.exports = $r();
2646
- var ye = ft.exports, Ur = Object.defineProperty, Xr = (e, r, n) => r in e ? Ur(e, r, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[r] = n, je = (e, r, n) => (Xr(e, typeof r != "symbol" ? r + "" : r, n), n);
2647
- const Gr = {
2648
- stringify: (e) => e,
2649
- parse: (e) => e
2650
- }, Br = {
2651
- stringify: (e) => `${e}`,
2652
- parse: (e) => parseFloat(e)
2653
- }, qr = {
2654
- stringify: (e) => e ? "true" : "false",
2655
- parse: (e) => /^[ty1-9]/i.test(e)
2656
- }, Kr = {
2657
- stringify: (e) => e.name,
2658
- parse: (e, r, n) => {
2659
- const o = (() => {
2660
- if (typeof window < "u" && e in window)
2661
- return window[e];
2662
- if (typeof global < "u" && e in global)
2663
- return global[e];
2664
- })();
2665
- return typeof o == "function" ? o.bind(n) : void 0;
2666
- }
2667
- }, Jr = {
2668
- stringify: (e) => JSON.stringify(e),
2669
- parse: (e) => JSON.parse(e)
2670
- }, Re = {
2671
- string: Gr,
2672
- number: Br,
2673
- boolean: qr,
2674
- function: Kr,
2675
- json: Jr
2676
- };
2677
- function Qr(e) {
2678
- return e.replace(
2679
- /([a-z0-9])([A-Z])/g,
2680
- (r, n, o) => `${n}-${o.toLowerCase()}`
2681
- );
2682
- }
2683
- const Ce = Symbol.for("r2wc.render"), ke = Symbol.for("r2wc.connected"), se = Symbol.for("r2wc.context"), ee = Symbol.for("r2wc.props");
2684
- function en(e, r, n) {
2685
- var o, s, p;
2686
- r.props || (r.props = e.propTypes ? Object.keys(e.propTypes) : []);
2687
- const c = Array.isArray(r.props) ? r.props.slice() : Object.keys(r.props), i = {}, d = {}, y = {};
2688
- for (const l of c) {
2689
- i[l] = Array.isArray(r.props) ? "string" : r.props[l];
2690
- const w = Qr(l);
2691
- d[l] = w, y[w] = l;
2692
- }
2693
- class x extends HTMLElement {
2694
- constructor() {
2695
- super(), je(this, o, !0), je(this, s), je(this, p, {}), je(this, "container"), r.shadow ? this.container = this.attachShadow({
2696
- mode: r.shadow
2697
- }) : this.container = this, this[ee].container = this.container;
2698
- for (const w of c) {
2699
- const M = d[w], v = this.getAttribute(M), j = i[w], z = j ? Re[j] : null;
2700
- z != null && z.parse && v && (this[ee][w] = z.parse(v, M, this));
2701
- }
2702
- }
2703
- static get observedAttributes() {
2704
- return Object.keys(y);
2705
- }
2706
- connectedCallback() {
2707
- this[ke] = !0, this[Ce]();
2708
- }
2709
- disconnectedCallback() {
2710
- this[ke] = !1, this[se] && n.unmount(this[se]), delete this[se];
2711
- }
2712
- attributeChangedCallback(w, M, v) {
2713
- const j = y[w], z = i[j], g = z ? Re[z] : null;
2714
- j in i && g != null && g.parse && v && (this[ee][j] = g.parse(v, w, this), this[Ce]());
2715
- }
2716
- [(o = ke, s = se, p = ee, Ce)]() {
2717
- this[ke] && (this[se] ? n.update(this[se], this[ee]) : this[se] = n.mount(
2718
- this.container,
2719
- e,
2720
- this[ee]
2721
- ));
2722
- }
2723
- }
2724
- for (const l of c) {
2725
- const w = d[l], M = i[l];
2726
- Object.defineProperty(x.prototype, l, {
2727
- enumerable: !0,
2728
- configurable: !0,
2729
- get() {
2730
- return this[ee][l];
2731
- },
2732
- set(v) {
2733
- this[ee][l] = v;
2734
- const j = M ? Re[M] : null;
2735
- if (j != null && j.stringify) {
2736
- const z = j.stringify(v, w, this);
2737
- this.getAttribute(w) !== z && this.setAttribute(w, z);
2738
- } else
2739
- this[Ce]();
2740
- }
2741
- });
2742
- }
2743
- return x;
2744
- }
2745
- function tn(e, r, n) {
2746
- const o = Ft(e), s = Le.createElement(r, n);
2747
- return o.render(s), {
2748
- root: o,
2749
- ReactComponent: r
2750
- };
2751
- }
2752
- function rn({ root: e, ReactComponent: r }, n) {
2753
- const o = Le.createElement(r, n);
2754
- e.render(o);
2755
- }
2756
- function nn({ root: e }) {
2757
- e.unmount();
2758
- }
2759
- function xt(e, r = {}) {
2760
- return en(e, r, { mount: tn, update: rn, unmount: nn });
2761
- }
2762
- function on(e) {
2763
- return e.replace(
2764
- /([a-z0-9])([A-Z])/g,
2765
- (r, n, o) => `${n}-${o.toLowerCase()}`
2766
- );
2767
- }
2768
- function sn(e) {
2769
- const r = {};
2770
- return Object.entries(e).forEach(([n, o]) => {
2771
- r[on(n)] = o.toString();
2772
- }), r;
2773
- }
2774
- const an = (e) => /* @__PURE__ */ ye.jsxs(ye.Fragment, { children: [
2775
- /* @__PURE__ */ ye.jsx("style", { children: Yr }),
2776
- /* @__PURE__ */ ye.jsx(Ar, { ...e })
2777
- ] }), ln = xt(an, {
2778
- shadow: "open",
2779
- props: {
2780
- compositionUrl: "string",
2781
- hideCategories: "boolean",
2782
- infiniteCarrousel: "boolean",
2783
- permanentGallery: "boolean",
2784
- minMediaWidth: "number",
2785
- maxMediaWidth: "number",
2786
- mediaLoadStrategy: "string",
2787
- preventFullScreen: "boolean",
2788
- eventPrefix: "string",
2789
- reverse360: "boolean"
2790
- }
2791
- }), gn = (e) => sn(e), cn = xt(Wr, {
2792
- shadow: "closed",
2793
- props: {
2794
- name: "string",
2795
- color: "string"
2796
- }
2797
- });
2798
- function dn() {
2799
- return !!customElements.get(Ze) && !!customElements.get(Pe);
2800
- }
2801
- function un() {
2802
- customElements.define(Ze, ln), customElements.define(Pe, cn);
2803
- }
2804
- function fn() {
2805
- dn() || un();
2806
- }
2807
- export {
2808
- dn as checkCustomElementsDefinition,
2809
- un as defineCustomElements,
2810
- fn as ensureCustomElementsDefinition,
2811
- gn as webPlayerPropsToAttributes
2812
- };