Skip to content

Commit

Permalink
fix(ads): Addressed first issues with iOS when playing Ads inline
Browse files Browse the repository at this point in the history
  • Loading branch information
@rafa8626
rafa8626 committed Sep 22, 2018
1 parent f0685c8 commit 2051df6
Show file tree
Hide file tree
Showing 4 changed files with 71 additions and 44 deletions.
11 changes: 11 additions & 0 deletions src/css/player.css
View file
Expand Up @@ -711,3 +711,14 @@ video:-webkit-media-text-track-display {
transform: translate(-50%, -50%);
width: auto !important;
}

/* === Device-specific rules ========= */
.om-player__ios--iphone .om-player__play {
margin-top: -5px;
}
.om-player__ios--iphone .om-controls {
display: none;
}
.om-player__ios--iphone.om-ads--active .om-controls {
display: block;
}
88 changes: 47 additions & 41 deletions src/js/controls/progress.ts
View file
@@ -1,6 +1,7 @@
import PlayerComponent from '../interfaces/component';
import EventsList from '../interfaces/events-list';
import Player from '../player';
import { IS_ANDROID, IS_IOS } from '../utils/constants';
import { hasClass, offset } from '../utils/general';
import { formatTime } from '../utils/time';

Expand Down Expand Up @@ -145,10 +146,12 @@ class Progress implements PlayerComponent {
this.played.setAttribute('role', 'presentation');
this.played.value = 0;

this.tooltip = document.createElement('span');
this.tooltip.className = 'om-controls__tooltip';
this.tooltip.tabIndex = -1;
this.tooltip.innerHTML = '00:00';
if (!IS_IOS && !IS_ANDROID) {
this.tooltip = document.createElement('span');
this.tooltip.className = 'om-controls__tooltip';
this.tooltip.tabIndex = -1;
this.tooltip.innerHTML = '00:00';
}

this.progress.appendChild(this.slider);
this.progress.appendChild(this.played);
Expand Down Expand Up @@ -296,45 +299,46 @@ class Progress implements PlayerComponent {
this.events.slider.touchstart = mobileForcePause.bind(this);
this.events.slider.touchend = releasePause.bind(this);

this.events.container.mousemove = (e: any) => {
const el = this.player.activeElement();
if (el.duration === Infinity) {
return true;
}

const x = (e.originalEvent && e.originalEvent.changedTouches) ?
e.originalEvent.changedTouches[0].pageX : e.pageX;

let pos = x - offset(this.progress).left;
const half = this.tooltip.offsetWidth / 2;
const percentage = (pos / this.progress.offsetWidth);
const time = percentage * el.duration;
const mediaContainer = this.player.getContainer();
const limit = mediaContainer.offsetWidth - this.tooltip.offsetWidth;

if (pos <= 0 || x - offset(mediaContainer).left <= half) {
pos = 0;
} else if (x - offset(mediaContainer).left >= limit) {
pos = limit;
} else {
pos -= half;
}
if (!IS_IOS && !IS_ANDROID) {
this.events.container.mousemove = (e: any) => {
const el = this.player.activeElement();
if (el.duration === Infinity) {
return true;
}

if (percentage >= 0 && percentage <= 1) {
this.tooltip.classList.add('om-controls__tooltip--visible');
} else {
this.tooltip.classList.remove('om-controls__tooltip--visible');
}
const x = (e.originalEvent && e.originalEvent.changedTouches) ?
e.originalEvent.changedTouches[0].pageX : e.pageX;

let pos = x - offset(this.progress).left;
const half = this.tooltip.offsetWidth / 2;
const percentage = (pos / this.progress.offsetWidth);
const time = percentage * el.duration;
const mediaContainer = this.player.getContainer();
const limit = mediaContainer.offsetWidth - this.tooltip.offsetWidth;

if (pos <= 0 || x - offset(mediaContainer).left <= half) {
pos = 0;
} else if (x - offset(mediaContainer).left >= limit) {
pos = limit;
} else {
pos -= half;
}

this.tooltip.style.left = `${pos}px`;
this.tooltip.innerHTML = isNaN(time) ? '00:00' : formatTime(time);
};
if (percentage >= 0 && percentage <= 1) {
this.tooltip.classList.add('om-controls__tooltip--visible');
} else {
this.tooltip.classList.remove('om-controls__tooltip--visible');
}

this.events.global.mousemove = (e: MouseEvent) => {
if (!(e.target as HTMLElement).closest('.om-controls__progress')) {
this.tooltip.classList.remove('om-controls__tooltip--visible');
}
};
this.tooltip.style.left = `${pos}px`;
this.tooltip.innerHTML = isNaN(time) ? '00:00' : formatTime(time);
};
this.events.global.mousemove = (e: MouseEvent) => {
if (!(e.target as HTMLElement).closest('.om-controls__progress')) {
this.tooltip.classList.remove('om-controls__tooltip--visible');
}
};
}

Object.keys(this.events.media).forEach(event => {
this.player.getElement().addEventListener(event, this.events.media[event]);
Expand Down Expand Up @@ -372,7 +376,9 @@ class Progress implements PlayerComponent {
this.buffer.remove();
this.played.remove();
this.slider.remove();
this.tooltip.remove();
if (!IS_IOS && !IS_ANDROID) {
this.tooltip.remove();
}
this.progress.remove();
}
}
Expand Down
12 changes: 11 additions & 1 deletion src/js/media/ads.ts
View file
Expand Up @@ -535,6 +535,12 @@ class Ads {
volumeEl.className = 'om-player__unmute';
volumeEl.innerHTML = `<span>${action} to unmute</span>`;

// Ensure native media is muted as well
this.adsMuted = true;
this.media.muted = true;
this.adsVolume = 0;
this.media.volume = 0;

volumeEl.addEventListener('click', () => {
this.adsMuted = false;
this.media.muted = false;
Expand Down Expand Up @@ -650,6 +656,10 @@ class Ads {
if (this.adsManager) {
this.adsManager.destroy();
}
const unmuteEl = this.element.parentElement.querySelector('.om-player__unmute');
if (unmuteEl) {
unmuteEl.remove();
}
if (this.autoStart === true || this.adsStarted === true) {
this.adsActive = false;
this._resumeMedia();
Expand Down Expand Up @@ -735,14 +745,14 @@ class Ads {
* @memberof Ads
*/
private _onContentPauseRequested(): void {
this.element.removeEventListener('ended', this._contentEndedListener.bind(this));
if (this.adsStarted) {
this.media.pause();
} else {
this.adsStarted = true;
}
const e = addEvent('play');
this.element.dispatchEvent(e);
this.element.removeEventListener('ended', this._contentEndedListener.bind(this));
}

/**
Expand Down
4 changes: 2 additions & 2 deletions src/js/player.ts
View file
Expand Up @@ -558,7 +558,7 @@ class Player {
*/
private _createControls(): void {
if (IS_IPHONE && isVideo(this.element)) {
return;
this.getContainer().classList.add('om-player__ios--iphone');
}
this.controls = new Controls(this);
this.controls.create();
Expand Down Expand Up @@ -651,7 +651,7 @@ class Player {
if (el.paused) {
this.playBtn.classList.remove('om-player__play--paused');
this.playBtn.setAttribute('aria-pressed', 'false');
this.playBtn.setAttribute('aria-hidden', el instanceof Media ? 'false' : 'true');
this.playBtn.setAttribute('aria-hidden', 'false');
}
};
this.events.waiting = () => {
Expand Down

0 comments on commit 2051df6

Please sign in to comment.