stormcloud-video-player 0.7.41 → 0.7.43

package/lib/ui/StormcloudVideoPlayer.cjs

@@ -5693,28 +5693,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) {
-        return {
-            width: decodeWidth || SWIRL_HD_AUTHORING_WIDTH,
-            height: decodeHeight || SWIRL_HD_AUTHORING_HEIGHT
-        };
-    }
-    if (!overlay.visible) {
+    if (overlay.name.startsWith(NAB_DEMO_NAME_PREFIX)) {
         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);
-    var isSyntheticMarketsTicker = overlay.id === -9001 || overlay.name === "Demo stock ticker";
-    if (exceedsDecode && (isNabDemo || isSyntheticMarketsTicker)) {
+    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 {
@@ -5809,63 +5797,6 @@ function inferSwirlOverlayCoordinateSpace(overlays, videoWidth, videoHeight) {
         height: videoHeight
     };
 }
-function scrollerLooksLikeMarketsStock(o) {
-    var _ref, _ref1, _ref2, _ref3;
-    if (o.type !== "scroller") return false;
-    var cfg = o.scroller_config;
-    var blob = "".concat(o.name, " ").concat((_ref = cfg === null || cfg === void 0 ? void 0 : cfg.label) !== null && _ref !== void 0 ? _ref : "", " ").concat((_ref1 = cfg === null || cfg === void 0 ? void 0 : cfg.label_line2) !== null && _ref1 !== void 0 ? _ref1 : "", " ").concat((_ref2 = cfg === null || cfg === void 0 ? void 0 : cfg.custom_text) !== null && _ref2 !== void 0 ? _ref2 : "", " ").concat((_ref3 = cfg === null || cfg === void 0 ? void 0 : cfg.preset) !== null && _ref3 !== void 0 ? _ref3 : "");
-    return /\b(MARKETS?|NYSE|NASDAQ|DJIA|\bS&P\b|STOCK|AAPL|TSLA|NVDA|EQUITIES)\b/i.test(blob);
-}
-function createDemoStockTickerOverlay(projectId, opts) {
-    var cw = (opts === null || opts === void 0 ? void 0 : opts.coordinateWidth) && opts.coordinateWidth > 0 ? opts.coordinateWidth : SWIRL_HD_AUTHORING_WIDTH;
-    var ch = (opts === null || opts === void 0 ? void 0 : opts.coordinateHeight) && opts.coordinateHeight > 0 ? opts.coordinateHeight : SWIRL_HD_AUTHORING_HEIGHT;
-    var sx = cw / SWIRL_HD_AUTHORING_WIDTH;
-    var sy = ch / SWIRL_HD_AUTHORING_HEIGHT;
-    var x = 36 * sx;
-    var y = 1002 * sy;
-    var width = 1848 * sx;
-    var height = 66 * sy;
-    var fontSize = Math.max(8, Math.round(13 * sy));
-    var scrollSpeed = Math.max(8, Math.round(36 * sx));
-    var borderRadius = Math.max(1, Math.round(4 * sy));
-    return {
-        id: -9001,
-        project_id: projectId,
-        name: "Demo stock ticker",
-        type: "scroller",
-        visible: true,
-        x: x,
-        y: y,
-        width: width,
-        height: height,
-        opacity: 100,
-        start_time: "00:00:00.000",
-        duration: "24:00:00.000",
-        z_index: 120,
-        scroller_config: {
-            preset: "equities_strip",
-            use_custom_text: true,
-            custom_text: "AAPL +0.84%  \u2022  MSFT +0.31%  \u2022  GOOGL \u22120.22%  \u2022  AMZN +0.47%  \u2022  NVDA +1.12%  \u2022  META +0.19%  \u2022  BRK.B +0.11%  \u2022  JPM +0.55%  \u2022  V +0.28%  \u2022  UNH \u22120.17%  \u2022  DJIA +0.41%  \u2022  S&P 500 +0.29%  \u2022  Nasdaq Composite +0.36%  \u2022  Russell 2000 +0.52%  \u2022  WTI crude $78.40 +0.6%  \u2022  Gold $2,348/oz \u22120.2%  \u2022  10Y Treasury 4.28%",
-            direction: "left",
-            scroll_speed: scrollSpeed,
-            font_size: fontSize,
-            font_weight: "600",
-            text_color: "#e2e8f0",
-            background_color: "#0a0f18",
-            background_opacity: 92,
-            border_radius: borderRadius,
-            padding: Math.max(3, Math.round(6 * sy)),
-            label: "U.S. equities",
-            label_line2: "",
-            label_color: "#1e3a5f",
-            label_text_color: "#f8fafc",
-            accent_color: "#38bdf8",
-            show_accent_line: true,
-            separator_char: "\u2022",
-            item_spacing: Math.max(28, Math.round(48 * sx))
-        }
-    };
-}
 function normalizeScrollerConfig(raw) {
     if (!raw || (typeof raw === "undefined" ? "undefined" : _type_of(raw)) !== "object") return void 0;
     var r = raw;
@@ -7365,11 +7296,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;
@@ -7382,38 +7321,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;
@@ -7421,7 +7430,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) {
@@ -7454,10 +7484,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);
@@ -7466,14 +7495,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) {
@@ -7668,10 +7692,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
@@ -7886,27 +7912,7 @@ var StormcloudVideoPlayerComponent = import_react2.default.memo(function(props)
         swirlOverlayApiBaseUrl
     ]);
     var _import_react2_default_useState17 = _sliced_to_array(import_react2.default.useState(null), 2), overlayCoordSpace = _import_react2_default_useState17[0], setOverlayCoordSpace = _import_react2_default_useState17[1];
-    var displayOverlays = import_react2.default.useMemo(function() {
-        if (!swirlProjectId || !swirlShowcaseDemo) return overlays;
-        if (overlays.some(scrollerLooksLikeMarketsStock)) return overlays;
-        if (overlays.some(function(o) {
-            return o.visible && o.type === "scroller";
-        })) return overlays;
-        var cw = overlayCoordSpace === null || overlayCoordSpace === void 0 ? void 0 : overlayCoordSpace.width;
-        var ch = overlayCoordSpace === null || overlayCoordSpace === void 0 ? void 0 : overlayCoordSpace.height;
-        var tickerOpts = cw && cw > 0 && ch && ch > 0 ? {
-            coordinateWidth: cw,
-            coordinateHeight: ch
-        } : {};
-        return _to_consumable_array(overlays).concat([
-            createDemoStockTickerOverlay(swirlProjectId, tickerOpts)
-        ]);
-    }, [
-        overlays,
-        swirlProjectId,
-        swirlShowcaseDemo,
-        overlayCoordSpace
-    ]);
+    var displayOverlays = overlays;
     var _import_react2_default_useState18 = _sliced_to_array(import_react2.default.useState(typeof window !== "undefined" ? window.innerWidth : 1920), 2), viewportWidth = _import_react2_default_useState18[0], setViewportWidth = _import_react2_default_useState18[1];
     var _import_react2_default_useState19 = _sliced_to_array(import_react2.default.useState(typeof window !== "undefined" ? window.innerHeight > window.innerWidth : false), 2), isPortrait = _import_react2_default_useState19[0], setIsPortrait = _import_react2_default_useState19[1];
     var _import_react2_default_useState20 = _sliced_to_array(import_react2.default.useState(DEFAULT_PLAYER_ASPECT_RATIO), 2), playerAspectRatio = _import_react2_default_useState20[0], setPlayerAspectRatio = _import_react2_default_useState20[1];