stormcloud-video-player 0.7.9 → 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) {
@@ -7065,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) {
@@ -7099,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: {
@@ -7115,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
@@ -7135,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"
                 },
@@ -7404,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("|");