stormcloud-video-player 0.7.42 → 0.7.44

package/lib/ui/OverlayRenderer.cjs

@@ -348,27 +348,16 @@ var SWIRL_HD_AUTHORING_WIDTH = 1920;
 var SWIRL_HD_AUTHORING_HEIGHT = 1080;
 var NAB_DEMO_NAME_PREFIX = "NAB Demo \u2014 ";
 function overlayAuthoringDimensions(overlay, decodeWidth, decodeHeight) {
-    if (!decodeWidth || !decodeHeight) {
+    if (overlay.name.startsWith(NAB_DEMO_NAME_PREFIX)) {
         return {
-            width: decodeWidth || SWIRL_HD_AUTHORING_WIDTH,
-            height: decodeHeight || SWIRL_HD_AUTHORING_HEIGHT
-        };
-    }
-    if (!overlay.visible) {
-        return {
-            width: decodeWidth,
-            height: decodeHeight
+            width: SWIRL_HD_AUTHORING_WIDTH,
+            height: SWIRL_HD_AUTHORING_HEIGHT
         };
     }
-    var extR = overlay.x + overlay.width;
-    var extB = overlay.y + overlay.height;
-    var EPS = 2;
-    var exceedsDecode = extR > decodeWidth + EPS || extB > decodeHeight + EPS;
-    var isNabDemo = overlay.name.startsWith(NAB_DEMO_NAME_PREFIX);
-    if (exceedsDecode && isNabDemo) {
+    if (!decodeWidth || !decodeHeight) {
         return {
-            width: SWIRL_HD_AUTHORING_WIDTH,
-            height: SWIRL_HD_AUTHORING_HEIGHT
+            width: decodeWidth || SWIRL_HD_AUTHORING_WIDTH,
+            height: decodeHeight || SWIRL_HD_AUTHORING_HEIGHT
         };
     }
     return {
@@ -1812,11 +1801,19 @@ function hexToRgb(hex) {
     return "".concat(num >> 16 & 255, ",").concat(num >> 8 & 255, ",").concat(num & 255);
 }
 var FADE_DURATION_MS = 1e3;
-var SHOWCASE_CYCLE_MS_DEFAULT = 6e4;
-var SHOWCASE_POP_IN_MS = 420;
-var SHOWCASE_STEADY_END_MS = 46e3;
-var SHOWCASE_POP_OUT_MS = 450;
-var SHOWCASE_POP_OUT_END_MS = SHOWCASE_STEADY_END_MS + SHOWCASE_POP_OUT_MS;
+var SHOWCASE_CYCLE_MS_DEFAULT = 36e3;
+var SHOWCASE_MIN_BEAT_MS = 6e3;
+var BEAT_POP_IN_MS = 520;
+var BEAT_POP_OUT_MS = 520;
+var SHOWCASE_PERSISTENT_TYPES = /* @__PURE__ */ new Set([
+    "scroller",
+    "breaking_news",
+    "image",
+    "text",
+    "shape",
+    "countdown",
+    "qr_code"
+]);
 function easeOutCubic(t) {
     var u = 1 - t;
     return 1 - u * u * u;
@@ -1829,38 +1826,108 @@ function easeOutBack(t) {
     var c3 = c1 + 1;
     return 1 + c3 * Math.pow(t - 1, 3) + c1 * Math.pow(t - 1, 2);
 }
-function showcaseOpacity(phase) {
-    if (phase < SHOWCASE_POP_IN_MS) return easeOutCubic(phase / SHOWCASE_POP_IN_MS);
-    if (phase >= SHOWCASE_STEADY_END_MS && phase < SHOWCASE_POP_OUT_END_MS) {
-        return 1 - easeInCubic((phase - SHOWCASE_STEADY_END_MS) / SHOWCASE_POP_OUT_MS);
+function beatOpacity(phase, beatMs) {
+    if (phase < BEAT_POP_IN_MS) return easeOutCubic(phase / BEAT_POP_IN_MS);
+    var holdEnd = beatMs - BEAT_POP_OUT_MS;
+    if (phase >= holdEnd) {
+        return Math.max(0, 1 - easeInCubic((phase - holdEnd) / BEAT_POP_OUT_MS));
     }
     return 1;
 }
-function showcaseScale(phase) {
-    if (phase < SHOWCASE_POP_IN_MS) {
-        return Math.min(1, 0.78 + 0.22 * easeOutBack(phase / SHOWCASE_POP_IN_MS));
+function beatScale(phase, beatMs) {
+    if (phase < BEAT_POP_IN_MS) {
+        return Math.min(1, 0.92 + 0.08 * easeOutBack(phase / BEAT_POP_IN_MS));
     }
-    if (phase >= SHOWCASE_STEADY_END_MS && phase < SHOWCASE_POP_OUT_END_MS) {
-        return 1 - 0.14 * easeInCubic((phase - SHOWCASE_STEADY_END_MS) / SHOWCASE_POP_OUT_MS);
+    var holdEnd = beatMs - BEAT_POP_OUT_MS;
+    if (phase >= holdEnd) {
+        return 1 - 0.06 * easeInCubic((phase - holdEnd) / BEAT_POP_OUT_MS);
     }
     return 1;
 }
-function useShowcasePhase(enabled, cycleMs) {
-    var _ref = _sliced_to_array((0, import_react.useState)(0), 2), phase = _ref[0], setPhase = _ref[1];
+function partitionShowcase(overlays) {
+    var visible = overlays.filter(function(o) {
+        return o.visible;
+    });
+    var persistent = [];
+    var spotlight = [];
+    var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
+    try {
+        for(var _iterator = visible[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
+            var o = _step.value;
+            if (SHOWCASE_PERSISTENT_TYPES.has(o.type)) persistent.push(o);
+            else spotlight.push(o);
+        }
+    } catch (err) {
+        _didIteratorError = true;
+        _iteratorError = err;
+    } finally{
+        try {
+            if (!_iteratorNormalCompletion && _iterator.return != null) {
+                _iterator.return();
+            }
+        } finally{
+            if (_didIteratorError) {
+                throw _iteratorError;
+            }
+        }
+    }
+    spotlight.sort(function(a, b) {
+        return a.z_index - b.z_index || a.id - b.id;
+    });
+    var beats = [];
+    var _iteratorNormalCompletion1 = true, _didIteratorError1 = false, _iteratorError1 = undefined;
+    try {
+        for(var _iterator1 = spotlight[Symbol.iterator](), _step1; !(_iteratorNormalCompletion1 = (_step1 = _iterator1.next()).done); _iteratorNormalCompletion1 = true){
+            var o1 = _step1.value;
+            beats.push([
+                o1
+            ]);
+        }
+    } catch (err) {
+        _didIteratorError1 = true;
+        _iteratorError1 = err;
+    } finally{
+        try {
+            if (!_iteratorNormalCompletion1 && _iterator1.return != null) {
+                _iterator1.return();
+            }
+        } finally{
+            if (_didIteratorError1) {
+                throw _iteratorError1;
+            }
+        }
+    }
+    return {
+        persistent: persistent,
+        beats: beats
+    };
+}
+function useShowcaseBeat(enabled, cycleMs, beats) {
+    var safeBeats = Math.max(1, beats);
+    var beatMs = Math.max(SHOWCASE_MIN_BEAT_MS, Math.floor(cycleMs / safeBeats));
+    var totalMs = beatMs * safeBeats;
+    var _ref = _sliced_to_array((0, import_react.useState)(function() {
+        return Date.now();
+    }), 2), now = _ref[0], setNow = _ref[1];
     (0, import_react.useEffect)(function() {
         if (!enabled) return;
-        setPhase(Date.now() % cycleMs);
         var id = window.setInterval(function() {
-            setPhase(Date.now() % cycleMs);
-        }, 48);
+            return setNow(Date.now());
+        }, 64);
         return function() {
             return clearInterval(id);
         };
     }, [
-        enabled,
-        cycleMs
+        enabled
     ]);
-    return phase;
+    var phase = now % totalMs;
+    var beatIndex = Math.min(safeBeats - 1, Math.floor(phase / beatMs));
+    var beatPhase = phase - beatIndex * beatMs;
+    return {
+        beatIndex: beatIndex,
+        beatPhase: beatPhase,
+        beatMs: beatMs
+    };
 }
 var OverlayRenderer = function OverlayRenderer(param) {
     var overlays = param.overlays, currentTime = param.currentTime, videoRef = param.videoRef, coordinateSpace = param.coordinateSpace, _param_showcaseMode = param.showcaseMode, showcaseMode = _param_showcaseMode === void 0 ? false : _param_showcaseMode, _param_showcaseCycleMs = param.showcaseCycleMs, showcaseCycleMs = _param_showcaseCycleMs === void 0 ? SHOWCASE_CYCLE_MS_DEFAULT : _param_showcaseCycleMs;
@@ -1868,7 +1935,28 @@ var OverlayRenderer = function OverlayRenderer(param) {
     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 showcasePhase = useShowcasePhase(showcaseMode, showcaseCycleMs);
+    var _ref2 = (0, import_react.useMemo)(function() {
+        return partitionShowcase(overlays);
+    }, [
+        overlays
+    ]), showcasePersistent = _ref2.persistent, showcaseBeats = _ref2.beats;
+    var _useShowcaseBeat = useShowcaseBeat(showcaseMode, showcaseCycleMs, showcaseBeats.length), showcaseBeatIndex = _useShowcaseBeat.beatIndex, showcaseBeatPhase = _useShowcaseBeat.beatPhase, showcaseBeatMs = _useShowcaseBeat.beatMs;
+    var showcasePersistentIds = (0, import_react.useMemo)(function() {
+        return new Set(showcasePersistent.map(function(o) {
+            return o.id;
+        }));
+    }, [
+        showcasePersistent
+    ]);
+    var showcaseSpotlightIds = (0, import_react.useMemo)(function() {
+        var beat = showcaseBeats[showcaseBeatIndex];
+        return new Set((beat !== null && beat !== void 0 ? beat : []).map(function(o) {
+            return o.id;
+        }));
+    }, [
+        showcaseBeats,
+        showcaseBeatIndex
+    ]);
     var updateDims = (0, import_react.useCallback)(function() {
         var video = videoRef.current;
         if (video) {
@@ -1901,10 +1989,9 @@ var OverlayRenderer = function OverlayRenderer(param) {
     ]);
     var activeOverlays = (0, import_react.useMemo)(function() {
         if (showcaseMode) {
-            return overlays.filter(function(o) {
-                if (!o.visible) return false;
-                return showcasePhase < SHOWCASE_POP_OUT_END_MS;
-            });
+            var _showcaseBeats_showcaseBeatIndex;
+            var beat = (_showcaseBeats_showcaseBeatIndex = showcaseBeats[showcaseBeatIndex]) !== null && _showcaseBeats_showcaseBeatIndex !== void 0 ? _showcaseBeats_showcaseBeatIndex : [];
+            return _to_consumable_array(showcasePersistent).concat(_to_consumable_array(beat));
         }
         return overlays.filter(function(o) {
             return isOverlayActive(o, currentTime);
@@ -1913,14 +2000,9 @@ var OverlayRenderer = function OverlayRenderer(param) {
         overlays,
         currentTime,
         showcaseMode,
-        showcasePhase
-    ]);
-    var activeBeatIds = (0, import_react.useMemo)(function() {
-        return new Set(activeOverlays.map(function(o) {
-            return o.id;
-        }));
-    }, [
-        activeOverlays
+        showcasePersistent,
+        showcaseBeats,
+        showcaseBeatIndex
     ]);
     (0, import_react.useLayoutEffect)(function() {
         var activeIds = new Set(activeOverlays.map(function(o) {
@@ -2115,10 +2197,12 @@ var OverlayRenderer = function OverlayRenderer(param) {
             var width = overlay.width * scaleX;
             var height = overlay.height * scaleY;
             var baseOpacity = Math.max(0, Math.min(100, overlay.opacity)) / 100;
-            var inShowcaseBeat = showcaseMode && activeBeatIds.has(overlay.id);
-            var useShowcasePop = inShowcaseBeat;
-            var opacity = useShowcasePop ? baseOpacity * showcaseOpacity(showcasePhase) : visible ? baseOpacity : 0;
-            var popScale = useShowcasePop ? showcaseScale(showcasePhase) : 1;
+            var isShowcasePersistent = showcaseMode && showcasePersistentIds.has(overlay.id);
+            var isShowcaseSpotlight = showcaseMode && showcaseSpotlightIds.has(overlay.id);
+            var isShowcaseDormant = showcaseMode && !isShowcasePersistent && !isShowcaseSpotlight;
+            var useShowcasePop = isShowcaseSpotlight;
+            var opacity = useShowcasePop ? baseOpacity * beatOpacity(showcaseBeatPhase, showcaseBeatMs) : isShowcaseDormant ? 0 : visible ? baseOpacity : 0;
+            var popScale = useShowcasePop ? beatScale(showcaseBeatPhase, showcaseBeatMs) : 1;
             var sz = {
                 w: width,
                 h: height