stormcloud-video-player 0.7.9 → 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;
@@ -1133,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) {
@@ -1167,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: {
@@ -1183,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
@@ -1203,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"
                 },