stormcloud-video-player 0.7.37 → 0.7.39

package/lib/index.cjs

@@ -440,6 +440,9 @@ __export(index_exports, {
     IS_SAFARI: function IS_SAFARI1() {
         return IS_SAFARI;
     },
+    OVERLAY_API_BASE: function OVERLAY_API_BASE1() {
+        return OVERLAY_API_BASE;
+    },
     SUPPORTS_DASH: function SUPPORTS_DASH1() {
         return SUPPORTS_DASH;
     },
@@ -503,6 +506,9 @@ __export(index_exports, {
     merge: function merge1() {
         return merge;
     },
+    normalizeSwirlOverlay: function normalizeSwirlOverlay1() {
+        return normalizeSwirlOverlay;
+    },
     omit: function omit1() {
         return omit;
     },
@@ -518,6 +524,9 @@ __export(index_exports, {
     resolveImageUrl: function resolveImageUrl1() {
         return resolveImageUrl;
     },
+    scrollerLooksLikeMarketsStock: function scrollerLooksLikeMarketsStock1() {
+        return scrollerLooksLikeMarketsStock;
+    },
     sendHeartbeat: function sendHeartbeat1() {
         return sendHeartbeat;
     },
@@ -5683,6 +5692,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() {
@@ -5830,7 +5879,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,
@@ -5838,13 +5895,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%",
@@ -5866,17 +5923,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();
@@ -5889,9 +5972,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);
+                        })
                     ];
             }
         });
@@ -7302,7 +7391,7 @@ function showcaseOpacity(phase) {
 }
 function showcaseScale(phase) {
     if (phase < SHOWCASE_POP_IN_MS) {
-        return 0.78 + 0.22 * easeOutBack(phase / SHOWCASE_POP_IN_MS);
+        return Math.min(1, 0.78 + 0.22 * easeOutBack(phase / SHOWCASE_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);
@@ -7367,7 +7456,6 @@ var OverlayRenderer = function OverlayRenderer(param) {
         if (showcaseMode) {
             return overlays.filter(function(o) {
                 if (!o.visible) return false;
-                if (o.type === "scroller") return true;
                 return showcasePhase < SHOWCASE_POP_OUT_END_MS;
             });
         }
@@ -7387,7 +7475,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;
         }));
@@ -7575,10 +7663,9 @@ 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 isScrollerTicker = overlay.type === "scroller";
             var inShowcaseBeat = showcaseMode && activeBeatIds.has(overlay.id);
-            var useShowcasePop = inShowcaseBeat && !isScrollerTicker;
-            var opacity = useShowcasePop ? baseOpacity * showcaseOpacity(showcasePhase) : inShowcaseBeat && isScrollerTicker ? baseOpacity : visible ? baseOpacity : 0;
+            var useShowcasePop = inShowcaseBeat;
+            var opacity = useShowcasePop ? baseOpacity * showcaseOpacity(showcasePhase) : visible ? baseOpacity : 0;
             var popScale = useShowcasePop ? showcaseScale(showcasePhase) : 1;
             var sz = {
                 w: width,
@@ -7720,7 +7807,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",
@@ -7750,6 +7837,8 @@ var StormcloudVideoPlayerComponent = import_react2.default.memo(function(props)
         "disableFiller",
         "swirlProjectId",
         "swirlShowcaseDemo",
+        "swirlOverlayApiBaseUrl",
+        "swirlOverlayCoordinateSpace",
         "adcisionChannelId",
         "disableOverlays",
         "showAdsControl",
@@ -7786,13 +7875,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,
@@ -8072,7 +8169,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) {
@@ -8088,41 +8185,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;
@@ -9924,6 +10049,8 @@ var StormcloudVideoPlayerComponent = import_react2.default.memo(function(props)
         "children",
         "swirlProjectId",
         "swirlShowcaseDemo",
+        "swirlOverlayApiBaseUrl",
+        "swirlOverlayCoordinateSpace",
         "adcisionChannelId",
         "disableOverlays",
         "showAdsControl",
@@ -11151,6 +11278,7 @@ var StormcloudPlayer_default = StormcloudPlayer;
     IS_GLOBAL: IS_GLOBAL,
     IS_IOS: IS_IOS,
     IS_SAFARI: IS_SAFARI,
+    OVERLAY_API_BASE: OVERLAY_API_BASE,
     SUPPORTS_DASH: SUPPORTS_DASH,
     SUPPORTS_HLS: SUPPORTS_HLS,
     StormcloudPlayer: StormcloudPlayer,
@@ -11171,11 +11299,13 @@ var StormcloudPlayer_default = StormcloudPlayer;
     lazy: lazy,
     logBrowserInfo: logBrowserInfo,
     merge: merge,
+    normalizeSwirlOverlay: normalizeSwirlOverlay,
     omit: omit,
     parseQuery: parseQuery,
     players: players,
     randomString: randomString,
     resolveImageUrl: resolveImageUrl,
+    scrollerLooksLikeMarketsStock: scrollerLooksLikeMarketsStock,
     sendHeartbeat: sendHeartbeat,
     sendInitialTracking: sendInitialTracking,
     supportsFeature: supportsFeature,