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

Merge branch 'pr/196' into develop

Browse Source 
# Conflicts:
#	dist/plyr.js
This commit is contained in:
Sam Potts 2016-04-30 11:08:42 +10:00
commit aa093b6c42
2 changed files with 177 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
dist/plyr.js vendored
View File

File diff suppressed because one or more lines are too long

220
src/js/plyr.js
View File

@ -131,7 +131,7 @@
frameTitle: 'Player for {title}' frameTitle: 'Player for {title}'
}, },
types: { types: {
embed: ['youtube', 'vimeo'], embed: ['youtube', 'vimeo', 'soundcloud'],
html5: ['video', 'audio'] html5: ['video', 'audio']
}, },
// URLs // URLs
@ -141,6 +141,9 @@
}, },
youtube: { youtube: {
api: 'https://www.youtube.com/iframe_api' api: 'https://www.youtube.com/iframe_api'
},
soundcloud: {
api: 'https://w.soundcloud.com/player/api.js'
} }
}, },
// Custom control listeners // Custom control listeners
@ -333,7 +336,7 @@
// Remove an element // Remove an element
function _remove(element) { function _remove(element) {
if(!element) { if (!element) {
return; return;
} }
element.parentNode.removeChild(element); element.parentNode.removeChild(element);
@ -411,7 +414,7 @@
// Bind along with custom handler // Bind along with custom handler
function _proxyListener(element, eventName, userListener, defaultListener, useCapture) { function _proxyListener(element, eventName, userListener, defaultListener, useCapture) {
_on(element, eventName, function(event) { _on(element, eventName, function(event) {
if(userListener) { if (userListener) {
userListener.apply(element, [event]); userListener.apply(element, [event]);
} }
defaultListener.apply(element, [event]); defaultListener.apply(element, [event]);
@ -424,7 +427,7 @@
// Whether the listener is a capturing listener or not // Whether the listener is a capturing listener or not
// Default to false // Default to false
if(typeof useCapture !== 'boolean') { if (typeof useCapture !== 'boolean') {
useCapture = false; useCapture = false;
} }
@ -447,7 +450,7 @@
// Trigger event // Trigger event
function _triggerEvent(element, eventName, properties) { function _triggerEvent(element, eventName, properties) {
// Bail if no element // Bail if no element
if(!element || !eventName) { if (!element || !eventName) {
return; return;
} }
@ -462,7 +465,7 @@
// http://www.ssbbartgroup.com/blog/how-not-to-misuse-aria-states-properties-and-roles // http://www.ssbbartgroup.com/blog/how-not-to-misuse-aria-states-properties-and-roles
function _toggleState(target, state) { function _toggleState(target, state) {
// Bail if no target // Bail if no target
if(!target) { if (!target) {
return; return;
} }
@ -491,12 +494,12 @@
var objects = arguments; var objects = arguments;
// Bail if nothing to merge // Bail if nothing to merge
if(!objects.length) { if (!objects.length) {
return; return;
} }
// Return first if specified but nothing to merge // Return first if specified but nothing to merge
if(objects.lenth == 1) { if (objects.lenth == 1) {
return objects[0]; return objects[0];
} }
@ -597,7 +600,7 @@
function _storage() { function _storage() {
var storage = { var storage = {
supported: (function() { supported: (function() {
if(!('localStorage' in window)) { if (!('localStorage' in window)) {
return false; return false;
} }
@ -943,7 +946,7 @@
index = 0; index = 0;
// Incase caption numbers are added // Incase caption numbers are added
if(parts[index].indexOf(":") === -1) { if (parts[index].indexOf(":") === -1) {
index = 1; index = 1;
} }
@ -978,12 +981,12 @@
container.innerHTML = ''; container.innerHTML = '';
// Default to empty // Default to empty
if(typeof caption === 'undefined') { if (typeof caption === 'undefined') {
caption = ''; caption = '';
} }
// Set the span content // Set the span content
if(typeof caption === 'string') { if (typeof caption === 'string') {
content.innerHTML = caption.trim(); content.innerHTML = caption.trim();
} }
else { else {
@ -1170,7 +1173,7 @@
if (config.selectors.controls.container !== null) { if (config.selectors.controls.container !== null) {
container = config.selectors.controls.container; container = config.selectors.controls.container;
if(typeof selector === 'string') { if (typeof selector === 'string') {
container = document.querySelector(container); container = document.querySelector(container);
} }
} }
@ -1259,7 +1262,7 @@
// Toggle native controls // Toggle native controls
function _toggleNativeControls(toggle) { function _toggleNativeControls(toggle) {
if(toggle) { if (toggle) {
plyr.media.setAttribute('controls', ''); plyr.media.setAttribute('controls', '');
} }
else { else {
@ -1404,7 +1407,7 @@
}); });
// If full support, we can use custom controls (hiding Vimeos), if not, use Vimeo // If full support, we can use custom controls (hiding Vimeos), if not, use Vimeo
if(plyr.supported.full) { if (plyr.supported.full) {
container.appendChild(iframe); container.appendChild(iframe);
plyr.media.appendChild(container); plyr.media.appendChild(container);
} }
@ -1425,6 +1428,35 @@
} }
}, 50); }, 50);
} }
// Soundcloud
else if (plyr.type === 'soundcloud') {
// Inject the iframe
var iframe = document.createElement('iframe');
// Watch for iframe load
iframe.loaded = false;
_on(iframe, 'load', function() { iframe.loaded = true; });
_setAttributes(iframe, {
'src': 'https://w.soundcloud.com/player/?url=https://api.soundcloud.com/tracks/' + videoId,
'id': id
});
container.appendChild(iframe);
plyr.media.appendChild(container);
if (!window.SC) {
_injectScript(config.urls.soundcloud.api);
}
// Wait for SC load
var timer = window.setInterval(function() {
if (window.SC && iframe.loaded) {
window.clearInterval(timer);
_soundcloudReady.call(iframe);
}
}, 50);
}
} }
// When embeds are ready // When embeds are ready
@ -1628,7 +1660,7 @@
plyr.media.buffered = data.percent; plyr.media.buffered = data.percent;
_triggerEvent(plyr.media, 'progress'); _triggerEvent(plyr.media, 'progress');
if(parseInt(data.percent) === 1) { if (parseInt(data.percent) === 1) {
// Trigger event // Trigger event
_triggerEvent(plyr.media, 'canplaythrough'); _triggerEvent(plyr.media, 'canplaythrough');
} }
@ -1649,16 +1681,94 @@
}); });
} }
// Soundcloud ready
function _soundcloudReady() {
plyr.embed = SC.Widget(this);
// Setup on ready
plyr.embed.bind(SC.Widget.Events.READY, function() {
// Create a faux HTML5 API using the Soundcloud API
plyr.media.play = function() {
plyr.embed.play();
plyr.media.paused = false;
};
plyr.media.pause = function() {
plyr.embed.pause();
plyr.media.paused = true;
};
plyr.media.stop = function() {
plyr.embed.seekTo(0);
plyr.embed.pause();
plyr.media.paused = true;
};
plyr.media.paused = true;
plyr.media.currentTime = 0;
// Update UI
_embedReady();
plyr.embed.getPosition(function(value) {
plyr.media.currentTime = value;
// Trigger timeupdate
_triggerEvent(plyr.media, 'timeupdate');
});
plyr.embed.getDuration(function(value) {
plyr.media.duration = value/1000;
// Display duration if available
_displayDuration();
});
plyr.embed.bind(SC.Widget.Events.PLAY, function() {
plyr.media.paused = false;
_triggerEvent(plyr.media, 'play');
_triggerEvent(plyr.media, 'playing');
});
plyr.embed.bind(SC.Widget.Events.PAUSE, function() {
plyr.media.paused = true;
_triggerEvent(plyr.media, 'pause');
});
plyr.embed.bind(SC.Widget.Events.PLAY_PROGRESS, function(data) {
plyr.media.seeking = false;
plyr.media.currentTime = data.currentPosition/1000;
_triggerEvent(plyr.media, 'timeupdate');
});
plyr.embed.bind(SC.Widget.Events.LOAD_PROGRESS, function(data) {
plyr.media.buffered = data.loadProgress;
_triggerEvent(plyr.media, 'progress');
if (parseInt(data.loadProgress) === 1) {
// Trigger event
_triggerEvent(plyr.media, 'canplaythrough');
}
});
plyr.embed.bind(SC.Widget.Events.FINISH, function() {
plyr.media.paused = true;
_triggerEvent(plyr.media, 'ended');
});
// Autoplay
if (config.autoplay) {
plyr.embed.play();
}
});
}
// Play media // Play media
function _play() { function _play() {
if('play' in plyr.media) { if ('play' in plyr.media) {
plyr.media.play(); plyr.media.play();
} }
} }
// Pause media // Pause media
function _pause() { function _pause() {
if('pause' in plyr.media) { if ('pause' in plyr.media) {
plyr.media.pause(); plyr.media.pause();
} }
} }
@ -1724,7 +1834,7 @@
} }
// Update progress // Update progress
if(plyr.progress && plyr.progress.played) { if (plyr.progress && plyr.progress.played) {
plyr.progress.played.value = ((100 / duration) * targetTime); plyr.progress.played.value = ((100 / duration) * targetTime);
} }
@ -1736,7 +1846,7 @@
catch(e) {} catch(e) {}
// 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':
@ -1747,6 +1857,10 @@
// Round to nearest second for vimeo // Round to nearest second for vimeo
plyr.embed.api('seekTo', targetTime.toFixed(0)); plyr.embed.api('seekTo', targetTime.toFixed(0));
break; break;
case 'soundcloud':
plyr.embed.seekTo(targetTime * 1000);
break;
} }
if (paused) { if (paused) {
@ -1826,7 +1940,7 @@
_toggleClass(plyr.container, config.classes.fullscreen.active, plyr.isFullscreen); _toggleClass(plyr.container, config.classes.fullscreen.active, plyr.isFullscreen);
// Trap focus // Trap focus
if(plyr.isFullscreen) { if (plyr.isFullscreen) {
plyr.container.setAttribute('tabindex', '-1'); plyr.container.setAttribute('tabindex', '-1');
} }
else { else {
@ -1865,12 +1979,12 @@
plyr.media.muted = muted; plyr.media.muted = muted;
// If volume is 0 after unmuting, set to default // If volume is 0 after unmuting, set to default
if(plyr.media.volume === 0) { if (plyr.media.volume === 0) {
_setVolume(config.volume); _setVolume(config.volume);
} }
// 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':
@ -1880,6 +1994,10 @@
case 'vimeo': case 'vimeo':
plyr.embed.api('setVolume', plyr.media.muted ? 0 : parseFloat(config.volume / 10)); plyr.embed.api('setVolume', plyr.media.muted ? 0 : parseFloat(config.volume / 10));
break; break;
case 'soundcloud':
plyr.embed.setVolume(plyr.media.muted ? 0 : parseFloat(config.volume / 10));
break;
} }
// Trigger volumechange for embeds // Trigger volumechange for embeds
@ -1903,7 +2021,7 @@
} }
// Use config if all else fails // Use config if all else fails
if(volume === null || isNaN(volume)) { if (volume === null || isNaN(volume)) {
volume = config.volume; volume = config.volume;
} }
@ -1925,7 +2043,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':
@ -1935,6 +2053,10 @@
case 'vimeo': case 'vimeo':
plyr.embed.api('setVolume', plyr.media.volume); plyr.embed.api('setVolume', plyr.media.volume);
break; break;
case 'soundcloud':
plyr.embed.setVolume(plyr.media.volume);
break;
} }
// Trigger volumechange for embeds // Trigger volumechange for embeds
@ -2124,7 +2246,7 @@
_updateTimeDisplay(plyr.media.currentTime, plyr.currentTime); _updateTimeDisplay(plyr.media.currentTime, plyr.currentTime);
// Ignore updates while seeking // Ignore updates while seeking
if(event && event.type == 'timeupdate' && plyr.media.seeking) { if (event && event.type == 'timeupdate' && plyr.media.seeking) {
return; return;
} }
@ -2146,7 +2268,7 @@
// Determine percentage, if already visible // Determine percentage, if already visible
if (!event) { if (!event) {
if(_hasClass(plyr.progress.tooltip, visible)) { if (_hasClass(plyr.progress.tooltip, visible)) {
percent = plyr.progress.tooltip.style.left.replace('%', ''); percent = plyr.progress.tooltip.style.left.replace('%', '');
} }
else { else {
@ -2173,7 +2295,7 @@
// Show/hide the tooltip // Show/hide the tooltip
// If the event is a moues in/out and percentage is inside bounds // If the event is a moues in/out and percentage is inside bounds
if(event && _inArray(['mouseenter', 'mouseleave'], event.type)) { if (event && _inArray(['mouseenter', 'mouseleave'], event.type)) {
_toggleClass(plyr.progress.tooltip, visible, (event.type === 'mouseenter')); _toggleClass(plyr.progress.tooltip, visible, (event.type === 'mouseenter'));
} }
} }
@ -2188,8 +2310,8 @@
show = toggle; show = toggle;
// Default to false if no boolean // Default to false if no boolean
if(typeof toggle !== "boolean") { if (typeof toggle !== "boolean") {
if(toggle && toggle.type) { if (toggle && toggle.type) {
// Is the enter fullscreen event // Is the enter fullscreen event
isEnterFullscreen = (toggle.type === 'enterfullscreen'); isEnterFullscreen = (toggle.type === 'enterfullscreen');
@ -2215,21 +2337,21 @@
window.clearTimeout(plyr.timers.hover); window.clearTimeout(plyr.timers.hover);
// If the mouse is not over the controls, set a timeout to hide them // If the mouse is not over the controls, set a timeout to hide them
if(show || plyr.media.paused) { if (show || plyr.media.paused) {
_toggleClass(plyr.container, config.classes.hideControls, false); _toggleClass(plyr.container, config.classes.hideControls, false);
// Always show controls when paused // Always show controls when paused
if(plyr.media.paused) { if (plyr.media.paused) {
return; return;
} }
} }
// If toggle is false or if we're playing (regardless of toggle), then // If toggle is false or if we're playing (regardless of toggle), then
// set the timer to hide the controls // set the timer to hide the controls
if(!show || !plyr.media.paused) { if (!show || !plyr.media.paused) {
plyr.timers.hover = window.setTimeout(function() { plyr.timers.hover = window.setTimeout(function() {
// If the mouse is over the controls (and not entering fullscreen), bail // If the mouse is over the controls (and not entering fullscreen), bail
if(plyr.controls.active && !isEnterFullscreen) { if (plyr.controls.active && !isEnterFullscreen) {
return; return;
} }
@ -2241,7 +2363,7 @@
// Add common function to retrieve media source // Add common function to retrieve media source
function _source(source) { function _source(source) {
// If not null or undefined, parse it // If not null or undefined, parse it
if(typeof source !== 'undefined') { if (typeof source !== 'undefined') {
_updateSource(source); _updateSource(source);
return; return;
} }
@ -2259,6 +2381,12 @@
}); });
break; break;
case 'soundcloud':
plyr.embed.getCurrentSound(function(object) {
url = object.permalink_url;
});
break;
default: default:
url = plyr.media.currentSrc; url = plyr.media.currentSrc;
break; break;
@ -2314,10 +2442,10 @@
plyr.type = source.type; plyr.type = source.type;
// Get child type for video (it might be an embed) // Get child type for video (it might be an embed)
if(plyr.type === 'video') { if (plyr.type === 'video') {
var firstSource = source.sources[0]; var firstSource = source.sources[0];
if('type' in firstSource && _inArray(config.types.embed, firstSource.type)) { if ('type' in firstSource && _inArray(config.types.embed, firstSource.type)) {
plyr.type = firstSource.type; plyr.type = firstSource.type;
} }
} }
@ -2338,6 +2466,7 @@
case 'youtube': case 'youtube':
case 'vimeo': case 'vimeo':
case 'soundcloud':
plyr.media = document.createElement('div'); plyr.media = document.createElement('div');
plyr.embedId = source.sources[0].src; plyr.embedId = source.sources[0].src;
break; break;
@ -2437,7 +2566,7 @@
target = plyr.buttons[play ? 'pause' : 'play']; target = plyr.buttons[play ? 'pause' : 'play'];
// Get the last play button to account for the large play button // Get the last play button to account for the large play button
if(target && target.length > 1) { if (target && target.length > 1) {
target = target[target.length - 1]; target = target[target.length - 1];
} }
else { else {
@ -2445,13 +2574,13 @@
} }
// Setup focus and tab focus // Setup focus and tab focus
if(target) { if (target) {
var hadTabFocus = _hasClass(trigger, config.classes.tabFocus); var hadTabFocus = _hasClass(trigger, config.classes.tabFocus);
setTimeout(function() { setTimeout(function() {
target.focus(); target.focus();
if(hadTabFocus) { if (hadTabFocus) {
_toggleClass(trigger, config.classes.tabFocus, false); _toggleClass(trigger, config.classes.tabFocus, false);
_toggleClass(target, config.classes.tabFocus, true); _toggleClass(target, config.classes.tabFocus, true);
} }
@ -2595,7 +2724,7 @@
var wrapper = _getElement('.' + config.classes.videoWrapper); var wrapper = _getElement('.' + config.classes.videoWrapper);
// Bail if there's no wrapper (this should never happen) // Bail if there's no wrapper (this should never happen)
if(!wrapper) { if (!wrapper) {
return; return;
} }
@ -2626,7 +2755,7 @@
// Cancel current network requests // Cancel current network requests
// See https://github.com/Selz/plyr/issues/174 // See https://github.com/Selz/plyr/issues/174
function _cancelRequests() { function _cancelRequests() {
if(!_inArray(config.types.html5, plyr.type)) { if (!_inArray(config.types.html5, plyr.type)) {
return; return;
} }
@ -2707,12 +2836,12 @@
plyr.media = plyr.container.querySelectorAll('audio, video')[0]; plyr.media = plyr.container.querySelectorAll('audio, video')[0];
// Get the div placeholder for YouTube and Vimeo // Get the div placeholder for YouTube and Vimeo
if(!plyr.media) { if (!plyr.media) {
plyr.media = plyr.container.querySelectorAll('div')[0]; plyr.media = plyr.container.querySelectorAll('div')[0];
} }
// Bail if nothing to setup // Bail if nothing to setup
if(!plyr.media) { if (!plyr.media) {
return; return;
} }
@ -2897,6 +3026,7 @@
case 'vimeo': case 'vimeo':
case 'youtube': case 'youtube':
case 'soundcloud':
basic = true; basic = true;
full = (!oldIE && !iPhone); full = (!oldIE && !iPhone);
break; break;
@ -2954,7 +3084,7 @@
var config = _extend(defaults, options, JSON.parse(element.getAttribute("data-plyr"))); var config = _extend(defaults, options, JSON.parse(element.getAttribute("data-plyr")));
// Bail if not enabled // Bail if not enabled
if(!config.enabled) { if (!config.enabled) {
return; return;
} }