Skip to content

Commit

Permalink
fix(ads): Test autoplay capabilities inside Ads only if autoStart i…
Browse files Browse the repository at this point in the history 
…s set to `true`
  • Loading branch information
@rafa8626
rafa8626 committed Aug 23, 2018
1 parent 09342bb commit 7e15a84
Show file tree
Hide file tree
Showing 4 changed files with 87 additions and 70 deletions.
3 changes: 1 addition & 2 deletions demo/index.html
View file
Expand Up @@ -45,11 +45,10 @@ <h1>Video Sample</h1>
<div class="players">
<h1>Audio Sample</h1>
<audio class="om-player om-player__media" controls>
<source src="https://api.soundcloud.com/tracks/323195515/stream?client_id=95f22ed54a5c297b1c41f72d713623ef" type="audio/mp3">
<source src="http://www.largesound.com/ashborytour/sound/AshboryBYU.mp3" type="audio/mp3">
</audio>
<div>
<label>Change source <select name="sources">
<option value="https://api.soundcloud.com/tracks/323195515/stream?client_id=95f22ed54a5c297b1c41f72d713623ef">MP3 (SoundCloud)</option>
<option value="http://www.largesound.com/ashborytour/sound/AshboryBYU.mp3">MP3</option>
<option value="http://db3.indexcom.com/bucket/ram/00/05/64k/05.m3u8">HLS</option>
</select>
Expand Down
67 changes: 37 additions & 30 deletions dist/openplayer.js
View file
Expand Up @@ -1987,39 +1987,46 @@ var Ads = function () {
var originalVolume = this.element.volume;
this.adsVolume = constants_1.IS_IOS ? 0 : originalVolume;
this.adsMuted = constants_1.IS_IOS ? true : this.adsMuted;
media_1.isAutoplaySupported(function (autoplay) {
_this.autoplayAllowed = autoplay;
}, function (muted) {
_this.autoplayRequiresMuted = muted;
}, function () {
if (_this.autoplayRequiresMuted || constants_1.IS_IOS) {
_this.adsMuted = true;
_this.media.muted = true;
_this.adsVolume = 0;
_this.media.volume = 0;
var e = events_1.addEvent('volumechange');
_this.element.dispatchEvent(e);
var volumeEl = document.createElement('div');
var action = constants_1.IS_IOS || constants_1.IS_ANDROID ? 'Tap' : 'Click';
volumeEl.className = 'om-player__unmute';
volumeEl.innerHTML = "<span>" + action + " to unmute</span>";
volumeEl.addEventListener('click', function () {
_this.adsMuted = false;
_this.media.muted = false;
_this.adsVolume = originalVolume;
_this.media.volume = originalVolume;
var event = events_1.addEvent('volumechange');
_this.element.dispatchEvent(event);
volumeEl.remove();
if (this.autoStart === true) {
media_1.isAutoplaySupported(function (autoplay) {
_this.autoplayAllowed = autoplay;
}, function (muted) {
_this.autoplayRequiresMuted = muted;
}, function () {
if (_this.autoplayRequiresMuted || constants_1.IS_IOS) {
_this.adsMuted = true;
_this.media.muted = true;
_this.adsVolume = 0;
_this.media.volume = 0;
var e = events_1.addEvent('volumechange');
_this.element.dispatchEvent(e);
var volumeEl = document.createElement('div');
var action = constants_1.IS_IOS || constants_1.IS_ANDROID ? 'Tap' : 'Click';
volumeEl.className = 'om-player__unmute';
volumeEl.innerHTML = "<span>" + action + " to unmute</span>";
volumeEl.addEventListener('click', function () {
_this.adsMuted = false;
_this.media.muted = false;
_this.adsVolume = originalVolume;
_this.media.volume = originalVolume;
var event = events_1.addEvent('volumechange');
_this.element.dispatchEvent(event);
volumeEl.remove();
});
var target = _this.element.parentElement;
target.insertBefore(volumeEl, target.firstChild);
}
_this.promise = typeof google === 'undefined' || typeof google.ima === 'undefined' ? general_1.loadScript('https://imasdk.googleapis.com/js/sdkloader/ima3.js') : new Promise(function (resolve) {
resolve();
});
var target = _this.element.parentElement;
target.insertBefore(volumeEl, target.firstChild);
}
_this.promise = typeof google === 'undefined' || typeof google.ima === 'undefined' ? general_1.loadScript('https://imasdk.googleapis.com/js/sdkloader/ima3.js') : new Promise(function (resolve) {
_this.promise.then(_this.load.bind(_this));
});
} else {
this.promise = typeof google === 'undefined' || typeof google.ima === 'undefined' ? general_1.loadScript('https://imasdk.googleapis.com/js/sdkloader/ima3.js') : new Promise(function (resolve) {
resolve();
});
_this.promise.then(_this.load.bind(_this));
});
this.promise.then(this.load.bind(this));
}
return this;
}

Expand Down
2 changes: 1 addition & 1 deletion dist/openplayer.min.js
View file

Large diffs are not rendered by default.

85 changes: 48 additions & 37 deletions src/js/media/ads.ts
View file
Expand Up @@ -213,51 +213,62 @@ class Ads {
this.adsVolume = IS_IOS ? 0 : originalVolume;
this.adsMuted = IS_IOS ? true : this.adsMuted;

// Test browser capabilities to autoplay Ad
isAutoplaySupported(autoplay => {
this.autoplayAllowed = autoplay;
}, muted => {
this.autoplayRequiresMuted = muted;
}, () => {
if (this.autoplayRequiresMuted || IS_IOS) {
this.adsMuted = true;
this.media.muted = true;
this.adsVolume = 0;
this.media.volume = 0;

const e = addEvent('volumechange');
this.element.dispatchEvent(e);

// Insert element to unmute if browser allows autoplay with muted media
const volumeEl = document.createElement('div');
const action = IS_IOS || IS_ANDROID ? 'Tap' : 'Click';
volumeEl.className = 'om-player__unmute';
volumeEl.innerHTML = `<span>${action} to unmute</span>`;

volumeEl.addEventListener('click', () => {
this.adsMuted = false;
this.media.muted = false;
this.adsVolume = originalVolume;
this.media.volume = originalVolume;

const event = addEvent('volumechange');
this.element.dispatchEvent(event);

// Remove element
volumeEl.remove();
});
// Test browser capabilities to autoplay Ad if `autoStart` is flagged as true
if (this.autoStart === true) {
isAutoplaySupported(autoplay => {
this.autoplayAllowed = autoplay;
}, muted => {
this.autoplayRequiresMuted = muted;
}, () => {
if (this.autoplayRequiresMuted || IS_IOS) {
this.adsMuted = true;
this.media.muted = true;
this.adsVolume = 0;
this.media.volume = 0;

const e = addEvent('volumechange');
this.element.dispatchEvent(e);

// Insert element to unmute if browser allows autoplay with muted media
const volumeEl = document.createElement('div');
const action = IS_IOS || IS_ANDROID ? 'Tap' : 'Click';
volumeEl.className = 'om-player__unmute';
volumeEl.innerHTML = `<span>${action} to unmute</span>`;

volumeEl.addEventListener('click', () => {
this.adsMuted = false;
this.media.muted = false;
this.adsVolume = originalVolume;
this.media.volume = originalVolume;

const event = addEvent('volumechange');
this.element.dispatchEvent(event);

// Remove element
volumeEl.remove();
});

const target = this.element.parentElement;
target.insertBefore(volumeEl, target.firstChild);
}

const target = this.element.parentElement;
target.insertBefore(volumeEl, target.firstChild);
}
this.promise = (typeof google === 'undefined' || typeof google.ima === 'undefined') ?
loadScript('https://imasdk.googleapis.com/js/sdkloader/ima3.js') :
new Promise(resolve => {
resolve();
});

this.promise.then(this.load.bind(this));
});
} else {
this.promise = (typeof google === 'undefined' || typeof google.ima === 'undefined') ?
loadScript('https://imasdk.googleapis.com/js/sdkloader/ima3.js') :
new Promise(resolve => {
resolve();
});

this.promise.then(this.load.bind(this));
});
}

return this;
}
Expand Down

0 comments on commit 7e15a84

Please sign in to comment.