stormcloud-video-player 0.7.32 → 0.7.35

package/lib/ui/OverlayRenderer.d.cts

@@ -9,6 +9,8 @@ interface OverlayRendererProps {
         width: number;
         height: number;
     } | null;
+    showcaseMode?: boolean;
+    showcaseCycleMs?: number;
 }
 declare const OverlayRenderer: React.FC<OverlayRendererProps>;
 

package/lib/ui/StormcloudVideoPlayer.cjs

@@ -5649,6 +5649,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;
@@ -7059,12 +7095,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 _ref = _sliced_to_array((0, import_react.useState)(0), 2), phase = _ref[0], setPhase = _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 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 _ref = _sliced_to_array((0, import_react.useState)(null), 2), dims = _ref[0], setDims = _ref[1];
     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 updateDims = (0, import_react.useCallback)(function() {
         var video = videoRef.current;
         if (video) {
@@ -7096,12 +7183,26 @@ var OverlayRenderer = function OverlayRenderer(param) {
         updateDims
     ]);
     var activeOverlays = (0, import_react.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 = (0, import_react.useMemo)(function() {
+        return new Set(activeOverlays.map(function(o) {
+            return o.id;
+        }));
+    }, [
+        activeOverlays
     ]);
     (0, import_react.useEffect)(function() {
         var activeIds = new Set(activeOverlays.map(function(o) {
@@ -7291,7 +7392,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
@@ -7304,7 +7407,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"
                 },
@@ -7430,7 +7535,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, 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",
@@ -7459,6 +7564,7 @@ var StormcloudVideoPlayerComponent = import_react2.default.memo(function(props)
         "disableAds",
         "disableFiller",
         "swirlProjectId",
+        "swirlShowcaseDemo",
         "adcisionChannelId",
         "disableOverlays",
         "showAdsControl",
@@ -7495,6 +7601,19 @@ 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 displayOverlays = import_react2.default.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 _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 _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];
@@ -8240,11 +8359,12 @@ var StormcloudVideoPlayerComponent = import_react2.default.memo(function(props)
                     }, restVideoAttrs), {
                         children: children
                     })),
-                    overlays.length > 0 && !adStatus.showAds && !overlaysDisabled && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(OverlayRenderer, {
-                        overlays: overlays,
+                    displayOverlays.length > 0 && !adStatus.showAds && !overlaysDisabled && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(OverlayRenderer, {
+                        overlays: displayOverlays,
                         currentTime: currentTime,
                         videoRef: videoRef,
-                        coordinateSpace: overlayCoordSpace
+                        coordinateSpace: overlayCoordSpace,
+                        showcaseMode: !!swirlShowcaseDemo
                     }),
                     (isLoading || isBuffering) && !hideLoadingIndicator && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", {
                         className: "sc-loading-indicator",
@@ -9613,6 +9733,7 @@ var StormcloudVideoPlayerComponent = import_react2.default.memo(function(props)
         "poster",
         "children",
         "swirlProjectId",
+        "swirlShowcaseDemo",
         "adcisionChannelId",
         "disableOverlays",
         "showAdsControl",