@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/server.js
CHANGED
|
@@ -346,10 +346,10 @@ var init_HlsPlayer = __esm({
|
|
|
346
346
|
}, [isMobile, resetInactivityTimer]);
|
|
347
347
|
const posterSources = resolvedSources.filter((s) => s.media && s.posterUrl);
|
|
348
348
|
const fallbackPoster = posterUrl ?? resolvedSources.find((s) => !s.media)?.posterUrl ?? resolvedSources[0]?.posterUrl;
|
|
349
|
-
const playBtnSize = "clamp(
|
|
349
|
+
const playBtnSize = "clamp(40px, 6.5vmin, 68px)";
|
|
350
350
|
const iconBtnSize = "clamp(28px, 4.5vmin, 40px)";
|
|
351
351
|
const iconSvgSize = "clamp(14px, 2.5vmin, 20px)";
|
|
352
|
-
const playIconSize = "clamp(
|
|
352
|
+
const playIconSize = "clamp(18px, 3.2vmin, 32px)";
|
|
353
353
|
const iconButtonStyle = {
|
|
354
354
|
pointerEvents: isControlsVisible ? "auto" : "none",
|
|
355
355
|
width: iconBtnSize,
|
|
@@ -439,11 +439,24 @@ var init_HlsPlayer = __esm({
|
|
|
439
439
|
),
|
|
440
440
|
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("style", { children: `
|
|
441
441
|
.hls-play-btn {
|
|
442
|
-
|
|
443
|
-
|
|
442
|
+
transform: translateZ(0);
|
|
443
|
+
-webkit-transform: translateZ(0);
|
|
444
|
+
backface-visibility: hidden;
|
|
445
|
+
-webkit-backface-visibility: hidden;
|
|
446
|
+
transform-origin: center center;
|
|
447
|
+
transition: transform 0.24s cubic-bezier(0.25, 1, 0.5, 1),
|
|
448
|
+
box-shadow 0.24s cubic-bezier(0.25, 1, 0.5, 1),
|
|
449
|
+
background-color 0.2s ease;
|
|
444
450
|
}
|
|
445
451
|
.hls-play-btn:hover {
|
|
446
|
-
transform: scale(1.
|
|
452
|
+
transform: scale(1.05) translateZ(0);
|
|
453
|
+
-webkit-transform: scale(1.05) translateZ(0);
|
|
454
|
+
background-color: #ffffff !important;
|
|
455
|
+
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;
|
|
456
|
+
}
|
|
457
|
+
.hls-play-btn:active {
|
|
458
|
+
transform: scale(0.96) translateZ(0);
|
|
459
|
+
-webkit-transform: scale(0.96) translateZ(0);
|
|
447
460
|
}
|
|
448
461
|
` }),
|
|
449
462
|
isBuffering && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
@@ -457,51 +470,39 @@ var init_HlsPlayer = __esm({
|
|
|
457
470
|
to { transform: rotate(360deg); }
|
|
458
471
|
}
|
|
459
472
|
.hls-spinner {
|
|
460
|
-
animation: hls-spin
|
|
461
|
-
filter: drop-shadow(0
|
|
462
|
-
drop-shadow(0 0 12px rgba(143, 38, 237, 0.5));
|
|
473
|
+
animation: hls-spin 0.85s linear infinite;
|
|
474
|
+
filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.5));
|
|
463
475
|
}
|
|
464
476
|
` }),
|
|
465
477
|
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
466
478
|
"svg",
|
|
467
479
|
{
|
|
468
480
|
className: "hls-spinner",
|
|
469
|
-
width: "clamp(44px, 8vmin,
|
|
470
|
-
height: "clamp(44px, 8vmin,
|
|
471
|
-
viewBox: "0 0
|
|
481
|
+
width: "clamp(44px, 8vmin, 64px)",
|
|
482
|
+
height: "clamp(44px, 8vmin, 64px)",
|
|
483
|
+
viewBox: "0 0 48 48",
|
|
472
484
|
fill: "none",
|
|
473
485
|
xmlns: "http://www.w3.org/2000/svg",
|
|
474
486
|
children: [
|
|
475
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
x: cx - 2.2,
|
|
495
|
-
y: cy - 5.5,
|
|
496
|
-
width: 4.4,
|
|
497
|
-
height: 11,
|
|
498
|
-
rx: 2.2,
|
|
499
|
-
fill: `rgba(${r1},${g1},${b1},${opacity})`,
|
|
500
|
-
transform: `rotate(${angle}, ${cx}, ${cy})`
|
|
501
|
-
},
|
|
502
|
-
i
|
|
503
|
-
);
|
|
504
|
-
})
|
|
487
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
488
|
+
"circle",
|
|
489
|
+
{
|
|
490
|
+
cx: "24",
|
|
491
|
+
cy: "24",
|
|
492
|
+
r: "18",
|
|
493
|
+
stroke: "rgba(255, 255, 255, 0.25)",
|
|
494
|
+
strokeWidth: "3.5"
|
|
495
|
+
}
|
|
496
|
+
),
|
|
497
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
498
|
+
"path",
|
|
499
|
+
{
|
|
500
|
+
d: "M24 6a18 18 0 0 1 18 18",
|
|
501
|
+
stroke: "#ffffff",
|
|
502
|
+
strokeWidth: "3.5",
|
|
503
|
+
strokeLinecap: "round"
|
|
504
|
+
}
|
|
505
|
+
)
|
|
505
506
|
]
|
|
506
507
|
}
|
|
507
508
|
)
|
|
@@ -516,7 +517,7 @@ var init_HlsPlayer = __esm({
|
|
|
516
517
|
opacity: isControlsVisible ? 1 : 0,
|
|
517
518
|
transition: "opacity 0.3s ease"
|
|
518
519
|
},
|
|
519
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime3.
|
|
520
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
520
521
|
"button",
|
|
521
522
|
{
|
|
522
523
|
type: "button",
|
|
@@ -532,83 +533,58 @@ var init_HlsPlayer = __esm({
|
|
|
532
533
|
width: playBtnSize,
|
|
533
534
|
height: playBtnSize,
|
|
534
535
|
borderRadius: "50%",
|
|
535
|
-
border: "
|
|
536
|
+
border: "1px solid rgba(255, 255, 255, 0.8)",
|
|
536
537
|
cursor: "pointer",
|
|
537
538
|
display: "flex",
|
|
538
539
|
alignItems: "center",
|
|
539
540
|
justifyContent: "center",
|
|
540
|
-
background: "
|
|
541
|
+
background: "rgba(255, 255, 255, 0.92)",
|
|
542
|
+
backdropFilter: "blur(12px)",
|
|
543
|
+
WebkitBackdropFilter: "blur(12px)",
|
|
544
|
+
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)",
|
|
541
545
|
flexShrink: 0,
|
|
542
|
-
position: "relative"
|
|
543
|
-
overflow: "hidden"
|
|
546
|
+
position: "relative"
|
|
544
547
|
},
|
|
545
|
-
children:
|
|
546
|
-
/*
|
|
547
|
-
|
|
548
|
+
children: isPlaying ? (
|
|
549
|
+
/* Pause — clean rounded dual bars */
|
|
550
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
551
|
+
"svg",
|
|
548
552
|
{
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
553
|
+
width: playIconSize,
|
|
554
|
+
height: playIconSize,
|
|
555
|
+
viewBox: "0 0 24 24",
|
|
556
|
+
fill: "none",
|
|
557
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
558
|
+
children: [
|
|
559
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { x: "6.5", y: "4.5", width: "3.5", height: "15", rx: "1.75", fill: "#0f172a" }),
|
|
560
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { x: "14", y: "4.5", width: "3.5", height: "15", rx: "1.75", fill: "#0f172a" })
|
|
561
|
+
]
|
|
556
562
|
}
|
|
557
|
-
)
|
|
563
|
+
)
|
|
564
|
+
) : (
|
|
565
|
+
/* Play — clean rounded triangle with standard optical balance */
|
|
558
566
|
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
559
|
-
"
|
|
567
|
+
"svg",
|
|
560
568
|
{
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
569
|
+
width: playIconSize,
|
|
570
|
+
height: playIconSize,
|
|
571
|
+
viewBox: "0 0 24 24",
|
|
572
|
+
fill: "none",
|
|
573
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
574
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
575
|
+
"polygon",
|
|
576
|
+
{
|
|
577
|
+
points: "6 3 20 12 6 21 6 3",
|
|
578
|
+
fill: "#0f172a",
|
|
579
|
+
stroke: "#0f172a",
|
|
580
|
+
strokeWidth: "2",
|
|
581
|
+
strokeLinejoin: "round",
|
|
582
|
+
strokeLinecap: "round"
|
|
583
|
+
}
|
|
584
|
+
)
|
|
568
585
|
}
|
|
569
|
-
),
|
|
570
|
-
isPlaying ? (
|
|
571
|
-
/* Pause — two rounded bars, sized to match play icon proportions */
|
|
572
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
573
|
-
"svg",
|
|
574
|
-
{
|
|
575
|
-
width: playIconSize,
|
|
576
|
-
height: playIconSize,
|
|
577
|
-
viewBox: "0 0 20 20",
|
|
578
|
-
fill: "none",
|
|
579
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
580
|
-
children: [
|
|
581
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { x: "3.5", y: "2.5", width: "4.5", height: "15", rx: "1.5", fill: "white" }),
|
|
582
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { x: "12", y: "2.5", width: "4.5", height: "15", rx: "1.5", fill: "white" })
|
|
583
|
-
]
|
|
584
|
-
}
|
|
585
|
-
)
|
|
586
|
-
) : (
|
|
587
|
-
/*
|
|
588
|
-
* Play — rounded-corner triangle from the provided SVG path.
|
|
589
|
-
* Original viewBox is "0,0,240,250" (with a 5.33x scale group inside).
|
|
590
|
-
* We flatten the transform: effective drawing area is 240×250 units.
|
|
591
|
-
*/
|
|
592
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
593
|
-
"svg",
|
|
594
|
-
{
|
|
595
|
-
width: playIconSize,
|
|
596
|
-
height: playIconSize,
|
|
597
|
-
viewBox: "0 0 240 250",
|
|
598
|
-
fill: "none",
|
|
599
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
600
|
-
style: { transform: "translateX(4%)" },
|
|
601
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
602
|
-
"path",
|
|
603
|
-
{
|
|
604
|
-
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",
|
|
605
|
-
fill: "white"
|
|
606
|
-
}
|
|
607
|
-
)
|
|
608
|
-
}
|
|
609
|
-
)
|
|
610
586
|
)
|
|
611
|
-
|
|
587
|
+
)
|
|
612
588
|
}
|
|
613
589
|
)
|
|
614
590
|
}
|
|
@@ -7556,10 +7532,31 @@ var AnimationUtility = class {
|
|
|
7556
7532
|
base = `transition: background-color ${duration}ms ${easing} ${delay}ms;`;
|
|
7557
7533
|
visible = `background-color: ${backgroundColor};`;
|
|
7558
7534
|
break;
|
|
7559
|
-
case "Border":
|
|
7560
|
-
|
|
7561
|
-
|
|
7535
|
+
// case "Border":
|
|
7536
|
+
// base = `transition: border-color ${duration}ms ${easing} ${delay}ms;`;
|
|
7537
|
+
// visible = `border-color: ${borderColor};`;
|
|
7538
|
+
// break;
|
|
7539
|
+
// case "Border":
|
|
7540
|
+
// const borderProp = this.getBorderProperty(direction);
|
|
7541
|
+
// base = `transition: ${borderProp} ${duration}ms ${easing} ${delay}ms;`;
|
|
7542
|
+
// visible = `${borderProp}: ${borderColor};`;
|
|
7543
|
+
// break;
|
|
7544
|
+
case "Border": {
|
|
7545
|
+
const side = direction === "up" ? "top" : direction === "down" ? "bottom" : direction;
|
|
7546
|
+
const css = config.cssProperties || {};
|
|
7547
|
+
const width = css["border-top-width"] || css["border-bottom-width"] || css["border-left-width"] || css["border-right-width"] || css["border-width"] || "2px";
|
|
7548
|
+
base = `transition: all ${duration}ms ${easing} ${delay}ms;`;
|
|
7549
|
+
if (side === "all" || !side) {
|
|
7550
|
+
visible = `border-color: ${borderColor} !important;`;
|
|
7551
|
+
} else {
|
|
7552
|
+
visible = `
|
|
7553
|
+
border-${side}-style: solid !important;
|
|
7554
|
+
border-${side}-width: ${width} !important;
|
|
7555
|
+
border-${side}-color: ${borderColor} !important;
|
|
7556
|
+
`;
|
|
7557
|
+
}
|
|
7562
7558
|
break;
|
|
7559
|
+
}
|
|
7563
7560
|
case "Typewriter":
|
|
7564
7561
|
keyframes = `
|
|
7565
7562
|
@keyframes typewriter { from { width: 0 } to { width: 100% } }
|
|
@@ -7607,6 +7604,24 @@ var AnimationUtility = class {
|
|
|
7607
7604
|
return { start: `translateX(${distance}px)`, end: `translateX(0)` };
|
|
7608
7605
|
}
|
|
7609
7606
|
}
|
|
7607
|
+
// Helper method for border animation direction
|
|
7608
|
+
static getBorderProperty(direction) {
|
|
7609
|
+
switch (direction) {
|
|
7610
|
+
case "left":
|
|
7611
|
+
return "border-left-color";
|
|
7612
|
+
case "right":
|
|
7613
|
+
return "border-right-color";
|
|
7614
|
+
case "up":
|
|
7615
|
+
case "top":
|
|
7616
|
+
return "border-top-color";
|
|
7617
|
+
case "down":
|
|
7618
|
+
case "bottom":
|
|
7619
|
+
return "border-bottom-color";
|
|
7620
|
+
case "all":
|
|
7621
|
+
default:
|
|
7622
|
+
return "border-color";
|
|
7623
|
+
}
|
|
7624
|
+
}
|
|
7610
7625
|
};
|
|
7611
7626
|
var AnimationUtility_default = AnimationUtility;
|
|
7612
7627
|
|
|
@@ -8794,6 +8809,7 @@ var DivContainer = async (props) => {
|
|
|
8794
8809
|
{
|
|
8795
8810
|
animation: hoverAnimation.name,
|
|
8796
8811
|
mode: "hover",
|
|
8812
|
+
cssProperties: props.node.cssProperties,
|
|
8797
8813
|
...hoverAnimation.properties
|
|
8798
8814
|
},
|
|
8799
8815
|
animationSelector
|
package/dist/server.mjs
CHANGED
|
@@ -108,7 +108,7 @@ import dynamic2 from "next/dynamic";
|
|
|
108
108
|
// src/components/DeviceAssetSelector.tsx
|
|
109
109
|
import dynamic from "next/dynamic";
|
|
110
110
|
import { jsx as jsx3 } from "react/jsx-runtime";
|
|
111
|
-
var HlsPlayer = dynamic(() => import("./HlsPlayer-
|
|
111
|
+
var HlsPlayer = dynamic(() => import("./HlsPlayer-ZGFEVSKL.mjs"), { ssr: false });
|
|
112
112
|
var FORMAT_CLASSES = {
|
|
113
113
|
center: "justify-center",
|
|
114
114
|
left: "justify-start",
|
|
@@ -183,7 +183,7 @@ var DeviceAssetSelector_default = DeviceAssetSelector;
|
|
|
183
183
|
|
|
184
184
|
// src/components/pageRenderingEngine/nodes/ImageNode.tsx
|
|
185
185
|
import { jsx as jsx4 } from "react/jsx-runtime";
|
|
186
|
-
var HlsPlayer2 = dynamic2(() => import("./HlsPlayer-
|
|
186
|
+
var HlsPlayer2 = dynamic2(() => import("./HlsPlayer-ZGFEVSKL.mjs"), { ssr: false });
|
|
187
187
|
var getNestedValue = (obj, path) => {
|
|
188
188
|
if (!obj || !path) return void 0;
|
|
189
189
|
return path.split(".").reduce((current, key) => {
|
|
@@ -1305,10 +1305,31 @@ var AnimationUtility = class {
|
|
|
1305
1305
|
base = `transition: background-color ${duration}ms ${easing} ${delay}ms;`;
|
|
1306
1306
|
visible = `background-color: ${backgroundColor};`;
|
|
1307
1307
|
break;
|
|
1308
|
-
case "Border":
|
|
1309
|
-
|
|
1310
|
-
|
|
1308
|
+
// case "Border":
|
|
1309
|
+
// base = `transition: border-color ${duration}ms ${easing} ${delay}ms;`;
|
|
1310
|
+
// visible = `border-color: ${borderColor};`;
|
|
1311
|
+
// break;
|
|
1312
|
+
// case "Border":
|
|
1313
|
+
// const borderProp = this.getBorderProperty(direction);
|
|
1314
|
+
// base = `transition: ${borderProp} ${duration}ms ${easing} ${delay}ms;`;
|
|
1315
|
+
// visible = `${borderProp}: ${borderColor};`;
|
|
1316
|
+
// break;
|
|
1317
|
+
case "Border": {
|
|
1318
|
+
const side = direction === "up" ? "top" : direction === "down" ? "bottom" : direction;
|
|
1319
|
+
const css = config.cssProperties || {};
|
|
1320
|
+
const width = css["border-top-width"] || css["border-bottom-width"] || css["border-left-width"] || css["border-right-width"] || css["border-width"] || "2px";
|
|
1321
|
+
base = `transition: all ${duration}ms ${easing} ${delay}ms;`;
|
|
1322
|
+
if (side === "all" || !side) {
|
|
1323
|
+
visible = `border-color: ${borderColor} !important;`;
|
|
1324
|
+
} else {
|
|
1325
|
+
visible = `
|
|
1326
|
+
border-${side}-style: solid !important;
|
|
1327
|
+
border-${side}-width: ${width} !important;
|
|
1328
|
+
border-${side}-color: ${borderColor} !important;
|
|
1329
|
+
`;
|
|
1330
|
+
}
|
|
1311
1331
|
break;
|
|
1332
|
+
}
|
|
1312
1333
|
case "Typewriter":
|
|
1313
1334
|
keyframes = `
|
|
1314
1335
|
@keyframes typewriter { from { width: 0 } to { width: 100% } }
|
|
@@ -1356,6 +1377,24 @@ var AnimationUtility = class {
|
|
|
1356
1377
|
return { start: `translateX(${distance}px)`, end: `translateX(0)` };
|
|
1357
1378
|
}
|
|
1358
1379
|
}
|
|
1380
|
+
// Helper method for border animation direction
|
|
1381
|
+
static getBorderProperty(direction) {
|
|
1382
|
+
switch (direction) {
|
|
1383
|
+
case "left":
|
|
1384
|
+
return "border-left-color";
|
|
1385
|
+
case "right":
|
|
1386
|
+
return "border-right-color";
|
|
1387
|
+
case "up":
|
|
1388
|
+
case "top":
|
|
1389
|
+
return "border-top-color";
|
|
1390
|
+
case "down":
|
|
1391
|
+
case "bottom":
|
|
1392
|
+
return "border-bottom-color";
|
|
1393
|
+
case "all":
|
|
1394
|
+
default:
|
|
1395
|
+
return "border-color";
|
|
1396
|
+
}
|
|
1397
|
+
}
|
|
1359
1398
|
};
|
|
1360
1399
|
var AnimationUtility_default = AnimationUtility;
|
|
1361
1400
|
|
|
@@ -1450,7 +1489,7 @@ var NoDataFound_default = NoDataFound;
|
|
|
1450
1489
|
// src/components/pageRenderingEngine/nodes/ImageGalleryNode.tsx
|
|
1451
1490
|
import dynamic11 from "next/dynamic";
|
|
1452
1491
|
import { Fragment as Fragment5, jsx as jsx33, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
1453
|
-
var HlsPlayer3 = dynamic11(() => import("./HlsPlayer-
|
|
1492
|
+
var HlsPlayer3 = dynamic11(() => import("./HlsPlayer-ZGFEVSKL.mjs"), { ssr: false });
|
|
1454
1493
|
var deviceToMediaQuery = (device) => {
|
|
1455
1494
|
switch (device) {
|
|
1456
1495
|
case "lg":
|
|
@@ -2538,6 +2577,7 @@ var DivContainer = async (props) => {
|
|
|
2538
2577
|
{
|
|
2539
2578
|
animation: hoverAnimation.name,
|
|
2540
2579
|
mode: "hover",
|
|
2580
|
+
cssProperties: props.node.cssProperties,
|
|
2541
2581
|
...hoverAnimation.properties
|
|
2542
2582
|
},
|
|
2543
2583
|
animationSelector
|