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 shaka-project#2592.

Change-Id: Iedb24beeb8d6f777b1fd7f4155c591350432ec78

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

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();

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)

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"]) {