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/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 import_react = __toESM(require("react"), 1);
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 = import_react.default.memo(function(props) {
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, import_react.useRef)(null);
6294
- var playerRef = (0, import_react.useRef)(null);
6295
- var bufferingTimeoutRef = (0, import_react.useRef)(null);
6296
- var controlsTimerRef = (0, import_react.useRef)(null);
6297
- var wrapperRef = (0, import_react.useRef)(null);
6298
- var _import_react_default_useState = _sliced_to_array(import_react.default.useState({
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 = _import_react_default_useState[0], setAdStatus = _import_react_default_useState[1];
6303
- var _import_react_default_useState1 = _sliced_to_array(import_react.default.useState(true), 2), shouldShowNativeControls = _import_react_default_useState1[0], setShouldShowNativeControls = _import_react_default_useState1[1];
6304
- var _import_react_default_useState2 = _sliced_to_array(import_react.default.useState(false), 2), isMuted = _import_react_default_useState2[0], setIsMuted = _import_react_default_useState2[1];
6305
- var _import_react_default_useState3 = _sliced_to_array(import_react.default.useState(false), 2), isFullscreen = _import_react_default_useState3[0], setIsFullscreen = _import_react_default_useState3[1];
6306
- var _import_react_default_useState4 = _sliced_to_array(import_react.default.useState(false), 2), isPlaying = _import_react_default_useState4[0], setIsPlaying = _import_react_default_useState4[1];
6307
- var _import_react_default_useState5 = _sliced_to_array(import_react.default.useState(0), 2), currentTime = _import_react_default_useState5[0], setCurrentTime = _import_react_default_useState5[1];
6308
- var _import_react_default_useState6 = _sliced_to_array(import_react.default.useState(0), 2), duration = _import_react_default_useState6[0], setDuration = _import_react_default_useState6[1];
6309
- var _import_react_default_useState7 = _sliced_to_array(import_react.default.useState(1), 2), volume = _import_react_default_useState7[0], setVolume = _import_react_default_useState7[1];
6310
- var _import_react_default_useState8 = _sliced_to_array(import_react.default.useState(1), 2), playbackRate = _import_react_default_useState8[0], setPlaybackRate = _import_react_default_useState8[1];
6311
- var _import_react_default_useState9 = _sliced_to_array(import_react.default.useState(false), 2), showVolumeSlider = _import_react_default_useState9[0], setShowVolumeSlider = _import_react_default_useState9[1];
6312
- var _import_react_default_useState10 = _sliced_to_array(import_react.default.useState(false), 2), showSpeedMenu = _import_react_default_useState10[0], setShowSpeedMenu = _import_react_default_useState10[1];
6313
- var _import_react_default_useState11 = _sliced_to_array(import_react.default.useState(true), 2), isLoading = _import_react_default_useState11[0], setIsLoading = _import_react_default_useState11[1];
6314
- var _import_react_default_useState12 = _sliced_to_array(import_react.default.useState(false), 2), isBuffering = _import_react_default_useState12[0], setIsBuffering = _import_react_default_useState12[1];
6315
- var _import_react_default_useState13 = _sliced_to_array(import_react.default.useState(false), 2), showCenterPlay = _import_react_default_useState13[0], setShowCenterPlay = _import_react_default_useState13[1];
6316
- var _import_react_default_useState14 = _sliced_to_array(import_react.default.useState(false), 2), showLicenseWarning = _import_react_default_useState14[0], setShowLicenseWarning = _import_react_default_useState14[1];
6317
- var _import_react_default_useState15 = _sliced_to_array(import_react.default.useState(true), 2), controlsVisible = _import_react_default_useState15[0], setControlsVisible = _import_react_default_useState15[1];
6318
- var _import_react_default_useState16 = _sliced_to_array(import_react.default.useState(typeof window !== "undefined" ? window.innerWidth : 1920), 2), viewportWidth = _import_react_default_useState16[0], setViewportWidth = _import_react_default_useState16[1];
6319
- var _import_react_default_useState17 = _sliced_to_array(import_react.default.useState(typeof window !== "undefined" ? window.innerHeight > window.innerWidth : false), 2), isPortrait = _import_react_default_useState17[0], setIsPortrait = _import_react_default_useState17[1];
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, import_react.useCallback)(function() {
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, import_react.useMemo)(function() {
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, import_react.useEffect)(function() {
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, import_react.useEffect)(function() {
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, import_react.useEffect)(function() {
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, import_react.useEffect)(function() {
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, import_react.useEffect)(function() {
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, import_react.useEffect)(function() {
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, import_react.useEffect)(function() {
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, import_react.useCallback)(function() {
7847
+ var handleWrapperMouseMove = (0, import_react2.useCallback)(function() {
6639
7848
  resetControlsTimer();
6640
7849
  }, [
6641
7850
  resetControlsTimer
6642
7851
  ]);
6643
- var handleWrapperMouseLeave = (0, import_react.useCallback)(function() {
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, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
7862
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, {
6654
7863
  children: [
6655
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", {
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, import_jsx_runtime.jsxs)("div", {
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, import_jsx_runtime.jsx)("video", _object_spread_props(_object_spread({
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
- (isLoading || isBuffering) && !hideLoadingIndicator && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fa.FaSpinner, {
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, import_jsx_runtime.jsxs)("div", {
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, import_jsx_runtime.jsx)("div", {
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, import_jsx_runtime.jsxs)("div", {
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, import_jsx_runtime.jsx)("br", {}),
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, import_jsx_runtime.jsx)("div", {
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, import_jsx_runtime.jsx)(import_fa.FaPlay, {
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, import_jsx_runtime.jsxs)("div", {
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, import_jsx_runtime.jsx)("div", {
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, import_jsx_runtime.jsxs)("div", {
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, import_jsx_runtime.jsxs)("div", {
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, import_jsx_runtime.jsxs)("div", {
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, import_jsx_runtime.jsx)("div", {
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, import_jsx_runtime.jsx)("div", {
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, import_jsx_runtime.jsxs)("div", {
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, import_jsx_runtime.jsxs)("div", {
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, import_jsx_runtime.jsx)("button", {
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, import_jsx_runtime.jsx)(import_fa.FaPause, {
8154
+ children: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_fa.FaPause, {
6938
8155
  size: Math.max(14, 18 * responsiveScale)
6939
- }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fa.FaPlay, {
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, import_jsx_runtime.jsxs)("div", {
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, import_jsx_runtime.jsx)("button", {
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, import_jsx_runtime.jsx)(VolumeIcon, {
8191
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(VolumeIcon, {
6975
8192
  size: Math.max(14, 18 * responsiveScale)
6976
8193
  })
6977
8194
  }),
6978
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
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, import_jsx_runtime.jsxs)("div", {
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, import_jsx_runtime.jsx)("div", {
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, import_jsx_runtime.jsx)("div", {
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, import_jsx_runtime.jsx)("div", {
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, import_jsx_runtime.jsxs)("div", {
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, import_jsx_runtime.jsx)("span", {
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, import_jsx_runtime.jsxs)("div", {
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, import_jsx_runtime.jsxs)("div", {
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, import_jsx_runtime.jsxs)("button", {
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, import_jsx_runtime.jsx)("div", {
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, import_jsx_runtime.jsxs)("button", {
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, import_jsx_runtime.jsx)("button", {
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, import_jsx_runtime.jsx)(import_fa.FaCompress, {
8418
+ children: isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_fa.FaCompress, {
7202
8419
  size: Math.max(14, 18 * responsiveScale)
7203
- }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fa.FaExpand, {
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, import_jsx_runtime.jsxs)("div", {
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, import_jsx_runtime.jsxs)("div", {
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, import_jsx_runtime.jsx)("button", {
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, import_jsx_runtime.jsx)(VolumeIcon, {
8473
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(VolumeIcon, {
7257
8474
  size: Math.max(14, 18 * responsiveScale)
7258
8475
  })
7259
8476
  }),
7260
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
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, import_jsx_runtime.jsxs)("div", {
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, import_jsx_runtime.jsx)("div", {
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, import_jsx_runtime.jsx)("div", {
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, import_jsx_runtime.jsx)("div", {
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, import_jsx_runtime.jsx)("button", {
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, import_jsx_runtime.jsx)(import_fa.FaCompress, {
8578
+ children: isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_fa.FaCompress, {
7362
8579
  size: Math.max(14, 18 * responsiveScale)
7363
- }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fa.FaExpand, {
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, import_jsx_runtime.jsx)("div", {
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 import_react6 = __toESM(require("react"), 1);
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 import_react2 = require("react");
7524
- var lazy = import_react2.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 import_react3 = require("react");
7641
- var HlsPlayer = /*#__PURE__*/ function(_import_react3_Component) {
7642
- _inherits(HlsPlayer, _import_react3_Component);
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
- }(import_react3.Component);
9061
+ }(import_react4.Component);
7844
9062
  HlsPlayer.displayName = "HlsPlayer";
7845
9063
  HlsPlayer.canPlay = canPlay.hls;
7846
9064
  // src/players/FilePlayer.tsx
7847
- var import_react4 = require("react");
7848
- var FilePlayer = /*#__PURE__*/ function(_import_react4_Component) {
7849
- _inherits(FilePlayer, _import_react4_Component);
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
- }(import_react4.Component);
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 import_react5 = __toESM(require("react"), 1);
9372
+ var import_react6 = __toESM(require("react"), 1);
8155
9373
  var SEEK_ON_PLAY_EXPIRY = 5e3;
8156
- var Player = /*#__PURE__*/ function(_import_react5_Component) {
8157
- _inherits(Player, _import_react5_Component);
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 import_react5.default.createElement(Player2, _object_spread_props(_object_spread({}, this.props), {
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
- }(import_react5.Component);
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 ? import_react6.Suspense : function() {
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(_import_react6_Component) {
8471
- _inherits(_a, _import_react6_Component);
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 import_react6.default.createElement(Player, _object_spread_props(_object_spread({}, _this.props), {
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 import_react6.default.createElement(Wrapper, _object_spread({
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), import_react6.default.createElement(UniversalSuspense, {
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
- }(import_react6.Component), _a.displayName = "StormcloudPlayer", _a.defaultProps = _object_spread_props(_object_spread({}, defaultProps), {
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