@brndts/brndts-ads 1.14.3 → 1.14.5

package/dist/index.js

@@ -468,13 +468,13 @@ var __toCommonJS = function(mod) {
 var require_events = __commonJS({
     "node_modules/events/events.js": function(exports, module2) {
         "use strict";
-        var R = (typeof Reflect === "undefined" ? "undefined" : _type_of(Reflect)) === "object" ? Reflect : null;
-        var ReflectApply = R && typeof R.apply === "function" ? R.apply : function ReflectApply2(target, receiver, args) {
+        var R2 = (typeof Reflect === "undefined" ? "undefined" : _type_of(Reflect)) === "object" ? Reflect : null;
+        var ReflectApply = R2 && typeof R2.apply === "function" ? R2.apply : function ReflectApply2(target, receiver, args) {
             return Function.prototype.apply.call(target, receiver, args);
         };
         var ReflectOwnKeys;
-        if (R && typeof R.ownKeys === "function") {
-            ReflectOwnKeys = R.ownKeys;
+        if (R2 && typeof R2.ownKeys === "function") {
+            ReflectOwnKeys = R2.ownKeys;
         } else if (Object.getOwnPropertySymbols) {
             ReflectOwnKeys = function ReflectOwnKeys2(target) {
                 return Object.getOwnPropertyNames(target).concat(Object.getOwnPropertySymbols(target));
@@ -68506,7 +68506,7 @@ var RegionContent = /*#__PURE__*/ function() {
         {
             key: "renderSandboxedContent",
             value: function renderSandboxedContent() {
-                var _iframe_contentWindow, _this_content_extra_sz, _this_content_extra, _this_content, _this_content_extra_sz1, _this_content_extra1, _this_content1;
+                var _this_content_extra_sz, _this_content_extra, _this_content, _this_content_extra_sz1, _this_content_extra1, _this_content1, _this_content_extra_sz2, _this_content_extra2, _this_content2, _this_content_extra_sz3, _this_content_extra3, _this_content3, _iframe_contentWindow;
                 var iframe = document.createElement("iframe");
                 iframe.name = "prebid_ads_iframe_".concat(this.id);
                 iframe.title = "3rd party ad content";
@@ -68523,15 +68523,19 @@ var RegionContent = /*#__PURE__*/ function() {
                 iframe.style.border = "0";
                 iframe.style.margin = "0";
                 iframe.style.overflow = "hidden";
-                iframe.style.width = "100%";
-                iframe.style.height = "100%";
+                iframe.style.width = "".concat(((_this_content = this.content) === null || _this_content === void 0 ? void 0 : (_this_content_extra = _this_content.extra) === null || _this_content_extra === void 0 ? void 0 : (_this_content_extra_sz = _this_content_extra.sz) === null || _this_content_extra_sz === void 0 ? void 0 : _this_content_extra_sz.w) ? this.content.extra.sz.w + "px" : "100%", ";");
+                iframe.style.height = "".concat(((_this_content1 = this.content) === null || _this_content1 === void 0 ? void 0 : (_this_content_extra1 = _this_content1.extra) === null || _this_content_extra1 === void 0 ? void 0 : (_this_content_extra_sz1 = _this_content_extra1.sz) === null || _this_content_extra_sz1 === void 0 ? void 0 : _this_content_extra_sz1.h) ? this.content.extra.sz.h + "px" : "100%", ";");
+                iframe.width = "".concat(((_this_content2 = this.content) === null || _this_content2 === void 0 ? void 0 : (_this_content_extra2 = _this_content2.extra) === null || _this_content_extra2 === void 0 ? void 0 : (_this_content_extra_sz2 = _this_content_extra2.sz) === null || _this_content_extra_sz2 === void 0 ? void 0 : _this_content_extra_sz2.w) ? this.content.extra.sz.w : "100%", ";");
+                iframe.height = "".concat(((_this_content3 = this.content) === null || _this_content3 === void 0 ? void 0 : (_this_content_extra3 = _this_content3.extra) === null || _this_content_extra3 === void 0 ? void 0 : (_this_content_extra_sz3 = _this_content_extra3.sz) === null || _this_content_extra_sz3 === void 0 ? void 0 : _this_content_extra_sz3.h) ? this.content.extra.sz.h : "100%", ";");
+                var scale = this.getScaleValue();
+                iframe.style.transform = "scale(".concat(scale.x, ", ").concat(scale.y, ")");
+                iframe.style.transformOrigin = "top left";
                 this.container.appendChild(iframe);
                 var iframeDoc = (_iframe_contentWindow = iframe.contentWindow) === null || _iframe_contentWindow === void 0 ? void 0 : _iframe_contentWindow.document;
                 if (!iframeDoc) return;
                 var stringContent = this.content.asStr;
-                var scale = this.getScaleValue();
                 iframeDoc.open();
-                iframeDoc.write('\n        <!DOCTYPE html>\n        <html>\n        <head>\n          <meta charset="utf-8">\n          <meta name="viewport" content="width=device-width, initial-scale=1">\n          <style>\n\n            html, body {\n              width: 100%;\n              height: 100%;\n              margin: 0;\n              padding: 0;\n              overflow: hidden;\n            }\n            .ad-container {\n            width: '.concat(((_this_content = this.content) === null || _this_content === void 0 ? void 0 : (_this_content_extra = _this_content.extra) === null || _this_content_extra === void 0 ? void 0 : (_this_content_extra_sz = _this_content_extra.sz) === null || _this_content_extra_sz === void 0 ? void 0 : _this_content_extra_sz.w) ? this.content.extra.sz.w + "px" : "100%", ";\n            height: ").concat(((_this_content1 = this.content) === null || _this_content1 === void 0 ? void 0 : (_this_content_extra1 = _this_content1.extra) === null || _this_content_extra1 === void 0 ? void 0 : (_this_content_extra_sz1 = _this_content_extra1.sz) === null || _this_content_extra_sz1 === void 0 ? void 0 : _this_content_extra_sz1.h) ? this.content.extra.sz.h + "px" : "100%", ";\n              transform: scale(").concat(scale.x, ", ").concat(scale.y, ');\n              transform-origin: top left;\n            }\n            .ad-container > * {\n              padding: 0 !important;\n            }\n          </style>\n        </head>\n        <body>\n          <div class="ad-container">').concat(stringContent, "</div>\n        </body>\n        </html>\n      "));
+                iframeDoc.write('\n        <!DOCTYPE html>\n        <html>\n        <head>\n          <meta charset="utf-8">\n          <meta name="viewport" content="width=device-width, initial-scale=1">\n          <style>\n\n            html, body {\n              width: 100%;\n              height: 100%;\n              margin: 0;\n              padding: 0;\n              overflow: hidden;\n            }\n            .ad-container > * {\n              padding: 0 !important;\n            }\n          </style>\n        </head>\n        <body>\n          <div class="ad-container">'.concat(stringContent, "</div>\n        </body>\n        </html>\n      "));
                 iframeDoc.close();
             }
         },
@@ -71569,29 +71573,125 @@ var PrebidConfigBuilder = /*#__PURE__*/ function() {
         {
             key: "addConsent",
             value: function addConsent(consent) {
-                if (// @ts-expect-error
-                window.__tcfapi !== void 0 && // @ts-expect-error
-                typeof window.__tcfapi === "function") {
-                    this.config.consentManagement = {
+                var hasTcfCmp = typeof window.__tcfapi === "function";
+                var hasGppCmp = typeof window.__gpp === "function";
+                var cm = {};
+                if (hasTcfCmp) {
+                    cm.gdpr = {
                         cmpApi: "iab",
                         timeout: 8e3,
-                        allowAuctionWithoutConsent: true,
-                        defaultGdprScope: true
+                        defaultGdprScope: true,
+                        rules: [
+                            {
+                                purpose: "basicAds",
+                                enforcePurpose: true,
+                                enforceVendor: true,
+                                softVendorExceptions: [
+                                    "valuad",
+                                    "improvedigital"
+                                ]
+                            },
+                            {
+                                purpose: "storage",
+                                enforcePurpose: true,
+                                enforceVendor: true,
+                                softVendorExceptions: [
+                                    "valuad",
+                                    "improvedigital"
+                                ]
+                            },
+                            // add P4 so UFPD can flow when CMP gives consent
+                            {
+                                purpose: "personalizedAds",
+                                enforcePurpose: true,
+                                enforceVendor: true
+                            },
+                            {
+                                purpose: "measurement",
+                                enforcePurpose: true,
+                                enforceVendor: true
+                            }
+                        ]
                     };
                 } else {
-                    this.config.consentManagement = {
+                    var _gdpr_purpose_consents, _gdpr_purpose, _gdpr_purpose_consents1, _gdpr_purpose1, _gdpr_purpose_consents2, _gdpr_purpose2, _gdpr_purpose_consents3, _gdpr_purpose3;
+                    var gdpr = typeof consent.gdpr === "function" ? consent.gdpr() : void 0;
+                    var _gdpr_gdprApplies, _gdpr_purpose_consents_1, _gdpr_purpose_consents_2, _gdpr_purpose_consents_4, _gdpr_purpose_consents_7;
+                    cm.gdpr = {
                         cmpApi: "static",
                         timeout: 8e3,
-                        allowAuctionWithoutConsent: true,
                         defaultGdprScope: true,
                         consentData: {
                             getTCData: {
-                                tcString: consent.gdpr().tcString || "",
-                                gdprApplies: consent.gdpr().gdprApplies || false
+                                tcString: (gdpr === null || gdpr === void 0 ? void 0 : gdpr.tcString) || "",
+                                gdprApplies: (_gdpr_gdprApplies = gdpr === null || gdpr === void 0 ? void 0 : gdpr.gdprApplies) !== null && _gdpr_gdprApplies !== void 0 ? _gdpr_gdprApplies : true,
+                                // Grant P1, P2, P4, P7 so modules won't be denied in static mode
+                                purpose: {
+                                    consents: {
+                                        "1": (_gdpr_purpose_consents_1 = gdpr === null || gdpr === void 0 ? void 0 : (_gdpr_purpose = gdpr.purpose) === null || _gdpr_purpose === void 0 ? void 0 : (_gdpr_purpose_consents = _gdpr_purpose.consents) === null || _gdpr_purpose_consents === void 0 ? void 0 : _gdpr_purpose_consents["1"]) !== null && _gdpr_purpose_consents_1 !== void 0 ? _gdpr_purpose_consents_1 : true,
+                                        // storage (accessDevice)
+                                        "2": (_gdpr_purpose_consents_2 = gdpr === null || gdpr === void 0 ? void 0 : (_gdpr_purpose1 = gdpr.purpose) === null || _gdpr_purpose1 === void 0 ? void 0 : (_gdpr_purpose_consents1 = _gdpr_purpose1.consents) === null || _gdpr_purpose_consents1 === void 0 ? void 0 : _gdpr_purpose_consents1["2"]) !== null && _gdpr_purpose_consents_2 !== void 0 ? _gdpr_purpose_consents_2 : true,
+                                        // basic ads (fetchBids)
+                                        "4": (_gdpr_purpose_consents_4 = gdpr === null || gdpr === void 0 ? void 0 : (_gdpr_purpose2 = gdpr.purpose) === null || _gdpr_purpose2 === void 0 ? void 0 : (_gdpr_purpose_consents2 = _gdpr_purpose2.consents) === null || _gdpr_purpose_consents2 === void 0 ? void 0 : _gdpr_purpose_consents2["4"]) !== null && _gdpr_purpose_consents_4 !== void 0 ? _gdpr_purpose_consents_4 : true,
+                                        // personalized ads (transmitUfpd)
+                                        "7": (_gdpr_purpose_consents_7 = gdpr === null || gdpr === void 0 ? void 0 : (_gdpr_purpose3 = gdpr.purpose) === null || _gdpr_purpose3 === void 0 ? void 0 : (_gdpr_purpose_consents3 = _gdpr_purpose3.consents) === null || _gdpr_purpose_consents3 === void 0 ? void 0 : _gdpr_purpose_consents3["7"]) !== null && _gdpr_purpose_consents_7 !== void 0 ? _gdpr_purpose_consents_7 : true
+                                    }
+                                }
                             }
+                        },
+                        rules: [
+                            // In static mode: enforce purpose, skip vendor checks
+                            {
+                                purpose: "basicAds",
+                                enforcePurpose: true,
+                                enforceVendor: false
+                            },
+                            {
+                                purpose: "storage",
+                                enforcePurpose: true,
+                                enforceVendor: false
+                            },
+                            {
+                                purpose: "personalizedAds",
+                                enforcePurpose: true,
+                                enforceVendor: false
+                            },
+                            // <-- allows transmitUfpd
+                            {
+                                purpose: "measurement",
+                                enforcePurpose: true,
+                                enforceVendor: false
+                            }
+                        ]
+                    };
+                    this.config.allowActivities = _object_spread_props(_object_spread({}, this.config.allowActivities), {
+                        accessDevice: {
+                            rules: [
+                                {
+                                    allow: true
+                                }
+                            ]
+                        }
+                    });
+                }
+                if (hasGppCmp) {
+                    cm.gpp = {
+                        cmpApi: "iab",
+                        timeout: 8e3
+                    };
+                } else {
+                    var gpp = typeof consent.gpp === "function" ? consent.gpp() : void 0;
+                    cm.gpp = {
+                        cmpApi: "static",
+                        timeout: 8e3,
+                        consentData: {
+                            gppString: (gpp === null || gpp === void 0 ? void 0 : gpp.gppString) || "",
+                            applicableSections: /* gpp?.applicableSections ?? gpp?.sectionList ?? */ [],
+                            sectionList: /* gpp?.sectionList ?? gpp?.applicableSections ?? */ []
                         }
                     };
                 }
+                this.config.consentManagement = cm;
                 return this;
             }
         },
@@ -73856,25 +73956,15 @@ var YoutubeMediaElement = /*#__PURE__*/ function(GenericMediaElement) {
             }
         },
         {
-            key: "assurePlaybackState",
-            value: function assurePlaybackState(play) {
-                if (this.media && this.media.hasPlayed) {
-                    var _this_instance;
-                    var newVideoIndex = (_this_instance = this.instance) === null || _this_instance === void 0 ? void 0 : _this_instance.getPlaylistIndex();
-                    if (newVideoIndex !== this.currentVideoIndex) {
-                        this.currentVideoIndex = newVideoIndex;
-                        if (this._source && this._source.type === "playlist") {
-                            var _this__source;
-                            this._source.videoId = this.videoId;
-                            this.emit("UPDATED_SOURCE", (_this__source = this._source) === null || _this__source === void 0 ? void 0 : _this__source.videoId);
-                        }
-                    }
+            key: "checkForVideoIdChanges",
+            value: function checkForVideoIdChanges() {
+                if (!this._source || this._source.type !== "playlist") {
+                    return;
                 }
-                if (this.media && play && !this.media.hasPlayed) {
-                    this.media.hasPlayed = true;
-                    if (this._source) {
-                        this._source.videoId = this.videoId;
-                    }
+                var currentVideoId = this.videoId;
+                if (currentVideoId && currentVideoId.trim() !== "" && currentVideoId !== this._source.videoId) {
+                    this._source.videoId = currentVideoId;
+                    this.emit("UPDATED_SOURCE", this._source.videoId);
                 }
             }
         },
@@ -73903,13 +73993,11 @@ var YoutubeMediaElement = /*#__PURE__*/ function(GenericMediaElement) {
             key: "handleYTPlayerReady",
             value: function handleYTPlayerReady(event) {
                 var _this = this;
-                var _this_instance;
                 if (this.instance) {
                     this.context.logger.warn("Instance already found!");
                     return;
                 }
                 this.instance = event.target;
-                this.currentVideoIndex = (_this_instance = this.instance) === null || _this_instance === void 0 ? void 0 : _this_instance.getPlaylistIndex();
                 this.ready = true;
                 this.observeResize();
                 this.context.store.dispatch({
@@ -73924,6 +74012,7 @@ var YoutubeMediaElement = /*#__PURE__*/ function(GenericMediaElement) {
                     if (newState !== _this.state) {
                         _this.handlePlayerStateChange(newState);
                     }
+                    _this.checkForVideoIdChanges();
                 }, 10);
             }
         },
@@ -73945,19 +74034,16 @@ var YoutubeMediaElement = /*#__PURE__*/ function(GenericMediaElement) {
                     case -1:
                         break;
                     case 0:
-                        this.assurePlaybackState(false);
                         this.context.store.dispatch({
                             type: "PAUSE"
                         });
                         break;
                     case 1:
-                        this.assurePlaybackState(true);
                         this.context.store.dispatch({
                             type: "PLAY"
                         });
                         break;
                     case 2:
-                        this.assurePlaybackState(false);
                         this.context.store.dispatch({
                             type: "PAUSE"
                         });
@@ -74214,7 +74300,6 @@ var YoutubeMediaElement = /*#__PURE__*/ function(GenericMediaElement) {
             key: "play",
             value: function play() {
                 var _this_instance;
-                this.assurePlaybackState(true);
                 (_this_instance = this.instance) === null || _this_instance === void 0 ? void 0 : _this_instance.playVideo();
                 return Promise.resolve();
             }
@@ -74223,7 +74308,6 @@ var YoutubeMediaElement = /*#__PURE__*/ function(GenericMediaElement) {
             key: "pause",
             value: function pause() {
                 var _this_instance;
-                this.assurePlaybackState(false);
                 (_this_instance = this.instance) === null || _this_instance === void 0 ? void 0 : _this_instance.pauseVideo();
                 return Promise.resolve();
             }
@@ -74819,6 +74903,9 @@ var BradmaxMediaElement = /*#__PURE__*/ function(GenericMediaElement) {
         {
             key: "handlePlayEvent",
             value: function handlePlayEvent() {
+                if (!this.ready) {
+                    this.mediaIsReady();
+                }
                 this.emit("PLAY");
                 this.context.store.dispatch({
                     type: "PLAY"
@@ -74828,6 +74915,9 @@ var BradmaxMediaElement = /*#__PURE__*/ function(GenericMediaElement) {
         {
             key: "handlePauseEvent",
             value: function handlePauseEvent() {
+                if (!this.ready) {
+                    this.mediaIsReady();
+                }
                 this.emit("PAUSED");
                 this.context.store.dispatch({
                     type: "PAUSE"
@@ -74837,12 +74927,18 @@ var BradmaxMediaElement = /*#__PURE__*/ function(GenericMediaElement) {
         {
             key: "handleSeekingEvent",
             value: function handleSeekingEvent() {
+                if (!this.ready) {
+                    this.mediaIsReady();
+                }
                 this.emit("SEEKING");
             }
         },
         {
             key: "handleSeekedEvent",
             value: function handleSeekedEvent() {
+                if (!this.ready) {
+                    this.mediaIsReady();
+                }
                 this.emit("SEEKED");
             }
         },
@@ -76818,6 +76914,22 @@ var VideoRegionsDataCollection = /*#__PURE__*/ function() {
                 }
                 return this.missingInfo[keys[keys.length - 1]];
             }
+        },
+        {
+            key: "getLoadedPercentage",
+            value: function getLoadedPercentage() {
+                if (this.isComplete) {
+                    return 100;
+                }
+                if (this.timestampList.length === 0) {
+                    return 0;
+                }
+                ;
+                var firstMissingTimestamp = Object.keys(this.missingInfo).sort(function(a, b) {
+                    return parseFloat(a) - parseFloat(b);
+                })[0];
+                return parseFloat(firstMissingTimestamp) / this.totalLengthSeconds * 100;
+            }
         }
     ]);
     return VideoRegionsDataCollection;
@@ -76848,6 +76960,7 @@ var VideoRegionsDataManager = /*#__PURE__*/ function(_import_events4_EventEmitte
             value: function handlePredictionResult(data) {
                 var _this_cache;
                 this.regionsData.append(data);
+                this.emit("UPDATE");
                 (_this_cache = this.cache) === null || _this_cache === void 0 ? void 0 : _this_cache.update(data);
             }
         },
@@ -76856,6 +76969,7 @@ var VideoRegionsDataManager = /*#__PURE__*/ function(_import_events4_EventEmitte
             value: function handlePredictionCompleted() {
                 var _this_logger;
                 (_this_logger = this.logger) === null || _this_logger === void 0 ? void 0 : _this_logger.log("Prediction completed!");
+                this.emit("UPDATE");
             }
         },
         {
@@ -76923,6 +77037,12 @@ var VideoRegionsDataManager = /*#__PURE__*/ function(_import_events4_EventEmitte
                 return this.regionsData.get(timestamp);
             }
         },
+        {
+            key: "progress",
+            value: function progress() {
+                return this.regionsData.getLoadedPercentage();
+            }
+        },
         {
             key: "dumps",
             value: function dumps(from, to) {
@@ -76948,6 +77068,7 @@ var VideoRegionsDataManager = /*#__PURE__*/ function(_import_events4_EventEmitte
                     this.service.send("stop");
                     this.service.destroy();
                     this.regionsData.load(data);
+                    this.emit("UPDATE");
                     return;
                 }
                 if (typeof window === "undefined") {
@@ -76977,6 +77098,7 @@ var VideoRegionsDataManager = /*#__PURE__*/ function(_import_events4_EventEmitte
                             _this.service.send("stop");
                             _this.service.destroy();
                             _this.regionsData.load(parsed);
+                            _this.emit("UPDATE");
                         } catch (err) {
                             var _this_logger;
                             (_this_logger = _this.logger) === null || _this_logger === void 0 ? void 0 : _this_logger.error("Failed to load data:", err);
@@ -80958,6 +81080,59 @@ var ProgressBar = /*#__PURE__*/ function() {
     ]);
     return ProgressBar;
 }();
+// src/Ads/VideoAds/UI/Controls/Components/ProgressIndicator.ts
+var NS = "http://www.w3.org/2000/svg";
+var BOX_S = 16;
+var R = 6;
+var CIRC = 2 * Math.PI * R;
+var ProgressBanner = /*#__PURE__*/ function() {
+    function ProgressBanner() {
+        _class_call_check(this, ProgressBanner);
+        this.view = document.createElement("div");
+        this.view.classList.add("progress-banner");
+        var circleWrap = document.createElement("div");
+        circleWrap.classList.add("progress-circle");
+        circleWrap.style.width = "".concat(BOX_S, "px");
+        circleWrap.style.height = "".concat(BOX_S, "px");
+        var svg = document.createElementNS(NS, "svg");
+        svg.setAttribute("viewBox", "0 0 ".concat(BOX_S, " ").concat(BOX_S));
+        var bg = document.createElementNS(NS, "circle");
+        bg.setAttribute("cx", "".concat(BOX_S / 2));
+        bg.setAttribute("cy", "".concat(BOX_S / 2));
+        bg.setAttribute("r", R.toString());
+        bg.classList.add("bg");
+        svg.appendChild(bg);
+        this.fg = document.createElementNS(NS, "circle");
+        this.fg.setAttribute("cx", "".concat(BOX_S / 2));
+        this.fg.setAttribute("cy", "".concat(BOX_S / 2));
+        this.fg.setAttribute("r", R.toString());
+        this.fg.classList.add("fg");
+        this.fg.setAttribute("stroke-dasharray", "".concat(CIRC));
+        this.fg.setAttribute("stroke-dashoffset", "".concat(CIRC));
+        svg.setAttribute("tabindex", "0");
+        svg.appendChild(this.fg);
+        circleWrap.appendChild(svg);
+        this.view.appendChild(circleWrap);
+        this.view.setAttribute("aria-label", "Video processing is 0% complete.");
+        this.label = document.createElement("span");
+        this.label.classList.add("progress-label");
+        this.view.appendChild(this.label);
+        this.setValue(0);
+    }
+    _create_class(ProgressBanner, [
+        {
+            /** Update the banner (0 – 100) */ key: "setValue",
+            value: function setValue(value2) {
+                var offset = CIRC - value2 / 100 * CIRC;
+                this.fg.setAttribute("stroke-dashoffset", "".concat(offset));
+                var text2 = "Video processing is ".concat(Math.ceil(value2), "% complete.");
+                this.label.textContent = text2;
+                this.view.setAttribute("aria-label", text2);
+            }
+        }
+    ]);
+    return ProgressBanner;
+}();
 // src/Ads/VideoAds/UI/Controls/Components/BottomBar/ControlBottomBar.ts
 var ControlBottomBar = /*#__PURE__*/ function() {
     function ControlBottomBar(context, events) {
@@ -81094,6 +81269,46 @@ var DailymotionBottomBar = /*#__PURE__*/ function() {
     ]);
     return DailymotionBottomBar;
 }();
+var NativeBottomBar = /*#__PURE__*/ function() {
+    function NativeBottomBar(context, events) {
+        var _this = this;
+        _class_call_check(this, NativeBottomBar);
+        this.buttons = {};
+        this.context = context;
+        this.events = events;
+        this.controlsContainer = document.createElement("div");
+        this.controlsContainer.id = "BRNDTS_CTLBB";
+        this.controlsContainer.dataset.type = "N_CTLBB";
+        var topElement = document.createElement("div");
+        topElement.classList.add("BRNDTS_CTLBB_TOP");
+        this.controlsContainer.appendChild(topElement);
+        var ind = new ProgressBanner();
+        this.context.store.subscribe(this.handleStateChange.bind(this));
+        this.context.data.on("UPDATE", function() {
+            ind.setValue(_this.context.data.progress());
+        });
+        topElement.appendChild(ind.view);
+    }
+    _create_class(NativeBottomBar, [
+        {
+            key: "handleStateChange",
+            value: function handleStateChange(state) {}
+        },
+        {
+            key: "view",
+            get: function get() {
+                return this.controlsContainer;
+            }
+        },
+        {
+            key: "destroy",
+            value: function destroy() {
+                this.view.remove();
+            }
+        }
+    ]);
+    return NativeBottomBar;
+}();
 // src/Ads/VideoAds/UI/Controls/Controls.ts
 var Controls = /*#__PURE__*/ function() {
     function Controls(context) {
@@ -81135,7 +81350,12 @@ var Controls = /*#__PURE__*/ function() {
                             this.container.appendChild(this.controlBottomBar.view);
                         }
                         if (this.context.media.is("NATIVE")) {
+                            var _this_context_config_get_elements, _this_context_config_get1;
                             this.setTopBar();
+                            if ((_this_context_config_get1 = this.context.config.get("controls")) === null || _this_context_config_get1 === void 0 ? void 0 : (_this_context_config_get_elements = _this_context_config_get1.elements) === null || _this_context_config_get_elements === void 0 ? void 0 : _this_context_config_get_elements.progress_ind) {
+                                this.controlBottomBar = new NativeBottomBar(this.context, this.events);
+                                this.container.appendChild(this.controlBottomBar.view);
+                            }
                         }
                     }
                 }
@@ -83767,6 +83987,12 @@ var VideoRegionsDataManagerDecorator = /*#__PURE__*/ function() {
                 return this.component.on(event, handler);
             }
         },
+        {
+            key: "off",
+            value: function off(event, handler) {
+                return this.component.off(event, handler);
+            }
+        },
         {
             key: "fetch",
             value: function fetch1() {
@@ -83785,6 +84011,12 @@ var VideoRegionsDataManagerDecorator = /*#__PURE__*/ function() {
                 return this.component.check(timestamp);
             }
         },
+        {
+            key: "progress",
+            value: function progress() {
+                return this.component.progress();
+            }
+        },
         {
             key: "get",
             value: function get(timestamp) {
@@ -83805,8 +84037,8 @@ var VideoRegionsDataManagerDecorator = /*#__PURE__*/ function() {
         },
         {
             key: "loads",
-            value: function loads() {
-                return this.component.loads();
+            value: function loads(data) {
+                return this.component.loads(data);
             }
         }
     ]);
@@ -84041,7 +84273,7 @@ var VideoRegionsDecoratorFactory = /*#__PURE__*/ function() {
                         minDuration: params.minimum_display_time.value
                     });
                 }
-                if ((_params_ad_placements_and_sizes = params.ad_placements_and_sizes) === null || _params_ad_placements_and_sizes === void 0 ? void 0 : _params_ad_placements_and_sizes.value) {
+                if (((_params_ad_placements_and_sizes = params.ad_placements_and_sizes) === null || _params_ad_placements_and_sizes === void 0 ? void 0 : _params_ad_placements_and_sizes.value) !== void 0) {
                     target = new VideoRegionsTypeFilterDecorator(target, params.ad_placements_and_sizes);
                 }
                 return target;