Skip to content

Commit

Permalink
feat(player): Added new config element to show loader properly and fi…
Browse files Browse the repository at this point in the history 
…xed events to show/hide big play/loader elements
  • Loading branch information
@rafa8626
rafa8626 committed Apr 24, 2019
1 parent b209ce1 commit 451e1e8
Show file tree
Hide file tree
Showing 5 changed files with 129 additions and 47 deletions.
2 changes: 2 additions & 0 deletions README.md
View file
Expand Up @@ -98,6 +98,8 @@ var player = new OpenPlayer('[player ID]', [valid VAST/VPAID URL|List of VAST/VP
startVolume,
// Initial play time of media in seconds (by default, `0`)
startTime,
// Allow loader to be displayed when loading video (by default, `false`)
showLoaderOnInit,
ads: {
// Custom path/URL to IMA SDK
url,
Expand Down
85 changes: 65 additions & 20 deletions dist/openplayer.js
View file
Expand Up @@ -1390,6 +1390,7 @@ var Player = function () {
volumeControl: 'Volume Control',
volumeSlider: 'Volume Slider'
},
showLoaderOnInit: false,
startTime: 0,
startVolume: 1,
step: 0
Expand Down Expand Up @@ -1730,29 +1731,27 @@ var Player = function () {
this.events.loadedmetadata = function () {
var el = _this3.activeElement();

_this3.loader.setAttribute('aria-hidden', 'true');

if (el.paused) {
_this3.playBtn.classList.remove('op-player__play--paused');
if (_this3.options.showLoaderOnInit) {
_this3.loader.setAttribute('aria-hidden', 'false');

_this3.playBtn.setAttribute('aria-pressed', 'false');
_this3.playBtn.setAttribute('aria-hidden', 'true');
} else {
_this3.loader.setAttribute('aria-hidden', 'true');

_this3.playBtn.setAttribute('aria-hidden', 'false');
}
};

this.events.waiting = function () {
if (_this3.playBtn.getAttribute('aria-hidden') === 'false') {
_this3.playBtn.setAttribute('aria-hidden', 'true');
if (el.paused) {
_this3.playBtn.classList.remove('op-player__play--paused');

_this3.loader.setAttribute('aria-hidden', 'false');
_this3.playBtn.setAttribute('aria-pressed', 'false');
}
};

this.events.canplay = function () {
_this3.playBtn.setAttribute('aria-hidden', constants_1.IS_ANDROID || constants_1.IS_IOS ? 'false' : 'true');
this.events.waiting = function () {
_this3.playBtn.setAttribute('aria-hidden', 'true');

_this3.loader.setAttribute('aria-hidden', 'true');
_this3.loader.setAttribute('aria-hidden', 'false');
};

this.events.seeking = function () {
Expand All @@ -1766,6 +1765,16 @@ var Player = function () {
this.events.seeked = function () {
var el = _this3.activeElement();

if (Math.round(el.currentTime) === 0) {
_this3.playBtn.setAttribute('aria-hidden', 'true');

_this3.loader.setAttribute('aria-hidden', 'false');
} else {
_this3.playBtn.setAttribute('aria-hidden', el instanceof media_1.default ? 'false' : 'true');

_this3.loader.setAttribute('aria-hidden', 'true');
}

_this3.playBtn.setAttribute('aria-hidden', el instanceof media_1.default ? 'false' : 'true');

_this3.loader.setAttribute('aria-hidden', 'true');
Expand All @@ -1778,23 +1787,43 @@ var Player = function () {

_this3.loader.setAttribute('aria-hidden', 'true');

setTimeout(function () {
if (_this3.options.showLoaderOnInit) {
_this3.playBtn.setAttribute('aria-hidden', 'true');
}, _this3.options.hidePlayBtnTimer);
} else {
setTimeout(function () {
_this3.playBtn.setAttribute('aria-hidden', 'true');
}, _this3.options.hidePlayBtnTimer);
}
};

this.events.playing = function () {
_this3.loader.setAttribute('aria-hidden', 'true');

_this3.playBtn.setAttribute('aria-hidden', 'true');
};

this.events.pause = function () {
_this3.loader.setAttribute('aria-hidden', 'true');
var el = _this3.activeElement();

_this3.playBtn.classList.remove('op-player__play--paused');

_this3.playBtn.setAttribute('aria-hidden', 'false');

_this3.playBtn.title = _this3.options.labels.play;

if (_this3.options.showLoaderOnInit && Math.round(el.currentTime) === 0) {
_this3.playBtn.setAttribute('aria-hidden', 'true');

_this3.loader.setAttribute('aria-hidden', 'false');
} else {
_this3.playBtn.setAttribute('aria-hidden', 'false');

_this3.loader.setAttribute('aria-hidden', 'true');
}
};

this.events.ended = function () {
_this3.loader.setAttribute('aria-hidden', 'true');

_this3.playBtn.setAttribute('aria-hidden', 'true');
};
}

Expand Down Expand Up @@ -4261,7 +4290,15 @@ var Controls = function () {
if (isMediaVideo && _this.player.isMedia() && !_this.player.activeElement().paused) {
_this._stopControlTimer();

_this.player.playBtn.setAttribute('aria-hidden', 'false');
if (_this.player.activeElement().currentTime) {
_this.player.playBtn.setAttribute('aria-hidden', 'false');

_this.player.loader.setAttribute('aria-hidden', 'true');
} else if (_this.player.getOptions().showLoaderOnInit) {
_this.player.playBtn.setAttribute('aria-hidden', 'true');

_this.player.loader.setAttribute('aria-hidden', 'false');
}

_this.player.getContainer().classList.remove('op-controls--hidden');

Expand All @@ -4271,7 +4308,15 @@ var Controls = function () {

this.events.mouse.mousemove = function () {
if (isMediaVideo && _this.player.isMedia() && !_this.player.activeElement().paused) {
_this.player.playBtn.setAttribute('aria-hidden', 'false');
if (_this.player.activeElement().currentTime) {
_this.player.loader.setAttribute('aria-hidden', 'true');

_this.player.playBtn.setAttribute('aria-hidden', 'false');
} else if (_this.player.getOptions().showLoaderOnInit) {
_this.player.playBtn.setAttribute('aria-hidden', 'true');

_this.player.loader.setAttribute('aria-hidden', 'false');
}

_this.player.getContainer().classList.remove('op-controls--hidden');

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

Large diffs are not rendered by default.

17 changes: 15 additions & 2 deletions src/js/controls.ts
View file
Expand Up @@ -175,14 +175,27 @@ class Controls implements PlayerComponent {
this.events.mouse.mouseenter = () => {
if (isMediaVideo && this.player.isMedia() && !this.player.activeElement().paused) {
this._stopControlTimer();
this.player.playBtn.setAttribute('aria-hidden', 'false');
if (this.player.activeElement().currentTime) {
this.player.playBtn.setAttribute('aria-hidden', 'false');
this.player.loader.setAttribute('aria-hidden', 'true');
} else if (this.player.getOptions().showLoaderOnInit) {
this.player.playBtn.setAttribute('aria-hidden', 'true');
this.player.loader.setAttribute('aria-hidden', 'false');
}
this.player.getContainer().classList.remove('op-controls--hidden');
this._startControlTimer(2500);
}
};
this.events.mouse.mousemove = () => {
if (isMediaVideo && this.player.isMedia() && !this.player.activeElement().paused) {
this.player.playBtn.setAttribute('aria-hidden', 'false');
if (this.player.activeElement().currentTime) {
this.player.loader.setAttribute('aria-hidden', 'true');
this.player.playBtn.setAttribute('aria-hidden', 'false');
} else if (this.player.getOptions().showLoaderOnInit) {
this.player.playBtn.setAttribute('aria-hidden', 'true');
this.player.loader.setAttribute('aria-hidden', 'false');
}

this.player.getContainer().classList.remove('op-controls--hidden');
this._startControlTimer(2500);
}
Expand Down
70 changes: 46 additions & 24 deletions src/js/player.ts
View file
Expand Up @@ -106,6 +106,15 @@ class Player {
*/
public playBtn: HTMLButtonElement;

/**
* Element to indicate that media is being loaded.
*
* Only applies for `Media` object, since `Ads` does not need it.
* @type HTMLSpanElement
* @memberof Player
*/
public loader: HTMLSpanElement;

/**
* Unique identified for the current player instance.
*
Expand Down Expand Up @@ -149,15 +158,6 @@ class Player {
*/
private media: Media;

/**
* Element to indicate that media is being loaded.
*
* Only applies for `Media` object, since `Ads` does not need it.
* @type HTMLSpanElement
* @memberof Player
*/
private loader: HTMLSpanElement;

/**
* Events that will be triggered in Player to show/hide Play button and loader element,
* and to interact with the player using a keyboard for accessibility purposes.
Expand Down Expand Up @@ -266,6 +266,7 @@ class Player {
volumeControl: 'Volume Control',
volumeSlider: 'Volume Slider',
},
showLoaderOnInit: false,
startTime: 0,
startVolume: 1,
step: 0,
Expand Down Expand Up @@ -767,22 +768,21 @@ class Player {
if (isVideo(this.element)) {
this.events.loadedmetadata = () => {
const el = this.activeElement();
this.loader.setAttribute('aria-hidden', 'true');
if (this.options.showLoaderOnInit) {
this.loader.setAttribute('aria-hidden', 'false');
this.playBtn.setAttribute('aria-hidden', 'true');
} else {
this.loader.setAttribute('aria-hidden', 'true');
this.playBtn.setAttribute('aria-hidden', 'false');
}
if (el.paused) {
this.playBtn.classList.remove('op-player__play--paused');
this.playBtn.setAttribute('aria-pressed', 'false');
this.playBtn.setAttribute('aria-hidden', 'false');
}
};
this.events.waiting = () => {
if (this.playBtn.getAttribute('aria-hidden') === 'false') {
this.playBtn.setAttribute('aria-hidden', 'true');
this.loader.setAttribute('aria-hidden', 'false');
}
};
this.events.canplay = () => {
this.playBtn.setAttribute('aria-hidden', IS_ANDROID || IS_IOS ? 'false' : 'true');
this.loader.setAttribute('aria-hidden', 'true');
this.playBtn.setAttribute('aria-hidden', 'true');
this.loader.setAttribute('aria-hidden', 'false');
};
this.events.seeking = () => {
const el = this.activeElement();
Expand All @@ -791,26 +791,48 @@ class Player {
};
this.events.seeked = () => {
const el = this.activeElement();
if (Math.round(el.currentTime) === 0) {
this.playBtn.setAttribute('aria-hidden', 'true');
this.loader.setAttribute('aria-hidden', 'false');
} else {
this.playBtn.setAttribute('aria-hidden', el instanceof Media ? 'false' : 'true');
this.loader.setAttribute('aria-hidden', 'true');
}
this.playBtn.setAttribute('aria-hidden', el instanceof Media ? 'false' : 'true');
this.loader.setAttribute('aria-hidden', 'true');
};
this.events.play = () => {
this.playBtn.classList.add('op-player__play--paused');
this.playBtn.title = this.options.labels.pause;
this.loader.setAttribute('aria-hidden', 'true');

setTimeout(() => {
if (this.options.showLoaderOnInit) {
this.playBtn.setAttribute('aria-hidden', 'true');
}, this.options.hidePlayBtnTimer);
} else {
setTimeout(() => {
this.playBtn.setAttribute('aria-hidden', 'true');
}, this.options.hidePlayBtnTimer);
}
};
this.events.playing = () => {
this.loader.setAttribute('aria-hidden', 'true');
this.playBtn.setAttribute('aria-hidden', 'true');
};
this.events.pause = () => {
this.loader.setAttribute('aria-hidden', 'true');
const el = this.activeElement();
this.playBtn.classList.remove('op-player__play--paused');
this.playBtn.setAttribute('aria-hidden', 'false');
this.playBtn.title = this.options.labels.play;

if (this.options.showLoaderOnInit && Math.round(el.currentTime) === 0) {
this.playBtn.setAttribute('aria-hidden', 'true');
this.loader.setAttribute('aria-hidden', 'false');
} else {
this.playBtn.setAttribute('aria-hidden', 'false');
this.loader.setAttribute('aria-hidden', 'true');
}
};
this.events.ended = () => {
this.loader.setAttribute('aria-hidden', 'true');
this.playBtn.setAttribute('aria-hidden', 'true');
};
}

Expand Down

0 comments on commit 451e1e8

Please sign in to comment.