@clyrex-digital/clyrex-controls-dev 0.8.1-dev.20260916063140 → 0.8.1-dev.20260917085306
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.
- package/dist/{HlsPlayer-IW52N5RG.mjs → HlsPlayer-AUZ42WTT.mjs} +83 -107
- package/dist/{HlsPlayer-BVS6BVF7.mjs → HlsPlayer-ZGFEVSKL.mjs} +83 -107
- package/dist/index.js +126 -110
- package/dist/index.mjs +46 -6
- package/dist/server.js +126 -110
- package/dist/server.mjs +46 -6
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -476,10 +476,10 @@ var init_HlsPlayer = __esm({
|
|
|
476
476
|
}, [isMobile, resetInactivityTimer]);
|
|
477
477
|
const posterSources = resolvedSources.filter((s) => s.media && s.posterUrl);
|
|
478
478
|
const fallbackPoster = posterUrl ?? resolvedSources.find((s) => !s.media)?.posterUrl ?? resolvedSources[0]?.posterUrl;
|
|
479
|
-
const playBtnSize = "clamp(
|
|
479
|
+
const playBtnSize = "clamp(40px, 6.5vmin, 68px)";
|
|
480
480
|
const iconBtnSize = "clamp(28px, 4.5vmin, 40px)";
|
|
481
481
|
const iconSvgSize = "clamp(14px, 2.5vmin, 20px)";
|
|
482
|
-
const playIconSize = "clamp(
|
|
482
|
+
const playIconSize = "clamp(18px, 3.2vmin, 32px)";
|
|
483
483
|
const iconButtonStyle = {
|
|
484
484
|
pointerEvents: isControlsVisible ? "auto" : "none",
|
|
485
485
|
width: iconBtnSize,
|
|
@@ -569,11 +569,24 @@ var init_HlsPlayer = __esm({
|
|
|
569
569
|
),
|
|
570
570
|
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("style", { children: `
|
|
571
571
|
.hls-play-btn {
|
|
572
|
-
|
|
573
|
-
|
|
572
|
+
transform: translateZ(0);
|
|
573
|
+
-webkit-transform: translateZ(0);
|
|
574
|
+
backface-visibility: hidden;
|
|
575
|
+
-webkit-backface-visibility: hidden;
|
|
576
|
+
transform-origin: center center;
|
|
577
|
+
transition: transform 0.24s cubic-bezier(0.25, 1, 0.5, 1),
|
|
578
|
+
box-shadow 0.24s cubic-bezier(0.25, 1, 0.5, 1),
|
|
579
|
+
background-color 0.2s ease;
|
|
574
580
|
}
|
|
575
581
|
.hls-play-btn:hover {
|
|
576
|
-
transform: scale(1.
|
|
582
|
+
transform: scale(1.05) translateZ(0);
|
|
583
|
+
-webkit-transform: scale(1.05) translateZ(0);
|
|
584
|
+
background-color: #ffffff !important;
|
|
585
|
+
box-shadow: 0 12px 28px -4px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.9), inset 0 1px 1px #ffffff !important;
|
|
586
|
+
}
|
|
587
|
+
.hls-play-btn:active {
|
|
588
|
+
transform: scale(0.96) translateZ(0);
|
|
589
|
+
-webkit-transform: scale(0.96) translateZ(0);
|
|
577
590
|
}
|
|
578
591
|
` }),
|
|
579
592
|
isBuffering && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
@@ -587,51 +600,39 @@ var init_HlsPlayer = __esm({
|
|
|
587
600
|
to { transform: rotate(360deg); }
|
|
588
601
|
}
|
|
589
602
|
.hls-spinner {
|
|
590
|
-
animation: hls-spin
|
|
591
|
-
filter: drop-shadow(0
|
|
592
|
-
drop-shadow(0 0 12px rgba(143, 38, 237, 0.5));
|
|
603
|
+
animation: hls-spin 0.85s linear infinite;
|
|
604
|
+
filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.5));
|
|
593
605
|
}
|
|
594
606
|
` }),
|
|
595
607
|
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
596
608
|
"svg",
|
|
597
609
|
{
|
|
598
610
|
className: "hls-spinner",
|
|
599
|
-
width: "clamp(44px, 8vmin,
|
|
600
|
-
height: "clamp(44px, 8vmin,
|
|
601
|
-
viewBox: "0 0
|
|
611
|
+
width: "clamp(44px, 8vmin, 64px)",
|
|
612
|
+
height: "clamp(44px, 8vmin, 64px)",
|
|
613
|
+
viewBox: "0 0 48 48",
|
|
602
614
|
fill: "none",
|
|
603
615
|
xmlns: "http://www.w3.org/2000/svg",
|
|
604
616
|
children: [
|
|
605
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
x: cx - 2.2,
|
|
625
|
-
y: cy - 5.5,
|
|
626
|
-
width: 4.4,
|
|
627
|
-
height: 11,
|
|
628
|
-
rx: 2.2,
|
|
629
|
-
fill: `rgba(${r1},${g1},${b1},${opacity})`,
|
|
630
|
-
transform: `rotate(${angle}, ${cx}, ${cy})`
|
|
631
|
-
},
|
|
632
|
-
i
|
|
633
|
-
);
|
|
634
|
-
})
|
|
617
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
618
|
+
"circle",
|
|
619
|
+
{
|
|
620
|
+
cx: "24",
|
|
621
|
+
cy: "24",
|
|
622
|
+
r: "18",
|
|
623
|
+
stroke: "rgba(255, 255, 255, 0.25)",
|
|
624
|
+
strokeWidth: "3.5"
|
|
625
|
+
}
|
|
626
|
+
),
|
|
627
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
628
|
+
"path",
|
|
629
|
+
{
|
|
630
|
+
d: "M24 6a18 18 0 0 1 18 18",
|
|
631
|
+
stroke: "#ffffff",
|
|
632
|
+
strokeWidth: "3.5",
|
|
633
|
+
strokeLinecap: "round"
|
|
634
|
+
}
|
|
635
|
+
)
|
|
635
636
|
]
|
|
636
637
|
}
|
|
637
638
|
)
|
|
@@ -646,7 +647,7 @@ var init_HlsPlayer = __esm({
|
|
|
646
647
|
opacity: isControlsVisible ? 1 : 0,
|
|
647
648
|
transition: "opacity 0.3s ease"
|
|
648
649
|
},
|
|
649
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime4.
|
|
650
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
650
651
|
"button",
|
|
651
652
|
{
|
|
652
653
|
type: "button",
|
|
@@ -662,83 +663,58 @@ var init_HlsPlayer = __esm({
|
|
|
662
663
|
width: playBtnSize,
|
|
663
664
|
height: playBtnSize,
|
|
664
665
|
borderRadius: "50%",
|
|
665
|
-
border: "
|
|
666
|
+
border: "1px solid rgba(255, 255, 255, 0.8)",
|
|
666
667
|
cursor: "pointer",
|
|
667
668
|
display: "flex",
|
|
668
669
|
alignItems: "center",
|
|
669
670
|
justifyContent: "center",
|
|
670
|
-
background: "
|
|
671
|
+
background: "rgba(255, 255, 255, 0.92)",
|
|
672
|
+
backdropFilter: "blur(12px)",
|
|
673
|
+
WebkitBackdropFilter: "blur(12px)",
|
|
674
|
+
boxShadow: "0 10px 30px -5px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.12), inset 0 1px 1px rgba(255, 255, 255, 1)",
|
|
671
675
|
flexShrink: 0,
|
|
672
|
-
position: "relative"
|
|
673
|
-
overflow: "hidden"
|
|
676
|
+
position: "relative"
|
|
674
677
|
},
|
|
675
|
-
children:
|
|
676
|
-
/*
|
|
677
|
-
|
|
678
|
+
children: isPlaying ? (
|
|
679
|
+
/* Pause — clean rounded dual bars */
|
|
680
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
681
|
+
"svg",
|
|
678
682
|
{
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
683
|
+
width: playIconSize,
|
|
684
|
+
height: playIconSize,
|
|
685
|
+
viewBox: "0 0 24 24",
|
|
686
|
+
fill: "none",
|
|
687
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
688
|
+
children: [
|
|
689
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("rect", { x: "6.5", y: "4.5", width: "3.5", height: "15", rx: "1.75", fill: "#0f172a" }),
|
|
690
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("rect", { x: "14", y: "4.5", width: "3.5", height: "15", rx: "1.75", fill: "#0f172a" })
|
|
691
|
+
]
|
|
686
692
|
}
|
|
687
|
-
)
|
|
693
|
+
)
|
|
694
|
+
) : (
|
|
695
|
+
/* Play — clean rounded triangle with standard optical balance */
|
|
688
696
|
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
689
|
-
"
|
|
697
|
+
"svg",
|
|
690
698
|
{
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
699
|
+
width: playIconSize,
|
|
700
|
+
height: playIconSize,
|
|
701
|
+
viewBox: "0 0 24 24",
|
|
702
|
+
fill: "none",
|
|
703
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
704
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
705
|
+
"polygon",
|
|
706
|
+
{
|
|
707
|
+
points: "6 3 20 12 6 21 6 3",
|
|
708
|
+
fill: "#0f172a",
|
|
709
|
+
stroke: "#0f172a",
|
|
710
|
+
strokeWidth: "2",
|
|
711
|
+
strokeLinejoin: "round",
|
|
712
|
+
strokeLinecap: "round"
|
|
713
|
+
}
|
|
714
|
+
)
|
|
698
715
|
}
|
|
699
|
-
),
|
|
700
|
-
isPlaying ? (
|
|
701
|
-
/* Pause — two rounded bars, sized to match play icon proportions */
|
|
702
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
703
|
-
"svg",
|
|
704
|
-
{
|
|
705
|
-
width: playIconSize,
|
|
706
|
-
height: playIconSize,
|
|
707
|
-
viewBox: "0 0 20 20",
|
|
708
|
-
fill: "none",
|
|
709
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
710
|
-
children: [
|
|
711
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("rect", { x: "3.5", y: "2.5", width: "4.5", height: "15", rx: "1.5", fill: "white" }),
|
|
712
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("rect", { x: "12", y: "2.5", width: "4.5", height: "15", rx: "1.5", fill: "white" })
|
|
713
|
-
]
|
|
714
|
-
}
|
|
715
|
-
)
|
|
716
|
-
) : (
|
|
717
|
-
/*
|
|
718
|
-
* Play — rounded-corner triangle from the provided SVG path.
|
|
719
|
-
* Original viewBox is "0,0,240,250" (with a 5.33x scale group inside).
|
|
720
|
-
* We flatten the transform: effective drawing area is 240×250 units.
|
|
721
|
-
*/
|
|
722
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
723
|
-
"svg",
|
|
724
|
-
{
|
|
725
|
-
width: playIconSize,
|
|
726
|
-
height: playIconSize,
|
|
727
|
-
viewBox: "0 0 240 250",
|
|
728
|
-
fill: "none",
|
|
729
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
730
|
-
style: { transform: "translateX(4%)" },
|
|
731
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
732
|
-
"path",
|
|
733
|
-
{
|
|
734
|
-
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",
|
|
735
|
-
fill: "white"
|
|
736
|
-
}
|
|
737
|
-
)
|
|
738
|
-
}
|
|
739
|
-
)
|
|
740
716
|
)
|
|
741
|
-
|
|
717
|
+
)
|
|
742
718
|
}
|
|
743
719
|
)
|
|
744
720
|
}
|
|
@@ -7587,10 +7563,31 @@ var AnimationUtility = class {
|
|
|
7587
7563
|
base = `transition: background-color ${duration}ms ${easing} ${delay}ms;`;
|
|
7588
7564
|
visible = `background-color: ${backgroundColor};`;
|
|
7589
7565
|
break;
|
|
7590
|
-
case "Border":
|
|
7591
|
-
|
|
7592
|
-
|
|
7566
|
+
// case "Border":
|
|
7567
|
+
// base = `transition: border-color ${duration}ms ${easing} ${delay}ms;`;
|
|
7568
|
+
// visible = `border-color: ${borderColor};`;
|
|
7569
|
+
// break;
|
|
7570
|
+
// case "Border":
|
|
7571
|
+
// const borderProp = this.getBorderProperty(direction);
|
|
7572
|
+
// base = `transition: ${borderProp} ${duration}ms ${easing} ${delay}ms;`;
|
|
7573
|
+
// visible = `${borderProp}: ${borderColor};`;
|
|
7574
|
+
// break;
|
|
7575
|
+
case "Border": {
|
|
7576
|
+
const side = direction === "up" ? "top" : direction === "down" ? "bottom" : direction;
|
|
7577
|
+
const css = config.cssProperties || {};
|
|
7578
|
+
const width = css["border-top-width"] || css["border-bottom-width"] || css["border-left-width"] || css["border-right-width"] || css["border-width"] || "2px";
|
|
7579
|
+
base = `transition: all ${duration}ms ${easing} ${delay}ms;`;
|
|
7580
|
+
if (side === "all" || !side) {
|
|
7581
|
+
visible = `border-color: ${borderColor} !important;`;
|
|
7582
|
+
} else {
|
|
7583
|
+
visible = `
|
|
7584
|
+
border-${side}-style: solid !important;
|
|
7585
|
+
border-${side}-width: ${width} !important;
|
|
7586
|
+
border-${side}-color: ${borderColor} !important;
|
|
7587
|
+
`;
|
|
7588
|
+
}
|
|
7593
7589
|
break;
|
|
7590
|
+
}
|
|
7594
7591
|
case "Typewriter":
|
|
7595
7592
|
keyframes = `
|
|
7596
7593
|
@keyframes typewriter { from { width: 0 } to { width: 100% } }
|
|
@@ -7638,6 +7635,24 @@ var AnimationUtility = class {
|
|
|
7638
7635
|
return { start: `translateX(${distance}px)`, end: `translateX(0)` };
|
|
7639
7636
|
}
|
|
7640
7637
|
}
|
|
7638
|
+
// Helper method for border animation direction
|
|
7639
|
+
static getBorderProperty(direction) {
|
|
7640
|
+
switch (direction) {
|
|
7641
|
+
case "left":
|
|
7642
|
+
return "border-left-color";
|
|
7643
|
+
case "right":
|
|
7644
|
+
return "border-right-color";
|
|
7645
|
+
case "up":
|
|
7646
|
+
case "top":
|
|
7647
|
+
return "border-top-color";
|
|
7648
|
+
case "down":
|
|
7649
|
+
case "bottom":
|
|
7650
|
+
return "border-bottom-color";
|
|
7651
|
+
case "all":
|
|
7652
|
+
default:
|
|
7653
|
+
return "border-color";
|
|
7654
|
+
}
|
|
7655
|
+
}
|
|
7641
7656
|
};
|
|
7642
7657
|
var AnimationUtility_default = AnimationUtility;
|
|
7643
7658
|
|
|
@@ -8825,6 +8840,7 @@ var DivContainer = async (props) => {
|
|
|
8825
8840
|
{
|
|
8826
8841
|
animation: hoverAnimation.name,
|
|
8827
8842
|
mode: "hover",
|
|
8843
|
+
cssProperties: props.node.cssProperties,
|
|
8828
8844
|
...hoverAnimation.properties
|
|
8829
8845
|
},
|
|
8830
8846
|
animationSelector
|
package/dist/index.mjs
CHANGED
|
@@ -140,7 +140,7 @@ import React3 from "react";
|
|
|
140
140
|
// src/components/DeviceAssetSelector.tsx
|
|
141
141
|
import dynamic2 from "next/dynamic";
|
|
142
142
|
import { jsx as jsx3 } from "react/jsx-runtime";
|
|
143
|
-
var HlsPlayer = dynamic2(() => import("./HlsPlayer-
|
|
143
|
+
var HlsPlayer = dynamic2(() => import("./HlsPlayer-AUZ42WTT.mjs"), { ssr: false });
|
|
144
144
|
var FORMAT_CLASSES = {
|
|
145
145
|
center: "justify-center",
|
|
146
146
|
left: "justify-start",
|
|
@@ -550,7 +550,7 @@ import React15 from "react";
|
|
|
550
550
|
// src/components/pageRenderingEngine/nodes/ImageNode.tsx
|
|
551
551
|
import dynamic7 from "next/dynamic";
|
|
552
552
|
import { jsx as jsx18 } from "react/jsx-runtime";
|
|
553
|
-
var HlsPlayer2 = dynamic7(() => import("./HlsPlayer-
|
|
553
|
+
var HlsPlayer2 = dynamic7(() => import("./HlsPlayer-AUZ42WTT.mjs"), { ssr: false });
|
|
554
554
|
var getNestedValue = (obj, path) => {
|
|
555
555
|
if (!obj || !path) return void 0;
|
|
556
556
|
return path.split(".").reduce((current, key) => {
|
|
@@ -1337,10 +1337,31 @@ var AnimationUtility = class {
|
|
|
1337
1337
|
base = `transition: background-color ${duration}ms ${easing} ${delay}ms;`;
|
|
1338
1338
|
visible = `background-color: ${backgroundColor};`;
|
|
1339
1339
|
break;
|
|
1340
|
-
case "Border":
|
|
1341
|
-
|
|
1342
|
-
|
|
1340
|
+
// case "Border":
|
|
1341
|
+
// base = `transition: border-color ${duration}ms ${easing} ${delay}ms;`;
|
|
1342
|
+
// visible = `border-color: ${borderColor};`;
|
|
1343
|
+
// break;
|
|
1344
|
+
// case "Border":
|
|
1345
|
+
// const borderProp = this.getBorderProperty(direction);
|
|
1346
|
+
// base = `transition: ${borderProp} ${duration}ms ${easing} ${delay}ms;`;
|
|
1347
|
+
// visible = `${borderProp}: ${borderColor};`;
|
|
1348
|
+
// break;
|
|
1349
|
+
case "Border": {
|
|
1350
|
+
const side = direction === "up" ? "top" : direction === "down" ? "bottom" : direction;
|
|
1351
|
+
const css = config.cssProperties || {};
|
|
1352
|
+
const width = css["border-top-width"] || css["border-bottom-width"] || css["border-left-width"] || css["border-right-width"] || css["border-width"] || "2px";
|
|
1353
|
+
base = `transition: all ${duration}ms ${easing} ${delay}ms;`;
|
|
1354
|
+
if (side === "all" || !side) {
|
|
1355
|
+
visible = `border-color: ${borderColor} !important;`;
|
|
1356
|
+
} else {
|
|
1357
|
+
visible = `
|
|
1358
|
+
border-${side}-style: solid !important;
|
|
1359
|
+
border-${side}-width: ${width} !important;
|
|
1360
|
+
border-${side}-color: ${borderColor} !important;
|
|
1361
|
+
`;
|
|
1362
|
+
}
|
|
1343
1363
|
break;
|
|
1364
|
+
}
|
|
1344
1365
|
case "Typewriter":
|
|
1345
1366
|
keyframes = `
|
|
1346
1367
|
@keyframes typewriter { from { width: 0 } to { width: 100% } }
|
|
@@ -1388,6 +1409,24 @@ var AnimationUtility = class {
|
|
|
1388
1409
|
return { start: `translateX(${distance}px)`, end: `translateX(0)` };
|
|
1389
1410
|
}
|
|
1390
1411
|
}
|
|
1412
|
+
// Helper method for border animation direction
|
|
1413
|
+
static getBorderProperty(direction) {
|
|
1414
|
+
switch (direction) {
|
|
1415
|
+
case "left":
|
|
1416
|
+
return "border-left-color";
|
|
1417
|
+
case "right":
|
|
1418
|
+
return "border-right-color";
|
|
1419
|
+
case "up":
|
|
1420
|
+
case "top":
|
|
1421
|
+
return "border-top-color";
|
|
1422
|
+
case "down":
|
|
1423
|
+
case "bottom":
|
|
1424
|
+
return "border-bottom-color";
|
|
1425
|
+
case "all":
|
|
1426
|
+
default:
|
|
1427
|
+
return "border-color";
|
|
1428
|
+
}
|
|
1429
|
+
}
|
|
1391
1430
|
};
|
|
1392
1431
|
var AnimationUtility_default = AnimationUtility;
|
|
1393
1432
|
|
|
@@ -1482,7 +1521,7 @@ var NoDataFound_default = NoDataFound;
|
|
|
1482
1521
|
// src/components/pageRenderingEngine/nodes/ImageGalleryNode.tsx
|
|
1483
1522
|
import dynamic11 from "next/dynamic";
|
|
1484
1523
|
import { Fragment as Fragment5, jsx as jsx33, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
1485
|
-
var HlsPlayer3 = dynamic11(() => import("./HlsPlayer-
|
|
1524
|
+
var HlsPlayer3 = dynamic11(() => import("./HlsPlayer-AUZ42WTT.mjs"), { ssr: false });
|
|
1486
1525
|
var deviceToMediaQuery = (device) => {
|
|
1487
1526
|
switch (device) {
|
|
1488
1527
|
case "lg":
|
|
@@ -2570,6 +2609,7 @@ var DivContainer = async (props) => {
|
|
|
2570
2609
|
{
|
|
2571
2610
|
animation: hoverAnimation.name,
|
|
2572
2611
|
mode: "hover",
|
|
2612
|
+
cssProperties: props.node.cssProperties,
|
|
2573
2613
|
...hoverAnimation.properties
|
|
2574
2614
|
},
|
|
2575
2615
|
animationSelector
|