stormcloud-video-player 0.7.8 → 0.7.10

package/lib/index.js

@@ -367,7 +367,7 @@ function _ts_values(o) {
     throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
 }
 // src/ui/StormcloudVideoPlayer.tsx
-import React2, { useEffect as useEffect2, useRef as useRef2, useMemo, useCallback as useCallback2 } from "react";
+import React2, { useEffect as useEffect2, useRef as useRef2, useMemo as useMemo2, useCallback as useCallback2 } from "react";
 // src/player/StormcloudVideoPlayer.ts
 import Hls from "hls.js";
 // src/sdk/vastParser.ts
@@ -6016,7 +6016,7 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
 // src/ui/StormcloudVideoPlayer.tsx
 import { FaPlay, FaPause, FaVolumeUp, FaVolumeMute, FaVolumeDown, FaExpand, FaCompress, FaCog, FaTimes } from "react-icons/fa";
 // src/ui/OverlayRenderer.tsx
-import React, { useEffect, useRef, useState, useCallback } from "react";
+import React, { useEffect, useRef, useState, useCallback, useMemo } from "react";
 // src/utils/overlays.ts
 var OVERLAY_API_BASE = "https://adstorm.co/api-adstorm-dev";
 function timeStringToSeconds(timeStr) {
@@ -6341,15 +6341,38 @@ function ScoreBugOverlay(param) {
                     })
                 ]
             }),
-            cfg.sponsorText && /* @__PURE__ */ jsx("div", {
+            (cfg.sponsorText || cfg.sponsorImageUrl) && /* @__PURE__ */ 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__ */ jsx("img", {
+                        src: cfg.sponsorImageUrl,
+                        alt: "sponsor",
+                        style: {
+                            height: "".concat(f * 1.4, "px"),
+                            objectFit: "contain",
+                            flexShrink: 0
+                        }
+                    }),
+                    cfg.sponsorText && /* @__PURE__ */ jsx("span", {
+                        style: {
+                            overflow: "hidden",
+                            textOverflow: "ellipsis",
+                            whiteSpace: "nowrap"
+                        },
+                        children: cfg.sponsorText
+                    })
+                ]
             })
         ]
     });
@@ -6411,13 +6434,35 @@ function LowerThirdOverlay(param) {
                     })
                 ]
             }),
-            cfg.sponsorText && /* @__PURE__ */ jsx("div", {
+            (cfg.sponsorText || cfg.sponsorImageUrl) && /* @__PURE__ */ 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__ */ jsx("img", {
+                        src: cfg.sponsorImageUrl,
+                        alt: "sponsor",
+                        style: {
+                            height: "".concat(f * 1.4, "px"),
+                            objectFit: "contain",
+                            flexShrink: 0
+                        }
+                    }),
+                    cfg.sponsorText && /* @__PURE__ */ jsx("span", {
+                        style: {
+                            overflow: "hidden",
+                            textOverflow: "ellipsis",
+                            whiteSpace: "nowrap"
+                        },
+                        children: cfg.sponsorText
+                    })
+                ]
             })
         ]
     });
@@ -6574,6 +6619,23 @@ function ComingUpNextOverlay(param) {
                         children: cfg.scheduledTime
                     })
                 ]
+            }),
+            cfg.thumbnailUrl && /* @__PURE__ */ jsx("div", {
+                style: {
+                    flexShrink: 0,
+                    width: Math.max(40, size.h * 0.75),
+                    overflow: "hidden"
+                },
+                children: /* @__PURE__ */ jsx("img", {
+                    src: cfg.thumbnailUrl,
+                    alt: "thumbnail",
+                    style: {
+                        width: "100%",
+                        height: "100%",
+                        objectFit: "cover",
+                        display: "block"
+                    }
+                })
             })
         ]
     });
@@ -6809,35 +6871,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 _useState = _sliced_to_array(useState({
-        d: 0,
-        h: 0,
-        m: 0,
-        s: 0
+    var targetTime = (_ref = cfg === null || cfg === void 0 ? void 0 : cfg.targetTime) !== null && _ref !== void 0 ? _ref : "";
+    var _useState = _sliced_to_array(useState(function() {
+        return targetTime ? calcCountdownRemaining(targetTime) : {
+            d: 0,
+            h: 0,
+            m: 0,
+            s: 0,
+            expired: false
+        };
     }), 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);
+        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);
@@ -6896,7 +6964,14 @@ function CountdownOverlay(param) {
                 },
                 children: cfg.eventName
             }),
-            /* @__PURE__ */ jsx("div", {
+            remaining.expired ? /* @__PURE__ */ jsx("div", {
+                style: {
+                    fontSize: "1em",
+                    fontWeight: 700,
+                    opacity: 0.6
+                },
+                children: cfg.message || "Event ended"
+            }) : /* @__PURE__ */ jsx("div", {
                 style: {
                     display: "flex",
                     gap: f * 0.6,
@@ -6945,7 +7020,7 @@ function CountdownOverlay(param) {
                     }, u.label);
                 })
             }),
-            cfg.message && /* @__PURE__ */ jsx("div", {
+            !remaining.expired && cfg.message && /* @__PURE__ */ jsx("div", {
                 style: {
                     fontSize: "0.8em",
                     opacity: 0.6,
@@ -6990,10 +7065,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 _useState = _sliced_to_array(useState(null), 2), dims = _useState[0], setDims = _useState[1];
     var rafRef = useRef(null);
+    var _useState1 = _sliced_to_array(useState(/* @__PURE__ */ new Map()), 2), fadeMap = _useState1[0], setFadeMap = _useState1[1];
+    var removeTimers = useRef(/* @__PURE__ */ new Map());
     var updateDims = useCallback(function() {
         var video = videoRef.current;
         if (video) {
@@ -7024,10 +7102,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 = useMemo(function() {
+        return overlays.filter(function(o) {
+            return isOverlayActive(o, currentTime);
+        });
+    }, [
+        overlays,
+        currentTime
+    ]);
+    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
+    ]);
+    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
+    ]);
+    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__ */ jsx("div", {
         "aria-hidden": "true",
         style: {
@@ -7040,14 +7289,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
@@ -7060,6 +7311,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"
                 },
@@ -7329,7 +7581,7 @@ var StormcloudVideoPlayerComponent = React2.memo(function(props) {
     var debugPanelBottomOffset = shouldShowEnhancedControls ? Math.max(74, 92 * responsiveScale) : Math.max(52, 58 * responsiveScale);
     var panelBaseRight = PANEL_BASE_RIGHT_OFFSET * responsiveScale;
     var debugPanelRightOffset = showAiPanel && !shouldStackPanels ? panelBaseRight + analyzerPanelWidth + panelGap : panelBaseRight;
-    var criticalPropsKey = useMemo(function() {
+    var criticalPropsKey = useMemo2(function() {
         return CRITICAL_PROPS.map(function(prop) {
             return "".concat(prop, ":").concat(props[prop]);
         }).join("|");