@acoustte-digital-services/digitalstore-controls-dev 0.8.1-dev.20260505112744 → 0.8.1-dev.20260507110620

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-YWNL6PVB.mjs → HlsPlayer-4VB65GYW.mjs} +1 -1
  2. package/dist/{chunk-EX7D6KBZ.mjs → chunk-JGRYFWF6.mjs} +75 -38
  3. package/dist/index.js +75 -38
  4. package/dist/index.mjs +3 -3
  5. package/package.json +2 -2
package/dist/{HlsPlayer-YWNL6PVB.mjs → HlsPlayer-4VB65GYW.mjs} RENAMED
@@ -1,7 +1,7 @@
1
1
  "use client";
2
2
  import {
3
3
  HlsPlayer_default
4
- } from "./chunk-EX7D6KBZ.mjs";
4
+ } from "./chunk-JGRYFWF6.mjs";
5
5
  export {
6
6
  HlsPlayer_default as default
7
7
  };
package/dist/{chunk-EX7D6KBZ.mjs → chunk-JGRYFWF6.mjs} RENAMED
@@ -284,6 +284,15 @@ var HlsPlayer = React.memo(
284
284
  ]
285
285
  }
286
286
  ),
287
+ /* @__PURE__ */ jsx("style", { children: `
288
+ .hls-play-btn {
289
+ will-change: transform;
290
+ transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
291
+ }
292
+ .hls-play-btn:hover {
293
+ transform: scale(1.08);
294
+ }
295
+ ` }),
287
296
  !isPlayOnHover && /* @__PURE__ */ jsx(
288
297
  "div",
289
298
  {
@@ -292,11 +301,12 @@ var HlsPlayer = React.memo(
292
301
  opacity: isControlsVisible ? 1 : 0,
293
302
  transition: "opacity 0.3s ease"
294
303
  },
295
- children: /* @__PURE__ */ jsx(
304
+ children: /* @__PURE__ */ jsxs(
296
305
  "button",
297
306
  {
298
307
  type: "button",
299
308
  "aria-label": isPlaying ? "Pause" : "Play",
309
+ className: "hls-play-btn",
300
310
  onClick: (e) => {
301
311
  e.stopPropagation();
302
312
  handlePlayPause();
@@ -312,50 +322,77 @@ var HlsPlayer = React.memo(
312
322
  alignItems: "center",
313
323
  justifyContent: "center",
314
324
  background: "linear-gradient(50deg, rgba(243, 31, 73, 1) 0%, rgba(143, 38, 237, 1) 100%)",
315
- flexShrink: 0
316
- // No box-shadow, no transition on background — clean gradient, no hover state.
325
+ flexShrink: 0,
326
+ position: "relative",
327
+ overflow: "hidden"
317
328
  },
318
- children: isPlaying ? (
319
- /* Pause — two rounded bars, sized to match play icon proportions */
320
- /* @__PURE__ */ jsxs(
321
- "svg",
329
+ children: [
330
+ /* @__PURE__ */ jsx(
331
+ "div",
322
332
  {
323
- width: playIconSize,
324
- height: playIconSize,
325
- viewBox: "0 0 20 20",
326
- fill: "none",
327
- xmlns: "http://www.w3.org/2000/svg",
328
- children: [
329
- /* @__PURE__ */ jsx("rect", { x: "3.5", y: "2.5", width: "4.5", height: "15", rx: "1.5", fill: "white" }),
330
- /* @__PURE__ */ jsx("rect", { x: "12", y: "2.5", width: "4.5", height: "15", rx: "1.5", fill: "white" })
331
- ]
333
+ style: {
334
+ position: "absolute",
335
+ inset: 0,
336
+ borderRadius: "50%",
337
+ background: "radial-gradient(ellipse 70% 55% at 30% 25%, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.08) 55%, transparent 75%)",
338
+ pointerEvents: "none"
339
+ }
332
340
  }
333
- )
334
- ) : (
335
- /*
336
- * Play — rounded-corner triangle from the provided SVG path.
337
- * Original viewBox is "0,0,240,250" (with a 5.33x scale group inside).
338
- * We flatten the transform: effective drawing area is 240×250 units.
339
- */
341
+ ),
340
342
  /* @__PURE__ */ jsx(
341
- "svg",
343
+ "div",
342
344
  {
343
- width: playIconSize,
344
- height: playIconSize,
345
- viewBox: "0 0 240 250",
346
- fill: "none",
347
- xmlns: "http://www.w3.org/2000/svg",
348
- style: { transform: "translateX(4%)" },
349
- children: /* @__PURE__ */ jsx(
350
- "path",
351
- {
352
- d: "M60.78 21.93C48.57 22.41 37.33 32.78 37.33 45.87v164.26c0 17.92 19.96 29.67 35.64 20.99l148.31-82.17c16.12-8.93 16.12-33.04 0-41.97L72.97 24.81c-3.92-2.17-8.11-3.07-12.19-2.88z",
353
- fill: "white"
354
- }
355
- )
345
+ style: {
346
+ position: "absolute",
347
+ inset: 0,
348
+ borderRadius: "50%",
349
+ background: "radial-gradient(ellipse 50% 40% at 72% 75%, rgba(255,255,255,0.18) 0%, transparent 70%)",
350
+ pointerEvents: "none"
351
+ }
356
352
  }
353
+ ),
354
+ isPlaying ? (
355
+ /* Pause — two rounded bars, sized to match play icon proportions */
356
+ /* @__PURE__ */ jsxs(
357
+ "svg",
358
+ {
359
+ width: playIconSize,
360
+ height: playIconSize,
361
+ viewBox: "0 0 20 20",
362
+ fill: "none",
363
+ xmlns: "http://www.w3.org/2000/svg",
364
+ children: [
365
+ /* @__PURE__ */ jsx("rect", { x: "3.5", y: "2.5", width: "4.5", height: "15", rx: "1.5", fill: "white" }),
366
+ /* @__PURE__ */ jsx("rect", { x: "12", y: "2.5", width: "4.5", height: "15", rx: "1.5", fill: "white" })
367
+ ]
368
+ }
369
+ )
370
+ ) : (
371
+ /*
372
+ * Play — rounded-corner triangle from the provided SVG path.
373
+ * Original viewBox is "0,0,240,250" (with a 5.33x scale group inside).
374
+ * We flatten the transform: effective drawing area is 240×250 units.
375
+ */
376
+ /* @__PURE__ */ jsx(
377
+ "svg",
378
+ {
379
+ width: playIconSize,
380
+ height: playIconSize,
381
+ viewBox: "0 0 240 250",
382
+ fill: "none",
383
+ xmlns: "http://www.w3.org/2000/svg",
384
+ style: { transform: "translateX(4%)" },
385
+ children: /* @__PURE__ */ jsx(
386
+ "path",
387
+ {
388
+ d: "M60.78 21.93C48.57 22.41 37.33 32.78 37.33 45.87v164.26c0 17.92 19.96 29.67 35.64 20.99l148.31-82.17c16.12-8.93 16.12-33.04 0-41.97L72.97 24.81c-3.92-2.17-8.11-3.07-12.19-2.88z",
389
+ fill: "white"
390
+ }
391
+ )
392
+ }
393
+ )
357
394
  )
358
- )
395
+ ]
359
396
  }
360
397
  )
361
398
  }
package/dist/index.js CHANGED
@@ -690,6 +690,15 @@ var init_HlsPlayer = __esm({
690
690
  ]
691
691
  }
692
692
  ),
693
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("style", { children: `
694
+ .hls-play-btn {
695
+ will-change: transform;
696
+ transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
697
+ }
698
+ .hls-play-btn:hover {
699
+ transform: scale(1.08);
700
+ }
701
+ ` }),
693
702
  !isPlayOnHover && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
694
703
  "div",
695
704
  {
@@ -698,11 +707,12 @@ var init_HlsPlayer = __esm({
698
707
  opacity: isControlsVisible ? 1 : 0,
699
708
  transition: "opacity 0.3s ease"
700
709
  },
701
- children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
710
+ children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
702
711
  "button",
703
712
  {
704
713
  type: "button",
705
714
  "aria-label": isPlaying ? "Pause" : "Play",
715
+ className: "hls-play-btn",
706
716
  onClick: (e) => {
707
717
  e.stopPropagation();
708
718
  handlePlayPause();
@@ -718,50 +728,77 @@ var init_HlsPlayer = __esm({
718
728
  alignItems: "center",
719
729
  justifyContent: "center",
720
730
  background: "linear-gradient(50deg, rgba(243, 31, 73, 1) 0%, rgba(143, 38, 237, 1) 100%)",
721
- flexShrink: 0
722
- // No box-shadow, no transition on background — clean gradient, no hover state.
731
+ flexShrink: 0,
732
+ position: "relative",
733
+ overflow: "hidden"
723
734
  },
724
- children: isPlaying ? (
725
- /* Pause — two rounded bars, sized to match play icon proportions */
726
- /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
727
- "svg",
735
+ children: [
736
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
737
+ "div",
728
738
  {
729
- width: playIconSize,
730
- height: playIconSize,
731
- viewBox: "0 0 20 20",
732
- fill: "none",
733
- xmlns: "http://www.w3.org/2000/svg",
734
- children: [
735
- /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("rect", { x: "3.5", y: "2.5", width: "4.5", height: "15", rx: "1.5", fill: "white" }),
736
- /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("rect", { x: "12", y: "2.5", width: "4.5", height: "15", rx: "1.5", fill: "white" })
737
- ]
739
+ style: {
740
+ position: "absolute",
741
+ inset: 0,
742
+ borderRadius: "50%",
743
+ background: "radial-gradient(ellipse 70% 55% at 30% 25%, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.08) 55%, transparent 75%)",
744
+ pointerEvents: "none"
745
+ }
738
746
  }
739
- )
740
- ) : (
741
- /*
742
- * Play — rounded-corner triangle from the provided SVG path.
743
- * Original viewBox is "0,0,240,250" (with a 5.33x scale group inside).
744
- * We flatten the transform: effective drawing area is 240×250 units.
745
- */
747
+ ),
746
748
  /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
747
- "svg",
749
+ "div",
748
750
  {
749
- width: playIconSize,
750
- height: playIconSize,
751
- viewBox: "0 0 240 250",
752
- fill: "none",
753
- xmlns: "http://www.w3.org/2000/svg",
754
- style: { transform: "translateX(4%)" },
755
- children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
756
- "path",
757
- {
758
- d: "M60.78 21.93C48.57 22.41 37.33 32.78 37.33 45.87v164.26c0 17.92 19.96 29.67 35.64 20.99l148.31-82.17c16.12-8.93 16.12-33.04 0-41.97L72.97 24.81c-3.92-2.17-8.11-3.07-12.19-2.88z",
759
- fill: "white"
760
- }
761
- )
751
+ style: {
752
+ position: "absolute",
753
+ inset: 0,
754
+ borderRadius: "50%",
755
+ background: "radial-gradient(ellipse 50% 40% at 72% 75%, rgba(255,255,255,0.18) 0%, transparent 70%)",
756
+ pointerEvents: "none"
757
+ }
762
758
  }
759
+ ),
760
+ isPlaying ? (
761
+ /* Pause — two rounded bars, sized to match play icon proportions */
762
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
763
+ "svg",
764
+ {
765
+ width: playIconSize,
766
+ height: playIconSize,
767
+ viewBox: "0 0 20 20",
768
+ fill: "none",
769
+ xmlns: "http://www.w3.org/2000/svg",
770
+ children: [
771
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("rect", { x: "3.5", y: "2.5", width: "4.5", height: "15", rx: "1.5", fill: "white" }),
772
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("rect", { x: "12", y: "2.5", width: "4.5", height: "15", rx: "1.5", fill: "white" })
773
+ ]
774
+ }
775
+ )
776
+ ) : (
777
+ /*
778
+ * Play — rounded-corner triangle from the provided SVG path.
779
+ * Original viewBox is "0,0,240,250" (with a 5.33x scale group inside).
780
+ * We flatten the transform: effective drawing area is 240×250 units.
781
+ */
782
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
783
+ "svg",
784
+ {
785
+ width: playIconSize,
786
+ height: playIconSize,
787
+ viewBox: "0 0 240 250",
788
+ fill: "none",
789
+ xmlns: "http://www.w3.org/2000/svg",
790
+ style: { transform: "translateX(4%)" },
791
+ children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
792
+ "path",
793
+ {
794
+ d: "M60.78 21.93C48.57 22.41 37.33 32.78 37.33 45.87v164.26c0 17.92 19.96 29.67 35.64 20.99l148.31-82.17c16.12-8.93 16.12-33.04 0-41.97L72.97 24.81c-3.92-2.17-8.11-3.07-12.19-2.88z",
795
+ fill: "white"
796
+ }
797
+ )
798
+ }
799
+ )
763
800
  )
764
- )
801
+ ]
765
802
  }
766
803
  )
767
804
  }
package/dist/index.mjs CHANGED
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  HlsPlayer_default
3
- } from "./chunk-EX7D6KBZ.mjs";
3
+ } from "./chunk-JGRYFWF6.mjs";
4
4
  import {
5
5
  Button_default,
6
6
  ClientButton_default,
@@ -1963,7 +1963,7 @@ var DeviceAssetSelector_default = DeviceAssetSelector;
1963
1963
 
1964
1964
  // src/components/pageRenderingEngine/nodes/ImageNode.tsx
1965
1965
  import { Fragment as Fragment2, jsx as jsx37 } from "react/jsx-runtime";
1966
- var HlsPlayer = dynamic2(() => import("./HlsPlayer-YWNL6PVB.mjs"), {
1966
+ var HlsPlayer = dynamic2(() => import("./HlsPlayer-4VB65GYW.mjs"), {
1967
1967
  ssr: false
1968
1968
  });
1969
1969
  var getNestedValue = (obj, path) => {
@@ -3645,7 +3645,7 @@ var Pagination_default = Pagination;
3645
3645
  // src/components/pageRenderingEngine/nodes/ImageGalleryNode.tsx
3646
3646
  import dynamic6 from "next/dynamic";
3647
3647
  import { Fragment as Fragment8, jsx as jsx56, jsxs as jsxs31 } from "react/jsx-runtime";
3648
- var HlsPlayer2 = dynamic6(() => import("./HlsPlayer-YWNL6PVB.mjs"), { ssr: false });
3648
+ var HlsPlayer2 = dynamic6(() => import("./HlsPlayer-4VB65GYW.mjs"), { ssr: false });
3649
3649
  var deviceToMediaQuery = (device) => {
3650
3650
  switch (device) {
3651
3651
  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.20260505112744",
3
+ "version": "0.8.1-dev.20260507110620",
4
4
  "description": "Reusable React components",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",
@@ -52,7 +52,7 @@
52
52
  "moment-timezone": "^0.6.2",
53
53
  "ms": "^2.1.3",
54
54
  "mz": "^2.7.0",
55
- "next": "^15.5.15",
55
+ "next": "^15.5.16",
56
56
  "object-assign": "^4.1.1",
57
57
  "pathe": "^2.0.3",
58
58
  "picocolors": "^1.1.1",