stormcloud-video-player 0.7.0 → 0.7.2

package/lib/index.js

@@ -6133,9 +6133,9 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
     return StormcloudVideoPlayer;
 }();
 // src/ui/StormcloudVideoPlayer.tsx
-import { FaPlay, FaPause, FaVolumeUp, FaVolumeMute, FaVolumeDown, FaExpand, FaCompress, FaSpinner } from "react-icons/fa";
+import { FaPlay, FaPause, FaVolumeUp, FaVolumeMute, FaVolumeDown, FaExpand, FaCompress } from "react-icons/fa";
 // src/ui/OverlayRenderer.tsx
-import { useEffect, useRef, useState, useCallback } from "react";
+import React, { useEffect, useRef, useState, useCallback } from "react";
 // src/utils/overlays.ts
 var OVERLAY_API_BASE = "https://adstorm.co/api-adstorm-dev";
 function timeStringToSeconds(timeStr) {
@@ -6358,6 +6358,751 @@ function ScrollerOverlay(param) {
         ]
     });
 }
+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__ */ 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__ */ jsxs("div", {
+                style: {
+                    flex: 1,
+                    display: "flex",
+                    alignItems: "center",
+                    padding: "0 ".concat(f * 0.8, "px"),
+                    gap: f * 0.4
+                },
+                children: [
+                    /* @__PURE__ */ jsxs("div", {
+                        style: {
+                            flex: 1,
+                            textAlign: "center"
+                        },
+                        children: [
+                            /* @__PURE__ */ jsx("div", {
+                                style: {
+                                    fontSize: "1em",
+                                    fontWeight: 700
+                                },
+                                children: cfg.homeTeam
+                            }),
+                            /* @__PURE__ */ jsx("div", {
+                                style: {
+                                    fontSize: "1.8em",
+                                    fontWeight: 900,
+                                    lineHeight: 1
+                                },
+                                children: cfg.homeScore
+                            })
+                        ]
+                    }),
+                    /* @__PURE__ */ jsxs("div", {
+                        style: {
+                            fontSize: "0.8em",
+                            textAlign: "center",
+                            opacity: 0.7,
+                            padding: "0 ".concat(f * 0.4, "px")
+                        },
+                        children: [
+                            /* @__PURE__ */ jsx("div", {
+                                children: cfg.period
+                            }),
+                            /* @__PURE__ */ jsx("div", {
+                                children: cfg.clock
+                            })
+                        ]
+                    }),
+                    /* @__PURE__ */ jsxs("div", {
+                        style: {
+                            flex: 1,
+                            textAlign: "center"
+                        },
+                        children: [
+                            /* @__PURE__ */ jsx("div", {
+                                style: {
+                                    fontSize: "1em",
+                                    fontWeight: 700
+                                },
+                                children: cfg.awayTeam
+                            }),
+                            /* @__PURE__ */ jsx("div", {
+                                style: {
+                                    fontSize: "1.8em",
+                                    fontWeight: 900,
+                                    lineHeight: 1
+                                },
+                                children: cfg.awayScore
+                            })
+                        ]
+                    })
+                ]
+            }),
+            cfg.sponsorText && /* @__PURE__ */ 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__ */ 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__ */ jsx("div", {
+                style: {
+                    width: "100%",
+                    height: Math.max(2, size.h * 0.06),
+                    backgroundColor: cfg.accentColor
+                }
+            }),
+            /* @__PURE__ */ jsxs("div", {
+                style: {
+                    flex: 1,
+                    display: "flex",
+                    flexDirection: "column",
+                    justifyContent: "center",
+                    padding: "".concat(f * 0.5, "px ").concat(f * 1.2, "px")
+                },
+                children: [
+                    /* @__PURE__ */ 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__ */ jsx("div", {
+                        style: {
+                            fontSize: "1em",
+                            opacity: 0.7,
+                            marginTop: f * 0.2
+                        },
+                        children: cfg.subtitle
+                    })
+                ]
+            }),
+            cfg.sponsorText && /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx("img", {
+                    src: qrUrl,
+                    alt: "QR Code",
+                    style: {
+                        width: "".concat(qrSide, "px"),
+                        height: "".concat(qrSide, "px"),
+                        display: "block"
+                    }
+                })
+            }),
+            /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx("div", {
+                style: {
+                    width: Math.max(2, size.w * 0.015),
+                    flexShrink: 0,
+                    backgroundColor: cfg.accentColor
+                }
+            }),
+            /* @__PURE__ */ 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__ */ jsx("div", {
+                        style: {
+                            fontSize: "0.8em",
+                            fontWeight: 600,
+                            textTransform: "uppercase",
+                            letterSpacing: "0.05em",
+                            color: cfg.accentColor
+                        },
+                        children: "Coming Up Next"
+                    }),
+                    /* @__PURE__ */ 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__ */ jsx("div", {
+                        style: {
+                            fontSize: "0.9em",
+                            opacity: 0.6,
+                            overflow: "hidden",
+                            textOverflow: "ellipsis",
+                            whiteSpace: "nowrap"
+                        },
+                        children: cfg.subtitle
+                    }),
+                    cfg.scheduledTime && /* @__PURE__ */ 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__ */ 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__ */ jsx("span", {
+                style: {
+                    fontSize: "2em",
+                    flexShrink: 0
+                },
+                children: icons[cfg.iconType] || "\u26A1"
+            }),
+            /* @__PURE__ */ jsxs("div", {
+                style: {
+                    flex: 1,
+                    minWidth: 0
+                },
+                children: [
+                    /* @__PURE__ */ jsx("div", {
+                        style: {
+                            fontSize: "1.3em",
+                            fontWeight: 700,
+                            overflow: "hidden",
+                            textOverflow: "ellipsis",
+                            whiteSpace: "nowrap"
+                        },
+                        children: cfg.headline
+                    }),
+                    /* @__PURE__ */ 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__ */ 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__ */ jsx("div", {
+                style: {
+                    fontSize: "0.9em",
+                    fontWeight: 700,
+                    textTransform: "uppercase",
+                    letterSpacing: "0.05em",
+                    color: cfg.accentColor,
+                    marginBottom: f * 0.4
+                },
+                children: cfg.eventTitle
+            }),
+            /* @__PURE__ */ 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__ */ 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__ */ jsx("span", {
+                                style: {
+                                    overflow: "hidden",
+                                    textOverflow: "ellipsis",
+                                    whiteSpace: "nowrap",
+                                    flex: 1
+                                },
+                                children: opt.label
+                            }),
+                            /* @__PURE__ */ jsx("span", {
+                                style: {
+                                    fontWeight: 700,
+                                    marginLeft: f * 0.8,
+                                    flexShrink: 0,
+                                    color: cfg.accentColor
+                                },
+                                children: opt.odds
+                            })
+                        ]
+                    }, i);
+                })
+            }),
+            cfg.sponsorText && /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsxs("div", {
+                style: {
+                    flex: 1,
+                    padding: "0 ".concat(f * 1, "px"),
+                    minWidth: 0
+                },
+                children: [
+                    /* @__PURE__ */ jsx("div", {
+                        style: {
+                            fontSize: "1.3em",
+                            fontWeight: 700,
+                            overflow: "hidden",
+                            textOverflow: "ellipsis",
+                            whiteSpace: "nowrap"
+                        },
+                        children: cfg.headline
+                    }),
+                    cfg.body && /* @__PURE__ */ 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 _useState = _sliced_to_array(useState({
+        d: 0,
+        h: 0,
+        m: 0,
+        s: 0
+    }), 2), remaining = _useState[0], setRemaining = _useState[1];
+    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__ */ 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__ */ jsx("div", {
+                style: {
+                    fontSize: "0.8em",
+                    fontWeight: 600,
+                    textTransform: "uppercase",
+                    letterSpacing: "0.05em",
+                    color: cfg.accentColor,
+                    marginBottom: f * 0.4
+                },
+                children: cfg.eventName
+            }),
+            /* @__PURE__ */ 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__ */ jsxs(React.Fragment, {
+                        children: [
+                            /* @__PURE__ */ jsxs("div", {
+                                style: {
+                                    textAlign: "center"
+                                },
+                                children: [
+                                    /* @__PURE__ */ 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__ */ jsx("div", {
+                                        style: {
+                                            fontSize: "0.5em",
+                                            opacity: 0.5,
+                                            marginTop: f * 0.2
+                                        },
+                                        children: u.label
+                                    })
+                                ]
+                            }),
+                            i < arr.length - 1 && /* @__PURE__ */ jsx("div", {
+                                style: {
+                                    fontSize: "1.8em",
+                                    fontWeight: 700,
+                                    opacity: 0.3
+                                },
+                                children: ":"
+                            })
+                        ]
+                    }, u.label);
+                })
+            }),
+            cfg.message && /* @__PURE__ */ 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__ */ 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__ */ 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);
@@ -6422,6 +7167,10 @@ var OverlayRenderer = function OverlayRenderer(param) {
             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__ */ jsxs("div", {
                 style: {
                     position: "absolute",
@@ -6442,6 +7191,42 @@ var OverlayRenderer = function OverlayRenderer(param) {
                     }),
                     overlay.type === "scroller" && /* @__PURE__ */ jsx(ScrollerOverlay, {
                         overlay: overlay
+                    }),
+                    overlay.type === "shape" && /* @__PURE__ */ jsx(ShapeOverlay, {
+                        overlay: overlay,
+                        size: sz
+                    }),
+                    overlay.type === "score_bug" && /* @__PURE__ */ jsx(ScoreBugOverlay, {
+                        overlay: overlay,
+                        size: sz
+                    }),
+                    overlay.type === "lower_third" && /* @__PURE__ */ jsx(LowerThirdOverlay, {
+                        overlay: overlay,
+                        size: sz
+                    }),
+                    overlay.type === "qr_code" && /* @__PURE__ */ jsx(QrCodeOverlay, {
+                        overlay: overlay,
+                        size: sz
+                    }),
+                    overlay.type === "coming_up_next" && /* @__PURE__ */ jsx(ComingUpNextOverlay, {
+                        overlay: overlay,
+                        size: sz
+                    }),
+                    overlay.type === "contextual_trigger" && /* @__PURE__ */ jsx(ContextualTriggerOverlay, {
+                        overlay: overlay,
+                        size: sz
+                    }),
+                    overlay.type === "odds_betting" && /* @__PURE__ */ jsx(OddsBettingOverlay, {
+                        overlay: overlay,
+                        size: sz
+                    }),
+                    overlay.type === "breaking_news" && /* @__PURE__ */ jsx(BreakingNewsOverlay, {
+                        overlay: overlay,
+                        size: sz
+                    }),
+                    overlay.type === "countdown" && /* @__PURE__ */ jsx(CountdownOverlay, {
+                        overlay: overlay,
+                        size: sz
                     })
                 ]
             }, overlay.id);
@@ -6458,6 +7243,7 @@ var CRITICAL_PROPS = [
     "driftToleranceMs"
 ];
 var CONTROLS_HIDE_DELAY = 3e3;
+var DEFAULT_PLAYER_ASPECT_RATIO = 16 / 9;
 var StormcloudVideoPlayerComponent = React2.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",
@@ -6518,6 +7304,7 @@ var StormcloudVideoPlayerComponent = React2.memo(function(props) {
     var _React2_useState17 = _sliced_to_array(React2.useState(null), 2), overlayCoordSpace = _React2_useState17[0], setOverlayCoordSpace = _React2_useState17[1];
     var _React2_useState18 = _sliced_to_array(React2.useState(typeof window !== "undefined" ? window.innerWidth : 1920), 2), viewportWidth = _React2_useState18[0], setViewportWidth = _React2_useState18[1];
     var _React2_useState19 = _sliced_to_array(React2.useState(typeof window !== "undefined" ? window.innerHeight > window.innerWidth : false), 2), isPortrait = _React2_useState19[0], setIsPortrait = _React2_useState19[1];
+    var _React2_useState20 = _sliced_to_array(React2.useState(DEFAULT_PLAYER_ASPECT_RATIO), 2), playerAspectRatio = _React2_useState20[0], setPlayerAspectRatio = _React2_useState20[1];
     var getResponsiveScale = function getResponsiveScale() {
         if (viewportWidth < 480) return 0.7;
         if (viewportWidth < 768) return 0.8;
@@ -6692,17 +7479,28 @@ var StormcloudVideoPlayerComponent = React2.memo(function(props) {
         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() {
-            if (tryResolve()) clearInterval(interval);
+            attempts++;
+            if (tryResolve() || attempts >= maxAttempts) clearInterval(interval);
         }, 300);
         return function() {
             return clearInterval(interval);
@@ -6802,6 +7600,13 @@ var StormcloudVideoPlayerComponent = React2.memo(function(props) {
     }, []);
     useEffect2(function() {
         if (!videoRef.current) return;
+        var handleLoadedMetadata = function handleLoadedMetadata() {
+            var video2 = videoRef.current;
+            if (!video2) return;
+            if (video2.videoWidth > 0 && video2.videoHeight > 0) {
+                setPlayerAspectRatio(video2.videoWidth / video2.videoHeight);
+            }
+        };
         var handleCanPlay = function handleCanPlay() {
             setIsLoading(false);
             if (bufferingTimeoutRef.current) {
@@ -6848,6 +7653,8 @@ var StormcloudVideoPlayerComponent = React2.memo(function(props) {
             setShowCenterPlay(true);
         };
         var video = videoRef.current;
+        handleLoadedMetadata();
+        video.addEventListener("loadedmetadata", handleLoadedMetadata);
         video.addEventListener("canplay", handleCanPlay);
         video.addEventListener("canplaythrough", handleCanPlayThrough);
         video.addEventListener("waiting", handleWaiting);
@@ -6862,6 +7669,7 @@ var StormcloudVideoPlayerComponent = React2.memo(function(props) {
                 clearTimeout(bufferingTimeoutRef.current);
                 bufferingTimeoutRef.current = null;
             }
+            video.removeEventListener("loadedmetadata", handleLoadedMetadata);
             video.removeEventListener("canplay", handleCanPlay);
             video.removeEventListener("canplaythrough", handleCanPlayThrough);
             video.removeEventListener("waiting", handleWaiting);
@@ -6872,6 +7680,11 @@ var StormcloudVideoPlayerComponent = React2.memo(function(props) {
     }, [
         debugAdTiming
     ]);
+    useEffect2(function() {
+        setPlayerAspectRatio(DEFAULT_PLAYER_ASPECT_RATIO);
+    }, [
+        src
+    ]);
     useEffect2(function() {
         return function() {
             if (controlsTimerRef.current) {
@@ -6897,7 +7710,7 @@ var StormcloudVideoPlayerComponent = React2.memo(function(props) {
     return /* @__PURE__ */ jsxs2(Fragment2, {
         children: [
             /* @__PURE__ */ jsx2("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            "
+                children: "\n              @keyframes sc-spin {\n                from { transform: rotate(0deg); }\n                to { transform: rotate(360deg); }\n              }\n              @keyframes sc-loading-glow {\n                0%, 100% { opacity: 0.85; transform: scale(1); }\n                50% { opacity: 1; transform: scale(1.05); }\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__ */ jsxs2("div", {
                 ref: wrapperRef,
@@ -6915,6 +7728,7 @@ var StormcloudVideoPlayerComponent = React2.memo(function(props) {
                     width: isFullscreen ? "100vw" : "100%",
                     height: isFullscreen ? "100vh" : "auto",
                     minHeight: isFullscreen ? "100vh" : "auto",
+                    aspectRatio: isFullscreen ? void 0 : playerAspectRatio,
                     maxWidth: isFullscreen ? "100vw" : "100%",
                     maxHeight: isFullscreen ? "100vh" : "none",
                     zIndex: isFullscreen ? 999999 : void 0,
@@ -6931,7 +7745,7 @@ var StormcloudVideoPlayerComponent = React2.memo(function(props) {
                             zIndex: 1,
                             display: "block",
                             width: "100%",
-                            height: isFullscreen ? "100%" : "auto",
+                            height: "100%",
                             maxWidth: "100%",
                             maxHeight: isFullscreen ? "100%" : "none",
                             objectFit: isFullscreen ? "cover" : "contain",
@@ -6951,18 +7765,44 @@ var StormcloudVideoPlayerComponent = React2.memo(function(props) {
                         videoRef: videoRef,
                         coordinateSpace: overlayCoordSpace
                     }),
-                    (isLoading || isBuffering) && !hideLoadingIndicator && /* @__PURE__ */ jsx2(FaSpinner, {
+                    (isLoading || isBuffering) && !hideLoadingIndicator && /* @__PURE__ */ jsxs2("div", {
                         className: "sc-loading-indicator",
-                        size: 40,
-                        color: "rgba(255, 255, 255, 0.85)",
                         style: {
                             position: "absolute",
-                            top: "calc(50% - 20px)",
-                            left: "calc(50% - 20px)",
+                            top: "50%",
+                            left: "50%",
+                            transform: "translate(-50%, -50%)",
                             zIndex: 20,
-                            animation: "sc-spin 0.9s linear infinite",
-                            filter: "drop-shadow(0 2px 8px rgba(0, 0, 0, 0.6))"
-                        }
+                            width: "".concat(Math.max(34, 38 * responsiveScale), "px"),
+                            height: "".concat(Math.max(34, 38 * responsiveScale), "px"),
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            animation: "sc-loading-glow 1.4s ease-in-out infinite",
+                            filter: "drop-shadow(0 6px 14px rgba(0, 0, 0, 0.55))"
+                        },
+                        children: [
+                            /* @__PURE__ */ jsx2("div", {
+                                style: {
+                                    position: "absolute",
+                                    inset: 0,
+                                    borderRadius: "50%",
+                                    border: "3px solid rgba(255, 255, 255, 0.25)",
+                                    borderTopColor: "#ff0000",
+                                    borderRightColor: "rgba(255, 255, 255, 0.85)",
+                                    animation: "sc-spin 0.8s linear infinite"
+                                }
+                            }),
+                            /* @__PURE__ */ jsx2("div", {
+                                style: {
+                                    width: "7px",
+                                    height: "7px",
+                                    borderRadius: "50%",
+                                    background: "#ff0000",
+                                    boxShadow: "0 0 10px rgba(255, 0, 0, 0.65)"
+                                }
+                            })
+                        ]
                     }),
                     showLicenseWarning && /* @__PURE__ */ jsxs2("div", {
                         style: {
@@ -7198,7 +8038,8 @@ var StormcloudVideoPlayerComponent = React2.memo(function(props) {
                                             /* @__PURE__ */ jsxs2("div", {
                                                 style: {
                                                     display: "flex",
-                                                    alignItems: "center"
+                                                    alignItems: "center",
+                                                    paddingRight: "".concat(6 * responsiveScale, "px")
                                                 },
                                                 onMouseEnter: function onMouseEnter() {
                                                     return setShowVolumeSlider(true);
@@ -7229,13 +8070,13 @@ var StormcloudVideoPlayerComponent = React2.memo(function(props) {
                                                     }),
                                                     /* @__PURE__ */ jsx2("div", {
                                                         style: {
-                                                            width: showVolumeSlider ? "".concat(62 * responsiveScale, "px") : "0px",
+                                                            width: showVolumeSlider ? "".concat(68 * responsiveScale, "px") : "0px",
                                                             overflow: "hidden",
                                                             transition: "width 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
                                                             display: "flex",
                                                             alignItems: "center",
-                                                            paddingLeft: showVolumeSlider ? "2px" : "0",
-                                                            paddingRight: showVolumeSlider ? "4px" : "0"
+                                                            paddingLeft: showVolumeSlider ? "".concat(3 * responsiveScale, "px") : "0",
+                                                            paddingRight: showVolumeSlider ? "".concat(8 * responsiveScale, "px") : "0"
                                                         },
                                                         children: /* @__PURE__ */ jsxs2("div", {
                                                             style: {
@@ -7482,7 +8323,8 @@ var StormcloudVideoPlayerComponent = React2.memo(function(props) {
                                     alignItems: "center",
                                     background: "rgba(0, 0, 0, 0.6)",
                                     borderRadius: "".concat(18 * responsiveScale, "px"),
-                                    padding: "2px"
+                                    padding: "2px",
+                                    paddingRight: "".concat(8 * responsiveScale, "px")
                                 },
                                 onMouseEnter: function onMouseEnter() {
                                     return setShowVolumeSlider(true);
@@ -7511,13 +8353,13 @@ var StormcloudVideoPlayerComponent = React2.memo(function(props) {
                                     }),
                                     /* @__PURE__ */ jsx2("div", {
                                         style: {
-                                            width: showVolumeSlider ? "".concat(62 * responsiveScale, "px") : "0px",
+                                            width: showVolumeSlider ? "".concat(68 * responsiveScale, "px") : "0px",
                                             overflow: "hidden",
                                             transition: "width 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
                                             display: "flex",
                                             alignItems: "center",
-                                            paddingLeft: showVolumeSlider ? "2px" : "0",
-                                            paddingRight: showVolumeSlider ? "6px" : "0"
+                                            paddingLeft: showVolumeSlider ? "".concat(3 * responsiveScale, "px") : "0",
+                                            paddingRight: showVolumeSlider ? "".concat(10 * responsiveScale, "px") : "0"
                                         },
                                         children: /* @__PURE__ */ jsxs2("div", {
                                             style: {