ProximaEntertainment/plyr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

JsBeautifier in use, syntax tweaks

Browse Source
This commit is contained in:
Sam Potts 2017-01-10 20:22:18 +11:00
parent bce1d983cb
commit 5a0cb9289c
3 changed files with 619 additions and 463 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
.jsbeautifyrc
View File

@ -6,6 +6,27 @@
"allowed_file_extensions": [] "allowed_file_extensions": []
}, },
"js": { "js": {
"allowed_file_extensions": [] "allowed_file_extensions": ["js", "json", "jshintrc", "jsbeautifyrc"],
"brace_style": "collapse",
"break_chained_methods": false,
"e4x": false,
"end_with_newline": false,
"indent_char": " ",
"indent_level": 0,
"indent_size": 4,
"indent_with_tabs": false,
"jslint_happy": false,
"keep_array_indentation": true,
"keep_function_indentation": true,
"max_preserve_newlines": 2,
"preserve_newlines": true,
"space_after_anon_function": false,
"space_before_conditional": true,
"space_in_empty_paren": false,
"space_in_paren": false,
"unescape_strings": false,
"wrap_line_length": 0,
"wrap_attributes": "auto",
"wrap_attributes_indent_size": 4
} }
} }

4
dist/plyr.js vendored
View File

File diff suppressed because one or more lines are too long

339
src/js/plyr.js
View File

@ -7,7 +7,7 @@
// Credits: http://paypal.github.io/accessible-html5-video-player/ // Credits: http://paypal.github.io/accessible-html5-video-player/
// ========================================================================== // ==========================================================================
;(function(root, factory) { (function(root, factory) {
'use strict'; 'use strict';
/* global define,module */ /* global define,module */
@ -16,7 +16,9 @@
module.exports = factory(root, document); module.exports = factory(root, document);
} else if (typeof define === 'function' && define.amd) { } else if (typeof define === 'function' && define.amd) {
// AMD // AMD
define([], function () { return factory(root, document); }); define([], function() {
return factory(root, document);
});
} else { } else {
// Browser globals (root is window) // Browser globals (root is window)
root.plyr = factory(root, document); root.plyr = factory(root, document);
@ -25,7 +27,10 @@
'use strict'; 'use strict';
// Globals // Globals
var scroll = { x: 0, y: 0 }, var scroll = {
x: 0,
y: 0
},
// Default config // Default config
defaults = { defaults = {
@ -198,17 +203,17 @@
// Credits: http://paypal.github.io/accessible-html5-video-player/ // Credits: http://paypal.github.io/accessible-html5-video-player/
// Unfortunately, due to mixed support, UA sniffing is required // Unfortunately, due to mixed support, UA sniffing is required
function _getBrowser() { function _getBrowser() {
var ua = navigator.userAgent, var ua = navigator.userAgent;
name = navigator.appName, var name = navigator.appName;
fullVersion = '' + parseFloat(navigator.appVersion), var fullVersion = '' + parseFloat(navigator.appVersion);
majorVersion = parseInt(navigator.appVersion, 10), var majorVersion = parseInt(navigator.appVersion, 10);
nameOffset, var nameOffset;
verOffset, var verOffset;
ix, var ix;
isIE = false, var isIE = false;
isFirefox = false, var isFirefox = false;
isChrome = false, var isChrome = false;
isSafari = false; var isSafari = false;
if ((navigator.appVersion.indexOf('Windows NT') !== -1) && (navigator.appVersion.indexOf('rv:11') !== -1)) { if ((navigator.appVersion.indexOf('Windows NT') !== -1) && (navigator.appVersion.indexOf('rv:11') !== -1)) {
// MSIE 11 // MSIE 11
@ -230,6 +235,7 @@
isSafari = true; isSafari = true;
name = 'Safari'; name = 'Safari';
fullVersion = ua.substring(verOffset + 7); fullVersion = ua.substring(verOffset + 7);
if ((verOffset = ua.indexOf('Version')) !== -1) { if ((verOffset = ua.indexOf('Version')) !== -1) {
fullVersion = ua.substring(verOffset + 8); fullVersion = ua.substring(verOffset + 8);
} }
@ -240,7 +246,7 @@
fullVersion = ua.substring(verOffset + 8); fullVersion = ua.substring(verOffset + 8);
} else if ((nameOffset = ua.lastIndexOf(' ') + 1) < (verOffset = ua.lastIndexOf('/'))) { } else if ((nameOffset = ua.lastIndexOf(' ') + 1) < (verOffset = ua.lastIndexOf('/'))) {
// In most other browsers, 'name/version' is at the end of userAgent // In most other browsers, 'name/version' is at the end of userAgent
name = ua.substring(nameOffset,verOffset); name = ua.substring(nameOffset, verOffset);
fullVersion = ua.substring(verOffset + 1); fullVersion = ua.substring(verOffset + 1);
if (name.toLowerCase() === name.toUpperCase()) { if (name.toLowerCase() === name.toUpperCase()) {
@ -284,6 +290,7 @@
var tag = document.createElement('script'); var tag = document.createElement('script');
tag.src = source; tag.src = source;
var firstScriptTag = document.getElementsByTagName('script')[0]; var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
} }
@ -395,13 +402,17 @@
// Element matches selector // Element matches selector
function _matches(element, selector) { function _matches(element, selector) {
var p = Element.prototype; var prototype = Element.prototype;
var f = p.matches || p.webkitMatchesSelector || p.mozMatchesSelector || p.msMatchesSelector || function(s) { var matches = prototype.matches ||
prototype.webkitMatchesSelector ||
prototype.mozMatchesSelector ||
prototype.msMatchesSelector ||
function(s) {
return [].indexOf.call(document.querySelectorAll(s), this) !== -1; return [].indexOf.call(document.querySelectorAll(s), this) !== -1;
}; };
return f.call(element, selector); return matches.call(element, selector);
} }
// Bind along with custom handler // Bind along with custom handler
@ -689,8 +700,7 @@
// Check if value matches // Check if value matches
return (result === 'OK'); return (result === 'OK');
} } catch (e) {
catch (e) {
return false; return false;
} }
@ -721,19 +731,24 @@
// Type specific checks // Type specific checks
if (plyr.type === 'video') { if (plyr.type === 'video') {
switch (type) { switch (type) {
case 'video/webm': return media.canPlayType('video/webm; codecs="vp8, vorbis"').replace(/no/, ''); case 'video/webm':
case 'video/mp4': return media.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"').replace(/no/, ''); return media.canPlayType('video/webm; codecs="vp8, vorbis"').replace(/no/, '');
case 'video/ogg': return media.canPlayType('video/ogg; codecs="theora"').replace(/no/, ''); case 'video/mp4':
return media.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"').replace(/no/, '');
case 'video/ogg':
return media.canPlayType('video/ogg; codecs="theora"').replace(/no/, '');
} }
} else if (plyr.type === 'audio') { } else if (plyr.type === 'audio') {
switch (type) { switch (type) {
case 'audio/mpeg': return media.canPlayType('audio/mpeg;').replace(/no/, ''); case 'audio/mpeg':
case 'audio/ogg': return media.canPlayType('audio/ogg; codecs="vorbis"').replace(/no/, ''); return media.canPlayType('audio/mpeg;').replace(/no/, '');
case 'audio/wav': return media.canPlayType('audio/wav; codecs="1"').replace(/no/, ''); case 'audio/ogg':
return media.canPlayType('audio/ogg; codecs="vorbis"').replace(/no/, '');
case 'audio/wav':
return media.canPlayType('audio/wav; codecs="1"').replace(/no/, '');
} }
} }
} } catch (e) {
catch(e) {
return false; return false;
} }
@ -744,9 +759,9 @@
// Player instance // Player instance
function Plyr(media, config) { function Plyr(media, config) {
var plyr = this, var plyr = this;
timers = {}, var timers = {};
api; var api;
// Set media // Set media
plyr.media = media; plyr.media = media;
@ -771,8 +786,12 @@
console[type].apply(console, args); console[type].apply(console, args);
} }
} }
var _log = function() { _console('log', arguments) }, var _log = function() {
_warn = function() { _console('warn', arguments) }; _console('log', arguments)
};
var _warn = function() {
_console('warn', arguments)
};
// Log config options // Log config options
_log('Config', config); _log('Config', config);
@ -788,45 +807,52 @@
// Build the default HTML // Build the default HTML
function _buildControls() { function _buildControls() {
// Create html array // Create html array
var html = [], var html = [];
iconUrl = _getIconUrl(), var iconUrl = _getIconUrl();
iconPath = (!iconUrl.absolute ? iconUrl.url : '') + '#' + config.iconPrefix; var iconPath = (!iconUrl.absolute ? iconUrl.url : '') + '#' + config.iconPrefix;
// Larger overlaid play button // Larger overlaid play button
if (_inArray(config.controls, 'play-large')) { if (_inArray(config.controls, 'play-large')) {
/* beautify ignore:start */
html.push( html.push(
'<button type="button" data-plyr="play" class="plyr__play-large">', '<button type="button" data-plyr="play" class="plyr__play-large">',
'<svg><use xlink:href="' + iconPath + '-play" /></svg>', '<svg><use xlink:href="' + iconPath + '-play" /></svg>',
'<span class="plyr__sr-only">' + config.i18n.play + '</span>', '<span class="plyr__sr-only">' + config.i18n.play + '</span>',
'</button>' '</button>'
); );
/* beautify ignore:end */
} }
html.push('<div class="plyr__controls">'); html.push('<div class="plyr__controls">');
// Restart button // Restart button
if (_inArray(config.controls, 'restart')) { if (_inArray(config.controls, 'restart')) {
/* beautify ignore:start */
html.push( html.push(
'<button type="button" class="plyr__control" data-plyr="restart">', '<button type="button" class="plyr__control" data-plyr="restart">',
'<svg><use xlink:href="' + iconPath + '-restart" /></svg>', '<svg><use xlink:href="' + iconPath + '-restart" /></svg>',
'<span class="plyr__sr-only">' + config.i18n.restart + '</span>', '<span class="plyr__sr-only">' + config.i18n.restart + '</span>',
'</button>' '</button>'
); );
/* beautify ignore:end */
} }
// Rewind button // Rewind button
if (_inArray(config.controls, 'rewind')) { if (_inArray(config.controls, 'rewind')) {
/* beautify ignore:start */
html.push( html.push(
'<button type="button" class="plyr__control" data-plyr="rewind">', '<button type="button" class="plyr__control" data-plyr="rewind">',
'<svg><use xlink:href="' + iconPath + '-rewind" /></svg>', '<svg><use xlink:href="' + iconPath + '-rewind" /></svg>',
'<span class="plyr__sr-only">' + config.i18n.rewind + '</span>', '<span class="plyr__sr-only">' + config.i18n.rewind + '</span>',
'</button>' '</button>'
); );
/* beautify ignore:end */
} }
// Play Pause button // Play Pause button
// TODO: This should be a toggle button really? // TODO: This should be a toggle button really?
if (_inArray(config.controls, 'play')) { if (_inArray(config.controls, 'play')) {
/* beautify ignore:start */
html.push( html.push(
'<button type="button" class="plyr__control" data-plyr="play">', '<button type="button" class="plyr__control" data-plyr="play">',
'<svg><use xlink:href="' + iconPath + '-play" /></svg>', '<svg><use xlink:href="' + iconPath + '-play" /></svg>',
@ -837,28 +863,35 @@
'<span class="plyr__sr-only">' + config.i18n.pause + '</span>', '<span class="plyr__sr-only">' + config.i18n.pause + '</span>',
'</button>' '</button>'
); );
/* beautify ignore:end */
} }
// Fast forward button // Fast forward button
if (_inArray(config.controls, 'fast-forward')) { if (_inArray(config.controls, 'fast-forward')) {
/* beautify ignore:start */
html.push( html.push(
'<button type="button" class="plyr__control" data-plyr="fast-forward">', '<button type="button" class="plyr__control" data-plyr="fast-forward">',
'<svg><use xlink:href="' + iconPath + '-fast-forward" /></svg>', '<svg><use xlink:href="' + iconPath + '-fast-forward" /></svg>',
'<span class="plyr__sr-only">' + config.i18n.forward + '</span>', '<span class="plyr__sr-only">' + config.i18n.forward + '</span>',
'</button>' '</button>'
); );
/* beautify ignore:end */
} }
// Progress // Progress
if (_inArray(config.controls, 'progress')) { if (_inArray(config.controls, 'progress')) {
// Create progress // Create progress
html.push('<span class="plyr__progress">', /* beautify ignore:start */
html.push(
'<span class="plyr__progress">',
'<label for="seek-{id}" class="plyr__sr-only">Seek</label>', '<label for="seek-{id}" class="plyr__sr-only">Seek</label>',
'<input id="seek-{id}" class="plyr__progress--seek" type="range" min="0" max="100" step="0.1" value="0" data-plyr="seek">', '<input id="seek-{id}" class="plyr__progress--seek" type="range" min="0" max="100" step="0.1" value="0" data-plyr="seek">',
'<progress class="plyr__progress--played" max="100" value="0" role="presentation"></progress>', '<progress class="plyr__progress--played" max="100" value="0" role="presentation"></progress>',
'<progress class="plyr__progress--buffer" max="100" value="0">', '<progress class="plyr__progress--buffer" max="100" value="0">',
'<span>0</span>% ' + config.i18n.buffered, '<span>0</span>% ' + config.i18n.buffered,
'</progress>'); '</progress>'
);
/* beautify ignore:end */
// Seek tooltip // Seek tooltip
if (config.tooltips.seek) { if (config.tooltips.seek) {
@ -871,26 +904,31 @@
// Media current time display // Media current time display
if (_inArray(config.controls, 'current-time')) { if (_inArray(config.controls, 'current-time')) {
/* beautify ignore:start */
html.push( html.push(
'<span class="plyr__time">', '<span class="plyr__time">',
'<span class="plyr__sr-only">' + config.i18n.currentTime + '</span>', '<span class="plyr__sr-only">' + config.i18n.currentTime + '</span>',
'<span class="plyr__time--current">00:00</span>', '<span class="plyr__time--current">00:00</span>',
'</span>' '</span>'
); );
/* beautify ignore:end */
} }
// Media duration display // Media duration display
if (_inArray(config.controls, 'duration')) { if (_inArray(config.controls, 'duration')) {
/* beautify ignore:start */
html.push( html.push(
'<span class="plyr__time">', '<span class="plyr__time">',
'<span class="plyr__sr-only">' + config.i18n.duration + '</span>', '<span class="plyr__sr-only">' + config.i18n.duration + '</span>',
'<span class="plyr__time--duration">00:00</span>', '<span class="plyr__time--duration">00:00</span>',
'</span>' '</span>'
); );
/* beautify ignore:end */
} }
// Toggle mute button // Toggle mute button
if (_inArray(config.controls, 'mute')) { if (_inArray(config.controls, 'mute')) {
/* beautify ignore:start */
html.push( html.push(
'<button type="button" class="plyr__control" data-plyr="mute">', '<button type="button" class="plyr__control" data-plyr="mute">',
'<svg class="icon--muted"><use xlink:href="' + iconPath + '-muted" /></svg>', '<svg class="icon--muted"><use xlink:href="' + iconPath + '-muted" /></svg>',
@ -898,10 +936,12 @@
'<span class="plyr__sr-only">' + config.i18n.toggleMute + '</span>', '<span class="plyr__sr-only">' + config.i18n.toggleMute + '</span>',
'</button>' '</button>'
); );
/* beautify ignore:end */
} }
// Volume range control // Volume range control
if (_inArray(config.controls, 'volume')) { if (_inArray(config.controls, 'volume')) {
/* beautify ignore:start */
html.push( html.push(
'<span class="plyr__volume">', '<span class="plyr__volume">',
'<label for="volume-{id}" class="plyr__sr-only">' + config.i18n.volume + '</label>', '<label for="volume-{id}" class="plyr__sr-only">' + config.i18n.volume + '</label>',
@ -909,21 +949,25 @@
'<progress class="plyr__volume--display" max="' + config.volumeMax + '" value="' + config.volumeMin + '" role="presentation"></progress>', '<progress class="plyr__volume--display" max="' + config.volumeMax + '" value="' + config.volumeMin + '" role="presentation"></progress>',
'</span>' '</span>'
); );
/* beautify ignore:end */
} }
// Toggle captions button // Toggle captions button
if (_inArray(config.controls, 'captions')) { if (_inArray(config.controls, 'captions')) {
/* beautify ignore:start */
html.push( html.push(
'<button type="button" class="plyr__control" data-plyr="captions">', '<button type="button" class="plyr__control" data-plyr="captions">',
'<svg class="icon--captions-on"><use xlink:href="' + iconPath + '-captions-on" /></svg>', '<svg class="icon--captions-on"><use xlink:href="' + iconPath + '-captions-on" /></svg>',
'<svg><use xlink:href="' + iconPath+ '-captions-off" /></svg>', '<svg><use xlink:href="' + iconPath + '-captions-off" /></svg>',
'<span class="plyr__sr-only">' + config.i18n.toggleCaptions + '</span>', '<span class="plyr__sr-only">' + config.i18n.toggleCaptions + '</span>',
'</button>' '</button>'
); );
/* beautify ignore:end */
} }
// Settings button / menu // Settings button / menu
if (_inArray(config.controls, 'settings')) { if (_inArray(config.controls, 'settings')) {
/* beautify ignore:start */
html.push( html.push(
'<div class="plyr__menu" data-plyr="settings">', '<div class="plyr__menu" data-plyr="settings">',
'<button type="button" id="plyr-settings-toggle-{id}" class="plyr__control" aria-haspopup="true" aria-controls="plyr-settings-{id}" aria-expanded="false">', '<button type="button" id="plyr-settings-toggle-{id}" class="plyr__control" aria-haspopup="true" aria-controls="plyr-settings-{id}" aria-expanded="false">',
@ -936,17 +980,20 @@
'<ul>', '<ul>',
'<li role="tab">', '<li role="tab">',
'<button type="button" class="plyr__control plyr__control--forward" id="plyr-settings-{id}-captions-toggle" aria-haspopup="true" aria-controls="plyr-settings-{id}-captions" aria-expanded="false">', '<button type="button" class="plyr__control plyr__control--forward" id="plyr-settings-{id}-captions-toggle" aria-haspopup="true" aria-controls="plyr-settings-{id}-captions" aria-expanded="false">',
config.i18n.captions + ' <span class="plyr__menu__value">{lang}</span>', config.i18n.captions +
'<span class="plyr__menu__value">{lang}</span>',
'</button>', '</button>',
'</li>', '</li>',
'<li role="tab">', '<li role="tab">',
'<button type="button" class="plyr__control plyr__control--forward" id="plyr-settings-{id}-speed-toggle" aria-haspopup="true" aria-controls="plyr-settings-{id}-speed" aria-expanded="false">', '<button type="button" class="plyr__control plyr__control--forward" id="plyr-settings-{id}-speed-toggle" aria-haspopup="true" aria-controls="plyr-settings-{id}-speed" aria-expanded="false">',
config.i18n.speed + ' <span class="plyr__menu__value">{speed}</span>', config.i18n.speed +
'<span class="plyr__menu__value">{speed}</span>',
'</button>', '</button>',
'</li>', '</li>',
'<li role="tab">', '<li role="tab">',
'<button type="button" class="plyr__control plyr__control--forward" id="plyr-settings-{id}-quality-toggle" aria-haspopup="true" aria-controls="plyr-settings-{id}-quality" aria-expanded="false">', '<button type="button" class="plyr__control plyr__control--forward" id="plyr-settings-{id}-quality-toggle" aria-haspopup="true" aria-controls="plyr-settings-{id}-quality" aria-expanded="false">',
config.i18n.quality + ' <span class="plyr__menu__value">Auto</span>', config.i18n.quality +
'<span class="plyr__menu__value">Auto</span>',
'</button>', '</button>',
'</li>', '</li>',
'</ul>', '</ul>',
@ -1048,30 +1095,36 @@
'</div>', '</div>',
'</div>' '</div>'
); );
/* beautify ignore:end */
} }
// Picture in picture button // Picture in picture button
if (_inArray(config.controls, 'pip') && _support.pip) { if (_inArray(config.controls, 'pip') && _support.pip) {
/* beautify ignore:start */
html.push( html.push(
'<button type="button" class="plyr__control" data-plyr="pip">', '<button type="button" class="plyr__control" data-plyr="pip">',
'<svg><use xlink:href="' + iconPath + '-pip" /></svg>', '<svg><use xlink:href="' + iconPath + '-pip" /></svg>',
'<span class="plyr__sr-only">PIP</span>', '<span class="plyr__sr-only">PIP</span>',
'</button>' '</button>'
); );
/* beautify ignore:end */
} }
// Airplay button // Airplay button
if (_inArray(config.controls, 'airplay') && _support.airplay) { if (_inArray(config.controls, 'airplay') && _support.airplay) {
/* beautify ignore:start */
html.push( html.push(
'<button type="button" class="plyr__control" data-plyr="airplay">', '<button type="button" class="plyr__control" data-plyr="airplay">',
'<svg><use xlink:href="' + iconPath + '-airplay" /></svg>', '<svg><use xlink:href="' + iconPath + '-airplay" /></svg>',
'<span class="plyr__sr-only">AirPlay</span>', '<span class="plyr__sr-only">AirPlay</span>',
'</button>' '</button>'
); );
/* beautify ignore:end */
} }
// Toggle fullscreen button // Toggle fullscreen button
if (_inArray(config.controls, 'fullscreen')) { if (_inArray(config.controls, 'fullscreen')) {
/* beautify ignore:start */
html.push( html.push(
'<button type="button" class="plyr__control" data-plyr="fullscreen">', '<button type="button" class="plyr__control" data-plyr="fullscreen">',
'<svg class="icon--exit-fullscreen"><use xlink:href="' + iconPath + '-exit-fullscreen" /></svg>', '<svg class="icon--exit-fullscreen"><use xlink:href="' + iconPath + '-exit-fullscreen" /></svg>',
@ -1079,6 +1132,7 @@
'<span class="plyr__sr-only">' + config.i18n.toggleFullscreen + '</span>', '<span class="plyr__sr-only">' + config.i18n.toggleFullscreen + '</span>',
'</button>' '</button>'
); );
/* beautify ignore:end */
} }
// Close everything // Close everything
@ -1264,7 +1318,7 @@
// Incase caption numbers are added // Incase caption numbers are added
if (parts[index].indexOf(":") !== -1) { if (parts[index].indexOf(":") !== -1) {
plyr.captions[numOfAvailableCaptions] = [parts[index], parts[index + 1]]; plyr.captions[numOfAvailableCaptions] = [parts[index], parts[index + 1]];
numOfAvailableCaptions ++; numOfAvailableCaptions++;
} }
} }
@ -1318,19 +1372,22 @@
function _timecodeCommon(tc, pos) { function _timecodeCommon(tc, pos) {
var tcpair = []; var tcpair = [];
tcpair = tc.split(' --> '); tcpair = tc.split(' --> ');
for(var i = 0; i < tcpair.length; i++) { for (var i = 0; i < tcpair.length; i++) {
// WebVTT allows for extra meta data after the timestamp line // WebVTT allows for extra meta data after the timestamp line
// So get rid of this if it exists // So get rid of this if it exists
tcpair[i] = tcpair[i].replace(/(\d+:\d+:\d+\.\d+).*/, "$1"); tcpair[i] = tcpair[i].replace(/(\d+:\d+:\d+\.\d+).*/, "$1");
} }
return _subTcSecs(tcpair[pos]); return _subTcSecs(tcpair[pos]);
} }
function _timecodeMin(tc) { function _timecodeMin(tc) {
return _timecodeCommon(tc, 0); return _timecodeCommon(tc, 0);
} }
function _timecodeMax(tc) { function _timecodeMax(tc) {
return _timecodeCommon(tc, 1); return _timecodeCommon(tc, 1);
} }
function _subTcSecs(tc) { function _subTcSecs(tc) {
if (tc === null || tc === undefined) { if (tc === null || tc === undefined) {
return 0; return 0;
@ -1342,7 +1399,7 @@
tc2 = tc1[0].split(':'); tc2 = tc1[0].split(':');
for (var i = 0, len = tc2.length; i < len; i++) { for (var i = 0, len = tc2.length; i < len; i++) {
seconds += Math.floor(tc2[i]*(Math.pow(60, len-(i+1)))); seconds += Math.floor(tc2[i] * (Math.pow(60, len - (i + 1))));
} }
return seconds; return seconds;
@ -1424,8 +1481,7 @@
function _inFrame() { function _inFrame() {
try { try {
return window.self !== window.top; return window.self !== window.top;
} } catch (e) {
catch (e) {
return true; return true;
} }
} }
@ -1458,7 +1514,9 @@
// Add elements to HTML5 media (source, tracks, etc) // Add elements to HTML5 media (source, tracks, etc)
function _insertChildElements(type, attributes) { function _insertChildElements(type, attributes) {
if (_is.string(attributes)) { if (_is.string(attributes)) {
_insertElement(type, plyr.media, { src: attributes }); _insertElement(type, plyr.media, {
src: attributes
});
} else if (attributes.constructor === Array) { } else if (attributes.constructor === Array) {
for (var i = attributes.length - 1; i >= 0; i--) { for (var i = attributes.length - 1; i >= 0; i--) {
_insertElement(type, plyr.media, attributes[i]); _insertElement(type, plyr.media, attributes[i]);
@ -1588,8 +1646,7 @@
plyr.seekTime = _getElements(config.selectors.seekTime); plyr.seekTime = _getElements(config.selectors.seekTime);
return true; return true;
} } catch (e) {
catch(e) {
_warn('It looks like there is a problem with your controls HTML', e); _warn('It looks like there is a problem with your controls HTML', e);
// Restore native video controls // Restore native video controls
@ -1664,7 +1721,9 @@
// If value is a number, it's probably volume from an older // If value is a number, it's probably volume from an older
// version of plyr. See: https://github.com/Selz/plyr/pull/313 // version of plyr. See: https://github.com/Selz/plyr/pull/313
// Update the key to be JSON // Update the key to be JSON
_updateStorage({volume: parseFloat(value)}); _updateStorage({
volume: parseFloat(value)
});
} else { } else {
// Assume it's JSON from this or a later version of plyr // Assume it's JSON from this or a later version of plyr
plyr.storage = JSON.parse(value); plyr.storage = JSON.parse(value);
@ -1710,7 +1769,7 @@
_toggleClass(plyr.container, config.classes.stopped, config.autoplay); _toggleClass(plyr.container, config.classes.stopped, config.autoplay);
// Add iOS class // Add iOS class
_toggleClass(plyr.ontainer, config.classes.isIos, plyr.browser.isIos); _toggleClass(plyr.container, config.classes.isIos, plyr.browser.isIos);
// Add touch class // Add touch class
_toggleClass(plyr.container, config.classes.isTouch, plyr.browser.isTouch); _toggleClass(plyr.container, config.classes.isTouch, plyr.browser.isTouch);
@ -1783,11 +1842,15 @@
window.onYouTubeReadyCallbacks = window.onYouTubeReadyCallbacks || []; window.onYouTubeReadyCallbacks = window.onYouTubeReadyCallbacks || [];
// Add to queue // Add to queue
window.onYouTubeReadyCallbacks.push(function() { _youTubeReady(mediaId, container); }); window.onYouTubeReadyCallbacks.push(function() {
_youTubeReady(mediaId, container);
});
// Set callback to process queue // Set callback to process queue
window.onYouTubeIframeAPIReady = function () { window.onYouTubeIframeAPIReady = function() {
window.onYouTubeReadyCallbacks.forEach(function(callback) { callback(); }); window.onYouTubeReadyCallbacks.forEach(function(callback) {
callback();
});
}; };
} }
} else if (plyr.type === 'vimeo') { } else if (plyr.type === 'vimeo') {
@ -1822,7 +1885,9 @@
// Watch for iframe load // Watch for iframe load
soundCloud.loaded = false; soundCloud.loaded = false;
_on(soundCloud, 'load', function() { soundCloud.loaded = true; }); _on(soundCloud, 'load', function() {
soundCloud.loaded = true;
});
_setAttributes(soundCloud, { _setAttributes(soundCloud, {
'src': 'https://w.soundcloud.com/player/?url=https://api.soundcloud.com/tracks/' + mediaId, 'src': 'https://w.soundcloud.com/player/?url=https://api.soundcloud.com/tracks/' + mediaId,
@ -2158,7 +2223,7 @@
plyr.media.currentTime = 0; plyr.media.currentTime = 0;
plyr.embed.getDuration(function(value) { plyr.embed.getDuration(function(value) {
plyr.media.duration = value/1000; plyr.media.duration = value / 1000;
// Update UI // Update UI
_embedReady(); _embedReady();
@ -2184,7 +2249,7 @@
plyr.embed.bind(window.SC.Widget.Events.PLAY_PROGRESS, function(data) { plyr.embed.bind(window.SC.Widget.Events.PLAY_PROGRESS, function(data) {
plyr.media.seeking = false; plyr.media.seeking = false;
plyr.media.currentTime = data.currentPosition/1000; plyr.media.currentTime = data.currentPosition / 1000;
_triggerEvent(plyr.media, 'timeupdate'); _triggerEvent(plyr.media, 'timeupdate');
}); });
@ -2280,7 +2345,9 @@
plyr.media.playbackRate = speed; plyr.media.playbackRate = speed;
// Save speed to localStorage // Save speed to localStorage
_updateStorage({speed: speed}); _updateStorage({
speed: speed
});
} }
// Seek to time // Seek to time
@ -2312,12 +2379,11 @@
// Try/catch incase the media isn't set and we're calling seek() from source() and IE moans // Try/catch incase the media isn't set and we're calling seek() from source() and IE moans
try { try {
plyr.media.currentTime = targetTime.toFixed(4); plyr.media.currentTime = targetTime.toFixed(4);
} } catch (e) {}
catch(e) {}
// Embeds // Embeds
if (_inArray(config.types.embed, plyr.type)) { if (_inArray(config.types.embed, plyr.type)) {
switch(plyr.type) { switch (plyr.type) {
case 'youtube': case 'youtube':
plyr.embed.seekTo(targetTime); plyr.embed.seekTo(targetTime);
break; break;
@ -2468,7 +2534,7 @@
// Embeds // Embeds
if (_inArray(config.types.embed, plyr.type)) { if (_inArray(config.types.embed, plyr.type)) {
// YouTube // YouTube
switch(plyr.type) { switch (plyr.type) {
case 'youtube': case 'youtube':
plyr.embed[plyr.media.muted ? 'mute' : 'unMute'](); plyr.embed[plyr.media.muted ? 'mute' : 'unMute']();
break; break;
@ -2518,7 +2584,7 @@
// Embeds // Embeds
if (_inArray(config.types.embed, plyr.type)) { if (_inArray(config.types.embed, plyr.type)) {
switch(plyr.type) { switch (plyr.type) {
case 'youtube': case 'youtube':
plyr.embed.setVolume(plyr.media.volume * 100); plyr.embed.setVolume(plyr.media.volume * 100);
break; break;
@ -2579,7 +2645,9 @@
} }
// Update the volume in storage // Update the volume in storage
_updateStorage({volume: volume}); _updateStorage({
volume: volume
});
// Toggle class if muted // Toggle class if muted
_toggleClass(plyr.container, config.classes.muted, (volume === 0)); _toggleClass(plyr.container, config.classes.muted, (volume === 0));
@ -2615,7 +2683,9 @@
_triggerEvent(plyr.container, plyr.captionsEnabled ? 'captionsenabled' : 'captionsdisabled', true); _triggerEvent(plyr.container, plyr.captionsEnabled ? 'captionsenabled' : 'captionsdisabled', true);
// Save captions state to localStorage // Save captions state to localStorage
_updateStorage({captionsEnabled: plyr.captionsEnabled}); _updateStorage({
captionsEnabled: plyr.captionsEnabled
});
} }
// Select active caption // Select active caption
@ -2951,13 +3021,13 @@
// Return the current source // Return the current source
var url; var url;
switch(plyr.type) { switch (plyr.type) {
case 'youtube': case 'youtube':
url = plyr.embed.getVideoUrl(); url = plyr.embed.getVideoUrl();
break; break;
case 'vimeo': case 'vimeo':
plyr.embed.getVideoUrl.then(function (value) { plyr.embed.getVideoUrl.then(function(value) {
url = value; url = value;
}); });
break; break;
@ -3035,7 +3105,7 @@
plyr.supported = supported(plyr.type); plyr.supported = supported(plyr.type);
// Create new markup // Create new markup
switch(plyr.type) { switch (plyr.type) {
case 'video': case 'video':
plyr.media = document.createElement('video'); plyr.media = document.createElement('video');
break; break;
@ -3203,7 +3273,7 @@
_on(window, 'keydown keyup', function(event) { _on(window, 'keydown keyup', function(event) {
var code = getKeyCode(event), var code = getKeyCode(event),
focused = getFocusElement(), focused = getFocusElement(),
allowed = [48,49,50,51,52,53,54,56,57,75,77,70,67], allowed = [48, 49, 50, 51, 52, 53, 54, 56, 57, 75, 77, 70, 67],
count = get().length; count = get().length;
// Only handle global key press if there's only one player // Only handle global key press if there's only one player
@ -3249,8 +3319,8 @@
// Reset on keyup // Reset on keyup
if (pressed) { if (pressed) {
// Which keycodes should we prevent default // Which keycodes should we prevent default
var preventDefault = [48,49,50,51,52,53,54,56,57,32,75,38,40,77,39,37,70,67]; var preventDefault = [48, 49, 50, 51, 52, 53, 54, 56, 57, 32, 75, 38, 40, 77, 39, 37, 70, 67];
var checkFocus = [38,40]; var checkFocus = [38, 40];
if (_inArray(checkFocus, code)) { if (_inArray(checkFocus, code)) {
var focused = getFocusElement(); var focused = getFocusElement();
@ -3266,7 +3336,7 @@
event.stopPropagation(); event.stopPropagation();
} }
switch(code) { switch (code) {
// 0-9 // 0-9
case 48: case 48:
case 49: case 49:
@ -3277,24 +3347,50 @@
case 54: case 54:
case 55: case 55:
case 56: case 56:
case 57: if (!held) { seekByKey(); } break; case 57:
if (!held) {
seekByKey();
}
break;
// Space and K key // Space and K key
case 32: case 32:
case 75: if (!held) { _togglePlay(); } break; case 75:
if (!held) {
_togglePlay();
}
break;
// Arrow up // Arrow up
case 38: _increaseVolume(); break; case 38:
_increaseVolume();
break;
// Arrow down // Arrow down
case 40: _decreaseVolume(); break; case 40:
_decreaseVolume();
break;
// M key // M key
case 77: if (!held) { _toggleMute() } break; case 77:
if (!held) {
_toggleMute()
}
break;
// Arrow forward // Arrow forward
case 39: _forward(); break; case 39:
_forward();
break;
// Arrow back // Arrow back
case 37: _rewind(); break; case 37:
_rewind();
break;
// F key // F key
case 70: _toggleFullscreen(); break; case 70:
_toggleFullscreen();
break;
// C key // C key
case 67: if (!held) { _toggleCaptions(); } break; case 67:
if (!held) {
_toggleCaptions();
}
break;
} }
// Escape is handle natively when in full screen // Escape is handle natively when in full screen
@ -3561,7 +3657,9 @@
// Disable right click // Disable right click
if (config.disableContextMenu) { if (config.disableContextMenu) {
_on(plyr.media, 'contextmenu', function(event) { event.preventDefault(); }); _on(plyr.media, 'contextmenu', function(event) {
event.preventDefault();
});
} }
// Proxy events to container // Proxy events to container
@ -3811,22 +3909,50 @@
} }
api = { api = {
getOriginal: function() { return original; }, getOriginal: function() {
getContainer: function() { return plyr.container }, return original;
getEmbed: function() { return plyr.embed; }, },
getMedia: function() { return plyr.media; }, getContainer: function() {
getType: function() { return plyr.type; }, return plyr.container
},
getEmbed: function() {
return plyr.embed;
},
getMedia: function() {
return plyr.media;
},
getType: function() {
return plyr.type;
},
getDuration: _getDuration, getDuration: _getDuration,
getCurrentTime: function() { return plyr.media.currentTime; }, getCurrentTime: function() {
getVolume: function() { return plyr.media.volume; }, return plyr.media.currentTime;
isMuted: function() { return plyr.media.muted; }, },
isReady: function() { return _hasClass(plyr.container, config.classes.ready); }, getVolume: function() {
isLoading: function() { return _hasClass(plyr.container, config.classes.loading); }, return plyr.media.volume;
isPaused: function() { return plyr.media.paused; }, },
on: function(event, callback) { _on(plyr.container, event, callback); return this; }, isMuted: function() {
return plyr.media.muted;
},
isReady: function() {
return _hasClass(plyr.container, config.classes.ready);
},
isLoading: function() {
return _hasClass(plyr.container, config.classes.loading);
},
isPaused: function() {
return plyr.media.paused;
},
on: function(event, callback) {
_on(plyr.container, event, callback);
return this;
},
play: _play, play: _play,
pause: _pause, pause: _pause,
stop: function() { _pause(); _seek(); }, stop: function() {
_pause();
_seek();
},
restart: _seek, restart: _seek,
rewind: _rewind, rewind: _rewind,
forward: _forward, forward: _forward,
@ -3841,8 +3967,12 @@
toggleFullscreen: _toggleFullscreen, toggleFullscreen: _toggleFullscreen,
toggleControls: _toggleControls, toggleControls: _toggleControls,
setCaptionIndex: _setCaptionIndex, setCaptionIndex: _setCaptionIndex,
isFullscreen: function() { return plyr.isFullscreen || false; }, isFullscreen: function() {
support: function(mimeType) { return _support.mime(plyr, mimeType); }, return plyr.isFullscreen || false;
},
support: function(mimeType) {
return _support.mime(plyr, mimeType);
},
destroy: _destroy destroy: _destroy
}; };
@ -4034,8 +4164,9 @@
var data = {}; var data = {};
// Try parsing data attribute config // Try parsing data attribute config
try { data = JSON.parse(element.getAttribute('data-plyr')); } try {
catch(e) { } data = JSON.parse(element.getAttribute('data-plyr'));
} catch (e) {}
var config = _extend({}, defaults, options, data); var config = _extend({}, defaults, options, data);
@ -4110,13 +4241,17 @@
// Custom event polyfill // Custom event polyfill
// https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent // https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent
(function () { (function() {
if (typeof window.CustomEvent === 'function') { if (typeof window.CustomEvent === 'function') {
return; return;
} }
function CustomEvent(event, params) { function CustomEvent(event, params) {
params = params || { bubbles: false, cancelable: false, detail: undefined }; params = params || {
bubbles: false,
cancelable: false,
detail: undefined
};
var evt = document.createEvent('CustomEvent'); var evt = document.createEvent('CustomEvent');
evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail); evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
return evt; return evt;