@brndts/brndts-ads 1.14.6 → 1.14.7

package/dist/index.mjs

@@ -81537,11 +81537,18 @@ var Backdrop = /*#__PURE__*/ function() {
     "use strict";
     function Backdrop(context) {
         _class_call_check(this, Backdrop);
+        var _this_context_config_get_backdrop, _this_context_config_get;
         this.context = context;
         this.container = document.createElement("div");
         this.container.id = "BRNDTS_BKD";
         this.container.style.width = "100%";
         this.container.style.height = "100%";
+        if ((_this_context_config_get = this.context.config.get("branding")) === null || _this_context_config_get === void 0 ? void 0 : (_this_context_config_get_backdrop = _this_context_config_get.backdrop) === null || _this_context_config_get_backdrop === void 0 ? void 0 : _this_context_config_get_backdrop.src) {
+            var _this_context_config_get_backdrop1, _this_context_config_get1;
+            this.container.style.backgroundImage = "url(".concat((_this_context_config_get1 = this.context.config.get("branding")) === null || _this_context_config_get1 === void 0 ? void 0 : (_this_context_config_get_backdrop1 = _this_context_config_get1.backdrop) === null || _this_context_config_get_backdrop1 === void 0 ? void 0 : _this_context_config_get_backdrop1.src, ")");
+            this.container.style.backgroundSize = "cover";
+            this.container.style.backgroundPosition = "center";
+        }
     }
     _create_class(Backdrop, [
         {
@@ -81549,6 +81556,18 @@ var Backdrop = /*#__PURE__*/ function() {
             get: function get() {
                 return this.container;
             }
+        },
+        {
+            key: "show",
+            value: function show() {
+                this.container.style.opacity = "1";
+            }
+        },
+        {
+            key: "hide",
+            value: function hide() {
+                this.container.style.opacity = "0";
+            }
         }
     ]);
     return Backdrop;
@@ -81852,7 +81871,7 @@ var Interface = /*#__PURE__*/ function(_import_events7_default) {
         {
             key: "wrapMedia",
             value: function wrapMedia() {
-                var _this_media_view_parentElement, _this_media_view;
+                var _this_media_view_parentElement, _this_media_view, _this_context_config_get;
                 if (((_this_media_view = this.media.view) === null || _this_media_view === void 0 ? void 0 : (_this_media_view_parentElement = _this_media_view.parentElement) === null || _this_media_view_parentElement === void 0 ? void 0 : _this_media_view_parentElement.id) === "BRNDTS") {
                     this.context.elements.container = this.media.view.parentElement;
                 }
@@ -81862,12 +81881,12 @@ var Interface = /*#__PURE__*/ function(_import_events7_default) {
                 } else if (this.context.elements.container) {
                     this.container = this.context.elements.container;
                 }
-                var backdrop = new Backdrop(this.context);
-                var existingBackdrop = this.container.querySelector("#".concat(backdrop.view.id));
+                this.backdrop = new Backdrop(this.context);
+                var existingBackdrop = this.container.querySelector("#".concat(this.backdrop.view.id));
                 if (existingBackdrop) {
                     this.container.removeChild(existingBackdrop);
                 }
-                this.container.firstChild ? this.container.insertBefore(backdrop.view, this.container.firstChild) : this.container.appendChild(backdrop.view);
+                this.container.firstChild ? this.container.insertBefore(this.backdrop.view, this.container.firstChild) : this.container.appendChild(this.backdrop.view);
                 this.migrateStyles();
                 if (this.media.view) {
                     this.media.view.style.position = "absolute";
@@ -81878,6 +81897,14 @@ var Interface = /*#__PURE__*/ function(_import_events7_default) {
                     this.media.view.classList.toggle("transition");
                 }
                 this.container.dataset.brndts_d = this.context.device.device.type;
+                if ((_this_context_config_get = this.context.config.get("branding")) === null || _this_context_config_get === void 0 ? void 0 : _this_context_config_get.colors) {
+                    var _this_context_config_get_colors, _this_context_config_get1;
+                    if ((_this_context_config_get1 = this.context.config.get("branding")) === null || _this_context_config_get1 === void 0 ? void 0 : (_this_context_config_get_colors = _this_context_config_get1.colors) === null || _this_context_config_get_colors === void 0 ? void 0 : _this_context_config_get_colors.primary) {
+                        var _this_context_config_get_colors1, _this_context_config_get2, _this_context_config_get_colors2, _this_context_config_get3, _this_context_config_get_colors3, _this_context_config_get4;
+                        this.container.style.setProperty("--brndts-primary-color", ((_this_context_config_get2 = this.context.config.get("branding")) === null || _this_context_config_get2 === void 0 ? void 0 : (_this_context_config_get_colors1 = _this_context_config_get2.colors) === null || _this_context_config_get_colors1 === void 0 ? void 0 : _this_context_config_get_colors1.primary) || "#024ab67a");
+                        this.container.style.setProperty("--brndts-secondary-color", ((_this_context_config_get3 = this.context.config.get("branding")) === null || _this_context_config_get3 === void 0 ? void 0 : (_this_context_config_get_colors2 = _this_context_config_get3.colors) === null || _this_context_config_get_colors2 === void 0 ? void 0 : _this_context_config_get_colors2.primary) || ((_this_context_config_get4 = this.context.config.get("branding")) === null || _this_context_config_get4 === void 0 ? void 0 : (_this_context_config_get_colors3 = _this_context_config_get4.colors) === null || _this_context_config_get_colors3 === void 0 ? void 0 : _this_context_config_get_colors3.primary) || "#26e29483");
+                    }
+                }
             }
         },
         {
@@ -83070,7 +83097,10 @@ var MediaElementSizeController = /*#__PURE__*/ function(_import_events9_default)
             y: 0
         };
         _this.sizePercentage = 100;
-        _this.positionOffset = 0;
+        _this.positionOffset = {
+            x: 0,
+            y: 0
+        };
         _this.context = context;
         if (_this.context.media.view) {
             _this.context.media.view.style.setProperty("transition", "width 0.5s ease, height 0.5s ease");
@@ -83090,17 +83120,18 @@ var MediaElementSizeController = /*#__PURE__*/ function(_import_events9_default)
         {
             key: "expectedDimensions",
             value: function expectedDimensions(percentage) {
-                var position = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 0;
+                var position = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {
+                    x: 0,
+                    y: 0
+                };
                 if (this.context.media.view) {
                     var _this_context_elements_container, _this_context_elements_container1, _this_context_elements_container2, _this_context_elements_container3;
                     this.sizePercentage = percentage;
                     this.positionOffset = position;
                     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) * (percentage / 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) * (percentage / 100), this.context.media.aspectRatio);
-                    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) * (position / 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) * (position / 100), this.context.media.aspectRatio);
-                    var marginValue = Math.min(adjustedPosition.width, adjustedPosition.height);
                     var newPosition = {
-                        x: marginValue,
-                        y: marginValue
+                        x: (((_this_context_elements_container2 = this.context.elements.container) === null || _this_context_elements_container2 === void 0 ? void 0 : _this_context_elements_container2.getBoundingClientRect().width) || 0) * (position.x / 100),
+                        y: (((_this_context_elements_container3 = this.context.elements.container) === null || _this_context_elements_container3 === void 0 ? void 0 : _this_context_elements_container3.getBoundingClientRect().height) || 0) * (position.y / 100)
                     };
                     return {
                         size: size,
@@ -83113,7 +83144,10 @@ var MediaElementSizeController = /*#__PURE__*/ function(_import_events9_default)
         {
             key: "reduceSizeByPercentage",
             value: function reduceSizeByPercentage(percentage) {
-                var position = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 0;
+                var position = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {
+                    x: 0,
+                    y: 0
+                };
                 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;
@@ -83127,15 +83161,17 @@ var MediaElementSizeController = /*#__PURE__*/ function(_import_events9_default)
                         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) * (position / 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) * (position / 100), this.context.media.aspectRatio);
-                    var marginValue = Math.min(adjustedPosition.width, adjustedPosition.height);
-                    if (this.position.x !== marginValue || this.position.y !== marginValue) {
+                    var adjustedPosition = {
+                        width: (((_this_context_elements_container2 = this.context.elements.container) === null || _this_context_elements_container2 === void 0 ? void 0 : _this_context_elements_container2.getBoundingClientRect().width) || 0) * (position.x / 100),
+                        height: (((_this_context_elements_container3 = this.context.elements.container) === null || _this_context_elements_container3 === void 0 ? void 0 : _this_context_elements_container3.getBoundingClientRect().height) || 0) * (position.y / 100)
+                    };
+                    if (this.position.x !== adjustedPosition.width || this.position.y !== adjustedPosition.height) {
                         var _this_context_interface;
-                        this.position.x = marginValue;
-                        this.position.y = marginValue;
+                        this.position.x = adjustedPosition.width;
+                        this.position.y = adjustedPosition.height;
                         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);
+                        (_this_context_interface = this.context.interface) === null || _this_context_interface === void 0 ? void 0 : _this_context_interface.updatePosition(this.position.y, this.position.x);
                         updated = true;
                     }
                 }
@@ -83148,7 +83184,10 @@ var MediaElementSizeController = /*#__PURE__*/ function(_import_events9_default)
         {
             key: "update",
             value: function update(percentage) {
-                var position = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 0;
+                var position = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {
+                    x: 0,
+                    y: 0
+                };
                 if (!this.isResized) {
                     return this.restore();
                 }
@@ -83165,15 +83204,17 @@ var MediaElementSizeController = /*#__PURE__*/ function(_import_events9_default)
                         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 adjustedPosition = {
+                        width: (((_this_context_elements_container2 = this.context.elements.container) === null || _this_context_elements_container2 === void 0 ? void 0 : _this_context_elements_container2.getBoundingClientRect().width) || 0) * (position.x / 100),
+                        height: (((_this_context_elements_container3 = this.context.elements.container) === null || _this_context_elements_container3 === void 0 ? void 0 : _this_context_elements_container3.getBoundingClientRect().height) || 0) * (position.y / 100)
+                    };
+                    if (this.position.x !== adjustedPosition.width || this.position.y !== adjustedPosition.height) {
                         var _this_context_interface;
-                        this.position.x = marginValue;
-                        this.position.y = marginValue;
+                        this.position.x = adjustedPosition.width;
+                        this.position.y = adjustedPosition.height;
                         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);
+                        (_this_context_interface = this.context.interface) === null || _this_context_interface === void 0 ? void 0 : _this_context_interface.updatePosition(this.position.y, this.position.x);
                         updated = true;
                     }
                 }
@@ -83198,7 +83239,10 @@ var MediaElementSizeController = /*#__PURE__*/ function(_import_events9_default)
                         y: 0
                     };
                     this.sizePercentage = 100;
-                    this.positionOffset = 0;
+                    this.positionOffset = {
+                        x: 0,
+                        y: 0
+                    };
                     if (size.width !== this.size.width || size.height !== this.size.height) {
                         this.size = size;
                         this.context.media.setSize(this.size.width, this.size.height);
@@ -83274,7 +83318,13 @@ var BasicPresentationMode = /*#__PURE__*/ function() {
                 this.adPresentationStrategy = PresentationStrategyFactory.get(this.context.config);
                 (_this_adPresentationStrategy = this.adPresentationStrategy) === null || _this_adPresentationStrategy === void 0 ? void 0 : _this_adPresentationStrategy.on("presentation", function() {
                     var _this_mediaElementSizeController;
-                    var expected = (_this_mediaElementSizeController = _this.mediaElementSizeController) === null || _this_mediaElementSizeController === void 0 ? void 0 : _this_mediaElementSizeController.expectedDimensions(70, _this.context.store.getState().fullscreen ? 10 : 0);
+                    var expected = (_this_mediaElementSizeController = _this.mediaElementSizeController) === null || _this_mediaElementSizeController === void 0 ? void 0 : _this_mediaElementSizeController.expectedDimensions(70, _this.context.store.getState().fullscreen ? {
+                        x: 10,
+                        y: 10
+                    } : {
+                        x: 0,
+                        y: 10
+                    });
                     _this.packer.setCutout({
                         x: (expected === null || expected === void 0 ? void 0 : expected.position.x) || 0,
                         y: (expected === null || expected === void 0 ? void 0 : expected.position.y) || 0,
@@ -83283,19 +83333,27 @@ var BasicPresentationMode = /*#__PURE__*/ function() {
                     }, _this.context.store.getState().fullscreen ? "fullscreen" : "default");
                     _this.packer.pack();
                     if (_this.packer.packed.length > 0) {
-                        var _this_adPresentationStrategy, _this_regionsRenderer, _this_regionsRenderer1, _this_mediaElementSizeController1;
+                        var _this_context_interface_backdrop, _this_context_interface, _this_adPresentationStrategy, _this_regionsRenderer, _this_regionsRenderer1, _this_mediaElementSizeController1;
+                        (_this_context_interface = _this.context.interface) === null || _this_context_interface === void 0 ? void 0 : (_this_context_interface_backdrop = _this_context_interface.backdrop) === null || _this_context_interface_backdrop === void 0 ? void 0 : _this_context_interface_backdrop.show();
                         (_this_adPresentationStrategy = _this.adPresentationStrategy) === null || _this_adPresentationStrategy === void 0 ? void 0 : _this_adPresentationStrategy.startedPresentation();
                         (_this_regionsRenderer = _this.regionsRenderer) === null || _this_regionsRenderer === void 0 ? void 0 : _this_regionsRenderer.addAreas(_this.packer.areas);
                         (_this_regionsRenderer1 = _this.regionsRenderer) === null || _this_regionsRenderer1 === void 0 ? void 0 : _this_regionsRenderer1.render(_this.packer.packed);
-                        (_this_mediaElementSizeController1 = _this.mediaElementSizeController) === null || _this_mediaElementSizeController1 === void 0 ? void 0 : _this_mediaElementSizeController1.reduceSizeByPercentage(70, _this.context.store.getState().fullscreen ? 10 : 0);
+                        (_this_mediaElementSizeController1 = _this.mediaElementSizeController) === null || _this_mediaElementSizeController1 === void 0 ? void 0 : _this_mediaElementSizeController1.reduceSizeByPercentage(70, _this.context.store.getState().fullscreen ? {
+                            x: 10,
+                            y: 10
+                        } : {
+                            x: 0,
+                            y: 10
+                        });
                     }
                 }).on("pace", function() {}).on("cooldown", function() {
                     var _this_regionsRenderer;
                     (_this_regionsRenderer = _this.regionsRenderer) === null || _this_regionsRenderer === void 0 ? void 0 : _this_regionsRenderer.clear();
                     _this.packer.reset();
                     setTimeout(function() {
-                        var _this_mediaElementSizeController;
+                        var _this_mediaElementSizeController, _this_context_interface_backdrop, _this_context_interface;
                         (_this_mediaElementSizeController = _this.mediaElementSizeController) === null || _this_mediaElementSizeController === void 0 ? void 0 : _this_mediaElementSizeController.restore();
+                        (_this_context_interface = _this.context.interface) === null || _this_context_interface === void 0 ? void 0 : (_this_context_interface_backdrop = _this_context_interface.backdrop) === null || _this_context_interface_backdrop === void 0 ? void 0 : _this_context_interface_backdrop.hide();
                     }, 500);
                 });
                 this.resizeObserver = new ResizeObserver(function() {
@@ -83324,7 +83382,13 @@ var BasicPresentationMode = /*#__PURE__*/ function() {
                 var fullscreen = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : false;
                 var _this_context_elements_container, _this_context_elements_container1, _this_regionsRenderer, _this_mediaElementSizeController;
                 (_this_regionsRenderer = this.regionsRenderer) === null || _this_regionsRenderer === void 0 ? void 0 : _this_regionsRenderer.updateSize(((_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_context_elements_container1 = this.context.elements.container) === null || _this_context_elements_container1 === void 0 ? void 0 : _this_context_elements_container1.getBoundingClientRect().height) || 0, this.context.media.aspectRatio);
-                var updatedMediaSize = (_this_mediaElementSizeController = this.mediaElementSizeController) === null || _this_mediaElementSizeController === void 0 ? void 0 : _this_mediaElementSizeController.update(70, fullscreen ? 10 : 0);
+                var updatedMediaSize = (_this_mediaElementSizeController = this.mediaElementSizeController) === null || _this_mediaElementSizeController === void 0 ? void 0 : _this_mediaElementSizeController.update(70, fullscreen ? {
+                    x: 10,
+                    y: 10
+                } : {
+                    x: 0,
+                    y: 10
+                });
                 if (updatedMediaSize) {
                     var _this_mediaElementSizeController1, _this_mediaElementSizeController2, _this_mediaElementSizeController3, _this_mediaElementSizeController4;
                     this.packer.setCutout({
@@ -83335,13 +83399,15 @@ var BasicPresentationMode = /*#__PURE__*/ function() {
                     }, fullscreen ? "fullscreen" : "default");
                     this.packer.repack();
                     if (this.packer.packed.length > 0) {
-                        var _this_regionsRenderer1, _this_regionsRenderer2;
+                        var _this_context_interface_backdrop, _this_context_interface, _this_regionsRenderer1, _this_regionsRenderer2;
+                        (_this_context_interface = this.context.interface) === null || _this_context_interface === void 0 ? void 0 : (_this_context_interface_backdrop = _this_context_interface.backdrop) === null || _this_context_interface_backdrop === void 0 ? void 0 : _this_context_interface_backdrop.show();
                         (_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;
+                        var _this_regionsRenderer3, _this_mediaElementSizeController5, _this_context_interface_backdrop1, _this_context_interface1;
                         (_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();
+                        (_this_context_interface1 = this.context.interface) === null || _this_context_interface1 === void 0 ? void 0 : (_this_context_interface_backdrop1 = _this_context_interface1.backdrop) === null || _this_context_interface_backdrop1 === void 0 ? void 0 : _this_context_interface_backdrop1.hide();
                     }
                 }
             }
@@ -83372,9 +83438,10 @@ var BasicPresentationMode = /*#__PURE__*/ function() {
         {
             key: "stop",
             value: function stop() {
-                var _this_adPresentationStrategy, _this_regionsRenderer;
+                var _this_adPresentationStrategy, _this_regionsRenderer, _this_context_interface_backdrop, _this_context_interface;
                 (_this_adPresentationStrategy = this.adPresentationStrategy) === null || _this_adPresentationStrategy === void 0 ? void 0 : _this_adPresentationStrategy.stop();
                 (_this_regionsRenderer = this.regionsRenderer) === null || _this_regionsRenderer === void 0 ? void 0 : _this_regionsRenderer.clear();
+                (_this_context_interface = this.context.interface) === null || _this_context_interface === void 0 ? void 0 : (_this_context_interface_backdrop = _this_context_interface.backdrop) === null || _this_context_interface_backdrop === void 0 ? void 0 : _this_context_interface_backdrop.hide();
             }
         },
         {