stormcloud-video-player 0.3.62 → 0.3.63

package/lib/index.d.cts

@@ -35,6 +35,7 @@ interface StormcloudVideoPlayerConfig {
     licenseKey?: string;
     adPlayerType?: 'ima' | 'hls';
     vastTagUrl?: string;
+    isVmap?: boolean;
     vmapUrl?: string;
     vastMode?: 'adstorm' | 'default';
     minSegmentsBeforePlay?: number;
@@ -177,6 +178,7 @@ declare class StormcloudVideoPlayer {
     private maxPlaceholderDurationMs;
     private isShowingPlaceholder;
     private timeUpdateHandler?;
+    private endedHandler?;
     private emptiedHandler?;
     private readonly tsScte35Pids;
     private readonly pmtPids;
@@ -263,9 +265,11 @@ declare class StormcloudVideoPlayer {
     private markerTypeFromSegmentationTypeId;
     private initializeTracking;
     private sendHeartbeatIfNeeded;
+    private isVmapEnabled;
     private fetchAdConfiguration;
     private fetchAndParseVmap;
     private parseVmapToBreaks;
+    private resolveVmapAdTagUrl;
     private parseVmapTimeOffsetToMs;
     private getAdBreakKey;
     private resolveBreakStartMs;
@@ -295,7 +299,8 @@ declare class StormcloudVideoPlayer {
     private showPlaceholderAndWaitForAds;
     private findCurrentOrNextBreak;
     private onTimeUpdate;
-    private handleMidAdJoin;
+    private onVideoEnded;
+    private handleVmapAdBreak;
     private scheduleAdStopCountdown;
     private clearAdStopTimer;
     private ensureAdStoppedByTimer;
@@ -374,6 +379,7 @@ interface BaseStormcloudPlayerProps {
     showCustomControls?: boolean;
     hideLoadingIndicator?: boolean;
     licenseKey?: string;
+    isVmap?: boolean;
     vmapUrl?: string;
     adFailsafeTimeoutMs?: number;
     minSegmentsBeforePlay?: number;

package/lib/index.d.ts

@@ -35,6 +35,7 @@ interface StormcloudVideoPlayerConfig {
     licenseKey?: string;
     adPlayerType?: 'ima' | 'hls';
     vastTagUrl?: string;
+    isVmap?: boolean;
     vmapUrl?: string;
     vastMode?: 'adstorm' | 'default';
     minSegmentsBeforePlay?: number;
@@ -177,6 +178,7 @@ declare class StormcloudVideoPlayer {
     private maxPlaceholderDurationMs;
     private isShowingPlaceholder;
     private timeUpdateHandler?;
+    private endedHandler?;
     private emptiedHandler?;
     private readonly tsScte35Pids;
     private readonly pmtPids;
@@ -263,9 +265,11 @@ declare class StormcloudVideoPlayer {
     private markerTypeFromSegmentationTypeId;
     private initializeTracking;
     private sendHeartbeatIfNeeded;
+    private isVmapEnabled;
     private fetchAdConfiguration;
     private fetchAndParseVmap;
     private parseVmapToBreaks;
+    private resolveVmapAdTagUrl;
     private parseVmapTimeOffsetToMs;
     private getAdBreakKey;
     private resolveBreakStartMs;
@@ -295,7 +299,8 @@ declare class StormcloudVideoPlayer {
     private showPlaceholderAndWaitForAds;
     private findCurrentOrNextBreak;
     private onTimeUpdate;
-    private handleMidAdJoin;
+    private onVideoEnded;
+    private handleVmapAdBreak;
     private scheduleAdStopCountdown;
     private clearAdStopTimer;
     private ensureAdStoppedByTimer;
@@ -374,6 +379,7 @@ interface BaseStormcloudPlayerProps {
     showCustomControls?: boolean;
     hideLoadingIndicator?: boolean;
     licenseKey?: string;
+    isVmap?: boolean;
     vmapUrl?: string;
     adFailsafeTimeoutMs?: number;
     minSegmentsBeforePlay?: number;

package/lib/index.js

@@ -3494,7 +3494,7 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                                                         var _level_details, _level_details1;
                                                         return (level === null || level === void 0 ? void 0 : (_level_details = level.details) === null || _level_details === void 0 ? void 0 : _level_details.live) === true || (level === null || level === void 0 ? void 0 : (_level_details1 = level.details) === null || _level_details1 === void 0 ? void 0 : _level_details1.type) === "LIVE";
                                                     })) !== null && _ref !== void 0 ? _ref : false;
-                                                    if (!this.isLiveStream && this.vmapBreaks.length === 0 && this.apiVastTagUrl) {
+                                                    if (!this.isVmapEnabled() && !this.isLiveStream && this.vmapBreaks.length === 0 && this.apiVastTagUrl) {
                                                         prerollKey = "synthetic-vod-preroll";
                                                         if (!this.consumedVmapBreakIds.has(prerollKey)) {
                                                             this.vmapBreaks = [
@@ -4077,6 +4077,10 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                     _this.onTimeUpdate(_this.video.currentTime);
                 };
                 this.video.addEventListener("timeupdate", this.timeUpdateHandler);
+                this.endedHandler = function() {
+                    _this.onVideoEnded();
+                };
+                this.video.addEventListener("ended", this.endedHandler);
                 this.emptiedHandler = function() {
                     if (_this.nativeHlsMode && _this.videoSrcProtection && !_this.ima.isAdPlaying()) {
                         if (_this.config.debugAdTiming) {
@@ -5388,6 +5392,13 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                 }
             }
         },
+        {
+            key: "isVmapEnabled",
+            value: function isVmapEnabled() {
+                var _this_config_vmapUrl;
+                return !!(this.config.isVmap && ((_this_config_vmapUrl = this.config.vmapUrl) === null || _this_config_vmapUrl === void 0 ? void 0 : _this_config_vmapUrl.trim()));
+            }
+        },
         {
             key: "fetchAdConfiguration",
             value: function fetchAdConfiguration() {
@@ -5396,7 +5407,7 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                     return _ts_generator(this, function(_state) {
                         switch(_state.label){
                             case 0:
-                                if (!this.config.vmapUrl) return [
+                                if (!this.isVmapEnabled()) return [
                                     3,
                                     2
                                 ];
@@ -5406,7 +5417,12 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                                 ];
                             case 1:
                                 _state.sent();
-                                _state.label = 2;
+                                if (this.config.debugAdTiming) {
+                                    console.log("[StormcloudVideoPlayer] VMAP mode enabled");
+                                }
+                                return [
+                                    2
+                                ];
                             case 2:
                                 vastMode = this.config.vastMode || "default";
                                 if (this.config.debugAdTiming) {
@@ -5574,7 +5590,16 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                     }
                     return [];
                 }
-                var adBreakNodes = Array.from(doc.querySelectorAll("AdBreak, vmap\\:AdBreak"));
+                var VMAP_NS = "http://www.iab.net/videosuite/vmap";
+                var adBreakNodes = Array.from(doc.getElementsByTagNameNS(VMAP_NS, "AdBreak"));
+                if (adBreakNodes.length === 0) {
+                    adBreakNodes = Array.from(doc.querySelectorAll("AdBreak, vmap\\:AdBreak"));
+                }
+                if (adBreakNodes.length === 0) {
+                    adBreakNodes = Array.from(doc.getElementsByTagName("*")).filter(function(el) {
+                        return el.localName === "AdBreak";
+                    });
+                }
                 var parsed = [];
                 adBreakNodes.forEach(function(node, index) {
                     var timeOffsetRaw = (node.getAttribute("timeOffset") || "").trim();
@@ -5582,8 +5607,17 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                     if (startTimeMs == null) {
                         return;
                     }
-                    var adTagNode = node.querySelector("AdTagURI, vmap\\:AdTagURI");
-                    var adTagUrl = ((adTagNode === null || adTagNode === void 0 ? void 0 : adTagNode.textContent) || "").trim();
+                    var adTagNode = node.getElementsByTagNameNS(VMAP_NS, "AdTagURI")[0];
+                    if (!adTagNode) {
+                        var _node_querySelector;
+                        adTagNode = (_node_querySelector = node.querySelector("AdTagURI, vmap\\:AdTagURI")) !== null && _node_querySelector !== void 0 ? _node_querySelector : void 0;
+                    }
+                    if (!adTagNode) {
+                        adTagNode = Array.from(node.getElementsByTagName("*")).find(function(el) {
+                            return el.localName === "AdTagURI";
+                        });
+                    }
+                    var adTagUrl = _this.resolveVmapAdTagUrl(((adTagNode === null || adTagNode === void 0 ? void 0 : adTagNode.textContent) || "").trim());
                     if (!adTagUrl) {
                         return;
                     }
@@ -5602,6 +5636,15 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                 return parsed;
             }
         },
+        {
+            key: "resolveVmapAdTagUrl",
+            value: function resolveVmapAdTagUrl(url) {
+                if (!url) {
+                    return "";
+                }
+                return url.replace(/\[timestamp\]/gi, String(Date.now())).replace(/\$\{GDPR\}/gi, "0").trim();
+            }
+        },
         {
             key: "parseVmapTimeOffsetToMs",
             value: function parseVmapTimeOffsetToMs(timeOffset) {
@@ -5624,6 +5667,14 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                     var millis = Number(ms.padEnd(3, "0").slice(0, 3));
                     return (hours * 3600 + minutes * 60 + seconds) * 1e3 + millis;
                 }
+                var msOnly = timeOffset.match(/^(\d{1,2}):(\d{2})(?:\.(\d{1,3}))?$/);
+                if (msOnly) {
+                    var _msOnly = _sliced_to_array(msOnly, 4), mm1 = _msOnly[1], ss1 = _msOnly[2], tmp1 = _msOnly[3], ms1 = tmp1 === void 0 ? "0" : tmp1;
+                    var minutes1 = Number(mm1);
+                    var seconds1 = Number(ss1);
+                    var millis1 = Number(ms1.padEnd(3, "0").slice(0, 3));
+                    return (minutes1 * 60 + seconds1) * 1e3 + millis1;
+                }
                 var percent = timeOffset.match(/^(\d+(?:\.\d+)?)%$/);
                 if (percent) {
                     var ratio = Number(percent[1]) / 100;
@@ -7139,23 +7190,49 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
             key: "onTimeUpdate",
             value: function onTimeUpdate(currentTimeSec) {
                 var _this = this;
+                if (!this.isVmapEnabled() || this.vmapBreaks.length === 0) {
+                    return;
+                }
                 if (this.ima.isAdPlaying() || this.inAdBreak) return;
                 var nowMs = currentTimeSec * 1e3;
                 var breakToPlay = this.findBreakForTime(nowMs);
                 if (breakToPlay) {
-                    void this.handleMidAdJoin(breakToPlay, nowMs).catch(function(error) {
+                    void this.handleVmapAdBreak(breakToPlay, nowMs).catch(function(error) {
+                        if (_this.config.debugAdTiming) {
+                            console.warn("[StormcloudVideoPlayer] VMAP ad break failed gracefully:", error);
+                        }
+                    });
+                }
+            }
+        },
+        {
+            key: "onVideoEnded",
+            value: function onVideoEnded() {
+                var _this = this;
+                if (!this.isVmapEnabled() || this.vmapBreaks.length === 0) {
+                    return;
+                }
+                if (this.ima.isAdPlaying() || this.inAdBreak) {
+                    return;
+                }
+                var durationMs = Number.isFinite(this.video.duration) ? Math.floor(this.video.duration * 1e3) : 0;
+                var postroll = this.vmapBreaks.find(function(b) {
+                    return b.startTimeMs === -1 && !_this.consumedVmapBreakIds.has(_this.getAdBreakKey(b));
+                });
+                if (postroll) {
+                    void this.handleVmapAdBreak(postroll, durationMs).catch(function(error) {
                         if (_this.config.debugAdTiming) {
-                            console.warn("[StormcloudVideoPlayer] Mid-roll VMAP join failed gracefully:", error);
+                            console.warn("[StormcloudVideoPlayer] VMAP post-roll failed gracefully:", error);
                         }
                     });
                 }
             }
         },
         {
-            key: "handleMidAdJoin",
-            value: function handleMidAdJoin(adBreak, nowMs) {
+            key: "handleVmapAdBreak",
+            value: function handleVmapAdBreak(adBreak, nowMs) {
                 return _async_to_generator(function() {
-                    var _adBreak_durationMs, _this_config_driftToleranceMs, key, breakStartMs, durationMs, endMs, tol, inWindow, remainingMs, tags, first, rest, error;
+                    var _adBreak_durationMs, key, breakStartMs, durationMs, endMs, inWindow, tags, first, rest, error;
                     return _ts_generator(this, function(_state) {
                         switch(_state.label){
                             case 0:
@@ -7173,25 +7250,28 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                                 }
                                 durationMs = (_adBreak_durationMs = adBreak.durationMs) !== null && _adBreak_durationMs !== void 0 ? _adBreak_durationMs : 0;
                                 endMs = breakStartMs + durationMs;
-                                tol = (_this_config_driftToleranceMs = this.config.driftToleranceMs) !== null && _this_config_driftToleranceMs !== void 0 ? _this_config_driftToleranceMs : 1e3;
-                                inWindow = durationMs > 0 ? nowMs > breakStartMs && nowMs < endMs : nowMs + tol >= breakStartMs;
+                                inWindow = durationMs > 0 ? nowMs >= breakStartMs && nowMs < endMs : nowMs >= breakStartMs;
                                 if (!inWindow) return [
                                     3,
                                     4
                                 ];
                                 this.consumedVmapBreakIds.add(key);
-                                remainingMs = durationMs > 0 ? Math.max(0, endMs - nowMs) : 0;
-                                tags = this.selectVastTagsForBreak(adBreak) || (this.apiVastTagUrl ? [
-                                    this.apiVastTagUrl
-                                ] : void 0);
-                                if (!(tags && tags.length > 0)) return [
-                                    3,
-                                    4
-                                ];
+                                tags = this.selectVastTagsForBreak(adBreak);
+                                if (!tags || tags.length === 0) {
+                                    return [
+                                        2
+                                    ];
+                                }
                                 first = tags[0];
                                 rest = tags.slice(1);
                                 this.adPodQueue = rest;
                                 this.ima.updateOriginalMutedState(this.video.muted, this.video.volume);
+                                this.showAds = true;
+                                this.inAdBreak = true;
+                                this.currentAdBreakStartWallClockMs = Date.now();
+                                if (!this.video.paused) {
+                                    this.video.pause();
+                                }
                                 _state.label = 1;
                             case 1:
                                 _state.trys.push([
@@ -7206,10 +7286,6 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                                 ];
                             case 2:
                                 _state.sent();
-                                this.inAdBreak = true;
-                                this.expectedAdBreakDurationMs = remainingMs;
-                                this.currentAdBreakStartWallClockMs = Date.now();
-                                this.scheduleAdStopCountdown(remainingMs);
                                 return [
                                     3,
                                     4
@@ -7217,8 +7293,10 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                             case 3:
                                 error = _state.sent();
                                 this.adPodQueue = [];
+                                this.inAdBreak = false;
+                                this.showAds = false;
                                 if (this.config.debugAdTiming) {
-                                    console.warn("[StormcloudVideoPlayer] Mid-roll VMAP ad request failed:", error);
+                                    console.warn("[StormcloudVideoPlayer] VMAP ad request failed:", error);
                                 }
                                 return [
                                     3,
@@ -7889,16 +7967,18 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
         {
             key: "selectVastTagsForBreak",
             value: function selectVastTagsForBreak(b) {
+                var _this = this;
                 if (!b || !b.vastTagUrl) return void 0;
-                if (b.vastTagUrl.includes(",")) {
-                    return b.vastTagUrl.split(",").map(function(s) {
-                        return s.trim();
+                var resolvedUrl = this.resolveVmapAdTagUrl(b.vastTagUrl);
+                if (resolvedUrl.includes(",")) {
+                    return resolvedUrl.split(",").map(function(s) {
+                        return _this.resolveVmapAdTagUrl(s.trim());
                     }).filter(function(s) {
                         return s.length > 0;
                     });
                 }
                 return [
-                    b.vastTagUrl
+                    resolvedUrl
                 ];
             }
         },
@@ -7930,9 +8010,7 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
         {
             key: "findBreakForTime",
             value: function findBreakForTime(nowMs) {
-                var _this_config_driftToleranceMs;
                 var schedule = this.vmapBreaks;
-                var tol = (_this_config_driftToleranceMs = this.config.driftToleranceMs) !== null && _this_config_driftToleranceMs !== void 0 ? _this_config_driftToleranceMs : 1e3;
                 var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
                 try {
                     for(var _iterator = schedule[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
@@ -7944,9 +8022,14 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                         if (breakStartMs == null) {
                             continue;
                         }
-                        var end = breakStartMs + (b.durationMs || 0);
-                        var effectiveTol = breakStartMs === 0 ? Math.max(tol, 3e4) : tol;
-                        if (nowMs >= breakStartMs && (b.durationMs ? nowMs < end : nowMs <= breakStartMs + effectiveTol)) {
+                        if (b.durationMs) {
+                            var end = breakStartMs + b.durationMs;
+                            if (nowMs >= breakStartMs && nowMs < end) {
+                                return b;
+                            }
+                            continue;
+                        }
+                        if (nowMs >= breakStartMs) {
                             return b;
                         }
                     }
@@ -8154,6 +8237,10 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                     this.video.removeEventListener("timeupdate", this.timeUpdateHandler);
                     delete this.timeUpdateHandler;
                 }
+                if (this.endedHandler) {
+                    this.video.removeEventListener("ended", this.endedHandler);
+                    delete this.endedHandler;
+                }
                 if (this.emptiedHandler) {
                     this.video.removeEventListener("emptied", this.emptiedHandler);
                     delete this.emptiedHandler;
@@ -8179,6 +8266,7 @@ var CRITICAL_PROPS = [
     "allowNativeHls",
     "isLiveStream",
     "licenseKey",
+    "isVmap",
     "vmapUrl",
     "lowLatencyMode",
     "driftToleranceMs",
@@ -8187,7 +8275,7 @@ var CRITICAL_PROPS = [
 var CONTROLS_HIDE_DELAY = 3e3;
 var DEFAULT_PLAYER_ASPECT_RATIO = 16 / 9;
 var StormcloudVideoPlayerComponent = React.memo(function(props) {
-    var src = props.src, autoplay = props.autoplay, muted = props.muted, lowLatencyMode = props.lowLatencyMode, allowNativeHls = props.allowNativeHls, isLiveStream = props.isLiveStream, 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, vastMode = props.vastMode, vastTagUrl = props.vastTagUrl, vmapUrl = props.vmapUrl, adPlayerType = props.adPlayerType, minSegmentsBeforePlay = props.minSegmentsBeforePlay, restVideoAttrs = _object_without_properties(props, [
+    var src = props.src, autoplay = props.autoplay, muted = props.muted, lowLatencyMode = props.lowLatencyMode, allowNativeHls = props.allowNativeHls, isLiveStream = props.isLiveStream, 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, vastMode = props.vastMode, vastTagUrl = props.vastTagUrl, isVmap = props.isVmap, vmapUrl = props.vmapUrl, adPlayerType = props.adPlayerType, minSegmentsBeforePlay = props.minSegmentsBeforePlay, restVideoAttrs = _object_without_properties(props, [
         "src",
         "autoplay",
         "muted",
@@ -8215,6 +8303,7 @@ var StormcloudVideoPlayerComponent = React.memo(function(props) {
         "licenseKey",
         "vastMode",
         "vastTagUrl",
+        "isVmap",
         "vmapUrl",
         "adPlayerType",
         "minSegmentsBeforePlay"
@@ -8358,6 +8447,7 @@ var StormcloudVideoPlayerComponent = React.memo(function(props) {
         allowNativeHls,
         isLiveStream,
         licenseKey,
+        isVmap,
         vmapUrl,
         lowLatencyMode,
         driftToleranceMs,
@@ -8402,6 +8492,7 @@ var StormcloudVideoPlayerComponent = React.memo(function(props) {
         if (licenseKey !== void 0) cfg.licenseKey = licenseKey;
         if (vastMode !== void 0) cfg.vastMode = vastMode;
         if (vastTagUrl !== void 0) cfg.vastTagUrl = vastTagUrl;
+        if (isVmap !== void 0) cfg.isVmap = isVmap;
         if (vmapUrl !== void 0) cfg.vmapUrl = vmapUrl;
         if (adPlayerType !== void 0) cfg.adPlayerType = adPlayerType;
         if (minSegmentsBeforePlay !== void 0) cfg.minSegmentsBeforePlay = minSegmentsBeforePlay;
@@ -9565,6 +9656,7 @@ var defaultProps = {
     showCustomControls: false,
     hideLoadingIndicator: false,
     licenseKey: "",
+    isVmap: false,
     vmapUrl: "",
     adFailsafeTimeoutMs: 1e4,
     minSegmentsBeforePlay: 2,
@@ -10512,6 +10604,7 @@ var SUPPORTED_PROPS = [
     "debugAdTiming",
     "showCustomControls",
     "licenseKey",
+    "isVmap",
     "vmapUrl",
     "adFailsafeTimeoutMs",
     "minSegmentsBeforePlay",