@capacitor-community/admob 8.2.1 → 8.3.0

package/dist/plugin.cjs.js

@@ -2,6 +2,64 @@
 
 var core = require('@capacitor/core');
 
+function* projectionAncestors(element) {
+    let current = element;
+    while (current) {
+        const root = current.getRootNode();
+        current = current.assignedSlot ?? current.parentElement ?? (root instanceof ShadowRoot ? root.host : null);
+        if (current)
+            yield current;
+    }
+}
+
+/** Current CSS visibility without the Engine's projection hiding rules.
+ * Use when an existing renderer decides whether its DOM source is authored hidden.
+ * Projection attributes are restored synchronously before returning; this performs
+ * a style read and may notify MutationObservers, so it is not a cached measurement.
+ */
+const getUnprojectedVisibility = (element) => {
+    const win = element.ownerDocument.defaultView;
+    if (!win)
+        return 'hidden';
+    const markers = [];
+    for (const node of [element, ...projectionAncestors(element)]) {
+        for (const attribute of Array.from(node.attributes)) {
+            if (attribute.name === 'data-native-ui-snapshot-source' ||
+                attribute.name === 'data-native-ui-snapshot-prepared' ||
+                attribute.name === 'data-native-ui-snapshot-content' ||
+                attribute.name.startsWith('data-native-ui-session-'))
+                markers.push({ node, name: attribute.name, value: attribute.value });
+        }
+    }
+    try {
+        for (const { node, name } of markers)
+            node.removeAttribute(name);
+        return win.getComputedStyle(element).visibility;
+    }
+    finally {
+        for (const { node, name, value } of markers)
+            node.setAttribute(name, value);
+    }
+};
+
+// The injected runtime and a plugin's bundled helper share the binding.
+const placementKey = Symbol.for('webview-native-ui-engine.projection-placement');
+const bindProjectionPlacement = (element, measure, invalidate = () => { }) => {
+    const host = element;
+    const state = { projected: false, measure, invalidate };
+    host[placementKey] = state;
+    return {
+        get projected() {
+            return host[placementKey] === state && state.projected;
+        },
+        dispose() {
+            if (host[placementKey] === state)
+                delete host[placementKey];
+            state.projected = false;
+        },
+    };
+};
+
 const NATIVE_AD_ELEMENT_NAME = 'capacitor-admob-native';
 const defineNativeAdElement = (findFeed) => {
     const runtime = globalThis;
@@ -94,7 +152,7 @@ const measureNativeAdSlot = (element, scrollElement) => {
     const domRect = element.getBoundingClientRect();
     if (!element.isConnected ||
         style.display === 'none' ||
-        style.visibility === 'hidden' ||
+        (style.visibility === 'hidden' && getUnprojectedVisibility(element) === 'hidden') ||
         Number.parseFloat(style.opacity || '1') === 0 ||
         domRect.width <= 0 ||
         domRect.height <= 0) {
@@ -189,12 +247,10 @@ let sessionSequence = 0;
 const feeds = new Map();
 const createSessionId = () => { var _a, _b, _c; return (_c = (_b = (_a = globalThis.crypto) === null || _a === void 0 ? void 0 : _a.randomUUID) === null || _b === void 0 ? void 0 : _b.call(_a)) !== null && _c !== void 0 ? _c : `${Date.now()}-${++sessionSequence}-${Math.random().toString(36).slice(2)}`; };
 /**
- * Experimental manager for native-ad integration research.
+ * Manages native ad placement and lifecycle in a scrolling feed.
  *
  * A stable `slotKey`, rather than the element or array index, owns the native
  * ad lifecycle. Virtual-scroller compatibility has not yet been validated.
- *
- * @experimental Native overlay gesture routing is still being validated on devices.
  */
 class NativeAdFeed {
     constructor(options) {
@@ -217,6 +273,15 @@ class NativeAdFeed {
             if (this.destroyed) {
                 return;
             }
+            if (event instanceof Event &&
+                event.type === 'load' &&
+                event.target instanceof HTMLImageElement &&
+                event.target.dataset['admobSnapshot'] !== undefined)
+                return;
+            if (!(event instanceof Event) || !['scroll', 'touchmove', 'wheel'].includes(event.type)) {
+                for (const state of this.slots.values())
+                    state.lastPlacement = undefined;
+            }
             if (!(this.nativeScrollElement &&
                 event instanceof Event &&
                 ['scroll', 'touchmove', 'wheel'].includes(event.type))) {
@@ -245,6 +310,9 @@ class NativeAdFeed {
         if (feeds.size >= MAX_ACTIVE_FEEDS) {
             throw new Error(`At most ${MAX_ACTIVE_FEEDS} native ad feeds can be active`);
         }
+        if (options.androidScrollSnapshot && core.Capacitor.getPlatform() !== 'android') {
+            throw new Error('androidScrollSnapshot requires Android');
+        }
         this.options = Object.assign(Object.assign({}, options), { feedId: id });
         this.nativeScrollElement = core.Capacitor.getPlatform() === 'ios' ? options.scrollElement : undefined;
         if (typeof IntersectionObserver !== 'undefined') {
@@ -331,7 +399,7 @@ class NativeAdFeed {
         return handle;
     }
     attach(slotKey, element) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e;
         this.assertActive();
         const normalizedKey = slotKey.trim();
         if (!normalizedKey) {
@@ -358,30 +426,58 @@ class NativeAdFeed {
         };
         applySlotDefaults(element, (_a = this.options.template) !== null && _a !== void 0 ? _a : exports.NativeAdTemplate.Medium);
         state.element = element;
+        if (this.options.androidScrollSnapshot) {
+            const owner = ((_b = state.projectionOwner) !== null && _b !== void 0 ? _b : (state.projectionOwner = `admob-${crypto.randomUUID()}`));
+            element.dataset['admobProjection'] = owner;
+            state.projectionSelector = `[data-admob-projection="${owner}"]`;
+            (_c = state.placementBinding) === null || _c === void 0 ? void 0 : _c.dispose();
+            state.placementBinding = bindProjectionPlacement(element, () => {
+                const placement = this.measurePlacement(state);
+                state.lastPlacement = placement;
+                // The reveal request applies this exact placement; keep batch deduplication in sync.
+                if (this.lastPlacements) {
+                    const previous = JSON.parse(this.lastPlacements);
+                    previous.placements = previous.placements.map((item) => item.slotKey === state.slotKey ? placement : item);
+                    this.lastPlacements = JSON.stringify(previous);
+                }
+                return Object.assign(Object.assign({}, placement), { sessionId: this.sessionId, sequence: ++this.placementSequence });
+            }, () => {
+                if (state.element !== element || this.destroyed)
+                    return;
+                state.lastPlacement = undefined;
+                this.lastPlacements = undefined;
+                this.schedulePlacementUpdate();
+            });
+        }
         state.generation += 1;
         state.lastUsed = Date.now();
         this.slots.set(normalizedKey, state);
         this.elementSlots.set(element, normalizedKey);
         this.updateScrollRoots();
-        (_b = this.intersectionObserver) === null || _b === void 0 ? void 0 : _b.observe(element);
-        (_c = this.resizeObserver) === null || _c === void 0 ? void 0 : _c.observe(element);
+        (_d = this.intersectionObserver) === null || _d === void 0 ? void 0 : _d.observe(element);
+        (_e = this.resizeObserver) === null || _e === void 0 ? void 0 : _e.observe(element);
         this.scheduleEvaluation();
     }
     detach(element) {
-        var _a, _b;
+        var _a, _b, _c;
         const slotKey = this.elementSlots.get(element);
         if (!slotKey) {
             return;
         }
         const state = this.slots.get(slotKey);
         if ((state === null || state === void 0 ? void 0 : state.element) === element) {
+            (_a = state.placementBinding) === null || _a === void 0 ? void 0 : _a.dispose();
+            state.placementBinding = undefined;
+            state.lastPlacement = undefined;
+            if (state.projectionOwner)
+                delete element.dataset['admobProjection'];
             state.element = undefined;
             state.intersecting = false;
             state.generation += 1;
             state.lastUsed = Date.now();
         }
-        (_a = this.intersectionObserver) === null || _a === void 0 ? void 0 : _a.unobserve(element);
-        (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.unobserve(element);
+        (_b = this.intersectionObserver) === null || _b === void 0 ? void 0 : _b.unobserve(element);
+        (_c = this.resizeObserver) === null || _c === void 0 ? void 0 : _c.unobserve(element);
         this.elementSlots.delete(element);
         this.updateScrollRoots();
         void this.requestPlacementUpdate();
@@ -403,6 +499,7 @@ class NativeAdFeed {
                 throw new Error('Native ad capacity is currently in use by visible slots');
             }
             await this.loadState(state);
+            await this.requestPlacementUpdate();
         });
     }
     /** Immediately hides this feed's overlays until {@link resume} is called. */
@@ -423,6 +520,8 @@ class NativeAdFeed {
     /** Hides stale overlays and remeasures after an application-driven layout change. */
     async invalidateLayout() {
         this.assertActive();
+        for (const state of this.slots.values())
+            state.lastPlacement = undefined;
         this.layoutInvalidated = true;
         this.scheduleEvaluation();
         if (!(await this.requestPlacementUpdate())) {
@@ -507,7 +606,9 @@ class NativeAdFeed {
         }
         this.settleTimer = setTimeout(() => {
             this.layoutInvalidated = false;
-            void this.runOperation(() => this.evaluate());
+            void this.runOperation(async () => {
+                await this.evaluate();
+            });
         }, SCROLL_SETTLE_MS);
     }
     async evaluate() {
@@ -524,7 +625,7 @@ class NativeAdFeed {
             .filter((state) => state.status === 'idle')
             .slice(0, Math.max(0, MAX_NATIVE_ADS - occupied));
         await Promise.allSettled(loadable.map((state) => this.loadState(state)));
-        void this.requestPlacementUpdate();
+        await this.requestPlacementUpdate();
     }
     async loadState(state) {
         var _a;
@@ -534,16 +635,7 @@ class NativeAdFeed {
         state.status = 'loading';
         const loadVersion = ++state.loadVersion;
         try {
-            await bridge.loadNativeAd({
-                feedId: this.options.feedId,
-                sessionId: this.sessionId,
-                slotKey: state.slotKey,
-                template: (_a = this.options.template) !== null && _a !== void 0 ? _a : exports.NativeAdTemplate.Medium,
-                style: this.options.style,
-                adId: this.options.adId,
-                isTesting: this.options.isTesting,
-                npa: this.options.npa,
-            });
+            await bridge.loadNativeAd(Object.assign({ feedId: this.options.feedId, sessionId: this.sessionId, slotKey: state.slotKey, template: (_a = this.options.template) !== null && _a !== void 0 ? _a : exports.NativeAdTemplate.Medium, style: this.options.style, adId: this.options.adId, isTesting: this.options.isTesting, npa: this.options.npa }, (state.projectionSelector ? { projectionSelector: state.projectionSelector } : {})));
             if (state.loadVersion === loadVersion) {
                 state.status = 'loaded';
                 state.lastUsed = Date.now();
@@ -577,6 +669,9 @@ class NativeAdFeed {
     }
     getVisibleStates() {
         return [...this.slots.values()].filter((state) => {
+            var _a;
+            if (this.reuseProjectedPlacement(state))
+                return state.intersecting && !!((_a = state.lastPlacement) === null || _a === void 0 ? void 0 : _a.visible);
             const measured = state.element && state.intersecting ? measureNativeAdSlot(state.element) : undefined;
             return Boolean(measured && this.isSupportedSize(measured));
         });
@@ -625,6 +720,7 @@ class NativeAdFeed {
         return result;
     }
     async destroyResources() {
+        var _a;
         await Promise.all([
             ...[...this.listenerHandles].map((handle) => handle.remove()),
             ...(this.nativeStarted && bridge
@@ -633,9 +729,39 @@ class NativeAdFeed {
         ]);
         this.nativeStarted = false;
         this.listenerHandles.clear();
+        for (const state of this.slots.values())
+            (_a = state.placementBinding) === null || _a === void 0 ? void 0 : _a.dispose();
         this.slots.clear();
         this.elementSlots.clear();
     }
+    reuseProjectedPlacement(state) {
+        var _a, _b, _c;
+        return Boolean(((_a = state.placementBinding) === null || _a === void 0 ? void 0 : _a.projected) &&
+            ((_b = state.lastPlacement) === null || _b === void 0 ? void 0 : _b.visible) &&
+            ((_c = state.element) === null || _c === void 0 ? void 0 : _c.isConnected) &&
+            !this.paused &&
+            !this.destroyed &&
+            !document.hidden &&
+            state.status === 'loaded' &&
+            state.lastPlacement.generation === state.generation);
+    }
+    measurePlacement(state) {
+        const measured = state.element ? measureNativeAdSlot(state.element, this.nativeScrollElement) : undefined;
+        return {
+            feedId: this.options.feedId,
+            slotKey: state.slotKey,
+            generation: state.generation,
+            visible: Boolean(!this.paused &&
+                !this.destroyed &&
+                state.status === 'loaded' &&
+                (!this.layoutInvalidated || this.options.androidScrollSnapshot) &&
+                measured &&
+                this.isSupportedSize(measured) &&
+                !document.hidden),
+            rect: measured === null || measured === void 0 ? void 0 : measured.rect,
+            clipRect: measured === null || measured === void 0 ? void 0 : measured.clipRect,
+        };
+    }
     requestPlacementUpdate(allowDirect = false) {
         this.updateDirty = true;
         this.placementAcknowledgementRequired || (this.placementAcknowledgementRequired = !allowDirect);
@@ -653,19 +779,15 @@ class NativeAdFeed {
                 this.updateDirty = false;
                 const allowDirect = !this.placementAcknowledgementRequired;
                 this.placementAcknowledgementRequired = false;
+                const retainedSlots = new Set();
                 const placements = [...this.slots.values()]
                     .filter((state) => state.status === 'loaded')
                     .map((state) => {
-                    const measured = state.element ? measureNativeAdSlot(state.element, this.nativeScrollElement) : undefined;
-                    const visible = Boolean(!this.paused && !this.layoutInvalidated && measured && this.isSupportedSize(measured) && !document.hidden);
-                    return {
-                        feedId: this.options.feedId,
-                        slotKey: state.slotKey,
-                        generation: state.generation,
-                        visible,
-                        rect: measured === null || measured === void 0 ? void 0 : measured.rect,
-                        clipRect: measured === null || measured === void 0 ? void 0 : measured.clipRect,
-                    };
+                    if (this.reuseProjectedPlacement(state)) {
+                        retainedSlots.add(state.slotKey);
+                        return state.lastPlacement;
+                    }
+                    return (state.lastPlacement = this.measurePlacement(state));
                 });
                 const scrollContainer = this.nativeScrollElement
                     ? measureNativeAdScrollContainer(this.nativeScrollElement)
@@ -675,7 +797,17 @@ class NativeAdFeed {
                     continue;
                 }
                 try {
-                    const batch = Object.assign({ feedId: this.options.feedId, sessionId: this.sessionId, sequence: ++this.placementSequence, placements }, (scrollContainer ? { scrollContainer } : {}));
+                    const batch = Object.assign({ feedId: this.options.feedId, sessionId: this.sessionId, sequence: ++this.placementSequence, placements: placements.map((placement) => {
+                            return retainedSlots.has(placement.slotKey)
+                                ? {
+                                    feedId: placement.feedId,
+                                    slotKey: placement.slotKey,
+                                    generation: placement.generation,
+                                    visible: true,
+                                    retain: true,
+                                }
+                                : placement;
+                        }) }, (scrollContainer ? { scrollContainer } : {}));
                     const channel = core.Capacitor.getPlatform() === 'android'
                         ? window
                             .capacitorAdMobPlacements