stormcloud-video-player 0.6.6 → 0.7.1
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 +1340 -118
- package/lib/index.cjs.map +1 -1
- package/lib/index.d.cts +65 -1
- package/lib/index.d.ts +65 -1
- package/lib/index.js +1306 -100
- package/lib/index.js.map +1 -1
- package/lib/player/StormcloudVideoPlayer.cjs +40 -0
- package/lib/player/StormcloudVideoPlayer.cjs.map +1 -1
- package/lib/player/StormcloudVideoPlayer.d.cts +4 -0
- package/lib/players/HlsPlayer.cjs +40 -0
- package/lib/players/HlsPlayer.cjs.map +1 -1
- package/lib/players/index.cjs +40 -0
- package/lib/players/index.cjs.map +1 -1
- package/lib/ui/OverlayRenderer.cjs +1189 -0
- package/lib/ui/OverlayRenderer.cjs.map +1 -0
- package/lib/ui/OverlayRenderer.d.cts +15 -0
- package/lib/ui/StormcloudVideoPlayer.cjs +1300 -94
- package/lib/ui/StormcloudVideoPlayer.cjs.map +1 -1
- package/lib/ui/StormcloudVideoPlayer.d.cts +1 -0
- package/lib/utils/overlays.cjs +286 -0
- package/lib/utils/overlays.cjs.map +1 -0
- package/lib/utils/overlays.d.cts +60 -0
- package/package.json +1 -1
package/lib/index.cjs
CHANGED
|
@@ -473,6 +473,9 @@ __export(index_exports, {
|
|
|
473
473
|
detectBrowser: function detectBrowser1() {
|
|
474
474
|
return detectBrowser;
|
|
475
475
|
},
|
|
476
|
+
fetchProjectOverlays: function fetchProjectOverlays1() {
|
|
477
|
+
return fetchProjectOverlays;
|
|
478
|
+
},
|
|
476
479
|
getBrowserConfigOverrides: function getBrowserConfigOverrides1() {
|
|
477
480
|
return getBrowserConfigOverrides;
|
|
478
481
|
},
|
|
@@ -488,6 +491,9 @@ __export(index_exports, {
|
|
|
488
491
|
isMediaStream: function isMediaStream1() {
|
|
489
492
|
return isMediaStream;
|
|
490
493
|
},
|
|
494
|
+
isOverlayActive: function isOverlayActive1() {
|
|
495
|
+
return isOverlayActive;
|
|
496
|
+
},
|
|
491
497
|
lazy: function lazy1() {
|
|
492
498
|
return lazy;
|
|
493
499
|
},
|
|
@@ -509,6 +515,9 @@ __export(index_exports, {
|
|
|
509
515
|
randomString: function randomString1() {
|
|
510
516
|
return randomString;
|
|
511
517
|
},
|
|
518
|
+
resolveImageUrl: function resolveImageUrl1() {
|
|
519
|
+
return resolveImageUrl;
|
|
520
|
+
},
|
|
512
521
|
sendHeartbeat: function sendHeartbeat1() {
|
|
513
522
|
return sendHeartbeat;
|
|
514
523
|
},
|
|
@@ -523,11 +532,14 @@ __export(index_exports, {
|
|
|
523
532
|
},
|
|
524
533
|
supportsWebKitPresentationMode: function supportsWebKitPresentationMode1() {
|
|
525
534
|
return supportsWebKitPresentationMode;
|
|
535
|
+
},
|
|
536
|
+
timeStringToSeconds: function timeStringToSeconds1() {
|
|
537
|
+
return timeStringToSeconds;
|
|
526
538
|
}
|
|
527
539
|
});
|
|
528
540
|
module.exports = __toCommonJS(index_exports);
|
|
529
541
|
// src/ui/StormcloudVideoPlayer.tsx
|
|
530
|
-
var
|
|
542
|
+
var import_react2 = __toESM(require("react"), 1);
|
|
531
543
|
// src/player/StormcloudVideoPlayer.ts
|
|
532
544
|
var import_hls2 = __toESM(require("hls.js"), 1);
|
|
533
545
|
// src/sdk/vastParser.ts
|
|
@@ -6189,6 +6201,46 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
|
|
|
6189
6201
|
return this.isLiveStream;
|
|
6190
6202
|
}
|
|
6191
6203
|
},
|
|
6204
|
+
{
|
|
6205
|
+
key: "getMinHlsResolution",
|
|
6206
|
+
value: function getMinHlsResolution() {
|
|
6207
|
+
var _this_hls;
|
|
6208
|
+
var levels = (_this_hls = this.hls) === null || _this_hls === void 0 ? void 0 : _this_hls.levels;
|
|
6209
|
+
if (!levels || levels.length === 0) return null;
|
|
6210
|
+
var min = null;
|
|
6211
|
+
var minPixels = Infinity;
|
|
6212
|
+
var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
|
|
6213
|
+
try {
|
|
6214
|
+
for(var _iterator = levels[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
|
|
6215
|
+
var level = _step.value;
|
|
6216
|
+
if (level.width && level.height) {
|
|
6217
|
+
var pixels = level.width * level.height;
|
|
6218
|
+
if (pixels < minPixels) {
|
|
6219
|
+
minPixels = pixels;
|
|
6220
|
+
min = {
|
|
6221
|
+
width: level.width,
|
|
6222
|
+
height: level.height
|
|
6223
|
+
};
|
|
6224
|
+
}
|
|
6225
|
+
}
|
|
6226
|
+
}
|
|
6227
|
+
} catch (err) {
|
|
6228
|
+
_didIteratorError = true;
|
|
6229
|
+
_iteratorError = err;
|
|
6230
|
+
} finally{
|
|
6231
|
+
try {
|
|
6232
|
+
if (!_iteratorNormalCompletion && _iterator.return != null) {
|
|
6233
|
+
_iterator.return();
|
|
6234
|
+
}
|
|
6235
|
+
} finally{
|
|
6236
|
+
if (_didIteratorError) {
|
|
6237
|
+
throw _iteratorError;
|
|
6238
|
+
}
|
|
6239
|
+
}
|
|
6240
|
+
}
|
|
6241
|
+
return min;
|
|
6242
|
+
}
|
|
6243
|
+
},
|
|
6192
6244
|
{
|
|
6193
6245
|
key: "videoElement",
|
|
6194
6246
|
get: function get() {
|
|
@@ -6251,7 +6303,1107 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
|
|
|
6251
6303
|
}();
|
|
6252
6304
|
// src/ui/StormcloudVideoPlayer.tsx
|
|
6253
6305
|
var import_fa = require("react-icons/fa");
|
|
6306
|
+
// src/ui/OverlayRenderer.tsx
|
|
6307
|
+
var import_react = __toESM(require("react"), 1);
|
|
6308
|
+
// src/utils/overlays.ts
|
|
6309
|
+
var OVERLAY_API_BASE = "https://adstorm.co/api-adstorm-dev";
|
|
6310
|
+
function timeStringToSeconds(timeStr) {
|
|
6311
|
+
if (!timeStr) return 0;
|
|
6312
|
+
var parts = timeStr.split(":");
|
|
6313
|
+
if (parts.length >= 3) {
|
|
6314
|
+
var _parts_, _parts_1, _parts_2;
|
|
6315
|
+
var hours = parseInt((_parts_ = parts[0]) !== null && _parts_ !== void 0 ? _parts_ : "0", 10) || 0;
|
|
6316
|
+
var minutes = parseInt((_parts_1 = parts[1]) !== null && _parts_1 !== void 0 ? _parts_1 : "0", 10) || 0;
|
|
6317
|
+
var secStr = (_parts_2 = parts[2]) !== null && _parts_2 !== void 0 ? _parts_2 : "0";
|
|
6318
|
+
var dotIdx = secStr.indexOf(".");
|
|
6319
|
+
var seconds = parseInt(dotIdx >= 0 ? secStr.substring(0, dotIdx) : secStr, 10) || 0;
|
|
6320
|
+
var msFrag = dotIdx >= 0 ? secStr.substring(dotIdx + 1) : "";
|
|
6321
|
+
var ms = msFrag ? parseInt(msFrag.padEnd(3, "0").substring(0, 3), 10) || 0 : 0;
|
|
6322
|
+
return hours * 3600 + minutes * 60 + seconds + ms / 1e3;
|
|
6323
|
+
}
|
|
6324
|
+
if (parts.length === 2) {
|
|
6325
|
+
var _parts_3, _parts_4;
|
|
6326
|
+
var minutes1 = parseInt((_parts_3 = parts[0]) !== null && _parts_3 !== void 0 ? _parts_3 : "0", 10) || 0;
|
|
6327
|
+
var secStr1 = (_parts_4 = parts[1]) !== null && _parts_4 !== void 0 ? _parts_4 : "0";
|
|
6328
|
+
var dotIdx1 = secStr1.indexOf(".");
|
|
6329
|
+
var seconds1 = parseInt(dotIdx1 >= 0 ? secStr1.substring(0, dotIdx1) : secStr1, 10) || 0;
|
|
6330
|
+
var msFrag1 = dotIdx1 >= 0 ? secStr1.substring(dotIdx1 + 1) : "";
|
|
6331
|
+
var ms1 = msFrag1 ? parseInt(msFrag1.padEnd(3, "0").substring(0, 3), 10) || 0 : 0;
|
|
6332
|
+
return minutes1 * 60 + seconds1 + ms1 / 1e3;
|
|
6333
|
+
}
|
|
6334
|
+
var num = parseFloat(timeStr);
|
|
6335
|
+
return isFinite(num) ? Math.max(0, num) : 0;
|
|
6336
|
+
}
|
|
6337
|
+
function isOverlayActive(overlay, currentTime) {
|
|
6338
|
+
if (!overlay.visible) return false;
|
|
6339
|
+
var startSec = timeStringToSeconds(overlay.start_time);
|
|
6340
|
+
var durationSec = timeStringToSeconds(overlay.duration);
|
|
6341
|
+
if (durationSec <= 0) return false;
|
|
6342
|
+
return currentTime >= startSec && currentTime < startSec + durationSec;
|
|
6343
|
+
}
|
|
6344
|
+
function fetchProjectOverlays(_0) {
|
|
6345
|
+
return _async_to_generator(function(projectId) {
|
|
6346
|
+
var apiBaseUrl, response, data;
|
|
6347
|
+
var _arguments = arguments;
|
|
6348
|
+
return _ts_generator(this, function(_state) {
|
|
6349
|
+
switch(_state.label){
|
|
6350
|
+
case 0:
|
|
6351
|
+
apiBaseUrl = _arguments.length > 1 && _arguments[1] !== void 0 ? _arguments[1] : OVERLAY_API_BASE;
|
|
6352
|
+
return [
|
|
6353
|
+
4,
|
|
6354
|
+
fetch("".concat(apiBaseUrl, "/adstorm/swirl/projects/").concat(projectId, "/overlays"))
|
|
6355
|
+
];
|
|
6356
|
+
case 1:
|
|
6357
|
+
response = _state.sent();
|
|
6358
|
+
if (!response.ok) {
|
|
6359
|
+
throw new Error("Failed to fetch overlays: ".concat(response.status, " ").concat(response.statusText));
|
|
6360
|
+
}
|
|
6361
|
+
return [
|
|
6362
|
+
4,
|
|
6363
|
+
response.json()
|
|
6364
|
+
];
|
|
6365
|
+
case 2:
|
|
6366
|
+
data = _state.sent();
|
|
6367
|
+
return [
|
|
6368
|
+
2,
|
|
6369
|
+
Array.isArray(data) ? data : []
|
|
6370
|
+
];
|
|
6371
|
+
}
|
|
6372
|
+
});
|
|
6373
|
+
}).apply(this, arguments);
|
|
6374
|
+
}
|
|
6375
|
+
function resolveImageUrl(imageUrl) {
|
|
6376
|
+
var apiBaseUrl = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : OVERLAY_API_BASE;
|
|
6377
|
+
if (!imageUrl) return "";
|
|
6378
|
+
if (imageUrl.startsWith("http://") || imageUrl.startsWith("https://")) {
|
|
6379
|
+
return imageUrl;
|
|
6380
|
+
}
|
|
6381
|
+
if (imageUrl.startsWith("/")) {
|
|
6382
|
+
try {
|
|
6383
|
+
var url = new URL(apiBaseUrl);
|
|
6384
|
+
return "".concat(url.origin).concat(imageUrl);
|
|
6385
|
+
} catch (unused) {
|
|
6386
|
+
return imageUrl;
|
|
6387
|
+
}
|
|
6388
|
+
}
|
|
6389
|
+
return "".concat(apiBaseUrl, "/").concat(imageUrl);
|
|
6390
|
+
}
|
|
6391
|
+
// src/ui/OverlayRenderer.tsx
|
|
6254
6392
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
6393
|
+
function computeVideoDimensions(video) {
|
|
6394
|
+
var nativeWidth = video.videoWidth;
|
|
6395
|
+
var nativeHeight = video.videoHeight;
|
|
6396
|
+
if (!nativeWidth || !nativeHeight) return null;
|
|
6397
|
+
var displayWidth = video.offsetWidth;
|
|
6398
|
+
var displayHeight = video.offsetHeight;
|
|
6399
|
+
if (!displayWidth || !displayHeight) return null;
|
|
6400
|
+
var videoAspect = nativeWidth / nativeHeight;
|
|
6401
|
+
var displayAspect = displayWidth / displayHeight;
|
|
6402
|
+
var renderWidth;
|
|
6403
|
+
var renderHeight;
|
|
6404
|
+
var offsetX;
|
|
6405
|
+
var offsetY;
|
|
6406
|
+
if (videoAspect > displayAspect) {
|
|
6407
|
+
renderWidth = displayWidth;
|
|
6408
|
+
renderHeight = displayWidth / videoAspect;
|
|
6409
|
+
offsetX = 0;
|
|
6410
|
+
offsetY = (displayHeight - renderHeight) / 2;
|
|
6411
|
+
} else {
|
|
6412
|
+
renderHeight = displayHeight;
|
|
6413
|
+
renderWidth = displayHeight * videoAspect;
|
|
6414
|
+
offsetX = (displayWidth - renderWidth) / 2;
|
|
6415
|
+
offsetY = 0;
|
|
6416
|
+
}
|
|
6417
|
+
return {
|
|
6418
|
+
nativeWidth: nativeWidth,
|
|
6419
|
+
nativeHeight: nativeHeight,
|
|
6420
|
+
displayWidth: renderWidth,
|
|
6421
|
+
displayHeight: renderHeight,
|
|
6422
|
+
offsetX: offsetX,
|
|
6423
|
+
offsetY: offsetY,
|
|
6424
|
+
scaleX: renderWidth / nativeWidth,
|
|
6425
|
+
scaleY: renderHeight / nativeHeight
|
|
6426
|
+
};
|
|
6427
|
+
}
|
|
6428
|
+
function ImageOverlay(param) {
|
|
6429
|
+
var overlay = param.overlay;
|
|
6430
|
+
var src = resolveImageUrl(overlay.image_url || "");
|
|
6431
|
+
if (!src) return null;
|
|
6432
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", {
|
|
6433
|
+
src: src,
|
|
6434
|
+
alt: overlay.name,
|
|
6435
|
+
draggable: false,
|
|
6436
|
+
style: {
|
|
6437
|
+
width: "100%",
|
|
6438
|
+
height: "100%",
|
|
6439
|
+
objectFit: "contain",
|
|
6440
|
+
display: "block",
|
|
6441
|
+
pointerEvents: "none",
|
|
6442
|
+
userSelect: "none"
|
|
6443
|
+
}
|
|
6444
|
+
});
|
|
6445
|
+
}
|
|
6446
|
+
function TextOverlay(param) {
|
|
6447
|
+
var overlay = param.overlay;
|
|
6448
|
+
var text = overlay.content || "";
|
|
6449
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
6450
|
+
style: {
|
|
6451
|
+
width: "100%",
|
|
6452
|
+
height: "100%",
|
|
6453
|
+
display: "flex",
|
|
6454
|
+
alignItems: "center",
|
|
6455
|
+
justifyContent: "center",
|
|
6456
|
+
color: "#ffffff",
|
|
6457
|
+
fontSize: "clamp(10px, 1.4vw, 20px)",
|
|
6458
|
+
fontFamily: "Roboto, 'Segoe UI', Arial, sans-serif",
|
|
6459
|
+
fontWeight: 600,
|
|
6460
|
+
textAlign: "center",
|
|
6461
|
+
padding: "4px 8px",
|
|
6462
|
+
boxSizing: "border-box",
|
|
6463
|
+
wordBreak: "break-word",
|
|
6464
|
+
textShadow: "0 1px 4px rgba(0,0,0,0.7)",
|
|
6465
|
+
pointerEvents: "none",
|
|
6466
|
+
userSelect: "none",
|
|
6467
|
+
lineHeight: 1.3
|
|
6468
|
+
},
|
|
6469
|
+
children: text
|
|
6470
|
+
});
|
|
6471
|
+
}
|
|
6472
|
+
function ScrollerOverlay(param) {
|
|
6473
|
+
var overlay = param.overlay;
|
|
6474
|
+
var _ref, _ref1, _ref2, _ref3, _ref4;
|
|
6475
|
+
var cfg = overlay.scroller_config;
|
|
6476
|
+
var text = (cfg === null || cfg === void 0 ? void 0 : cfg.use_custom_text) && cfg.custom_text ? cfg.custom_text : overlay.content || (cfg === null || cfg === void 0 ? void 0 : cfg.custom_text) || "";
|
|
6477
|
+
var scrollSpeed = (_ref = cfg === null || cfg === void 0 ? void 0 : cfg.scroll_speed) !== null && _ref !== void 0 ? _ref : 50;
|
|
6478
|
+
var direction = (_ref1 = cfg === null || cfg === void 0 ? void 0 : cfg.direction) !== null && _ref1 !== void 0 ? _ref1 : "left";
|
|
6479
|
+
var fontSize = (cfg === null || cfg === void 0 ? void 0 : cfg.font_size) ? "".concat(cfg.font_size, "px") : "clamp(10px, 1.2vw, 18px)";
|
|
6480
|
+
var fontFamily = (cfg === null || cfg === void 0 ? void 0 : cfg.font_family) || "Roboto, 'Segoe UI', Arial, sans-serif";
|
|
6481
|
+
var fontWeight = (cfg === null || cfg === void 0 ? void 0 : cfg.font_weight) || "600";
|
|
6482
|
+
var textColor = (cfg === null || cfg === void 0 ? void 0 : cfg.text_color) || "#ffffff";
|
|
6483
|
+
var bgColor = (cfg === null || cfg === void 0 ? void 0 : cfg.background_color) || "transparent";
|
|
6484
|
+
var bgOpacity = (cfg === null || cfg === void 0 ? void 0 : cfg.background_opacity) !== void 0 ? cfg.background_opacity / 100 : 0;
|
|
6485
|
+
var borderColor = (cfg === null || cfg === void 0 ? void 0 : cfg.border_color) || "transparent";
|
|
6486
|
+
var borderWidth = (_ref2 = cfg === null || cfg === void 0 ? void 0 : cfg.border_width) !== null && _ref2 !== void 0 ? _ref2 : 0;
|
|
6487
|
+
var borderRadius = (_ref3 = cfg === null || cfg === void 0 ? void 0 : cfg.border_radius) !== null && _ref3 !== void 0 ? _ref3 : 0;
|
|
6488
|
+
var padding = (_ref4 = cfg === null || cfg === void 0 ? void 0 : cfg.padding) !== null && _ref4 !== void 0 ? _ref4 : 4;
|
|
6489
|
+
var isVertical = direction === "up" || direction === "down";
|
|
6490
|
+
var isReverse = direction === "right" || direction === "down";
|
|
6491
|
+
var durationSec = Math.max(3, 120 - scrollSpeed);
|
|
6492
|
+
var animId = "sc-scroller-".concat(overlay.id);
|
|
6493
|
+
var keyframes = isVertical ? "@keyframes ".concat(animId, " {\n 0% { transform: translateY(").concat(isReverse ? "-100%" : "100%", "); }\n 100% { transform: translateY(").concat(isReverse ? "100%" : "-100%", "); }\n }") : "@keyframes ".concat(animId, " {\n 0% { transform: translateX(").concat(isReverse ? "-100%" : "100%", "); }\n 100% { transform: translateX(").concat(isReverse ? "100%" : "-100%", "); }\n }");
|
|
6494
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
|
|
6495
|
+
children: [
|
|
6496
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", {
|
|
6497
|
+
children: keyframes
|
|
6498
|
+
}),
|
|
6499
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
6500
|
+
style: {
|
|
6501
|
+
width: "100%",
|
|
6502
|
+
height: "100%",
|
|
6503
|
+
overflow: "hidden",
|
|
6504
|
+
display: "flex",
|
|
6505
|
+
alignItems: "center",
|
|
6506
|
+
backgroundColor: bgOpacity > 0 ? "rgba(".concat(hexToRgb(bgColor), ", ").concat(bgOpacity, ")") : void 0,
|
|
6507
|
+
border: borderWidth > 0 ? "".concat(borderWidth, "px solid ").concat(borderColor) : void 0,
|
|
6508
|
+
borderRadius: borderRadius > 0 ? "".concat(borderRadius, "px") : void 0,
|
|
6509
|
+
padding: "".concat(padding, "px"),
|
|
6510
|
+
boxSizing: "border-box",
|
|
6511
|
+
pointerEvents: "none"
|
|
6512
|
+
},
|
|
6513
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
6514
|
+
style: {
|
|
6515
|
+
whiteSpace: "nowrap",
|
|
6516
|
+
fontSize: fontSize,
|
|
6517
|
+
fontFamily: fontFamily,
|
|
6518
|
+
fontWeight: fontWeight,
|
|
6519
|
+
color: textColor,
|
|
6520
|
+
animation: "".concat(animId, " ").concat(durationSec, "s linear infinite"),
|
|
6521
|
+
textShadow: "0 1px 4px rgba(0,0,0,0.5)",
|
|
6522
|
+
userSelect: "none"
|
|
6523
|
+
},
|
|
6524
|
+
children: text
|
|
6525
|
+
})
|
|
6526
|
+
})
|
|
6527
|
+
]
|
|
6528
|
+
});
|
|
6529
|
+
}
|
|
6530
|
+
function parseConfig(content) {
|
|
6531
|
+
if (!content) return null;
|
|
6532
|
+
try {
|
|
6533
|
+
return JSON.parse(content);
|
|
6534
|
+
} catch (unused) {
|
|
6535
|
+
return null;
|
|
6536
|
+
}
|
|
6537
|
+
}
|
|
6538
|
+
function ScoreBugOverlay(param) {
|
|
6539
|
+
var overlay = param.overlay, size = param.size;
|
|
6540
|
+
var cfg = parseConfig(overlay.content);
|
|
6541
|
+
if (!cfg) return null;
|
|
6542
|
+
var f = Math.max(6, size.w * 0.058);
|
|
6543
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
6544
|
+
style: {
|
|
6545
|
+
width: "100%",
|
|
6546
|
+
height: "100%",
|
|
6547
|
+
borderRadius: Math.max(2, size.w * 0.035),
|
|
6548
|
+
display: "flex",
|
|
6549
|
+
flexDirection: "column",
|
|
6550
|
+
background: cfg.backgroundColor,
|
|
6551
|
+
color: cfg.textColor,
|
|
6552
|
+
fontFamily: "Roboto, 'Segoe UI', Arial, sans-serif",
|
|
6553
|
+
overflow: "hidden",
|
|
6554
|
+
pointerEvents: "none",
|
|
6555
|
+
userSelect: "none",
|
|
6556
|
+
fontSize: "".concat(f, "px")
|
|
6557
|
+
},
|
|
6558
|
+
children: [
|
|
6559
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
6560
|
+
style: {
|
|
6561
|
+
flex: 1,
|
|
6562
|
+
display: "flex",
|
|
6563
|
+
alignItems: "center",
|
|
6564
|
+
padding: "0 ".concat(f * 0.8, "px"),
|
|
6565
|
+
gap: f * 0.4
|
|
6566
|
+
},
|
|
6567
|
+
children: [
|
|
6568
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
6569
|
+
style: {
|
|
6570
|
+
flex: 1,
|
|
6571
|
+
textAlign: "center"
|
|
6572
|
+
},
|
|
6573
|
+
children: [
|
|
6574
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
6575
|
+
style: {
|
|
6576
|
+
fontSize: "1em",
|
|
6577
|
+
fontWeight: 700
|
|
6578
|
+
},
|
|
6579
|
+
children: cfg.homeTeam
|
|
6580
|
+
}),
|
|
6581
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
6582
|
+
style: {
|
|
6583
|
+
fontSize: "1.8em",
|
|
6584
|
+
fontWeight: 900,
|
|
6585
|
+
lineHeight: 1
|
|
6586
|
+
},
|
|
6587
|
+
children: cfg.homeScore
|
|
6588
|
+
})
|
|
6589
|
+
]
|
|
6590
|
+
}),
|
|
6591
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
6592
|
+
style: {
|
|
6593
|
+
fontSize: "0.8em",
|
|
6594
|
+
textAlign: "center",
|
|
6595
|
+
opacity: 0.7,
|
|
6596
|
+
padding: "0 ".concat(f * 0.4, "px")
|
|
6597
|
+
},
|
|
6598
|
+
children: [
|
|
6599
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
6600
|
+
children: cfg.period
|
|
6601
|
+
}),
|
|
6602
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
6603
|
+
children: cfg.clock
|
|
6604
|
+
})
|
|
6605
|
+
]
|
|
6606
|
+
}),
|
|
6607
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
6608
|
+
style: {
|
|
6609
|
+
flex: 1,
|
|
6610
|
+
textAlign: "center"
|
|
6611
|
+
},
|
|
6612
|
+
children: [
|
|
6613
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
6614
|
+
style: {
|
|
6615
|
+
fontSize: "1em",
|
|
6616
|
+
fontWeight: 700
|
|
6617
|
+
},
|
|
6618
|
+
children: cfg.awayTeam
|
|
6619
|
+
}),
|
|
6620
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
6621
|
+
style: {
|
|
6622
|
+
fontSize: "1.8em",
|
|
6623
|
+
fontWeight: 900,
|
|
6624
|
+
lineHeight: 1
|
|
6625
|
+
},
|
|
6626
|
+
children: cfg.awayScore
|
|
6627
|
+
})
|
|
6628
|
+
]
|
|
6629
|
+
})
|
|
6630
|
+
]
|
|
6631
|
+
}),
|
|
6632
|
+
cfg.sponsorText && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
6633
|
+
style: {
|
|
6634
|
+
fontSize: "0.7em",
|
|
6635
|
+
textAlign: "center",
|
|
6636
|
+
opacity: 0.5,
|
|
6637
|
+
padding: "".concat(f * 0.2, "px 0"),
|
|
6638
|
+
borderTop: "1px solid ".concat(cfg.accentColor, "40")
|
|
6639
|
+
},
|
|
6640
|
+
children: cfg.sponsorText
|
|
6641
|
+
})
|
|
6642
|
+
]
|
|
6643
|
+
});
|
|
6644
|
+
}
|
|
6645
|
+
function LowerThirdOverlay(param) {
|
|
6646
|
+
var overlay = param.overlay, size = param.size;
|
|
6647
|
+
var cfg = parseConfig(overlay.content);
|
|
6648
|
+
if (!cfg) return null;
|
|
6649
|
+
var f = Math.max(6, size.w * 0.055);
|
|
6650
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
6651
|
+
style: {
|
|
6652
|
+
width: "100%",
|
|
6653
|
+
height: "100%",
|
|
6654
|
+
borderRadius: Math.max(2, size.w * 0.02),
|
|
6655
|
+
display: "flex",
|
|
6656
|
+
flexDirection: "column",
|
|
6657
|
+
justifyContent: "flex-end",
|
|
6658
|
+
background: cfg.backgroundColor,
|
|
6659
|
+
color: cfg.textColor,
|
|
6660
|
+
fontFamily: "Roboto, 'Segoe UI', Arial, sans-serif",
|
|
6661
|
+
overflow: "hidden",
|
|
6662
|
+
pointerEvents: "none",
|
|
6663
|
+
userSelect: "none",
|
|
6664
|
+
fontSize: "".concat(f, "px")
|
|
6665
|
+
},
|
|
6666
|
+
children: [
|
|
6667
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
6668
|
+
style: {
|
|
6669
|
+
width: "100%",
|
|
6670
|
+
height: Math.max(2, size.h * 0.06),
|
|
6671
|
+
backgroundColor: cfg.accentColor
|
|
6672
|
+
}
|
|
6673
|
+
}),
|
|
6674
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
6675
|
+
style: {
|
|
6676
|
+
flex: 1,
|
|
6677
|
+
display: "flex",
|
|
6678
|
+
flexDirection: "column",
|
|
6679
|
+
justifyContent: "center",
|
|
6680
|
+
padding: "".concat(f * 0.5, "px ").concat(f * 1.2, "px")
|
|
6681
|
+
},
|
|
6682
|
+
children: [
|
|
6683
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
6684
|
+
style: {
|
|
6685
|
+
fontSize: "1.4em",
|
|
6686
|
+
fontWeight: 700,
|
|
6687
|
+
lineHeight: 1.2,
|
|
6688
|
+
textShadow: "0 1px 4px rgba(0,0,0,0.5)"
|
|
6689
|
+
},
|
|
6690
|
+
children: cfg.headline
|
|
6691
|
+
}),
|
|
6692
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
6693
|
+
style: {
|
|
6694
|
+
fontSize: "1em",
|
|
6695
|
+
opacity: 0.7,
|
|
6696
|
+
marginTop: f * 0.2
|
|
6697
|
+
},
|
|
6698
|
+
children: cfg.subtitle
|
|
6699
|
+
})
|
|
6700
|
+
]
|
|
6701
|
+
}),
|
|
6702
|
+
cfg.sponsorText && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
6703
|
+
style: {
|
|
6704
|
+
fontSize: "0.7em",
|
|
6705
|
+
opacity: 0.4,
|
|
6706
|
+
padding: "0 ".concat(f * 1.2, "px ").concat(f * 0.4, "px")
|
|
6707
|
+
},
|
|
6708
|
+
children: cfg.sponsorText
|
|
6709
|
+
})
|
|
6710
|
+
]
|
|
6711
|
+
});
|
|
6712
|
+
}
|
|
6713
|
+
function QrCodeOverlay(param) {
|
|
6714
|
+
var overlay = param.overlay, size = param.size;
|
|
6715
|
+
var cfg = parseConfig(overlay.content);
|
|
6716
|
+
if (!cfg) return null;
|
|
6717
|
+
var qrSide = Math.max(32, Math.min(size.w, size.h) * 0.55);
|
|
6718
|
+
var qrUrl = "https://api.qrserver.com/v1/create-qr-code/?size=".concat(Math.round(qrSide * 2), "x").concat(Math.round(qrSide * 2), "&data=").concat(encodeURIComponent(cfg.url || "https://example.com"));
|
|
6719
|
+
var f = Math.max(6, size.w * 0.06);
|
|
6720
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
6721
|
+
style: {
|
|
6722
|
+
width: "100%",
|
|
6723
|
+
height: "100%",
|
|
6724
|
+
borderRadius: Math.max(2, size.w * 0.035),
|
|
6725
|
+
display: "flex",
|
|
6726
|
+
flexDirection: "column",
|
|
6727
|
+
alignItems: "center",
|
|
6728
|
+
justifyContent: "center",
|
|
6729
|
+
gap: f * 0.4,
|
|
6730
|
+
background: cfg.backgroundColor,
|
|
6731
|
+
color: cfg.textColor,
|
|
6732
|
+
fontFamily: "Roboto, 'Segoe UI', Arial, sans-serif",
|
|
6733
|
+
padding: f * 0.6,
|
|
6734
|
+
boxSizing: "border-box",
|
|
6735
|
+
pointerEvents: "none",
|
|
6736
|
+
userSelect: "none",
|
|
6737
|
+
overflow: "hidden"
|
|
6738
|
+
},
|
|
6739
|
+
children: [
|
|
6740
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
6741
|
+
style: {
|
|
6742
|
+
flexShrink: 0,
|
|
6743
|
+
background: "#fff",
|
|
6744
|
+
borderRadius: Math.max(2, qrSide * 0.06),
|
|
6745
|
+
padding: Math.max(2, qrSide * 0.06),
|
|
6746
|
+
lineHeight: 0
|
|
6747
|
+
},
|
|
6748
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", {
|
|
6749
|
+
src: qrUrl,
|
|
6750
|
+
alt: "QR Code",
|
|
6751
|
+
style: {
|
|
6752
|
+
width: "".concat(qrSide, "px"),
|
|
6753
|
+
height: "".concat(qrSide, "px"),
|
|
6754
|
+
display: "block"
|
|
6755
|
+
}
|
|
6756
|
+
})
|
|
6757
|
+
}),
|
|
6758
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
6759
|
+
style: {
|
|
6760
|
+
fontSize: "".concat(f * 1.1, "px"),
|
|
6761
|
+
fontWeight: 700,
|
|
6762
|
+
textAlign: "center",
|
|
6763
|
+
color: cfg.accentColor,
|
|
6764
|
+
overflow: "hidden",
|
|
6765
|
+
textOverflow: "ellipsis",
|
|
6766
|
+
whiteSpace: "nowrap",
|
|
6767
|
+
width: "100%"
|
|
6768
|
+
},
|
|
6769
|
+
children: cfg.ctaText
|
|
6770
|
+
}),
|
|
6771
|
+
cfg.description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
6772
|
+
style: {
|
|
6773
|
+
fontSize: "".concat(f * 0.75, "px"),
|
|
6774
|
+
opacity: 0.6,
|
|
6775
|
+
textAlign: "center",
|
|
6776
|
+
overflow: "hidden",
|
|
6777
|
+
textOverflow: "ellipsis",
|
|
6778
|
+
whiteSpace: "nowrap",
|
|
6779
|
+
width: "100%"
|
|
6780
|
+
},
|
|
6781
|
+
children: cfg.description
|
|
6782
|
+
})
|
|
6783
|
+
]
|
|
6784
|
+
});
|
|
6785
|
+
}
|
|
6786
|
+
function ComingUpNextOverlay(param) {
|
|
6787
|
+
var overlay = param.overlay, size = param.size;
|
|
6788
|
+
var cfg = parseConfig(overlay.content);
|
|
6789
|
+
if (!cfg) return null;
|
|
6790
|
+
var f = Math.max(6, size.w * 0.05);
|
|
6791
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
6792
|
+
style: {
|
|
6793
|
+
width: "100%",
|
|
6794
|
+
height: "100%",
|
|
6795
|
+
borderRadius: Math.max(2, size.w * 0.035),
|
|
6796
|
+
display: "flex",
|
|
6797
|
+
background: cfg.backgroundColor,
|
|
6798
|
+
color: cfg.textColor,
|
|
6799
|
+
fontFamily: "Roboto, 'Segoe UI', Arial, sans-serif",
|
|
6800
|
+
overflow: "hidden",
|
|
6801
|
+
pointerEvents: "none",
|
|
6802
|
+
userSelect: "none",
|
|
6803
|
+
fontSize: "".concat(f, "px")
|
|
6804
|
+
},
|
|
6805
|
+
children: [
|
|
6806
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
6807
|
+
style: {
|
|
6808
|
+
width: Math.max(2, size.w * 0.015),
|
|
6809
|
+
flexShrink: 0,
|
|
6810
|
+
backgroundColor: cfg.accentColor
|
|
6811
|
+
}
|
|
6812
|
+
}),
|
|
6813
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
6814
|
+
style: {
|
|
6815
|
+
flex: 1,
|
|
6816
|
+
display: "flex",
|
|
6817
|
+
flexDirection: "column",
|
|
6818
|
+
justifyContent: "center",
|
|
6819
|
+
padding: "".concat(f * 0.6, "px ").concat(f * 1, "px"),
|
|
6820
|
+
minWidth: 0
|
|
6821
|
+
},
|
|
6822
|
+
children: [
|
|
6823
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
6824
|
+
style: {
|
|
6825
|
+
fontSize: "0.8em",
|
|
6826
|
+
fontWeight: 600,
|
|
6827
|
+
textTransform: "uppercase",
|
|
6828
|
+
letterSpacing: "0.05em",
|
|
6829
|
+
color: cfg.accentColor
|
|
6830
|
+
},
|
|
6831
|
+
children: "Coming Up Next"
|
|
6832
|
+
}),
|
|
6833
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
6834
|
+
style: {
|
|
6835
|
+
fontSize: "1.5em",
|
|
6836
|
+
fontWeight: 700,
|
|
6837
|
+
lineHeight: 1.2,
|
|
6838
|
+
marginTop: f * 0.2,
|
|
6839
|
+
overflow: "hidden",
|
|
6840
|
+
textOverflow: "ellipsis",
|
|
6841
|
+
whiteSpace: "nowrap"
|
|
6842
|
+
},
|
|
6843
|
+
children: cfg.title
|
|
6844
|
+
}),
|
|
6845
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
6846
|
+
style: {
|
|
6847
|
+
fontSize: "0.9em",
|
|
6848
|
+
opacity: 0.6,
|
|
6849
|
+
overflow: "hidden",
|
|
6850
|
+
textOverflow: "ellipsis",
|
|
6851
|
+
whiteSpace: "nowrap"
|
|
6852
|
+
},
|
|
6853
|
+
children: cfg.subtitle
|
|
6854
|
+
}),
|
|
6855
|
+
cfg.scheduledTime && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
6856
|
+
style: {
|
|
6857
|
+
fontSize: "1em",
|
|
6858
|
+
fontWeight: 600,
|
|
6859
|
+
marginTop: f * 0.4,
|
|
6860
|
+
color: cfg.accentColor
|
|
6861
|
+
},
|
|
6862
|
+
children: cfg.scheduledTime
|
|
6863
|
+
})
|
|
6864
|
+
]
|
|
6865
|
+
})
|
|
6866
|
+
]
|
|
6867
|
+
});
|
|
6868
|
+
}
|
|
6869
|
+
function ContextualTriggerOverlay(param) {
|
|
6870
|
+
var overlay = param.overlay, size = param.size;
|
|
6871
|
+
var cfg = parseConfig(overlay.content);
|
|
6872
|
+
if (!cfg) return null;
|
|
6873
|
+
var icons = {
|
|
6874
|
+
alert: "\u26A0\uFE0F",
|
|
6875
|
+
celebration: "\uD83C\uDF89",
|
|
6876
|
+
info: "\u2139\uFE0F",
|
|
6877
|
+
warning: "\uD83D\uDD14"
|
|
6878
|
+
};
|
|
6879
|
+
var f = Math.max(6, size.w * 0.05);
|
|
6880
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
6881
|
+
style: {
|
|
6882
|
+
width: "100%",
|
|
6883
|
+
height: "100%",
|
|
6884
|
+
borderRadius: Math.max(2, size.w * 0.035),
|
|
6885
|
+
display: "flex",
|
|
6886
|
+
alignItems: "center",
|
|
6887
|
+
gap: f * 0.8,
|
|
6888
|
+
padding: "0 ".concat(f * 1.2, "px"),
|
|
6889
|
+
background: cfg.backgroundColor,
|
|
6890
|
+
color: cfg.textColor,
|
|
6891
|
+
fontFamily: "Roboto, 'Segoe UI', Arial, sans-serif",
|
|
6892
|
+
borderLeft: "".concat(Math.max(2, size.w * 0.02), "px solid ").concat(cfg.accentColor),
|
|
6893
|
+
boxSizing: "border-box",
|
|
6894
|
+
pointerEvents: "none",
|
|
6895
|
+
userSelect: "none",
|
|
6896
|
+
fontSize: "".concat(f, "px")
|
|
6897
|
+
},
|
|
6898
|
+
children: [
|
|
6899
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
|
|
6900
|
+
style: {
|
|
6901
|
+
fontSize: "2em",
|
|
6902
|
+
flexShrink: 0
|
|
6903
|
+
},
|
|
6904
|
+
children: icons[cfg.iconType] || "\u26A1"
|
|
6905
|
+
}),
|
|
6906
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
6907
|
+
style: {
|
|
6908
|
+
flex: 1,
|
|
6909
|
+
minWidth: 0
|
|
6910
|
+
},
|
|
6911
|
+
children: [
|
|
6912
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
6913
|
+
style: {
|
|
6914
|
+
fontSize: "1.3em",
|
|
6915
|
+
fontWeight: 700,
|
|
6916
|
+
overflow: "hidden",
|
|
6917
|
+
textOverflow: "ellipsis",
|
|
6918
|
+
whiteSpace: "nowrap"
|
|
6919
|
+
},
|
|
6920
|
+
children: cfg.headline
|
|
6921
|
+
}),
|
|
6922
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
6923
|
+
style: {
|
|
6924
|
+
fontSize: "0.9em",
|
|
6925
|
+
opacity: 0.7,
|
|
6926
|
+
overflow: "hidden",
|
|
6927
|
+
textOverflow: "ellipsis",
|
|
6928
|
+
whiteSpace: "nowrap"
|
|
6929
|
+
},
|
|
6930
|
+
children: cfg.message
|
|
6931
|
+
})
|
|
6932
|
+
]
|
|
6933
|
+
})
|
|
6934
|
+
]
|
|
6935
|
+
});
|
|
6936
|
+
}
|
|
6937
|
+
function OddsBettingOverlay(param) {
|
|
6938
|
+
var overlay = param.overlay, size = param.size;
|
|
6939
|
+
var cfg = parseConfig(overlay.content);
|
|
6940
|
+
if (!cfg) return null;
|
|
6941
|
+
var f = Math.max(6, size.w * 0.052);
|
|
6942
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
6943
|
+
style: {
|
|
6944
|
+
width: "100%",
|
|
6945
|
+
height: "100%",
|
|
6946
|
+
borderRadius: Math.max(2, size.w * 0.035),
|
|
6947
|
+
display: "flex",
|
|
6948
|
+
flexDirection: "column",
|
|
6949
|
+
padding: f * 0.8,
|
|
6950
|
+
background: cfg.backgroundColor,
|
|
6951
|
+
color: cfg.textColor,
|
|
6952
|
+
fontFamily: "Roboto, 'Segoe UI', Arial, sans-serif",
|
|
6953
|
+
boxSizing: "border-box",
|
|
6954
|
+
pointerEvents: "none",
|
|
6955
|
+
userSelect: "none",
|
|
6956
|
+
fontSize: "".concat(f, "px")
|
|
6957
|
+
},
|
|
6958
|
+
children: [
|
|
6959
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
6960
|
+
style: {
|
|
6961
|
+
fontSize: "0.9em",
|
|
6962
|
+
fontWeight: 700,
|
|
6963
|
+
textTransform: "uppercase",
|
|
6964
|
+
letterSpacing: "0.05em",
|
|
6965
|
+
color: cfg.accentColor,
|
|
6966
|
+
marginBottom: f * 0.4
|
|
6967
|
+
},
|
|
6968
|
+
children: cfg.eventTitle
|
|
6969
|
+
}),
|
|
6970
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
6971
|
+
style: {
|
|
6972
|
+
flex: 1,
|
|
6973
|
+
display: "flex",
|
|
6974
|
+
flexDirection: "column",
|
|
6975
|
+
gap: f * 0.2,
|
|
6976
|
+
justifyContent: "center"
|
|
6977
|
+
},
|
|
6978
|
+
children: (cfg.options || []).slice(0, 5).map(function(opt, i) {
|
|
6979
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
6980
|
+
style: {
|
|
6981
|
+
display: "flex",
|
|
6982
|
+
justifyContent: "space-between",
|
|
6983
|
+
alignItems: "center",
|
|
6984
|
+
padding: "".concat(f * 0.2, "px ").concat(f * 0.6, "px"),
|
|
6985
|
+
borderRadius: Math.max(2, f * 0.3),
|
|
6986
|
+
background: "".concat(cfg.accentColor, "15"),
|
|
6987
|
+
fontSize: "1em"
|
|
6988
|
+
},
|
|
6989
|
+
children: [
|
|
6990
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
|
|
6991
|
+
style: {
|
|
6992
|
+
overflow: "hidden",
|
|
6993
|
+
textOverflow: "ellipsis",
|
|
6994
|
+
whiteSpace: "nowrap",
|
|
6995
|
+
flex: 1
|
|
6996
|
+
},
|
|
6997
|
+
children: opt.label
|
|
6998
|
+
}),
|
|
6999
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
|
|
7000
|
+
style: {
|
|
7001
|
+
fontWeight: 700,
|
|
7002
|
+
marginLeft: f * 0.8,
|
|
7003
|
+
flexShrink: 0,
|
|
7004
|
+
color: cfg.accentColor
|
|
7005
|
+
},
|
|
7006
|
+
children: opt.odds
|
|
7007
|
+
})
|
|
7008
|
+
]
|
|
7009
|
+
}, i);
|
|
7010
|
+
})
|
|
7011
|
+
}),
|
|
7012
|
+
cfg.sponsorText && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
7013
|
+
style: {
|
|
7014
|
+
fontSize: "0.7em",
|
|
7015
|
+
opacity: 0.4,
|
|
7016
|
+
textAlign: "center",
|
|
7017
|
+
marginTop: f * 0.4
|
|
7018
|
+
},
|
|
7019
|
+
children: cfg.sponsorText
|
|
7020
|
+
})
|
|
7021
|
+
]
|
|
7022
|
+
});
|
|
7023
|
+
}
|
|
7024
|
+
function BreakingNewsOverlay(param) {
|
|
7025
|
+
var overlay = param.overlay, size = param.size;
|
|
7026
|
+
var cfg = parseConfig(overlay.content);
|
|
7027
|
+
if (!cfg) return null;
|
|
7028
|
+
var urgencyColors = {
|
|
7029
|
+
breaking: "#dc2626",
|
|
7030
|
+
urgent: "#ea580c",
|
|
7031
|
+
normal: "#2563eb"
|
|
7032
|
+
};
|
|
7033
|
+
var labelBg = urgencyColors[cfg.urgency] || urgencyColors.normal;
|
|
7034
|
+
var label = cfg.urgency === "breaking" ? "BREAKING" : cfg.urgency === "urgent" ? "URGENT" : "NEWS";
|
|
7035
|
+
var f = Math.max(6, size.w * 0.05);
|
|
7036
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
7037
|
+
style: {
|
|
7038
|
+
width: "100%",
|
|
7039
|
+
height: "100%",
|
|
7040
|
+
borderRadius: Math.max(2, size.w * 0.02),
|
|
7041
|
+
display: "flex",
|
|
7042
|
+
alignItems: "center",
|
|
7043
|
+
background: cfg.backgroundColor,
|
|
7044
|
+
color: cfg.textColor,
|
|
7045
|
+
fontFamily: "Roboto, 'Segoe UI', Arial, sans-serif",
|
|
7046
|
+
overflow: "hidden",
|
|
7047
|
+
pointerEvents: "none",
|
|
7048
|
+
userSelect: "none",
|
|
7049
|
+
fontSize: "".concat(f, "px")
|
|
7050
|
+
},
|
|
7051
|
+
children: [
|
|
7052
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
7053
|
+
style: {
|
|
7054
|
+
padding: "0 ".concat(f * 0.8, "px"),
|
|
7055
|
+
height: "100%",
|
|
7056
|
+
display: "flex",
|
|
7057
|
+
alignItems: "center",
|
|
7058
|
+
background: labelBg,
|
|
7059
|
+
color: "#fff",
|
|
7060
|
+
fontSize: "1em",
|
|
7061
|
+
fontWeight: 900,
|
|
7062
|
+
textTransform: "uppercase",
|
|
7063
|
+
letterSpacing: "0.05em",
|
|
7064
|
+
flexShrink: 0
|
|
7065
|
+
},
|
|
7066
|
+
children: label
|
|
7067
|
+
}),
|
|
7068
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
7069
|
+
style: {
|
|
7070
|
+
flex: 1,
|
|
7071
|
+
padding: "0 ".concat(f * 1, "px"),
|
|
7072
|
+
minWidth: 0
|
|
7073
|
+
},
|
|
7074
|
+
children: [
|
|
7075
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
7076
|
+
style: {
|
|
7077
|
+
fontSize: "1.3em",
|
|
7078
|
+
fontWeight: 700,
|
|
7079
|
+
overflow: "hidden",
|
|
7080
|
+
textOverflow: "ellipsis",
|
|
7081
|
+
whiteSpace: "nowrap"
|
|
7082
|
+
},
|
|
7083
|
+
children: cfg.headline
|
|
7084
|
+
}),
|
|
7085
|
+
cfg.body && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
7086
|
+
style: {
|
|
7087
|
+
fontSize: "0.9em",
|
|
7088
|
+
opacity: 0.7,
|
|
7089
|
+
overflow: "hidden",
|
|
7090
|
+
textOverflow: "ellipsis",
|
|
7091
|
+
whiteSpace: "nowrap"
|
|
7092
|
+
},
|
|
7093
|
+
children: cfg.body
|
|
7094
|
+
})
|
|
7095
|
+
]
|
|
7096
|
+
})
|
|
7097
|
+
]
|
|
7098
|
+
});
|
|
7099
|
+
}
|
|
7100
|
+
function CountdownOverlay(param) {
|
|
7101
|
+
var overlay = param.overlay, size = param.size;
|
|
7102
|
+
var cfg = parseConfig(overlay.content);
|
|
7103
|
+
var _ref = _sliced_to_array((0, import_react.useState)({
|
|
7104
|
+
d: 0,
|
|
7105
|
+
h: 0,
|
|
7106
|
+
m: 0,
|
|
7107
|
+
s: 0
|
|
7108
|
+
}), 2), remaining = _ref[0], setRemaining = _ref[1];
|
|
7109
|
+
(0, import_react.useEffect)(function() {
|
|
7110
|
+
if (!cfg) return;
|
|
7111
|
+
var update = function update() {
|
|
7112
|
+
var target = new Date(cfg.targetTime).getTime();
|
|
7113
|
+
var now = Date.now();
|
|
7114
|
+
var diff = Math.max(0, target - now);
|
|
7115
|
+
setRemaining({
|
|
7116
|
+
d: Math.floor(diff / 864e5),
|
|
7117
|
+
h: Math.floor(diff % 864e5 / 36e5),
|
|
7118
|
+
m: Math.floor(diff % 36e5 / 6e4),
|
|
7119
|
+
s: Math.floor(diff % 6e4 / 1e3)
|
|
7120
|
+
});
|
|
7121
|
+
};
|
|
7122
|
+
update();
|
|
7123
|
+
var id = setInterval(update, 1e3);
|
|
7124
|
+
return function() {
|
|
7125
|
+
return clearInterval(id);
|
|
7126
|
+
};
|
|
7127
|
+
}, [
|
|
7128
|
+
cfg === null || cfg === void 0 ? void 0 : cfg.targetTime
|
|
7129
|
+
]);
|
|
7130
|
+
if (!cfg) return null;
|
|
7131
|
+
var f = Math.max(6, size.w * 0.055);
|
|
7132
|
+
var pad = function pad(n) {
|
|
7133
|
+
return String(n).padStart(2, "0");
|
|
7134
|
+
};
|
|
7135
|
+
var units = [
|
|
7136
|
+
{
|
|
7137
|
+
show: cfg.showDays,
|
|
7138
|
+
value: pad(remaining.d),
|
|
7139
|
+
label: "DAYS"
|
|
7140
|
+
},
|
|
7141
|
+
{
|
|
7142
|
+
show: cfg.showHours,
|
|
7143
|
+
value: pad(remaining.h),
|
|
7144
|
+
label: "HRS"
|
|
7145
|
+
},
|
|
7146
|
+
{
|
|
7147
|
+
show: cfg.showMinutes,
|
|
7148
|
+
value: pad(remaining.m),
|
|
7149
|
+
label: "MIN"
|
|
7150
|
+
},
|
|
7151
|
+
{
|
|
7152
|
+
show: cfg.showSeconds,
|
|
7153
|
+
value: pad(remaining.s),
|
|
7154
|
+
label: "SEC"
|
|
7155
|
+
}
|
|
7156
|
+
];
|
|
7157
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
7158
|
+
style: {
|
|
7159
|
+
width: "100%",
|
|
7160
|
+
height: "100%",
|
|
7161
|
+
borderRadius: Math.max(2, size.w * 0.035),
|
|
7162
|
+
display: "flex",
|
|
7163
|
+
flexDirection: "column",
|
|
7164
|
+
alignItems: "center",
|
|
7165
|
+
justifyContent: "center",
|
|
7166
|
+
padding: f * 0.8,
|
|
7167
|
+
background: cfg.backgroundColor,
|
|
7168
|
+
color: cfg.textColor,
|
|
7169
|
+
fontFamily: "Roboto, 'Segoe UI', Arial, sans-serif",
|
|
7170
|
+
boxSizing: "border-box",
|
|
7171
|
+
pointerEvents: "none",
|
|
7172
|
+
userSelect: "none",
|
|
7173
|
+
fontSize: "".concat(f, "px")
|
|
7174
|
+
},
|
|
7175
|
+
children: [
|
|
7176
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
7177
|
+
style: {
|
|
7178
|
+
fontSize: "0.8em",
|
|
7179
|
+
fontWeight: 600,
|
|
7180
|
+
textTransform: "uppercase",
|
|
7181
|
+
letterSpacing: "0.05em",
|
|
7182
|
+
color: cfg.accentColor,
|
|
7183
|
+
marginBottom: f * 0.4
|
|
7184
|
+
},
|
|
7185
|
+
children: cfg.eventName
|
|
7186
|
+
}),
|
|
7187
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
7188
|
+
style: {
|
|
7189
|
+
display: "flex",
|
|
7190
|
+
gap: f * 0.6,
|
|
7191
|
+
alignItems: "center"
|
|
7192
|
+
},
|
|
7193
|
+
children: units.filter(function(u) {
|
|
7194
|
+
return u.show;
|
|
7195
|
+
}).map(function(u, i, arr) {
|
|
7196
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.default.Fragment, {
|
|
7197
|
+
children: [
|
|
7198
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
7199
|
+
style: {
|
|
7200
|
+
textAlign: "center"
|
|
7201
|
+
},
|
|
7202
|
+
children: [
|
|
7203
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
7204
|
+
style: {
|
|
7205
|
+
fontSize: "2em",
|
|
7206
|
+
fontWeight: 900,
|
|
7207
|
+
lineHeight: 1,
|
|
7208
|
+
borderRadius: Math.max(2, f * 0.4),
|
|
7209
|
+
padding: "".concat(f * 0.2, "px ").concat(f * 0.4, "px"),
|
|
7210
|
+
background: "".concat(cfg.accentColor, "20")
|
|
7211
|
+
},
|
|
7212
|
+
children: u.value
|
|
7213
|
+
}),
|
|
7214
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
7215
|
+
style: {
|
|
7216
|
+
fontSize: "0.5em",
|
|
7217
|
+
opacity: 0.5,
|
|
7218
|
+
marginTop: f * 0.2
|
|
7219
|
+
},
|
|
7220
|
+
children: u.label
|
|
7221
|
+
})
|
|
7222
|
+
]
|
|
7223
|
+
}),
|
|
7224
|
+
i < arr.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
7225
|
+
style: {
|
|
7226
|
+
fontSize: "1.8em",
|
|
7227
|
+
fontWeight: 700,
|
|
7228
|
+
opacity: 0.3
|
|
7229
|
+
},
|
|
7230
|
+
children: ":"
|
|
7231
|
+
})
|
|
7232
|
+
]
|
|
7233
|
+
}, u.label);
|
|
7234
|
+
})
|
|
7235
|
+
}),
|
|
7236
|
+
cfg.message && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
7237
|
+
style: {
|
|
7238
|
+
fontSize: "0.8em",
|
|
7239
|
+
opacity: 0.6,
|
|
7240
|
+
marginTop: f * 0.4,
|
|
7241
|
+
textAlign: "center"
|
|
7242
|
+
},
|
|
7243
|
+
children: cfg.message
|
|
7244
|
+
})
|
|
7245
|
+
]
|
|
7246
|
+
});
|
|
7247
|
+
}
|
|
7248
|
+
function ShapeOverlay(param) {
|
|
7249
|
+
var overlay = param.overlay, size = param.size;
|
|
7250
|
+
var f = Math.max(6, size.w * 0.05);
|
|
7251
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
7252
|
+
style: {
|
|
7253
|
+
width: "100%",
|
|
7254
|
+
height: "100%",
|
|
7255
|
+
borderRadius: Math.max(2, size.w * 0.03),
|
|
7256
|
+
background: "rgba(99, 102, 241, 0.2)",
|
|
7257
|
+
border: "2px solid rgba(99, 102, 241, 0.4)",
|
|
7258
|
+
display: "flex",
|
|
7259
|
+
alignItems: "center",
|
|
7260
|
+
justifyContent: "center",
|
|
7261
|
+
pointerEvents: "none",
|
|
7262
|
+
userSelect: "none"
|
|
7263
|
+
},
|
|
7264
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
7265
|
+
style: {
|
|
7266
|
+
fontSize: "".concat(f, "px"),
|
|
7267
|
+
fontWeight: 500,
|
|
7268
|
+
color: "rgba(163, 163, 163, 0.8)",
|
|
7269
|
+
textTransform: "uppercase"
|
|
7270
|
+
},
|
|
7271
|
+
children: overlay.name
|
|
7272
|
+
})
|
|
7273
|
+
});
|
|
7274
|
+
}
|
|
7275
|
+
function hexToRgb(hex) {
|
|
7276
|
+
if (!hex || !hex.startsWith("#")) return "0,0,0";
|
|
7277
|
+
var clean = hex.slice(1);
|
|
7278
|
+
var num = parseInt(clean.length === 3 ? clean.replace(/./g, "$&$&") : clean, 16);
|
|
7279
|
+
return "".concat(num >> 16 & 255, ",").concat(num >> 8 & 255, ",").concat(num & 255);
|
|
7280
|
+
}
|
|
7281
|
+
var OverlayRenderer = function OverlayRenderer(param) {
|
|
7282
|
+
var overlays = param.overlays, currentTime = param.currentTime, videoRef = param.videoRef, coordinateSpace = param.coordinateSpace;
|
|
7283
|
+
var _ref = _sliced_to_array((0, import_react.useState)(null), 2), dims = _ref[0], setDims = _ref[1];
|
|
7284
|
+
var rafRef = (0, import_react.useRef)(null);
|
|
7285
|
+
var updateDims = (0, import_react.useCallback)(function() {
|
|
7286
|
+
var video = videoRef.current;
|
|
7287
|
+
if (video) {
|
|
7288
|
+
var computed = computeVideoDimensions(video);
|
|
7289
|
+
setDims(function(prev) {
|
|
7290
|
+
if (!computed || prev && prev.nativeWidth === computed.nativeWidth && prev.nativeHeight === computed.nativeHeight && prev.displayWidth === computed.displayWidth && prev.displayHeight === computed.displayHeight && prev.offsetX === computed.offsetX && prev.offsetY === computed.offsetY) {
|
|
7291
|
+
return prev;
|
|
7292
|
+
}
|
|
7293
|
+
return computed;
|
|
7294
|
+
});
|
|
7295
|
+
}
|
|
7296
|
+
}, [
|
|
7297
|
+
videoRef
|
|
7298
|
+
]);
|
|
7299
|
+
(0, import_react.useEffect)(function() {
|
|
7300
|
+
updateDims();
|
|
7301
|
+
var interval = setInterval(updateDims, 500);
|
|
7302
|
+
var handleResize = function handleResize() {
|
|
7303
|
+
if (rafRef.current) cancelAnimationFrame(rafRef.current);
|
|
7304
|
+
rafRef.current = requestAnimationFrame(updateDims);
|
|
7305
|
+
};
|
|
7306
|
+
window.addEventListener("resize", handleResize);
|
|
7307
|
+
return function() {
|
|
7308
|
+
clearInterval(interval);
|
|
7309
|
+
window.removeEventListener("resize", handleResize);
|
|
7310
|
+
if (rafRef.current) cancelAnimationFrame(rafRef.current);
|
|
7311
|
+
};
|
|
7312
|
+
}, [
|
|
7313
|
+
updateDims
|
|
7314
|
+
]);
|
|
7315
|
+
var activeOverlays = overlays.filter(function(o) {
|
|
7316
|
+
return isOverlayActive(o, currentTime);
|
|
7317
|
+
});
|
|
7318
|
+
if (!dims || activeOverlays.length === 0) return null;
|
|
7319
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
7320
|
+
"aria-hidden": "true",
|
|
7321
|
+
style: {
|
|
7322
|
+
position: "absolute",
|
|
7323
|
+
left: "".concat(dims.offsetX, "px"),
|
|
7324
|
+
top: "".concat(dims.offsetY, "px"),
|
|
7325
|
+
width: "".concat(dims.displayWidth, "px"),
|
|
7326
|
+
height: "".concat(dims.displayHeight, "px"),
|
|
7327
|
+
pointerEvents: "none",
|
|
7328
|
+
overflow: "hidden",
|
|
7329
|
+
zIndex: 8
|
|
7330
|
+
},
|
|
7331
|
+
children: activeOverlays.map(function(overlay) {
|
|
7332
|
+
var scaleX = (coordinateSpace === null || coordinateSpace === void 0 ? void 0 : coordinateSpace.width) ? dims.displayWidth / coordinateSpace.width : dims.scaleX;
|
|
7333
|
+
var scaleY = (coordinateSpace === null || coordinateSpace === void 0 ? void 0 : coordinateSpace.height) ? dims.displayHeight / coordinateSpace.height : dims.scaleY;
|
|
7334
|
+
var left = overlay.x * scaleX;
|
|
7335
|
+
var top = overlay.y * scaleY;
|
|
7336
|
+
var width = overlay.width * scaleX;
|
|
7337
|
+
var height = overlay.height * scaleY;
|
|
7338
|
+
var opacity = Math.max(0, Math.min(100, overlay.opacity)) / 100;
|
|
7339
|
+
var sz = {
|
|
7340
|
+
w: width,
|
|
7341
|
+
h: height
|
|
7342
|
+
};
|
|
7343
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
7344
|
+
style: {
|
|
7345
|
+
position: "absolute",
|
|
7346
|
+
left: "".concat(left, "px"),
|
|
7347
|
+
top: "".concat(top, "px"),
|
|
7348
|
+
width: "".concat(width, "px"),
|
|
7349
|
+
height: "".concat(height, "px"),
|
|
7350
|
+
opacity: opacity,
|
|
7351
|
+
zIndex: overlay.z_index,
|
|
7352
|
+
overflow: "hidden"
|
|
7353
|
+
},
|
|
7354
|
+
children: [
|
|
7355
|
+
overlay.type === "image" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ImageOverlay, {
|
|
7356
|
+
overlay: overlay
|
|
7357
|
+
}),
|
|
7358
|
+
overlay.type === "text" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TextOverlay, {
|
|
7359
|
+
overlay: overlay
|
|
7360
|
+
}),
|
|
7361
|
+
overlay.type === "scroller" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ScrollerOverlay, {
|
|
7362
|
+
overlay: overlay
|
|
7363
|
+
}),
|
|
7364
|
+
overlay.type === "shape" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ShapeOverlay, {
|
|
7365
|
+
overlay: overlay,
|
|
7366
|
+
size: sz
|
|
7367
|
+
}),
|
|
7368
|
+
overlay.type === "score_bug" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ScoreBugOverlay, {
|
|
7369
|
+
overlay: overlay,
|
|
7370
|
+
size: sz
|
|
7371
|
+
}),
|
|
7372
|
+
overlay.type === "lower_third" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LowerThirdOverlay, {
|
|
7373
|
+
overlay: overlay,
|
|
7374
|
+
size: sz
|
|
7375
|
+
}),
|
|
7376
|
+
overlay.type === "qr_code" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(QrCodeOverlay, {
|
|
7377
|
+
overlay: overlay,
|
|
7378
|
+
size: sz
|
|
7379
|
+
}),
|
|
7380
|
+
overlay.type === "coming_up_next" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ComingUpNextOverlay, {
|
|
7381
|
+
overlay: overlay,
|
|
7382
|
+
size: sz
|
|
7383
|
+
}),
|
|
7384
|
+
overlay.type === "contextual_trigger" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ContextualTriggerOverlay, {
|
|
7385
|
+
overlay: overlay,
|
|
7386
|
+
size: sz
|
|
7387
|
+
}),
|
|
7388
|
+
overlay.type === "odds_betting" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(OddsBettingOverlay, {
|
|
7389
|
+
overlay: overlay,
|
|
7390
|
+
size: sz
|
|
7391
|
+
}),
|
|
7392
|
+
overlay.type === "breaking_news" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BreakingNewsOverlay, {
|
|
7393
|
+
overlay: overlay,
|
|
7394
|
+
size: sz
|
|
7395
|
+
}),
|
|
7396
|
+
overlay.type === "countdown" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CountdownOverlay, {
|
|
7397
|
+
overlay: overlay,
|
|
7398
|
+
size: sz
|
|
7399
|
+
})
|
|
7400
|
+
]
|
|
7401
|
+
}, overlay.id);
|
|
7402
|
+
})
|
|
7403
|
+
});
|
|
7404
|
+
};
|
|
7405
|
+
// src/ui/StormcloudVideoPlayer.tsx
|
|
7406
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
6255
7407
|
var CRITICAL_PROPS = [
|
|
6256
7408
|
"src",
|
|
6257
7409
|
"allowNativeHls",
|
|
@@ -6260,8 +7412,8 @@ var CRITICAL_PROPS = [
|
|
|
6260
7412
|
"driftToleranceMs"
|
|
6261
7413
|
];
|
|
6262
7414
|
var CONTROLS_HIDE_DELAY = 3e3;
|
|
6263
|
-
var StormcloudVideoPlayerComponent =
|
|
6264
|
-
var src = props.src, autoplay = props.autoplay, muted = props.muted, lowLatencyMode = props.lowLatencyMode, allowNativeHls = props.allowNativeHls, driftToleranceMs = props.driftToleranceMs, immediateManifestAds = props.immediateManifestAds, debugAdTiming = props.debugAdTiming, showCustomControls = props.showCustomControls, hideLoadingIndicator = props.hideLoadingIndicator, onVolumeToggle = props.onVolumeToggle, onFullscreenToggle = props.onFullscreenToggle, onControlClick = props.onControlClick, onReady = props.onReady, wrapperClassName = props.wrapperClassName, wrapperStyle = props.wrapperStyle, className = props.className, style = props.style, controls = props.controls, playsInline = props.playsInline, preload = props.preload, poster = props.poster, children = props.children, licenseKey = props.licenseKey, minSegmentsBeforePlay = props.minSegmentsBeforePlay, disableAds = props.disableAds, disableFiller = props.disableFiller, restVideoAttrs = _object_without_properties(props, [
|
|
7415
|
+
var StormcloudVideoPlayerComponent = import_react2.default.memo(function(props) {
|
|
7416
|
+
var src = props.src, autoplay = props.autoplay, muted = props.muted, lowLatencyMode = props.lowLatencyMode, allowNativeHls = props.allowNativeHls, driftToleranceMs = props.driftToleranceMs, immediateManifestAds = props.immediateManifestAds, debugAdTiming = props.debugAdTiming, showCustomControls = props.showCustomControls, hideLoadingIndicator = props.hideLoadingIndicator, onVolumeToggle = props.onVolumeToggle, onFullscreenToggle = props.onFullscreenToggle, onControlClick = props.onControlClick, onReady = props.onReady, wrapperClassName = props.wrapperClassName, wrapperStyle = props.wrapperStyle, className = props.className, style = props.style, controls = props.controls, playsInline = props.playsInline, preload = props.preload, poster = props.poster, children = props.children, licenseKey = props.licenseKey, minSegmentsBeforePlay = props.minSegmentsBeforePlay, disableAds = props.disableAds, disableFiller = props.disableFiller, swirlProjectId = props.swirlProjectId, restVideoAttrs = _object_without_properties(props, [
|
|
6265
7417
|
"src",
|
|
6266
7418
|
"autoplay",
|
|
6267
7419
|
"muted",
|
|
@@ -6288,35 +7440,38 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
6288
7440
|
"licenseKey",
|
|
6289
7441
|
"minSegmentsBeforePlay",
|
|
6290
7442
|
"disableAds",
|
|
6291
|
-
"disableFiller"
|
|
7443
|
+
"disableFiller",
|
|
7444
|
+
"swirlProjectId"
|
|
6292
7445
|
]);
|
|
6293
|
-
var videoRef = (0,
|
|
6294
|
-
var playerRef = (0,
|
|
6295
|
-
var bufferingTimeoutRef = (0,
|
|
6296
|
-
var controlsTimerRef = (0,
|
|
6297
|
-
var wrapperRef = (0,
|
|
6298
|
-
var
|
|
7446
|
+
var videoRef = (0, import_react2.useRef)(null);
|
|
7447
|
+
var playerRef = (0, import_react2.useRef)(null);
|
|
7448
|
+
var bufferingTimeoutRef = (0, import_react2.useRef)(null);
|
|
7449
|
+
var controlsTimerRef = (0, import_react2.useRef)(null);
|
|
7450
|
+
var wrapperRef = (0, import_react2.useRef)(null);
|
|
7451
|
+
var _import_react2_default_useState = _sliced_to_array(import_react2.default.useState({
|
|
6299
7452
|
showAds: false,
|
|
6300
7453
|
currentIndex: 0,
|
|
6301
7454
|
totalAds: 0
|
|
6302
|
-
}), 2), adStatus =
|
|
6303
|
-
var
|
|
6304
|
-
var
|
|
6305
|
-
var
|
|
6306
|
-
var
|
|
6307
|
-
var
|
|
6308
|
-
var
|
|
6309
|
-
var
|
|
6310
|
-
var
|
|
6311
|
-
var
|
|
6312
|
-
var
|
|
6313
|
-
var
|
|
6314
|
-
var
|
|
6315
|
-
var
|
|
6316
|
-
var
|
|
6317
|
-
var
|
|
6318
|
-
var
|
|
6319
|
-
var
|
|
7455
|
+
}), 2), adStatus = _import_react2_default_useState[0], setAdStatus = _import_react2_default_useState[1];
|
|
7456
|
+
var _import_react2_default_useState1 = _sliced_to_array(import_react2.default.useState(true), 2), shouldShowNativeControls = _import_react2_default_useState1[0], setShouldShowNativeControls = _import_react2_default_useState1[1];
|
|
7457
|
+
var _import_react2_default_useState2 = _sliced_to_array(import_react2.default.useState(false), 2), isMuted = _import_react2_default_useState2[0], setIsMuted = _import_react2_default_useState2[1];
|
|
7458
|
+
var _import_react2_default_useState3 = _sliced_to_array(import_react2.default.useState(false), 2), isFullscreen = _import_react2_default_useState3[0], setIsFullscreen = _import_react2_default_useState3[1];
|
|
7459
|
+
var _import_react2_default_useState4 = _sliced_to_array(import_react2.default.useState(false), 2), isPlaying = _import_react2_default_useState4[0], setIsPlaying = _import_react2_default_useState4[1];
|
|
7460
|
+
var _import_react2_default_useState5 = _sliced_to_array(import_react2.default.useState(0), 2), currentTime = _import_react2_default_useState5[0], setCurrentTime = _import_react2_default_useState5[1];
|
|
7461
|
+
var _import_react2_default_useState6 = _sliced_to_array(import_react2.default.useState(0), 2), duration = _import_react2_default_useState6[0], setDuration = _import_react2_default_useState6[1];
|
|
7462
|
+
var _import_react2_default_useState7 = _sliced_to_array(import_react2.default.useState(1), 2), volume = _import_react2_default_useState7[0], setVolume = _import_react2_default_useState7[1];
|
|
7463
|
+
var _import_react2_default_useState8 = _sliced_to_array(import_react2.default.useState(1), 2), playbackRate = _import_react2_default_useState8[0], setPlaybackRate = _import_react2_default_useState8[1];
|
|
7464
|
+
var _import_react2_default_useState9 = _sliced_to_array(import_react2.default.useState(false), 2), showVolumeSlider = _import_react2_default_useState9[0], setShowVolumeSlider = _import_react2_default_useState9[1];
|
|
7465
|
+
var _import_react2_default_useState10 = _sliced_to_array(import_react2.default.useState(false), 2), showSpeedMenu = _import_react2_default_useState10[0], setShowSpeedMenu = _import_react2_default_useState10[1];
|
|
7466
|
+
var _import_react2_default_useState11 = _sliced_to_array(import_react2.default.useState(true), 2), isLoading = _import_react2_default_useState11[0], setIsLoading = _import_react2_default_useState11[1];
|
|
7467
|
+
var _import_react2_default_useState12 = _sliced_to_array(import_react2.default.useState(false), 2), isBuffering = _import_react2_default_useState12[0], setIsBuffering = _import_react2_default_useState12[1];
|
|
7468
|
+
var _import_react2_default_useState13 = _sliced_to_array(import_react2.default.useState(false), 2), showCenterPlay = _import_react2_default_useState13[0], setShowCenterPlay = _import_react2_default_useState13[1];
|
|
7469
|
+
var _import_react2_default_useState14 = _sliced_to_array(import_react2.default.useState(false), 2), showLicenseWarning = _import_react2_default_useState14[0], setShowLicenseWarning = _import_react2_default_useState14[1];
|
|
7470
|
+
var _import_react2_default_useState15 = _sliced_to_array(import_react2.default.useState(true), 2), controlsVisible = _import_react2_default_useState15[0], setControlsVisible = _import_react2_default_useState15[1];
|
|
7471
|
+
var _import_react2_default_useState16 = _sliced_to_array(import_react2.default.useState([]), 2), overlays = _import_react2_default_useState16[0], setOverlays = _import_react2_default_useState16[1];
|
|
7472
|
+
var _import_react2_default_useState17 = _sliced_to_array(import_react2.default.useState(null), 2), overlayCoordSpace = _import_react2_default_useState17[0], setOverlayCoordSpace = _import_react2_default_useState17[1];
|
|
7473
|
+
var _import_react2_default_useState18 = _sliced_to_array(import_react2.default.useState(typeof window !== "undefined" ? window.innerWidth : 1920), 2), viewportWidth = _import_react2_default_useState18[0], setViewportWidth = _import_react2_default_useState18[1];
|
|
7474
|
+
var _import_react2_default_useState19 = _sliced_to_array(import_react2.default.useState(typeof window !== "undefined" ? window.innerHeight > window.innerWidth : false), 2), isPortrait = _import_react2_default_useState19[0], setIsPortrait = _import_react2_default_useState19[1];
|
|
6320
7475
|
var getResponsiveScale = function getResponsiveScale() {
|
|
6321
7476
|
if (viewportWidth < 480) return 0.7;
|
|
6322
7477
|
if (viewportWidth < 768) return 0.8;
|
|
@@ -6324,7 +7479,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
6324
7479
|
return 1;
|
|
6325
7480
|
};
|
|
6326
7481
|
var responsiveScale = getResponsiveScale();
|
|
6327
|
-
var resetControlsTimer = (0,
|
|
7482
|
+
var resetControlsTimer = (0, import_react2.useCallback)(function() {
|
|
6328
7483
|
if (controlsTimerRef.current) {
|
|
6329
7484
|
clearTimeout(controlsTimerRef.current);
|
|
6330
7485
|
}
|
|
@@ -6401,7 +7556,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
6401
7556
|
};
|
|
6402
7557
|
var isHlsStream = (src === null || src === void 0 ? void 0 : src.toLowerCase().includes(".m3u8")) || (src === null || src === void 0 ? void 0 : src.toLowerCase().includes("/hls/"));
|
|
6403
7558
|
var shouldShowEnhancedControls = showCustomControls && (isHlsStream ? allowNativeHls : true);
|
|
6404
|
-
var criticalPropsKey = (0,
|
|
7559
|
+
var criticalPropsKey = (0, import_react2.useMemo)(function() {
|
|
6405
7560
|
return CRITICAL_PROPS.map(function(prop) {
|
|
6406
7561
|
return "".concat(prop, ":").concat(props[prop]);
|
|
6407
7562
|
}).join("|");
|
|
@@ -6412,7 +7567,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
6412
7567
|
lowLatencyMode,
|
|
6413
7568
|
driftToleranceMs
|
|
6414
7569
|
]);
|
|
6415
|
-
(0,
|
|
7570
|
+
(0, import_react2.useEffect)(function() {
|
|
6416
7571
|
if (typeof window === "undefined") return;
|
|
6417
7572
|
var el = videoRef.current;
|
|
6418
7573
|
if (!el || !src) return;
|
|
@@ -6467,7 +7622,61 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
6467
7622
|
}, [
|
|
6468
7623
|
criticalPropsKey
|
|
6469
7624
|
]);
|
|
6470
|
-
(0,
|
|
7625
|
+
(0, import_react2.useEffect)(function() {
|
|
7626
|
+
if (!swirlProjectId) {
|
|
7627
|
+
setOverlays([]);
|
|
7628
|
+
setOverlayCoordSpace(null);
|
|
7629
|
+
return;
|
|
7630
|
+
}
|
|
7631
|
+
var cancelled = false;
|
|
7632
|
+
fetchProjectOverlays(swirlProjectId).then(function(data) {
|
|
7633
|
+
if (!cancelled) setOverlays(data);
|
|
7634
|
+
}).catch(function(err) {
|
|
7635
|
+
if (!cancelled) {
|
|
7636
|
+
console.warn("[StormcloudVideoPlayer] Failed to fetch overlays:", err);
|
|
7637
|
+
}
|
|
7638
|
+
});
|
|
7639
|
+
return function() {
|
|
7640
|
+
cancelled = true;
|
|
7641
|
+
};
|
|
7642
|
+
}, [
|
|
7643
|
+
swirlProjectId
|
|
7644
|
+
]);
|
|
7645
|
+
(0, import_react2.useEffect)(function() {
|
|
7646
|
+
if (!swirlProjectId) return;
|
|
7647
|
+
var player = playerRef.current;
|
|
7648
|
+
if (!player) return;
|
|
7649
|
+
var attempts = 0;
|
|
7650
|
+
var maxAttempts = 30;
|
|
7651
|
+
var tryResolve = function tryResolve() {
|
|
7652
|
+
var res = player.getMinHlsResolution();
|
|
7653
|
+
if (res) {
|
|
7654
|
+
setOverlayCoordSpace(res);
|
|
7655
|
+
return true;
|
|
7656
|
+
}
|
|
7657
|
+
var video = player.videoElement;
|
|
7658
|
+
if (video && video.videoWidth > 0 && video.videoHeight > 0) {
|
|
7659
|
+
setOverlayCoordSpace({
|
|
7660
|
+
width: video.videoWidth,
|
|
7661
|
+
height: video.videoHeight
|
|
7662
|
+
});
|
|
7663
|
+
return true;
|
|
7664
|
+
}
|
|
7665
|
+
return false;
|
|
7666
|
+
};
|
|
7667
|
+
if (tryResolve()) return;
|
|
7668
|
+
var interval = setInterval(function() {
|
|
7669
|
+
attempts++;
|
|
7670
|
+
if (tryResolve() || attempts >= maxAttempts) clearInterval(interval);
|
|
7671
|
+
}, 300);
|
|
7672
|
+
return function() {
|
|
7673
|
+
return clearInterval(interval);
|
|
7674
|
+
};
|
|
7675
|
+
}, [
|
|
7676
|
+
swirlProjectId,
|
|
7677
|
+
criticalPropsKey
|
|
7678
|
+
]);
|
|
7679
|
+
(0, import_react2.useEffect)(function() {
|
|
6471
7680
|
if (!playerRef.current) return;
|
|
6472
7681
|
try {
|
|
6473
7682
|
if (autoplay !== void 0 && playerRef.current.videoElement) {
|
|
@@ -6483,7 +7692,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
6483
7692
|
autoplay,
|
|
6484
7693
|
muted
|
|
6485
7694
|
]);
|
|
6486
|
-
(0,
|
|
7695
|
+
(0, import_react2.useEffect)(function() {
|
|
6487
7696
|
if (!playerRef.current) return;
|
|
6488
7697
|
var checkAdStatus = function checkAdStatus() {
|
|
6489
7698
|
if (playerRef.current) {
|
|
@@ -6513,7 +7722,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
6513
7722
|
return clearInterval(interval);
|
|
6514
7723
|
};
|
|
6515
7724
|
}, []);
|
|
6516
|
-
(0,
|
|
7725
|
+
(0, import_react2.useEffect)(function() {
|
|
6517
7726
|
if (typeof window === "undefined" || !playerRef.current) return;
|
|
6518
7727
|
var handleResize = function handleResize() {
|
|
6519
7728
|
if (playerRef.current && videoRef.current) {
|
|
@@ -6529,7 +7738,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
6529
7738
|
return window.removeEventListener("resize", handleResize);
|
|
6530
7739
|
};
|
|
6531
7740
|
}, []);
|
|
6532
|
-
(0,
|
|
7741
|
+
(0, import_react2.useEffect)(function() {
|
|
6533
7742
|
if (!playerRef.current || !videoRef.current) return;
|
|
6534
7743
|
var updateStates = function updateStates() {
|
|
6535
7744
|
if (playerRef.current && videoRef.current) {
|
|
@@ -6556,7 +7765,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
6556
7765
|
document.removeEventListener("fullscreenchange", handleFullscreenChange);
|
|
6557
7766
|
};
|
|
6558
7767
|
}, []);
|
|
6559
|
-
(0,
|
|
7768
|
+
(0, import_react2.useEffect)(function() {
|
|
6560
7769
|
if (!videoRef.current) return;
|
|
6561
7770
|
var handleCanPlay = function handleCanPlay() {
|
|
6562
7771
|
setIsLoading(false);
|
|
@@ -6628,19 +7837,19 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
6628
7837
|
}, [
|
|
6629
7838
|
debugAdTiming
|
|
6630
7839
|
]);
|
|
6631
|
-
(0,
|
|
7840
|
+
(0, import_react2.useEffect)(function() {
|
|
6632
7841
|
return function() {
|
|
6633
7842
|
if (controlsTimerRef.current) {
|
|
6634
7843
|
clearTimeout(controlsTimerRef.current);
|
|
6635
7844
|
}
|
|
6636
7845
|
};
|
|
6637
7846
|
}, []);
|
|
6638
|
-
var handleWrapperMouseMove = (0,
|
|
7847
|
+
var handleWrapperMouseMove = (0, import_react2.useCallback)(function() {
|
|
6639
7848
|
resetControlsTimer();
|
|
6640
7849
|
}, [
|
|
6641
7850
|
resetControlsTimer
|
|
6642
7851
|
]);
|
|
6643
|
-
var handleWrapperMouseLeave = (0,
|
|
7852
|
+
var handleWrapperMouseLeave = (0, import_react2.useCallback)(function() {
|
|
6644
7853
|
if (!showVolumeSlider && !showSpeedMenu) {
|
|
6645
7854
|
setControlsVisible(false);
|
|
6646
7855
|
}
|
|
@@ -6650,12 +7859,12 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
6650
7859
|
]);
|
|
6651
7860
|
var progressPercent = duration > 0 ? currentTime / duration * 100 : 0;
|
|
6652
7861
|
var VolumeIcon = isMuted || volume === 0 ? import_fa.FaVolumeMute : volume < 0.5 ? import_fa.FaVolumeDown : import_fa.FaVolumeUp;
|
|
6653
|
-
return /* @__PURE__ */ (0,
|
|
7862
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, {
|
|
6654
7863
|
children: [
|
|
6655
|
-
/* @__PURE__ */ (0,
|
|
7864
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("style", {
|
|
6656
7865
|
children: "\n @keyframes sc-spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n }\n @keyframes sc-pulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.6; }\n }\n @keyframes sc-fade-in {\n from { opacity: 0; transform: translateY(8px); }\n to { opacity: 1; transform: translateY(0); }\n }\n .sc-wrapper:fullscreen,\n .sc-wrapper:has(*:fullscreen) {\n border-radius: 0 !important;\n box-shadow: none !important;\n width: 100vw !important;\n height: 100vh !important;\n max-width: 100vw !important;\n max-height: 100vh !important;\n position: fixed !important;\n top: 0 !important;\n left: 0 !important;\n z-index: 999999 !important;\n background: #000 !important;\n display: flex !important;\n align-items: center !important;\n justify-content: center !important;\n }\n .sc-ctrl-btn {\n background: none;\n border: none;\n color: #fff;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n padding: 8px;\n transition: background 0.15s ease, opacity 0.15s ease;\n opacity: 0.9;\n }\n .sc-ctrl-btn:hover {\n opacity: 1;\n background: rgba(255, 255, 255, 0.1);\n }\n .sc-ctrl-btn:active {\n opacity: 0.7;\n }\n .sc-controls-bar {\n transition: opacity 0.35s ease, transform 0.35s ease;\n }\n .sc-progress-track:hover .sc-progress-thumb {\n transform: translate(-50%, -50%) scale(1) !important;\n }\n .sc-loading-hidden .sc-loading-indicator {\n display: none !important;\n }\n "
|
|
6657
7866
|
}),
|
|
6658
|
-
/* @__PURE__ */ (0,
|
|
7867
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", {
|
|
6659
7868
|
ref: wrapperRef,
|
|
6660
7869
|
className: "sc-wrapper ".concat(wrapperClassName || ""),
|
|
6661
7870
|
onMouseMove: handleWrapperMouseMove,
|
|
@@ -6679,10 +7888,12 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
6679
7888
|
boxShadow: isFullscreen ? "none" : void 0
|
|
6680
7889
|
}, wrapperStyle),
|
|
6681
7890
|
children: [
|
|
6682
|
-
/* @__PURE__ */ (0,
|
|
7891
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("video", _object_spread_props(_object_spread({
|
|
6683
7892
|
ref: videoRef,
|
|
6684
7893
|
className: className,
|
|
6685
7894
|
style: _object_spread({
|
|
7895
|
+
position: "relative",
|
|
7896
|
+
zIndex: 1,
|
|
6686
7897
|
display: "block",
|
|
6687
7898
|
width: "100%",
|
|
6688
7899
|
height: isFullscreen ? "100%" : "auto",
|
|
@@ -6699,7 +7910,13 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
6699
7910
|
}, restVideoAttrs), {
|
|
6700
7911
|
children: children
|
|
6701
7912
|
})),
|
|
6702
|
-
|
|
7913
|
+
overlays.length > 0 && !adStatus.showAds && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(OverlayRenderer, {
|
|
7914
|
+
overlays: overlays,
|
|
7915
|
+
currentTime: currentTime,
|
|
7916
|
+
videoRef: videoRef,
|
|
7917
|
+
coordinateSpace: overlayCoordSpace
|
|
7918
|
+
}),
|
|
7919
|
+
(isLoading || isBuffering) && !hideLoadingIndicator && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_fa.FaSpinner, {
|
|
6703
7920
|
className: "sc-loading-indicator",
|
|
6704
7921
|
size: 40,
|
|
6705
7922
|
color: "rgba(255, 255, 255, 0.85)",
|
|
@@ -6712,7 +7929,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
6712
7929
|
filter: "drop-shadow(0 2px 8px rgba(0, 0, 0, 0.6))"
|
|
6713
7930
|
}
|
|
6714
7931
|
}),
|
|
6715
|
-
showLicenseWarning && /* @__PURE__ */ (0,
|
|
7932
|
+
showLicenseWarning && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", {
|
|
6716
7933
|
style: {
|
|
6717
7934
|
position: "absolute",
|
|
6718
7935
|
top: "50%",
|
|
@@ -6731,7 +7948,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
6731
7948
|
margin: "0 16px"
|
|
6732
7949
|
},
|
|
6733
7950
|
children: [
|
|
6734
|
-
/* @__PURE__ */ (0,
|
|
7951
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", {
|
|
6735
7952
|
style: {
|
|
6736
7953
|
fontSize: "18px",
|
|
6737
7954
|
fontWeight: "700",
|
|
@@ -6740,7 +7957,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
6740
7957
|
},
|
|
6741
7958
|
children: "License Key Required"
|
|
6742
7959
|
}),
|
|
6743
|
-
/* @__PURE__ */ (0,
|
|
7960
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", {
|
|
6744
7961
|
style: {
|
|
6745
7962
|
fontSize: "13px",
|
|
6746
7963
|
lineHeight: "1.6",
|
|
@@ -6748,13 +7965,13 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
6748
7965
|
},
|
|
6749
7966
|
children: [
|
|
6750
7967
|
"Please provide a valid license key to use the Stormcloud Video Player.",
|
|
6751
|
-
/* @__PURE__ */ (0,
|
|
7968
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("br", {}),
|
|
6752
7969
|
"Contact your administrator for licensing information."
|
|
6753
7970
|
]
|
|
6754
7971
|
})
|
|
6755
7972
|
]
|
|
6756
7973
|
}),
|
|
6757
|
-
showCenterPlay && !isLoading && !isBuffering && !showLicenseWarning && !adStatus.showAds && /* @__PURE__ */ (0,
|
|
7974
|
+
showCenterPlay && !isLoading && !isBuffering && !showLicenseWarning && !adStatus.showAds && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", {
|
|
6758
7975
|
onClick: handleCenterPlayClick,
|
|
6759
7976
|
style: {
|
|
6760
7977
|
position: "absolute",
|
|
@@ -6789,7 +8006,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
6789
8006
|
el.style.transform = "translate(-50%, -50%) scale(1)";
|
|
6790
8007
|
},
|
|
6791
8008
|
title: "Play",
|
|
6792
|
-
children: /* @__PURE__ */ (0,
|
|
8009
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_fa.FaPlay, {
|
|
6793
8010
|
size: Math.max(22, 28 * responsiveScale),
|
|
6794
8011
|
color: "white",
|
|
6795
8012
|
style: {
|
|
@@ -6798,7 +8015,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
6798
8015
|
}
|
|
6799
8016
|
})
|
|
6800
8017
|
}),
|
|
6801
|
-
adStatus.showAds && /* @__PURE__ */ (0,
|
|
8018
|
+
adStatus.showAds && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", {
|
|
6802
8019
|
style: {
|
|
6803
8020
|
position: "absolute",
|
|
6804
8021
|
top: "".concat(12 * responsiveScale, "px"),
|
|
@@ -6810,7 +8027,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
6810
8027
|
animation: "sc-fade-in 0.3s ease"
|
|
6811
8028
|
},
|
|
6812
8029
|
children: [
|
|
6813
|
-
/* @__PURE__ */ (0,
|
|
8030
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", {
|
|
6814
8031
|
style: {
|
|
6815
8032
|
background: "rgba(234, 179, 8, 0.9)",
|
|
6816
8033
|
backdropFilter: "blur(12px)",
|
|
@@ -6825,7 +8042,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
6825
8042
|
},
|
|
6826
8043
|
children: "Ad"
|
|
6827
8044
|
}),
|
|
6828
|
-
adStatus.currentIndex > 0 && /* @__PURE__ */ (0,
|
|
8045
|
+
adStatus.currentIndex > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", {
|
|
6829
8046
|
style: {
|
|
6830
8047
|
background: "rgba(0, 0, 0, 0.5)",
|
|
6831
8048
|
backdropFilter: "blur(12px)",
|
|
@@ -6844,7 +8061,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
6844
8061
|
})
|
|
6845
8062
|
]
|
|
6846
8063
|
}),
|
|
6847
|
-
shouldShowEnhancedControls && !showLicenseWarning ? /* @__PURE__ */ (0,
|
|
8064
|
+
shouldShowEnhancedControls && !showLicenseWarning ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", {
|
|
6848
8065
|
className: "sc-controls-bar",
|
|
6849
8066
|
style: {
|
|
6850
8067
|
position: "absolute",
|
|
@@ -6859,7 +8076,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
6859
8076
|
pointerEvents: controlsVisible || adStatus.showAds ? "auto" : "none"
|
|
6860
8077
|
},
|
|
6861
8078
|
children: [
|
|
6862
|
-
/* @__PURE__ */ (0,
|
|
8079
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", {
|
|
6863
8080
|
className: "sc-progress-track",
|
|
6864
8081
|
style: {
|
|
6865
8082
|
width: "100%",
|
|
@@ -6879,7 +8096,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
6879
8096
|
e.currentTarget.style.height = "3px";
|
|
6880
8097
|
},
|
|
6881
8098
|
children: [
|
|
6882
|
-
/* @__PURE__ */ (0,
|
|
8099
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", {
|
|
6883
8100
|
style: {
|
|
6884
8101
|
position: "absolute",
|
|
6885
8102
|
top: 0,
|
|
@@ -6891,7 +8108,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
6891
8108
|
transition: "width 0.15s linear"
|
|
6892
8109
|
}
|
|
6893
8110
|
}),
|
|
6894
|
-
/* @__PURE__ */ (0,
|
|
8111
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", {
|
|
6895
8112
|
className: "sc-progress-thumb",
|
|
6896
8113
|
style: {
|
|
6897
8114
|
position: "absolute",
|
|
@@ -6908,7 +8125,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
6908
8125
|
})
|
|
6909
8126
|
]
|
|
6910
8127
|
}),
|
|
6911
|
-
/* @__PURE__ */ (0,
|
|
8128
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", {
|
|
6912
8129
|
style: {
|
|
6913
8130
|
display: "flex",
|
|
6914
8131
|
alignItems: "center",
|
|
@@ -6917,14 +8134,14 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
6917
8134
|
gap: "".concat(8 * responsiveScale, "px")
|
|
6918
8135
|
},
|
|
6919
8136
|
children: [
|
|
6920
|
-
/* @__PURE__ */ (0,
|
|
8137
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", {
|
|
6921
8138
|
style: {
|
|
6922
8139
|
display: "flex",
|
|
6923
8140
|
alignItems: "center",
|
|
6924
8141
|
gap: "".concat(8 * responsiveScale, "px")
|
|
6925
8142
|
},
|
|
6926
8143
|
children: [
|
|
6927
|
-
/* @__PURE__ */ (0,
|
|
8144
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", {
|
|
6928
8145
|
className: "sc-ctrl-btn",
|
|
6929
8146
|
onClick: handlePlayPause,
|
|
6930
8147
|
style: {
|
|
@@ -6934,16 +8151,16 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
6934
8151
|
minHeight: "".concat(36 * responsiveScale, "px")
|
|
6935
8152
|
},
|
|
6936
8153
|
title: isPlaying ? "Pause" : "Play",
|
|
6937
|
-
children: isPlaying ? /* @__PURE__ */ (0,
|
|
8154
|
+
children: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_fa.FaPause, {
|
|
6938
8155
|
size: Math.max(14, 18 * responsiveScale)
|
|
6939
|
-
}) : /* @__PURE__ */ (0,
|
|
8156
|
+
}) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_fa.FaPlay, {
|
|
6940
8157
|
size: Math.max(14, 18 * responsiveScale),
|
|
6941
8158
|
style: {
|
|
6942
8159
|
marginLeft: "2px"
|
|
6943
8160
|
}
|
|
6944
8161
|
})
|
|
6945
8162
|
}),
|
|
6946
|
-
/* @__PURE__ */ (0,
|
|
8163
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", {
|
|
6947
8164
|
style: {
|
|
6948
8165
|
display: "flex",
|
|
6949
8166
|
alignItems: "center"
|
|
@@ -6955,7 +8172,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
6955
8172
|
return setShowVolumeSlider(false);
|
|
6956
8173
|
},
|
|
6957
8174
|
children: [
|
|
6958
|
-
/* @__PURE__ */ (0,
|
|
8175
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", {
|
|
6959
8176
|
className: "sc-ctrl-btn",
|
|
6960
8177
|
onClick: function onClick() {
|
|
6961
8178
|
if (playerRef.current) {
|
|
@@ -6971,11 +8188,11 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
6971
8188
|
minHeight: "".concat(36 * responsiveScale, "px")
|
|
6972
8189
|
},
|
|
6973
8190
|
title: isMuted ? "Unmute" : "Mute",
|
|
6974
|
-
children: /* @__PURE__ */ (0,
|
|
8191
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(VolumeIcon, {
|
|
6975
8192
|
size: Math.max(14, 18 * responsiveScale)
|
|
6976
8193
|
})
|
|
6977
8194
|
}),
|
|
6978
|
-
/* @__PURE__ */ (0,
|
|
8195
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", {
|
|
6979
8196
|
style: {
|
|
6980
8197
|
width: showVolumeSlider ? "".concat(62 * responsiveScale, "px") : "0px",
|
|
6981
8198
|
overflow: "hidden",
|
|
@@ -6985,7 +8202,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
6985
8202
|
paddingLeft: showVolumeSlider ? "2px" : "0",
|
|
6986
8203
|
paddingRight: showVolumeSlider ? "4px" : "0"
|
|
6987
8204
|
},
|
|
6988
|
-
children: /* @__PURE__ */ (0,
|
|
8205
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", {
|
|
6989
8206
|
style: {
|
|
6990
8207
|
position: "relative",
|
|
6991
8208
|
width: "".concat(56 * responsiveScale, "px"),
|
|
@@ -7015,7 +8232,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
7015
8232
|
handleVolumeChange(Math.max(0, Math.min(1, (e.clientX - r.left) / r.width)));
|
|
7016
8233
|
},
|
|
7017
8234
|
children: [
|
|
7018
|
-
/* @__PURE__ */ (0,
|
|
8235
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", {
|
|
7019
8236
|
style: {
|
|
7020
8237
|
position: "absolute",
|
|
7021
8238
|
inset: 0,
|
|
@@ -7023,7 +8240,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
7023
8240
|
borderRadius: "1.5px"
|
|
7024
8241
|
}
|
|
7025
8242
|
}),
|
|
7026
|
-
/* @__PURE__ */ (0,
|
|
8243
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", {
|
|
7027
8244
|
style: {
|
|
7028
8245
|
position: "absolute",
|
|
7029
8246
|
top: 0,
|
|
@@ -7035,7 +8252,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
7035
8252
|
transition: "width 0.1s ease-out"
|
|
7036
8253
|
}
|
|
7037
8254
|
}),
|
|
7038
|
-
/* @__PURE__ */ (0,
|
|
8255
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", {
|
|
7039
8256
|
style: {
|
|
7040
8257
|
position: "absolute",
|
|
7041
8258
|
top: "50%",
|
|
@@ -7054,7 +8271,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
7054
8271
|
})
|
|
7055
8272
|
]
|
|
7056
8273
|
}),
|
|
7057
|
-
/* @__PURE__ */ (0,
|
|
8274
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", {
|
|
7058
8275
|
style: {
|
|
7059
8276
|
fontSize: "".concat(13 * responsiveScale, "px"),
|
|
7060
8277
|
fontFamily: "Roboto, 'Segoe UI', Arial, sans-serif",
|
|
@@ -7067,7 +8284,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
7067
8284
|
children: [
|
|
7068
8285
|
formatTime(currentTime),
|
|
7069
8286
|
" ",
|
|
7070
|
-
/* @__PURE__ */ (0,
|
|
8287
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", {
|
|
7071
8288
|
style: {
|
|
7072
8289
|
color: "rgba(255,255,255,0.5)"
|
|
7073
8290
|
},
|
|
@@ -7079,20 +8296,20 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
7079
8296
|
})
|
|
7080
8297
|
]
|
|
7081
8298
|
}),
|
|
7082
|
-
/* @__PURE__ */ (0,
|
|
8299
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", {
|
|
7083
8300
|
style: {
|
|
7084
8301
|
display: "flex",
|
|
7085
8302
|
alignItems: "center",
|
|
7086
8303
|
gap: "".concat(8 * responsiveScale, "px")
|
|
7087
8304
|
},
|
|
7088
8305
|
children: [
|
|
7089
|
-
/* @__PURE__ */ (0,
|
|
8306
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", {
|
|
7090
8307
|
style: {
|
|
7091
8308
|
position: "relative",
|
|
7092
8309
|
display: viewportWidth < 600 ? "none" : "block"
|
|
7093
8310
|
},
|
|
7094
8311
|
children: [
|
|
7095
|
-
/* @__PURE__ */ (0,
|
|
8312
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("button", {
|
|
7096
8313
|
className: "sc-ctrl-btn",
|
|
7097
8314
|
onClick: function onClick() {
|
|
7098
8315
|
setShowSpeedMenu(!showSpeedMenu);
|
|
@@ -7112,7 +8329,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
7112
8329
|
"x"
|
|
7113
8330
|
]
|
|
7114
8331
|
}),
|
|
7115
|
-
showSpeedMenu && /* @__PURE__ */ (0,
|
|
8332
|
+
showSpeedMenu && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", {
|
|
7116
8333
|
style: {
|
|
7117
8334
|
position: "absolute",
|
|
7118
8335
|
bottom: "100%",
|
|
@@ -7138,7 +8355,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
7138
8355
|
1.75,
|
|
7139
8356
|
2
|
|
7140
8357
|
].map(function(speed) {
|
|
7141
|
-
return /* @__PURE__ */ (0,
|
|
8358
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("button", {
|
|
7142
8359
|
onClick: function onClick() {
|
|
7143
8360
|
return handlePlaybackRateChange(speed);
|
|
7144
8361
|
},
|
|
@@ -7177,7 +8394,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
7177
8394
|
})
|
|
7178
8395
|
]
|
|
7179
8396
|
}),
|
|
7180
|
-
/* @__PURE__ */ (0,
|
|
8397
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", {
|
|
7181
8398
|
className: "sc-ctrl-btn",
|
|
7182
8399
|
onClick: function onClick() {
|
|
7183
8400
|
if (onFullscreenToggle) {
|
|
@@ -7198,9 +8415,9 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
7198
8415
|
minHeight: "".concat(36 * responsiveScale, "px")
|
|
7199
8416
|
},
|
|
7200
8417
|
title: isFullscreen ? "Exit Fullscreen" : "Enter Fullscreen",
|
|
7201
|
-
children: isFullscreen ? /* @__PURE__ */ (0,
|
|
8418
|
+
children: isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_fa.FaCompress, {
|
|
7202
8419
|
size: Math.max(14, 18 * responsiveScale)
|
|
7203
|
-
}) : /* @__PURE__ */ (0,
|
|
8420
|
+
}) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_fa.FaExpand, {
|
|
7204
8421
|
size: Math.max(14, 18 * responsiveScale)
|
|
7205
8422
|
})
|
|
7206
8423
|
})
|
|
@@ -7209,7 +8426,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
7209
8426
|
]
|
|
7210
8427
|
})
|
|
7211
8428
|
]
|
|
7212
|
-
}) : showCustomControls && !showLicenseWarning && /* @__PURE__ */ (0,
|
|
8429
|
+
}) : showCustomControls && !showLicenseWarning && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", {
|
|
7213
8430
|
className: "sc-controls-bar",
|
|
7214
8431
|
style: {
|
|
7215
8432
|
position: "absolute",
|
|
@@ -7224,7 +8441,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
7224
8441
|
pointerEvents: controlsVisible ? "auto" : "none"
|
|
7225
8442
|
},
|
|
7226
8443
|
children: [
|
|
7227
|
-
/* @__PURE__ */ (0,
|
|
8444
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", {
|
|
7228
8445
|
style: {
|
|
7229
8446
|
display: "flex",
|
|
7230
8447
|
alignItems: "center",
|
|
@@ -7239,7 +8456,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
7239
8456
|
return setShowVolumeSlider(false);
|
|
7240
8457
|
},
|
|
7241
8458
|
children: [
|
|
7242
|
-
/* @__PURE__ */ (0,
|
|
8459
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", {
|
|
7243
8460
|
className: "sc-ctrl-btn",
|
|
7244
8461
|
onClick: function onClick() {
|
|
7245
8462
|
if (playerRef.current) playerRef.current.toggleMute();
|
|
@@ -7253,11 +8470,11 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
7253
8470
|
minHeight: "".concat(36 * responsiveScale, "px")
|
|
7254
8471
|
},
|
|
7255
8472
|
title: isMuted ? "Unmute" : "Mute",
|
|
7256
|
-
children: /* @__PURE__ */ (0,
|
|
8473
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(VolumeIcon, {
|
|
7257
8474
|
size: Math.max(14, 18 * responsiveScale)
|
|
7258
8475
|
})
|
|
7259
8476
|
}),
|
|
7260
|
-
/* @__PURE__ */ (0,
|
|
8477
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", {
|
|
7261
8478
|
style: {
|
|
7262
8479
|
width: showVolumeSlider ? "".concat(62 * responsiveScale, "px") : "0px",
|
|
7263
8480
|
overflow: "hidden",
|
|
@@ -7267,7 +8484,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
7267
8484
|
paddingLeft: showVolumeSlider ? "2px" : "0",
|
|
7268
8485
|
paddingRight: showVolumeSlider ? "6px" : "0"
|
|
7269
8486
|
},
|
|
7270
|
-
children: /* @__PURE__ */ (0,
|
|
8487
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", {
|
|
7271
8488
|
style: {
|
|
7272
8489
|
position: "relative",
|
|
7273
8490
|
width: "".concat(56 * responsiveScale, "px"),
|
|
@@ -7297,7 +8514,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
7297
8514
|
handleVolumeChange(Math.max(0, Math.min(1, (e.clientX - r.left) / r.width)));
|
|
7298
8515
|
},
|
|
7299
8516
|
children: [
|
|
7300
|
-
/* @__PURE__ */ (0,
|
|
8517
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", {
|
|
7301
8518
|
style: {
|
|
7302
8519
|
position: "absolute",
|
|
7303
8520
|
inset: 0,
|
|
@@ -7305,7 +8522,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
7305
8522
|
borderRadius: "1.5px"
|
|
7306
8523
|
}
|
|
7307
8524
|
}),
|
|
7308
|
-
/* @__PURE__ */ (0,
|
|
8525
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", {
|
|
7309
8526
|
style: {
|
|
7310
8527
|
position: "absolute",
|
|
7311
8528
|
top: 0,
|
|
@@ -7317,7 +8534,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
7317
8534
|
transition: "width 0.1s ease-out"
|
|
7318
8535
|
}
|
|
7319
8536
|
}),
|
|
7320
|
-
/* @__PURE__ */ (0,
|
|
8537
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", {
|
|
7321
8538
|
style: {
|
|
7322
8539
|
position: "absolute",
|
|
7323
8540
|
top: "50%",
|
|
@@ -7336,7 +8553,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
7336
8553
|
})
|
|
7337
8554
|
]
|
|
7338
8555
|
}),
|
|
7339
|
-
/* @__PURE__ */ (0,
|
|
8556
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", {
|
|
7340
8557
|
className: "sc-ctrl-btn",
|
|
7341
8558
|
onClick: function onClick() {
|
|
7342
8559
|
if (onFullscreenToggle) {
|
|
@@ -7358,15 +8575,15 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
7358
8575
|
background: "rgba(0, 0, 0, 0.6)"
|
|
7359
8576
|
},
|
|
7360
8577
|
title: isFullscreen ? "Exit Fullscreen" : "Enter Fullscreen",
|
|
7361
|
-
children: isFullscreen ? /* @__PURE__ */ (0,
|
|
8578
|
+
children: isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_fa.FaCompress, {
|
|
7362
8579
|
size: Math.max(14, 18 * responsiveScale)
|
|
7363
|
-
}) : /* @__PURE__ */ (0,
|
|
8580
|
+
}) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_fa.FaExpand, {
|
|
7364
8581
|
size: Math.max(14, 18 * responsiveScale)
|
|
7365
8582
|
})
|
|
7366
8583
|
})
|
|
7367
8584
|
]
|
|
7368
8585
|
}),
|
|
7369
|
-
onControlClick && /* @__PURE__ */ (0,
|
|
8586
|
+
onControlClick && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", {
|
|
7370
8587
|
onClick: onControlClick,
|
|
7371
8588
|
style: {
|
|
7372
8589
|
position: "absolute",
|
|
@@ -7417,7 +8634,8 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
7417
8634
|
"playsInline",
|
|
7418
8635
|
"preload",
|
|
7419
8636
|
"poster",
|
|
7420
|
-
"children"
|
|
8637
|
+
"children",
|
|
8638
|
+
"swirlProjectId"
|
|
7421
8639
|
];
|
|
7422
8640
|
var _iteratorNormalCompletion1 = true, _didIteratorError1 = false, _iteratorError1 = undefined;
|
|
7423
8641
|
try {
|
|
@@ -7472,7 +8690,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
7472
8690
|
return true;
|
|
7473
8691
|
});
|
|
7474
8692
|
// src/StormcloudPlayer.tsx
|
|
7475
|
-
var
|
|
8693
|
+
var import_react7 = __toESM(require("react"), 1);
|
|
7476
8694
|
// src/props.ts
|
|
7477
8695
|
var noop = function noop() {};
|
|
7478
8696
|
var defaultProps = {
|
|
@@ -7520,8 +8738,8 @@ var defaultProps = {
|
|
|
7520
8738
|
onControlClick: noop
|
|
7521
8739
|
};
|
|
7522
8740
|
// src/utils.ts
|
|
7523
|
-
var
|
|
7524
|
-
var lazy =
|
|
8741
|
+
var import_react3 = require("react");
|
|
8742
|
+
var lazy = import_react3.lazy;
|
|
7525
8743
|
var omit = function omit(object, keys) {
|
|
7526
8744
|
var result = _object_spread({}, object);
|
|
7527
8745
|
keys.forEach(function(key) {
|
|
@@ -7637,9 +8855,9 @@ var canPlay = {
|
|
|
7637
8855
|
}
|
|
7638
8856
|
};
|
|
7639
8857
|
// src/players/HlsPlayer.tsx
|
|
7640
|
-
var
|
|
7641
|
-
var HlsPlayer = /*#__PURE__*/ function(
|
|
7642
|
-
_inherits(HlsPlayer,
|
|
8858
|
+
var import_react4 = require("react");
|
|
8859
|
+
var HlsPlayer = /*#__PURE__*/ function(_import_react4_Component) {
|
|
8860
|
+
_inherits(HlsPlayer, _import_react4_Component);
|
|
7643
8861
|
function HlsPlayer() {
|
|
7644
8862
|
_class_call_check(this, HlsPlayer);
|
|
7645
8863
|
var _this;
|
|
@@ -7840,13 +9058,13 @@ var HlsPlayer = /*#__PURE__*/ function(_import_react3_Component) {
|
|
|
7840
9058
|
}
|
|
7841
9059
|
]);
|
|
7842
9060
|
return HlsPlayer;
|
|
7843
|
-
}(
|
|
9061
|
+
}(import_react4.Component);
|
|
7844
9062
|
HlsPlayer.displayName = "HlsPlayer";
|
|
7845
9063
|
HlsPlayer.canPlay = canPlay.hls;
|
|
7846
9064
|
// src/players/FilePlayer.tsx
|
|
7847
|
-
var
|
|
7848
|
-
var FilePlayer = /*#__PURE__*/ function(
|
|
7849
|
-
_inherits(FilePlayer,
|
|
9065
|
+
var import_react5 = require("react");
|
|
9066
|
+
var FilePlayer = /*#__PURE__*/ function(_import_react5_Component) {
|
|
9067
|
+
_inherits(FilePlayer, _import_react5_Component);
|
|
7850
9068
|
function FilePlayer() {
|
|
7851
9069
|
_class_call_check(this, FilePlayer);
|
|
7852
9070
|
var _this;
|
|
@@ -8120,7 +9338,7 @@ var FilePlayer = /*#__PURE__*/ function(_import_react4_Component) {
|
|
|
8120
9338
|
}
|
|
8121
9339
|
]);
|
|
8122
9340
|
return FilePlayer;
|
|
8123
|
-
}(
|
|
9341
|
+
}(import_react5.Component);
|
|
8124
9342
|
FilePlayer.displayName = "FilePlayer";
|
|
8125
9343
|
FilePlayer.canPlay = canPlay.file;
|
|
8126
9344
|
// src/players/index.ts
|
|
@@ -8151,10 +9369,10 @@ var players = [
|
|
|
8151
9369
|
];
|
|
8152
9370
|
var players_default = players;
|
|
8153
9371
|
// src/Player.tsx
|
|
8154
|
-
var
|
|
9372
|
+
var import_react6 = __toESM(require("react"), 1);
|
|
8155
9373
|
var SEEK_ON_PLAY_EXPIRY = 5e3;
|
|
8156
|
-
var Player = /*#__PURE__*/ function(
|
|
8157
|
-
_inherits(Player,
|
|
9374
|
+
var Player = /*#__PURE__*/ function(_import_react6_Component) {
|
|
9375
|
+
_inherits(Player, _import_react6_Component);
|
|
8158
9376
|
function Player() {
|
|
8159
9377
|
_class_call_check(this, Player);
|
|
8160
9378
|
var _this;
|
|
@@ -8399,7 +9617,7 @@ var Player = /*#__PURE__*/ function(_import_react5_Component) {
|
|
|
8399
9617
|
if (!Player2) {
|
|
8400
9618
|
return null;
|
|
8401
9619
|
}
|
|
8402
|
-
return
|
|
9620
|
+
return import_react6.default.createElement(Player2, _object_spread_props(_object_spread({}, this.props), {
|
|
8403
9621
|
onMount: this.handlePlayerMount,
|
|
8404
9622
|
onReady: this.handleReady,
|
|
8405
9623
|
onPlay: this.handlePlay,
|
|
@@ -8412,13 +9630,13 @@ var Player = /*#__PURE__*/ function(_import_react5_Component) {
|
|
|
8412
9630
|
}
|
|
8413
9631
|
]);
|
|
8414
9632
|
return Player;
|
|
8415
|
-
}(
|
|
9633
|
+
}(import_react6.Component);
|
|
8416
9634
|
Player.displayName = "Player";
|
|
8417
9635
|
Player.defaultProps = defaultProps;
|
|
8418
9636
|
// src/StormcloudPlayer.tsx
|
|
8419
9637
|
var IS_BROWSER2 = typeof window !== "undefined" && window.document;
|
|
8420
9638
|
var IS_GLOBAL2 = typeof globalThis !== "undefined" && globalThis.window && globalThis.window.document;
|
|
8421
|
-
var UniversalSuspense = IS_BROWSER2 || IS_GLOBAL2 ?
|
|
9639
|
+
var UniversalSuspense = IS_BROWSER2 || IS_GLOBAL2 ? import_react7.Suspense : function() {
|
|
8422
9640
|
return null;
|
|
8423
9641
|
};
|
|
8424
9642
|
var SUPPORTED_PROPS = [
|
|
@@ -8467,8 +9685,8 @@ var SUPPORTED_PROPS = [
|
|
|
8467
9685
|
var customPlayers = [];
|
|
8468
9686
|
var createStormcloudPlayer = function createStormcloudPlayer(playerList, fallback) {
|
|
8469
9687
|
var _a;
|
|
8470
|
-
return _a = /*#__PURE__*/ function(
|
|
8471
|
-
_inherits(_a,
|
|
9688
|
+
return _a = /*#__PURE__*/ function(_import_react7_Component) {
|
|
9689
|
+
_inherits(_a, _import_react7_Component);
|
|
8472
9690
|
function _a() {
|
|
8473
9691
|
_class_call_check(this, _a);
|
|
8474
9692
|
var _this;
|
|
@@ -8545,7 +9763,7 @@ var createStormcloudPlayer = function createStormcloudPlayer(playerList, fallbac
|
|
|
8545
9763
|
if (!src) return null;
|
|
8546
9764
|
var activePlayer = _this.getActivePlayer(src);
|
|
8547
9765
|
if (!activePlayer) return null;
|
|
8548
|
-
return
|
|
9766
|
+
return import_react7.default.createElement(Player, _object_spread_props(_object_spread({}, _this.props), {
|
|
8549
9767
|
key: activePlayer.key,
|
|
8550
9768
|
ref: _this.references.player,
|
|
8551
9769
|
activePlayer: activePlayer.lazyPlayer || activePlayer,
|
|
@@ -8561,20 +9779,20 @@ var createStormcloudPlayer = function createStormcloudPlayer(playerList, fallbac
|
|
|
8561
9779
|
var _this_props = this.props, src = _this_props.src, style = _this_props.style, width = _this_props.width, height = _this_props.height, fallbackElement = _this_props.fallback, Wrapper = _this_props.wrapper;
|
|
8562
9780
|
var attributes = this.getAttributes(src);
|
|
8563
9781
|
var wrapperRef = typeof Wrapper === "string" ? this.references.wrapper : void 0;
|
|
8564
|
-
return
|
|
9782
|
+
return import_react7.default.createElement(Wrapper, _object_spread({
|
|
8565
9783
|
ref: wrapperRef,
|
|
8566
9784
|
style: _object_spread_props(_object_spread({}, style), {
|
|
8567
9785
|
width: width,
|
|
8568
9786
|
height: height
|
|
8569
9787
|
})
|
|
8570
|
-
}, attributes),
|
|
9788
|
+
}, attributes), import_react7.default.createElement(UniversalSuspense, {
|
|
8571
9789
|
fallback: fallbackElement
|
|
8572
9790
|
}, this.renderActivePlayer(src)));
|
|
8573
9791
|
}
|
|
8574
9792
|
}
|
|
8575
9793
|
]);
|
|
8576
9794
|
return _a;
|
|
8577
|
-
}(
|
|
9795
|
+
}(import_react7.Component), _a.displayName = "StormcloudPlayer", _a.defaultProps = _object_spread_props(_object_spread({}, defaultProps), {
|
|
8578
9796
|
fallback: null,
|
|
8579
9797
|
wrapper: "div"
|
|
8580
9798
|
}), _a.addCustomPlayer = function(player) {
|
|
@@ -8649,11 +9867,13 @@ var StormcloudPlayer_default = StormcloudPlayer;
|
|
|
8649
9867
|
createVastAdLayer: createVastAdLayer,
|
|
8650
9868
|
createVastManager: createVastManager,
|
|
8651
9869
|
detectBrowser: detectBrowser,
|
|
9870
|
+
fetchProjectOverlays: fetchProjectOverlays,
|
|
8652
9871
|
getBrowserConfigOverrides: getBrowserConfigOverrides,
|
|
8653
9872
|
getBrowserID: getBrowserID,
|
|
8654
9873
|
getClientInfo: getClientInfo,
|
|
8655
9874
|
initializePolyfills: initializePolyfills,
|
|
8656
9875
|
isMediaStream: isMediaStream,
|
|
9876
|
+
isOverlayActive: isOverlayActive,
|
|
8657
9877
|
lazy: lazy,
|
|
8658
9878
|
logBrowserInfo: logBrowserInfo,
|
|
8659
9879
|
merge: merge,
|
|
@@ -8661,10 +9881,12 @@ var StormcloudPlayer_default = StormcloudPlayer;
|
|
|
8661
9881
|
parseQuery: parseQuery,
|
|
8662
9882
|
players: players,
|
|
8663
9883
|
randomString: randomString,
|
|
9884
|
+
resolveImageUrl: resolveImageUrl,
|
|
8664
9885
|
sendHeartbeat: sendHeartbeat,
|
|
8665
9886
|
sendInitialTracking: sendInitialTracking,
|
|
8666
9887
|
supportsFeature: supportsFeature,
|
|
8667
9888
|
supportsModernJS: supportsModernJS,
|
|
8668
|
-
supportsWebKitPresentationMode: supportsWebKitPresentationMode
|
|
9889
|
+
supportsWebKitPresentationMode: supportsWebKitPresentationMode,
|
|
9890
|
+
timeStringToSeconds: timeStringToSeconds
|
|
8669
9891
|
});
|
|
8670
9892
|
//# sourceMappingURL=index.cjs.map
|