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

Merge remote-tracking branch 'org/develop' into develop

Browse Source
This commit is contained in:
Monica Cheung
2016-04-25 22:43:44 -07:00
parent 47e0800f02 e26694c322
commit 48399f6364
21 changed files with 803 additions and 762 deletions
Download Patch File Download Diff File Expand all files Collapse all files

213
src/js/plyr.js
View File

@ -39,8 +39,9 @@
duration: null,
displayDuration: true,
iconPrefix: 'icon',
click: true,
tooltips: {
clickToPlay: true,
hideControls: true,
tooltips: {
controls: false,
seek: true
},
@ -83,6 +84,7 @@
hover: 'plyr--hover',
tooltip: 'plyr__tooltip',
hidden: 'plyr__sr-only',
hideControls: 'plyr--hide-controls',
isIos: 'plyr--is-ios',
isTouch: 'plyr--is-touch',
captions: {
@ -91,8 +93,7 @@
},
fullscreen: {
enabled: 'plyr--fullscreen-enabled',
active: 'plyr--fullscreen-active',
hideControls: 'plyr--fullscreen--hide-controls'
active: 'plyr--fullscreen-active'
},
tabFocus: 'tab-focus'
},
@ -102,14 +103,13 @@
fullscreen: {
enabled: true,
fallback: true,
hideControls: true,
allowAudio: false
},
storage: {
enabled: true,
key: 'plyr'
},
controls: ['restart', 'rewind', 'play', 'fast-forward', 'current-time', 'duration', 'mute', 'volume', 'captions', 'fullscreen'],
controls: ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'fullscreen'],
i18n: {
restart: 'Restart',
rewind: 'Rewind {seektime} secs',
@ -393,6 +393,30 @@
return false;
}
// Debounce
// deBouncer by hnldesign.nl
// based on code by Paul Irish and the original debouncing function from John Hann
// http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
function _debounce(func, threshold, execAsap) {
var timeout;
return function debounced () {
var obj = this, args = arguments;
function delayed () {
if (!execAsap) {
func.apply(obj, args);
}
timeout = null;
}
if (timeout) {
clearTimeout(timeout);
}
else if (execAsap) {
func.apply(obj, args);
}
timeout = setTimeout(delayed, threshold || 100);
};
}
// Bind event
function _on(element, events, callback) {
if (element) {
@ -637,27 +661,20 @@
// Build the default HTML
function _buildControls() {
// Open and add the progress and seek elements
var html = [
'<div class="plyr__controls">',
'<div class="plyr__progress">',
'<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">',
'<progress class="plyr__progress--played" max="100" value="0">',
'<span>0</span>% ' + config.i18n.played,
'</progress>',
'<progress class="plyr__progress--buffer" max="100" value="0">',
'<span>0</span>% ' + config.i18n.buffered,
'</progress>'];
// Create html array
var html = [];
// Seek tooltip
if (config.tooltips.seek) {
html.push('<span class="plyr__tooltip">00:00</span>');
// Larger overlaid play button
if (_inArray(config.controls, 'play-large')) {
html.push(
'<button type="button" data-plyr="play" class="plyr__play-large">',
'<svg><use xlink:href="#' + config.iconPrefix + '-play" /></svg>',
'<span class="plyr__sr-only">' + config.i18n.play + '</span>',
'</button>'
);
}
// Close progress
html.push('</div>',
'<span class="plyr__controls--left">');
html.push('<div class="plyr__controls">');
// Restart button
if (_inArray(config.controls, 'restart')) {
@ -679,7 +696,8 @@
);
}
// Play/pause button
// Play Pause button
// TODO: This should be a toggle button really?
if (_inArray(config.controls, 'play')) {
html.push(
'<button type="button" data-plyr="play">',
@ -703,6 +721,28 @@
);
}
// Progress
if (_inArray(config.controls, 'progress')) {
// Create progress
html.push('<span class="plyr__progress">',
'<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">',
'<progress class="plyr__progress--played" max="100" value="0">',
'<span>0</span>% ' + config.i18n.played,
'</progress>',
'<progress class="plyr__progress--buffer" max="100" value="0">',
'<span>0</span>% ' + config.i18n.buffered,
'</progress>');
// Seek tooltip
if (config.tooltips.seek) {
html.push('<span class="plyr__tooltip">00:00</span>');
}
// Close
html.push('</span>');
}
// Media current time display
if (_inArray(config.controls, 'current-time')) {
html.push(
@ -723,12 +763,6 @@
);
}
// Close left controls
html.push(
'</span>',
'<span class="plyr__controls--right">'
);
// Toggle mute button
if (_inArray(config.controls, 'mute')) {
html.push(
@ -771,10 +805,7 @@
}
// Close everything
html.push(
'</span>',
'</div>'
);
html.push('</div>');
return html.join('');
}
@ -804,11 +835,6 @@
// Setup focus trap
_focusTrap();
// Set control hide class hook
if (config.fullscreen.hideControls) {
_toggleClass(plyr.container, config.classes.fullscreen.hideControls, true);
}
}
}
@ -1174,7 +1200,7 @@
// Setup tooltips
if (config.tooltips.controls) {
var labels = _getElements(config.selectors.labels + ' .' + config.classes.hidden);
var labels = _getElements([config.selectors.controls.wrapper, ' ', config.selectors.labels, ' .', config.classes.hidden].join(''));
for (var i = labels.length - 1; i >= 0; i--) {
var label = labels[i];
@ -1193,7 +1219,7 @@
// Buttons
plyr.buttons = {};
plyr.buttons.seek = _getElement(config.selectors.buttons.seek);
plyr.buttons.play = _getElement(config.selectors.buttons.play);
plyr.buttons.play = _getElements(config.selectors.buttons.play);
plyr.buttons.pause = _getElement(config.selectors.buttons.pause);
plyr.buttons.restart = _getElement(config.selectors.buttons.restart);
plyr.buttons.rewind = _getElement(config.selectors.buttons.rewind);
@ -1237,7 +1263,7 @@
_log('It looks like there is a problem with your controls html', true);
// Restore native video controls
_toggleControls(true);
_toggleNativeControls(true);
return false;
}
@ -1249,7 +1275,7 @@
}
// Toggle native controls
function _toggleControls(toggle) {
function _toggleNativeControls(toggle) {
if(toggle) {
plyr.media.setAttribute('controls', '');
}
@ -1270,7 +1296,9 @@
// If there's a play button, set label
if (plyr.supported.full && plyr.buttons.play) {
plyr.buttons.play.setAttribute('aria-label', label);
for (var i = plyr.buttons.play.length - 1; i >= 0; i--) {
plyr.buttons.play[i].setAttribute('aria-label', label);
}
}
// Set iframe title
@ -1292,6 +1320,12 @@
// Add type class
_toggleClass(plyr.container, config.classes.type.replace('{0}', plyr.type), true);
// Add video class for embeds
// This will require changes if audio embeds are added
if (_inArray(config.types.embed, plyr.type)) {
_toggleClass(plyr.container, config.classes.type.replace('{0}', 'video'), true);
}
// If there's no autoplay attribute, assume the video is stopped and add state class
_toggleClass(plyr.container, config.classes.stopped, config.autoplay);
@ -1869,6 +1903,8 @@
function _checkPlaying() {
_toggleClass(plyr.container, config.classes.playing, !plyr.media.paused);
_toggleClass(plyr.container, config.classes.stopped, plyr.media.paused);
_toggleControls(plyr.media.paused);
}
// Toggle fullscreen
@ -1926,12 +1962,6 @@
// Set button state
_toggleState(plyr.buttons.fullscreen, plyr.isFullscreen);
// Hide on entering full screen
if (config.fullscreen.hideControls) {
//_toggleClass(plyr.controls, config.classes.hover, false);
_showControls(true);
}
// Trigger an event
_triggerEvent(plyr.container, plyr.isFullscreen ? 'enterfullscreen' : 'exitfullscreen');
}
@ -2273,24 +2303,51 @@
}
// Show the player controls in fullscreen mode
function _showControls(force) {
// We're only worried about fullscreen
if (!plyr.isFullscreen) {
function _toggleControls(toggle) {
if (!config.hideControls || plyr.type === 'audio') {
return;
}
var delay = false,
isEnterFullscreen = false,
show = toggle;
// Set shown class
_toggleClass(plyr.container, config.classes.hover, true);
// Default to false if no boolean
if(typeof toggle !== "boolean") {
if(toggle && toggle.type) {
delay = (toggle.type === 'mousemove');
isEnterFullscreen = (toggle.type === 'enterfullscreen');
show = _inArray(['mousemove','mouseenter'], toggle.type);
}
else {
show = false;
}
}
// Clear timer every movement
window.clearTimeout(plyr.timers.hover);
// If the mouse is not over the controls, set a timeout to hide them
plyr.timers.hover = window.setTimeout(function() {
if (!plyr.controls.mouseover || (force === true)) {
_toggleClass(plyr.container, config.classes.hover, false);
if(show || plyr.media.paused) {
_toggleClass(plyr.container, config.classes.hideControls, false);
// Always show controls when paused
if(plyr.media.paused) {
return;
}
}, 2000);
}
// If toggle is false or if we're playing (regardless of toggle), then
// set the timer to hide the controls
if(!show || !plyr.media.paused) {
plyr.timers.hover = window.setTimeout(function() {
// If the mouse is over the controls, bail
if(plyr.controls.active && !isEnterFullscreen) {
return;
}
_toggleClass(plyr.container, config.classes.hideControls, true);
}, delay ? 2000 : 0);
}
}
// Add common function to retrieve media source
@ -2339,6 +2396,11 @@
// Pause playback
_pause();
// Set seek input to 0
if(plyr.buttons.seek) {
plyr.buttons.seek.value = 0;
}
// Clean up YouTube stuff
if (plyr.type === 'youtube') {
// Destroy the embed instance
@ -2578,13 +2640,15 @@
// Seek tooltip
_on(plyr.progress.container, 'mouseenter mouseleave mousemove', _updateSeekTooltip);
// Toggle controls visibility based on mouse movement and location
var hoverTimer, isMouseOver = false;
// Toggle controls visibility based on mouse movement
if (config.hideControls) {
_on(plyr.container, 'mouseenter mouseleave mousemove', _toggleControls);
//_on(plyr.container, 'mousemove', _debounce(_toggleControls, 200, true));
_on(plyr.container, 'enterfullscreen', _toggleControls);
if (config.fullscreen.hideControls) {
// Keep an eye on the mouse location in relation to controls
_on(plyr.controls, 'mouseenter mouseleave', function(event) {
plyr.controls.mouseover = (event.type === 'mouseenter');
// Watch for cursor over controls so they don't hide when trying to interact
_on(plyr.controls, 'mouseenter mouseleave', function(event) {
plyr.controls.active = (event.type === 'mouseenter');
});
}
}
@ -2624,7 +2688,10 @@
_on(plyr.media, 'waiting canplay seeked', _checkLoading);
// Click video
if (config.click) {
if (config.clickToPlay) {
// Set cursor
plyr.videoContainer.style.cursor = "pointer";
_on(plyr.media, 'click', function() {
if (plyr.media.paused) {
_play();
@ -2639,12 +2706,6 @@
});
}
// Listen for mouse move to show controls
if (config.fullscreen.hideControls) {
// Show the controls on mouse move
_on(plyr.media, 'mousemove', _showControls);
}
// Proxy events to container
_on(plyr.media, config.events.join(' '), function(event) {
_triggerEvent(plyr.container, event.type);
@ -2710,7 +2771,7 @@
}
// Restore native video controls
_toggleControls(true);
_toggleNativeControls(true);
// Clone the media element to remove listeners
// http://stackoverflow.com/questions/19469881/javascript-remove-all-event-listeners-of-specific-type
@ -2808,7 +2869,7 @@
_remove(_getElement(config.selectors.controls.wrapper));
// Restore native controls
_toggleControls(true);
_toggleNativeControls(true);
// Bail
return;
@ -2835,7 +2896,7 @@
_mediaListeners();
// Remove native controls
_toggleControls();
_toggleNativeControls();
// Setup fullscreen
_setupFullscreen();

1213
src/less/plyr.less
View File

File diff suppressed because it is too large Load Diff

11
src/sprite/icon-fast-forward.svg Executable file → Normal file
View File

@ -1,4 +1,7 @@
<?xml version="1.0" encoding="utf-8"?>
<svg viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M17.569 8.246l-10.569-6.246c-0.552 0-1 0.448-1 1v1.954l-5-2.954c-0.552 0-1 0.448-1 1v12c0 0.552 0.448 1 1 1l5-2.955v1.955c0 0.552 0.448 1 1 1l10.569-6.246c0.267-0.158 0.431-0.444 0.431-0.754s-0.164-0.597-0.431-0.754zM6 10.722l-4 2.364v-8.172l4 2.364v3.444zM8 13.086v-8.172l6.915 4.086-6.915 4.086z"></path>
</svg>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
<polygon points="7,6.4 0,1 0,15 7,9.6 7,15 16,8 7,1 "/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 481 B

After

Width:  |  Height:  |  Size: 534 B

15
src/sprite/icon-pause.svg
View File

@ -1,7 +1,8 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g transform="translate(2.000000, 2.000000)">
<path d="M0,2 L0,12 C5.24848613e-17,14 2,14 2,14 L4,14 C4,14 6,14 6,12 C6,11.786438 6,11.572876 6,11 L6,2 C6,3.17446247e-09 4,0 4,0 L2,0 C2,0 0,0 0,2 Z M2,2 L4,2 L4,12 L2,12 L2,2 Z"></path>
<path d="M8,2 L8,12 C8,14 10,14 10,14 L12,14 C12,14 14,14 14,12 C14,11.786438 14,11.572876 14,11 L14,2 C14,3.17446247e-09 12,0 12,0 L10,0 C10,0 8,0 8,2 Z M10,2 L12,2 L12,12 L10,12 L10,2 Z"></path>
</g>
</svg>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
<path d="M5,1H2C1.4,1,1,1.4,1,2v12c0,0.6,0.4,1,1,1h3c0.6,0,1-0.4,1-1V2C6,1.4,5.6,1,5,1z"/>
<path d="M14,1h-3c-0.6,0-1,0.4-1,1v12c0,0.6,0.4,1,1,1h3c0.6,0,1-0.4,1-1V2C15,1.4,14.6,1,14,1z"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 642 B

After

Width:  |  Height:  |  Size: 667 B

11
src/sprite/icon-play.svg Executable file → Normal file
View File

@ -1,4 +1,7 @@
<?xml version="1.0" encoding="utf-8"?>
<svg viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M5 4.914l6.915 4.086-6.915 4.086v-8.172zM4 2c-0.552 0-1 0.448-1 1v12c0 0.552 0.448 1 1 1l10.569-6.246c0.267-0.158 0.431-0.444 0.431-0.754s-0.164-0.597-0.431-0.754l-10.569-6.246z"></path>
</svg>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
<path d="M13.6,7.2l-10-7C2.9-0.3,2,0.2,2,1v14c0,0.8,0.9,1.3,1.6,0.8l10-7C14.1,8.4,14.1,7.6,13.6,7.2z"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 361 B

After

Width:  |  Height:  |  Size: 582 B

11
src/sprite/icon-rewind.svg
View File

@ -1,4 +1,7 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg viewBox="0 0 18 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<path d="M17.569,9.246 L7,3 C6.448,3 6,3.448 6,4 L6,5.954 L1,3 C0.448,3 0,3.448 0,4 L0,16 C0,16.552 0.448,17 1,17 L6,14.045 L6,16 C6,16.552 6.448,17 7,17 L17.569,10.754 C17.836,10.596 18,10.31 18,10 C18,9.69 17.836,9.403 17.569,9.246 L17.569,9.246 Z M6,11.722 L2,14.086 L2,5.914 L6,8.278 L6,11.722 L6,11.722 Z M8,14.086 L8,5.914 L14.915,10 L8,14.086 L8,14.086 Z" transform="translate(9.000000, 10.000000) rotate(-180.000000) translate(-9.000000, -10.000000) "></path>
</svg>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
<polygon points="9,1 0,8 9,15 9,9.6 16,15 16,1 9,6.4 "/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 704 B

After

Width:  |  Height:  |  Size: 535 B