stormcloud-video-player 0.7.47 → 0.7.49

package/lib/ui/OverlayRenderer.cjs

@@ -913,11 +913,62 @@ function parseConfig(content) {
         return null;
     }
 }
+function parseClockMMSS(clock) {
+    if (!clock) return null;
+    var m = /^\s*(\d{1,3}):([0-5]?\d)\s*$/.exec(clock);
+    if (!m) return null;
+    return parseInt(m[1], 10) * 60 + parseInt(m[2], 10);
+}
+function formatClockMMSS(totalSec) {
+    var s = Math.max(0, Math.floor(totalSec));
+    var mm = Math.floor(s / 60);
+    var ss = s % 60;
+    return "".concat(mm, ":").concat(ss.toString().padStart(2, "0"));
+}
+function useScoreBugClock(overlayId, sourceClock) {
+    var initialSec = parseClockMMSS(sourceClock);
+    var _ref = _sliced_to_array((0, import_react.useState)(function() {
+        return Date.now();
+    }), 2), now = _ref[0], setNow = _ref[1];
+    var startRef = (0, import_react.useRef)(null);
+    (0, import_react.useEffect)(function() {
+        if (initialSec === null) {
+            startRef.current = null;
+            return;
+        }
+        startRef.current = {
+            id: overlayId,
+            source: sourceClock || "",
+            at: Date.now(),
+            seconds: initialSec
+        };
+        setNow(Date.now());
+        var tick = window.setInterval(function() {
+            return setNow(Date.now());
+        }, 500);
+        return function() {
+            return clearInterval(tick);
+        };
+    }, [
+        overlayId,
+        sourceClock,
+        initialSec
+    ]);
+    if (initialSec === null || !startRef.current) return null;
+    var elapsed = Math.floor((now - startRef.current.at) / 1e3);
+    var remaining = Math.max(0, startRef.current.seconds - elapsed);
+    return formatClockMMSS(remaining);
+}
 function ScoreBugOverlay(param) {
     var overlay = param.overlay, size = param.size;
+    var _ref, _cfg_period;
     var cfg = parseConfig(overlay.content);
+    var liveClock = useScoreBugClock(overlay.id, cfg === null || cfg === void 0 ? void 0 : cfg.clock);
     if (!cfg) return null;
     var f = Math.max(6, size.w * 0.052);
+    var displayClock = (_ref = liveClock !== null && liveClock !== void 0 ? liveClock : cfg.clock) !== null && _ref !== void 0 ? _ref : "";
+    var displayPeriod = (_cfg_period = cfg.period) !== null && _cfg_period !== void 0 ? _cfg_period : "";
+    var showMiddleCol = Boolean(displayPeriod || displayClock);
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
         style: {
             width: "100%",
@@ -975,7 +1026,7 @@ function ScoreBugOverlay(param) {
                             })
                         ]
                     }),
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+                    showMiddleCol && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
                         style: {
                             fontSize: "0.88em",
                             textAlign: "center",
@@ -989,15 +1040,15 @@ function ScoreBugOverlay(param) {
                             letterSpacing: "0.04em"
                         },
                         children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-                                children: cfg.period
+                            displayPeriod && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+                                children: displayPeriod
                             }),
-                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+                            displayClock && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
                                 style: {
                                     fontWeight: 700,
                                     opacity: 1
                                 },
-                                children: cfg.clock
+                                children: displayClock
                             })
                         ]
                     }),
@@ -1780,6 +1831,43 @@ function hexToRgb(hex) {
     return "".concat(num >> 16 & 255, ",").concat(num >> 8 & 255, ",").concat(num & 255);
 }
 var FADE_DURATION_MS = 1e3;
+var VALID_ENTER_ANIMATIONS = /* @__PURE__ */ new Set([
+    "fade",
+    "slide_left",
+    "slide_right",
+    "slide_up",
+    "slide_down"
+]);
+function getEnterAnimation(overlay) {
+    var flat = overlay.enter_animation;
+    if (typeof flat === "string" && VALID_ENTER_ANIMATIONS.has(flat)) {
+        return flat;
+    }
+    if (overlay.content) {
+        try {
+            var parsed = JSON.parse(overlay.content);
+            var v = parsed === null || parsed === void 0 ? void 0 : parsed.enterAnimation;
+            if (typeof v === "string" && VALID_ENTER_ANIMATIONS.has(v)) {
+                return v;
+            }
+        } catch (unused) {}
+    }
+    return "fade";
+}
+function enterHiddenTransform(anim) {
+    switch(anim){
+        case "slide_left":
+            return "translateX(-120%)";
+        case "slide_right":
+            return "translateX(120%)";
+        case "slide_up":
+            return "translateY(-120%)";
+        case "slide_down":
+            return "translateY(120%)";
+        default:
+            return "";
+    }
+}
 var SHOWCASE_CYCLE_MS_DEFAULT = 36e3;
 var SHOWCASE_MIN_BEAT_MS = 6e3;
 var BEAT_POP_IN_MS = 520;
@@ -1792,7 +1880,8 @@ var SHOWCASE_PERSISTENT_TYPES = /* @__PURE__ */ new Set([
     "shape",
     "countdown",
     "qr_code",
-    "coming_up_next"
+    "coming_up_next",
+    "score_bug"
 ]);
 function easeOutCubic(t) {
     var u = 1 - t;
@@ -2201,6 +2290,14 @@ var OverlayRenderer = function OverlayRenderer(param) {
                 w: width,
                 h: height
             };
+            var enterAnim = getEnterAnimation(overlay);
+            var hasSlide = enterAnim !== "fade" && !useShowcasePop;
+            var slideTransform = hasSlide && !visible ? enterHiddenTransform(enterAnim) : "";
+            var popTransform = showcaseMode && useShowcasePop ? "scale(".concat(popScale, ")") : "";
+            var combinedTransform = [
+                slideTransform,
+                popTransform
+            ].filter(Boolean).join(" ");
             return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
                 style: {
                     position: "absolute",
@@ -2209,8 +2306,8 @@ var OverlayRenderer = function OverlayRenderer(param) {
                     width: "".concat(width, "px"),
                     height: "".concat(height, "px"),
                     opacity: opacity,
-                    transition: useShowcasePop ? "none" : "opacity ".concat(FADE_DURATION_MS, "ms ease"),
-                    transform: showcaseMode && useShowcasePop ? "scale(".concat(popScale, ")") : void 0,
+                    transition: useShowcasePop ? "none" : hasSlide ? "opacity ".concat(FADE_DURATION_MS, "ms ease, transform ").concat(FADE_DURATION_MS, "ms cubic-bezier(0.22, 1, 0.36, 1)") : "opacity ".concat(FADE_DURATION_MS, "ms ease"),
+                    transform: combinedTransform || void 0,
                     transformOrigin: showcaseMode && useShowcasePop ? "center center" : void 0,
                     zIndex: overlay.z_index,
                     overflow: "hidden"