Skip to content

Commit

Permalink
Fix: fix UI not showing up for server side ad streams.
Browse files Browse the repository at this point in the history
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
ismena committed Jun 12, 2020
1 parent f01d4ed commit cda3028
Showing 4 changed files with 27 additions and 7 deletions.
4 changes: 2 additions & 2 deletions demo/main.js
Original file line number Diff line number Diff line change
@@ -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
4 changes: 1 addition & 3 deletions docs/tutorials/ad_monetization.md
Original file line number Diff line number Diff line change
@@ -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();
23 changes: 23 additions & 0 deletions ui/controls.js
Original file line number Diff line number Diff line change
@@ -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)
3 changes: 1 addition & 2 deletions ui/less/ad_controls.less
Original file line number Diff line number Diff line change
@@ -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"]) {

0 comments on commit cda3028

Please sign in to comment.