🐛 Make amp-apester-media use user error (#35462)

* Make amp-apester-media use user error * Vertical whitespace for readabilitiy * Add missing import * Fix key
ampproject · Aug 11, 2021 · c9d58fe · c9d58fe
1 parent 47c5394
commit c9d58fe
Showing 1 changed file with 43 additions and 50 deletions.
diff --git a/extensions/amp-apester-media/0.1/amp-apester-media.js b/extensions/amp-apester-media/0.1/amp-apester-media.js
@@ -22,7 +22,7 @@ import {
   getLengthNumeral,
   isLayoutSizeDefined,
 } from '#core/dom/layout';
-import {dev, userAssert} from '../../../src/log';
+import {dev, user, userAssert} from '../../../src/log';
 import {dict} from '#core/types/object';
 import {
   extractTags,
@@ -286,8 +286,8 @@ class AmpApesterMedia extends AMP.BaseElement {
   layoutCallback() {
     this.element.classList.add('amp-apester-container');
     const vsync = Services.vsyncFor(this.win);
-    return this.queryMedia_().then(
-      (response) => {
+    return this.queryMedia_()
+      .then((response) => {
         if (!response || response['status'] === 204) {
           dev().warn(TAG, 'Display', 'No Content for provided tag');
           return this.unlayoutCallback();
@@ -320,64 +320,57 @@ class AmpApesterMedia extends AMP.BaseElement {
             this.element.appendChild(iframe);
             handleCompanionAds(media, this.element);
           })
-          .then(() => {
-            return this.loadPromise(iframe).then(() => {
-              return vsync.mutatePromise(() => {
-                if (this.iframe_) {
-                  this.iframe_.classList.add('i-amphtml-apester-iframe-ready');
-                  const campaignData = media['campaignData'];
-                  if (campaignData) {
-                    const bottomAdOptions = campaignData['bottomAdOptions'];
-                    if (bottomAdOptions && bottomAdOptions.enabled) {
-                      this.hasBottomAd_ = true;
-                      const ampdoc = this.getAmpDoc();
-                      Services.extensionsFor(
-                        this.win
-                      )./*OK*/ installExtensionForDoc(ampdoc, AD_TAG);
-                      this.iframe_.contentWindow./*OK*/ postMessage(
-                        BOTTOM_AD_MESSAGE,
-                        '*'
-                      );
-                    }
+          .then(() => this.loadPromise(iframe))
+          .then(() =>
+            vsync.mutatePromise(() => {
+              if (this.iframe_) {
+                this.iframe_.classList.add('i-amphtml-apester-iframe-ready');
+
+                const campaignData = media['campaignData'];
+                if (campaignData) {
+                  const bottomAdOptions = campaignData['bottomAdOptions'];
+                  if (bottomAdOptions?.enabled) {
+                    this.hasBottomAd_ = true;
+                    const ampdoc = this.getAmpDoc();
+                    Services.extensionsFor(
+                      this.win
+                    )./*OK*/ installExtensionForDoc(ampdoc, AD_TAG);
                     this.iframe_.contentWindow./*OK*/ postMessage(
-                      /** @type {JsonObject} */ ({
-                        type: 'campaigns',
-                        data: campaignData,
-                      }),
+                      BOTTOM_AD_MESSAGE,
                       '*'
                     );
                   }
+
+                  this.iframe_.contentWindow./*OK*/ postMessage(
+                    /** @type {JsonObject} */ ({
+                      type: 'campaigns',
+                      data: campaignData,
+                    }),
+                    '*'
+                  );
                 }
-                let height = 0;
-                if (media && media['data'] && media['data']['size']) {
-                  height = media['data']['size']['height'];
-                }
-                if (height != this.height_) {
-                  this.height_ = height;
-                  if (this.random_) {
-                    this.attemptChangeHeight(height);
-                  } else {
-                    this.forceChangeHeight(height);
-                  }
+              }
+
+              const height = media?.['data']?.['size']?.['height'] ?? 0;
+              if (height != this.height_) {
+                this.height_ = height;
+                if (this.random_) {
+                  this.attemptChangeHeight(height);
+                } else {
+                  this.forceChangeHeight(height);
                 }
-              });
-            });
-          })
+              }
+            })
+          )
           .then(() => {
             observeWithSharedInOb(this.element, (inViewport) =>
               this.viewportCallback_(inViewport)
             );
-          })
-          .catch((error) => {
-            dev().error(TAG, 'Display', error);
-            return undefined;
           });
-      },
-      (error) => {
-        dev().error(TAG, 'Display', error);
-        return undefined;
-      }
-    );
+      })
+      .catch((error) => {
+        user().error(TAG, 'Display', error);
+      });
   }
 
   /** @override */