stormcloud-video-player 0.7.13 → 0.7.16
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/stormcloud-vp.min.js +1 -1
- package/lib/index.cjs +371 -49
- package/lib/index.cjs.map +1 -1
- package/lib/index.d.cts +12 -0
- package/lib/index.d.ts +12 -0
- package/lib/index.js +372 -50
- package/lib/index.js.map +1 -1
- package/lib/player/StormcloudVideoPlayer.cjs +38 -10
- package/lib/player/StormcloudVideoPlayer.cjs.map +1 -1
- package/lib/player/StormcloudVideoPlayer.d.cts +4 -0
- package/lib/players/FilePlayer.cjs.map +1 -1
- package/lib/players/HlsPlayer.cjs +38 -10
- package/lib/players/HlsPlayer.cjs.map +1 -1
- package/lib/players/index.cjs +38 -10
- package/lib/players/index.cjs.map +1 -1
- package/lib/sdk/adstormPlayer.cjs.map +1 -1
- package/lib/sdk/vastParser.cjs.map +1 -1
- package/lib/ui/OverlayRenderer.cjs +408 -37
- package/lib/ui/OverlayRenderer.cjs.map +1 -1
- package/lib/ui/StormcloudVideoPlayer.cjs +371 -49
- package/lib/ui/StormcloudVideoPlayer.cjs.map +1 -1
- package/lib/utils/browserCompat.cjs.map +1 -1
- package/lib/utils/overlays.d.cts +8 -0
- package/lib/utils/polyfills.cjs.map +1 -1
- package/lib/utils/tracking.cjs.map +1 -1
- package/package.json +1 -1
|
@@ -10,6 +10,35 @@ function _array_with_holes(arr) {
|
|
|
10
10
|
function _array_without_holes(arr) {
|
|
11
11
|
if (Array.isArray(arr)) return _array_like_to_array(arr);
|
|
12
12
|
}
|
|
13
|
+
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
|
|
14
|
+
try {
|
|
15
|
+
var info = gen[key](arg);
|
|
16
|
+
var value = info.value;
|
|
17
|
+
} catch (error) {
|
|
18
|
+
reject(error);
|
|
19
|
+
return;
|
|
20
|
+
}
|
|
21
|
+
if (info.done) {
|
|
22
|
+
resolve(value);
|
|
23
|
+
} else {
|
|
24
|
+
Promise.resolve(value).then(_next, _throw);
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
function _async_to_generator(fn) {
|
|
28
|
+
return function() {
|
|
29
|
+
var self = this, args = arguments;
|
|
30
|
+
return new Promise(function(resolve, reject) {
|
|
31
|
+
var gen = fn.apply(self, args);
|
|
32
|
+
function _next(value) {
|
|
33
|
+
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
|
|
34
|
+
}
|
|
35
|
+
function _throw(err) {
|
|
36
|
+
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
|
|
37
|
+
}
|
|
38
|
+
_next(undefined);
|
|
39
|
+
});
|
|
40
|
+
};
|
|
41
|
+
}
|
|
13
42
|
function _define_property(obj, key, value) {
|
|
14
43
|
if (key in obj) {
|
|
15
44
|
Object.defineProperty(obj, key, {
|
|
@@ -113,6 +142,105 @@ function _unsupported_iterable_to_array(o, minLen) {
|
|
|
113
142
|
if (n === "Map" || n === "Set") return Array.from(n);
|
|
114
143
|
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
|
|
115
144
|
}
|
|
145
|
+
function _ts_generator(thisArg, body) {
|
|
146
|
+
var f, y, t, _ = {
|
|
147
|
+
label: 0,
|
|
148
|
+
sent: function() {
|
|
149
|
+
if (t[0] & 1) throw t[1];
|
|
150
|
+
return t[1];
|
|
151
|
+
},
|
|
152
|
+
trys: [],
|
|
153
|
+
ops: []
|
|
154
|
+
}, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype), d = Object.defineProperty;
|
|
155
|
+
return d(g, "next", {
|
|
156
|
+
value: verb(0)
|
|
157
|
+
}), d(g, "throw", {
|
|
158
|
+
value: verb(1)
|
|
159
|
+
}), d(g, "return", {
|
|
160
|
+
value: verb(2)
|
|
161
|
+
}), typeof Symbol === "function" && d(g, Symbol.iterator, {
|
|
162
|
+
value: function() {
|
|
163
|
+
return this;
|
|
164
|
+
}
|
|
165
|
+
}), g;
|
|
166
|
+
function verb(n) {
|
|
167
|
+
return function(v) {
|
|
168
|
+
return step([
|
|
169
|
+
n,
|
|
170
|
+
v
|
|
171
|
+
]);
|
|
172
|
+
};
|
|
173
|
+
}
|
|
174
|
+
function step(op) {
|
|
175
|
+
if (f) throw new TypeError("Generator is already executing.");
|
|
176
|
+
while(g && (g = 0, op[0] && (_ = 0)), _)try {
|
|
177
|
+
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
|
|
178
|
+
if (y = 0, t) op = [
|
|
179
|
+
op[0] & 2,
|
|
180
|
+
t.value
|
|
181
|
+
];
|
|
182
|
+
switch(op[0]){
|
|
183
|
+
case 0:
|
|
184
|
+
case 1:
|
|
185
|
+
t = op;
|
|
186
|
+
break;
|
|
187
|
+
case 4:
|
|
188
|
+
_.label++;
|
|
189
|
+
return {
|
|
190
|
+
value: op[1],
|
|
191
|
+
done: false
|
|
192
|
+
};
|
|
193
|
+
case 5:
|
|
194
|
+
_.label++;
|
|
195
|
+
y = op[1];
|
|
196
|
+
op = [
|
|
197
|
+
0
|
|
198
|
+
];
|
|
199
|
+
continue;
|
|
200
|
+
case 7:
|
|
201
|
+
op = _.ops.pop();
|
|
202
|
+
_.trys.pop();
|
|
203
|
+
continue;
|
|
204
|
+
default:
|
|
205
|
+
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
|
|
206
|
+
_ = 0;
|
|
207
|
+
continue;
|
|
208
|
+
}
|
|
209
|
+
if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {
|
|
210
|
+
_.label = op[1];
|
|
211
|
+
break;
|
|
212
|
+
}
|
|
213
|
+
if (op[0] === 6 && _.label < t[1]) {
|
|
214
|
+
_.label = t[1];
|
|
215
|
+
t = op;
|
|
216
|
+
break;
|
|
217
|
+
}
|
|
218
|
+
if (t && _.label < t[2]) {
|
|
219
|
+
_.label = t[2];
|
|
220
|
+
_.ops.push(op);
|
|
221
|
+
break;
|
|
222
|
+
}
|
|
223
|
+
if (t[2]) _.ops.pop();
|
|
224
|
+
_.trys.pop();
|
|
225
|
+
continue;
|
|
226
|
+
}
|
|
227
|
+
op = body.call(thisArg, _);
|
|
228
|
+
} catch (e) {
|
|
229
|
+
op = [
|
|
230
|
+
6,
|
|
231
|
+
e
|
|
232
|
+
];
|
|
233
|
+
y = 0;
|
|
234
|
+
} finally{
|
|
235
|
+
f = t = 0;
|
|
236
|
+
}
|
|
237
|
+
if (op[0] & 5) throw op[1];
|
|
238
|
+
return {
|
|
239
|
+
value: op[0] ? op[1] : void 0,
|
|
240
|
+
done: true
|
|
241
|
+
};
|
|
242
|
+
}
|
|
243
|
+
}
|
|
116
244
|
var __create = Object.create;
|
|
117
245
|
var __defProp = Object.defineProperty;
|
|
118
246
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
@@ -313,60 +441,303 @@ function TextOverlay(param) {
|
|
|
313
441
|
children: text
|
|
314
442
|
});
|
|
315
443
|
}
|
|
444
|
+
function fetchRSSItems(rssUrl, maxItems) {
|
|
445
|
+
return _async_to_generator(function() {
|
|
446
|
+
var resp, data, parser, doc;
|
|
447
|
+
return _ts_generator(this, function(_state) {
|
|
448
|
+
switch(_state.label){
|
|
449
|
+
case 0:
|
|
450
|
+
return [
|
|
451
|
+
4,
|
|
452
|
+
fetch("https://api.allorigins.win/get?url=".concat(encodeURIComponent(rssUrl)))
|
|
453
|
+
];
|
|
454
|
+
case 1:
|
|
455
|
+
resp = _state.sent();
|
|
456
|
+
return [
|
|
457
|
+
4,
|
|
458
|
+
resp.json()
|
|
459
|
+
];
|
|
460
|
+
case 2:
|
|
461
|
+
data = _state.sent();
|
|
462
|
+
if (!data.contents) throw new Error("No content from RSS feed");
|
|
463
|
+
parser = new DOMParser();
|
|
464
|
+
doc = parser.parseFromString(data.contents, "text/xml");
|
|
465
|
+
if (doc.querySelector("parsererror")) throw new Error("Invalid RSS XML");
|
|
466
|
+
return [
|
|
467
|
+
2,
|
|
468
|
+
Array.from(doc.querySelectorAll("item")).map(function(item) {
|
|
469
|
+
var _item_querySelector, _item_querySelector1, _item_querySelector2, _item_querySelector3, _item_querySelector4;
|
|
470
|
+
return {
|
|
471
|
+
title: (((_item_querySelector = item.querySelector("title")) === null || _item_querySelector === void 0 ? void 0 : _item_querySelector.textContent) || "").replace(/<[^>]*>/g, "").trim(),
|
|
472
|
+
description: (((_item_querySelector1 = item.querySelector("description")) === null || _item_querySelector1 === void 0 ? void 0 : _item_querySelector1.textContent) || "").replace(/<[^>]*>/g, "").trim(),
|
|
473
|
+
pubDate: ((_item_querySelector2 = item.querySelector("pubDate")) === null || _item_querySelector2 === void 0 ? void 0 : _item_querySelector2.textContent) || "",
|
|
474
|
+
author: ((_item_querySelector3 = item.querySelector("author, dc\\:creator")) === null || _item_querySelector3 === void 0 ? void 0 : _item_querySelector3.textContent) || "",
|
|
475
|
+
category: ((_item_querySelector4 = item.querySelector("category")) === null || _item_querySelector4 === void 0 ? void 0 : _item_querySelector4.textContent) || ""
|
|
476
|
+
};
|
|
477
|
+
}).filter(function(i) {
|
|
478
|
+
return i.title;
|
|
479
|
+
}).slice(0, maxItems)
|
|
480
|
+
];
|
|
481
|
+
}
|
|
482
|
+
});
|
|
483
|
+
})();
|
|
484
|
+
}
|
|
316
485
|
function ScrollerOverlay(param) {
|
|
317
486
|
var overlay = param.overlay;
|
|
318
|
-
var _ref, _ref1, _ref2, _ref3, _ref4;
|
|
487
|
+
var _ref, _ref1, _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8, _ref9, _ref10, _ref11, _ref12;
|
|
319
488
|
var cfg = overlay.scroller_config;
|
|
320
|
-
var
|
|
321
|
-
var
|
|
322
|
-
var
|
|
323
|
-
var
|
|
489
|
+
var uid = (0, import_react.useId)().replace(/:/g, "");
|
|
490
|
+
var _ref13 = _sliced_to_array((0, import_react.useState)([]), 2), rssItems = _ref13[0], setRssItems = _ref13[1];
|
|
491
|
+
var _ref14 = _sliced_to_array((0, import_react.useState)(false), 2), rssLoading = _ref14[0], setRssLoading = _ref14[1];
|
|
492
|
+
var rssUrl = (cfg === null || cfg === void 0 ? void 0 : cfg.rss_url) || "";
|
|
493
|
+
var maxItems = (_ref = cfg === null || cfg === void 0 ? void 0 : cfg.max_items) !== null && _ref !== void 0 ? _ref : 10;
|
|
494
|
+
var autoRefresh = (cfg === null || cfg === void 0 ? void 0 : cfg.auto_refresh) !== false;
|
|
495
|
+
var updateInterval = (_ref1 = cfg === null || cfg === void 0 ? void 0 : cfg.update_interval) !== null && _ref1 !== void 0 ? _ref1 : 5;
|
|
496
|
+
(0, import_react.useEffect)(function() {
|
|
497
|
+
if (!rssUrl || (cfg === null || cfg === void 0 ? void 0 : cfg.use_custom_text) && (cfg === null || cfg === void 0 ? void 0 : cfg.custom_text)) return;
|
|
498
|
+
var cancelled = false;
|
|
499
|
+
setRssLoading(true);
|
|
500
|
+
fetchRSSItems(rssUrl, maxItems).then(function(items) {
|
|
501
|
+
if (!cancelled) setRssItems(items);
|
|
502
|
+
}).catch(function() {}).finally(function() {
|
|
503
|
+
if (!cancelled) setRssLoading(false);
|
|
504
|
+
});
|
|
505
|
+
return function() {
|
|
506
|
+
cancelled = true;
|
|
507
|
+
};
|
|
508
|
+
}, [
|
|
509
|
+
rssUrl,
|
|
510
|
+
maxItems,
|
|
511
|
+
cfg === null || cfg === void 0 ? void 0 : cfg.use_custom_text,
|
|
512
|
+
cfg === null || cfg === void 0 ? void 0 : cfg.custom_text
|
|
513
|
+
]);
|
|
514
|
+
(0, import_react.useEffect)(function() {
|
|
515
|
+
if (!rssUrl || !autoRefresh || (cfg === null || cfg === void 0 ? void 0 : cfg.use_custom_text) && (cfg === null || cfg === void 0 ? void 0 : cfg.custom_text)) return;
|
|
516
|
+
var interval = setInterval(function() {
|
|
517
|
+
fetchRSSItems(rssUrl, maxItems).then(setRssItems).catch(function() {});
|
|
518
|
+
}, updateInterval * 60 * 1e3);
|
|
519
|
+
return function() {
|
|
520
|
+
return clearInterval(interval);
|
|
521
|
+
};
|
|
522
|
+
}, [
|
|
523
|
+
rssUrl,
|
|
524
|
+
autoRefresh,
|
|
525
|
+
updateInterval,
|
|
526
|
+
maxItems,
|
|
527
|
+
cfg === null || cfg === void 0 ? void 0 : cfg.use_custom_text,
|
|
528
|
+
cfg === null || cfg === void 0 ? void 0 : cfg.custom_text
|
|
529
|
+
]);
|
|
530
|
+
var sep = (_ref2 = cfg === null || cfg === void 0 ? void 0 : cfg.separator_char) !== null && _ref2 !== void 0 ? _ref2 : "\u25C6";
|
|
531
|
+
var segments;
|
|
532
|
+
if ((cfg === null || cfg === void 0 ? void 0 : cfg.use_custom_text) && (cfg === null || cfg === void 0 ? void 0 : cfg.custom_text)) {
|
|
533
|
+
segments = [
|
|
534
|
+
cfg.custom_text
|
|
535
|
+
];
|
|
536
|
+
} else if (rssItems.length > 0) {
|
|
537
|
+
segments = rssItems.map(function(item) {
|
|
538
|
+
var parts = [];
|
|
539
|
+
if ((cfg === null || cfg === void 0 ? void 0 : cfg.show_title) !== false && item.title) parts.push(item.title);
|
|
540
|
+
if ((cfg === null || cfg === void 0 ? void 0 : cfg.show_description) && item.description) parts.push(item.description);
|
|
541
|
+
if ((cfg === null || cfg === void 0 ? void 0 : cfg.show_timestamp) && item.pubDate) {
|
|
542
|
+
try {
|
|
543
|
+
parts.push(new Date(item.pubDate).toLocaleDateString());
|
|
544
|
+
} catch (unused) {}
|
|
545
|
+
}
|
|
546
|
+
if ((cfg === null || cfg === void 0 ? void 0 : cfg.show_author) && item.author) parts.push("— ".concat(item.author));
|
|
547
|
+
if ((cfg === null || cfg === void 0 ? void 0 : cfg.show_category) && item.category) parts.push("[".concat(item.category, "]"));
|
|
548
|
+
return parts.join(" ");
|
|
549
|
+
});
|
|
550
|
+
} else if (rssLoading) {
|
|
551
|
+
segments = [
|
|
552
|
+
"Loading feed\u2026"
|
|
553
|
+
];
|
|
554
|
+
} else if (overlay.content) {
|
|
555
|
+
segments = [
|
|
556
|
+
overlay.content
|
|
557
|
+
];
|
|
558
|
+
} else {
|
|
559
|
+
segments = rssUrl ? [
|
|
560
|
+
"Fetching RSS feed\u2026"
|
|
561
|
+
] : [
|
|
562
|
+
"RSS Ticker"
|
|
563
|
+
];
|
|
564
|
+
}
|
|
565
|
+
var scrollSpeed = (_ref3 = cfg === null || cfg === void 0 ? void 0 : cfg.scroll_speed) !== null && _ref3 !== void 0 ? _ref3 : 40;
|
|
566
|
+
var direction = (_ref4 = cfg === null || cfg === void 0 ? void 0 : cfg.direction) !== null && _ref4 !== void 0 ? _ref4 : "left";
|
|
567
|
+
var fontSize = (_ref5 = cfg === null || cfg === void 0 ? void 0 : cfg.font_size) !== null && _ref5 !== void 0 ? _ref5 : 15;
|
|
324
568
|
var fontFamily = (cfg === null || cfg === void 0 ? void 0 : cfg.font_family) || "Roboto, 'Segoe UI', Arial, sans-serif";
|
|
325
|
-
var fontWeight = (cfg === null || cfg === void 0 ? void 0 : cfg.font_weight) || "
|
|
569
|
+
var fontWeight = (cfg === null || cfg === void 0 ? void 0 : cfg.font_weight) || "700";
|
|
326
570
|
var textColor = (cfg === null || cfg === void 0 ? void 0 : cfg.text_color) || "#ffffff";
|
|
327
|
-
var bgColor = (cfg === null || cfg === void 0 ? void 0 : cfg.background_color) || "
|
|
328
|
-
var bgOpacity = (cfg === null || cfg === void 0 ? void 0 : cfg.background_opacity) !== void 0 ? cfg.background_opacity / 100 : 0;
|
|
329
|
-
var
|
|
330
|
-
var
|
|
331
|
-
var
|
|
332
|
-
var
|
|
333
|
-
var
|
|
571
|
+
var bgColor = (cfg === null || cfg === void 0 ? void 0 : cfg.background_color) || "#0d0d1a";
|
|
572
|
+
var bgOpacity = (cfg === null || cfg === void 0 ? void 0 : cfg.background_opacity) !== void 0 ? cfg.background_opacity / 100 : 0.95;
|
|
573
|
+
var borderRadius = (_ref6 = cfg === null || cfg === void 0 ? void 0 : cfg.border_radius) !== null && _ref6 !== void 0 ? _ref6 : 0;
|
|
574
|
+
var itemSpacing = (_ref7 = cfg === null || cfg === void 0 ? void 0 : cfg.item_spacing) !== null && _ref7 !== void 0 ? _ref7 : 60;
|
|
575
|
+
var label = (_ref8 = cfg === null || cfg === void 0 ? void 0 : cfg.label) !== null && _ref8 !== void 0 ? _ref8 : "NEWS";
|
|
576
|
+
var labelLine2 = (_ref9 = cfg === null || cfg === void 0 ? void 0 : cfg.label_line2) !== null && _ref9 !== void 0 ? _ref9 : "";
|
|
577
|
+
var labelColor = (_ref10 = cfg === null || cfg === void 0 ? void 0 : cfg.label_color) !== null && _ref10 !== void 0 ? _ref10 : "#f97316";
|
|
578
|
+
var labelTextColor = (_ref11 = cfg === null || cfg === void 0 ? void 0 : cfg.label_text_color) !== null && _ref11 !== void 0 ? _ref11 : "#ffffff";
|
|
579
|
+
var accentColor = (_ref12 = cfg === null || cfg === void 0 ? void 0 : cfg.accent_color) !== null && _ref12 !== void 0 ? _ref12 : labelColor;
|
|
580
|
+
var showAccentLine = (cfg === null || cfg === void 0 ? void 0 : cfg.show_accent_line) !== false;
|
|
581
|
+
var isHorizontal = direction === "left" || direction === "right";
|
|
334
582
|
var isReverse = direction === "right" || direction === "down";
|
|
335
|
-
var
|
|
336
|
-
var
|
|
337
|
-
var
|
|
583
|
+
var fullText = segments.join(" ".concat(sep, " "));
|
|
584
|
+
var durationSec = Math.max(6, fullText.length * 9 / scrollSpeed);
|
|
585
|
+
var animId = "sc-ticker-".concat(overlay.id, "-").concat(uid);
|
|
586
|
+
var keyframes = isHorizontal ? "@keyframes ".concat(animId, " {\n ").concat(isReverse ? "0% { transform: translateX(-50%); } 100% { transform: translateX(0%); }" : "0% { transform: translateX(0); } 100% { transform: translateX(-50%); }", "\n }") : "@keyframes ".concat(animId, " {\n ").concat(isReverse ? "0% { transform: translateY(-50%); } 100% { transform: translateY(0%); }" : "0% { transform: translateY(0); } 100% { transform: translateY(-50%); }", "\n }");
|
|
338
587
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
|
|
339
588
|
children: [
|
|
340
589
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", {
|
|
341
590
|
children: keyframes
|
|
342
591
|
}),
|
|
343
|
-
/* @__PURE__ */ (0, import_jsx_runtime.
|
|
592
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
344
593
|
style: {
|
|
345
594
|
width: "100%",
|
|
346
595
|
height: "100%",
|
|
347
|
-
overflow: "hidden",
|
|
348
596
|
display: "flex",
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
border: borderWidth > 0 ? "".concat(borderWidth, "px solid ").concat(borderColor) : void 0,
|
|
597
|
+
flexDirection: "column",
|
|
598
|
+
overflow: "hidden",
|
|
352
599
|
borderRadius: borderRadius > 0 ? "".concat(borderRadius, "px") : void 0,
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
600
|
+
backgroundColor: "rgba(".concat(hexToRgb(bgColor), ", ").concat(bgOpacity, ")"),
|
|
601
|
+
fontFamily: fontFamily,
|
|
602
|
+
fontSize: "".concat(fontSize, "px"),
|
|
603
|
+
fontWeight: fontWeight,
|
|
604
|
+
color: textColor,
|
|
605
|
+
pointerEvents: "none",
|
|
606
|
+
userSelect: "none"
|
|
356
607
|
},
|
|
357
|
-
children:
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
608
|
+
children: [
|
|
609
|
+
showAccentLine && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
610
|
+
style: {
|
|
611
|
+
height: 3,
|
|
612
|
+
background: accentColor,
|
|
613
|
+
flexShrink: 0,
|
|
614
|
+
width: "100%"
|
|
615
|
+
}
|
|
616
|
+
}),
|
|
617
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
618
|
+
style: {
|
|
619
|
+
display: "flex",
|
|
620
|
+
flex: 1,
|
|
621
|
+
overflow: "hidden",
|
|
622
|
+
minHeight: 0
|
|
623
|
+
},
|
|
624
|
+
children: [
|
|
625
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
626
|
+
style: {
|
|
627
|
+
background: labelColor,
|
|
628
|
+
color: labelTextColor,
|
|
629
|
+
padding: "0 14px",
|
|
630
|
+
display: "flex",
|
|
631
|
+
flexDirection: "column",
|
|
632
|
+
alignItems: "center",
|
|
633
|
+
justifyContent: "center",
|
|
634
|
+
flexShrink: 0,
|
|
635
|
+
minWidth: 72,
|
|
636
|
+
textAlign: "center",
|
|
637
|
+
gap: 1
|
|
638
|
+
},
|
|
639
|
+
children: [
|
|
640
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
|
|
641
|
+
style: {
|
|
642
|
+
fontWeight: 800,
|
|
643
|
+
fontSize: "0.82em",
|
|
644
|
+
letterSpacing: "0.05em",
|
|
645
|
+
lineHeight: 1.1,
|
|
646
|
+
textTransform: "uppercase",
|
|
647
|
+
whiteSpace: "nowrap"
|
|
648
|
+
},
|
|
649
|
+
children: label
|
|
650
|
+
}),
|
|
651
|
+
labelLine2 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
|
|
652
|
+
style: {
|
|
653
|
+
fontWeight: 500,
|
|
654
|
+
fontSize: "0.62em",
|
|
655
|
+
letterSpacing: "0.03em",
|
|
656
|
+
lineHeight: 1.1,
|
|
657
|
+
opacity: 0.85,
|
|
658
|
+
whiteSpace: "nowrap"
|
|
659
|
+
},
|
|
660
|
+
children: labelLine2
|
|
661
|
+
})
|
|
662
|
+
]
|
|
663
|
+
}),
|
|
664
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
665
|
+
style: {
|
|
666
|
+
width: 3,
|
|
667
|
+
background: accentColor,
|
|
668
|
+
flexShrink: 0
|
|
669
|
+
}
|
|
670
|
+
}),
|
|
671
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
672
|
+
style: {
|
|
673
|
+
flex: 1,
|
|
674
|
+
overflow: "hidden",
|
|
675
|
+
position: "relative",
|
|
676
|
+
display: "flex",
|
|
677
|
+
alignItems: "center"
|
|
678
|
+
},
|
|
679
|
+
children: isHorizontal ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
680
|
+
style: {
|
|
681
|
+
display: "inline-flex",
|
|
682
|
+
whiteSpace: "nowrap",
|
|
683
|
+
animation: "".concat(animId, " ").concat(durationSec, "s linear infinite"),
|
|
684
|
+
willChange: "transform"
|
|
685
|
+
},
|
|
686
|
+
children: [
|
|
687
|
+
0,
|
|
688
|
+
1
|
|
689
|
+
].map(function(copy) {
|
|
690
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
|
|
691
|
+
style: {
|
|
692
|
+
paddingRight: "".concat(itemSpacing, "px")
|
|
693
|
+
},
|
|
694
|
+
children: segments.map(function(seg, i) {
|
|
695
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.default.Fragment, {
|
|
696
|
+
children: [
|
|
697
|
+
i > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
|
|
698
|
+
style: {
|
|
699
|
+
opacity: 0.5,
|
|
700
|
+
margin: "0 8px"
|
|
701
|
+
},
|
|
702
|
+
children: sep
|
|
703
|
+
}),
|
|
704
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
|
|
705
|
+
style: {
|
|
706
|
+
textShadow: "0 1px 3px rgba(0,0,0,0.6)"
|
|
707
|
+
},
|
|
708
|
+
children: seg
|
|
709
|
+
})
|
|
710
|
+
]
|
|
711
|
+
}, i);
|
|
712
|
+
})
|
|
713
|
+
}, copy);
|
|
714
|
+
})
|
|
715
|
+
}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
716
|
+
style: {
|
|
717
|
+
display: "flex",
|
|
718
|
+
flexDirection: "column",
|
|
719
|
+
whiteSpace: "nowrap",
|
|
720
|
+
animation: "".concat(animId, " ").concat(durationSec, "s linear infinite"),
|
|
721
|
+
willChange: "transform"
|
|
722
|
+
},
|
|
723
|
+
children: [
|
|
724
|
+
0,
|
|
725
|
+
1
|
|
726
|
+
].map(function(copy) {
|
|
727
|
+
return segments.map(function(seg, i) {
|
|
728
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
729
|
+
style: {
|
|
730
|
+
paddingBottom: "".concat(itemSpacing / 4, "px")
|
|
731
|
+
},
|
|
732
|
+
children: seg
|
|
733
|
+
}, "".concat(copy, "-").concat(i));
|
|
734
|
+
});
|
|
735
|
+
})
|
|
736
|
+
})
|
|
737
|
+
})
|
|
738
|
+
]
|
|
739
|
+
})
|
|
740
|
+
]
|
|
370
741
|
})
|
|
371
742
|
]
|
|
372
743
|
});
|