Debugging module: restore old mock creative, respect requested sizes

prebid · Feb 24, 2025 · e224df0 · e224df0
1 parent 866b18e
commit e224df0
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 65 deletions.
diff --git a/integrationExamples/testBidder/testBidderVideoExample.html b/integrationExamples/testBidder/testBidderVideoExample.html
@@ -70,6 +70,6 @@
     <body>
         <h2>Prebid Test Bidder Example</h2>
         <h5>Video ad</h5>
-        <div id="player"></div>
+        <div id="adUnit-0000"></div>
     </body>
-</html>
+</html>
diff --git a/modules/debugging/bidInterceptor.js b/modules/debugging/bidInterceptor.js
@@ -1,13 +1,5 @@
-import { Renderer } from '../../src/Renderer.js';
-import { auctionManager } from '../../src/auctionManager.js';
-import { BANNER, NATIVE, VIDEO } from '../../src/mediaTypes.js';
-import {
-  deepAccess,
-  deepClone,
-  delayExecution,
-  mergeDeep,
-  hasNonSerializableProperty
-} from '../../src/utils.js';
+import {BANNER, VIDEO} from '../../src/mediaTypes.js';
+import {deepAccess, deepClone, delayExecution, hasNonSerializableProperty, mergeDeep} from '../../src/utils.js';
 import responseResolvers from './responses.js';
 
 /**
@@ -147,7 +139,7 @@ Object.assign(BidInterceptor.prototype, {
     return (bid, ...args) => {
       const response = this.responseDefaults(bid);
       mergeDeep(response, replFn({args: [bid, ...args]}));
-      this.setDefaultAd(bid, response);
+      responseResolvers[response.mediaType]?.(bid, response);
       response.isDebug = true;
       return response;
     }
@@ -175,56 +167,25 @@ Object.assign(BidInterceptor.prototype, {
       requestId: bid.bidId,
       cpm: 3.5764,
       currency: 'EUR',
-      width: 600,
-      height: 500,
       ttl: 360,
       creativeId: 'mock-creative-id',
       netRevenue: false,
       meta: {}
     };
 
     if (!bid.mediaType) {
-      const adUnit = auctionManager.index.getAdUnit({adUnitId: bid.adUnitId}) || {mediaTypes: {}};
-      response.mediaType = Object.keys(adUnit.mediaTypes)[0] || 'banner';
+      response.mediaType = Object.keys(bid.mediaTypes)?.[0] || BANNER;
     }
-
-    return response;
-  },
-  setDefaultAd(bid, bidResponse) {
-    switch (bidResponse.mediaType) {
-      case VIDEO:
-        if (!bidResponse.hasOwnProperty('vastXml') && !bidResponse.hasOwnProperty('vastUrl')) {
-          bidResponse.vastXml = responseResolvers[VIDEO]();
-          bidResponse.renderer = Renderer.install({
-            url: 'https://cdn.jwplayer.com/libraries/l5MchIxB.js',
-          });
-          bidResponse.renderer.setRender(function (bid) {
-            const player = window.jwplayer('player').setup({
-              width: 640,
-              height: 360,
-              advertising: {
-                client: 'vast',
-                outstream: true,
-                endstate: 'close'
-              },
-            });
-            player.on('ready', function() {
-              player.loadAdXml(bid.vastXml);
-            });
-          })
-        }
-        break;
-      case NATIVE:
-        if (!bidResponse.hasOwnProperty('native')) {
-          bidResponse.native = responseResolvers[NATIVE](bid);
-        }
-        break;
-      case BANNER:
-      default:
-        if (!bidResponse.hasOwnProperty('ad') && !bidResponse.hasOwnProperty('adUrl')) {
-          bidResponse.ad = responseResolvers[BANNER]();
-        }
+    let size;
+    if (response.mediaType === BANNER) {
+      size = bid.mediaTypes.banner.sizes?.[0] ?? [300, 250];
+    } else if (response.mediaType === VIDEO) {
+      size = bid.mediaTypes.video.playerSize?.[0] ?? [600, 500];
     }
+    if (Array.isArray(size)) {
+      ([response.width, response.height] = size);
+    }
+    return response;
   },
   /**
    * Match a candidate bid against all registered rules.

diff --git a/modules/debugging/responses.js b/modules/debugging/responses.js
@@ -1,18 +1,56 @@
-import { BANNER, NATIVE, VIDEO } from '../../src/mediaTypes.js';
+import {BANNER, NATIVE, VIDEO} from '../../src/mediaTypes.js';
+import {Renderer} from '../../src/Renderer.js';
+import {getGptSlotInfoForAdUnitCode} from '../../libraries/gptUtils/gptUtils.js';
 
 const ORTB_NATIVE_ASSET_TYPES = ['img', 'video', 'link', 'data', 'title'];
 
 export default {
-  [BANNER]: () => `<html><head><body><img src="https://vcdn.adnxs.com/p/creative-image/27/c0/52/67/27c05267-5a6d-4874-834e-18e218493c32.png"/></body></html>`,
-  [VIDEO]: () => '<?xml version=\"1.0\" encoding=\"UTF-8\"?><VAST version=\"3.0\"><Ad><InLine><AdSystem>GDFP</AdSystem><AdTitle>Demo</AdTitle><Description><![CDATA[Demo]]></Description><Creatives><Creative><Linear ><Duration>00:00:11</Duration><VideoClicks><ClickThrough><![CDATA[https://prebid.org/]]></ClickThrough></VideoClicks><MediaFiles><MediaFile delivery=\"progressive\" width=\"640\" height=\"360\" type=\"video/mp4\" scalable=\"true\" maintainAspectRatio=\"true\"><![CDATA[https://s3.amazonaws.com/files.prebid.org/creatives/PrebidLogo.mp4]]></MediaFile></MediaFiles></Linear></Creative></Creatives></InLine></Ad></VAST>',
-  [NATIVE]: (bid) => {
-    return {
-      ortb: {
-        link: {
-          url: 'https://www.link.example',
-          clicktrackers: ['https://impression.example']
-        },
-        assets: bid.nativeOrtbRequest.assets.map(mapDefaultNativeOrtbAsset)
+  [BANNER]: (bid, bidResponse) => {
+    if (!bidResponse.hasOwnProperty('ad') && !bidResponse.hasOwnProperty('adUrl')) {
+      bidResponse.ad = `<html><head><style>#ad {width: ${bidResponse.width}px;height: ${bidResponse.height}px;background-color: #f6f6ae;color: #85144b;padding: 5px;text-align: center;display: flex;flex-direction: column;align-items: center;justify-content: center;}#bidder {font-family: monospace;font-weight: normal;}#title {font-size: x-large;font-weight: bold;margin-bottom: 5px;}#body {font-size: large;margin-top: 5px;}</style></head><body><div id="ad"><div id="title">Mock ad: <span id="bidder">${bid.bidder}</span></div><div id="body">${bidResponse.width}x${bidResponse.height}</div></div></body></html>`;
+    }
+  },
+  [VIDEO]: (bid, bidResponse) => {
+    if (!bidResponse.hasOwnProperty('vastXml') && !bidResponse.hasOwnProperty('vastUrl')) {
+      bidResponse.vastXml = '<?xml version="1.0" encoding="UTF-8"?><VAST version="3.0"><Ad><InLine><AdSystem>GDFP</AdSystem><AdTitle>Demo</AdTitle><Description><![CDATA[Demo]]></Description><Creatives><Creative><Linear ><Duration>00:00:11</Duration><VideoClicks><ClickThrough><![CDATA[https://prebid.org/]]></ClickThrough></VideoClicks><MediaFiles><MediaFile delivery="progressive" width="640" height="360" type="video/mp4" scalable="true" maintainAspectRatio="true"><![CDATA[https://s3.amazonaws.com/files.prebid.org/creatives/PrebidLogo.mp4]]></MediaFile></MediaFiles></Linear></Creative></Creatives></InLine></Ad></VAST>';
+      bidResponse.renderer = Renderer.install({
+        url: 'https://cdn.jwplayer.com/libraries/l5MchIxB.js',
+      });
+      bidResponse.renderer.setRender(function (bid, doc) {
+        const parentId = getGptSlotInfoForAdUnitCode(bid.adUnitCode).divId ?? bid.adUnitCode;
+        const div = doc.createElement('div');
+        div.id = `${parentId}-video-player`;
+        doc.getElementById(parentId).appendChild(div);
+        const player = window.jwplayer(div.id).setup({
+          debug: true,
+          width: bidResponse.width,
+          height: bidResponse.height,
+          advertising: {
+            client: 'vast',
+            outstream: true,
+            endstate: 'close'
+          },
+        });
+        player.on('ready', async function () {
+          if (bid.vastUrl) {
+            player.loadAdTag(bid.vastUrl);
+          } else {
+            player.loadAdXml(bid.vastXml);
+          }
+        });
+      })
+    }
+  },
+  [NATIVE]: (bid, bidResponse) => {
+    if (!bidResponse.hasOwnProperty('native')) {
+      bidResponse.native = {
+        ortb: {
+          link: {
+            url: 'https://www.link.example',
+            clicktrackers: ['https://impression.example']
+          },
+          assets: bid.nativeOrtbRequest.assets.map(mapDefaultNativeOrtbAsset)
+        }
       }
     }
   }