stormcloud-video-player 0.6.6 → 0.7.1

package/lib/ui/StormcloudVideoPlayer.cjs

@@ -383,7 +383,7 @@ __export(StormcloudVideoPlayer_exports, {
     }
 });
 module.exports = __toCommonJS(StormcloudVideoPlayer_exports);
-var import_react = __toESM(require("react"), 1);
+var import_react2 = __toESM(require("react"), 1);
 // src/player/StormcloudVideoPlayer.ts
 var import_hls2 = __toESM(require("hls.js"), 1);
 // src/sdk/vastParser.ts
@@ -6020,6 +6020,46 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                 return this.isLiveStream;
             }
         },
+        {
+            key: "getMinHlsResolution",
+            value: function getMinHlsResolution() {
+                var _this_hls;
+                var levels = (_this_hls = this.hls) === null || _this_hls === void 0 ? void 0 : _this_hls.levels;
+                if (!levels || levels.length === 0) return null;
+                var min = null;
+                var minPixels = Infinity;
+                var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
+                try {
+                    for(var _iterator = levels[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
+                        var level = _step.value;
+                        if (level.width && level.height) {
+                            var pixels = level.width * level.height;
+                            if (pixels < minPixels) {
+                                minPixels = pixels;
+                                min = {
+                                    width: level.width,
+                                    height: level.height
+                                };
+                            }
+                        }
+                    }
+                } catch (err) {
+                    _didIteratorError = true;
+                    _iteratorError = err;
+                } finally{
+                    try {
+                        if (!_iteratorNormalCompletion && _iterator.return != null) {
+                            _iterator.return();
+                        }
+                    } finally{
+                        if (_didIteratorError) {
+                            throw _iteratorError;
+                        }
+                    }
+                }
+                return min;
+            }
+        },
         {
             key: "videoElement",
             get: function get() {
@@ -6082,7 +6122,1107 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
 }();
 // src/ui/StormcloudVideoPlayer.tsx
 var import_fa = require("react-icons/fa");
+// src/ui/OverlayRenderer.tsx
+var import_react = __toESM(require("react"), 1);
+// src/utils/overlays.ts
+var OVERLAY_API_BASE = "https://adstorm.co/api-adstorm-dev";
+function timeStringToSeconds(timeStr) {
+    if (!timeStr) return 0;
+    var parts = timeStr.split(":");
+    if (parts.length >= 3) {
+        var _parts_, _parts_1, _parts_2;
+        var hours = parseInt((_parts_ = parts[0]) !== null && _parts_ !== void 0 ? _parts_ : "0", 10) || 0;
+        var minutes = parseInt((_parts_1 = parts[1]) !== null && _parts_1 !== void 0 ? _parts_1 : "0", 10) || 0;
+        var secStr = (_parts_2 = parts[2]) !== null && _parts_2 !== void 0 ? _parts_2 : "0";
+        var dotIdx = secStr.indexOf(".");
+        var seconds = parseInt(dotIdx >= 0 ? secStr.substring(0, dotIdx) : secStr, 10) || 0;
+        var msFrag = dotIdx >= 0 ? secStr.substring(dotIdx + 1) : "";
+        var ms = msFrag ? parseInt(msFrag.padEnd(3, "0").substring(0, 3), 10) || 0 : 0;
+        return hours * 3600 + minutes * 60 + seconds + ms / 1e3;
+    }
+    if (parts.length === 2) {
+        var _parts_3, _parts_4;
+        var minutes1 = parseInt((_parts_3 = parts[0]) !== null && _parts_3 !== void 0 ? _parts_3 : "0", 10) || 0;
+        var secStr1 = (_parts_4 = parts[1]) !== null && _parts_4 !== void 0 ? _parts_4 : "0";
+        var dotIdx1 = secStr1.indexOf(".");
+        var seconds1 = parseInt(dotIdx1 >= 0 ? secStr1.substring(0, dotIdx1) : secStr1, 10) || 0;
+        var msFrag1 = dotIdx1 >= 0 ? secStr1.substring(dotIdx1 + 1) : "";
+        var ms1 = msFrag1 ? parseInt(msFrag1.padEnd(3, "0").substring(0, 3), 10) || 0 : 0;
+        return minutes1 * 60 + seconds1 + ms1 / 1e3;
+    }
+    var num = parseFloat(timeStr);
+    return isFinite(num) ? Math.max(0, num) : 0;
+}
+function isOverlayActive(overlay, currentTime) {
+    if (!overlay.visible) return false;
+    var startSec = timeStringToSeconds(overlay.start_time);
+    var durationSec = timeStringToSeconds(overlay.duration);
+    if (durationSec <= 0) return false;
+    return currentTime >= startSec && currentTime < startSec + durationSec;
+}
+function fetchProjectOverlays(_0) {
+    return _async_to_generator(function(projectId) {
+        var apiBaseUrl, response, data;
+        var _arguments = arguments;
+        return _ts_generator(this, function(_state) {
+            switch(_state.label){
+                case 0:
+                    apiBaseUrl = _arguments.length > 1 && _arguments[1] !== void 0 ? _arguments[1] : OVERLAY_API_BASE;
+                    return [
+                        4,
+                        fetch("".concat(apiBaseUrl, "/adstorm/swirl/projects/").concat(projectId, "/overlays"))
+                    ];
+                case 1:
+                    response = _state.sent();
+                    if (!response.ok) {
+                        throw new Error("Failed to fetch overlays: ".concat(response.status, " ").concat(response.statusText));
+                    }
+                    return [
+                        4,
+                        response.json()
+                    ];
+                case 2:
+                    data = _state.sent();
+                    return [
+                        2,
+                        Array.isArray(data) ? data : []
+                    ];
+            }
+        });
+    }).apply(this, arguments);
+}
+function resolveImageUrl(imageUrl) {
+    var apiBaseUrl = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : OVERLAY_API_BASE;
+    if (!imageUrl) return "";
+    if (imageUrl.startsWith("http://") || imageUrl.startsWith("https://")) {
+        return imageUrl;
+    }
+    if (imageUrl.startsWith("/")) {
+        try {
+            var url = new URL(apiBaseUrl);
+            return "".concat(url.origin).concat(imageUrl);
+        } catch (unused) {
+            return imageUrl;
+        }
+    }
+    return "".concat(apiBaseUrl, "/").concat(imageUrl);
+}
+// src/ui/OverlayRenderer.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
+function computeVideoDimensions(video) {
+    var nativeWidth = video.videoWidth;
+    var nativeHeight = video.videoHeight;
+    if (!nativeWidth || !nativeHeight) return null;
+    var displayWidth = video.offsetWidth;
+    var displayHeight = video.offsetHeight;
+    if (!displayWidth || !displayHeight) return null;
+    var videoAspect = nativeWidth / nativeHeight;
+    var displayAspect = displayWidth / displayHeight;
+    var renderWidth;
+    var renderHeight;
+    var offsetX;
+    var offsetY;
+    if (videoAspect > displayAspect) {
+        renderWidth = displayWidth;
+        renderHeight = displayWidth / videoAspect;
+        offsetX = 0;
+        offsetY = (displayHeight - renderHeight) / 2;
+    } else {
+        renderHeight = displayHeight;
+        renderWidth = displayHeight * videoAspect;
+        offsetX = (displayWidth - renderWidth) / 2;
+        offsetY = 0;
+    }
+    return {
+        nativeWidth: nativeWidth,
+        nativeHeight: nativeHeight,
+        displayWidth: renderWidth,
+        displayHeight: renderHeight,
+        offsetX: offsetX,
+        offsetY: offsetY,
+        scaleX: renderWidth / nativeWidth,
+        scaleY: renderHeight / nativeHeight
+    };
+}
+function ImageOverlay(param) {
+    var overlay = param.overlay;
+    var src = resolveImageUrl(overlay.image_url || "");
+    if (!src) return null;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", {
+        src: src,
+        alt: overlay.name,
+        draggable: false,
+        style: {
+            width: "100%",
+            height: "100%",
+            objectFit: "contain",
+            display: "block",
+            pointerEvents: "none",
+            userSelect: "none"
+        }
+    });
+}
+function TextOverlay(param) {
+    var overlay = param.overlay;
+    var text = overlay.content || "";
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+        style: {
+            width: "100%",
+            height: "100%",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            color: "#ffffff",
+            fontSize: "clamp(10px, 1.4vw, 20px)",
+            fontFamily: "Roboto, 'Segoe UI', Arial, sans-serif",
+            fontWeight: 600,
+            textAlign: "center",
+            padding: "4px 8px",
+            boxSizing: "border-box",
+            wordBreak: "break-word",
+            textShadow: "0 1px 4px rgba(0,0,0,0.7)",
+            pointerEvents: "none",
+            userSelect: "none",
+            lineHeight: 1.3
+        },
+        children: text
+    });
+}
+function ScrollerOverlay(param) {
+    var overlay = param.overlay;
+    var _ref, _ref1, _ref2, _ref3, _ref4;
+    var cfg = overlay.scroller_config;
+    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) || "";
+    var scrollSpeed = (_ref = cfg === null || cfg === void 0 ? void 0 : cfg.scroll_speed) !== null && _ref !== void 0 ? _ref : 50;
+    var direction = (_ref1 = cfg === null || cfg === void 0 ? void 0 : cfg.direction) !== null && _ref1 !== void 0 ? _ref1 : "left";
+    var fontSize = (cfg === null || cfg === void 0 ? void 0 : cfg.font_size) ? "".concat(cfg.font_size, "px") : "clamp(10px, 1.2vw, 18px)";
+    var fontFamily = (cfg === null || cfg === void 0 ? void 0 : cfg.font_family) || "Roboto, 'Segoe UI', Arial, sans-serif";
+    var fontWeight = (cfg === null || cfg === void 0 ? void 0 : cfg.font_weight) || "600";
+    var textColor = (cfg === null || cfg === void 0 ? void 0 : cfg.text_color) || "#ffffff";
+    var bgColor = (cfg === null || cfg === void 0 ? void 0 : cfg.background_color) || "transparent";
+    var bgOpacity = (cfg === null || cfg === void 0 ? void 0 : cfg.background_opacity) !== void 0 ? cfg.background_opacity / 100 : 0;
+    var borderColor = (cfg === null || cfg === void 0 ? void 0 : cfg.border_color) || "transparent";
+    var borderWidth = (_ref2 = cfg === null || cfg === void 0 ? void 0 : cfg.border_width) !== null && _ref2 !== void 0 ? _ref2 : 0;
+    var borderRadius = (_ref3 = cfg === null || cfg === void 0 ? void 0 : cfg.border_radius) !== null && _ref3 !== void 0 ? _ref3 : 0;
+    var padding = (_ref4 = cfg === null || cfg === void 0 ? void 0 : cfg.padding) !== null && _ref4 !== void 0 ? _ref4 : 4;
+    var isVertical = direction === "up" || direction === "down";
+    var isReverse = direction === "right" || direction === "down";
+    var durationSec = Math.max(3, 120 - scrollSpeed);
+    var animId = "sc-scroller-".concat(overlay.id);
+    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      }");
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+        children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", {
+                children: keyframes
+            }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+                style: {
+                    width: "100%",
+                    height: "100%",
+                    overflow: "hidden",
+                    display: "flex",
+                    alignItems: "center",
+                    backgroundColor: bgOpacity > 0 ? "rgba(".concat(hexToRgb(bgColor), ", ").concat(bgOpacity, ")") : void 0,
+                    border: borderWidth > 0 ? "".concat(borderWidth, "px solid ").concat(borderColor) : void 0,
+                    borderRadius: borderRadius > 0 ? "".concat(borderRadius, "px") : void 0,
+                    padding: "".concat(padding, "px"),
+                    boxSizing: "border-box",
+                    pointerEvents: "none"
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+                    style: {
+                        whiteSpace: "nowrap",
+                        fontSize: fontSize,
+                        fontFamily: fontFamily,
+                        fontWeight: fontWeight,
+                        color: textColor,
+                        animation: "".concat(animId, " ").concat(durationSec, "s linear infinite"),
+                        textShadow: "0 1px 4px rgba(0,0,0,0.5)",
+                        userSelect: "none"
+                    },
+                    children: text
+                })
+            })
+        ]
+    });
+}
+function parseConfig(content) {
+    if (!content) return null;
+    try {
+        return JSON.parse(content);
+    } catch (unused) {
+        return null;
+    }
+}
+function ScoreBugOverlay(param) {
+    var overlay = param.overlay, size = param.size;
+    var cfg = parseConfig(overlay.content);
+    if (!cfg) return null;
+    var f = Math.max(6, size.w * 0.058);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+        style: {
+            width: "100%",
+            height: "100%",
+            borderRadius: Math.max(2, size.w * 0.035),
+            display: "flex",
+            flexDirection: "column",
+            background: cfg.backgroundColor,
+            color: cfg.textColor,
+            fontFamily: "Roboto, 'Segoe UI', Arial, sans-serif",
+            overflow: "hidden",
+            pointerEvents: "none",
+            userSelect: "none",
+            fontSize: "".concat(f, "px")
+        },
+        children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+                style: {
+                    flex: 1,
+                    display: "flex",
+                    alignItems: "center",
+                    padding: "0 ".concat(f * 0.8, "px"),
+                    gap: f * 0.4
+                },
+                children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+                        style: {
+                            flex: 1,
+                            textAlign: "center"
+                        },
+                        children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+                                style: {
+                                    fontSize: "1em",
+                                    fontWeight: 700
+                                },
+                                children: cfg.homeTeam
+                            }),
+                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+                                style: {
+                                    fontSize: "1.8em",
+                                    fontWeight: 900,
+                                    lineHeight: 1
+                                },
+                                children: cfg.homeScore
+                            })
+                        ]
+                    }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+                        style: {
+                            fontSize: "0.8em",
+                            textAlign: "center",
+                            opacity: 0.7,
+                            padding: "0 ".concat(f * 0.4, "px")
+                        },
+                        children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+                                children: cfg.period
+                            }),
+                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+                                children: cfg.clock
+                            })
+                        ]
+                    }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+                        style: {
+                            flex: 1,
+                            textAlign: "center"
+                        },
+                        children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+                                style: {
+                                    fontSize: "1em",
+                                    fontWeight: 700
+                                },
+                                children: cfg.awayTeam
+                            }),
+                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+                                style: {
+                                    fontSize: "1.8em",
+                                    fontWeight: 900,
+                                    lineHeight: 1
+                                },
+                                children: cfg.awayScore
+                            })
+                        ]
+                    })
+                ]
+            }),
+            cfg.sponsorText && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+                style: {
+                    fontSize: "0.7em",
+                    textAlign: "center",
+                    opacity: 0.5,
+                    padding: "".concat(f * 0.2, "px 0"),
+                    borderTop: "1px solid ".concat(cfg.accentColor, "40")
+                },
+                children: cfg.sponsorText
+            })
+        ]
+    });
+}
+function LowerThirdOverlay(param) {
+    var overlay = param.overlay, size = param.size;
+    var cfg = parseConfig(overlay.content);
+    if (!cfg) return null;
+    var f = Math.max(6, size.w * 0.055);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+        style: {
+            width: "100%",
+            height: "100%",
+            borderRadius: Math.max(2, size.w * 0.02),
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "flex-end",
+            background: cfg.backgroundColor,
+            color: cfg.textColor,
+            fontFamily: "Roboto, 'Segoe UI', Arial, sans-serif",
+            overflow: "hidden",
+            pointerEvents: "none",
+            userSelect: "none",
+            fontSize: "".concat(f, "px")
+        },
+        children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+                style: {
+                    width: "100%",
+                    height: Math.max(2, size.h * 0.06),
+                    backgroundColor: cfg.accentColor
+                }
+            }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+                style: {
+                    flex: 1,
+                    display: "flex",
+                    flexDirection: "column",
+                    justifyContent: "center",
+                    padding: "".concat(f * 0.5, "px ").concat(f * 1.2, "px")
+                },
+                children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+                        style: {
+                            fontSize: "1.4em",
+                            fontWeight: 700,
+                            lineHeight: 1.2,
+                            textShadow: "0 1px 4px rgba(0,0,0,0.5)"
+                        },
+                        children: cfg.headline
+                    }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+                        style: {
+                            fontSize: "1em",
+                            opacity: 0.7,
+                            marginTop: f * 0.2
+                        },
+                        children: cfg.subtitle
+                    })
+                ]
+            }),
+            cfg.sponsorText && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+                style: {
+                    fontSize: "0.7em",
+                    opacity: 0.4,
+                    padding: "0 ".concat(f * 1.2, "px ").concat(f * 0.4, "px")
+                },
+                children: cfg.sponsorText
+            })
+        ]
+    });
+}
+function QrCodeOverlay(param) {
+    var overlay = param.overlay, size = param.size;
+    var cfg = parseConfig(overlay.content);
+    if (!cfg) return null;
+    var qrSide = Math.max(32, Math.min(size.w, size.h) * 0.55);
+    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"));
+    var f = Math.max(6, size.w * 0.06);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+        style: {
+            width: "100%",
+            height: "100%",
+            borderRadius: Math.max(2, size.w * 0.035),
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: f * 0.4,
+            background: cfg.backgroundColor,
+            color: cfg.textColor,
+            fontFamily: "Roboto, 'Segoe UI', Arial, sans-serif",
+            padding: f * 0.6,
+            boxSizing: "border-box",
+            pointerEvents: "none",
+            userSelect: "none",
+            overflow: "hidden"
+        },
+        children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+                style: {
+                    flexShrink: 0,
+                    background: "#fff",
+                    borderRadius: Math.max(2, qrSide * 0.06),
+                    padding: Math.max(2, qrSide * 0.06),
+                    lineHeight: 0
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", {
+                    src: qrUrl,
+                    alt: "QR Code",
+                    style: {
+                        width: "".concat(qrSide, "px"),
+                        height: "".concat(qrSide, "px"),
+                        display: "block"
+                    }
+                })
+            }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+                style: {
+                    fontSize: "".concat(f * 1.1, "px"),
+                    fontWeight: 700,
+                    textAlign: "center",
+                    color: cfg.accentColor,
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    whiteSpace: "nowrap",
+                    width: "100%"
+                },
+                children: cfg.ctaText
+            }),
+            cfg.description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+                style: {
+                    fontSize: "".concat(f * 0.75, "px"),
+                    opacity: 0.6,
+                    textAlign: "center",
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    whiteSpace: "nowrap",
+                    width: "100%"
+                },
+                children: cfg.description
+            })
+        ]
+    });
+}
+function ComingUpNextOverlay(param) {
+    var overlay = param.overlay, size = param.size;
+    var cfg = parseConfig(overlay.content);
+    if (!cfg) return null;
+    var f = Math.max(6, size.w * 0.05);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+        style: {
+            width: "100%",
+            height: "100%",
+            borderRadius: Math.max(2, size.w * 0.035),
+            display: "flex",
+            background: cfg.backgroundColor,
+            color: cfg.textColor,
+            fontFamily: "Roboto, 'Segoe UI', Arial, sans-serif",
+            overflow: "hidden",
+            pointerEvents: "none",
+            userSelect: "none",
+            fontSize: "".concat(f, "px")
+        },
+        children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+                style: {
+                    width: Math.max(2, size.w * 0.015),
+                    flexShrink: 0,
+                    backgroundColor: cfg.accentColor
+                }
+            }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+                style: {
+                    flex: 1,
+                    display: "flex",
+                    flexDirection: "column",
+                    justifyContent: "center",
+                    padding: "".concat(f * 0.6, "px ").concat(f * 1, "px"),
+                    minWidth: 0
+                },
+                children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+                        style: {
+                            fontSize: "0.8em",
+                            fontWeight: 600,
+                            textTransform: "uppercase",
+                            letterSpacing: "0.05em",
+                            color: cfg.accentColor
+                        },
+                        children: "Coming Up Next"
+                    }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+                        style: {
+                            fontSize: "1.5em",
+                            fontWeight: 700,
+                            lineHeight: 1.2,
+                            marginTop: f * 0.2,
+                            overflow: "hidden",
+                            textOverflow: "ellipsis",
+                            whiteSpace: "nowrap"
+                        },
+                        children: cfg.title
+                    }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+                        style: {
+                            fontSize: "0.9em",
+                            opacity: 0.6,
+                            overflow: "hidden",
+                            textOverflow: "ellipsis",
+                            whiteSpace: "nowrap"
+                        },
+                        children: cfg.subtitle
+                    }),
+                    cfg.scheduledTime && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+                        style: {
+                            fontSize: "1em",
+                            fontWeight: 600,
+                            marginTop: f * 0.4,
+                            color: cfg.accentColor
+                        },
+                        children: cfg.scheduledTime
+                    })
+                ]
+            })
+        ]
+    });
+}
+function ContextualTriggerOverlay(param) {
+    var overlay = param.overlay, size = param.size;
+    var cfg = parseConfig(overlay.content);
+    if (!cfg) return null;
+    var icons = {
+        alert: "\u26A0\uFE0F",
+        celebration: "\uD83C\uDF89",
+        info: "\u2139\uFE0F",
+        warning: "\uD83D\uDD14"
+    };
+    var f = Math.max(6, size.w * 0.05);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+        style: {
+            width: "100%",
+            height: "100%",
+            borderRadius: Math.max(2, size.w * 0.035),
+            display: "flex",
+            alignItems: "center",
+            gap: f * 0.8,
+            padding: "0 ".concat(f * 1.2, "px"),
+            background: cfg.backgroundColor,
+            color: cfg.textColor,
+            fontFamily: "Roboto, 'Segoe UI', Arial, sans-serif",
+            borderLeft: "".concat(Math.max(2, size.w * 0.02), "px solid ").concat(cfg.accentColor),
+            boxSizing: "border-box",
+            pointerEvents: "none",
+            userSelect: "none",
+            fontSize: "".concat(f, "px")
+        },
+        children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+                style: {
+                    fontSize: "2em",
+                    flexShrink: 0
+                },
+                children: icons[cfg.iconType] || "\u26A1"
+            }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+                style: {
+                    flex: 1,
+                    minWidth: 0
+                },
+                children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+                        style: {
+                            fontSize: "1.3em",
+                            fontWeight: 700,
+                            overflow: "hidden",
+                            textOverflow: "ellipsis",
+                            whiteSpace: "nowrap"
+                        },
+                        children: cfg.headline
+                    }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+                        style: {
+                            fontSize: "0.9em",
+                            opacity: 0.7,
+                            overflow: "hidden",
+                            textOverflow: "ellipsis",
+                            whiteSpace: "nowrap"
+                        },
+                        children: cfg.message
+                    })
+                ]
+            })
+        ]
+    });
+}
+function OddsBettingOverlay(param) {
+    var overlay = param.overlay, size = param.size;
+    var cfg = parseConfig(overlay.content);
+    if (!cfg) return null;
+    var f = Math.max(6, size.w * 0.052);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+        style: {
+            width: "100%",
+            height: "100%",
+            borderRadius: Math.max(2, size.w * 0.035),
+            display: "flex",
+            flexDirection: "column",
+            padding: f * 0.8,
+            background: cfg.backgroundColor,
+            color: cfg.textColor,
+            fontFamily: "Roboto, 'Segoe UI', Arial, sans-serif",
+            boxSizing: "border-box",
+            pointerEvents: "none",
+            userSelect: "none",
+            fontSize: "".concat(f, "px")
+        },
+        children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+                style: {
+                    fontSize: "0.9em",
+                    fontWeight: 700,
+                    textTransform: "uppercase",
+                    letterSpacing: "0.05em",
+                    color: cfg.accentColor,
+                    marginBottom: f * 0.4
+                },
+                children: cfg.eventTitle
+            }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+                style: {
+                    flex: 1,
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: f * 0.2,
+                    justifyContent: "center"
+                },
+                children: (cfg.options || []).slice(0, 5).map(function(opt, i) {
+                    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+                        style: {
+                            display: "flex",
+                            justifyContent: "space-between",
+                            alignItems: "center",
+                            padding: "".concat(f * 0.2, "px ").concat(f * 0.6, "px"),
+                            borderRadius: Math.max(2, f * 0.3),
+                            background: "".concat(cfg.accentColor, "15"),
+                            fontSize: "1em"
+                        },
+                        children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+                                style: {
+                                    overflow: "hidden",
+                                    textOverflow: "ellipsis",
+                                    whiteSpace: "nowrap",
+                                    flex: 1
+                                },
+                                children: opt.label
+                            }),
+                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+                                style: {
+                                    fontWeight: 700,
+                                    marginLeft: f * 0.8,
+                                    flexShrink: 0,
+                                    color: cfg.accentColor
+                                },
+                                children: opt.odds
+                            })
+                        ]
+                    }, i);
+                })
+            }),
+            cfg.sponsorText && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+                style: {
+                    fontSize: "0.7em",
+                    opacity: 0.4,
+                    textAlign: "center",
+                    marginTop: f * 0.4
+                },
+                children: cfg.sponsorText
+            })
+        ]
+    });
+}
+function BreakingNewsOverlay(param) {
+    var overlay = param.overlay, size = param.size;
+    var cfg = parseConfig(overlay.content);
+    if (!cfg) return null;
+    var urgencyColors = {
+        breaking: "#dc2626",
+        urgent: "#ea580c",
+        normal: "#2563eb"
+    };
+    var labelBg = urgencyColors[cfg.urgency] || urgencyColors.normal;
+    var label = cfg.urgency === "breaking" ? "BREAKING" : cfg.urgency === "urgent" ? "URGENT" : "NEWS";
+    var f = Math.max(6, size.w * 0.05);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+        style: {
+            width: "100%",
+            height: "100%",
+            borderRadius: Math.max(2, size.w * 0.02),
+            display: "flex",
+            alignItems: "center",
+            background: cfg.backgroundColor,
+            color: cfg.textColor,
+            fontFamily: "Roboto, 'Segoe UI', Arial, sans-serif",
+            overflow: "hidden",
+            pointerEvents: "none",
+            userSelect: "none",
+            fontSize: "".concat(f, "px")
+        },
+        children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+                style: {
+                    padding: "0 ".concat(f * 0.8, "px"),
+                    height: "100%",
+                    display: "flex",
+                    alignItems: "center",
+                    background: labelBg,
+                    color: "#fff",
+                    fontSize: "1em",
+                    fontWeight: 900,
+                    textTransform: "uppercase",
+                    letterSpacing: "0.05em",
+                    flexShrink: 0
+                },
+                children: label
+            }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+                style: {
+                    flex: 1,
+                    padding: "0 ".concat(f * 1, "px"),
+                    minWidth: 0
+                },
+                children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+                        style: {
+                            fontSize: "1.3em",
+                            fontWeight: 700,
+                            overflow: "hidden",
+                            textOverflow: "ellipsis",
+                            whiteSpace: "nowrap"
+                        },
+                        children: cfg.headline
+                    }),
+                    cfg.body && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+                        style: {
+                            fontSize: "0.9em",
+                            opacity: 0.7,
+                            overflow: "hidden",
+                            textOverflow: "ellipsis",
+                            whiteSpace: "nowrap"
+                        },
+                        children: cfg.body
+                    })
+                ]
+            })
+        ]
+    });
+}
+function CountdownOverlay(param) {
+    var overlay = param.overlay, size = param.size;
+    var cfg = parseConfig(overlay.content);
+    var _ref = _sliced_to_array((0, import_react.useState)({
+        d: 0,
+        h: 0,
+        m: 0,
+        s: 0
+    }), 2), remaining = _ref[0], setRemaining = _ref[1];
+    (0, import_react.useEffect)(function() {
+        if (!cfg) return;
+        var update = function update() {
+            var target = new Date(cfg.targetTime).getTime();
+            var now = Date.now();
+            var diff = Math.max(0, target - now);
+            setRemaining({
+                d: Math.floor(diff / 864e5),
+                h: Math.floor(diff % 864e5 / 36e5),
+                m: Math.floor(diff % 36e5 / 6e4),
+                s: Math.floor(diff % 6e4 / 1e3)
+            });
+        };
+        update();
+        var id = setInterval(update, 1e3);
+        return function() {
+            return clearInterval(id);
+        };
+    }, [
+        cfg === null || cfg === void 0 ? void 0 : cfg.targetTime
+    ]);
+    if (!cfg) return null;
+    var f = Math.max(6, size.w * 0.055);
+    var pad = function pad(n) {
+        return String(n).padStart(2, "0");
+    };
+    var units = [
+        {
+            show: cfg.showDays,
+            value: pad(remaining.d),
+            label: "DAYS"
+        },
+        {
+            show: cfg.showHours,
+            value: pad(remaining.h),
+            label: "HRS"
+        },
+        {
+            show: cfg.showMinutes,
+            value: pad(remaining.m),
+            label: "MIN"
+        },
+        {
+            show: cfg.showSeconds,
+            value: pad(remaining.s),
+            label: "SEC"
+        }
+    ];
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+        style: {
+            width: "100%",
+            height: "100%",
+            borderRadius: Math.max(2, size.w * 0.035),
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            justifyContent: "center",
+            padding: f * 0.8,
+            background: cfg.backgroundColor,
+            color: cfg.textColor,
+            fontFamily: "Roboto, 'Segoe UI', Arial, sans-serif",
+            boxSizing: "border-box",
+            pointerEvents: "none",
+            userSelect: "none",
+            fontSize: "".concat(f, "px")
+        },
+        children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+                style: {
+                    fontSize: "0.8em",
+                    fontWeight: 600,
+                    textTransform: "uppercase",
+                    letterSpacing: "0.05em",
+                    color: cfg.accentColor,
+                    marginBottom: f * 0.4
+                },
+                children: cfg.eventName
+            }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+                style: {
+                    display: "flex",
+                    gap: f * 0.6,
+                    alignItems: "center"
+                },
+                children: units.filter(function(u) {
+                    return u.show;
+                }).map(function(u, i, arr) {
+                    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.default.Fragment, {
+                        children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+                                style: {
+                                    textAlign: "center"
+                                },
+                                children: [
+                                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+                                        style: {
+                                            fontSize: "2em",
+                                            fontWeight: 900,
+                                            lineHeight: 1,
+                                            borderRadius: Math.max(2, f * 0.4),
+                                            padding: "".concat(f * 0.2, "px ").concat(f * 0.4, "px"),
+                                            background: "".concat(cfg.accentColor, "20")
+                                        },
+                                        children: u.value
+                                    }),
+                                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+                                        style: {
+                                            fontSize: "0.5em",
+                                            opacity: 0.5,
+                                            marginTop: f * 0.2
+                                        },
+                                        children: u.label
+                                    })
+                                ]
+                            }),
+                            i < arr.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+                                style: {
+                                    fontSize: "1.8em",
+                                    fontWeight: 700,
+                                    opacity: 0.3
+                                },
+                                children: ":"
+                            })
+                        ]
+                    }, u.label);
+                })
+            }),
+            cfg.message && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+                style: {
+                    fontSize: "0.8em",
+                    opacity: 0.6,
+                    marginTop: f * 0.4,
+                    textAlign: "center"
+                },
+                children: cfg.message
+            })
+        ]
+    });
+}
+function ShapeOverlay(param) {
+    var overlay = param.overlay, size = param.size;
+    var f = Math.max(6, size.w * 0.05);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+        style: {
+            width: "100%",
+            height: "100%",
+            borderRadius: Math.max(2, size.w * 0.03),
+            background: "rgba(99, 102, 241, 0.2)",
+            border: "2px solid rgba(99, 102, 241, 0.4)",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            pointerEvents: "none",
+            userSelect: "none"
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+            style: {
+                fontSize: "".concat(f, "px"),
+                fontWeight: 500,
+                color: "rgba(163, 163, 163, 0.8)",
+                textTransform: "uppercase"
+            },
+            children: overlay.name
+        })
+    });
+}
+function hexToRgb(hex) {
+    if (!hex || !hex.startsWith("#")) return "0,0,0";
+    var clean = hex.slice(1);
+    var num = parseInt(clean.length === 3 ? clean.replace(/./g, "$&$&") : clean, 16);
+    return "".concat(num >> 16 & 255, ",").concat(num >> 8 & 255, ",").concat(num & 255);
+}
+var OverlayRenderer = function OverlayRenderer(param) {
+    var overlays = param.overlays, currentTime = param.currentTime, videoRef = param.videoRef, coordinateSpace = param.coordinateSpace;
+    var _ref = _sliced_to_array((0, import_react.useState)(null), 2), dims = _ref[0], setDims = _ref[1];
+    var rafRef = (0, import_react.useRef)(null);
+    var updateDims = (0, import_react.useCallback)(function() {
+        var video = videoRef.current;
+        if (video) {
+            var computed = computeVideoDimensions(video);
+            setDims(function(prev) {
+                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) {
+                    return prev;
+                }
+                return computed;
+            });
+        }
+    }, [
+        videoRef
+    ]);
+    (0, import_react.useEffect)(function() {
+        updateDims();
+        var interval = setInterval(updateDims, 500);
+        var handleResize = function handleResize() {
+            if (rafRef.current) cancelAnimationFrame(rafRef.current);
+            rafRef.current = requestAnimationFrame(updateDims);
+        };
+        window.addEventListener("resize", handleResize);
+        return function() {
+            clearInterval(interval);
+            window.removeEventListener("resize", handleResize);
+            if (rafRef.current) cancelAnimationFrame(rafRef.current);
+        };
+    }, [
+        updateDims
+    ]);
+    var activeOverlays = overlays.filter(function(o) {
+        return isOverlayActive(o, currentTime);
+    });
+    if (!dims || activeOverlays.length === 0) return null;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+        "aria-hidden": "true",
+        style: {
+            position: "absolute",
+            left: "".concat(dims.offsetX, "px"),
+            top: "".concat(dims.offsetY, "px"),
+            width: "".concat(dims.displayWidth, "px"),
+            height: "".concat(dims.displayHeight, "px"),
+            pointerEvents: "none",
+            overflow: "hidden",
+            zIndex: 8
+        },
+        children: activeOverlays.map(function(overlay) {
+            var scaleX = (coordinateSpace === null || coordinateSpace === void 0 ? void 0 : coordinateSpace.width) ? dims.displayWidth / coordinateSpace.width : dims.scaleX;
+            var scaleY = (coordinateSpace === null || coordinateSpace === void 0 ? void 0 : coordinateSpace.height) ? dims.displayHeight / coordinateSpace.height : dims.scaleY;
+            var left = overlay.x * scaleX;
+            var top = overlay.y * scaleY;
+            var width = overlay.width * scaleX;
+            var height = overlay.height * scaleY;
+            var opacity = Math.max(0, Math.min(100, overlay.opacity)) / 100;
+            var sz = {
+                w: width,
+                h: height
+            };
+            return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+                style: {
+                    position: "absolute",
+                    left: "".concat(left, "px"),
+                    top: "".concat(top, "px"),
+                    width: "".concat(width, "px"),
+                    height: "".concat(height, "px"),
+                    opacity: opacity,
+                    zIndex: overlay.z_index,
+                    overflow: "hidden"
+                },
+                children: [
+                    overlay.type === "image" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ImageOverlay, {
+                        overlay: overlay
+                    }),
+                    overlay.type === "text" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TextOverlay, {
+                        overlay: overlay
+                    }),
+                    overlay.type === "scroller" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ScrollerOverlay, {
+                        overlay: overlay
+                    }),
+                    overlay.type === "shape" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ShapeOverlay, {
+                        overlay: overlay,
+                        size: sz
+                    }),
+                    overlay.type === "score_bug" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ScoreBugOverlay, {
+                        overlay: overlay,
+                        size: sz
+                    }),
+                    overlay.type === "lower_third" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LowerThirdOverlay, {
+                        overlay: overlay,
+                        size: sz
+                    }),
+                    overlay.type === "qr_code" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(QrCodeOverlay, {
+                        overlay: overlay,
+                        size: sz
+                    }),
+                    overlay.type === "coming_up_next" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ComingUpNextOverlay, {
+                        overlay: overlay,
+                        size: sz
+                    }),
+                    overlay.type === "contextual_trigger" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ContextualTriggerOverlay, {
+                        overlay: overlay,
+                        size: sz
+                    }),
+                    overlay.type === "odds_betting" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(OddsBettingOverlay, {
+                        overlay: overlay,
+                        size: sz
+                    }),
+                    overlay.type === "breaking_news" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BreakingNewsOverlay, {
+                        overlay: overlay,
+                        size: sz
+                    }),
+                    overlay.type === "countdown" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CountdownOverlay, {
+                        overlay: overlay,
+                        size: sz
+                    })
+                ]
+            }, overlay.id);
+        })
+    });
+};
+// src/ui/StormcloudVideoPlayer.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
 var CRITICAL_PROPS = [
     "src",
     "allowNativeHls",
@@ -6091,8 +7231,8 @@ var CRITICAL_PROPS = [
     "driftToleranceMs"
 ];
 var CONTROLS_HIDE_DELAY = 3e3;
-var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
-    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, [
+var StormcloudVideoPlayerComponent = import_react2.default.memo(function(props) {
+    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, [
         "src",
         "autoplay",
         "muted",
@@ -6119,35 +7259,38 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
         "licenseKey",
         "minSegmentsBeforePlay",
         "disableAds",
-        "disableFiller"
+        "disableFiller",
+        "swirlProjectId"
     ]);
-    var videoRef = (0, import_react.useRef)(null);
-    var playerRef = (0, import_react.useRef)(null);
-    var bufferingTimeoutRef = (0, import_react.useRef)(null);
-    var controlsTimerRef = (0, import_react.useRef)(null);
-    var wrapperRef = (0, import_react.useRef)(null);
-    var _import_react_default_useState = _sliced_to_array(import_react.default.useState({
+    var videoRef = (0, import_react2.useRef)(null);
+    var playerRef = (0, import_react2.useRef)(null);
+    var bufferingTimeoutRef = (0, import_react2.useRef)(null);
+    var controlsTimerRef = (0, import_react2.useRef)(null);
+    var wrapperRef = (0, import_react2.useRef)(null);
+    var _import_react2_default_useState = _sliced_to_array(import_react2.default.useState({
         showAds: false,
         currentIndex: 0,
         totalAds: 0
-    }), 2), adStatus = _import_react_default_useState[0], setAdStatus = _import_react_default_useState[1];
-    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];
-    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];
-    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];
-    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];
-    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];
-    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];
-    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];
-    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];
-    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];
-    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];
-    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];
-    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];
-    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];
-    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];
-    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];
-    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];
-    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];
+    }), 2), adStatus = _import_react2_default_useState[0], setAdStatus = _import_react2_default_useState[1];
+    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];
+    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];
+    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];
+    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];
+    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];
+    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];
+    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];
+    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];
+    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];
+    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];
+    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];
+    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];
+    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];
+    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];
+    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];
+    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];
+    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];
+    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];
+    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];
     var getResponsiveScale = function getResponsiveScale() {
         if (viewportWidth < 480) return 0.7;
         if (viewportWidth < 768) return 0.8;
@@ -6155,7 +7298,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
         return 1;
     };
     var responsiveScale = getResponsiveScale();
-    var resetControlsTimer = (0, import_react.useCallback)(function() {
+    var resetControlsTimer = (0, import_react2.useCallback)(function() {
         if (controlsTimerRef.current) {
             clearTimeout(controlsTimerRef.current);
         }
@@ -6232,7 +7375,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
     };
     var isHlsStream = (src === null || src === void 0 ? void 0 : src.toLowerCase().includes(".m3u8")) || (src === null || src === void 0 ? void 0 : src.toLowerCase().includes("/hls/"));
     var shouldShowEnhancedControls = showCustomControls && (isHlsStream ? allowNativeHls : true);
-    var criticalPropsKey = (0, import_react.useMemo)(function() {
+    var criticalPropsKey = (0, import_react2.useMemo)(function() {
         return CRITICAL_PROPS.map(function(prop) {
             return "".concat(prop, ":").concat(props[prop]);
         }).join("|");
@@ -6243,7 +7386,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
         lowLatencyMode,
         driftToleranceMs
     ]);
-    (0, import_react.useEffect)(function() {
+    (0, import_react2.useEffect)(function() {
         if (typeof window === "undefined") return;
         var el = videoRef.current;
         if (!el || !src) return;
@@ -6298,7 +7441,61 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
     }, [
         criticalPropsKey
     ]);
-    (0, import_react.useEffect)(function() {
+    (0, import_react2.useEffect)(function() {
+        if (!swirlProjectId) {
+            setOverlays([]);
+            setOverlayCoordSpace(null);
+            return;
+        }
+        var cancelled = false;
+        fetchProjectOverlays(swirlProjectId).then(function(data) {
+            if (!cancelled) setOverlays(data);
+        }).catch(function(err) {
+            if (!cancelled) {
+                console.warn("[StormcloudVideoPlayer] Failed to fetch overlays:", err);
+            }
+        });
+        return function() {
+            cancelled = true;
+        };
+    }, [
+        swirlProjectId
+    ]);
+    (0, import_react2.useEffect)(function() {
+        if (!swirlProjectId) return;
+        var player = playerRef.current;
+        if (!player) return;
+        var attempts = 0;
+        var maxAttempts = 30;
+        var tryResolve = function tryResolve() {
+            var res = player.getMinHlsResolution();
+            if (res) {
+                setOverlayCoordSpace(res);
+                return true;
+            }
+            var video = player.videoElement;
+            if (video && video.videoWidth > 0 && video.videoHeight > 0) {
+                setOverlayCoordSpace({
+                    width: video.videoWidth,
+                    height: video.videoHeight
+                });
+                return true;
+            }
+            return false;
+        };
+        if (tryResolve()) return;
+        var interval = setInterval(function() {
+            attempts++;
+            if (tryResolve() || attempts >= maxAttempts) clearInterval(interval);
+        }, 300);
+        return function() {
+            return clearInterval(interval);
+        };
+    }, [
+        swirlProjectId,
+        criticalPropsKey
+    ]);
+    (0, import_react2.useEffect)(function() {
         if (!playerRef.current) return;
         try {
             if (autoplay !== void 0 && playerRef.current.videoElement) {
@@ -6314,7 +7511,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
         autoplay,
         muted
     ]);
-    (0, import_react.useEffect)(function() {
+    (0, import_react2.useEffect)(function() {
         if (!playerRef.current) return;
         var checkAdStatus = function checkAdStatus() {
             if (playerRef.current) {
@@ -6344,7 +7541,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
             return clearInterval(interval);
         };
     }, []);
-    (0, import_react.useEffect)(function() {
+    (0, import_react2.useEffect)(function() {
         if (typeof window === "undefined" || !playerRef.current) return;
         var handleResize = function handleResize() {
             if (playerRef.current && videoRef.current) {
@@ -6360,7 +7557,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
             return window.removeEventListener("resize", handleResize);
         };
     }, []);
-    (0, import_react.useEffect)(function() {
+    (0, import_react2.useEffect)(function() {
         if (!playerRef.current || !videoRef.current) return;
         var updateStates = function updateStates() {
             if (playerRef.current && videoRef.current) {
@@ -6387,7 +7584,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
             document.removeEventListener("fullscreenchange", handleFullscreenChange);
         };
     }, []);
-    (0, import_react.useEffect)(function() {
+    (0, import_react2.useEffect)(function() {
         if (!videoRef.current) return;
         var handleCanPlay = function handleCanPlay() {
             setIsLoading(false);
@@ -6459,19 +7656,19 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
     }, [
         debugAdTiming
     ]);
-    (0, import_react.useEffect)(function() {
+    (0, import_react2.useEffect)(function() {
         return function() {
             if (controlsTimerRef.current) {
                 clearTimeout(controlsTimerRef.current);
             }
         };
     }, []);
-    var handleWrapperMouseMove = (0, import_react.useCallback)(function() {
+    var handleWrapperMouseMove = (0, import_react2.useCallback)(function() {
         resetControlsTimer();
     }, [
         resetControlsTimer
     ]);
-    var handleWrapperMouseLeave = (0, import_react.useCallback)(function() {
+    var handleWrapperMouseLeave = (0, import_react2.useCallback)(function() {
         if (!showVolumeSlider && !showSpeedMenu) {
             setControlsVisible(false);
         }
@@ -6481,12 +7678,12 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
     ]);
     var progressPercent = duration > 0 ? currentTime / duration * 100 : 0;
     var VolumeIcon = isMuted || volume === 0 ? import_fa.FaVolumeMute : volume < 0.5 ? import_fa.FaVolumeDown : import_fa.FaVolumeUp;
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, {
         children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", {
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("style", {
                 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            "
             }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", {
                 ref: wrapperRef,
                 className: "sc-wrapper ".concat(wrapperClassName || ""),
                 onMouseMove: handleWrapperMouseMove,
@@ -6510,10 +7707,12 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
                     boxShadow: isFullscreen ? "none" : void 0
                 }, wrapperStyle),
                 children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("video", _object_spread_props(_object_spread({
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("video", _object_spread_props(_object_spread({
                         ref: videoRef,
                         className: className,
                         style: _object_spread({
+                            position: "relative",
+                            zIndex: 1,
                             display: "block",
                             width: "100%",
                             height: isFullscreen ? "100%" : "auto",
@@ -6530,7 +7729,13 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
                     }, restVideoAttrs), {
                         children: children
                     })),
-                    (isLoading || isBuffering) && !hideLoadingIndicator && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fa.FaSpinner, {
+                    overlays.length > 0 && !adStatus.showAds && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(OverlayRenderer, {
+                        overlays: overlays,
+                        currentTime: currentTime,
+                        videoRef: videoRef,
+                        coordinateSpace: overlayCoordSpace
+                    }),
+                    (isLoading || isBuffering) && !hideLoadingIndicator && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_fa.FaSpinner, {
                         className: "sc-loading-indicator",
                         size: 40,
                         color: "rgba(255, 255, 255, 0.85)",
@@ -6543,7 +7748,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
                             filter: "drop-shadow(0 2px 8px rgba(0, 0, 0, 0.6))"
                         }
                     }),
-                    showLicenseWarning && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+                    showLicenseWarning && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", {
                         style: {
                             position: "absolute",
                             top: "50%",
@@ -6562,7 +7767,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
                             margin: "0 16px"
                         },
                         children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+                            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", {
                                 style: {
                                     fontSize: "18px",
                                     fontWeight: "700",
@@ -6571,7 +7776,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
                                 },
                                 children: "License Key Required"
                             }),
-                            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+                            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", {
                                 style: {
                                     fontSize: "13px",
                                     lineHeight: "1.6",
@@ -6579,13 +7784,13 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
                                 },
                                 children: [
                                     "Please provide a valid license key to use the Stormcloud Video Player.",
-                                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("br", {}),
+                                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("br", {}),
                                     "Contact your administrator for licensing information."
                                 ]
                             })
                         ]
                     }),
-                    showCenterPlay && !isLoading && !isBuffering && !showLicenseWarning && !adStatus.showAds && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+                    showCenterPlay && !isLoading && !isBuffering && !showLicenseWarning && !adStatus.showAds && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", {
                         onClick: handleCenterPlayClick,
                         style: {
                             position: "absolute",
@@ -6620,7 +7825,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
                             el.style.transform = "translate(-50%, -50%) scale(1)";
                         },
                         title: "Play",
-                        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fa.FaPlay, {
+                        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_fa.FaPlay, {
                             size: Math.max(22, 28 * responsiveScale),
                             color: "white",
                             style: {
@@ -6629,7 +7834,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
                             }
                         })
                     }),
-                    adStatus.showAds && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+                    adStatus.showAds && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", {
                         style: {
                             position: "absolute",
                             top: "".concat(12 * responsiveScale, "px"),
@@ -6641,7 +7846,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
                             animation: "sc-fade-in 0.3s ease"
                         },
                         children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+                            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", {
                                 style: {
                                     background: "rgba(234, 179, 8, 0.9)",
                                     backdropFilter: "blur(12px)",
@@ -6656,7 +7861,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
                                 },
                                 children: "Ad"
                             }),
-                            adStatus.currentIndex > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+                            adStatus.currentIndex > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", {
                                 style: {
                                     background: "rgba(0, 0, 0, 0.5)",
                                     backdropFilter: "blur(12px)",
@@ -6675,7 +7880,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
                             })
                         ]
                     }),
-                    shouldShowEnhancedControls && !showLicenseWarning ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+                    shouldShowEnhancedControls && !showLicenseWarning ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", {
                         className: "sc-controls-bar",
                         style: {
                             position: "absolute",
@@ -6690,7 +7895,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
                             pointerEvents: controlsVisible || adStatus.showAds ? "auto" : "none"
                         },
                         children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+                            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", {
                                 className: "sc-progress-track",
                                 style: {
                                     width: "100%",
@@ -6710,7 +7915,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
                                     e.currentTarget.style.height = "3px";
                                 },
                                 children: [
-                                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+                                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", {
                                         style: {
                                             position: "absolute",
                                             top: 0,
@@ -6722,7 +7927,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
                                             transition: "width 0.15s linear"
                                         }
                                     }),
-                                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+                                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", {
                                         className: "sc-progress-thumb",
                                         style: {
                                             position: "absolute",
@@ -6739,7 +7944,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
                                     })
                                 ]
                             }),
-                            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+                            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", {
                                 style: {
                                     display: "flex",
                                     alignItems: "center",
@@ -6748,14 +7953,14 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
                                     gap: "".concat(8 * responsiveScale, "px")
                                 },
                                 children: [
-                                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+                                    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", {
                                         style: {
                                             display: "flex",
                                             alignItems: "center",
                                             gap: "".concat(8 * responsiveScale, "px")
                                         },
                                         children: [
-                                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+                                            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", {
                                                 className: "sc-ctrl-btn",
                                                 onClick: handlePlayPause,
                                                 style: {
@@ -6765,16 +7970,16 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
                                                     minHeight: "".concat(36 * responsiveScale, "px")
                                                 },
                                                 title: isPlaying ? "Pause" : "Play",
-                                                children: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fa.FaPause, {
+                                                children: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_fa.FaPause, {
                                                     size: Math.max(14, 18 * responsiveScale)
-                                                }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fa.FaPlay, {
+                                                }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_fa.FaPlay, {
                                                     size: Math.max(14, 18 * responsiveScale),
                                                     style: {
                                                         marginLeft: "2px"
                                                     }
                                                 })
                                             }),
-                                            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+                                            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", {
                                                 style: {
                                                     display: "flex",
                                                     alignItems: "center"
@@ -6786,7 +7991,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
                                                     return setShowVolumeSlider(false);
                                                 },
                                                 children: [
-                                                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+                                                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", {
                                                         className: "sc-ctrl-btn",
                                                         onClick: function onClick() {
                                                             if (playerRef.current) {
@@ -6802,11 +8007,11 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
                                                             minHeight: "".concat(36 * responsiveScale, "px")
                                                         },
                                                         title: isMuted ? "Unmute" : "Mute",
-                                                        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(VolumeIcon, {
+                                                        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(VolumeIcon, {
                                                             size: Math.max(14, 18 * responsiveScale)
                                                         })
                                                     }),
-                                                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+                                                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", {
                                                         style: {
                                                             width: showVolumeSlider ? "".concat(62 * responsiveScale, "px") : "0px",
                                                             overflow: "hidden",
@@ -6816,7 +8021,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
                                                             paddingLeft: showVolumeSlider ? "2px" : "0",
                                                             paddingRight: showVolumeSlider ? "4px" : "0"
                                                         },
-                                                        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+                                                        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", {
                                                             style: {
                                                                 position: "relative",
                                                                 width: "".concat(56 * responsiveScale, "px"),
@@ -6846,7 +8051,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
                                                                 handleVolumeChange(Math.max(0, Math.min(1, (e.clientX - r.left) / r.width)));
                                                             },
                                                             children: [
-                                                                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+                                                                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", {
                                                                     style: {
                                                                         position: "absolute",
                                                                         inset: 0,
@@ -6854,7 +8059,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
                                                                         borderRadius: "1.5px"
                                                                     }
                                                                 }),
-                                                                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+                                                                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", {
                                                                     style: {
                                                                         position: "absolute",
                                                                         top: 0,
@@ -6866,7 +8071,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
                                                                         transition: "width 0.1s ease-out"
                                                                     }
                                                                 }),
-                                                                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+                                                                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", {
                                                                     style: {
                                                                         position: "absolute",
                                                                         top: "50%",
@@ -6885,7 +8090,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
                                                     })
                                                 ]
                                             }),
-                                            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+                                            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", {
                                                 style: {
                                                     fontSize: "".concat(13 * responsiveScale, "px"),
                                                     fontFamily: "Roboto, 'Segoe UI', Arial, sans-serif",
@@ -6898,7 +8103,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
                                                 children: [
                                                     formatTime(currentTime),
                                                     " ",
-                                                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+                                                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", {
                                                         style: {
                                                             color: "rgba(255,255,255,0.5)"
                                                         },
@@ -6910,20 +8115,20 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
                                             })
                                         ]
                                     }),
-                                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+                                    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", {
                                         style: {
                                             display: "flex",
                                             alignItems: "center",
                                             gap: "".concat(8 * responsiveScale, "px")
                                         },
                                         children: [
-                                            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+                                            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", {
                                                 style: {
                                                     position: "relative",
                                                     display: viewportWidth < 600 ? "none" : "block"
                                                 },
                                                 children: [
-                                                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", {
+                                                    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("button", {
                                                         className: "sc-ctrl-btn",
                                                         onClick: function onClick() {
                                                             setShowSpeedMenu(!showSpeedMenu);
@@ -6943,7 +8148,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
                                                             "x"
                                                         ]
                                                     }),
-                                                    showSpeedMenu && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+                                                    showSpeedMenu && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", {
                                                         style: {
                                                             position: "absolute",
                                                             bottom: "100%",
@@ -6969,7 +8174,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
                                                             1.75,
                                                             2
                                                         ].map(function(speed) {
-                                                            return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", {
+                                                            return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("button", {
                                                                 onClick: function onClick() {
                                                                     return handlePlaybackRateChange(speed);
                                                                 },
@@ -7008,7 +8213,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
                                                     })
                                                 ]
                                             }),
-                                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+                                            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", {
                                                 className: "sc-ctrl-btn",
                                                 onClick: function onClick() {
                                                     if (onFullscreenToggle) {
@@ -7029,9 +8234,9 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
                                                     minHeight: "".concat(36 * responsiveScale, "px")
                                                 },
                                                 title: isFullscreen ? "Exit Fullscreen" : "Enter Fullscreen",
-                                                children: isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fa.FaCompress, {
+                                                children: isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_fa.FaCompress, {
                                                     size: Math.max(14, 18 * responsiveScale)
-                                                }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fa.FaExpand, {
+                                                }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_fa.FaExpand, {
                                                     size: Math.max(14, 18 * responsiveScale)
                                                 })
                                             })
@@ -7040,7 +8245,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
                                 ]
                             })
                         ]
-                    }) : showCustomControls && !showLicenseWarning && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+                    }) : showCustomControls && !showLicenseWarning && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", {
                         className: "sc-controls-bar",
                         style: {
                             position: "absolute",
@@ -7055,7 +8260,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
                             pointerEvents: controlsVisible ? "auto" : "none"
                         },
                         children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+                            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", {
                                 style: {
                                     display: "flex",
                                     alignItems: "center",
@@ -7070,7 +8275,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
                                     return setShowVolumeSlider(false);
                                 },
                                 children: [
-                                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+                                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", {
                                         className: "sc-ctrl-btn",
                                         onClick: function onClick() {
                                             if (playerRef.current) playerRef.current.toggleMute();
@@ -7084,11 +8289,11 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
                                             minHeight: "".concat(36 * responsiveScale, "px")
                                         },
                                         title: isMuted ? "Unmute" : "Mute",
-                                        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(VolumeIcon, {
+                                        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(VolumeIcon, {
                                             size: Math.max(14, 18 * responsiveScale)
                                         })
                                     }),
-                                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+                                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", {
                                         style: {
                                             width: showVolumeSlider ? "".concat(62 * responsiveScale, "px") : "0px",
                                             overflow: "hidden",
@@ -7098,7 +8303,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
                                             paddingLeft: showVolumeSlider ? "2px" : "0",
                                             paddingRight: showVolumeSlider ? "6px" : "0"
                                         },
-                                        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+                                        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", {
                                             style: {
                                                 position: "relative",
                                                 width: "".concat(56 * responsiveScale, "px"),
@@ -7128,7 +8333,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
                                                 handleVolumeChange(Math.max(0, Math.min(1, (e.clientX - r.left) / r.width)));
                                             },
                                             children: [
-                                                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+                                                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", {
                                                     style: {
                                                         position: "absolute",
                                                         inset: 0,
@@ -7136,7 +8341,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
                                                         borderRadius: "1.5px"
                                                     }
                                                 }),
-                                                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+                                                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", {
                                                     style: {
                                                         position: "absolute",
                                                         top: 0,
@@ -7148,7 +8353,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
                                                         transition: "width 0.1s ease-out"
                                                     }
                                                 }),
-                                                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+                                                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", {
                                                     style: {
                                                         position: "absolute",
                                                         top: "50%",
@@ -7167,7 +8372,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
                                     })
                                 ]
                             }),
-                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+                            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", {
                                 className: "sc-ctrl-btn",
                                 onClick: function onClick() {
                                     if (onFullscreenToggle) {
@@ -7189,15 +8394,15 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
                                     background: "rgba(0, 0, 0, 0.6)"
                                 },
                                 title: isFullscreen ? "Exit Fullscreen" : "Enter Fullscreen",
-                                children: isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fa.FaCompress, {
+                                children: isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_fa.FaCompress, {
                                     size: Math.max(14, 18 * responsiveScale)
-                                }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fa.FaExpand, {
+                                }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_fa.FaExpand, {
                                     size: Math.max(14, 18 * responsiveScale)
                                 })
                             })
                         ]
                     }),
-                    onControlClick && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+                    onControlClick && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", {
                         onClick: onControlClick,
                         style: {
                             position: "absolute",
@@ -7248,7 +8453,8 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
         "playsInline",
         "preload",
         "poster",
-        "children"
+        "children",
+        "swirlProjectId"
     ];
     var _iteratorNormalCompletion1 = true, _didIteratorError1 = false, _iteratorError1 = undefined;
     try {