@acoustte-digital-services/digitalstore-controls-dev 0.8.1-dev.20260505094649 → 0.8.1-dev.20260505112744
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.
|
@@ -203,23 +203,26 @@ var HlsPlayer = React.memo(
|
|
|
203
203
|
}, [isMobile, resetInactivityTimer]);
|
|
204
204
|
const posterSources = resolvedSources.filter((s) => s.media && s.posterUrl);
|
|
205
205
|
const fallbackPoster = posterUrl ?? resolvedSources.find((s) => !s.media)?.posterUrl ?? resolvedSources[0]?.posterUrl;
|
|
206
|
-
const
|
|
206
|
+
const playBtnSize = "clamp(44px, 8vmin, 80px)";
|
|
207
|
+
const iconBtnSize = "clamp(28px, 4.5vmin, 40px)";
|
|
208
|
+
const iconSvgSize = "clamp(14px, 2.5vmin, 20px)";
|
|
209
|
+
const playIconSize = "clamp(24px, 4.5vmin, 44px)";
|
|
210
|
+
const iconButtonStyle = {
|
|
207
211
|
pointerEvents: isControlsVisible ? "auto" : "none",
|
|
208
|
-
width:
|
|
209
|
-
height:
|
|
212
|
+
width: iconBtnSize,
|
|
213
|
+
height: iconBtnSize,
|
|
210
214
|
borderRadius: "50%",
|
|
211
215
|
border: "1.5px solid rgba(255,255,255,0.18)",
|
|
212
216
|
cursor: "pointer",
|
|
213
217
|
display: "flex",
|
|
214
218
|
alignItems: "center",
|
|
215
219
|
justifyContent: "center",
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
transition: "transform 0.18s ease, background 0.18s ease, border-color 0.18s ease"
|
|
220
|
+
background: "rgba(0, 0, 0, 0.45)",
|
|
221
|
+
backdropFilter: "blur(10px)",
|
|
222
|
+
WebkitBackdropFilter: "blur(10px)",
|
|
223
|
+
boxShadow: "0 4px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.1)",
|
|
224
|
+
transition: "transform 0.18s ease",
|
|
225
|
+
flexShrink: 0
|
|
223
226
|
};
|
|
224
227
|
if (resolvedSources.length === 0) return null;
|
|
225
228
|
const showMuteButton = !showControls && !isPlayOnHover;
|
|
@@ -299,15 +302,60 @@ var HlsPlayer = React.memo(
|
|
|
299
302
|
handlePlayPause();
|
|
300
303
|
},
|
|
301
304
|
style: {
|
|
302
|
-
|
|
303
|
-
width:
|
|
304
|
-
height:
|
|
305
|
-
|
|
305
|
+
pointerEvents: isControlsVisible ? "auto" : "none",
|
|
306
|
+
width: playBtnSize,
|
|
307
|
+
height: playBtnSize,
|
|
308
|
+
borderRadius: "50%",
|
|
309
|
+
border: "none",
|
|
310
|
+
cursor: "pointer",
|
|
311
|
+
display: "flex",
|
|
312
|
+
alignItems: "center",
|
|
313
|
+
justifyContent: "center",
|
|
314
|
+
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.
|
|
306
317
|
},
|
|
307
|
-
children: isPlaying ?
|
|
308
|
-
/*
|
|
309
|
-
/* @__PURE__ */
|
|
310
|
-
|
|
318
|
+
children: isPlaying ? (
|
|
319
|
+
/* Pause — two rounded bars, sized to match play icon proportions */
|
|
320
|
+
/* @__PURE__ */ jsxs(
|
|
321
|
+
"svg",
|
|
322
|
+
{
|
|
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
|
+
]
|
|
332
|
+
}
|
|
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
|
+
*/
|
|
340
|
+
/* @__PURE__ */ jsx(
|
|
341
|
+
"svg",
|
|
342
|
+
{
|
|
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
|
+
)
|
|
356
|
+
}
|
|
357
|
+
)
|
|
358
|
+
)
|
|
311
359
|
}
|
|
312
360
|
)
|
|
313
361
|
}
|
|
@@ -333,12 +381,12 @@ var HlsPlayer = React.memo(
|
|
|
333
381
|
e.stopPropagation();
|
|
334
382
|
handleMuteToggle();
|
|
335
383
|
},
|
|
336
|
-
style:
|
|
337
|
-
children: isMuted ? /* @__PURE__ */ jsxs("svg", { width:
|
|
384
|
+
style: iconButtonStyle,
|
|
385
|
+
children: isMuted ? /* @__PURE__ */ jsxs("svg", { width: iconSvgSize, height: iconSvgSize, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
|
|
338
386
|
/* @__PURE__ */ jsx("path", { d: "M11 5L6 9H2v6h4l5 4V5Z", fill: "white" }),
|
|
339
387
|
/* @__PURE__ */ jsx("line", { x1: "23", y1: "9", x2: "17", y2: "15", stroke: "white", strokeWidth: "2", strokeLinecap: "round" }),
|
|
340
388
|
/* @__PURE__ */ jsx("line", { x1: "17", y1: "9", x2: "23", y2: "15", stroke: "white", strokeWidth: "2", strokeLinecap: "round" })
|
|
341
|
-
] }) : /* @__PURE__ */ jsxs("svg", { width:
|
|
389
|
+
] }) : /* @__PURE__ */ jsxs("svg", { width: iconSvgSize, height: iconSvgSize, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
|
|
342
390
|
/* @__PURE__ */ jsx("path", { d: "M11 5L6 9H2v6h4l5 4V5Z", fill: "white" }),
|
|
343
391
|
/* @__PURE__ */ jsx("path", { d: "M15.54 8.46a5 5 0 0 1 0 7.07", stroke: "white", strokeWidth: "2", strokeLinecap: "round" }),
|
|
344
392
|
/* @__PURE__ */ jsx("path", { d: "M19.07 4.93a10 10 0 0 1 0 14.14", stroke: "white", strokeWidth: "2", strokeLinecap: "round" })
|
|
@@ -354,14 +402,8 @@ var HlsPlayer = React.memo(
|
|
|
354
402
|
e.stopPropagation();
|
|
355
403
|
handleFullscreenToggle();
|
|
356
404
|
},
|
|
357
|
-
style:
|
|
358
|
-
children: isFullscreen ? (
|
|
359
|
-
/* Compress / exit icon — two inward-pointing arrows */
|
|
360
|
-
/* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M8 3v5H3M21 8h-5V3M3 16h5v5M16 21v-5h5", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
|
|
361
|
-
) : (
|
|
362
|
-
/* Expand icon — four outward-pointing arrows */
|
|
363
|
-
/* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M3 8V3h5M16 3h5v5M21 16v5h-5M8 21H3v-5", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
|
|
364
|
-
)
|
|
405
|
+
style: iconButtonStyle,
|
|
406
|
+
children: isFullscreen ? /* @__PURE__ */ jsx("svg", { width: iconSvgSize, height: iconSvgSize, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M8 3v5H3M21 8h-5V3M3 16h5v5M16 21v-5h5", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) : /* @__PURE__ */ jsx("svg", { width: iconSvgSize, height: iconSvgSize, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M3 8V3h5M16 3h5v5M21 16v5h-5M8 21H3v-5", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
|
|
365
407
|
}
|
|
366
408
|
)
|
|
367
409
|
]
|
package/dist/index.js
CHANGED
|
@@ -609,23 +609,26 @@ var init_HlsPlayer = __esm({
|
|
|
609
609
|
}, [isMobile, resetInactivityTimer]);
|
|
610
610
|
const posterSources = resolvedSources.filter((s) => s.media && s.posterUrl);
|
|
611
611
|
const fallbackPoster = posterUrl ?? resolvedSources.find((s) => !s.media)?.posterUrl ?? resolvedSources[0]?.posterUrl;
|
|
612
|
-
const
|
|
612
|
+
const playBtnSize = "clamp(44px, 8vmin, 80px)";
|
|
613
|
+
const iconBtnSize = "clamp(28px, 4.5vmin, 40px)";
|
|
614
|
+
const iconSvgSize = "clamp(14px, 2.5vmin, 20px)";
|
|
615
|
+
const playIconSize = "clamp(24px, 4.5vmin, 44px)";
|
|
616
|
+
const iconButtonStyle = {
|
|
613
617
|
pointerEvents: isControlsVisible ? "auto" : "none",
|
|
614
|
-
width:
|
|
615
|
-
height:
|
|
618
|
+
width: iconBtnSize,
|
|
619
|
+
height: iconBtnSize,
|
|
616
620
|
borderRadius: "50%",
|
|
617
621
|
border: "1.5px solid rgba(255,255,255,0.18)",
|
|
618
622
|
cursor: "pointer",
|
|
619
623
|
display: "flex",
|
|
620
624
|
alignItems: "center",
|
|
621
625
|
justifyContent: "center",
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
transition: "transform 0.18s ease, background 0.18s ease, border-color 0.18s ease"
|
|
626
|
+
background: "rgba(0, 0, 0, 0.45)",
|
|
627
|
+
backdropFilter: "blur(10px)",
|
|
628
|
+
WebkitBackdropFilter: "blur(10px)",
|
|
629
|
+
boxShadow: "0 4px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.1)",
|
|
630
|
+
transition: "transform 0.18s ease",
|
|
631
|
+
flexShrink: 0
|
|
629
632
|
};
|
|
630
633
|
if (resolvedSources.length === 0) return null;
|
|
631
634
|
const showMuteButton = !showControls && !isPlayOnHover;
|
|
@@ -705,15 +708,60 @@ var init_HlsPlayer = __esm({
|
|
|
705
708
|
handlePlayPause();
|
|
706
709
|
},
|
|
707
710
|
style: {
|
|
708
|
-
|
|
709
|
-
width:
|
|
710
|
-
height:
|
|
711
|
-
|
|
711
|
+
pointerEvents: isControlsVisible ? "auto" : "none",
|
|
712
|
+
width: playBtnSize,
|
|
713
|
+
height: playBtnSize,
|
|
714
|
+
borderRadius: "50%",
|
|
715
|
+
border: "none",
|
|
716
|
+
cursor: "pointer",
|
|
717
|
+
display: "flex",
|
|
718
|
+
alignItems: "center",
|
|
719
|
+
justifyContent: "center",
|
|
720
|
+
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.
|
|
712
723
|
},
|
|
713
|
-
children: isPlaying ?
|
|
714
|
-
/*
|
|
715
|
-
/* @__PURE__ */ (0, import_jsx_runtime41.
|
|
716
|
-
|
|
724
|
+
children: isPlaying ? (
|
|
725
|
+
/* Pause — two rounded bars, sized to match play icon proportions */
|
|
726
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
|
|
727
|
+
"svg",
|
|
728
|
+
{
|
|
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
|
+
]
|
|
738
|
+
}
|
|
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
|
+
*/
|
|
746
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
747
|
+
"svg",
|
|
748
|
+
{
|
|
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
|
+
)
|
|
762
|
+
}
|
|
763
|
+
)
|
|
764
|
+
)
|
|
717
765
|
}
|
|
718
766
|
)
|
|
719
767
|
}
|
|
@@ -739,12 +787,12 @@ var init_HlsPlayer = __esm({
|
|
|
739
787
|
e.stopPropagation();
|
|
740
788
|
handleMuteToggle();
|
|
741
789
|
},
|
|
742
|
-
style:
|
|
743
|
-
children: isMuted ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("svg", { width:
|
|
790
|
+
style: iconButtonStyle,
|
|
791
|
+
children: isMuted ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("svg", { width: iconSvgSize, height: iconSvgSize, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
|
|
744
792
|
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)("path", { d: "M11 5L6 9H2v6h4l5 4V5Z", fill: "white" }),
|
|
745
793
|
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)("line", { x1: "23", y1: "9", x2: "17", y2: "15", stroke: "white", strokeWidth: "2", strokeLinecap: "round" }),
|
|
746
794
|
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)("line", { x1: "17", y1: "9", x2: "23", y2: "15", stroke: "white", strokeWidth: "2", strokeLinecap: "round" })
|
|
747
|
-
] }) : /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("svg", { width:
|
|
795
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("svg", { width: iconSvgSize, height: iconSvgSize, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
|
|
748
796
|
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)("path", { d: "M11 5L6 9H2v6h4l5 4V5Z", fill: "white" }),
|
|
749
797
|
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)("path", { d: "M15.54 8.46a5 5 0 0 1 0 7.07", stroke: "white", strokeWidth: "2", strokeLinecap: "round" }),
|
|
750
798
|
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)("path", { d: "M19.07 4.93a10 10 0 0 1 0 14.14", stroke: "white", strokeWidth: "2", strokeLinecap: "round" })
|
|
@@ -760,14 +808,8 @@ var init_HlsPlayer = __esm({
|
|
|
760
808
|
e.stopPropagation();
|
|
761
809
|
handleFullscreenToggle();
|
|
762
810
|
},
|
|
763
|
-
style:
|
|
764
|
-
children: isFullscreen ? (
|
|
765
|
-
/* Compress / exit icon — two inward-pointing arrows */
|
|
766
|
-
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("path", { d: "M8 3v5H3M21 8h-5V3M3 16h5v5M16 21v-5h5", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
|
|
767
|
-
) : (
|
|
768
|
-
/* Expand icon — four outward-pointing arrows */
|
|
769
|
-
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("path", { d: "M3 8V3h5M16 3h5v5M21 16v5h-5M8 21H3v-5", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
|
|
770
|
-
)
|
|
811
|
+
style: iconButtonStyle,
|
|
812
|
+
children: isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("svg", { width: iconSvgSize, height: iconSvgSize, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("path", { d: "M8 3v5H3M21 8h-5V3M3 16h5v5M16 21v-5h5", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("svg", { width: iconSvgSize, height: iconSvgSize, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("path", { d: "M3 8V3h5M16 3h5v5M21 16v5h-5M8 21H3v-5", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
|
|
771
813
|
}
|
|
772
814
|
)
|
|
773
815
|
]
|
package/dist/index.mjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import {
|
|
2
2
|
HlsPlayer_default
|
|
3
|
-
} from "./chunk-
|
|
3
|
+
} from "./chunk-EX7D6KBZ.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-
|
|
1966
|
+
var HlsPlayer = dynamic2(() => import("./HlsPlayer-YWNL6PVB.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-
|
|
3648
|
+
var HlsPlayer2 = dynamic6(() => import("./HlsPlayer-YWNL6PVB.mjs"), { ssr: false });
|
|
3649
3649
|
var deviceToMediaQuery = (device) => {
|
|
3650
3650
|
switch (device) {
|
|
3651
3651
|
case "sm":
|
package/package.json
CHANGED