diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/js/plyr.js | 353 | ||||
| -rw-r--r-- | src/less/mixins.less | 29 | ||||
| -rw-r--r-- | src/less/plyr.less | 287 | ||||
| -rw-r--r-- | src/less/variables.less | 66 | ||||
| -rw-r--r-- | src/sass/plyr.scss | 719 | ||||
| -rw-r--r-- | src/scss/mixins.scss | 29 | ||||
| -rw-r--r-- | src/scss/plyr.scss | 684 | ||||
| -rw-r--r-- | src/scss/variables.scss | 67 |
8 files changed, 1208 insertions, 1026 deletions
diff --git a/src/js/plyr.js b/src/js/plyr.js index c34a1070..d3fc3648 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -1,6 +1,6 @@ // ========================================================================== // Plyr -// plyr.js v1.5.21 +// plyr.js v1.6.1 // https://github.com/selz/plyr // License: The MIT License (MIT) // ========================================================================== @@ -39,6 +39,7 @@ duration: null, displayDuration: true, iconPrefix: 'icon', + iconUrl: '', clickToPlay: true, hideControls: true, tooltips: { @@ -60,10 +61,13 @@ rewind: '[data-plyr="rewind"]', forward: '[data-plyr="fast-forward"]', mute: '[data-plyr="mute"]', - volume: '[data-plyr="volume"]', captions: '[data-plyr="captions"]', fullscreen: '[data-plyr="fullscreen"]' }, + volume: { + input: '[data-plyr="volume"]', + display: '.plyr__volume--display' + }, progress: { container: '.plyr__progress', buffer: '.plyr__progress--buffer', @@ -332,7 +336,7 @@ // Remove an element function _remove(element) { - if(!element) { + if (!element) { return; } element.parentNode.removeChild(element); @@ -393,58 +397,40 @@ 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) { + function _on(element, events, callback, useCapture) { if (element) { - _toggleListener(element, events, callback, true); + _toggleListener(element, events, callback, true, useCapture); } } // Unbind event - function _off(element, events, callback) { + function _off(element, events, callback, useCapture) { if (element) { - _toggleListener(element, events, callback, false); + _toggleListener(element, events, callback, false, useCapture); } } // Bind along with custom handler - function _proxyListener(element, eventName, userListener, defaultListener) { + function _proxyListener(element, eventName, userListener, defaultListener, useCapture) { _on(element, eventName, function(event) { - if(userListener) { + if (userListener) { userListener.apply(element, [event]); } defaultListener.apply(element, [event]); - }); + }, useCapture); } // Toggle event listener - function _toggleListener(element, events, callback, toggle) { + function _toggleListener(element, events, callback, toggle, useCapture) { var eventList = events.split(' '); + // Whether the listener is a capturing listener or not + // Default to false + if (typeof useCapture !== 'boolean') { + useCapture = false; + } + // If a nodelist is passed, call itself on each node if (element instanceof NodeList) { for (var x = 0; x < element.length; x++) { @@ -457,14 +443,14 @@ // If a single node is passed, bind the event listener for (var i = 0; i < eventList.length; i++) { - element[toggle ? 'addEventListener' : 'removeEventListener'](eventList[i], callback, false); + element[toggle ? 'addEventListener' : 'removeEventListener'](eventList[i], callback, useCapture); } } // Trigger event function _triggerEvent(element, eventName, properties) { // Bail if no element - if(!element || !eventName) { + if (!element || !eventName) { return; } @@ -479,7 +465,7 @@ // http://www.ssbbartgroup.com/blog/how-not-to-misuse-aria-states-properties-and-roles function _toggleState(target, state) { // Bail if no target - if(!target) { + if (!target) { return; } @@ -505,15 +491,15 @@ // Removed call to arguments.callee (used explicit function name instead) function _extend() { // Get arguments - var objects = arguments; + var objects = arguments; // Bail if nothing to merge - if(!objects.length) { + if (!objects.length) { return; } // Return first if specified but nothing to merge - if(objects.lenth == 1) { + if (objects.lenth == 1) { return objects[0]; } @@ -614,15 +600,15 @@ function _storage() { var storage = { supported: (function() { - if(!('localStorage' in window)) { - return false; - } + if (!('localStorage' in window)) { + return false; + } - // Try to use it (it might be disabled, e.g. user is in private/porn mode) + // Try to use it (it might be disabled, e.g. user is in private/porn mode) // see: https://github.com/Selz/plyr/issues/131 - try { + try { // Add test item - window.localStorage.setItem('___test', 'OK'); + window.localStorage.setItem('___test', 'OK'); // Get the test item var result = window.localStorage.getItem('___test'); @@ -632,12 +618,12 @@ // Check if value matches return (result === 'OK'); - } - catch (e) { - return false; - } + } + catch (e) { + return false; + } - return false; + return false; })() }; return storage; @@ -662,13 +648,14 @@ // Build the default HTML function _buildControls() { // Create html array - var html = []; + var html = [], + iconPath = config.iconUrl + '#' + config.iconPrefix; // 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>', + '<svg><use xlink:href="' + iconPath + '-play" /></svg>', '<span class="plyr__sr-only">' + config.i18n.play + '</span>', '</button>' ); @@ -680,7 +667,7 @@ if (_inArray(config.controls, 'restart')) { html.push( '<button type="button" data-plyr="restart">', - '<svg><use xlink:href="#' + config.iconPrefix + '-restart" /></svg>', + '<svg><use xlink:href="' + iconPath + '-restart" /></svg>', '<span class="plyr__sr-only">' + config.i18n.restart + '</span>', '</button>' ); @@ -690,7 +677,7 @@ if (_inArray(config.controls, 'rewind')) { html.push( '<button type="button" data-plyr="rewind">', - '<svg><use xlink:href="#' + config.iconPrefix + '-rewind" /></svg>', + '<svg><use xlink:href="' + iconPath + '-rewind" /></svg>', '<span class="plyr__sr-only">' + config.i18n.rewind + '</span>', '</button>' ); @@ -701,11 +688,11 @@ if (_inArray(config.controls, 'play')) { html.push( '<button type="button" data-plyr="play">', - '<svg><use xlink:href="#' + config.iconPrefix + '-play" /></svg>', + '<svg><use xlink:href="' + iconPath + '-play" /></svg>', '<span class="plyr__sr-only">' + config.i18n.play + '</span>', '</button>', '<button type="button" data-plyr="pause">', - '<svg><use xlink:href="#' + config.iconPrefix + '-pause" /></svg>', + '<svg><use xlink:href="' + iconPath + '-pause" /></svg>', '<span class="plyr__sr-only">' + config.i18n.pause + '</span>', '</button>' ); @@ -715,7 +702,7 @@ if (_inArray(config.controls, 'fast-forward')) { html.push( '<button type="button" data-plyr="fast-forward">', - '<svg><use xlink:href="#' + config.iconPrefix + '-fast-forward" /></svg>', + '<svg><use xlink:href="' + iconPath + '-fast-forward" /></svg>', '<span class="plyr__sr-only">' + config.i18n.forward + '</span>', '</button>' ); @@ -727,9 +714,7 @@ 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--played" max="100" value="0" role="presentation"></progress>', '<progress class="plyr__progress--buffer" max="100" value="0">', '<span>0</span>% ' + config.i18n.buffered, '</progress>'); @@ -767,8 +752,8 @@ if (_inArray(config.controls, 'mute')) { html.push( '<button type="button" data-plyr="mute">', - '<svg class="icon--muted"><use xlink:href="#' + config.iconPrefix + '-muted" /></svg>', - '<svg><use xlink:href="#' + config.iconPrefix + '-volume" /></svg>', + '<svg class="icon--muted"><use xlink:href="' + iconPath + '-muted" /></svg>', + '<svg><use xlink:href="' + iconPath + '-volume" /></svg>', '<span class="plyr__sr-only">' + config.i18n.toggleMute + '</span>', '</button>' ); @@ -777,8 +762,11 @@ // Volume range control if (_inArray(config.controls, 'volume')) { html.push( - '<label for="volume{id}" class="plyr__sr-only">' + config.i18n.volume + '</label>', - '<input id="volume{id}" class="plyr__volume" type="range" min="0" max="10" value="5" data-plyr="volume">' + '<span class="plyr__volume">', + '<label for="volume{id}" class="plyr__sr-only">' + config.i18n.volume + '</label>', + '<input id="volume{id}" class="plyr__volume--input" type="range" min="0" max="10" value="5" data-plyr="volume">', + '<progress class="plyr__volume--display" max="10" value="0" role="presentation"></progress>', + '</span>' ); } @@ -786,8 +774,8 @@ if (_inArray(config.controls, 'captions')) { html.push( '<button type="button" data-plyr="captions">', - '<svg class="icon--captions-on"><use xlink:href="#' + config.iconPrefix + '-captions-on" /></svg>', - '<svg><use xlink:href="#' + config.iconPrefix + '-captions-off" /></svg>', + '<svg class="icon--captions-on"><use xlink:href="' + iconPath + '-captions-on" /></svg>', + '<svg><use xlink:href="' + iconPath+ '-captions-off" /></svg>', '<span class="plyr__sr-only">' + config.i18n.toggleCaptions + '</span>', '</button>' ); @@ -797,8 +785,8 @@ if (_inArray(config.controls, 'fullscreen')) { html.push( '<button type="button" data-plyr="fullscreen">', - '<svg class="icon--exit-fullscreen"><use xlink:href="#' + config.iconPrefix + '-exit-fullscreen" /></svg>', - '<svg><use xlink:href="#' + config.iconPrefix + '-enter-fullscreen" /></svg>', + '<svg class="icon--exit-fullscreen"><use xlink:href="' + iconPath + '-exit-fullscreen" /></svg>', + '<svg><use xlink:href="' + iconPath + '-enter-fullscreen" /></svg>', '<span class="plyr__sr-only">' + config.i18n.toggleFullscreen + '</span>', '</button>' ); @@ -958,7 +946,7 @@ index = 0; // Incase caption numbers are added - if(parts[index].indexOf(":") === -1) { + if (parts[index].indexOf(":") === -1) { index = 1; } @@ -993,12 +981,12 @@ container.innerHTML = ''; // Default to empty - if(typeof caption === 'undefined') { + if (typeof caption === 'undefined') { caption = ''; } // Set the span content - if(typeof caption === 'string') { + if (typeof caption === 'string') { content.innerHTML = caption.trim(); } else { @@ -1185,7 +1173,7 @@ if (config.selectors.controls.container !== null) { container = config.selectors.controls.container; - if(typeof selector === 'string') { + if (typeof selector === 'string') { container = document.querySelector(container); } } @@ -1227,10 +1215,8 @@ plyr.buttons.fullscreen = _getElement(config.selectors.buttons.fullscreen); // Inputs - plyr.buttons.volume = _getElement(config.selectors.buttons.volume); plyr.buttons.mute = _getElement(config.selectors.buttons.mute); plyr.buttons.captions = _getElement(config.selectors.buttons.captions); - plyr.checkboxes = _getElements('[type="checkbox"]'); // Progress plyr.progress = {}; @@ -1242,15 +1228,15 @@ plyr.progress.buffer.text = plyr.progress.buffer.bar && plyr.progress.buffer.bar.getElementsByTagName('span')[0]; // Progress - Played - plyr.progress.played = {}; - plyr.progress.played.bar = _getElement(config.selectors.progress.played); - plyr.progress.played.text = plyr.progress.played.bar && plyr.progress.played.bar.getElementsByTagName('span')[0]; + plyr.progress.played = _getElement(config.selectors.progress.played); // Seek tooltip - plyr.progress.tooltip = plyr.progress.container && plyr.progress.container.querySelector('.' + config.classes.tooltip); + plyr.progress.tooltip = plyr.progress.container && plyr.progress.container.querySelector('.' + config.classes.tooltip); // Volume - plyr.volume = _getElement(config.selectors.buttons.volume); + plyr.volume = {}; + plyr.volume.input = _getElement(config.selectors.volume.input); + plyr.volume.display = _getElement(config.selectors.volume.display); // Timing plyr.duration = _getElement(config.selectors.duration); @@ -1276,7 +1262,7 @@ // Toggle native controls function _toggleNativeControls(toggle) { - if(toggle) { + if (toggle) { plyr.media.setAttribute('controls', ''); } else { @@ -1421,7 +1407,7 @@ }); // 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); plyr.media.appendChild(container); } @@ -1674,7 +1660,7 @@ plyr.media.buffered = data.percent; _triggerEvent(plyr.media, 'progress'); - if(parseInt(data.percent) === 1) { + if (parseInt(data.percent) === 1) { // Trigger event _triggerEvent(plyr.media, 'canplaythrough'); } @@ -1755,7 +1741,7 @@ plyr.media.buffered = data.loadProgress; _triggerEvent(plyr.media, 'progress'); - if(parseInt(data.loadProgress) === 1) { + if (parseInt(data.loadProgress) === 1) { // Trigger event _triggerEvent(plyr.media, 'canplaythrough'); } @@ -1775,14 +1761,14 @@ // Play media function _play() { - if('play' in plyr.media) { + if ('play' in plyr.media) { plyr.media.play(); } } // Pause media function _pause() { - if('pause' in plyr.media) { + if ('pause' in plyr.media) { plyr.media.pause(); } } @@ -1847,6 +1833,11 @@ targetTime = duration; } + // Update progress + if (plyr.progress && plyr.progress.played) { + plyr.progress.played.value = ((100 / duration) * targetTime); + } + // Set the current time // Try/catch incase the media isn't set and we're calling seek() from source() and IE moans try { @@ -1855,7 +1846,7 @@ catch(e) {} // Embeds - if(_inArray(config.types.embed, plyr.type)) { + if (_inArray(config.types.embed, plyr.type)) { // YouTube switch(plyr.type) { case 'youtube': @@ -1868,7 +1859,7 @@ break; case 'soundcloud': - plyr.embed.seekTo(targetTime*1000); + plyr.embed.seekTo(targetTime * 1000); break; } @@ -1949,7 +1940,7 @@ _toggleClass(plyr.container, config.classes.fullscreen.active, plyr.isFullscreen); // Trap focus - if(plyr.isFullscreen) { + if (plyr.isFullscreen) { plyr.container.setAttribute('tabindex', '-1'); } else { @@ -1987,8 +1978,13 @@ // Set mute on the player plyr.media.muted = muted; + // If volume is 0 after unmuting, set to default + if (plyr.media.volume === 0) { + _setVolume(config.volume); + } + // Embeds - if(_inArray(config.types.embed, plyr.type)) { + if (_inArray(config.types.embed, plyr.type)) { // YouTube switch(plyr.type) { case 'youtube': @@ -2025,7 +2021,7 @@ } // Use config if all else fails - if(volume === null || isNaN(volume)) { + if (volume === null || isNaN(volume)) { volume = config.volume; } @@ -2041,11 +2037,13 @@ // Set the player volume plyr.media.volume = parseFloat(volume / 10); - // Store in config - config.volume = volume; + // Set the display + if (plyr.volume.display) { + plyr.volume.display.value = volume; + } // Embeds - if(_inArray(config.types.embed, plyr.type)) { + if (_inArray(config.types.embed, plyr.type)) { // YouTube switch(plyr.type) { case 'youtube': @@ -2077,8 +2075,13 @@ var volume = plyr.media.muted ? 0 : (plyr.media.volume * 10); // Update the <input type="range"> if present - if (plyr.supported.full && plyr.volume) { - plyr.volume.value = volume; + if (plyr.supported.full) { + if (plyr.volume.input) { + plyr.volume.input.value = volume; + } + if (plyr.volume.display) { + plyr.volume.display.value = volume; + } } // Store the volume in storage @@ -2135,8 +2138,8 @@ // Update <progress> elements function _updateProgress(event) { - var progress = plyr.progress.played.bar, - text = plyr.progress.played.text, + var progress = plyr.progress.played, + text = false, value = 0, duration = _getDuration(); @@ -2154,32 +2157,27 @@ break; - // Events from seek range - case 'change': - case 'input': - value = event.target.value; - break; - - // Check buffer status case 'playing': case 'progress': progress = plyr.progress.buffer.bar; text = plyr.progress.buffer.text; value = (function() { - var buffered = plyr.media.buffered; + var buffered = plyr.media.buffered; - // HTML5 - if (buffered && buffered.length) { - return _getPercentage(buffered.end(0), duration); - } - // YouTube returns between 0 and 1 - else if (typeof buffered === 'number') { - return (buffered * 100); - } + // HTML5 + if (buffered && buffered.length) { + return _getPercentage(buffered.end(0), duration); + } + // YouTube returns between 0 and 1 + else if (typeof buffered === 'number') { + return (buffered * 100); + } + + return 0; + })(); - return 0; - })(); + break; } } @@ -2248,7 +2246,7 @@ _updateTimeDisplay(plyr.media.currentTime, plyr.currentTime); // Ignore updates while seeking - if(event && event.type == 'timeupdate' && plyr.media.seeking) { + if (event && event.type == 'timeupdate' && plyr.media.seeking) { return; } @@ -2259,7 +2257,7 @@ // Update hover tooltip for seeking function _updateSeekTooltip(event) { // Bail if setting not true - if (!config.tooltips.seek || plyr.browser.touch) { + if (!config.tooltips.seek || plyr.browser.touch || !plyr.progress.container) { return; } @@ -2270,7 +2268,7 @@ // Determine percentage, if already visible if (!event) { - if(_hasClass(plyr.progress.tooltip, visible)) { + if (_hasClass(plyr.progress.tooltip, visible)) { percent = plyr.progress.tooltip.style.left.replace('%', ''); } else { @@ -2297,7 +2295,7 @@ // Show/hide the tooltip // 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')); } } @@ -2307,16 +2305,28 @@ if (!config.hideControls || plyr.type === 'audio') { return; } - var delay = false, + var delay = 0, isEnterFullscreen = false, show = toggle; // Default to false if no boolean - if(typeof toggle !== "boolean") { - if(toggle && toggle.type) { - delay = (toggle.type === 'mousemove'); + if (typeof toggle !== "boolean") { + if (toggle && toggle.type) { + // Is the enter fullscreen event isEnterFullscreen = (toggle.type === 'enterfullscreen'); - show = _inArray(['mousemove','mouseenter'], toggle.type); + + // Whether to show controls + show = _inArray(['mousemove', 'mouseenter', 'focus'], toggle.type); + + // Delay hiding on mousemove events + if (toggle.type === 'mousemove') { + delay = 2000; + } + + // Delay a little more for keyboard users + if (toggle.type === 'focus') { + delay = 3000; + } } else { show = false; @@ -2327,33 +2337,33 @@ window.clearTimeout(plyr.timers.hover); // 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); // Always show controls when paused - if(plyr.media.paused) { + if (plyr.media.paused) { return; } } // 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) { + if (!show || !plyr.media.paused) { plyr.timers.hover = window.setTimeout(function() { - // If the mouse is over the controls, bail - if(plyr.controls.active && !isEnterFullscreen) { + // If the mouse is over the controls (and not entering fullscreen), bail + if (plyr.controls.active && !isEnterFullscreen) { return; } _toggleClass(plyr.container, config.classes.hideControls, true); - }, delay ? 2000 : 0); + }, delay); } } // Add common function to retrieve media source function _source(source) { // If not null or undefined, parse it - if(typeof source !== 'undefined') { + if (typeof source !== 'undefined') { _updateSource(source); return; } @@ -2397,9 +2407,12 @@ _pause(); // Set seek input to 0 - if(plyr.buttons.seek) { + if (plyr.buttons && plyr.buttons.seek) { plyr.buttons.seek.value = 0; } + if (plyr.progress && plyr.progress.played) { + plyr.progress.played.value = 0; + } // Clean up YouTube stuff if (plyr.type === 'youtube') { @@ -2429,10 +2442,10 @@ plyr.type = source.type; // Get child type for video (it might be an embed) - if(plyr.type === 'video') { + if (plyr.type === 'video') { 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; } } @@ -2552,14 +2565,22 @@ var trigger = plyr.buttons[play ? 'play' : 'pause'], target = plyr.buttons[play ? 'pause' : 'play']; + // Get the last play button to account for the large play button + if (target && target.length > 1) { + target = target[target.length - 1]; + } + else { + target = target[0]; + } + // Setup focus and tab focus - if(target) { + if (target) { var hadTabFocus = _hasClass(trigger, config.classes.tabFocus); setTimeout(function() { target.focus(); - if(hadTabFocus) { + if (hadTabFocus) { _toggleClass(trigger, config.classes.tabFocus, false); _toggleClass(target, config.classes.tabFocus, true); } @@ -2570,6 +2591,7 @@ // Detect tab focus function checkFocus() { var focused = document.activeElement; + if (!focused || focused == document.body) { focused = null; } @@ -2579,7 +2601,14 @@ for (var button in plyr.buttons) { var element = plyr.buttons[button]; - _toggleClass(element, config.classes.tabFocus, (element === focused)); + if (element instanceof NodeList) { + for (var i = 0; i < element.length; i++) { + _toggleClass(element[i], config.classes.tabFocus, (element[i] === focused)); + } + } + else { + _toggleClass(element, config.classes.tabFocus, (element === focused)); + } } } _on(window, 'keyup', function(event) { @@ -2619,8 +2648,8 @@ _proxyListener(plyr.buttons.seek, inputEvent, config.listeners.seek, _seek); // Set volume - _proxyListener(plyr.volume, inputEvent, config.listeners.volume, function() { - _setVolume(plyr.volume.value); + _proxyListener(plyr.volume.input, inputEvent, config.listeners.volume, function() { + _setVolume(plyr.volume.input.value); }); // Mute @@ -2642,14 +2671,16 @@ // 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); + // Toggle controls on mouse events and entering fullscreen + _on(plyr.container, 'mouseenter mouseleave mousemove enterfullscreen', _toggleControls); // 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'); }); + + // Focus in/out on controls + _on(plyr.controls, 'focus blur', _toggleControls, true); } } @@ -2688,11 +2719,20 @@ _on(plyr.media, 'waiting canplay seeked', _checkLoading); // Click video - if (config.clickToPlay) { + if (config.clickToPlay && plyr.type !== 'audio') { + // Re-fetch the wrapper + var wrapper = _getElement('.' + config.classes.videoWrapper); + + // Bail if there's no wrapper (this should never happen) + if (!wrapper) { + return; + } + // Set cursor - plyr.videoContainer.style.cursor = "pointer"; + wrapper.style.cursor = "pointer"; - _on(plyr.media, 'click', function() { + // On click play, pause ore restart + _on(wrapper, 'click', function() { if (plyr.media.paused) { _play(); } @@ -2715,7 +2755,7 @@ // Cancel current network requests // See https://github.com/Selz/plyr/issues/174 function _cancelRequests() { - if(!_inArray(config.types.html5, plyr.type)) { + if (!_inArray(config.types.html5, plyr.type)) { return; } @@ -2793,7 +2833,17 @@ plyr.browser = _browserSniff(); // Get the media element - plyr.media = plyr.container.querySelectorAll('audio, video, div')[0]; + plyr.media = plyr.container.querySelectorAll('audio, video')[0]; + + // Get the div placeholder for YouTube and Vimeo + if (!plyr.media) { + plyr.media = plyr.container.querySelectorAll('div')[0]; + } + + // Bail if nothing to setup + if (!plyr.media) { + return; + } // Get original classname plyr.originalClassName = plyr.container.className; @@ -2868,6 +2918,9 @@ // Remove controls _remove(_getElement(config.selectors.controls.wrapper)); + // Remove large play + _remove(_getElement(config.selectors.buttons.play)); + // Restore native controls _toggleNativeControls(true); @@ -3031,7 +3084,7 @@ var config = _extend(defaults, options, JSON.parse(element.getAttribute("data-plyr"))); // Bail if not enabled - if(!config.enabled) { + if (!config.enabled) { return; } diff --git a/src/less/mixins.less b/src/less/mixins.less new file mode 100644 index 00000000..25f43761 --- /dev/null +++ b/src/less/mixins.less @@ -0,0 +1,29 @@ +// ========================================================================== +// Plyr mixins +// https://github.com/selz/plyr +// ========================================================================== + +// <input type="range"> styling +.plyr-range-track() { + height: @plyr-range-track-height; + background: transparent; + border: 0; + border-radius: (@plyr-range-track-height / 2); + user-select: none; +} +.plyr-range-thumb() { + position: relative; + height: @plyr-range-thumb-height; + width: @plyr-range-thumb-width; + background: @plyr-range-thumb-bg; + border: @plyr-range-thumb-border; + border-radius: 100%; + transition: background .2s ease, border .2s ease, transform .2s ease; + box-shadow: @plyr-range-thumb-shadow; + box-sizing: border-box; +} +.plyr-range-thumb-active() { + background: @plyr-range-thumb-active-bg; + border-color: @plyr-range-thumb-active-border-color; + transform: scale(@plyr-range-thumb-active-scale); +}
\ No newline at end of file diff --git a/src/less/plyr.less b/src/less/plyr.less index 99df1115..c2b5e55b 100644 --- a/src/less/plyr.less +++ b/src/less/plyr.less @@ -3,65 +3,8 @@ // https://github.com/selz/plyr // ========================================================================== -// Variables -// ------------------------------- - -// Colors -@plyr-color-main: #63B4E1; - -// Font sizes -@plyr-font-size-small: 14px; -@plyr-font-size-base: 16px; - -// Captions -@plyr-font-size-captions-base: ceil(@plyr-font-size-base * 1.25); -@plyr-font-size-captions-medium: ceil(@plyr-font-size-base * 1.5); -@plyr-font-size-captions-large: (@plyr-font-size-base * 2); - -// Controls -// #C6D6DB -@plyr-control-spacing: 10px; -@plyr-video-controls-bg: #000; -@plyr-video-control-color: #fff; -@plyr-video-control-color-hover: #fff; -@plyr-video-control-bg-hover: @plyr-color-main; -@plyr-audio-controls-bg: transparent; -@plyr-audio-control-color: #565D64; -@plyr-audio-control-color-hover: #fff; -@plyr-audio-control-bg-hover: @plyr-color-main; - -// Tooltips -@plyr-tooltip-bg: @plyr-video-controls-bg; -@plyr-tooltip-border-color: fade(darken(@plyr-video-controls-bg, 75%), 10%); -@plyr-tooltip-arrow-border-color: fade(darken(@plyr-video-controls-bg, 75%), 20%); -@plyr-tooltip-border-width: 1px; -@plyr-tooltip-shadow: 0 0 5px @plyr-tooltip-border-color, 0 0 0 @plyr-tooltip-border-width @plyr-tooltip-border-color; -@plyr-tooltip-color: @plyr-video-control-color; -@plyr-tooltip-padding: (@plyr-control-spacing / 2); -@plyr-tooltip-arrow-size: 4px; -@plyr-tooltip-radius: 3px; - -// Progress -@plyr-progress-bg: fade(@plyr-video-control-color, 25%); -@plyr-progress-playing-bg: @plyr-color-main; -@plyr-progress-buffered-bg: fade(@plyr-video-control-color, 25%); -@plyr-progress-loading-size: 25px; -@plyr-progress-loading-bg: fade(#000, 15%); - -// Range sliders -@range-track-height: 8px; -@range-track-bg: fade(#fff, 25%); -@range-thumb-height: floor(@range-track-height * 2); -@range-thumb-width: floor(@range-track-height * 2); -@range-thumb-bg: #fff; -@range-thumb-border: 2px solid transparent; -@range-thumb-active-border-color: #fff; -@range-thumb-active-bg: @plyr-video-control-bg-hover; -@range-thumb-shadow: 0 1px 1px fade(@plyr-video-controls-bg, 15%); - -// Breakpoints -@plyr-bp-control-split: 560px; // When controls split into left/right -@plyr-bp-captions-large: 768px; // When captions jump to the larger font size +@import "variables"; +@import "mixins"; // Animation // --------------------------------------- @@ -69,40 +12,13 @@ to { background-position: @plyr-progress-loading-size 0; } } -// Mixins -// ------------------------------- -// <input type="range"> styling -.range-track() { - height: @range-track-height; - background: @range-track-bg; - border: 0; - border-radius: (@range-track-height / 2); - user-select: none; -} -.range-thumb() { - position: relative; - height: @range-thumb-height; - width: @range-thumb-width; - background: @range-thumb-bg; - border: @range-thumb-border; - border-radius: 100%; - transition: background .2s ease, border .2s ease, transform .2s ease; - box-shadow: @range-thumb-shadow; - box-sizing: border-box; -} -.range-thumb-active() { - background: @range-thumb-active-bg; - border-color: @range-thumb-active-border-color; - transform: scale(1.25); -} - // Styles // ------------------------------- // Base .plyr { position: relative; max-width: 100%; - min-width: 290px; + min-width: 200px; font-family: Avenir, "Avenir Next", "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif; // border-box everything @@ -132,7 +48,7 @@ // Specificity is for bootstrap compatibility input[type='range'] { display: block; - height: @range-thumb-height; + height: (@plyr-range-thumb-height * @plyr-range-thumb-active-scale); width: 100%; margin: 0; padding: 0; @@ -143,22 +59,22 @@ border: none; background: transparent; - // Webkit + // WebKit &::-webkit-slider-runnable-track { - .range-track(); + .plyr-range-track(); } &::-webkit-slider-thumb { -webkit-appearance: none; - margin-top: -((@range-thumb-height - @range-track-height) / 2); - .range-thumb(); + margin-top: -((@plyr-range-thumb-height - @plyr-range-track-height) / 2); + .plyr-range-thumb(); } // Mozilla &::-moz-range-track { - .range-track(); + .plyr-range-track(); } &::-moz-range-thumb { - .range-thumb(); + .plyr-range-thumb(); } &::-moz-focus-outer { border: 0; @@ -166,22 +82,23 @@ // Microsoft &::-ms-track { - height: @range-track-height; + height: @plyr-range-track-height; background: transparent; border: 0; color: transparent; } - &::-ms-fill-lower, &::-ms-fill-upper { - .range-track(); + .plyr-range-track(); + } + &::-ms-fill-lower { + .plyr-range-track(); + background: @plyr-range-selected-bg; } &::-ms-thumb { - .range-thumb(); - + .plyr-range-thumb(); // For some reason, Edge uses the -webkit margin above margin-top: 0; } - &::-ms-tooltip { display: none; } @@ -194,25 +111,34 @@ border: 0; } &.tab-focus:focus { - outline: 1px dotted fade(@plyr-video-control-color, 50%); outline-offset: 3px; } // Pressed styles &:active { &::-webkit-slider-thumb { - .range-thumb-active(); + .plyr-range-thumb-active(); } &::-moz-range-thumb { - .range-thumb-active(); + .plyr-range-thumb-active(); } &::-ms-thumb { - .range-thumb-active(); + .plyr-range-thumb-active(); } } } } +// Video range inputs +.plyr--video input[type='range'].tab-focus:focus { + outline: 1px dotted fade(@plyr-video-control-color, 50%); +} + +// Audio range inputs +.plyr--audio input[type='range'].tab-focus:focus { + outline: 1px dotted fade(@plyr-audio-control-color, 50%); +} + // Screen reader only elements .plyr__sr-only { position: absolute !important; @@ -229,6 +155,9 @@ position: relative; background: #000; border-radius: inherit; + + // Cleaner radius, also forces iframe radius + -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); } // Container for embeds @@ -277,6 +206,7 @@ font-size: @plyr-font-size-captions-base; text-align: center; font-weight: 400; + -webkit-font-smoothing: subpixel-antialiased; span { border-radius: 2px; @@ -287,7 +217,7 @@ display: none; } - @media (min-width: @plyr-bp-captions-large) { + @media (min-width: @plyr-bp-screen-md) { font-size: @plyr-font-size-captions-medium; } } @@ -300,12 +230,6 @@ // Controls // -------------------------------------------------------------- -// Shared -.plyr__controls, -.plyr__play-large { - transition: visibility .3s ease, opacity .3s ease; -} - // Playback controls .plyr__controls { display: flex; @@ -314,17 +238,19 @@ line-height: 1; text-align: center; + transition: opacity .3s ease; + // Spacing > button, .plyr__progress, .plyr__time { - margin-left: @plyr-control-spacing; + margin-left: (@plyr-control-spacing / 2); &:first-child { margin-left: 0; } } - .plyr__volume[type="range"] { + .plyr__volume { margin-left: (@plyr-control-spacing / 2); } [data-plyr="pause"] { @@ -337,7 +263,7 @@ display: inline-block; flex-shrink: 0; vertical-align: middle; - padding: (@plyr-control-spacing / 2) @plyr-control-spacing; + padding: (@plyr-control-spacing / 2); border: 0; background: transparent; border-radius: 3px; @@ -364,6 +290,21 @@ .icon--captions-on { display: none; } + + @media (min-width: @plyr-bp-screen-sm) { + > button, + .plyr__progress, + .plyr__time { + margin-left: @plyr-control-spacing; + } + button { + padding: (@plyr-control-spacing / 2) @plyr-control-spacing; + } + } +} +// Hide controls +.plyr--hide-controls .plyr__controls { + opacity: 0; } // Video controls @@ -372,7 +313,7 @@ left: 0; right: 0; bottom: 0; - padding: (@plyr-control-spacing * 5) (@plyr-control-spacing * 1.5) @plyr-control-spacing; + padding: (@plyr-control-spacing * 5) @plyr-control-spacing @plyr-control-spacing; background: linear-gradient(fade(@plyr-video-controls-bg, 0%), fade(@plyr-video-controls-bg, 50%)); border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; @@ -386,11 +327,20 @@ color: @plyr-video-control-color-hover; } } + + @media (min-width: @plyr-bp-screen-sm) { + padding-left: (@plyr-control-spacing * 1.5); + padding-right: (@plyr-control-spacing * 1.5); + } } + +// Audio controls .plyr--audio .plyr__controls { padding: @plyr-control-spacing; border-radius: inherit; background: @plyr-audio-controls-bg; + border: @plyr-audio-controls-border; + box-shadow: @plyr-audio-controls-box-shadow; color: @plyr-audio-control-color; button { @@ -403,7 +353,7 @@ } } -// Large play button +// Large play button (video only) .plyr__play-large { position: absolute; top: 50%; @@ -411,9 +361,11 @@ transform: translate(-50%, -50%); padding: @plyr-control-spacing; background: @plyr-video-control-bg-hover; - border: 4px solid @plyr-video-control-color; + border: 4px solid currentColor; border-radius: 100%; + box-shadow: 0 1px 1px fade(@plyr-video-controls-bg, 15%); color: @plyr-video-control-color; + transition: opacity .3s ease, visibility .3s ease; svg { position: relative; @@ -431,6 +383,10 @@ .plyr--audio .plyr__play-large { display: none; } +.plyr--playing .plyr__play-large { + opacity: 0; + visibility: hidden; +} // States .plyr__controls [data-plyr='pause'], @@ -441,13 +397,6 @@ display: inline-block; } -// Hide controls -.plyr--hide-controls .plyr__controls, -.plyr--playing .plyr__play-large { - visibility: hidden; - opacity: 0; -} - // Change icons on state change .plyr--fullscreen-active .icon--exit-fullscreen, .plyr--muted .plyr__controls .icon--muted, @@ -472,7 +421,6 @@ // Tooltips // -------------------------------------------------------------- .plyr__tooltip { - visibility: hidden; position: absolute; z-index: 2; bottom: 100%; @@ -488,10 +436,11 @@ color: @plyr-tooltip-color; font-size: @plyr-font-size-small; line-height: 1.3; + -webkit-font-smoothing: subpixel-antialiased; transform: translate(-50%, 10px) scale(.8); transform-origin: 50% 100%; - transition: transform .2s .1s ease, opacity .2s .1s ease, visibility .3s ease; + transition: transform .2s .1s ease, opacity .2s .1s ease; // Arrows &::before { @@ -514,7 +463,6 @@ .plyr button:hover .plyr__tooltip, .plyr button.tab-focus:focus .plyr__tooltip, .plyr__tooltip--visible { - visibility: visible; opacity: 1; transform: translate(-50%, 0) scale(1); } @@ -539,7 +487,6 @@ &::-moz-range-track { background: transparent; } - &::-ms-fill-lower, &::-ms-fill-upper { background: transparent; } @@ -552,13 +499,14 @@ } .plyr__progress--buffer[value], -.plyr__progress--played[value] { +.plyr__progress--played[value], +.plyr__volume--display[value] { position: absolute; left: 0; top: 50%; width: 100%; - height: @range-track-height; - margin: -(@range-track-height / 2) 0 0; + height: @plyr-range-track-height; + margin: -(@plyr-range-track-height / 2) 0 0; padding: 0; vertical-align: top; appearance: none; @@ -571,42 +519,41 @@ &::-webkit-progress-value { background: currentColor; border-radius: 100px; - min-width: @range-track-height; + min-width: @plyr-range-track-height; } &::-moz-progress-bar { background: currentColor; border-radius: 100px; - min-width: @range-track-height; + min-width: @plyr-range-track-height; } &::-ms-fill { border-radius: 100px; } } -.plyr__progress--played[value] { +.plyr__progress--played[value], +.plyr__volume--display[value] { z-index: 1; - color: @plyr-progress-playing-bg; + color: @plyr-range-selected-bg; background: transparent; + transition: none; &::-webkit-progress-value { - min-width: @range-track-height; + min-width: @plyr-range-track-height; + max-width: 99%; border-top-right-radius: 0; border-bottom-right-radius: 0; } &::-moz-progress-bar { - min-width: @range-track-height; + min-width: @plyr-range-track-height; + max-width: 99%; border-top-right-radius: 0; border-bottom-right-radius: 0; } &::-ms-fill { - min-width: @range-track-height; - border-top-right-radius: 0; - border-bottom-right-radius: 0; + display: none; } } .plyr__progress--buffer[value] { - color: @plyr-progress-buffered-bg; - background: @range-track-bg; - &::-webkit-progress-value { transition: width .2s ease; } @@ -617,13 +564,26 @@ transition: width .2s ease; } } +.plyr--video .plyr__progress--buffer[value], +.plyr--video .plyr__volume--display[value] { + background: @plyr-video-range-track-bg; +} +.plyr--video .plyr__progress--buffer[value] { + color: @plyr-video-progress-buffered-bg; +} +.plyr--audio .plyr__progress--buffer[value], +.plyr--audio .plyr__volume--display[value] { + background: @plyr-audio-range-track-bg; +} +.plyr--audio .plyr__progress--buffer[value] { + color: @plyr-audio-progress-buffered-bg; +} // Loading state .plyr--loading .plyr__progress--buffer { animation: plyr-progress 1s linear infinite; background-size: @plyr-progress-loading-size @plyr-progress-loading-size; background-repeat: repeat-x; - background-color: @plyr-progress-buffered-bg; background-image: linear-gradient( -45deg, @plyr-progress-loading-bg 25%, @@ -635,6 +595,12 @@ transparent); color: transparent; } +.plyr--video.plyr--loading .plyr__progress--buffer { + background-color: @plyr-video-progress-buffered-bg; +} +.plyr--audio.plyr--loading .plyr__progress--buffer { + background-color: @plyr-audio-progress-buffered-bg; +} // Time // -------------------------------------------------------------- @@ -643,13 +609,13 @@ vertical-align: middle; font-size: @plyr-font-size-small; line-height: .95; + -webkit-font-smoothing: subpixel-antialiased; } - // Media duration hidden on small screens .plyr__time + .plyr__time { display: none; - @media (min-width: @plyr-bp-control-split) { + @media (min-width: @plyr-bp-screen-md) { display: inline-block; } @@ -662,23 +628,29 @@ // Volume // -------------------------------------------------------------- -// <input[type='range']> element -// Specificity is for bootstrap compatibility -.plyr__volume[type='range'] { - max-width: 100px; +.plyr .plyr__volume { + display: none; + position: relative; + + input[type="range"] { + position: relative; + z-index: 2; + } + @media (min-width: @plyr-bp-screen-sm) { + display: block; + max-width: 60px; + } + @media (min-width: @plyr-bp-screen-md) { + max-width: 100px; + } } // Hide sound controls on iOS // It's not supported to change volume using JavaScript: // https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html .plyr--is-ios .plyr__volume, -.plyr--is-ios [data-plyr='mute'], -.plyr--is-ios.plyr--audio .plyr__controls--right { - display: none; -} -// Center buttons so it looks less odd -.plyr--is-ios.plyr--audio .plyr__controls--left { - float: none; +.plyr--is-ios [data-plyr='mute'] { + display: none !important; } // Fullscreen @@ -694,6 +666,7 @@ width: 100%; z-index: 10000000; background: #000; + border-radius: 0; video { height: 100%; diff --git a/src/less/variables.less b/src/less/variables.less new file mode 100644 index 00000000..ea5c6b8e --- /dev/null +++ b/src/less/variables.less @@ -0,0 +1,66 @@ +// ========================================================================== +// Plyr variables +// https://github.com/selz/plyr +// ========================================================================== + +// Colors +@plyr-color-main: #3498db; + +// Font sizes +@plyr-font-size-small: 14px; +@plyr-font-size-base: 16px; + +// Captions +@plyr-font-size-captions-base: ceil(@plyr-font-size-base * 1.25); +@plyr-font-size-captions-medium: ceil(@plyr-font-size-base * 1.5); +@plyr-font-size-captions-large: (@plyr-font-size-base * 2); + +// Controls +@plyr-control-spacing: 10px; +@plyr-video-controls-bg: #000; +@plyr-video-control-color: #fff; +@plyr-video-control-color-hover: #fff; +@plyr-video-control-bg-hover: @plyr-color-main; +@plyr-audio-controls-bg: #fff; +@plyr-audio-controls-border: 1px solid #dbe3e8; +@plyr-audio-controls-box-shadow: 0 1px 1px fade(#000, 5%); +@plyr-audio-control-color: #565D64; +@plyr-audio-control-color-hover: #fff; +@plyr-audio-control-bg-hover: @plyr-color-main; + +// Tooltips +@plyr-tooltip-bg: @plyr-video-controls-bg; +@plyr-tooltip-border-color: fade(darken(@plyr-video-controls-bg, 75%), 10%); +@plyr-tooltip-arrow-border-color: fade(darken(@plyr-video-controls-bg, 75%), 20%); +@plyr-tooltip-border-width: 1px; +@plyr-tooltip-shadow: 0 0 5px @plyr-tooltip-border-color, 0 0 0 @plyr-tooltip-border-width @plyr-tooltip-border-color; +@plyr-tooltip-color: @plyr-video-control-color; +@plyr-tooltip-padding: (@plyr-control-spacing / 2); +@plyr-tooltip-arrow-size: 4px; +@plyr-tooltip-radius: 3px; + +// Progress +@plyr-progress-loading-size: 25px; +@plyr-progress-loading-bg: fade(#000, 15%); +@plyr-video-progress-bg: fade(#fff, 25%); +@plyr-video-progress-buffered-bg: @plyr-video-progress-bg; +@plyr-audio-progress-bg: fade(#C6D6DB, 66%); +@plyr-audio-progress-buffered-bg: @plyr-audio-progress-bg; + +// Range sliders +@plyr-range-track-height: 8px; +@plyr-range-thumb-height: floor(@plyr-range-track-height * 2); +@plyr-range-thumb-width: floor(@plyr-range-track-height * 2); +@plyr-range-thumb-bg: #fff; +@plyr-range-thumb-border: 2px solid transparent; +@plyr-range-thumb-shadow: 0 1px 1px fade(@plyr-video-controls-bg, 15%), 0 0 0 1px fade(#000, 15%); +@plyr-range-thumb-active-border-color: #fff; +@plyr-range-thumb-active-bg: @plyr-video-control-bg-hover; +@plyr-range-thumb-active-scale: 1.25; +@plyr-video-range-track-bg: @plyr-video-progress-buffered-bg; +@plyr-audio-range-track-bg: @plyr-audio-progress-buffered-bg; +@plyr-range-selected-bg: @plyr-color-main; + +// Breakpoints +@plyr-bp-screen-sm: 480px; +@plyr-bp-screen-md: 768px;
\ No newline at end of file diff --git a/src/sass/plyr.scss b/src/sass/plyr.scss deleted file mode 100644 index 8de9af6e..00000000 --- a/src/sass/plyr.scss +++ /dev/null @@ -1,719 +0,0 @@ -// ========================================================================== -// Plyr styles -// https://github.com/selz/plyr -// ========================================================================== - -// Variables -// ------------------------------- - -// Colors -$plyr-blue: #3498DB !default; -$plyr-gray-dark: #343F4A !default; -$plyr-gray: #565D64 !default; -$plyr-gray-light: #6B7D86 !default; -$plyr-gray-lighter: #CBD0D3 !default; -$plyr-off-white: #D6DADD !default; - -// Font sizes -$plyr-font-size-small: 14px !default; -$plyr-font-size-base: 16px !default; - -// Captions -$plyr-font-size-captions-base: ceil($plyr-font-size-base * 1.25) !default; -$plyr-font-size-captions-medium: ceil($plyr-font-size-base * 1.5) !default; -$plyr-font-size-captions-large: ($plyr-font-size-base * 2) !default; - -// Controls -$plyr-control-spacing: 10px !default; -$plyr-controls-bg: #fff !default; -$plyr-control-bg-hover: $plyr-blue !default; - -// Contrast -@if lightness($plyr-controls-bg) >= 65% { - $plyr-control-color: $plyr-gray-light !default; -} -@else { - $plyr-control-color: $plyr-gray-lighter !default; -} -@if lightness($plyr-control-bg-hover) >= 65% { - $plyr-control-color-hover: $plyr-gray !default; -} -@else { - $plyr-control-color-hover: #fff !default; -} - -// Tooltips -$plyr-tooltip-bg: $plyr-controls-bg !default; -$plyr-tooltip-border-color: transparentize(darken($plyr-controls-bg, 75%), .9) !default; -$plyr-tooltip-arrow-border-color: transparentize(darken($plyr-controls-bg, 75%), .8) !default; - -$plyr-tooltip-border-width: 1px; -$plyr-tooltip-shadow: 0 0 5px $plyr-tooltip-border-color, 0 0 0 $plyr-tooltip-border-width $plyr-tooltip-border-color; -$plyr-tooltip-color: $plyr-control-color !default; -$plyr-tooltip-padding: $plyr-control-spacing !default; -$plyr-tooltip-arrow-size: 6px !default; -$plyr-tooltip-radius: 3px !default; - -// Progress -$plyr-progress-bg: transparentize($plyr-gray, .8) !default; -$plyr-progress-playing-bg: $plyr-blue !default; -$plyr-progress-buffered-bg: transparentize($plyr-gray, .75) !default; -$plyr-progress-loading-size: 40px !default; -$plyr-progress-loading-bg: transparentize(#000, .85) !default; - -// Volume -$plyr-volume-track-height: 6px !default; -$plyr-volume-track-bg: darken($plyr-controls-bg, 10%) !default; -$plyr-volume-thumb-height: ($plyr-volume-track-height * 2) !default; -$plyr-volume-thumb-width: ($plyr-volume-track-height * 2) !default; -$plyr-volume-thumb-bg: $plyr-control-color !default; -$plyr-volume-thumb-bg-focus: $plyr-control-bg-hover !default; - -// Breakpoints -$plyr-bp-control-split: 560px !default; // When controls split into left/right -$plyr-bp-captions-large: 768px !default; // When captions jump to the larger font size - -// Animation -// --------------------------------------- -@keyframes plyr-progress { - to { background-position: $plyr-progress-loading-size 0; } -} - -// Font smoothing -@mixin font-smoothing($mode: on) -{ - @if ($mode == 'on') { - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - } - @else if ($mode == 'off') { - -moz-osx-font-smoothing: auto; - -webkit-font-smoothing: subpixel-antialiased; - } -} - -// <input type="range"> styling -@mixin volume-thumb() { - height: $plyr-volume-thumb-height; - width: $plyr-volume-thumb-width; - background: $plyr-volume-thumb-bg; - border: 0; - border-radius: 100%; - transition: background .3s ease; - cursor: ew-resize; -} -@mixin volume-track() { - height: $plyr-volume-track-height; - background: $plyr-volume-track-bg; - border: 0; - border-radius: ($plyr-volume-track-height / 2); -} -@mixin seek-thumb() { - background: transparent; - border: 0; - width: 1px; - height: $plyr-control-spacing; -} -@mixin seek-thumb-touch() { - width: ($plyr-control-spacing * 4); - transform: translateX(-50%); -} -@mixin seek-track() { - background: none; - border: 0; -} - -// Styles -// ------------------------------- -// Base -.plyr { - position: relative; - max-width: 100%; - min-width: 290px; - font-family: Avenir, "Avenir Next", "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif; - - // border-box everything - // http://paulirish.com/2012/box-sizing-border-box-ftw/ - &, - *, - *::after, - *::before { - box-sizing: border-box; - } - - // Fix 300ms delay - a, button, input, label { - touch-action: manipulation; - } - - // Screen reader only - &__sr-only { - position: absolute !important; - clip: rect(1px, 1px, 1px, 1px); - padding: 0 !important; - border: 0 !important; - height: 1px !important; - width: 1px !important; - overflow: hidden; - } - - // For video - &__video-wrapper { - position: relative; - } - video, - audio { - width: 100%; - height: auto; - vertical-align: middle; - } - - // Hide default captions - video::-webkit-media-text-track-container { - display: none; - } - - // For embeds - &__video-embed { - padding-bottom: 56.25%; /* 16:9 */ - height: 0; - overflow: hidden; - background: #000; - - iframe { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - border: 0; - user-select: none; - } - - // Vimeo hack - > div { - position: relative; - padding-bottom: 200%; - transform: translateY(-35.95%); - } - - // To allow mouse events to be captured if full support - &.plyr iframe { - pointer-events: none; - } - } - - // Captions - &__captions { - display: none; - position: absolute; - bottom: 0; - left: 0; - width: 100%; - padding: ($plyr-control-spacing * 2) ($plyr-control-spacing * 2) ($plyr-control-spacing * 3); - color: #fff; - font-size: $plyr-font-size-captions-base; - text-align: center; - @include font-smoothing(); - - span { - border-radius: 2px; - padding: 3px 10px; - background: transparentize(#000, .1); - } - span:empty { - display: none; - } - - @media (min-width: $plyr-bp-captions-large) { - font-size: $plyr-font-size-captions-medium; - } - } - &--captions-active &__captions { - display: block; - } - &--fullscreen-active &__captions { - font-size: $plyr-font-size-captions-large; - } - - // Playback controls - &__controls { - @include font-smoothing(); - position: relative; - padding: $plyr-control-spacing; - background: $plyr-controls-bg; - line-height: 1; - text-align: center; - box-shadow: 0 1px 1px transparentize($plyr-gray-dark, .8); - - // Clear floats - &::after { - content: ''; - display: table; - clear: both; - } - - // Layout - &--right { - display: block; - margin: $plyr-control-spacing auto 0; - } - @media (min-width: $plyr-bp-control-split) { - &--left { - float: left; - } - &--right { - float: right; - margin-top: 0; - } - } - - // Buttons - button { - display: inline-block; - vertical-align: middle; - margin: 0 2px; - padding: ($plyr-control-spacing / 2) $plyr-control-spacing; - overflow: hidden; - border: 0; - background: transparent; - border-radius: 3px; - cursor: pointer; - color: $plyr-control-color; - transition: background .3s ease, color .3s ease, opacity .3s ease; - - svg { - width: 18px; - height: 18px; - display: block; - fill: currentColor; - transition: fill .3s ease; - } - - // Hover and tab focus - &.tab-focus:hover, - &:hover { - background: $plyr-control-bg-hover; - color: $plyr-control-color-hover; - } - // Default focus - &:focus { - outline: 0; - } - } - - // Hide toggle icons by default - .icon--exit-fullscreen, - .icon--muted, - .icon--captions-on { - display: none; - } - - // Time display - .plyr__time { - display: inline-block; - vertical-align: middle; - margin-left: $plyr-control-spacing; - color: $plyr-control-color; - font-weight: 600; - font-size: $plyr-font-size-small; - } - - // Media duration hidden on small screens - .plyr__time + .plyr__time { - display: none; - - @media (min-width: $plyr-bp-control-split) { - display: inline-block; - } - - // Add a slash in before - &::before { - content: '\2044'; - margin-right: $plyr-control-spacing; - } - } - } - - // Tooltips - &__tooltip { - visibility: hidden; - position: absolute; - z-index: 2; - bottom: 100%; - margin-bottom: $plyr-tooltip-padding; - padding: $plyr-tooltip-padding ($plyr-tooltip-padding * 1.5); - pointer-events: none; - - opacity: 0; - background: $plyr-tooltip-bg; - box-shadow: $plyr-tooltip-shadow; - border-radius: $plyr-tooltip-radius; - color: $plyr-tooltip-color; - font-size: $plyr-font-size-small; - line-height: 1.5; - font-weight: 600; - - transform: translate(-50%, 10px) scale(.8); - transform-origin: 50% 100%; - transition: transform .2s .1s ease, opacity .2s .1s ease, visibility .3s ease; - - // Arrows - &::after, - &::before { - content: ''; - position: absolute; - width: 0; - height: 0; - top: 100%; - left: 50%; - transform: translateX(-50%); - } - // The border triangle - &::after { - $plyr-border-arrow-size: ($plyr-tooltip-arrow-size + ($plyr-tooltip-border-width * 1)); - bottom: -($plyr-border-arrow-size + $plyr-tooltip-border-width); - border-right: $plyr-border-arrow-size solid transparent; - border-top: $plyr-border-arrow-size solid $plyr-tooltip-arrow-border-color; - border-left: $plyr-border-arrow-size solid transparent; - z-index: 1; - } - // The background triangle - &::before { - bottom: -$plyr-tooltip-arrow-size; - border-right: $plyr-tooltip-arrow-size solid transparent; - border-top: $plyr-tooltip-arrow-size solid $plyr-tooltip-bg; - border-left: $plyr-tooltip-arrow-size solid transparent; - z-index: 2; - } - } - button:hover .plyr__tooltip, - button.tab-focus:focus .plyr__tooltip, - &__tooltip--visible { - visibility: visible; - opacity: 1; - transform: translate(-50%, 0) scale(1); - } - button:hover .plyr__tooltip { - z-index: 3; - } - - // Common range styles - input[type='range'].tab-focus:focus { - outline: thin dotted transparentize($plyr-gray-dark, .8); - outline-offset: 3px; - } - - // Playback progress - // <progress> element - &__progress { - position: absolute; - bottom: 100%; - left: 0; - right: 0; - width: 100%; - height: $plyr-control-spacing; - background: $plyr-progress-bg; - - &--buffer[value], - &--played[value], - &--seek[type='range'] { - position: absolute; - left: 0; - top: 0; - width: 100%; - height: $plyr-control-spacing; - margin: 0; - padding: 0; - vertical-align: top; - - -webkit-appearance: none; - -moz-appearance: none; - border: none; - background: transparent; - } - &--buffer[value], - &--played[value] { - &::-webkit-progress-bar { - background: transparent; - transition: width .2s ease; - } - - // Inherit from currentColor; - &::-webkit-progress-value { - background: currentColor; - transition: width .2s ease; - } - &::-moz-progress-bar { - background: currentColor; - transition: width .2s ease; - } - } - &--played[value] { - z-index: 2; - color: $plyr-progress-playing-bg; - } - &--buffer[value] { - color: $plyr-progress-buffered-bg; - } - - // Seek control - // <input[type='range']> element - // Specificity is for bootstrap compatibility - &--seek[type='range'] { - z-index: 4; - cursor: pointer; - outline: 0; - - // Webkit - &::-webkit-slider-runnable-track { - @include seek-track(); - } - &::-webkit-slider-thumb { - -webkit-appearance: none; - @include seek-thumb(); - } - - // Mozilla - &::-moz-range-track { - @include seek-track(); - } - &::-moz-range-thumb { - -moz-appearance: none; - @include seek-thumb(); - } - - // Microsoft - &::-ms-track { - color: transparent; - @include seek-track(); - } - &::-ms-fill-lower, - &::-ms-fill-upper { - @include seek-track(); - } - &::-ms-thumb { - @include seek-thumb(); - } - - &:focus { - outline: 0; - } - &::-moz-focus-outer { - border: 0; - } - } - - // Seek tooltip to show time - .plyr__tooltip { - left: 0; - } - } - - // Touch seek wider handle - &--is-touch &--seek[type='range'] { - &::-webkit-slider-thumb { - @include seek-thumb-touch(); - } - // Mozilla - &::-moz-range-thumb { - @include seek-thumb-touch(); - } - // Microsoft - &::-ms-thumb { - @include seek-thumb-touch(); - } - } - - // Loading state - &--loading .plyr__progress--buffer { - animation: plyr-progress 1s linear infinite; - background-size: $plyr-progress-loading-size $plyr-progress-loading-size; - background-repeat: repeat-x; - background-color: $plyr-progress-buffered-bg; - background-image: linear-gradient( - -45deg, - $plyr-progress-loading-bg 25%, - transparent 25%, - transparent 50%, - $plyr-progress-loading-bg 50%, - $plyr-progress-loading-bg 75%, - transparent 75%, - transparent); - color: transparent; - } - - // States - &__controls [data-plyr='pause'], - &--playing .plyr__controls [data-plyr='play'] { - display: none; - } - &--playing .plyr__controls [data-plyr='pause'] { - display: inline-block; - } - - // Volume control - // <input[type='range']> element - // Specificity is for bootstrap compatibility - &__volume[type='range'] { - display: inline-block; - vertical-align: middle; - -webkit-appearance: none; - -moz-appearance: none; - width: 100px; - margin: 0 $plyr-control-spacing 0 0; - padding: 0; - cursor: pointer; - background: transparent; - border: none; - - // Webkit - &::-webkit-slider-runnable-track { - @include volume-track(); - } - &::-webkit-slider-thumb { - -webkit-appearance: none; - margin-top: -(($plyr-volume-thumb-height - $plyr-volume-track-height) / 2); - @include volume-thumb(); - } - - // Mozilla - &::-moz-range-track { - @include volume-track(); - } - &::-moz-range-thumb { - @include volume-thumb(); - } - - // Microsoft - &::-ms-track { - height: $plyr-volume-track-height; - background: transparent; - border-color: transparent; - border-width: (($plyr-volume-thumb-height - $plyr-volume-track-height) / 2) 0; - color: transparent; - } - &::-ms-fill-lower, - &::-ms-fill-upper { - @include volume-track(); - } - &::-ms-thumb { - @include volume-thumb(); - } - - &:focus { - outline: 0; - - &::-webkit-slider-thumb { - background: $plyr-volume-thumb-bg-focus; - } - &::-moz-range-thumb { - background: $plyr-volume-thumb-bg-focus; - } - &::-ms-thumb { - background: $plyr-volume-thumb-bg-focus; - } - } - } - - // Hide sound controls on iOS - // It's not supported to change volume using JavaScript: - // https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html - &--is-ios &__volume, - &--is-ios [data-plyr='mute'], - &--is-ios.plyr--audio &__controls--right { - display: none; - } - // Center buttons so it looks less odd - &--is-ios.plyr--audio &__controls--left { - float: none; - } - - // Audio specific styles - // Position the progress within the container - &--audio .plyr__controls { - padding-top: ($plyr-control-spacing * 2); - } - &--audio .plyr__progress { - bottom: auto; - top: 0; - background: $plyr-off-white; - } - - // Full screen mode - &--fullscreen, - &--fullscreen-active { - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - height: 100%; - width: 100%; - z-index: 10000000; - background: #000; - - video { - height: 100%; - } - .plyr__video-wrapper { - height: 100%; - width: 100%; - } - .plyr__controls { - position: absolute; - bottom: 0; - left: 0; - right: 0; - } - } - - // Hide controls when playing in full screen - &--fullscreen-active.plyr--fullscreen--hide-controls.plyr--playing, - &.plyr--fullscreen.plyr--fullscreen--hide-controls.plyr--playing { - .plyr__controls { - transform: translateY(100%) translateY($plyr-control-spacing / 2); - transition: transform .3s .2s ease; - } - .plyr__captions { - bottom: ($plyr-control-spacing / 2); - transition: bottom .3s .2s ease; - } - &.plyr--hover .plyr__controls { - transform: translateY(0); - } - } - - // Captions - &.plyr--fullscreen .plyr__captions, - &--fullscreen-active .plyr__captions, - &--fullscreen--hide-controls.plyr--fullscreen-active.plyr--playing.plyr--hover .plyr__captions { - top: auto; - bottom: 90px; - - @media (min-width: $plyr-bp-control-split) { - bottom: 60px; - } - } - - // Change icons on state change - &--fullscreen-active .icon--exit-fullscreen, - &--muted .plyr__controls .icon--muted, - &--captions-active .plyr__controls .icon--captions-on { - display: block; - - & + svg { - display: none; - } - } - - // Some options are hidden by default - [data-plyr='captions'], - [data-plyr='fullscreen'] { - display: none; - } - &--captions-enabled [data-plyr='captions'], - &--fullscreen-enabled [data-plyr='fullscreen'] { - display: inline-block; - } -} diff --git a/src/scss/mixins.scss b/src/scss/mixins.scss new file mode 100644 index 00000000..b4bfca6a --- /dev/null +++ b/src/scss/mixins.scss @@ -0,0 +1,29 @@ +// ========================================================================== +// Plyr mixins +// https://github.com/selz/plyr +// ========================================================================== + +// <input type="range"> styling +@mixin plyr-range-track() { + height: $plyr-range-track-height; + background: transparent; + border: 0; + border-radius: ($plyr-range-track-height / 2); + user-select: none; +} +@mixin plyr-range-thumb() { + position: relative; + height: $plyr-range-thumb-height; + width: $plyr-range-thumb-width; + background: $plyr-range-thumb-bg; + border: $plyr-range-thumb-border; + border-radius: 100%; + transition: background .2s ease, border .2s ease, transform .2s ease; + box-shadow: $plyr-range-thumb-shadow; + box-sizing: border-box; +} +@mixin plyr-range-thumb-active() { + background: $plyr-range-thumb-active-bg; + border-color: $plyr-range-thumb-active-border-color; + transform: scale($plyr-range-thumb-active-scale); +}
\ No newline at end of file diff --git a/src/scss/plyr.scss b/src/scss/plyr.scss new file mode 100644 index 00000000..465df084 --- /dev/null +++ b/src/scss/plyr.scss @@ -0,0 +1,684 @@ +// ========================================================================== +// Plyr styles +// https://github.com/selz/plyr +// ========================================================================== + +@import "variables"; +@import "mixins"; + +// Animation +// --------------------------------------- +@keyframes plyr-progress { + to { background-position: $plyr-progress-loading-size 0; } +} + +// Styles +// ------------------------------- +// Base +.plyr { + position: relative; + max-width: 100%; + min-width: 200px; + font-family: Avenir, "Avenir Next", "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif; + + // border-box everything + // http://paulirish.com/2012/box-sizing-border-box-ftw/ + &, + *, + *::after, + *::before { + box-sizing: border-box; + } + + // Fix 300ms delay + a, button, input, label { + touch-action: manipulation; + } + + // Media elements + video, + audio { + width: 100%; + height: auto; + vertical-align: middle; + border-radius: inherit; + } + + // Range inputs + // Specificity is for bootstrap compatibility + input[type='range'] { + display: block; + height: ($plyr-range-thumb-height * $plyr-range-thumb-active-scale); + width: 100%; + margin: 0; + padding: 0; + vertical-align: middle; + + appearance: none; + cursor: pointer; + border: none; + background: transparent; + + // WebKit + &::-webkit-slider-runnable-track { + @include plyr-range-track(); + } + &::-webkit-slider-thumb { + -webkit-appearance: none; + margin-top: -(($plyr-range-thumb-height - $plyr-range-track-height) / 2); + @include plyr-range-thumb(); + } + + // Mozilla + &::-moz-range-track { + @include plyr-range-track(); + } + &::-moz-range-thumb { + @include plyr-range-thumb(); + } + &::-moz-focus-outer { + border: 0; + } + + // Microsoft + &::-ms-track { + height: $plyr-range-track-height; + background: transparent; + border: 0; + color: transparent; + } + &::-ms-fill-upper { + @include plyr-range-track(); + } + &::-ms-fill-lower { + @include plyr-range-track(); + background: $plyr-range-selected-bg; + } + &::-ms-thumb { + @include plyr-range-thumb(); + // For some reason, Edge uses the -webkit margin above + margin-top: 0; + } + &::-ms-tooltip { + display: none; + } + + // Focus styles + &:focus { + outline: 0; + } + &::-moz-focus-outer { + border: 0; + } + &.tab-focus:focus { + outline-offset: 3px; + } + + // Pressed styles + &:active { + &::-webkit-slider-thumb { + @include plyr-range-thumb-active(); + } + &::-moz-range-thumb { + @include plyr-range-thumb-active(); + } + &::-ms-thumb { + @include plyr-range-thumb-active(); + } + } + } +} + +// Video range inputs +.plyr--video input[type='range'].tab-focus:focus { + outline: 1px dotted transparentize($plyr-video-control-color, .5); +} + +// Audio range inputs +.plyr--audio input[type='range'].tab-focus:focus { + outline: 1px dotted transparentize($plyr-audio-control-color, .5); +} + +// Screen reader only elements +.plyr__sr-only { + position: absolute !important; + clip: rect(1px, 1px, 1px, 1px); + padding: 0 !important; + border: 0 !important; + height: 1px !important; + width: 1px !important; + overflow: hidden; +} + +// Video +.plyr__video-wrapper { + position: relative; + background: #000; + border-radius: inherit; + + // Cleaner radius, also forces iframe radius + -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); +} + +// Container for embeds +.plyr__video-embed { + padding-bottom: 56.25%; /* 16:9 */ + height: 0; + overflow: hidden; + border-radius: inherit; + + iframe { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border: 0; + user-select: none; + } + + // Vimeo hack + > div { + position: relative; + padding-bottom: 200%; + transform: translateY(-35.95%); + } +} +// To allow mouse events to be captured if full support +.plyr .plyr__video-embed iframe { + pointer-events: none; +} + +// Captions +// -------------------------------------------------------------- +// Hide default captions +.plyr video::-webkit-media-text-track-container { + display: none; +} +.plyr__captions { + display: none; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + padding: ($plyr-control-spacing * 2) ($plyr-control-spacing * 2) ($plyr-control-spacing * 8); + color: #fff; + font-size: $plyr-font-size-captions-base; + text-align: center; + font-weight: 400; + -webkit-font-smoothing: subpixel-antialiased; + + span { + border-radius: 2px; + padding: floor($plyr-control-spacing / 3) $plyr-control-spacing; + background: transparentize(#000, .15); + } + span:empty { + display: none; + } + + @media (min-width: $plyr-bp-screen-md) { + font-size: $plyr-font-size-captions-medium; + } +} +.plyr--captions-active .plyr__captions { + display: block; +} +.plyr--fullscreen-active .plyr__captions { + font-size: $plyr-font-size-captions-large; +} + +// Controls +// -------------------------------------------------------------- +// Playback controls +.plyr__controls { + display: flex; + align-items: center; + + line-height: 1; + text-align: center; + + transition: opacity .3s ease; + + // Spacing + > button, + .plyr__progress, + .plyr__time { + margin-left: ($plyr-control-spacing / 2); + + &:first-child { + margin-left: 0; + } + } + .plyr__volume { + margin-left: ($plyr-control-spacing / 2); + } + [data-plyr="pause"] { + margin-left: 0; + } + + // Buttons + button { + position: relative; + display: inline-block; + flex-shrink: 0; + vertical-align: middle; + padding: ($plyr-control-spacing / 2); + border: 0; + background: transparent; + border-radius: 3px; + cursor: pointer; + transition: background .3s ease, color .3s ease, opacity .3s ease; + color: inherit; + + svg { + width: 18px; + height: 18px; + display: block; + fill: currentColor; + } + + // Default focus + &:focus { + outline: 0; + } + } + + // Hide toggle icons by default + .icon--exit-fullscreen, + .icon--muted, + .icon--captions-on { + display: none; + } + + @media (min-width: $plyr-bp-screen-sm) { + > button, + .plyr__progress, + .plyr__time { + margin-left: $plyr-control-spacing; + } + button { + padding: ($plyr-control-spacing / 2) $plyr-control-spacing; + } + } +} +// Hide controls +.plyr--hide-controls .plyr__controls { + opacity: 0; +} + +// Video controls +.plyr--video .plyr__controls { + position: absolute; + left: 0; + right: 0; + bottom: 0; + padding: ($plyr-control-spacing * 5) $plyr-control-spacing $plyr-control-spacing; + background: linear-gradient(transparentize($plyr-video-controls-bg, 1), transparentize($plyr-video-controls-bg, .5)); + border-bottom-left-radius: inherit; + border-bottom-right-radius: inherit; + color: $plyr-video-control-color; + + button { + // Hover and tab focus + &.tab-focus:focus, + &:hover { + background: $plyr-video-control-bg-hover; + color: $plyr-video-control-color-hover; + } + } + + @media (min-width: $plyr-bp-screen-sm) { + padding-left: ($plyr-control-spacing * 1.5); + padding-right: ($plyr-control-spacing * 1.5); + } +} + +// Audio controls +.plyr--audio .plyr__controls { + padding: $plyr-control-spacing; + border-radius: inherit; + background: $plyr-audio-controls-bg; + border: $plyr-audio-controls-border; + box-shadow: $plyr-audio-controls-box-shadow; + color: $plyr-audio-control-color; + + button { + // Hover and tab focus + &.tab-focus:focus, + &:hover { + background: $plyr-audio-control-bg-hover; + color: $plyr-audio-control-color-hover; + } + } +} + +// Large play button (video only) +.plyr__play-large { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + padding: $plyr-control-spacing; + background: $plyr-video-control-bg-hover; + border: 4px solid currentColor; + border-radius: 100%; + box-shadow: 0 1px 1px transparentize($plyr-video-controls-bg, .85); + color: $plyr-video-control-color; + transition: opacity .3s ease, visibility .3s ease; + + svg { + position: relative; + left: 2px; + width: 20px; + height: 20px; + display: block; + fill: currentColor; + } + + &:focus { + outline: 1px dotted transparentize($plyr-video-control-color, .5); + } +} +.plyr--audio .plyr__play-large { + display: none; +} +.plyr--playing .plyr__play-large { + opacity: 0; + visibility: hidden; +} + +// States +.plyr__controls [data-plyr='pause'], +.plyr--playing .plyr__controls [data-plyr='play'] { + display: none; +} +.plyr--playing .plyr__controls [data-plyr='pause'] { + display: inline-block; +} + +// Change icons on state change +.plyr--fullscreen-active .icon--exit-fullscreen, +.plyr--muted .plyr__controls .icon--muted, +.plyr--captions-active .plyr__controls .icon--captions-on { + display: block; + + & + svg { + display: none; + } +} + +// Some options are hidden by default +.plyr [data-plyr='captions'], +.plyr [data-plyr='fullscreen'] { + display: none; +} +.plyr--captions-enabled [data-plyr='captions'], +.plyr--fullscreen-enabled [data-plyr='fullscreen'] { + display: inline-block; +} + +// Tooltips +// -------------------------------------------------------------- +.plyr__tooltip { + position: absolute; + z-index: 2; + bottom: 100%; + margin-bottom: ($plyr-tooltip-padding * 2); + padding: $plyr-tooltip-padding ($plyr-tooltip-padding * 1.5); + pointer-events: none; + + opacity: 0; + background: $plyr-tooltip-bg; + box-shadow: $plyr-tooltip-shadow; + border-radius: $plyr-tooltip-radius; + + color: $plyr-tooltip-color; + font-size: $plyr-font-size-small; + line-height: 1.3; + -webkit-font-smoothing: subpixel-antialiased; + + transform: translate(-50%, 10px) scale(.8); + transform-origin: 50% 100%; + transition: transform .2s .1s ease, opacity .2s .1s ease; + + // Arrows + &::before { + content: ''; + position: absolute; + width: 0; + height: 0; + left: 50%; + transform: translateX(-50%); + } + // The background triangle + &::before { + bottom: -$plyr-tooltip-arrow-size; + border-right: $plyr-tooltip-arrow-size solid transparent; + border-top: $plyr-tooltip-arrow-size solid $plyr-tooltip-bg; + border-left: $plyr-tooltip-arrow-size solid transparent; + z-index: 2; + } +} +.plyr button:hover .plyr__tooltip, +.plyr button.tab-focus:focus .plyr__tooltip, +.plyr__tooltip--visible { + opacity: 1; + transform: translate(-50%, 0) scale(1); +} +.plyr button:hover .plyr__tooltip { + z-index: 3; +} + +// Playback progress +// -------------------------------------------------------------- +// <progress> element +.plyr__progress { + position: relative; + flex: 1; + + input[type="range"] { + position: relative; + z-index: 2; + + &::-webkit-slider-runnable-track { + background: transparent; + } + &::-moz-range-track { + background: transparent; + } + &::-ms-fill-upper { + background: transparent; + } + } + + // Seek tooltip to show time + .plyr__tooltip { + left: 0; + } +} + +.plyr__progress--buffer[value], +.plyr__progress--played[value], +.plyr__volume--display[value] { + position: absolute; + left: 0; + top: 50%; + width: 100%; + height: $plyr-range-track-height; + margin: -($plyr-range-track-height / 2) 0 0; + padding: 0; + vertical-align: top; + appearance: none; + border: none; + border-radius: 100px; + + &::-webkit-progress-bar { + background: transparent; + } + &::-webkit-progress-value { + background: currentColor; + border-radius: 100px; + min-width: $plyr-range-track-height; + } + &::-moz-progress-bar { + background: currentColor; + border-radius: 100px; + min-width: $plyr-range-track-height; + } + &::-ms-fill { + border-radius: 100px; + } +} +.plyr__progress--played[value], +.plyr__volume--display[value] { + z-index: 1; + color: $plyr-range-selected-bg; + background: transparent; + transition: none; + + &::-webkit-progress-value { + min-width: $plyr-range-track-height; + max-width: 99%; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + &::-moz-progress-bar { + min-width: $plyr-range-track-height; + max-width: 99%; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + &::-ms-fill { + display: none; + } +} +.plyr__progress--buffer[value] { + &::-webkit-progress-value { + transition: width .2s ease; + } + &::-moz-progress-bar { + transition: width .2s ease; + } + &::-ms-fill { + transition: width .2s ease; + } +} +.plyr--video .plyr__progress--buffer[value], +.plyr--video .plyr__volume--display[value] { + background: $plyr-video-range-track-bg; +} +.plyr--video .plyr__progress--buffer[value] { + color: $plyr-video-progress-buffered-bg; +} +.plyr--audio .plyr__progress--buffer[value], +.plyr--audio .plyr__volume--display[value] { + background: $plyr-audio-range-track-bg; +} +.plyr--audio .plyr__progress--buffer[value] { + color: $plyr-audio-progress-buffered-bg; +} + +// Loading state +.plyr--loading .plyr__progress--buffer { + animation: plyr-progress 1s linear infinite; + background-size: $plyr-progress-loading-size $plyr-progress-loading-size; + background-repeat: repeat-x; + background-image: linear-gradient( + -45deg, + $plyr-progress-loading-bg 25%, + transparent 25%, + transparent 50%, + $plyr-progress-loading-bg 50%, + $plyr-progress-loading-bg 75%, + transparent 75%, + transparent); + color: transparent; +} +.plyr--video.plyr--loading .plyr__progress--buffer { + background-color: $plyr-video-progress-buffered-bg; +} +.plyr--audio.plyr--loading .plyr__progress--buffer { + background-color: $plyr-audio-progress-buffered-bg; +} + +// Time +// -------------------------------------------------------------- +.plyr__time { + display: inline-block; + vertical-align: middle; + font-size: $plyr-font-size-small; + line-height: .95; + -webkit-font-smoothing: subpixel-antialiased; +} +// Media duration hidden on small screens +.plyr__time + .plyr__time { + display: none; + + @media (min-width: $plyr-bp-screen-md) { + display: inline-block; + } + + // Add a slash in before + &::before { + content: '\2044'; + margin-right: $plyr-control-spacing; + } +} + +// Volume +// -------------------------------------------------------------- +.plyr .plyr__volume { + display: none; + position: relative; + + input[type="range"] { + position: relative; + z-index: 2; + } + @media (min-width: $plyr-bp-screen-sm) { + display: block; + max-width: 60px; + } + @media (min-width: $plyr-bp-screen-md) { + max-width: 100px; + } +} + +// Hide sound controls on iOS +// It's not supported to change volume using JavaScript: +// https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html +.plyr--is-ios .plyr__volume, +.plyr--is-ios [data-plyr='mute'] { + display: none !important; +} + +// Fullscreen +// -------------------------------------------------------------- +.plyr--fullscreen, +.plyr--fullscreen-active { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + height: 100%; + width: 100%; + z-index: 10000000; + background: #000; + border-radius: 0; + + video { + height: 100%; + } + .plyr__video-wrapper { + height: 100%; + width: 100%; + } + .plyr__controls { + position: absolute; + bottom: 0; + left: 0; + right: 0; + } +} diff --git a/src/scss/variables.scss b/src/scss/variables.scss new file mode 100644 index 00000000..baf47e25 --- /dev/null +++ b/src/scss/variables.scss @@ -0,0 +1,67 @@ +// ========================================================================== +// Plyr variables +// https://github.com/selz/plyr +// https://robots.thoughtbot.com/sass-default +// ========================================================================== + +// Colors +$plyr-color-main: #3498db !default; + +// Font sizes +$plyr-font-size-small: 14px !default; +$plyr-font-size-base: 16px !default; + +// Captions +$plyr-font-size-captions-base: ceil($plyr-font-size-base * 1.25) !default; +$plyr-font-size-captions-medium: ceil($plyr-font-size-base * 1.5) !default; +$plyr-font-size-captions-large: ($plyr-font-size-base * 2) !default; + +// Controls +$plyr-control-spacing: 10px !default; +$plyr-video-controls-bg: #000 !default; +$plyr-video-control-color: #fff !default; +$plyr-video-control-color-hover: #fff !default; +$plyr-video-control-bg-hover: $plyr-color-main !default; +$plyr-audio-controls-bg: #fff !default; +$plyr-audio-controls-border: 1px solid #dbe3e8 !default; +$plyr-audio-controls-box-shadow: 0 1px 1px transparentize(#000, .95) !default; +$plyr-audio-control-color: #565D64 !default; +$plyr-audio-control-color-hover: #fff !default; +$plyr-audio-control-bg-hover: $plyr-color-main; + +// Tooltips +$plyr-tooltip-bg: $plyr-video-controls-bg !default; +$plyr-tooltip-border-color: transparentize(darken($plyr-video-controls-bg, 75%), .9) !default; +$plyr-tooltip-arrow-border-color: transparentize(darken($plyr-video-controls-bg, 75%), .8) !default; +$plyr-tooltip-border-width: 1px !default; +$plyr-tooltip-shadow: 0 0 5px $plyr-tooltip-border-color, 0 0 0 $plyr-tooltip-border-width $plyr-tooltip-border-color !default; +$plyr-tooltip-color: $plyr-video-control-color !default; +$plyr-tooltip-padding: ($plyr-control-spacing / 2) !default; +$plyr-tooltip-arrow-size: 4px !default; +$plyr-tooltip-radius: 3px !default; + +// Progress +$plyr-progress-loading-size: 25px !default; +$plyr-progress-loading-bg: transparentize(#000, .85) !default; +$plyr-video-progress-bg: transparentize(#fff, .75) !default; +$plyr-video-progress-buffered-bg: $plyr-video-progress-bg !default; +$plyr-audio-progress-bg: transparentize(#C6D6DB, .33) !default; +$plyr-audio-progress-buffered-bg: $plyr-audio-progress-bg !default; + +// Range sliders +$plyr-range-track-height: 8px !default; +$plyr-range-thumb-height: floor($plyr-range-track-height * 2) !default; +$plyr-range-thumb-width: floor($plyr-range-track-height * 2) !default; +$plyr-range-thumb-bg: #fff !default; +$plyr-range-thumb-border: 2px solid transparent !default; +$plyr-range-thumb-shadow: 0 1px 1px transparentize($plyr-video-controls-bg, .85), 0 0 0 1px transparentize(#000, .85) !default; +$plyr-range-thumb-active-border-color: #fff !default; +$plyr-range-thumb-active-bg: $plyr-video-control-bg-hover !default; +$plyr-range-thumb-active-scale: 1.25 !default; +$plyr-video-range-track-bg: $plyr-video-progress-buffered-bg !default; +$plyr-audio-range-track-bg: $plyr-audio-progress-buffered-bg !default; +$plyr-range-selected-bg: $plyr-color-main !default; + +// Breakpoints +$plyr-bp-screen-sm: 480px !default; +$plyr-bp-screen-md: 768px !default;
\ No newline at end of file |