@brndts/brndts-ads 1.13.5 → 1.13.7

package/dist/index.js

@@ -67434,6 +67434,17 @@ var Awaitable = /*#__PURE__*/ function() {
         });
     }
     _create_class(Awaitable, [
+        {
+            key: "reset",
+            value: function reset(value2) {
+                var _this = this;
+                this._value = value2;
+                this._promise = new Promise(function(resolve, reject) {
+                    _this._resolve = resolve;
+                    _this._reject = reject;
+                });
+            }
+        },
         {
             key: "value",
             get: function get() {
@@ -69775,6 +69786,7 @@ var AffiliateProvider = /*#__PURE__*/ function(ContentProvider1) {
                                 image.style.height = affiliate.size.h + "px";
                                 image.style.maxWidth = affiliate.size.w + "px";
                                 image.style.maxHeight = affiliate.size.h + "px";
+                                image.style.display = "block";
                                 image.setAttribute("src", affiliate.img);
                                 if (affiliate.url) {
                                     image.addEventListener("click", function() {
@@ -71232,10 +71244,16 @@ var RegionContent = /*#__PURE__*/ function() {
                 this.container.dataset.state = this.box.area(this.plane.size) > 0 ? "visible" : "hidden";
             }
         },
+        {
+            key: "hide",
+            value: function hide() {
+                this.container.dataset.state = "hidden";
+            }
+        },
         {
             key: "clear",
             value: function clear() {
-                this.container.dataset.state = "hidden";
+                this.hide();
                 this.content = void 0;
                 this.scale = null;
             }
@@ -71536,6 +71554,7 @@ var Region = /*#__PURE__*/ function() {
         this.onScreen = false;
         this.visible = false;
         this.plugins = [];
+        this.hidden = new Awaitable(false);
         this.id = id;
         this.regionDescriptor = regionDescriptor;
         this.options = options;
@@ -72161,19 +72180,6 @@ var StaticAdRegion = /*#__PURE__*/ function(Region) {
     return StaticAdRegion;
 }(Region);
 // src/Ads/StaticAds/StaticAds.ts
-function debounce3(func) {
-    var timeout = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 100;
-    var timer;
-    return function() {
-        for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
-            args[_key] = arguments[_key];
-        }
-        clearTimeout(timer);
-        timer = setTimeout(function() {
-            func.apply(void 0, _to_consumable_array(args));
-        }, timeout);
-    };
-}
 function isElementVisible(element) {
     if (!element) return false;
     if (!document.contains(element)) return false;
@@ -72190,7 +72196,6 @@ var StaticAds = /*#__PURE__*/ function() {
         this.handlePageMutation = this.handlePageMutation.bind(this);
         this.context = context;
         this.recorderFactory = new RecorderFactory(this.context);
-        this.observer = new MutationObserver(debounce3(this.handlePageMutation));
     }
     _create_class(StaticAds, [
         {
@@ -72292,16 +72297,11 @@ var StaticAds = /*#__PURE__*/ function() {
             value: function start() {
                 this.context.logger.log("starting static ads");
                 this.handleRegions();
-                this.observer.observe(document.body, {
-                    childList: true,
-                    subtree: true
-                });
             }
         },
         {
             key: "destroy",
             value: function destroy() {
-                this.observer.disconnect();
                 this.context.logger.log("destroying static ads");
                 this.regions.forEach(function(region) {
                     region.destroy();
@@ -80174,20 +80174,52 @@ var TYPES = {
 var DefaultTemplate = /*#__PURE__*/ function() {
     function DefaultTemplate() {
         _class_call_check(this, DefaultTemplate);
+        this.margin = {
+            t: 0,
+            r: 0,
+            b: 64,
+            l: 0
+        };
     }
     _create_class(DefaultTemplate, [
         {
+            // get(plane: Plane.Descriptor, cutout: Cutout): PackingRegion[] {
+            //   const areas = [];
+            //   // Region A: Right strip (cutout height)
+            //   if (plane.width - (cutout.x + cutout.width) > 0) {
+            //     areas.push({
+            //       dimensions: new Dimensions(
+            //         { x: this.margin.l + cutout.x + cutout.width, y: this.margin.t + 0 },
+            //         { width: plane.width - (this.margin.l+this.margin.r) - (cutout.x + cutout.width), height: cutout.y + cutout.height }
+            //       ),
+            //       name: 'A',
+            //       maxSlots: 3, // Maximum slots for this region
+            //     });
+            //   }
+            //   // Region B: bottom-left strip (excluding cutout)
+            //   if (plane.height - (cutout.y + cutout.height) > 0) {
+            //     areas.push({
+            //       dimensions: new Dimensions(
+            //         { x: this.margin.l + 0, y: cutout.y + cutout.height },
+            //         { width: plane.width - (this.margin.l + this.margin.r), height: plane.height - (this.margin.t + this.margin.b) - (cutout.y + cutout.height) }
+            //       ),
+            //       name: 'B',
+            //       maxSlots: 1, // Maximum slots for this region
+            //     });
+            //   }
+            //   return areas;
+            // }
             key: "get",
             value: function get(plane, cutout) {
                 var areas = [];
                 if (plane.width - (cutout.x + cutout.width) > 0) {
                     areas.push({
                         dimensions: new Dimensions({
-                            x: cutout.x + cutout.width,
-                            y: 0
+                            x: this.margin.l + cutout.x + cutout.width,
+                            y: this.margin.t + 0
                         }, {
                             width: plane.width - (cutout.x + cutout.width),
-                            height: cutout.y + cutout.height
+                            height: plane.height - (this.margin.t + this.margin.b)
                         }),
                         name: "A",
                         maxSlots: 3
@@ -80196,12 +80228,14 @@ var DefaultTemplate = /*#__PURE__*/ function() {
                 if (plane.height - (cutout.y + cutout.height) > 0) {
                     areas.push({
                         dimensions: new Dimensions({
-                            x: 0,
-                            y: cutout.y + cutout.height
+                            x: this.margin.l + 0,
+                            y: this.margin.t + cutout.y + cutout.height
                         }, {
-                            width: plane.width,
-                            height: plane.height - (cutout.y + cutout.height)
+                            width: cutout.x + cutout.width,
+                            height: plane.height - (this.margin.t + this.margin.b) - (cutout.y + cutout.height)
                         }),
+                        available: {
+                        },
                         name: "B",
                         maxSlots: 1
                     });
@@ -80215,6 +80249,12 @@ var DefaultTemplate = /*#__PURE__*/ function() {
 var FullscreenTemplate = /*#__PURE__*/ function() {
     function FullscreenTemplate() {
         _class_call_check(this, FullscreenTemplate);
+        this.margin = {
+            t: 0,
+            r: 0,
+            b: 64,
+            l: 0
+        };
     }
     _create_class(FullscreenTemplate, [
         {
@@ -80224,11 +80264,11 @@ var FullscreenTemplate = /*#__PURE__*/ function() {
                 if (plane.width - (cutout.x + cutout.width) > 0) {
                     areas.push({
                         dimensions: new Dimensions({
-                            x: cutout.x + cutout.width,
-                            y: 0
+                            x: this.margin.l + cutout.x + cutout.width,
+                            y: this.margin.t + 0
                         }, {
                             width: plane.width - (cutout.x + cutout.width),
-                            height: plane.height
+                            height: plane.height - (this.margin.t + this.margin.b)
                         }),
                         name: "A",
                         maxSlots: 3
@@ -80237,11 +80277,11 @@ var FullscreenTemplate = /*#__PURE__*/ function() {
                 if (plane.height - (cutout.y + cutout.height) > 0) {
                     areas.push({
                         dimensions: new Dimensions({
-                            x: 0,
-                            y: cutout.y + cutout.height
+                            x: this.margin.l + 0,
+                            y: this.margin.t + cutout.y + cutout.height
                         }, {
                             width: cutout.x + cutout.width,
-                            height: plane.height - (cutout.y + cutout.height)
+                            height: plane.height - (this.margin.t + this.margin.b) - (cutout.y + cutout.height)
                         }),
                         available: {
                             w: 0.7
@@ -80614,10 +80654,11 @@ var BasicAdRegion = /*#__PURE__*/ function(Region) {
             key: "hideRegion",
             value: function hideRegion() {
                 return _async_to_generator(function() {
-                    var _this_deps_recorder;
                     return _ts_generator(this, function(_state) {
                         switch(_state.label){
                             case 0:
+                                this.hidden.reset(false);
+                                this.content.hide();
                                 return [
                                     4,
                                     this.applyPlugins("beforeHide")
@@ -80630,7 +80671,7 @@ var BasicAdRegion = /*#__PURE__*/ function(Region) {
                                 this.content.clear();
                                 this.applyPlugins("afterHide");
                                 this.visible = false;
-                                (_this_deps_recorder = this.deps.recorder) === null || _this_deps_recorder === void 0 ? void 0 : _this_deps_recorder.presentationStateChanged(this, true);
+                                this.hidden.resolve(true);
                                 return [
                                     2
                                 ];
@@ -80639,30 +80680,40 @@ var BasicAdRegion = /*#__PURE__*/ function(Region) {
                 }).call(this);
             }
         },
+        {
+            key: "showRegion",
+            value: function showRegion() {
+                return _async_to_generator(function() {
+                    var _this_deps_recorder;
+                    return _ts_generator(this, function(_state) {
+                        this.applyPlugins("beforeShow");
+                        this.container.style.display = "block";
+                        this.container.style.position = "relative";
+                        this.container.style.width = "".concat(this.box.width(this.plane.size), "px");
+                        this.container.style.height = "".concat(this.box.height(this.plane.size), "px");
+                        this.content.render();
+                        this.applyPlugins("afterShow");
+                        this.visible = true;
+                        (_this_deps_recorder = this.deps.recorder) === null || _this_deps_recorder === void 0 ? void 0 : _this_deps_recorder.presentationStateChanged(this, true);
+                        return [
+                            2
+                        ];
+                    });
+                }).call(this);
+            }
+        },
         {
             key: "render",
             value: function render(contours, box) {
                 return _async_to_generator(function() {
-                    var _this_deps_recorder;
                     return _ts_generator(this, function(_state) {
                         this.applyPlugins("beforeRender");
                         if (this.shouldPresent()) {
-                            ;
-                            this.applyPlugins("beforeShow");
-                            this.container.style.display = "block";
-                            this.container.style.position = "relative";
-                            this.container.style.width = "".concat(this.box.width(this.plane.size), "px");
-                            this.container.style.height = "".concat(this.box.height(this.plane.size), "px");
-                            this.content.render();
-                            this.applyPlugins("afterShow");
-                            this.visible = true;
-                            (_this_deps_recorder = this.deps.recorder) === null || _this_deps_recorder === void 0 ? void 0 : _this_deps_recorder.presentationStateChanged(this, true);
+                            this.showRegion();
                         } else if (this.shouldHide()) {
                             this.hideRegion();
                         } else {
                             if (this.visible) {
-                                this.container.style.width = "".concat(this.box.width(this.plane.size), "px");
-                                this.container.style.height = "".concat(this.box.height(this.plane.size), "px");
                                 this.applyPlugins("reRender");
                             }
                         }
@@ -80674,48 +80725,6 @@ var BasicAdRegion = /*#__PURE__*/ function(Region) {
                 }).call(this);
             }
         },
-        {
-            key: "shouldRequestContent",
-            value: function shouldRequestContent(newBox) {
-                if (this.box.area({
-                    width: 1,
-                    height: 1
-                }) <= 0 && newBox.area({
-                    width: 1,
-                    height: 1
-                }) > 0) {
-                    return true;
-                }
-                if (this.box.isEqual(newBox.coords)) {
-                    return false;
-                }
-                if (newBox.area(this.plane.size) <= 0) {
-                    return false;
-                }
-                if (newBox.area(this.plane.size) === this.box.area(this.plane.size)) {
-                    return false;
-                }
-                if (Math.abs(newBox.area({
-                    width: 1,
-                    height: 1
-                }) - this.box.area({
-                    width: 1,
-                    height: 1
-                })) < 0.05) {
-                    return false;
-                }
-                if (Math.abs(newBox.aspectRatio({
-                    width: 1,
-                    height: 1
-                }) - this.box.aspectRatio({
-                    width: 1,
-                    height: 1
-                })) > 0.05) {
-                    return false;
-                }
-                return true;
-            }
-        },
         {
             key: "updateSize",
             value: function updateSize(width, height) {
@@ -80745,7 +80754,10 @@ var BasicAdRegion = /*#__PURE__*/ function(Region) {
             value: function clear() {
                 var _this = this;
                 this.hideRegion().then(function() {
-                    _this.updateSize(0, 0);
+                    _this.plane.update({
+                        width: 0,
+                        height: 0
+                    });
                 });
             }
         }
@@ -80935,83 +80947,116 @@ var AdRegionsArea = /*#__PURE__*/ function() {
         {
             key: "render",
             value: function render(regions2) {
-                if (!regions2 || !regions2.length) {
-                    this.clear();
-                    return;
-                }
-                var mapped = new MappedCollection();
-                mapped.load(regions2);
-                var visibleRegions = this.regionsObjects.getVisible();
-                var diffLeft = getDifferenceLeft(visibleRegions, regions2);
-                var diffRight = getDifferenceRight(visibleRegions, regions2);
-                var common = getIntersection(visibleRegions, regions2);
-                for(var index = 0; index < diffLeft.length; index++){
-                    var existingObject = this.regionsObjects.getById(diffLeft[index].id);
-                    if (existingObject) {
-                        existingObject.clear();
-                    }
-                }
-                if (common.length) {
-                    for(var index1 = 0; index1 < common.length; index1++){
-                        if (index1 < this.maxRegions) {
-                            var pack = mapped.getById(common[index1].id);
-                            if (pack) {
-                                common[index1].updateSize(pack.width, pack.height);
-                            }
-                        } else {
-                            common[index1].clear();
-                        }
-                    }
-                } else {
-                    for(var index2 = 0; index2 < diffRight.length && index2 < this.maxRegions; index2++){
-                        var existingObject1 = this.regionsObjects.getById(diffRight[index2].id);
-                        if (existingObject1) {
-                            var pack1 = mapped.getById(diffRight[index2].id);
-                            if (pack1) {
-                                existingObject1.updateSize(pack1.width, pack1.height);
-                            }
-                        } else {
-                            var region = diffRight[index2];
-                            var provider = ContentProviderFactory.getProvider(this.context, this.context.config.get("ads").provider);
-                            var plugins2 = [
-                                // new RegionBorderPlugin(),
-                                new RegionAnimationPlugin("OPACITY")
-                            ];
-                            var newRegion = new BasicAdRegion(region.id, {
-                                width: region.width,
-                                height: region.height
-                            }, {
-                                ad: {
-                                    type: region.type,
-                                    name: region.region
+                return _async_to_generator(function() {
+                    var mapped, visibleRegions, diffLeft, diffRight, pending, common, index, existingObject2, index1, pack, index2, existingObject21, pack1, region, provider, plugins2, newRegion;
+                    return _ts_generator(this, function(_state) {
+                        switch(_state.label){
+                            case 0:
+                                if (!regions2 || !regions2.length) {
+                                    this.clear();
+                                    return [
+                                        2
+                                    ];
                                 }
-                            }, {
-                                provider: provider,
-                                plugins: plugins2,
-                                recorder: this.context.recorder
-                            });
-                            this.regionsObjects.push(newRegion);
-                            this.regionsContainerView.append(newRegion.view);
-                            this.intersectionObserver.observe(newRegion.view);
+                                mapped = new MappedCollection();
+                                mapped.load(regions2);
+                                visibleRegions = this.regionsObjects.getVisible();
+                                diffLeft = getDifferenceLeft(visibleRegions, regions2);
+                                diffRight = getDifferenceRight(visibleRegions, regions2);
+                                pending = [];
+                                common = getIntersection(visibleRegions, regions2);
+                                for(index = 0; index < diffLeft.length; index++){
+                                    existingObject2 = this.regionsObjects.getById(diffLeft[index].id);
+                                    if (existingObject2) {
+                                        existingObject2.updateSize(0, 0);
+                                        pending.push(existingObject2.hidden.promise);
+                                    }
+                                }
+                                if (!common.length) return [
+                                    3,
+                                    1
+                                ];
+                                for(index1 = 0; index1 < common.length; index1++){
+                                    if (index1 < this.maxRegions) {
+                                        pack = mapped.getById(common[index1].id);
+                                        if (pack) {
+                                            common[index1].updateSize(pack.width, pack.height);
+                                        }
+                                    } else {
+                                        common[index1].updateSize(0, 0);
+                                        pending.push(existingObject.hidden.promise);
+                                    }
+                                }
+                                return [
+                                    3,
+                                    3
+                                ];
+                            case 1:
+                                return [
+                                    4,
+                                    Promise.all(pending)
+                                ];
+                            case 2:
+                                _state.sent();
+                                for(index2 = 0; index2 < diffRight.length && index2 < this.maxRegions; index2++){
+                                    existingObject21 = this.regionsObjects.getById(diffRight[index2].id);
+                                    if (existingObject21) {
+                                        pack1 = mapped.getById(diffRight[index2].id);
+                                        if (pack1) {
+                                            existingObject21.updateSize(pack1.width, pack1.height);
+                                        }
+                                    } else {
+                                        region = diffRight[index2];
+                                        provider = ContentProviderFactory.getProvider(this.context, this.context.config.get("ads").provider);
+                                        plugins2 = [
+                                            new RegionBorderPlugin(),
+                                            new RegionAnimationPlugin("OPACITY")
+                                        ];
+                                        newRegion = new BasicAdRegion(region.id, {
+                                            width: region.width,
+                                            height: region.height
+                                        }, {
+                                            ad: {
+                                                type: region.type,
+                                                name: region.region
+                                            }
+                                        }, {
+                                            provider: provider,
+                                            plugins: plugins2,
+                                            recorder: this.context.recorder
+                                        });
+                                        this.regionsObjects.push(newRegion);
+                                        this.regionsContainerView.append(newRegion.view);
+                                        this.intersectionObserver.observe(newRegion.view);
+                                    }
+                                }
+                                _state.label = 3;
+                            case 3:
+                                return [
+                                    2
+                                ];
                         }
-                    }
-                }
+                    });
+                }).call(this);
             }
         },
         {
             key: "clear",
             value: function clear() {
-                this.updateSize({
-                    width: 0,
-                    height: 0
-                }, this.context.media.aspectRatio);
-                this.updatePosition({
-                    x: 0,
-                    y: 0
-                });
+                var _this = this;
                 this.regionsObjects.forEach(function(region) {
                     region.clear();
                 });
+                setTimeout(function() {
+                    _this.updateSize({
+                        width: 0,
+                        height: 0
+                    }, _this.context.media.aspectRatio);
+                    _this.updatePosition({
+                        x: 0,
+                        y: 0
+                    });
+                }, 500);
             }
         },
         {
@@ -81109,9 +81154,9 @@ var RegionRenderer = /*#__PURE__*/ function() {
         {
             key: "clear",
             value: function clear() {
-                var regions2 = Object.values(this.regionAreas);
-                for(var index = 0; index < regions2.length; index++){
-                    regions2[index].clear();
+                var areas = Object.values(this.regionAreas);
+                for(var index = 0; index < areas.length; index++){
+                    areas[index].clear();
                 }
             }
         },
@@ -81228,41 +81273,6 @@ var MediaElementSizeController = /*#__PURE__*/ function(_import_events9_default)
                 return updated;
             }
         },
-        {
-            key: "recalculate",
-            value: function recalculate() {
-                if (!this.isResized) {
-                    return this.restore();
-                }
-                var updated = false;
-                if (this.context.media.view) {
-                    var _this_context_elements_container, _this_context_elements_container1, _this_context_elements_container2, _this_context_elements_container3;
-                    var size = adjustSizeWithAspectRatio((((_this_context_elements_container = this.context.elements.container) === null || _this_context_elements_container === void 0 ? void 0 : _this_context_elements_container.getBoundingClientRect().width) || 0) * (this.sizePercentage / 100), (((_this_context_elements_container1 = this.context.elements.container) === null || _this_context_elements_container1 === void 0 ? void 0 : _this_context_elements_container1.getBoundingClientRect().height) || 0) * (this.sizePercentage / 100), this.context.media.aspectRatio);
-                    if (size.width !== this.size.width || size.height !== this.size.height) {
-                        this.size = size;
-                        this.context.media.view.style.width = "".concat(this.size.width, "px");
-                        this.context.media.view.style.height = "".concat(this.size.height, "px");
-                        this.context.media.setSize(this.size.width, this.size.height);
-                        updated = true;
-                    }
-                    var adjustedPosition = adjustSizeWithAspectRatio((((_this_context_elements_container2 = this.context.elements.container) === null || _this_context_elements_container2 === void 0 ? void 0 : _this_context_elements_container2.getBoundingClientRect().width) || 0) * (this.positionOffset / 100), (((_this_context_elements_container3 = this.context.elements.container) === null || _this_context_elements_container3 === void 0 ? void 0 : _this_context_elements_container3.getBoundingClientRect().height) || 0) * (this.positionOffset / 100), this.context.media.aspectRatio);
-                    var marginValue = Math.min(adjustedPosition.width, adjustedPosition.height);
-                    if (this.position.x !== marginValue || this.position.y !== marginValue) {
-                        var _this_context_interface;
-                        this.position.x = marginValue;
-                        this.position.y = marginValue;
-                        this.context.media.view.style.left = "".concat(this.position.x, "px");
-                        this.context.media.view.style.top = "".concat(this.position.y, "px");
-                        (_this_context_interface = this.context.interface) === null || _this_context_interface === void 0 ? void 0 : _this_context_interface.updatePosition(marginValue, marginValue);
-                        updated = true;
-                    }
-                }
-                if (updated) {
-                    this.emit("UPDATED");
-                }
-                return updated;
-            }
-        },
         {
             key: "update",
             value: function update(percentage) {
@@ -81349,8 +81359,6 @@ var BasicPresentationMode = /*#__PURE__*/ function() {
         this.context = context;
         this.mediaElementSizeController = new MediaElementSizeController(context);
         this.packer = new RegionPacker(this.context);
-        this.mediaElementSizeController.on("UPDATED", function() {});
-        this.packer.on("PACKED", function() {});
     }
     _create_class(BasicPresentationMode, [
         {
@@ -81452,11 +81460,15 @@ var BasicPresentationMode = /*#__PURE__*/ function() {
                         width: ((_this_mediaElementSizeController3 = this.mediaElementSizeController) === null || _this_mediaElementSizeController3 === void 0 ? void 0 : _this_mediaElementSizeController3.size.width) || 0,
                         height: ((_this_mediaElementSizeController4 = this.mediaElementSizeController) === null || _this_mediaElementSizeController4 === void 0 ? void 0 : _this_mediaElementSizeController4.size.height) || 0
                     }, fullscreen ? "fullscreen" : "default");
-                    var updated = this.packer.repack();
-                    if (updated) {
+                    this.packer.repack();
+                    if (this.packer.packed.length > 0) {
                         var _this_regionsRenderer1, _this_regionsRenderer2;
                         (_this_regionsRenderer1 = this.regionsRenderer) === null || _this_regionsRenderer1 === void 0 ? void 0 : _this_regionsRenderer1.addAreas(this.packer.areas);
                         (_this_regionsRenderer2 = this.regionsRenderer) === null || _this_regionsRenderer2 === void 0 ? void 0 : _this_regionsRenderer2.render(this.packer.packed);
+                    } else {
+                        var _this_regionsRenderer3, _this_mediaElementSizeController5;
+                        (_this_regionsRenderer3 = this.regionsRenderer) === null || _this_regionsRenderer3 === void 0 ? void 0 : _this_regionsRenderer3.clear();
+                        (_this_mediaElementSizeController5 = this.mediaElementSizeController) === null || _this_mediaElementSizeController5 === void 0 ? void 0 : _this_mediaElementSizeController5.restore();
                     }
                 }
             }
@@ -82079,9 +82091,9 @@ var RegionRenderer2 = /*#__PURE__*/ function() {
                     }
                 } else {
                     for(var index1 = 0; index1 < diffRight.length && index1 < this.maxRegions; index1++){
-                        var existingObject = this.regionsObjects.getById(diffRight[index1].id);
-                        if (existingObject) {
-                            existingObject.updateRegion(mapped.getById(diffRight[index1].id));
+                        var existingObject2 = this.regionsObjects.getById(diffRight[index1].id);
+                        if (existingObject2) {
+                            existingObject2.updateRegion(mapped.getById(diffRight[index1].id));
                         } else {
                             var newRegion = this.regionFactory.get(diffRight[index1], {
                                 width: this.regionsContainerView.width,
@@ -82096,9 +82108,9 @@ var RegionRenderer2 = /*#__PURE__*/ function() {
                     }
                 }
                 for(var index2 = 0; index2 < diffLeft.length; index2++){
-                    var existingObject1 = this.regionsObjects.getById(diffLeft[index2].id);
-                    if (existingObject1) {
-                        existingObject1.clear();
+                    var existingObject21 = this.regionsObjects.getById(diffLeft[index2].id);
+                    if (existingObject21) {
+                        existingObject21.clear();
                     }
                 }
                 this.regionsData = regions2;
@@ -82486,22 +82498,32 @@ var VideoAds = /*#__PURE__*/ function() {
     function VideoAds(context) {
         _class_call_check(this, VideoAds);
         this.videoAdElements = [];
+        this.handlePageMutation = this.handlePageMutation.bind(this);
         this.context = context;
     }
     _create_class(VideoAds, [
         {
-            key: "start",
-            value: function start() {
-                if (!this.context.supports.api) {
-                    this.context.logger.error("Setup failed: no support");
-                    return;
-                }
+            key: "handleMedias",
+            value: function handleMedias() {
                 try {
+                    var elements2 = [];
+                    for(var index = 0; index < this.videoAdElements.length; index++){
+                        var element = this.videoAdElements[index];
+                        if (element.media.view && document.body.contains(element.media.view)) {
+                            elements2.push(element);
+                        } else {
+                            element.destroy();
+                        }
+                    }
+                    this.videoAdElements = elements2;
                     var medias = MediaElementFactory.getElements(this.context.selectors.targets);
                     var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
                     try {
                         for(var _iterator = medias[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
                             var media = _step.value;
+                            if (!media || media.closest("#BRNDTS_R") || media.querySelector("#BRNDTS_R")) {
+                                continue;
+                            }
                             var videoAd = new VideoAd(this.context, media);
                             this.videoAdElements.push(videoAd);
                             videoAd.start();
@@ -82527,6 +82549,22 @@ var VideoAds = /*#__PURE__*/ function() {
                 }
             }
         },
+        {
+            key: "start",
+            value: function start() {
+                if (!this.context.supports.api) {
+                    this.context.logger.error("Setup failed: no support");
+                    return;
+                }
+                this.handleMedias();
+            }
+        },
+        {
+            key: "handlePageMutation",
+            value: function handlePageMutation() {
+                this.handleMedias();
+            }
+        },
         {
             key: "updateSize",
             value: function updateSize() {
@@ -82579,16 +82617,28 @@ var VideoAds = /*#__PURE__*/ function() {
 var Ads = /*#__PURE__*/ function() {
     function Ads(context) {
         _class_call_check(this, Ads);
+        this.handlePageMutation = functions_default.debounce(this.handlePageMutation.bind(this), 100);
         this.context = context;
         this.videoAds = new VideoAds(this.context);
         this.staticAds = new StaticAds(this.context);
+        this.observer = new MutationObserver(this.handlePageMutation);
     }
     _create_class(Ads, [
+        {
+            key: "handlePageMutation",
+            value: function handlePageMutation() {
+                this.videoAds.handlePageMutation();
+                this.staticAds.handlePageMutation();
+            }
+        },
         {
             key: "start",
             value: function start() {
                 this.videoAds.start();
                 this.staticAds.start();
+                this.observer.observe(document.body, {
+                    childList: true
+                });
             }
         },
         {
@@ -82601,6 +82651,7 @@ var Ads = /*#__PURE__*/ function() {
             key: "destroy",
             value: function destroy() {
                 var _GooglePublisherTag_get;
+                this.observer.disconnect();
                 this.videoAds.destroy();
                 this.staticAds.destroy();
                 (_GooglePublisherTag_get = GooglePublisherTag.get()) === null || _GooglePublisherTag_get === void 0 ? void 0 : _GooglePublisherTag_get.destroy();