From cda30283d2b75bf1a197e1bf8ed1edb155ffbd89 Mon Sep 17 00:00:00 2001
From: Sandra Lokshina <ismena@google.com>
Date: Thu, 11 Jun 2020 11:42:14 -0700
Subject: [PATCH] Fix: fix UI not showing up for server side ad streams.

Apparently, IMA SDK adds their ad UI differently on SS vs
CS ad streams. The solution we devised for CS ad experience
that combined our UI with the IMA's native ad UI turned out
not to work for the SS experience - our UI was being obstructed
by the IMA's UI.
This change adds a new container for the SS IMA UI that allows
our own UI to stay visible.

Issue #2592.

Change-Id: Iedb24beeb8d6f777b1fd7f4155c591350432ec78
---
 demo/main.js                      |  4 ++--
 docs/tutorials/ad_monetization.md |  4 +---
 ui/controls.js                    | 23 +++++++++++++++++++++++
 ui/less/ad_controls.less          |  3 +--
 4 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/demo/main.js b/demo/main.js
index debc97ba43..ce7ed0a72a 100644
--- a/demo/main.js
+++ b/demo/main.js
@@ -1420,12 +1420,12 @@ shakaDemo.Main = class {
         'Asset should have imaIds!');
 
     const adManager = this.player_.getAdManager();
-    const controlsContainer = this.controls_.getControlsContainer();
+    const container = this.controls_.getServerSideAdContainer();
     try {
       // If IMA is blocked by an AdBlocker, init() will throw.
       // If that happens, return our backup uri.
       goog.asserts.assert(this.video_ != null, 'Video should not be null!');
-      adManager.initServerSide(controlsContainer, this.video_);
+      adManager.initServerSide(container, this.video_);
       let request;
       if (asset.imaIds.assetKey.length) {
         // LIVE stream
diff --git a/docs/tutorials/ad_monetization.md b/docs/tutorials/ad_monetization.md
index a31986a0af..de89b1729b 100644
--- a/docs/tutorials/ad_monetization.md
+++ b/docs/tutorials/ad_monetization.md
@@ -100,7 +100,7 @@ const video = document.getElementById('video');
 const ui = video['ui'];
 // If you're using a non-UI build, this is the div you'll need to create
 // for your layout.
-var container = video.ui.getControls().getControlsContainer();
+var container = video.ui.getControls().getServerSideAdContainer();
 adManager.initServerSide(container, video);
 ```
 
@@ -127,8 +127,6 @@ See [google.ima.dai.api.VODStreamRequest][] for details on the request object.
 [google.ima.dai.api.VODStreamRequest]: https://developers.google.com/interactive-media-ads/docs/sdks/html5/dai/reference/js/VODStreamRequest
 
 Requesting a LIVE stream:
-Please note that we don't support ad tracking information for DAI LIVE streams
-at the moment. It is on our road map for a future release.
 
 ```js
 var streamRequest = new google.ima.dai.api.LiveStreamRequest();
diff --git a/ui/controls.js b/ui/controls.js
index f61f713b1d..5260cc056e 100644
--- a/ui/controls.js
+++ b/ui/controls.js
@@ -526,6 +526,14 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
     return this.controlsContainer_;
   }
 
+  /**
+   * @return {!HTMLElement}
+   * @export
+   */
+  getServerSideAdContainer() {
+    return this.daiAdContainer_;
+  }
+
   /**
    * @return {!shaka.extern.UIConfiguration}
    * @export
@@ -679,6 +687,8 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
       this.addBufferingSpinner_();
     }
 
+    this.addDaiAdContainer_();
+
     this.addControlsButtonPanel_();
 
     this.settingsMenus_ = Array.from(
@@ -846,6 +856,19 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
     }
   }
 
+
+  /**
+   * Adds a container for server side ad UI with IMA SDK.
+   *
+   * @private
+   */
+  addDaiAdContainer_() {
+    /** @private {!HTMLElement} */
+    this.daiAdContainer_ = shaka.util.Dom.createHTMLElement('div');
+    this.daiAdContainer_.classList.add('shaka-server-side-ad-container');
+    this.controlsContainer_.appendChild(this.daiAdContainer_);
+  }
+
   /**
    * Adds static event listeners.  This should only add event listeners to
    * things that don't change (e.g. Player).  Dynamic elements (e.g. controls)
diff --git a/ui/less/ad_controls.less b/ui/less/ad_controls.less
index 1d4d950214..25cb9c9884 100644
--- a/ui/less/ad_controls.less
+++ b/ui/less/ad_controls.less
@@ -11,8 +11,7 @@
   text-shadow: 1px 1px 4px black;
 }
 
-.shaka-ad-container {
-  .absolute-position();
+.shaka-server-side-ad-container {
   .fill-container();
 
   &:not([ad-active="true"]) {