Skip to content

Commit

Permalink
feat(ads): Integrate with non-linear IMA CS ads (shaka-project#3639)
Browse files Browse the repository at this point in the history
  • Loading branch information
Álvaro Velad Galván authored Oct 18, 2021
1 parent a09d8c9 commit 9c3bed3
Show file tree
Hide file tree
Showing 13 changed files with 76 additions and 16 deletions.
18 changes: 18 additions & 0 deletions demo/common/assets.js
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,10 @@ shakaAssets.AdTag = {
'single_ad_samples&ciu_szs=300x250&impl=s&gdfp_req=1&env=vp&output=vast&' +
'unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ct%' +
'3Dlinear&correlator=',
SINGLE_NON_LINEAR_AD: 'https://pubads.g.doubleclick.net/gampad/ads?' +
'sz=480x70&iu=/124319096/external/single_ad_samples&ciu_szs=300x250 ' +
'&impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1' +
'&cust_params=deployment%3Ddevsite%26sample_ct%3Dnonlinear&correlator=',
SINGLE_SKIPPABLE_AD: 'https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/' +
'124319096/external/single_ad_samples&ciu_szs=300x250&impl=s&' +
'gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&cust_params=' +
Expand Down Expand Up @@ -315,6 +319,20 @@ shakaAssets.testAssets = [
.addFeature(shakaAssets.Feature.SURROUND)
.addFeature(shakaAssets.Feature.OFFLINE)
.addLicenseServer('com.widevine.alpha', 'https://cwip-shaka-proxy.appspot.com/no_auth'),
new ShakaDemoAssetInfo(
/* name= */ 'Angel One (HLS, MP4, multilingual, Widevine, single non-linear ad)',
/* iconUri= */ 'https://storage.googleapis.com/shaka-asset-icons/angel_one.png',
/* manifestUri= */ 'https://storage.googleapis.com/shaka-demo-assets/angel-one-widevine-hls/hls.m3u8',
/* source= */ shakaAssets.Source.SHAKA)
.addKeySystem(shakaAssets.KeySystem.WIDEVINE)
.setAdTagUri(shakaAssets.AdTag.SINGLE_NON_LINEAR_AD)
.addFeature(shakaAssets.Feature.HLS)
.addFeature(shakaAssets.Feature.MP4)
.addFeature(shakaAssets.Feature.MULTIPLE_LANGUAGES)
.addFeature(shakaAssets.Feature.SUBTITLES)
.addFeature(shakaAssets.Feature.SURROUND)
.addFeature(shakaAssets.Feature.OFFLINE)
.addLicenseServer('com.widevine.alpha', 'https://cwip-shaka-proxy.appspot.com/no_auth'),
new ShakaDemoAssetInfo(
/* name= */ 'Sintel 4k (multicodec)',
/* iconUri= */ 'https://storage.googleapis.com/shaka-asset-icons/sintel.png',
Expand Down
3 changes: 3 additions & 0 deletions externs/ima.js
Original file line number Diff line number Diff line change
Expand Up @@ -164,6 +164,9 @@ google.ima.Ad = class {

/** @return {string} */
getAdvertiserName() {}

/** @return {boolean} */
isLinear() {}
};


Expand Down
5 changes: 5 additions & 0 deletions externs/shaka/ads.js
Original file line number Diff line number Diff line change
Expand Up @@ -207,6 +207,11 @@ shaka.extern.IAd = class {
*/
setMuted(muted) {}

/**
* @return {boolean}
*/
isLinear() {}

/**
* @param {number} width
* @param {number} height
Expand Down
8 changes: 8 additions & 0 deletions lib/ads/client_side_ad.js
Original file line number Diff line number Diff line change
Expand Up @@ -162,6 +162,14 @@ shaka.ads.ClientSideAd = class {
return this.manager_.getVolume() == 0;
}

/**
* @override
* @export
*/
isLinear() {
return this.ad_.isLinear();
}


/**
* @override
Expand Down
12 changes: 8 additions & 4 deletions lib/ads/client_side_ad_manager.js
Original file line number Diff line number Diff line change
Expand Up @@ -436,8 +436,10 @@ shaka.ads.ClientSideAdManager = class {
'sdkAdObject': imaAd,
'originalEvent': e,
}));
this.adContainer_.setAttribute('ad-active', 'true');
this.video_.pause();
if (this.ad_.isLinear()) {
this.adContainer_.setAttribute('ad-active', 'true');
this.video_.pause();
}
}

/**
Expand All @@ -447,7 +449,9 @@ shaka.ads.ClientSideAdManager = class {
onAdComplete_(e) {
this.onEvent_(new shaka.util.FakeEvent(shaka.ads.AdManager.AD_STOPPED,
{'originalEvent': e}));
this.adContainer_.removeAttribute('ad-active');
this.video_.play();
if (this.ad_.isLinear()) {
this.adContainer_.removeAttribute('ad-active');
this.video_.play();
}
}
};
7 changes: 7 additions & 0 deletions lib/ads/server_side_ad.js
Original file line number Diff line number Diff line change
Expand Up @@ -152,6 +152,13 @@ shaka.ads.ServerSideAd = class {
return this.video_.muted;
}

/**
* @override
* @export
*/
isLinear() {
return true;
}

/**
* @override
Expand Down
7 changes: 7 additions & 0 deletions test/test/util/fake_ad.js
Original file line number Diff line number Diff line change
Expand Up @@ -154,6 +154,13 @@ shaka.test.FakeAd = class {
}


/**
* @override
*/
isLinear() {
return true;
}

/**
* @override
*/
Expand Down
12 changes: 8 additions & 4 deletions ui/controls.js
Original file line number Diff line number Diff line change
Expand Up @@ -740,7 +740,8 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
/** @private {!HTMLElement} */
this.adPanel_ = shaka.util.Dom.createHTMLElement('div');
this.adPanel_.classList.add('shaka-ad-controls');
shaka.ui.Utils.setDisplay(this.adPanel_, this.ad_ != null);
const showAdPanel = this.ad_ != null && this.ad_.isLinear();
shaka.ui.Utils.setDisplay(this.adPanel_, showAdPanel);
this.bottomControls_.appendChild(this.adPanel_);

const adPosition = new shaka.ui.AdPosition(this.adPanel_, this);
Expand Down Expand Up @@ -884,7 +885,7 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {


/**
* Adds a container for server side ad UI with IMA SDK.
* Adds a container for client side ad UI with IMA SDK.
*
* @private
*/
Expand All @@ -893,6 +894,9 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
this.clientAdContainer_ = shaka.util.Dom.createHTMLElement('div');
this.clientAdContainer_.classList.add('shaka-client-side-ad-container');
shaka.ui.Utils.setDisplay(this.clientAdContainer_, false);
this.eventManager_.listen(this.clientAdContainer_, 'click', () => {
this.onContainerClick_();
});
this.videoContainer_.appendChild(this.clientAdContainer_);
}

Expand Down Expand Up @@ -1131,7 +1135,7 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
// recent mouse movement, we're in keyboard navigation, or one of a special
// class of elements is hovered.
if (adIsPaused ||
(!this.ad_ && videoIsPaused) ||
((!this.ad_ || !this.ad_.isLinear()) && videoIsPaused) ||
this.recentMouseMovement_ ||
keyboardNavigationMode ||
this.isHovered_()) {
Expand Down Expand Up @@ -1182,7 +1186,7 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {

/** @private */
onPlayPauseClick_() {
if (this.ad_) {
if (this.ad_ && this.ad_.isLinear()) {
this.playPauseAd();
} else {
this.playPausePresentation();
Expand Down
2 changes: 1 addition & 1 deletion ui/mute_button.js
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ shaka.ui.MuteButton = class extends shaka.ui.Element {
});

this.eventManager.listen(this.button_, 'click', () => {
if (this.ad) {
if (this.ad && this.ad.isLinear()) {
this.ad.setMuted(!this.ad.isMuted());
} else {
this.video.muted = !this.video.muted;
Expand Down
6 changes: 4 additions & 2 deletions ui/overflow_menu.js
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,9 @@ shaka.ui.OverflowMenu = class extends shaka.ui.Element {

this.eventManager.listen(
this.adManager, shaka.ads.AdManager.AD_STARTED, () => {
shaka.ui.Utils.setDisplay(this.overflowMenuButton_, false);
if (this.ad && this.ad.isLinear()) {
shaka.ui.Utils.setDisplay(this.overflowMenuButton_, false);
}
});

this.eventManager.listen(
Expand Down Expand Up @@ -89,7 +91,7 @@ shaka.ui.OverflowMenu = class extends shaka.ui.Element {

this.updateAriaLabel_();

if (this.ad) {
if (this.ad && this.ad.isLinear()) {
// There was already an ad.
shaka.ui.Utils.setDisplay(this.overflowMenuButton_, false);
}
Expand Down
4 changes: 2 additions & 2 deletions ui/play_button.js
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ shaka.ui.PlayButton = class extends shaka.ui.Element {
});

this.eventManager.listen(this.button, 'click', () => {
if (this.ad) {
if (this.ad && this.ad.isLinear()) {
this.controls.playPauseAd();
} else {
this.controls.playPausePresentation();
Expand All @@ -92,7 +92,7 @@ shaka.ui.PlayButton = class extends shaka.ui.Element {
* @protected
*/
isPaused() {
if (this.ad) {
if (this.ad && this.ad.isLinear()) {
return this.ad.isPaused();
}

Expand Down
6 changes: 4 additions & 2 deletions ui/seek_bar.js
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,9 @@ shaka.ui.SeekBar = class extends shaka.ui.RangeElement {

this.eventManager.listen(
this.adManager, shaka.ads.AdManager.AD_STARTED, () => {
shaka.ui.Utils.setDisplay(this.container, false);
if (!this.shouldBeDisplayed_()) {
shaka.ui.Utils.setDisplay(this.container, false);
}
});

this.eventManager.listen(
Expand Down Expand Up @@ -366,7 +368,7 @@ shaka.ui.SeekBar = class extends shaka.ui.RangeElement {
return false;
}

return this.ad == null;
return this.ad == null || !this.ad.isLinear();
}

/** @private */
Expand Down
2 changes: 1 addition & 1 deletion ui/volume_bar.js
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ shaka.ui.VolumeBar = class extends shaka.ui.RangeElement {
* @override
*/
onChange() {
if (this.ad) {
if (this.ad && this.ad.isLinear()) {
this.ad.setVolume(this.getValue());
} else {
this.video.volume = this.getValue();
Expand Down

0 comments on commit 9c3bed3

Please sign in to comment.