stormcloud-video-player 0.7.16 → 0.7.18

package/lib/index.d.cts

@@ -270,6 +270,12 @@ type StormcloudVideoPlayerProps = Omit<StormcloudVideoPlayerConfig, "videoElemen
     wrapperStyle?: React.CSSProperties;
     licenseKey?: string;
     swirlProjectId?: number;
+    adcisionChannelId?: number;
+    disableOverlays?: boolean;
+    showAdsControl?: boolean;
+    showOverlaysControl?: boolean;
+    showAiContextControl?: boolean;
+    showDebugControl?: boolean;
 };
 declare const StormcloudVideoPlayerComponent: React.FC<StormcloudVideoPlayerProps>;
 

package/lib/index.d.ts

@@ -270,6 +270,12 @@ type StormcloudVideoPlayerProps = Omit<StormcloudVideoPlayerConfig, "videoElemen
     wrapperStyle?: React.CSSProperties;
     licenseKey?: string;
     swirlProjectId?: number;
+    adcisionChannelId?: number;
+    disableOverlays?: boolean;
+    showAdsControl?: boolean;
+    showOverlaysControl?: boolean;
+    showAiContextControl?: boolean;
+    showDebugControl?: boolean;
 };
 declare const StormcloudVideoPlayerComponent: React.FC<StormcloudVideoPlayerProps>;
 

package/lib/index.js

@@ -367,7 +367,7 @@ function _ts_values(o) {
     throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
 }
 // src/ui/StormcloudVideoPlayer.tsx
-import React2, { useEffect as useEffect2, useRef as useRef2, useMemo as useMemo2, useCallback as useCallback2 } from "react";
+import React2, { useEffect as useEffect2, useRef as useRef2, useMemo as useMemo2, useCallback as useCallback2, useState as useState2 } from "react";
 // src/player/StormcloudVideoPlayer.ts
 import Hls from "hls.js";
 // src/sdk/vastParser.ts
@@ -5607,7 +5607,7 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
     return StormcloudVideoPlayer;
 }();
 // src/ui/StormcloudVideoPlayer.tsx
-import { FaPlay, FaPause, FaVolumeUp, FaVolumeMute, FaVolumeDown, FaExpand, FaCompress, FaCog, FaTimes, FaCopy } from "react-icons/fa";
+import { FaPlay, FaPause, FaVolumeUp, FaVolumeMute, FaVolumeDown, FaExpand, FaCompress, FaCog, FaTimes, FaCopy, FaLayerGroup } from "react-icons/fa";
 // src/ui/OverlayRenderer.tsx
 import React, { useEffect, useRef, useState, useCallback, useMemo, useId } from "react";
 // src/utils/overlays.ts
@@ -7202,6 +7202,33 @@ var OverlayRenderer = function OverlayRenderer(param) {
         })
     });
 };
+// src/utils/adcision.ts
+var ADCISION_API_BASE = "https://adstorm.co/api-adstorm-dev";
+function fetchAdcisionChannel(_0) {
+    return _async_to_generator(function(channelId) {
+        var apiBaseUrl, response;
+        var _arguments = arguments;
+        return _ts_generator(this, function(_state) {
+            switch(_state.label){
+                case 0:
+                    apiBaseUrl = _arguments.length > 1 && _arguments[1] !== void 0 ? _arguments[1] : ADCISION_API_BASE;
+                    return [
+                        4,
+                        fetch("".concat(apiBaseUrl, "/adstorm/adcision/channels/").concat(channelId))
+                    ];
+                case 1:
+                    response = _state.sent();
+                    if (!response.ok) {
+                        throw new Error("Failed to fetch adcision channel ".concat(channelId, ": ").concat(response.status, " ").concat(response.statusText));
+                    }
+                    return [
+                        2,
+                        response.json()
+                    ];
+            }
+        });
+    }).apply(this, arguments);
+}
 // src/ui/StormcloudVideoPlayer.tsx
 import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var CRITICAL_PROPS = [
@@ -7221,7 +7248,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, 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, 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",
@@ -7249,8 +7276,15 @@ var StormcloudVideoPlayerComponent = React2.memo(function(props) {
         "minSegmentsBeforePlay",
         "disableAds",
         "disableFiller",
-        "swirlProjectId"
+        "swirlProjectId",
+        "adcisionChannelId",
+        "disableOverlays",
+        "showAdsControl",
+        "showOverlaysControl",
+        "showAiContextControl",
+        "showDebugControl"
     ]);
+    var _useState2 = _sliced_to_array(useState2(null), 2), adcisionSrc = _useState2[0], setAdcisionSrc = _useState2[1];
     var videoRef = useRef2(null);
     var playerRef = useRef2(null);
     var bufferingTimeoutRef = useRef2(null);
@@ -7286,12 +7320,13 @@ var StormcloudVideoPlayerComponent = React2.memo(function(props) {
     var _React2_useState22 = _sliced_to_array(React2.useState([]), 2), debugMarkers = _React2_useState22[0], setDebugMarkers = _React2_useState22[1];
     var _React2_useState23 = _sliced_to_array(React2.useState(false), 2), showAiPanel = _React2_useState23[0], setShowAiPanel = _React2_useState23[1];
     var _React2_useState24 = _sliced_to_array(React2.useState(disableAds !== null && disableAds !== void 0 ? disableAds : false), 2), adsDisabled = _React2_useState24[0], setAdsDisabled = _React2_useState24[1];
-    var _React2_useState25 = _sliced_to_array(React2.useState({
+    var _React2_useState25 = _sliced_to_array(React2.useState(disableOverlays !== null && disableOverlays !== void 0 ? disableOverlays : false), 2), overlaysDisabled = _React2_useState25[0], setOverlaysDisabled = _React2_useState25[1];
+    var _React2_useState26 = _sliced_to_array(React2.useState({
         context: null,
         isLoading: false,
         error: null,
         lastPolledAt: null
-    }), 2), aiLiveContext = _React2_useState25[0], setAiLiveContext = _React2_useState25[1];
+    }), 2), aiLiveContext = _React2_useState26[0], setAiLiveContext = _React2_useState26[1];
     var getResponsiveScale = function getResponsiveScale() {
         if (viewportWidth < 480) return 0.7;
         if (viewportWidth < 768) return 0.8;
@@ -7449,21 +7484,43 @@ var StormcloudVideoPlayerComponent = React2.memo(function(props) {
     var debugPanelBottomOffset = shouldShowEnhancedControls ? Math.max(74, 92 * responsiveScale) : Math.max(52, 58 * responsiveScale);
     var panelBaseRight = PANEL_BASE_RIGHT_OFFSET * responsiveScale;
     var debugPanelRightOffset = showAiPanel && !shouldStackPanels ? panelBaseRight + analyzerPanelWidth + panelGap : panelBaseRight;
+    useEffect2(function() {
+        if (!adcisionChannelId) {
+            setAdcisionSrc(null);
+            return;
+        }
+        var cancelled = false;
+        fetchAdcisionChannel(adcisionChannelId).then(function(ch) {
+            if (!cancelled) setAdcisionSrc(ch.stream_url);
+        }).catch(function(err) {
+            if (!cancelled) {
+                console.warn("[StormcloudVideoPlayer] Failed to fetch adcision channel:", err);
+            }
+        });
+        return function() {
+            cancelled = true;
+        };
+    }, [
+        adcisionChannelId
+    ]);
+    var effectiveSrc = adcisionChannelId ? adcisionSrc : src;
     var criticalPropsKey = useMemo2(function() {
-        return CRITICAL_PROPS.map(function(prop) {
-            return "".concat(prop, ":").concat(props[prop]);
+        var baseParts = CRITICAL_PROPS.map(function(prop) {
+            return prop === "src" ? "src:".concat(effectiveSrc) : "".concat(prop, ":").concat(props[prop]);
         }).join("|");
+        return "".concat(baseParts, "|adcisionChannelId:").concat(adcisionChannelId !== null && adcisionChannelId !== void 0 ? adcisionChannelId : "");
     }, [
-        src,
+        effectiveSrc,
         allowNativeHls,
         licenseKey,
         lowLatencyMode,
-        driftToleranceMs
+        driftToleranceMs,
+        adcisionChannelId
     ]);
     useEffect2(function() {
         if (typeof window === "undefined") return;
         var el = videoRef.current;
-        if (!el || !src) return;
+        if (!el || !effectiveSrc) return;
         if (!licenseKey) {
             setShowLicenseWarning(true);
             setIsLoading(false);
@@ -7477,7 +7534,7 @@ var StormcloudVideoPlayerComponent = React2.memo(function(props) {
             playerRef.current = null;
         }
         var cfg = {
-            src: src,
+            src: effectiveSrc,
             videoElement: el
         };
         if (autoplay !== void 0) cfg.autoplay = autoplay;
@@ -7495,7 +7552,7 @@ var StormcloudVideoPlayerComponent = React2.memo(function(props) {
         if (minSegmentsBeforePlay !== void 0) cfg.minSegmentsBeforePlay = minSegmentsBeforePlay;
         if (disableAds !== void 0) cfg.disableAds = disableAds;
         cfg.disableFiller = disableFiller !== null && disableFiller !== void 0 ? disableFiller : true;
-        if (swirlProjectId !== void 0) cfg.projectId = String(swirlProjectId);
+        if (!adcisionChannelId && swirlProjectId !== void 0) cfg.projectId = String(swirlProjectId);
         var player = new StormcloudVideoPlayer(cfg);
         playerRef.current = player;
         player.load().then(function() {
@@ -7517,7 +7574,7 @@ var StormcloudVideoPlayerComponent = React2.memo(function(props) {
         criticalPropsKey
     ]);
     useEffect2(function() {
-        if (!swirlProjectId) {
+        if (!swirlProjectId || adcisionChannelId) {
             setOverlays([]);
             setOverlayCoordSpace(null);
             return;
@@ -7534,7 +7591,8 @@ var StormcloudVideoPlayerComponent = React2.memo(function(props) {
             cancelled = true;
         };
     }, [
-        swirlProjectId
+        swirlProjectId,
+        adcisionChannelId
     ]);
     useEffect2(function() {
         if (!swirlProjectId) return;
@@ -7776,7 +7834,7 @@ var StormcloudVideoPlayerComponent = React2.memo(function(props) {
         criticalPropsKey
     ]);
     useEffect2(function() {
-        if (!swirlProjectId) {
+        if (!swirlProjectId || adcisionChannelId) {
             setShowAiPanel(false);
             setAiLiveContext({
                 context: null,
@@ -7786,10 +7844,11 @@ var StormcloudVideoPlayerComponent = React2.memo(function(props) {
             });
         }
     }, [
-        swirlProjectId
+        swirlProjectId,
+        adcisionChannelId
     ]);
     useEffect2(function() {
-        if (!showAiPanel || !swirlProjectId) return;
+        if (!showAiPanel || !swirlProjectId || adcisionChannelId) return;
         var cancelled = false;
         var pollTimeoutId = null;
         var inFlight = false;
@@ -7966,7 +8025,7 @@ var StormcloudVideoPlayerComponent = React2.memo(function(props) {
                     }, restVideoAttrs), {
                         children: children
                     })),
-                    overlays.length > 0 && !adStatus.showAds && /* @__PURE__ */ jsx2(OverlayRenderer, {
+                    overlays.length > 0 && !adStatus.showAds && !overlaysDisabled && /* @__PURE__ */ jsx2(OverlayRenderer, {
                         overlays: overlays,
                         currentTime: currentTime,
                         videoRef: videoRef,
@@ -8778,7 +8837,7 @@ var StormcloudVideoPlayerComponent = React2.memo(function(props) {
                                             gap: "".concat(8 * responsiveScale, "px")
                                         },
                                         children: [
-                                            /* @__PURE__ */ jsx2("button", {
+                                            (showAdsControl !== null && showAdsControl !== void 0 ? showAdsControl : true) && /* @__PURE__ */ jsx2("button", {
                                                 className: "sc-ctrl-btn",
                                                 onClick: function onClick() {
                                                     var _playerRef_current;
@@ -8803,7 +8862,29 @@ var StormcloudVideoPlayerComponent = React2.memo(function(props) {
                                                 title: adsDisabled ? "Enable ads" : "Disable ads",
                                                 children: "AD"
                                             }),
-                                            swirlProjectId && /* @__PURE__ */ jsx2("button", {
+                                            swirlProjectId && (showOverlaysControl !== null && showOverlaysControl !== void 0 ? showOverlaysControl : true) && /* @__PURE__ */ jsx2("button", {
+                                                className: "sc-ctrl-btn",
+                                                onClick: function onClick() {
+                                                    setOverlaysDisabled(function(prev) {
+                                                        return !prev;
+                                                    });
+                                                    resetControlsTimer();
+                                                },
+                                                style: {
+                                                    padding: "".concat(8 * responsiveScale, "px"),
+                                                    borderRadius: "50%",
+                                                    minWidth: "".concat(36 * responsiveScale, "px"),
+                                                    minHeight: "".concat(36 * responsiveScale, "px"),
+                                                    background: overlaysDisabled ? "rgba(239, 68, 68, 0.28)" : "transparent",
+                                                    color: overlaysDisabled ? "rgba(252, 165, 165, 0.9)" : "rgba(255, 255, 255, 0.75)",
+                                                    opacity: overlaysDisabled ? 1 : 0.9
+                                                },
+                                                title: overlaysDisabled ? "Enable overlays" : "Disable overlays",
+                                                children: /* @__PURE__ */ jsx2(FaLayerGroup, {
+                                                    size: Math.max(14, 18 * responsiveScale)
+                                                })
+                                            }),
+                                            swirlProjectId && (showAiContextControl !== null && showAiContextControl !== void 0 ? showAiContextControl : true) && /* @__PURE__ */ jsx2("button", {
                                                 className: "sc-ctrl-btn",
                                                 onClick: function onClick() {
                                                     setShowAiPanel(function(prev) {
@@ -8825,7 +8906,7 @@ var StormcloudVideoPlayerComponent = React2.memo(function(props) {
                                                 title: showAiPanel ? "Hide AI context" : "Show AI context",
                                                 children: "AI"
                                             }),
-                                            debugAdTiming && /* @__PURE__ */ jsx2("button", {
+                                            debugAdTiming && (showDebugControl !== null && showDebugControl !== void 0 ? showDebugControl : true) && /* @__PURE__ */ jsx2("button", {
                                                 className: "sc-ctrl-btn",
                                                 onClick: function onClick() {
                                                     setShowDebugPanel(function(prev) {
@@ -9096,7 +9177,7 @@ var StormcloudVideoPlayerComponent = React2.memo(function(props) {
                                     })
                                 ]
                             }),
-                            /* @__PURE__ */ jsx2("button", {
+                            (showAdsControl !== null && showAdsControl !== void 0 ? showAdsControl : true) && /* @__PURE__ */ jsx2("button", {
                                 className: "sc-ctrl-btn",
                                 onClick: function onClick() {
                                     var _playerRef_current;
@@ -9121,7 +9202,28 @@ var StormcloudVideoPlayerComponent = React2.memo(function(props) {
                                 title: adsDisabled ? "Enable ads" : "Disable ads",
                                 children: "AD"
                             }),
-                            swirlProjectId && /* @__PURE__ */ jsx2("button", {
+                            swirlProjectId && (showOverlaysControl !== null && showOverlaysControl !== void 0 ? showOverlaysControl : true) && /* @__PURE__ */ jsx2("button", {
+                                className: "sc-ctrl-btn",
+                                onClick: function onClick() {
+                                    setOverlaysDisabled(function(prev) {
+                                        return !prev;
+                                    });
+                                    resetControlsTimer();
+                                },
+                                style: {
+                                    padding: "".concat(8 * responsiveScale, "px"),
+                                    borderRadius: "50%",
+                                    minWidth: "".concat(36 * responsiveScale, "px"),
+                                    minHeight: "".concat(36 * responsiveScale, "px"),
+                                    background: overlaysDisabled ? "rgba(239, 68, 68, 0.28)" : "rgba(0, 0, 0, 0.6)",
+                                    color: overlaysDisabled ? "rgba(252, 165, 165, 0.9)" : "rgba(255, 255, 255, 0.75)"
+                                },
+                                title: overlaysDisabled ? "Enable overlays" : "Disable overlays",
+                                children: /* @__PURE__ */ jsx2(FaLayerGroup, {
+                                    size: Math.max(14, 18 * responsiveScale)
+                                })
+                            }),
+                            swirlProjectId && (showAiContextControl !== null && showAiContextControl !== void 0 ? showAiContextControl : true) && /* @__PURE__ */ jsx2("button", {
                                 className: "sc-ctrl-btn",
                                 onClick: function onClick() {
                                     setShowAiPanel(function(prev) {
@@ -9143,7 +9245,7 @@ var StormcloudVideoPlayerComponent = React2.memo(function(props) {
                                 title: showAiPanel ? "Hide AI context" : "Show AI context",
                                 children: "AI"
                             }),
-                            debugAdTiming && /* @__PURE__ */ jsx2("button", {
+                            debugAdTiming && (showDebugControl !== null && showDebugControl !== void 0 ? showDebugControl : true) && /* @__PURE__ */ jsx2("button", {
                                 className: "sc-ctrl-btn",
                                 onClick: function onClick() {
                                     setShowDebugPanel(function(prev) {
@@ -9245,7 +9347,13 @@ var StormcloudVideoPlayerComponent = React2.memo(function(props) {
         "preload",
         "poster",
         "children",
-        "swirlProjectId"
+        "swirlProjectId",
+        "adcisionChannelId",
+        "disableOverlays",
+        "showAdsControl",
+        "showOverlaysControl",
+        "showAiContextControl",
+        "showDebugControl"
     ];
     var _iteratorNormalCompletion1 = true, _didIteratorError1 = false, _iteratorError1 = undefined;
     try {