@acoustte-digital-services/digitalstore-controls-dev 0.8.1-dev.20260603093340 → 0.8.1-dev.20260604044508

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.
Files changed (5) hide show
  1. package/dist/{HlsPlayer-SM3WGJSW.mjs → HlsPlayer-DZNDKG2P.mjs} +1 -1
  2. package/dist/{chunk-4XZGG725.mjs → chunk-SDNYBQSI.mjs} +60 -24
  3. package/dist/index.js +60 -24
  4. package/dist/index.mjs +3 -3
  5. package/package.json +1 -1
package/dist/{HlsPlayer-SM3WGJSW.mjs → HlsPlayer-DZNDKG2P.mjs} RENAMED
@@ -1,7 +1,7 @@
1
1
  "use client";
2
2
  import {
3
3
  HlsPlayer_default
4
- } from "./chunk-4XZGG725.mjs";
4
+ } from "./chunk-SDNYBQSI.mjs";
5
5
  export {
6
6
  HlsPlayer_default as default
7
7
  };
package/dist/{chunk-4XZGG725.mjs → chunk-SDNYBQSI.mjs} RENAMED
@@ -36,7 +36,8 @@ var HlsPlayer = React.memo(
36
36
  showControls = true,
37
37
  loop = false,
38
38
  playOptions = "autoplay",
39
- placementCode = ""
39
+ placementCode = "",
40
+ styles
40
41
  }) => {
41
42
  const containerRef = useRef(null);
42
43
  const videoRef = useRef(null);
@@ -305,7 +306,8 @@ var HlsPlayer = React.memo(
305
306
  "div",
306
307
  {
307
308
  ref: containerRef,
308
- className: "relative w-full aspect-video bg-black",
309
+ className: "relative w-full overflow-hidden aspect-video bg-black",
310
+ style: styles,
309
311
  onMouseEnter: handleMouseEnter,
310
312
  onMouseLeave: handleMouseLeave,
311
313
  onMouseMove: handleMouseMove,
@@ -314,7 +316,7 @@ var HlsPlayer = React.memo(
314
316
  "video",
315
317
  {
316
318
  ref: videoRef,
317
- className: "w-full h-full object-contain",
319
+ className: "w-full h-full object-cover",
318
320
  poster: fallbackPoster,
319
321
  controls: showControls && (isMobile || isPlaying),
320
322
  muted: startsMuted,
@@ -368,32 +370,66 @@ var HlsPlayer = React.memo(
368
370
  transform: scale(1.08);
369
371
  }
370
372
  ` }),
371
- isBuffering && /* @__PURE__ */ jsx(
373
+ isBuffering && /* @__PURE__ */ jsxs(
372
374
  "div",
373
375
  {
374
376
  className: "absolute inset-0 flex items-center justify-center pointer-events-none",
375
377
  style: { zIndex: 10 },
376
- children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
378
+ children: [
377
379
  /* @__PURE__ */ jsx("style", { children: `
378
- @keyframes hls-bounce {
379
- 0%, 80%, 100% { transform: translateY(0); opacity: 0.5; }
380
- 40% { transform: translateY(-10px); opacity: 1; }
381
- }
382
- .hls-dot {
383
- width: clamp(8px, 1.5vmin, 12px);
384
- height: clamp(8px, 1.5vmin, 12px);
385
- border-radius: 50%;
386
- background: white;
387
- animation: hls-bounce 1.1s ease-in-out infinite;
388
- }
389
- .hls-dot:nth-child(1) { animation-delay: 0s; }
390
- .hls-dot:nth-child(2) { animation-delay: 0.18s; }
391
- .hls-dot:nth-child(3) { animation-delay: 0.36s; }
392
- ` }),
393
- /* @__PURE__ */ jsx("div", { className: "hls-dot" }),
394
- /* @__PURE__ */ jsx("div", { className: "hls-dot" }),
395
- /* @__PURE__ */ jsx("div", { className: "hls-dot" })
396
- ] })
380
+ @keyframes hls-spin {
381
+ to { transform: rotate(360deg); }
382
+ }
383
+ .hls-spinner {
384
+ animation: hls-spin 1s linear infinite;
385
+ filter: drop-shadow(0 0 6px rgba(243, 31, 73, 0.7))
386
+ drop-shadow(0 0 12px rgba(143, 38, 237, 0.5));
387
+ }
388
+ ` }),
389
+ /* @__PURE__ */ jsxs(
390
+ "svg",
391
+ {
392
+ className: "hls-spinner",
393
+ width: "clamp(44px, 8vmin, 72px)",
394
+ height: "clamp(44px, 8vmin, 72px)",
395
+ viewBox: "0 0 72 72",
396
+ fill: "none",
397
+ xmlns: "http://www.w3.org/2000/svg",
398
+ children: [
399
+ /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: "hls-arc-grad", x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
400
+ /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "rgba(243,31,73,0)" }),
401
+ /* @__PURE__ */ jsx("stop", { offset: "40%", stopColor: "rgba(243,31,73,1)" }),
402
+ /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "rgba(143,38,237,1)" })
403
+ ] }) }),
404
+ Array.from({ length: 18 }).map((_, i) => {
405
+ const angle = i / 18 * 360;
406
+ const opacity = 0.15 + i / 17 * 0.85;
407
+ const rad = (angle - 90) * (Math.PI / 180);
408
+ const r = 30;
409
+ const cx = 36 + r * Math.cos(rad);
410
+ const cy = 36 + r * Math.sin(rad);
411
+ const t = i / 17;
412
+ const r1 = Math.round(243 * (1 - t) + 143 * t);
413
+ const g1 = Math.round(31 * (1 - t) + 38 * t);
414
+ const b1 = Math.round(73 * (1 - t) + 237 * t);
415
+ return /* @__PURE__ */ jsx(
416
+ "rect",
417
+ {
418
+ x: cx - 2.2,
419
+ y: cy - 5.5,
420
+ width: 4.4,
421
+ height: 11,
422
+ rx: 2.2,
423
+ fill: `rgba(${r1},${g1},${b1},${opacity})`,
424
+ transform: `rotate(${angle}, ${cx}, ${cy})`
425
+ },
426
+ i
427
+ );
428
+ })
429
+ ]
430
+ }
431
+ )
432
+ ]
397
433
  }
398
434
  ),
399
435
  !isPlayOnHover && !isBuffering && /* @__PURE__ */ jsx(
package/dist/index.js CHANGED
@@ -200,7 +200,8 @@ var init_HlsPlayer = __esm({
200
200
  showControls = true,
201
201
  loop = false,
202
202
  playOptions = "autoplay",
203
- placementCode = ""
203
+ placementCode = "",
204
+ styles
204
205
  }) => {
205
206
  const containerRef = (0, import_react4.useRef)(null);
206
207
  const videoRef = (0, import_react4.useRef)(null);
@@ -469,7 +470,8 @@ var init_HlsPlayer = __esm({
469
470
  "div",
470
471
  {
471
472
  ref: containerRef,
472
- className: "relative w-full aspect-video bg-black",
473
+ className: "relative w-full overflow-hidden aspect-video bg-black",
474
+ style: styles,
473
475
  onMouseEnter: handleMouseEnter,
474
476
  onMouseLeave: handleMouseLeave,
475
477
  onMouseMove: handleMouseMove,
@@ -478,7 +480,7 @@ var init_HlsPlayer = __esm({
478
480
  "video",
479
481
  {
480
482
  ref: videoRef,
481
- className: "w-full h-full object-contain",
483
+ className: "w-full h-full object-cover",
482
484
  poster: fallbackPoster,
483
485
  controls: showControls && (isMobile || isPlaying),
484
486
  muted: startsMuted,
@@ -532,32 +534,66 @@ var init_HlsPlayer = __esm({
532
534
  transform: scale(1.08);
533
535
  }
534
536
  ` }),
535
- isBuffering && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
537
+ isBuffering && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
536
538
  "div",
537
539
  {
538
540
  className: "absolute inset-0 flex items-center justify-center pointer-events-none",
539
541
  style: { zIndex: 10 },
540
- children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
542
+ children: [
541
543
  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("style", { children: `
542
- @keyframes hls-bounce {
543
- 0%, 80%, 100% { transform: translateY(0); opacity: 0.5; }
544
- 40% { transform: translateY(-10px); opacity: 1; }
545
- }
546
- .hls-dot {
547
- width: clamp(8px, 1.5vmin, 12px);
548
- height: clamp(8px, 1.5vmin, 12px);
549
- border-radius: 50%;
550
- background: white;
551
- animation: hls-bounce 1.1s ease-in-out infinite;
552
- }
553
- .hls-dot:nth-child(1) { animation-delay: 0s; }
554
- .hls-dot:nth-child(2) { animation-delay: 0.18s; }
555
- .hls-dot:nth-child(3) { animation-delay: 0.36s; }
556
- ` }),
557
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "hls-dot" }),
558
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "hls-dot" }),
559
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "hls-dot" })
560
- ] })
544
+ @keyframes hls-spin {
545
+ to { transform: rotate(360deg); }
546
+ }
547
+ .hls-spinner {
548
+ animation: hls-spin 1s linear infinite;
549
+ filter: drop-shadow(0 0 6px rgba(243, 31, 73, 0.7))
550
+ drop-shadow(0 0 12px rgba(143, 38, 237, 0.5));
551
+ }
552
+ ` }),
553
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
554
+ "svg",
555
+ {
556
+ className: "hls-spinner",
557
+ width: "clamp(44px, 8vmin, 72px)",
558
+ height: "clamp(44px, 8vmin, 72px)",
559
+ viewBox: "0 0 72 72",
560
+ fill: "none",
561
+ xmlns: "http://www.w3.org/2000/svg",
562
+ children: [
563
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("linearGradient", { id: "hls-arc-grad", x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
564
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("stop", { offset: "0%", stopColor: "rgba(243,31,73,0)" }),
565
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("stop", { offset: "40%", stopColor: "rgba(243,31,73,1)" }),
566
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("stop", { offset: "100%", stopColor: "rgba(143,38,237,1)" })
567
+ ] }) }),
568
+ Array.from({ length: 18 }).map((_, i) => {
569
+ const angle = i / 18 * 360;
570
+ const opacity = 0.15 + i / 17 * 0.85;
571
+ const rad = (angle - 90) * (Math.PI / 180);
572
+ const r = 30;
573
+ const cx = 36 + r * Math.cos(rad);
574
+ const cy = 36 + r * Math.sin(rad);
575
+ const t = i / 17;
576
+ const r1 = Math.round(243 * (1 - t) + 143 * t);
577
+ const g1 = Math.round(31 * (1 - t) + 38 * t);
578
+ const b1 = Math.round(73 * (1 - t) + 237 * t);
579
+ return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
580
+ "rect",
581
+ {
582
+ x: cx - 2.2,
583
+ y: cy - 5.5,
584
+ width: 4.4,
585
+ height: 11,
586
+ rx: 2.2,
587
+ fill: `rgba(${r1},${g1},${b1},${opacity})`,
588
+ transform: `rotate(${angle}, ${cx}, ${cy})`
589
+ },
590
+ i
591
+ );
592
+ })
593
+ ]
594
+ }
595
+ )
596
+ ]
561
597
  }
562
598
  ),
563
599
  !isPlayOnHover && !isBuffering && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
package/dist/index.mjs CHANGED
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  HlsPlayer_default
3
- } from "./chunk-4XZGG725.mjs";
3
+ } from "./chunk-SDNYBQSI.mjs";
4
4
  import {
5
5
  Button_default,
6
6
  ClientButton_default,
@@ -2055,7 +2055,7 @@ import React30 from "react";
2055
2055
  // src/components/pageRenderingEngine/nodes/ImageNode.tsx
2056
2056
  import dynamic3 from "next/dynamic";
2057
2057
  import { jsx as jsx39 } from "react/jsx-runtime";
2058
- var HlsPlayer = dynamic3(() => import("./HlsPlayer-SM3WGJSW.mjs"), { ssr: false });
2058
+ var HlsPlayer = dynamic3(() => import("./HlsPlayer-DZNDKG2P.mjs"), { ssr: false });
2059
2059
  var getNestedValue = (obj, path) => {
2060
2060
  if (!obj || !path) return void 0;
2061
2061
  return path.split(".").reduce((current, key) => {
@@ -3715,7 +3715,7 @@ var Pagination_default = Pagination;
3715
3715
  // src/components/pageRenderingEngine/nodes/ImageGalleryNode.tsx
3716
3716
  import dynamic7 from "next/dynamic";
3717
3717
  import { Fragment as Fragment7, jsx as jsx58, jsxs as jsxs31 } from "react/jsx-runtime";
3718
- var HlsPlayer2 = dynamic7(() => import("./HlsPlayer-SM3WGJSW.mjs"), { ssr: false });
3718
+ var HlsPlayer2 = dynamic7(() => import("./HlsPlayer-DZNDKG2P.mjs"), { ssr: false });
3719
3719
  var deviceToMediaQuery = (device) => {
3720
3720
  switch (device) {
3721
3721
  case "sm":
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@acoustte-digital-services/digitalstore-controls-dev",
3
- "version": "0.8.1-dev.20260603093340",
3
+ "version": "0.8.1-dev.20260604044508",
4
4
  "description": "Reusable React components",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",