ShowHeroes adapter - expanded outstream support

Author: vadim-mazzherin

modules/shBidAdapter.js

@@ -1,5 +1,6 @@
 import * as utils from '../src/utils';
 import { config } from '../src/config';
+import { Renderer } from '../src/Renderer';
 import { registerBidder } from '../src/adapters/bidderFactory';
 import { VIDEO, BANNER } from '../src/mediaTypes';
 
@@ -12,6 +13,13 @@ const STAGE_VL = 'https://video-library.stage.showheroes.com';
 const BIDDER_CODE = 'showheroes-bs';
 const TTL = 300;
 
+function getEnvURLs(isStage) {
+  return {
+    pubTag: isStage ? STAGE_PUBLISHER_TAG : PROD_PUBLISHER_TAG,
+    vlHost: isStage ? STAGE_VL : PROD_VL
+  }
+}
+
 export const spec = {
   code: BIDDER_CODE,
   aliases: ['showheroesBs'],
@@ -23,6 +31,9 @@ export const spec = {
     const pageURL = validBidRequests[0].params.contentPageUrl || bidderRequest.refererInfo.referer;
     const isStage = !!validBidRequests[0].params.stage;
     const isBanner = !!validBidRequests[0].mediaTypes.banner;
+    const isOutstream = utils.deepAccess(validBidRequests[0], 'mediaTypes.video.context');
+    const isCustomRender = utils.deepAccess(validBidRequests[0], 'params.outstreamOptions.customRender');
+    const outstreamOptions = utils.deepAccess(validBidRequests[0], 'params.outstreamOptions');
 
     let adUnits = validBidRequests.map((bid) => {
       const vpaidMode = utils.getBidIdParameter('vpaidMode', bid.params);
@@ -57,6 +68,7 @@ export const spec = {
         type: streamType,
         bidId: bid.bidId,
         mediaType: isBanner ? BANNER : VIDEO,
+        context: context,
         playerId: utils.getBidIdParameter('playerId', bid.params),
         auctionId: bidderRequest.auctionId,
         bidderCode: BIDDER_CODE,
@@ -67,6 +79,7 @@ export const spec = {
           width: sizes[0],
           height: sizes[1]
         },
+        bidRequest: bidderRequest,
       };
     });
 
@@ -78,8 +91,9 @@ export const spec = {
         'user': [],
         'meta': {
           'pageURL': encodeURIComponent(pageURL),
-          'vastCacheEnabled': (!!config.getConfig('cache') && !isBanner) || false,
+          'vastCacheEnabled': (!!config.getConfig('cache') && !isBanner && !outstreamOptions) || false,
           'isDesktop': utils.getWindowTop().document.documentElement.clientWidth > 700,
+          'xmlAndTag': (isOutstream && isCustomRender) || false,
           'stage': isStage || undefined
         },
         'requests': adUnits,
@@ -133,6 +147,14 @@ function createBids(bidRes, reqData) {
 
   bidRes.bids.forEach(function (bid) {
     const reqBid = bidMap[bid.bidId];
+    let currentBidRequest;
+    for (let i in reqBid.bidRequest.bids) {
+      if (bid.bidId === reqBid.bidRequest.bids[i].bidId) {
+        currentBidRequest = reqBid.bidRequest.bids[i];
+        break;
+      }
+    }
+
     let bidUnit = {};
     bidUnit.cpm = bid.cpm;
     bidUnit.requestId = bid.bidId;
@@ -154,25 +176,95 @@ function createBids(bidRes, reqData) {
     }
     if (reqBid.mediaType === BANNER) {
       bidUnit.ad = getBannerHtml(bid, reqBid, reqData);
+    } else if (reqBid.context === 'outstream') {
+      const renderer = Renderer.install({
+        id: bid.bidId,
+        url: '//',
+        config: {
+          playerId: reqBid.playerId,
+          width: bid.video.width,
+          height: bid.video.height,
+          vastUrl: bid.vastTag,
+          vastXml: bid.vastXml,
+          debug: reqData.debug,
+          isStage: !!reqData.meta.stage,
+          customRender: utils.getBidIdParameter('customRender', currentBidRequest.params.outstreamOptions),
+          slot: utils.getBidIdParameter('slot', currentBidRequest.params.outstreamOptions),
+          iframe: utils.getBidIdParameter('iframe', currentBidRequest.params.outstreamOptions),
+        }
+      });
+      renderer.setRender(outstreamRender);
+      bidUnit.renderer = renderer;
     }
     bids.push(bidUnit);
   });
 
   return bids;
 }
 
+function outstreamRender(bid) {
+  const embedCode = createOutstreamEmbedCode(bid);
+  if (typeof bid.renderer.config.customRender === 'function') {
+    bid.renderer.config.customRender(bid, embedCode);
+  } else {
+    try {
+      const inIframe = utils.getBidIdParameter('iframe', bid.renderer.config);
+      if (inIframe && window.document.getElementById(inIframe).nodeName === 'IFRAME') {
+        const iframe = window.document.getElementById(inIframe);
+        let framedoc = iframe.contentDocument || (iframe.contentWindow && iframe.contentWindow.document);
+        framedoc.body.appendChild(embedCode);
+        return;
+      }
+
+      const slot = utils.getBidIdParameter('slot', bid.renderer.config);
+      if (slot && window.document.getElementById(slot)) {
+        window.document.getElementById(slot).appendChild(embedCode);
+      } else if (slot) {
+        utils.logError('[ShowHeroes][renderer] Error: spot not found');
+      }
+    } catch (err) {
+      utils.logError('[ShowHeroes][renderer] Error:' + err.message)
+    }
+  }
+}
+
+function createOutstreamEmbedCode(bid) {
+  const isStage = utils.getBidIdParameter('isStage', bid.renderer.config);
+  const urls = getEnvURLs(isStage);
+
+  const fragment = window.document.createDocumentFragment();
+
+  const script = window.document.createElement('script');
+  script.type = 'text/javascript';
+  script.src = urls.pubTag;
+  script.onload = function () {
+    window.ShowheroesTag = this;
+  };
+  script.setAttribute('data-player-host', urls.vlHost);
+
+  const spot = window.document.createElement('div');
+  spot.setAttribute('class', 'showheroes-spot');
+  spot.setAttribute('data-player', utils.getBidIdParameter('playerId', bid.renderer.config));
+  spot.setAttribute('data-debug', utils.getBidIdParameter('debug', bid.renderer.config));
+  spot.setAttribute('data-ad-vast-tag', utils.getBidIdParameter('vastUrl', bid.renderer.config));
+  spot.setAttribute('data-stream-type', 'outstream');
+
+  fragment.appendChild(spot);
+  fragment.appendChild(script);
+  return fragment;
+}
+
 function getBannerHtml (bid, reqBid, reqData) {
   const isStage = !!reqData.meta.stage;
-  const pubTag = isStage ? STAGE_PUBLISHER_TAG : PROD_PUBLISHER_TAG;
-  const vlHost = isStage ? STAGE_VL : PROD_VL;
+  const urls = getEnvURLs(isStage);
   return `<html>
     <head></head>
     <body>
-      <script async src="${pubTag}" 
+      <script async src="${urls.pubTag}" 
               data-canvas=""
               data-noad-passback-listener=""
               onload="window.ShowheroesTag=this"
-              data-player-host="${vlHost}"></script>
+              data-player-host="${urls.vlHost}"></script>
       <div class="showheroes-spot"
             data-debug="${reqData.debug ? '1' : ''}"
             data-player="${reqBid.playerId}"

modules/shBidAdapter.md

@@ -49,6 +49,41 @@ Module that connects to ShowHeroes demand source to fetch bids.
                    }
                ]
            },
+           {
+               code: 'video',
+               mediaTypes: {
+                   video: {
+                       playerSize: [640, 480],
+                       context: 'outstream',
+                   }
+               },
+               bids: [
+                   {
+                       bidder: "showheroes-bs",
+                       params: {
+                           playerId: '0151f985-fb1a-4f37-bb26-cfc62e43ec05',
+                           vpaidMode: true, // by default is 'false'
+                           outstreamOptions: { 
+                               // Required for the default outstream renderer, one of
+                               iframe: 'iframe_id',
+                               slot: 'slot_id'
+                               
+                               // Custom outstream rendering function
+                               customRender: function(bid, embedCode) {
+                                   // Example with embedCode
+                                   someContainer.appendChild(embedCode);
+                                   
+                                   // bid config data
+                                   var vastUrl = bid.renderer.config.vastUrl;
+                                   var videoWidth = bid.renderer.config.width;
+                                   var videoHeight = bid.renderer.config.height;
+                                   var playerId = bid.renderer.config.playerId;
+                               }, 
+                           }
+                       }
+                   }
+               ]
+           },
            {
                code: 'banner',
                mediaTypes: {