@clyrex-digital/clyrex-controls-dev 0.8.1-dev.20261013062551 → 0.8.1-dev.20261013114908
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/MediaAccordionNodeClient-LTCRGB3L.mjs +130 -0
- package/dist/MediaAccordionNodeClient-W5FT2BK4.mjs +132 -0
- package/dist/index.js +707 -471
- package/dist/index.mjs +259 -159
- package/dist/server.js +506 -270
- package/dist/server.mjs +124 -24
- package/package.json +1 -1
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import {
|
|
3
|
+
AssetUtility_default
|
|
4
|
+
} from "./chunk-TQ6BXQ3A.mjs";
|
|
5
|
+
|
|
6
|
+
// src/components/pageRenderingEngine/nodes/MediaAccordionNodeClient.tsx
|
|
7
|
+
import { useState } from "react";
|
|
8
|
+
import dynamic from "next/dynamic";
|
|
9
|
+
import Image from "next/image";
|
|
10
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
11
|
+
var HlsPlayer = dynamic(() => import("./HlsPlayer-ZGFEVSKL.mjs"), { ssr: false });
|
|
12
|
+
var isHlsUrl = (url) => /\.m3u8(?:$|[?#])/i.test(url);
|
|
13
|
+
var isVideoUrl = (url) => /\.(mp4|webm|ogv)(?:$|[?#])/i.test(url);
|
|
14
|
+
var MediaAccordionNodeClient = (props) => {
|
|
15
|
+
const items = Array.isArray(props.node.items) ? props.node.items : [];
|
|
16
|
+
const [activeIndex, setActiveIndex] = useState(0);
|
|
17
|
+
const activeItem = items[activeIndex] ?? items[0];
|
|
18
|
+
const buttonBackground = props.node.buttonBackgroundLayers?.length ? props.node.buttonBackgroundLayers.slice(0, 1).map((layer) => {
|
|
19
|
+
const colors = layer.value.colors.map((stop) => `color-mix(in srgb, ${stop.color}, transparent ${stop.transparency ?? 0}%) ${stop.position}%`).join(", ");
|
|
20
|
+
return `linear-gradient(${layer.value.direction}deg, ${colors})`;
|
|
21
|
+
}).filter(Boolean).join(", ") : props.node.buttonBackgroundGradient ? `linear-gradient(135deg, ${props.node.buttonGradientStart || "var(--primary-action-fill)"}, ${props.node.buttonGradientEnd || "var(--primary-action-fill)"})` : props.node.buttonBackgroundColor || "var(--primary-action-fill)";
|
|
22
|
+
const assetBaseUrl = props.assetBaseUrl || `${props.apiBaseUrl}/digitalassets-management`;
|
|
23
|
+
const resolveUrl = (url) => url ? AssetUtility_default.resolveUrl(assetBaseUrl, url) : void 0;
|
|
24
|
+
const renderMedia = (item) => {
|
|
25
|
+
const mediaUrl = resolveUrl(item.mediaUrl);
|
|
26
|
+
const posterUrl = resolveUrl(item.posterUrl);
|
|
27
|
+
if (!mediaUrl) return null;
|
|
28
|
+
if (item.mediaType === "image") {
|
|
29
|
+
return /* @__PURE__ */ jsx(
|
|
30
|
+
Image,
|
|
31
|
+
{
|
|
32
|
+
className: "story-accordion__media-image",
|
|
33
|
+
src: mediaUrl,
|
|
34
|
+
alt: item.title,
|
|
35
|
+
loading: "lazy",
|
|
36
|
+
fill: true,
|
|
37
|
+
sizes: "(max-width: 700px) 100vw, 60vw",
|
|
38
|
+
unoptimized: true
|
|
39
|
+
}
|
|
40
|
+
);
|
|
41
|
+
}
|
|
42
|
+
if (isHlsUrl(mediaUrl)) {
|
|
43
|
+
return /* @__PURE__ */ jsx(
|
|
44
|
+
HlsPlayer,
|
|
45
|
+
{
|
|
46
|
+
assetUrl: mediaUrl,
|
|
47
|
+
posterUrl,
|
|
48
|
+
showControls: true,
|
|
49
|
+
apiBaseUrl: props.apiBaseUrl,
|
|
50
|
+
session: ""
|
|
51
|
+
}
|
|
52
|
+
);
|
|
53
|
+
}
|
|
54
|
+
if (item.mediaType === "video" || isVideoUrl(mediaUrl)) {
|
|
55
|
+
return /* @__PURE__ */ jsx(
|
|
56
|
+
"video",
|
|
57
|
+
{
|
|
58
|
+
className: "story-accordion__media-video",
|
|
59
|
+
src: mediaUrl,
|
|
60
|
+
poster: posterUrl,
|
|
61
|
+
controls: true,
|
|
62
|
+
playsInline: true,
|
|
63
|
+
preload: "metadata"
|
|
64
|
+
}
|
|
65
|
+
);
|
|
66
|
+
}
|
|
67
|
+
return /* @__PURE__ */ jsx(
|
|
68
|
+
Image,
|
|
69
|
+
{
|
|
70
|
+
className: "story-accordion__media-image",
|
|
71
|
+
src: posterUrl || mediaUrl,
|
|
72
|
+
alt: item.title,
|
|
73
|
+
loading: "lazy",
|
|
74
|
+
fill: true,
|
|
75
|
+
sizes: "(max-width: 700px) 100vw, 60vw",
|
|
76
|
+
unoptimized: true
|
|
77
|
+
}
|
|
78
|
+
);
|
|
79
|
+
};
|
|
80
|
+
if (items.length === 0) return null;
|
|
81
|
+
return /* @__PURE__ */ jsxs(
|
|
82
|
+
"section",
|
|
83
|
+
{
|
|
84
|
+
className: "story-accordion",
|
|
85
|
+
"aria-label": "Featured stories",
|
|
86
|
+
style: {
|
|
87
|
+
"--story-button-background": buttonBackground,
|
|
88
|
+
"--story-button-text": props.node.buttonTextTransparency ? `color-mix(in srgb, ${props.node.buttonTextColor || "var(--primary-action-text)"}, transparent ${props.node.buttonTextTransparency}%)` : props.node.buttonTextColor || "var(--primary-action-text)",
|
|
89
|
+
"--story-button-clip": props.node.buttonBackgroundClipText ? "text" : "border-box",
|
|
90
|
+
"--story-inactive-button-background": props.node.buttonInactiveBackgroundColor || "var(--neutral)",
|
|
91
|
+
"--story-inactive-button-text": props.node.buttonInactiveTextColor || "var(--neutral-text-base)"
|
|
92
|
+
},
|
|
93
|
+
children: [
|
|
94
|
+
/* @__PURE__ */ jsx("style", { children: `
|
|
95
|
+
.story-accordion { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(260px,1fr); gap:20px; align-items:stretch; width:100%; padding:16px; border-radius:14px; background:var(--neutral); }
|
|
96
|
+
.story-accordion__media { position:relative; min-height:320px; overflow:hidden; border-radius:10px; background:var(--neutral-border); }
|
|
97
|
+
.story-accordion__media > * { display:block; width:100%; height:100%; min-height:320px; }
|
|
98
|
+
.story-accordion__media-image, .story-accordion__media-video { object-fit:cover; }
|
|
99
|
+
.story-accordion__list { display:flex; flex-direction:column; justify-content:center; gap:10px; min-width:0; }
|
|
100
|
+
.story-accordion__item { width:100%; min-height:54px; padding:12px 16px; border:1px solid var(--neutral-border); border-radius:9px; background:var(--neutral); color:var(--neutral-text-base); text-align:left; font:inherit; line-height:1.35; cursor:pointer; transition:background-color .18s ease,color .18s ease,border-color .18s ease; }
|
|
101
|
+
.story-accordion__item:hover { border-color:var(--primary-action-fill); }
|
|
102
|
+
.story-accordion__item[aria-pressed="true"] { border-color:transparent; background:var(--story-button-background); color:var(--story-button-text); background-clip:var(--story-button-clip); -webkit-background-clip:var(--story-button-clip); }
|
|
103
|
+
.story-accordion__item.is-inactive.is-custom { background:var(--story-inactive-button-background); color:var(--story-inactive-button-text); }
|
|
104
|
+
.story-accordion__item:focus-visible { outline:3px solid var(--primary-action-fill); outline-offset:2px; }
|
|
105
|
+
@media(max-width:700px) { .story-accordion { grid-template-columns:minmax(0,1fr); gap:14px; padding:10px; } .story-accordion__media, .story-accordion__media > * { min-height:220px; } .story-accordion__list { gap:8px; } .story-accordion__item { min-height:48px; } }
|
|
106
|
+
` }),
|
|
107
|
+
/* @__PURE__ */ jsx("div", { className: "story-accordion__media", children: activeItem ? renderMedia(activeItem) : null }),
|
|
108
|
+
/* @__PURE__ */ jsx("div", { className: "story-accordion__list", role: "group", "aria-label": "Choose a story", children: items.map((item, index) => /* @__PURE__ */ jsx(
|
|
109
|
+
"button",
|
|
110
|
+
{
|
|
111
|
+
type: "button",
|
|
112
|
+
className: `story-accordion__item ${index === activeIndex ? "is-active" : "is-inactive"} ${props.node.buttonInactiveStyleEnabled && index !== activeIndex ? "is-custom" : ""}`,
|
|
113
|
+
"aria-pressed": index === activeIndex,
|
|
114
|
+
style: index !== activeIndex && props.node.buttonInactiveStyleEnabled ? {
|
|
115
|
+
background: props.node.buttonInactiveBackgroundColor || "var(--neutral)",
|
|
116
|
+
color: props.node.buttonInactiveTextColor || "var(--neutral-text-base)"
|
|
117
|
+
} : void 0,
|
|
118
|
+
onClick: () => setActiveIndex(index),
|
|
119
|
+
children: item.title
|
|
120
|
+
},
|
|
121
|
+
item.id || `${item.title}-${index}`
|
|
122
|
+
)) })
|
|
123
|
+
]
|
|
124
|
+
}
|
|
125
|
+
);
|
|
126
|
+
};
|
|
127
|
+
var MediaAccordionNodeClient_default = MediaAccordionNodeClient;
|
|
128
|
+
export {
|
|
129
|
+
MediaAccordionNodeClient_default as default
|
|
130
|
+
};
|
|
@@ -0,0 +1,132 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
3
|
+
"use client";
|
|
4
|
+
import {
|
|
5
|
+
AssetUtility_default
|
|
6
|
+
} from "./chunk-UPCAOGEY.mjs";
|
|
7
|
+
|
|
8
|
+
// src/components/pageRenderingEngine/nodes/MediaAccordionNodeClient.tsx
|
|
9
|
+
import { useState } from "react";
|
|
10
|
+
import dynamic from "next/dynamic";
|
|
11
|
+
import Image from "next/image";
|
|
12
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
13
|
+
var HlsPlayer = dynamic(() => import("./HlsPlayer-AUZ42WTT.mjs"), { ssr: false });
|
|
14
|
+
var isHlsUrl = (url) => /\.m3u8(?:$|[?#])/i.test(url);
|
|
15
|
+
var isVideoUrl = (url) => /\.(mp4|webm|ogv)(?:$|[?#])/i.test(url);
|
|
16
|
+
var MediaAccordionNodeClient = (props) => {
|
|
17
|
+
const items = Array.isArray(props.node.items) ? props.node.items : [];
|
|
18
|
+
const [activeIndex, setActiveIndex] = useState(0);
|
|
19
|
+
const activeItem = items[activeIndex] ?? items[0];
|
|
20
|
+
const buttonBackground = props.node.buttonBackgroundLayers?.length ? props.node.buttonBackgroundLayers.slice(0, 1).map((layer) => {
|
|
21
|
+
const colors = layer.value.colors.map((stop) => `color-mix(in srgb, ${stop.color}, transparent ${stop.transparency ?? 0}%) ${stop.position}%`).join(", ");
|
|
22
|
+
return `linear-gradient(${layer.value.direction}deg, ${colors})`;
|
|
23
|
+
}).filter(Boolean).join(", ") : props.node.buttonBackgroundGradient ? `linear-gradient(135deg, ${props.node.buttonGradientStart || "var(--primary-action-fill)"}, ${props.node.buttonGradientEnd || "var(--primary-action-fill)"})` : props.node.buttonBackgroundColor || "var(--primary-action-fill)";
|
|
24
|
+
const assetBaseUrl = props.assetBaseUrl || `${props.apiBaseUrl}/digitalassets-management`;
|
|
25
|
+
const resolveUrl = (url) => url ? AssetUtility_default.resolveUrl(assetBaseUrl, url) : void 0;
|
|
26
|
+
const renderMedia = (item) => {
|
|
27
|
+
const mediaUrl = resolveUrl(item.mediaUrl);
|
|
28
|
+
const posterUrl = resolveUrl(item.posterUrl);
|
|
29
|
+
if (!mediaUrl) return null;
|
|
30
|
+
if (item.mediaType === "image") {
|
|
31
|
+
return /* @__PURE__ */ jsx(
|
|
32
|
+
Image,
|
|
33
|
+
{
|
|
34
|
+
className: "story-accordion__media-image",
|
|
35
|
+
src: mediaUrl,
|
|
36
|
+
alt: item.title,
|
|
37
|
+
loading: "lazy",
|
|
38
|
+
fill: true,
|
|
39
|
+
sizes: "(max-width: 700px) 100vw, 60vw",
|
|
40
|
+
unoptimized: true
|
|
41
|
+
}
|
|
42
|
+
);
|
|
43
|
+
}
|
|
44
|
+
if (isHlsUrl(mediaUrl)) {
|
|
45
|
+
return /* @__PURE__ */ jsx(
|
|
46
|
+
HlsPlayer,
|
|
47
|
+
{
|
|
48
|
+
assetUrl: mediaUrl,
|
|
49
|
+
posterUrl,
|
|
50
|
+
showControls: true,
|
|
51
|
+
apiBaseUrl: props.apiBaseUrl,
|
|
52
|
+
session: ""
|
|
53
|
+
}
|
|
54
|
+
);
|
|
55
|
+
}
|
|
56
|
+
if (item.mediaType === "video" || isVideoUrl(mediaUrl)) {
|
|
57
|
+
return /* @__PURE__ */ jsx(
|
|
58
|
+
"video",
|
|
59
|
+
{
|
|
60
|
+
className: "story-accordion__media-video",
|
|
61
|
+
src: mediaUrl,
|
|
62
|
+
poster: posterUrl,
|
|
63
|
+
controls: true,
|
|
64
|
+
playsInline: true,
|
|
65
|
+
preload: "metadata"
|
|
66
|
+
}
|
|
67
|
+
);
|
|
68
|
+
}
|
|
69
|
+
return /* @__PURE__ */ jsx(
|
|
70
|
+
Image,
|
|
71
|
+
{
|
|
72
|
+
className: "story-accordion__media-image",
|
|
73
|
+
src: posterUrl || mediaUrl,
|
|
74
|
+
alt: item.title,
|
|
75
|
+
loading: "lazy",
|
|
76
|
+
fill: true,
|
|
77
|
+
sizes: "(max-width: 700px) 100vw, 60vw",
|
|
78
|
+
unoptimized: true
|
|
79
|
+
}
|
|
80
|
+
);
|
|
81
|
+
};
|
|
82
|
+
if (items.length === 0) return null;
|
|
83
|
+
return /* @__PURE__ */ jsxs(
|
|
84
|
+
"section",
|
|
85
|
+
{
|
|
86
|
+
className: "story-accordion",
|
|
87
|
+
"aria-label": "Featured stories",
|
|
88
|
+
style: {
|
|
89
|
+
"--story-button-background": buttonBackground,
|
|
90
|
+
"--story-button-text": props.node.buttonTextTransparency ? `color-mix(in srgb, ${props.node.buttonTextColor || "var(--primary-action-text)"}, transparent ${props.node.buttonTextTransparency}%)` : props.node.buttonTextColor || "var(--primary-action-text)",
|
|
91
|
+
"--story-button-clip": props.node.buttonBackgroundClipText ? "text" : "border-box",
|
|
92
|
+
"--story-inactive-button-background": props.node.buttonInactiveBackgroundColor || "var(--neutral)",
|
|
93
|
+
"--story-inactive-button-text": props.node.buttonInactiveTextColor || "var(--neutral-text-base)"
|
|
94
|
+
},
|
|
95
|
+
children: [
|
|
96
|
+
/* @__PURE__ */ jsx("style", { children: `
|
|
97
|
+
.story-accordion { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(260px,1fr); gap:20px; align-items:stretch; width:100%; padding:16px; border-radius:14px; background:var(--neutral); }
|
|
98
|
+
.story-accordion__media { position:relative; min-height:320px; overflow:hidden; border-radius:10px; background:var(--neutral-border); }
|
|
99
|
+
.story-accordion__media > * { display:block; width:100%; height:100%; min-height:320px; }
|
|
100
|
+
.story-accordion__media-image, .story-accordion__media-video { object-fit:cover; }
|
|
101
|
+
.story-accordion__list { display:flex; flex-direction:column; justify-content:center; gap:10px; min-width:0; }
|
|
102
|
+
.story-accordion__item { width:100%; min-height:54px; padding:12px 16px; border:1px solid var(--neutral-border); border-radius:9px; background:var(--neutral); color:var(--neutral-text-base); text-align:left; font:inherit; line-height:1.35; cursor:pointer; transition:background-color .18s ease,color .18s ease,border-color .18s ease; }
|
|
103
|
+
.story-accordion__item:hover { border-color:var(--primary-action-fill); }
|
|
104
|
+
.story-accordion__item[aria-pressed="true"] { border-color:transparent; background:var(--story-button-background); color:var(--story-button-text); background-clip:var(--story-button-clip); -webkit-background-clip:var(--story-button-clip); }
|
|
105
|
+
.story-accordion__item.is-inactive.is-custom { background:var(--story-inactive-button-background); color:var(--story-inactive-button-text); }
|
|
106
|
+
.story-accordion__item:focus-visible { outline:3px solid var(--primary-action-fill); outline-offset:2px; }
|
|
107
|
+
@media(max-width:700px) { .story-accordion { grid-template-columns:minmax(0,1fr); gap:14px; padding:10px; } .story-accordion__media, .story-accordion__media > * { min-height:220px; } .story-accordion__list { gap:8px; } .story-accordion__item { min-height:48px; } }
|
|
108
|
+
` }),
|
|
109
|
+
/* @__PURE__ */ jsx("div", { className: "story-accordion__media", children: activeItem ? renderMedia(activeItem) : null }),
|
|
110
|
+
/* @__PURE__ */ jsx("div", { className: "story-accordion__list", role: "group", "aria-label": "Choose a story", children: items.map((item, index) => /* @__PURE__ */ jsx(
|
|
111
|
+
"button",
|
|
112
|
+
{
|
|
113
|
+
type: "button",
|
|
114
|
+
className: `story-accordion__item ${index === activeIndex ? "is-active" : "is-inactive"} ${props.node.buttonInactiveStyleEnabled && index !== activeIndex ? "is-custom" : ""}`,
|
|
115
|
+
"aria-pressed": index === activeIndex,
|
|
116
|
+
style: index !== activeIndex && props.node.buttonInactiveStyleEnabled ? {
|
|
117
|
+
background: props.node.buttonInactiveBackgroundColor || "var(--neutral)",
|
|
118
|
+
color: props.node.buttonInactiveTextColor || "var(--neutral-text-base)"
|
|
119
|
+
} : void 0,
|
|
120
|
+
onClick: () => setActiveIndex(index),
|
|
121
|
+
children: item.title
|
|
122
|
+
},
|
|
123
|
+
item.id || `${item.title}-${index}`
|
|
124
|
+
)) })
|
|
125
|
+
]
|
|
126
|
+
}
|
|
127
|
+
);
|
|
128
|
+
};
|
|
129
|
+
var MediaAccordionNodeClient_default = MediaAccordionNodeClient;
|
|
130
|
+
export {
|
|
131
|
+
MediaAccordionNodeClient_default as default
|
|
132
|
+
};
|