stormcloud-video-player 0.7.36 → 0.7.38

package/lib/ui/StormcloudVideoPlayer.cjs

@@ -5502,6 +5502,46 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                 return min;
             }
         },
+        {
+            key: "getMaxHlsResolution",
+            value: function getMaxHlsResolution() {
+                var _this_hls;
+                var levels = (_this_hls = this.hls) === null || _this_hls === void 0 ? void 0 : _this_hls.levels;
+                if (!levels || levels.length === 0) return null;
+                var max = null;
+                var maxPixels = 0;
+                var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
+                try {
+                    for(var _iterator = levels[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
+                        var level = _step.value;
+                        if (level.width && level.height) {
+                            var pixels = level.width * level.height;
+                            if (pixels > maxPixels) {
+                                maxPixels = pixels;
+                                max = {
+                                    width: level.width,
+                                    height: level.height
+                                };
+                            }
+                        }
+                    }
+                } catch (err) {
+                    _didIteratorError = true;
+                    _iteratorError = err;
+                } finally{
+                    try {
+                        if (!_iteratorNormalCompletion && _iterator.return != null) {
+                            _iterator.return();
+                        }
+                    } finally{
+                        if (_didIteratorError) {
+                            throw _iteratorError;
+                        }
+                    }
+                }
+                return max;
+            }
+        },
         {
             key: "getCurrentHlsSegmentDurationMs",
             value: function getCurrentHlsSegmentDurationMs() {
@@ -5649,7 +5689,15 @@ function isOverlayActive(overlay, currentTime) {
     if (durationSec <= 0) return false;
     return currentTime >= startSec && currentTime < startSec + durationSec;
 }
-function createDemoStockTickerOverlay(projectId) {
+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 stack = (opts === null || opts === void 0 ? void 0 : opts.stackAboveNews) === true;
     return {
         id: -9001,
         project_id: projectId,
@@ -5657,13 +5705,13 @@ function createDemoStockTickerOverlay(projectId) {
         type: "scroller",
         visible: true,
         x: 144,
-        y: 950,
+        y: stack ? 818 : 950,
         width: 1632,
-        height: 97,
+        height: stack ? 78 : 97,
         opacity: 100,
         start_time: "00:00:00.000",
         duration: "24:00:00.000",
-        z_index: 120,
+        z_index: stack ? 125 : 120,
         scroller_config: {
             use_custom_text: true,
             custom_text: "AAPL +1.24%  \u2022  MSFT +0.42%  \u2022  GOOGL \u22120.11%  \u2022  TSLA +2.31%  \u2022  NVDA +1.87%  \u2022  AMZN +0.65%  \u2022  META +0.38%  \u2022  DJIA +0.52%  \u2022  S&P 500 +0.33%  \u2022  NDAQ +0.41%",
@@ -5685,17 +5733,43 @@ function createDemoStockTickerOverlay(projectId) {
         }
     };
 }
+function normalizeScrollerConfig(raw) {
+    if (!raw || (typeof raw === "undefined" ? "undefined" : _type_of(raw)) !== "object") return void 0;
+    var r = raw;
+    var merged = _object_spread({}, raw);
+    if (merged.use_custom_text === void 0 && typeof r.useCustomText === "boolean") {
+        merged.use_custom_text = r.useCustomText;
+    }
+    if ((merged.custom_text === void 0 || merged.custom_text === "") && typeof r.customText === "string") {
+        merged.custom_text = r.customText;
+    }
+    if (!merged.rss_url && typeof r.rssUrl === "string") {
+        merged.rss_url = r.rssUrl;
+    }
+    return merged;
+}
+function normalizeSwirlOverlay(raw) {
+    var o = _object_spread({}, raw);
+    if (o.type === "scroller") {
+        var _raw_scroller_config;
+        var sc = (_raw_scroller_config = raw.scroller_config) !== null && _raw_scroller_config !== void 0 ? _raw_scroller_config : raw.scrollerConfig;
+        var normalized = normalizeScrollerConfig(sc);
+        if (normalized) o.scroller_config = normalized;
+    }
+    return o;
+}
 function fetchProjectOverlays(_0) {
     return _async_to_generator(function(projectId) {
-        var apiBaseUrl, response, data;
+        var apiBaseUrl, base, response, data;
         var _arguments = arguments;
         return _ts_generator(this, function(_state) {
             switch(_state.label){
                 case 0:
                     apiBaseUrl = _arguments.length > 1 && _arguments[1] !== void 0 ? _arguments[1] : OVERLAY_API_BASE;
+                    base = apiBaseUrl.replace(/\/$/, "");
                     return [
                         4,
-                        fetch("".concat(apiBaseUrl, "/adstorm/swirl/projects/").concat(projectId, "/overlays"))
+                        fetch("".concat(base, "/adstorm/swirl/projects/").concat(projectId, "/overlays"))
                     ];
                 case 1:
                     response = _state.sent();
@@ -5708,9 +5782,15 @@ function fetchProjectOverlays(_0) {
                     ];
                 case 2:
                     data = _state.sent();
+                    if (!Array.isArray(data)) return [
+                        2,
+                        []
+                    ];
                     return [
                         2,
-                        Array.isArray(data) ? data : []
+                        data.map(function(row) {
+                            return normalizeSwirlOverlay(row);
+                        })
                     ];
             }
         });
@@ -7185,7 +7265,8 @@ var OverlayRenderer = function OverlayRenderer(param) {
     var activeOverlays = (0, import_react.useMemo)(function() {
         if (showcaseMode) {
             return overlays.filter(function(o) {
-                return o.visible && showcasePhase < SHOWCASE_POP_OUT_END_MS;
+                if (!o.visible) return false;
+                return showcasePhase < SHOWCASE_POP_OUT_END_MS;
             });
         }
         return overlays.filter(function(o) {
@@ -7204,7 +7285,7 @@ var OverlayRenderer = function OverlayRenderer(param) {
     }, [
         activeOverlays
     ]);
-    (0, import_react.useEffect)(function() {
+    (0, import_react.useLayoutEffect)(function() {
         var activeIds = new Set(activeOverlays.map(function(o) {
             return o.id;
         }));
@@ -7393,8 +7474,9 @@ var OverlayRenderer = function OverlayRenderer(param) {
             var height = overlay.height * scaleY;
             var baseOpacity = Math.max(0, Math.min(100, overlay.opacity)) / 100;
             var inShowcaseBeat = showcaseMode && activeBeatIds.has(overlay.id);
-            var opacity = inShowcaseBeat ? baseOpacity * showcaseOpacity(showcasePhase) : visible ? baseOpacity : 0;
-            var popScale = inShowcaseBeat ? showcaseScale(showcasePhase) : 1;
+            var useShowcasePop = inShowcaseBeat;
+            var opacity = useShowcasePop ? baseOpacity * showcaseOpacity(showcasePhase) : visible ? baseOpacity : 0;
+            var popScale = useShowcasePop ? showcaseScale(showcasePhase) : 1;
             var sz = {
                 w: width,
                 h: height
@@ -7407,9 +7489,9 @@ var OverlayRenderer = function OverlayRenderer(param) {
                     width: "".concat(width, "px"),
                     height: "".concat(height, "px"),
                     opacity: opacity,
-                    transition: inShowcaseBeat ? "none" : "opacity ".concat(FADE_DURATION_MS, "ms ease"),
-                    transform: showcaseMode ? "scale(".concat(popScale, ")") : void 0,
-                    transformOrigin: showcaseMode ? "center center" : void 0,
+                    transition: useShowcasePop ? "none" : "opacity ".concat(FADE_DURATION_MS, "ms ease"),
+                    transform: showcaseMode && useShowcasePop ? "scale(".concat(popScale, ")") : void 0,
+                    transformOrigin: showcaseMode && useShowcasePop ? "center center" : void 0,
                     zIndex: overlay.z_index,
                     overflow: "hidden"
                 },
@@ -7535,7 +7617,7 @@ var PANEL_BASE_RIGHT_OFFSET = 10;
 var StormcloudVideoPlayerComponent = import_react2.default.memo(function(props) {
     var _ref;
     var _aiLiveContext_context;
-    var src = props.src, autoplay = props.autoplay, muted = props.muted, lowLatencyMode = props.lowLatencyMode, allowNativeHls = props.allowNativeHls, driftToleranceMs = props.driftToleranceMs, immediateManifestAds = props.immediateManifestAds, debugAdTiming = props.debugAdTiming, showCustomControls = props.showCustomControls, hideLoadingIndicator = props.hideLoadingIndicator, onVolumeToggle = props.onVolumeToggle, onFullscreenToggle = props.onFullscreenToggle, onControlClick = props.onControlClick, onReady = props.onReady, wrapperClassName = props.wrapperClassName, wrapperStyle = props.wrapperStyle, className = props.className, style = props.style, controls = props.controls, playsInline = props.playsInline, preload = props.preload, poster = props.poster, children = props.children, licenseKey = props.licenseKey, minSegmentsBeforePlay = props.minSegmentsBeforePlay, disableAds = props.disableAds, disableFiller = props.disableFiller, swirlProjectId = props.swirlProjectId, swirlShowcaseDemo = props.swirlShowcaseDemo, adcisionChannelId = props.adcisionChannelId, disableOverlays = props.disableOverlays, showAdsControl = props.showAdsControl, showOverlaysControl = props.showOverlaysControl, showAiContextControl = props.showAiContextControl, showDebugControl = props.showDebugControl, restVideoAttrs = _object_without_properties(props, [
+    var src = props.src, autoplay = props.autoplay, muted = props.muted, lowLatencyMode = props.lowLatencyMode, allowNativeHls = props.allowNativeHls, driftToleranceMs = props.driftToleranceMs, immediateManifestAds = props.immediateManifestAds, debugAdTiming = props.debugAdTiming, showCustomControls = props.showCustomControls, hideLoadingIndicator = props.hideLoadingIndicator, onVolumeToggle = props.onVolumeToggle, onFullscreenToggle = props.onFullscreenToggle, onControlClick = props.onControlClick, onReady = props.onReady, wrapperClassName = props.wrapperClassName, wrapperStyle = props.wrapperStyle, className = props.className, style = props.style, controls = props.controls, playsInline = props.playsInline, preload = props.preload, poster = props.poster, children = props.children, licenseKey = props.licenseKey, minSegmentsBeforePlay = props.minSegmentsBeforePlay, disableAds = props.disableAds, disableFiller = props.disableFiller, swirlProjectId = props.swirlProjectId, swirlShowcaseDemo = props.swirlShowcaseDemo, swirlOverlayApiBaseUrl = props.swirlOverlayApiBaseUrl, swirlOverlayCoordinateSpace = props.swirlOverlayCoordinateSpace, adcisionChannelId = props.adcisionChannelId, disableOverlays = props.disableOverlays, showAdsControl = props.showAdsControl, showOverlaysControl = props.showOverlaysControl, showAiContextControl = props.showAiContextControl, showDebugControl = props.showDebugControl, restVideoAttrs = _object_without_properties(props, [
         "src",
         "autoplay",
         "muted",
@@ -7565,6 +7647,8 @@ var StormcloudVideoPlayerComponent = import_react2.default.memo(function(props)
         "disableFiller",
         "swirlProjectId",
         "swirlShowcaseDemo",
+        "swirlOverlayApiBaseUrl",
+        "swirlOverlayCoordinateSpace",
         "adcisionChannelId",
         "disableOverlays",
         "showAdsControl",
@@ -7601,13 +7685,21 @@ var StormcloudVideoPlayerComponent = import_react2.default.memo(function(props)
     var _import_react2_default_useState14 = _sliced_to_array(import_react2.default.useState(false), 2), showLicenseWarning = _import_react2_default_useState14[0], setShowLicenseWarning = _import_react2_default_useState14[1];
     var _import_react2_default_useState15 = _sliced_to_array(import_react2.default.useState(true), 2), controlsVisible = _import_react2_default_useState15[0], setControlsVisible = _import_react2_default_useState15[1];
     var _import_react2_default_useState16 = _sliced_to_array(import_react2.default.useState([]), 2), overlays = _import_react2_default_useState16[0], setOverlays = _import_react2_default_useState16[1];
+    var overlayApiBase = import_react2.default.useMemo(function() {
+        return (swirlOverlayApiBaseUrl === null || swirlOverlayApiBaseUrl === void 0 ? void 0 : swirlOverlayApiBaseUrl.replace(/\/$/, "")) || OVERLAY_API_BASE;
+    }, [
+        swirlOverlayApiBaseUrl
+    ]);
     var displayOverlays = import_react2.default.useMemo(function() {
         if (!swirlProjectId || !swirlShowcaseDemo) return overlays;
-        if (overlays.some(function(o) {
+        if (overlays.some(scrollerLooksLikeMarketsStock)) return overlays;
+        var hasOtherScroller = overlays.some(function(o) {
             return o.type === "scroller";
-        })) return overlays;
+        });
         return _to_consumable_array(overlays).concat([
-            createDemoStockTickerOverlay(swirlProjectId)
+            createDemoStockTickerOverlay(swirlProjectId, {
+                stackAboveNews: hasOtherScroller
+            })
         ]);
     }, [
         overlays,
@@ -7887,7 +7979,7 @@ var StormcloudVideoPlayerComponent = import_react2.default.memo(function(props)
         }
         var cancelled = false;
         var loadOverlays = function loadOverlays() {
-            fetchProjectOverlays(swirlProjectId).then(function(data) {
+            fetchProjectOverlays(swirlProjectId, overlayApiBase).then(function(data) {
                 if (!cancelled) setOverlays(data);
             }).catch(function(err) {
                 if (!cancelled) {
@@ -7903,41 +7995,69 @@ var StormcloudVideoPlayerComponent = import_react2.default.memo(function(props)
         };
     }, [
         swirlProjectId,
-        adcisionChannelId
+        adcisionChannelId,
+        overlayApiBase
     ]);
     (0, import_react2.useEffect)(function() {
+        var _playerRef_current;
         if (!swirlProjectId) return;
-        var player = playerRef.current;
-        if (!player) return;
-        var attempts = 0;
-        var maxAttempts = 30;
         var tryResolve = function tryResolve() {
-            var res = player.getMinHlsResolution();
-            if (res) {
-                setOverlayCoordSpace(res);
+            var _player_getMaxHlsResolution, _player_getMinHlsResolution;
+            var player = playerRef.current;
+            var fixed = swirlOverlayCoordinateSpace;
+            if (fixed && fixed.width > 0 && fixed.height > 0) {
+                setOverlayCoordSpace({
+                    width: fixed.width,
+                    height: fixed.height
+                });
                 return true;
             }
-            var video = player.videoElement;
-            if (video && video.videoWidth > 0 && video.videoHeight > 0) {
+            if (!player) return false;
+            var video2 = player.videoElement;
+            if (video2 && video2.videoWidth > 0 && video2.videoHeight > 0) {
                 setOverlayCoordSpace({
-                    width: video.videoWidth,
-                    height: video.videoHeight
+                    width: video2.videoWidth,
+                    height: video2.videoHeight
                 });
                 return true;
             }
+            var maxRes = (_player_getMaxHlsResolution = player.getMaxHlsResolution) === null || _player_getMaxHlsResolution === void 0 ? void 0 : _player_getMaxHlsResolution.call(player);
+            if (maxRes) {
+                setOverlayCoordSpace(maxRes);
+                return true;
+            }
+            var minRes = (_player_getMinHlsResolution = player.getMinHlsResolution) === null || _player_getMinHlsResolution === void 0 ? void 0 : _player_getMinHlsResolution.call(player);
+            if (minRes) {
+                setOverlayCoordSpace(minRes);
+                return true;
+            }
             return false;
         };
-        if (tryResolve()) return;
+        var attempts = 0;
+        var maxAttempts = 40;
+        tryResolve();
         var interval = setInterval(function() {
             attempts++;
-            if (tryResolve() || attempts >= maxAttempts) clearInterval(interval);
+            if (!swirlOverlayCoordinateSpace) {
+                tryResolve();
+            }
+            if (attempts >= maxAttempts) clearInterval(interval);
         }, 300);
+        var onVideoDims = function onVideoDims() {
+            if (!swirlOverlayCoordinateSpace) {
+                tryResolve();
+            }
+        };
+        var video = (_playerRef_current = playerRef.current) === null || _playerRef_current === void 0 ? void 0 : _playerRef_current.videoElement;
+        video === null || video === void 0 ? void 0 : video.addEventListener("loadedmetadata", onVideoDims);
         return function() {
-            return clearInterval(interval);
+            clearInterval(interval);
+            video === null || video === void 0 ? void 0 : video.removeEventListener("loadedmetadata", onVideoDims);
         };
     }, [
         swirlProjectId,
-        criticalPropsKey
+        criticalPropsKey,
+        swirlOverlayCoordinateSpace
     ]);
     (0, import_react2.useEffect)(function() {
         if (!playerRef.current) return;
@@ -9739,6 +9859,8 @@ var StormcloudVideoPlayerComponent = import_react2.default.memo(function(props)
         "children",
         "swirlProjectId",
         "swirlShowcaseDemo",
+        "swirlOverlayApiBaseUrl",
+        "swirlOverlayCoordinateSpace",
         "adcisionChannelId",
         "disableOverlays",
         "showAdsControl",