stormcloud-video-player 0.7.32 → 0.7.35

package/lib/index.d.cts

@@ -272,6 +272,7 @@ type StormcloudVideoPlayerProps = Omit<StormcloudVideoPlayerConfig, "videoElemen
     wrapperStyle?: React.CSSProperties;
     licenseKey?: string;
     swirlProjectId?: number;
+    swirlShowcaseDemo?: boolean;
     adcisionChannelId?: number;
     disableOverlays?: boolean;
     showAdsControl?: boolean;
@@ -4070,6 +4071,7 @@ interface SwirlOverlay {
 }
 declare function timeStringToSeconds(timeStr: string): number;
 declare function isOverlayActive(overlay: SwirlOverlay, currentTime: number): boolean;
+declare function createDemoStockTickerOverlay(projectId: number): SwirlOverlay;
 declare function fetchProjectOverlays(projectId: number, apiBaseUrl?: string): Promise<SwirlOverlay[]>;
 declare function resolveImageUrl(imageUrl: string, apiBaseUrl?: string): string;
 
@@ -4130,4 +4132,4 @@ interface AdStormAdLayer extends AdController {
 }
 declare function createAdStormPlayer(contentVideo: HTMLVideoElement, options: AdStormPlayerOptions): AdStormAdLayer;
 
-export { type AdBreak, type AdSchedule, type AdStormAdLayer, type AdStormLayerOptionsUpdate, type AdStormPlayerOptions, type BaseStormcloudPlayerProps, type BrowserInfo, type ClientInfo, type HeartbeatData, IS_BROWSER, IS_GLOBAL, IS_IOS, IS_SAFARI, type LateJoinPolicy, type OnProgressProps, type OverlayCoordinateSpace, SUPPORTS_DASH, SUPPORTS_HLS, StormcloudPlayer, StormcloudVideoPlayer, StormcloudVideoPlayerComponent, type StormcloudVideoPlayerConfig, type StormcloudVideoPlayerProps, type SwirlOverlay, type SwirlOverlayType, type SwirlScrollerConfig, type TrackingData, type VastBidResponse, canPlay, createAdStormPlayer, createStormcloudPlayer, StormcloudVideoPlayerComponent as default, detectBrowser, fetchProjectOverlays, getBrowserConfigOverrides, getBrowserID, getClientInfo, initializePolyfills, isMediaStream, isOverlayActive, lazy, logBrowserInfo, merge, omit, parseQuery, players, randomString, resolveImageUrl, sendHeartbeat, sendInitialTracking, supportsFeature, supportsModernJS, supportsWebKitPresentationMode, timeStringToSeconds };
+export { type AdBreak, type AdSchedule, type AdStormAdLayer, type AdStormLayerOptionsUpdate, type AdStormPlayerOptions, type BaseStormcloudPlayerProps, type BrowserInfo, type ClientInfo, type HeartbeatData, IS_BROWSER, IS_GLOBAL, IS_IOS, IS_SAFARI, type LateJoinPolicy, type OnProgressProps, type OverlayCoordinateSpace, SUPPORTS_DASH, SUPPORTS_HLS, StormcloudPlayer, StormcloudVideoPlayer, StormcloudVideoPlayerComponent, type StormcloudVideoPlayerConfig, type StormcloudVideoPlayerProps, type SwirlOverlay, type SwirlOverlayType, type SwirlScrollerConfig, type TrackingData, type VastBidResponse, canPlay, createAdStormPlayer, createDemoStockTickerOverlay, createStormcloudPlayer, StormcloudVideoPlayerComponent as default, detectBrowser, fetchProjectOverlays, getBrowserConfigOverrides, getBrowserID, getClientInfo, initializePolyfills, isMediaStream, isOverlayActive, lazy, logBrowserInfo, merge, omit, parseQuery, players, randomString, resolveImageUrl, sendHeartbeat, sendInitialTracking, supportsFeature, supportsModernJS, supportsWebKitPresentationMode, timeStringToSeconds };

package/lib/index.d.ts

@@ -272,6 +272,7 @@ type StormcloudVideoPlayerProps = Omit<StormcloudVideoPlayerConfig, "videoElemen
     wrapperStyle?: React.CSSProperties;
     licenseKey?: string;
     swirlProjectId?: number;
+    swirlShowcaseDemo?: boolean;
     adcisionChannelId?: number;
     disableOverlays?: boolean;
     showAdsControl?: boolean;
@@ -4070,6 +4071,7 @@ interface SwirlOverlay {
 }
 declare function timeStringToSeconds(timeStr: string): number;
 declare function isOverlayActive(overlay: SwirlOverlay, currentTime: number): boolean;
+declare function createDemoStockTickerOverlay(projectId: number): SwirlOverlay;
 declare function fetchProjectOverlays(projectId: number, apiBaseUrl?: string): Promise<SwirlOverlay[]>;
 declare function resolveImageUrl(imageUrl: string, apiBaseUrl?: string): string;
 
@@ -4130,4 +4132,4 @@ interface AdStormAdLayer extends AdController {
 }
 declare function createAdStormPlayer(contentVideo: HTMLVideoElement, options: AdStormPlayerOptions): AdStormAdLayer;
 
-export { type AdBreak, type AdSchedule, type AdStormAdLayer, type AdStormLayerOptionsUpdate, type AdStormPlayerOptions, type BaseStormcloudPlayerProps, type BrowserInfo, type ClientInfo, type HeartbeatData, IS_BROWSER, IS_GLOBAL, IS_IOS, IS_SAFARI, type LateJoinPolicy, type OnProgressProps, type OverlayCoordinateSpace, SUPPORTS_DASH, SUPPORTS_HLS, StormcloudPlayer, StormcloudVideoPlayer, StormcloudVideoPlayerComponent, type StormcloudVideoPlayerConfig, type StormcloudVideoPlayerProps, type SwirlOverlay, type SwirlOverlayType, type SwirlScrollerConfig, type TrackingData, type VastBidResponse, canPlay, createAdStormPlayer, createStormcloudPlayer, StormcloudVideoPlayerComponent as default, detectBrowser, fetchProjectOverlays, getBrowserConfigOverrides, getBrowserID, getClientInfo, initializePolyfills, isMediaStream, isOverlayActive, lazy, logBrowserInfo, merge, omit, parseQuery, players, randomString, resolveImageUrl, sendHeartbeat, sendInitialTracking, supportsFeature, supportsModernJS, supportsWebKitPresentationMode, timeStringToSeconds };
+export { type AdBreak, type AdSchedule, type AdStormAdLayer, type AdStormLayerOptionsUpdate, type AdStormPlayerOptions, type BaseStormcloudPlayerProps, type BrowserInfo, type ClientInfo, type HeartbeatData, IS_BROWSER, IS_GLOBAL, IS_IOS, IS_SAFARI, type LateJoinPolicy, type OnProgressProps, type OverlayCoordinateSpace, SUPPORTS_DASH, SUPPORTS_HLS, StormcloudPlayer, StormcloudVideoPlayer, StormcloudVideoPlayerComponent, type StormcloudVideoPlayerConfig, type StormcloudVideoPlayerProps, type SwirlOverlay, type SwirlOverlayType, type SwirlScrollerConfig, type TrackingData, type VastBidResponse, canPlay, createAdStormPlayer, createDemoStockTickerOverlay, createStormcloudPlayer, StormcloudVideoPlayerComponent as default, detectBrowser, fetchProjectOverlays, getBrowserConfigOverrides, getBrowserID, getClientInfo, initializePolyfills, isMediaStream, isOverlayActive, lazy, logBrowserInfo, merge, omit, parseQuery, players, randomString, resolveImageUrl, sendHeartbeat, sendInitialTracking, supportsFeature, supportsModernJS, supportsWebKitPresentationMode, timeStringToSeconds };

package/lib/index.js

@@ -5661,6 +5661,42 @@ function isOverlayActive(overlay, currentTime) {
     if (durationSec <= 0) return false;
     return currentTime >= startSec && currentTime < startSec + durationSec;
 }
+function createDemoStockTickerOverlay(projectId) {
+    return {
+        id: -9001,
+        project_id: projectId,
+        name: "Demo stock ticker",
+        type: "scroller",
+        visible: true,
+        x: 144,
+        y: 950,
+        width: 1632,
+        height: 97,
+        opacity: 100,
+        start_time: "00:00:00.000",
+        duration: "24:00:00.000",
+        z_index: 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%",
+            direction: "left",
+            scroll_speed: 42,
+            font_size: 15,
+            font_weight: "700",
+            text_color: "#f8fafc",
+            background_color: "#0f172a",
+            background_opacity: 92,
+            border_radius: 4,
+            label: "MARKETS",
+            label_line2: "LIVE",
+            label_color: "#0ea5e9",
+            label_text_color: "#ffffff",
+            accent_color: "#38bdf8",
+            show_accent_line: true,
+            separator_char: "\u2022"
+        }
+    };
+}
 function fetchProjectOverlays(_0) {
     return _async_to_generator(function(projectId) {
         var apiBaseUrl, response, data;
@@ -7071,12 +7107,63 @@ 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;
+function easeOutCubic(t) {
+    var u = 1 - t;
+    return 1 - u * u * u;
+}
+function easeInCubic(t) {
+    return t * t * t;
+}
+function easeOutBack(t) {
+    var c1 = 1.70158;
+    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);
+    }
+    return 1;
+}
+function showcaseScale(phase) {
+    if (phase < SHOWCASE_POP_IN_MS) {
+        return 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);
+    }
+    return 1;
+}
+function useShowcasePhase(enabled, cycleMs) {
+    var _useState = _sliced_to_array(useState(0), 2), phase = _useState[0], setPhase = _useState[1];
+    useEffect(function() {
+        if (!enabled) return;
+        setPhase(Date.now() % cycleMs);
+        var id = window.setInterval(function() {
+            setPhase(Date.now() % cycleMs);
+        }, 48);
+        return function() {
+            return clearInterval(id);
+        };
+    }, [
+        enabled,
+        cycleMs
+    ]);
+    return phase;
+}
 var OverlayRenderer = function OverlayRenderer(param) {
-    var overlays = param.overlays, currentTime = param.currentTime, videoRef = param.videoRef, coordinateSpace = param.coordinateSpace;
+    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;
     var _useState = _sliced_to_array(useState(null), 2), dims = _useState[0], setDims = _useState[1];
     var rafRef = useRef(null);
     var _useState1 = _sliced_to_array(useState(/* @__PURE__ */ new Map()), 2), fadeMap = _useState1[0], setFadeMap = _useState1[1];
     var removeTimers = useRef(/* @__PURE__ */ new Map());
+    var showcasePhase = useShowcasePhase(showcaseMode, showcaseCycleMs);
     var updateDims = useCallback(function() {
         var video = videoRef.current;
         if (video) {
@@ -7108,12 +7195,26 @@ var OverlayRenderer = function OverlayRenderer(param) {
         updateDims
     ]);
     var activeOverlays = useMemo(function() {
+        if (showcaseMode) {
+            return overlays.filter(function(o) {
+                return o.visible && showcasePhase < SHOWCASE_POP_OUT_END_MS;
+            });
+        }
         return overlays.filter(function(o) {
             return isOverlayActive(o, currentTime);
         });
     }, [
         overlays,
-        currentTime
+        currentTime,
+        showcaseMode,
+        showcasePhase
+    ]);
+    var activeBeatIds = useMemo(function() {
+        return new Set(activeOverlays.map(function(o) {
+            return o.id;
+        }));
+    }, [
+        activeOverlays
     ]);
     useEffect(function() {
         var activeIds = new Set(activeOverlays.map(function(o) {
@@ -7303,7 +7404,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 opacity = visible ? baseOpacity : 0;
+            var inShowcaseBeat = showcaseMode && activeBeatIds.has(overlay.id);
+            var opacity = inShowcaseBeat ? baseOpacity * showcaseOpacity(showcasePhase) : visible ? baseOpacity : 0;
+            var popScale = inShowcaseBeat ? showcaseScale(showcasePhase) : 1;
             var sz = {
                 w: width,
                 h: height
@@ -7316,7 +7419,9 @@ var OverlayRenderer = function OverlayRenderer(param) {
                     width: "".concat(width, "px"),
                     height: "".concat(height, "px"),
                     opacity: opacity,
-                    transition: "opacity ".concat(FADE_DURATION_MS, "ms ease"),
+                    transition: inShowcaseBeat ? "none" : "opacity ".concat(FADE_DURATION_MS, "ms ease"),
+                    transform: showcaseMode ? "scale(".concat(popScale, ")") : void 0,
+                    transformOrigin: showcaseMode ? "center center" : void 0,
                     zIndex: overlay.z_index,
                     overflow: "hidden"
                 },
@@ -7442,7 +7547,7 @@ var PANEL_BASE_RIGHT_OFFSET = 10;
 var StormcloudVideoPlayerComponent = React2.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, 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, 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",
@@ -7471,6 +7576,7 @@ var StormcloudVideoPlayerComponent = React2.memo(function(props) {
         "disableAds",
         "disableFiller",
         "swirlProjectId",
+        "swirlShowcaseDemo",
         "adcisionChannelId",
         "disableOverlays",
         "showAdsControl",
@@ -7507,6 +7613,19 @@ var StormcloudVideoPlayerComponent = React2.memo(function(props) {
     var _React2_useState14 = _sliced_to_array(React2.useState(false), 2), showLicenseWarning = _React2_useState14[0], setShowLicenseWarning = _React2_useState14[1];
     var _React2_useState15 = _sliced_to_array(React2.useState(true), 2), controlsVisible = _React2_useState15[0], setControlsVisible = _React2_useState15[1];
     var _React2_useState16 = _sliced_to_array(React2.useState([]), 2), overlays = _React2_useState16[0], setOverlays = _React2_useState16[1];
+    var displayOverlays = React2.useMemo(function() {
+        if (!swirlProjectId || !swirlShowcaseDemo) return overlays;
+        if (overlays.some(function(o) {
+            return o.type === "scroller";
+        })) return overlays;
+        return _to_consumable_array(overlays).concat([
+            createDemoStockTickerOverlay(swirlProjectId)
+        ]);
+    }, [
+        overlays,
+        swirlProjectId,
+        swirlShowcaseDemo
+    ]);
     var _React2_useState17 = _sliced_to_array(React2.useState(null), 2), overlayCoordSpace = _React2_useState17[0], setOverlayCoordSpace = _React2_useState17[1];
     var _React2_useState18 = _sliced_to_array(React2.useState(typeof window !== "undefined" ? window.innerWidth : 1920), 2), viewportWidth = _React2_useState18[0], setViewportWidth = _React2_useState18[1];
     var _React2_useState19 = _sliced_to_array(React2.useState(typeof window !== "undefined" ? window.innerHeight > window.innerWidth : false), 2), isPortrait = _React2_useState19[0], setIsPortrait = _React2_useState19[1];
@@ -8252,11 +8371,12 @@ var StormcloudVideoPlayerComponent = React2.memo(function(props) {
                     }, restVideoAttrs), {
                         children: children
                     })),
-                    overlays.length > 0 && !adStatus.showAds && !overlaysDisabled && /* @__PURE__ */ jsx2(OverlayRenderer, {
-                        overlays: overlays,
+                    displayOverlays.length > 0 && !adStatus.showAds && !overlaysDisabled && /* @__PURE__ */ jsx2(OverlayRenderer, {
+                        overlays: displayOverlays,
                         currentTime: currentTime,
                         videoRef: videoRef,
-                        coordinateSpace: overlayCoordSpace
+                        coordinateSpace: overlayCoordSpace,
+                        showcaseMode: !!swirlShowcaseDemo
                     }),
                     (isLoading || isBuffering) && !hideLoadingIndicator && /* @__PURE__ */ jsxs2("div", {
                         className: "sc-loading-indicator",
@@ -9625,6 +9745,7 @@ var StormcloudVideoPlayerComponent = React2.memo(function(props) {
         "poster",
         "children",
         "swirlProjectId",
+        "swirlShowcaseDemo",
         "adcisionChannelId",
         "disableOverlays",
         "showAdsControl",
@@ -10850,5 +10971,5 @@ var createStormcloudPlayer = function createStormcloudPlayer(playerList, fallbac
 };
 var StormcloudPlayer = createStormcloudPlayer(players_default, players_default[players_default.length - 1]);
 var StormcloudPlayer_default = StormcloudPlayer;
-export { IS_BROWSER, IS_GLOBAL, IS_IOS, IS_SAFARI, SUPPORTS_DASH, SUPPORTS_HLS, StormcloudPlayer_default as StormcloudPlayer, StormcloudVideoPlayer, StormcloudVideoPlayerComponent, canPlay, createAdStormPlayer, createStormcloudPlayer, StormcloudVideoPlayerComponent as default, detectBrowser, fetchProjectOverlays, getBrowserConfigOverrides, getBrowserID, getClientInfo, initializePolyfills, isMediaStream, isOverlayActive, lazy, logBrowserInfo, merge, omit, parseQuery, players_default as players, randomString, resolveImageUrl, sendHeartbeat, sendInitialTracking, supportsFeature, supportsModernJS, supportsWebKitPresentationMode, timeStringToSeconds };
+export { IS_BROWSER, IS_GLOBAL, IS_IOS, IS_SAFARI, SUPPORTS_DASH, SUPPORTS_HLS, StormcloudPlayer_default as StormcloudPlayer, StormcloudVideoPlayer, StormcloudVideoPlayerComponent, canPlay, createAdStormPlayer, createDemoStockTickerOverlay, createStormcloudPlayer, StormcloudVideoPlayerComponent as default, detectBrowser, fetchProjectOverlays, getBrowserConfigOverrides, getBrowserID, getClientInfo, initializePolyfills, isMediaStream, isOverlayActive, lazy, logBrowserInfo, merge, omit, parseQuery, players_default as players, randomString, resolveImageUrl, sendHeartbeat, sendInitialTracking, supportsFeature, supportsModernJS, supportsWebKitPresentationMode, timeStringToSeconds };
 //# sourceMappingURL=index.js.map