stormcloud-video-player 0.7.8 → 0.7.10

package/lib/ui/OverlayRenderer.cjs

@@ -7,6 +7,25 @@ function _array_like_to_array(arr, len) {
 function _array_with_holes(arr) {
     if (Array.isArray(arr)) return arr;
 }
+function _array_without_holes(arr) {
+    if (Array.isArray(arr)) return _array_like_to_array(arr);
+}
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _iterable_to_array(iter) {
+    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
 function _iterable_to_array_limit(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
@@ -34,9 +53,54 @@ function _iterable_to_array_limit(arr, i) {
 function _non_iterable_rest() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
+function _non_iterable_spread() {
+    throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
 function _sliced_to_array(arr, i) {
     return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
 }
+function _to_consumable_array(arr) {
+    return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array(arr) || _non_iterable_spread();
+}
 function _type_of(obj) {
     "@swc/helpers - typeof";
     return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
@@ -409,15 +473,38 @@ function ScoreBugOverlay(param) {
                     })
                 ]
             }),
-            cfg.sponsorText && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+            (cfg.sponsorText || cfg.sponsorImageUrl) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
                 style: {
                     fontSize: "0.7em",
                     textAlign: "center",
-                    opacity: 0.5,
-                    padding: "".concat(f * 0.2, "px 0"),
-                    borderTop: "1px solid ".concat(cfg.accentColor, "40")
+                    opacity: 0.6,
+                    padding: "".concat(f * 0.2, "px ").concat(f * 0.4, "px"),
+                    borderTop: "1px solid ".concat(cfg.accentColor, "40"),
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    gap: f * 0.4,
+                    overflow: "hidden"
                 },
-                children: cfg.sponsorText
+                children: [
+                    cfg.sponsorImageUrl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", {
+                        src: cfg.sponsorImageUrl,
+                        alt: "sponsor",
+                        style: {
+                            height: "".concat(f * 1.4, "px"),
+                            objectFit: "contain",
+                            flexShrink: 0
+                        }
+                    }),
+                    cfg.sponsorText && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+                        style: {
+                            overflow: "hidden",
+                            textOverflow: "ellipsis",
+                            whiteSpace: "nowrap"
+                        },
+                        children: cfg.sponsorText
+                    })
+                ]
             })
         ]
     });
@@ -479,13 +566,35 @@ function LowerThirdOverlay(param) {
                     })
                 ]
             }),
-            cfg.sponsorText && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+            (cfg.sponsorText || cfg.sponsorImageUrl) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
                 style: {
                     fontSize: "0.7em",
-                    opacity: 0.4,
-                    padding: "0 ".concat(f * 1.2, "px ").concat(f * 0.4, "px")
+                    opacity: 0.5,
+                    padding: "0 ".concat(f * 1.2, "px ").concat(f * 0.4, "px"),
+                    display: "flex",
+                    alignItems: "center",
+                    gap: f * 0.4,
+                    overflow: "hidden"
                 },
-                children: cfg.sponsorText
+                children: [
+                    cfg.sponsorImageUrl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", {
+                        src: cfg.sponsorImageUrl,
+                        alt: "sponsor",
+                        style: {
+                            height: "".concat(f * 1.4, "px"),
+                            objectFit: "contain",
+                            flexShrink: 0
+                        }
+                    }),
+                    cfg.sponsorText && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+                        style: {
+                            overflow: "hidden",
+                            textOverflow: "ellipsis",
+                            whiteSpace: "nowrap"
+                        },
+                        children: cfg.sponsorText
+                    })
+                ]
             })
         ]
     });
@@ -642,6 +751,23 @@ function ComingUpNextOverlay(param) {
                         children: cfg.scheduledTime
                     })
                 ]
+            }),
+            cfg.thumbnailUrl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+                style: {
+                    flexShrink: 0,
+                    width: Math.max(40, size.h * 0.75),
+                    overflow: "hidden"
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", {
+                    src: cfg.thumbnailUrl,
+                    alt: "thumbnail",
+                    style: {
+                        width: "100%",
+                        height: "100%",
+                        objectFit: "cover",
+                        display: "block"
+                    }
+                })
             })
         ]
     });
@@ -877,35 +1003,41 @@ function BreakingNewsOverlay(param) {
         ]
     });
 }
+function calcCountdownRemaining(targetTime) {
+    var diff = Math.max(0, new Date(targetTime).getTime() - Date.now());
+    return {
+        d: Math.floor(diff / 864e5),
+        h: Math.floor(diff % 864e5 / 36e5),
+        m: Math.floor(diff % 36e5 / 6e4),
+        s: Math.floor(diff % 6e4 / 1e3),
+        expired: diff === 0
+    };
+}
 function CountdownOverlay(param) {
     var overlay = param.overlay, size = param.size;
+    var _ref;
     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)
-            });
+    var targetTime = (_ref = cfg === null || cfg === void 0 ? void 0 : cfg.targetTime) !== null && _ref !== void 0 ? _ref : "";
+    var _ref1 = _sliced_to_array((0, import_react.useState)(function() {
+        return targetTime ? calcCountdownRemaining(targetTime) : {
+            d: 0,
+            h: 0,
+            m: 0,
+            s: 0,
+            expired: false
         };
-        update();
-        var id = setInterval(update, 1e3);
+    }), 2), remaining = _ref1[0], setRemaining = _ref1[1];
+    (0, import_react.useEffect)(function() {
+        if (!targetTime) return;
+        setRemaining(calcCountdownRemaining(targetTime));
+        var id = setInterval(function() {
+            return setRemaining(calcCountdownRemaining(targetTime));
+        }, 1e3);
         return function() {
             return clearInterval(id);
         };
     }, [
-        cfg === null || cfg === void 0 ? void 0 : cfg.targetTime
+        targetTime
     ]);
     if (!cfg) return null;
     var f = Math.max(6, size.w * 0.055);
@@ -964,7 +1096,14 @@ function CountdownOverlay(param) {
                 },
                 children: cfg.eventName
             }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+            remaining.expired ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+                style: {
+                    fontSize: "1em",
+                    fontWeight: 700,
+                    opacity: 0.6
+                },
+                children: cfg.message || "Event ended"
+            }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
                 style: {
                     display: "flex",
                     gap: f * 0.6,
@@ -1013,7 +1152,7 @@ function CountdownOverlay(param) {
                     }, u.label);
                 })
             }),
-            cfg.message && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+            !remaining.expired && cfg.message && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
                 style: {
                     fontSize: "0.8em",
                     opacity: 0.6,
@@ -1058,10 +1197,13 @@ function hexToRgb(hex) {
     var num = parseInt(clean.length === 3 ? clean.replace(/./g, "$&$&") : clean, 16);
     return "".concat(num >> 16 & 255, ",").concat(num >> 8 & 255, ",").concat(num & 255);
 }
+var FADE_DURATION_MS = 1e3;
 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 _ref1 = _sliced_to_array((0, import_react.useState)(/* @__PURE__ */ new Map()), 2), fadeMap = _ref1[0], setFadeMap = _ref1[1];
+    var removeTimers = (0, import_react.useRef)(/* @__PURE__ */ new Map());
     var updateDims = (0, import_react.useCallback)(function() {
         var video = videoRef.current;
         if (video) {
@@ -1092,10 +1234,181 @@ var OverlayRenderer = function OverlayRenderer(param) {
     }, [
         updateDims
     ]);
-    var activeOverlays = overlays.filter(function(o) {
-        return isOverlayActive(o, currentTime);
-    });
-    if (!dims || activeOverlays.length === 0) return null;
+    var activeOverlays = (0, import_react.useMemo)(function() {
+        return overlays.filter(function(o) {
+            return isOverlayActive(o, currentTime);
+        });
+    }, [
+        overlays,
+        currentTime
+    ]);
+    (0, import_react.useEffect)(function() {
+        var activeIds = new Set(activeOverlays.map(function(o) {
+            return o.id;
+        }));
+        setFadeMap(function(prev) {
+            var next = new Map(prev);
+            var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
+            try {
+                for(var _iterator = activeOverlays[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
+                    var overlay = _step.value;
+                    if (!next.has(overlay.id)) {
+                        next.set(overlay.id, {
+                            overlay: overlay,
+                            visible: false
+                        });
+                    } else {
+                        var existing = next.get(overlay.id);
+                        next.set(overlay.id, _object_spread_props(_object_spread({}, existing), {
+                            overlay: overlay
+                        }));
+                    }
+                }
+            } catch (err) {
+                _didIteratorError = true;
+                _iteratorError = err;
+            } finally{
+                try {
+                    if (!_iteratorNormalCompletion && _iterator.return != null) {
+                        _iterator.return();
+                    }
+                } finally{
+                    if (_didIteratorError) {
+                        throw _iteratorError;
+                    }
+                }
+            }
+            var _iteratorNormalCompletion1 = true, _didIteratorError1 = false, _iteratorError1 = undefined;
+            try {
+                var _loop = function() {
+                    var _step_value = _sliced_to_array(_step1.value, 2), id = _step_value[0], state = _step_value[1];
+                    if (!activeIds.has(id) && state.visible) {
+                        next.set(id, _object_spread_props(_object_spread({}, state), {
+                            visible: false
+                        }));
+                        if (!removeTimers.current.has(id)) {
+                            var timer = setTimeout(function() {
+                                setFadeMap(function(m) {
+                                    var updated = new Map(m);
+                                    updated.delete(id);
+                                    return updated;
+                                });
+                                removeTimers.current.delete(id);
+                            }, FADE_DURATION_MS);
+                            removeTimers.current.set(id, timer);
+                        }
+                    } else if (!activeIds.has(id) && !state.visible) {}
+                };
+                for(var _iterator1 = next[Symbol.iterator](), _step1; !(_iteratorNormalCompletion1 = (_step1 = _iterator1.next()).done); _iteratorNormalCompletion1 = true)_loop();
+            } catch (err) {
+                _didIteratorError1 = true;
+                _iteratorError1 = err;
+            } finally{
+                try {
+                    if (!_iteratorNormalCompletion1 && _iterator1.return != null) {
+                        _iterator1.return();
+                    }
+                } finally{
+                    if (_didIteratorError1) {
+                        throw _iteratorError1;
+                    }
+                }
+            }
+            return next;
+        });
+    }, [
+        activeOverlays
+    ]);
+    (0, import_react.useEffect)(function() {
+        var toFadeIn = [];
+        var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
+        try {
+            var _loop = function() {
+                var _step_value = _sliced_to_array(_step.value, 2), id = _step_value[0], state = _step_value[1];
+                if (!state.visible) {
+                    var isActive = activeOverlays.some(function(o) {
+                        return o.id === id;
+                    });
+                    if (isActive) toFadeIn.push(id);
+                }
+            };
+            for(var _iterator = fadeMap[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true)_loop();
+        } catch (err) {
+            _didIteratorError = true;
+            _iteratorError = err;
+        } finally{
+            try {
+                if (!_iteratorNormalCompletion && _iterator.return != null) {
+                    _iterator.return();
+                }
+            } finally{
+                if (_didIteratorError) {
+                    throw _iteratorError;
+                }
+            }
+        }
+        if (toFadeIn.length === 0) return;
+        var raf = requestAnimationFrame(function() {
+            setFadeMap(function(prev) {
+                var next = new Map(prev);
+                var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
+                try {
+                    for(var _iterator = toFadeIn[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
+                        var id = _step.value;
+                        var state = next.get(id);
+                        if (state) next.set(id, _object_spread_props(_object_spread({}, state), {
+                            visible: true
+                        }));
+                    }
+                } catch (err) {
+                    _didIteratorError = true;
+                    _iteratorError = err;
+                } finally{
+                    try {
+                        if (!_iteratorNormalCompletion && _iterator.return != null) {
+                            _iterator.return();
+                        }
+                    } finally{
+                        if (_didIteratorError) {
+                            throw _iteratorError;
+                        }
+                    }
+                }
+                return next;
+            });
+        });
+        return function() {
+            return cancelAnimationFrame(raf);
+        };
+    }, [
+        fadeMap,
+        activeOverlays
+    ]);
+    (0, import_react.useEffect)(function() {
+        return function() {
+            var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
+            try {
+                for(var _iterator = removeTimers.current.values()[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
+                    var timer = _step.value;
+                    clearTimeout(timer);
+                }
+            } catch (err) {
+                _didIteratorError = true;
+                _iteratorError = err;
+            } finally{
+                try {
+                    if (!_iteratorNormalCompletion && _iterator.return != null) {
+                        _iterator.return();
+                    }
+                } finally{
+                    if (_didIteratorError) {
+                        throw _iteratorError;
+                    }
+                }
+            }
+        };
+    }, []);
+    if (!dims || fadeMap.size === 0) return null;
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
         "aria-hidden": "true",
         style: {
@@ -1108,14 +1421,16 @@ var OverlayRenderer = function OverlayRenderer(param) {
             overflow: "hidden",
             zIndex: 8
         },
-        children: activeOverlays.map(function(overlay) {
+        children: _to_consumable_array(fadeMap.values()).map(function(param) {
+            var overlay = param.overlay, visible = param.visible;
             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 baseOpacity = Math.max(0, Math.min(100, overlay.opacity)) / 100;
+            var opacity = visible ? baseOpacity : 0;
             var sz = {
                 w: width,
                 h: height
@@ -1128,6 +1443,7 @@ var OverlayRenderer = function OverlayRenderer(param) {
                     width: "".concat(width, "px"),
                     height: "".concat(height, "px"),
                     opacity: opacity,
+                    transition: "opacity ".concat(FADE_DURATION_MS, "ms ease"),
                     zIndex: overlay.z_index,
                     overflow: "hidden"
                 },