diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/js/plyr.js | 78 | ||||
| -rw-r--r-- | src/less/plyr.less | 43 | ||||
| -rw-r--r-- | src/sass/plyr.scss | 44 |
3 files changed, 103 insertions, 62 deletions
diff --git a/src/js/plyr.js b/src/js/plyr.js index 5e22c680..2d497e75 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -78,7 +78,8 @@ fullscreen: { enabled: true, fallback: true, - hideControls: true + hideControls: true, + allowAudio: false }, storage: { enabled: true, @@ -664,7 +665,7 @@ time = typeof time === 'number' ? time : plyr.media.currentTime; // If there's no subs available, bail - if(!plyr.captions[plyr.subcount]) { + if (!plyr.captions[plyr.subcount]) { return; } @@ -930,9 +931,6 @@ _remove(containers[i]); } - // Set ID - container.setAttribute('id', id); - // Add embed class for responsive _toggleClass(plyr.media, config.classes.videoWrapper, true); _toggleClass(plyr.media, config.classes.embedWrapper, true); @@ -942,6 +940,9 @@ // Create the YouTube container plyr.media.appendChild(container); + // Set ID + container.setAttribute('id', id); + // Setup API if (typeof YT === 'object') { _youTubeReady(videoId, container); @@ -984,7 +985,7 @@ // Wait for fragaloop load var timer = window.setInterval(function() { - if('$f' in window && iframe.loaded) { + if ('$f' in window && iframe.loaded) { window.clearInterval(timer); _vimeoReady.call(iframe); @@ -1122,11 +1123,11 @@ // Vimeo ready function _vimeoReady() { /* jshint validthis: true */ - // Get the frame with fragaloop lib plyr.embed = $f(this); // Setup on ready plyr.embed.addEvent('ready', function() { + // Create a faux HTML5 API using the Vimeo API plyr.media.play = function() { plyr.embed.api('play'); }; plyr.media.pause = function() { plyr.embed.api('pause'); }; @@ -1178,13 +1179,13 @@ _triggerEvent(plyr.media, 'ended'); }); - /*// Always seek to 0 - plyr.embed.api('seekTo', 0); + // Always seek to 0 + //plyr.embed.api('seekTo', 0); // Prevent autoplay if needed (seek will play) - if (!config.autoplay) { - plyr.embed.api('pause'); - }*/ + //if (!config.autoplay) { + // plyr.embed.api('pause'); + //} }); } @@ -1192,7 +1193,7 @@ function _setupCaptions() { if (plyr.type === 'video') { // Inject the container - if(!_getElement(config.selectors.captions)) { + if (!_getElement(config.selectors.captions)) { plyr.videoContainer.insertAdjacentHTML('afterbegin', '<div class="' + _getClassname(config.selectors.captions) + '"><span></span></div>'); } @@ -1340,7 +1341,7 @@ // Setup fullscreen function _setupFullscreen() { - if (plyr.type != 'audio' && config.fullscreen.enabled) { + if ((plyr.type != 'audio' || config.fullscreen.allowAudio) && config.fullscreen.enabled) { // Check for native support var nativeSupport = fullscreen.supportsFullScreen; @@ -1660,18 +1661,21 @@ // If there's no full support, or there's no caption toggle if (!plyr.supported.full || !plyr.buttons.captions) { return; - } + } // If the method is called without parameter, toggle based on current value if (typeof show !== 'boolean') { show = (plyr.container.className.indexOf(config.classes.captions.active) === -1); } + // Set global + plyr.captionsEnabled = show; + // Toggle state - _toggleState(plyr.buttons.captions, show); + _toggleState(plyr.buttons.captions, plyr.captionsEnabled); // Add class hook - _toggleClass(plyr.container, config.classes.captions.active, show); + _toggleClass(plyr.container, config.classes.captions.active, plyr.captionsEnabled); } // Check if media is loading @@ -1753,7 +1757,7 @@ } // Fallback to 0 - if(isNaN(time)) { + if (isNaN(time)) { time = 0; } @@ -1798,10 +1802,10 @@ // Add elements to HTML5 media (source, tracks, etc) function _insertChildElements(type, attributes) { - if(typeof attributes === 'string') { + if (typeof attributes === 'string') { _insertElement(type, plyr.media, { src: attributes }); } - else if(attributes.constructor === Array) { + else if (attributes.constructor === Array) { for (var i = attributes.length - 1; i >= 0; i--) { _insertElement(type, plyr.media, attributes[i]); } @@ -1811,7 +1815,7 @@ // Update source // Sources are not checked for support so be careful function _updateSource(source) { - if(typeof source === 'undefined') { + if (typeof source === 'undefined') { return; } @@ -1819,7 +1823,7 @@ _pause(); // Clean up YouTube stuff - if(plyr.type === 'youtube') { + if (plyr.type === 'youtube') { // Destroy the embed instance plyr.embed.destroy(); @@ -1836,7 +1840,7 @@ _remove(plyr.media); // Set the new type - if('type' in source && source.type !== plyr.type) { + if ('type' in source && source.type !== plyr.type) { plyr.type = source.type; } @@ -1853,7 +1857,7 @@ case 'youtube': case 'vimeo': plyr.media = document.createElement('div'); - plyr.embedId = source.sources; + plyr.embedId = (typeof source.sources === 'string' ? source.sources : source.sources[0].src); break; } @@ -1861,8 +1865,8 @@ _prependChild(plyr.container, plyr.media); // Set attributes for audio video - if(_inArray(config.types.html5, plyr.type)) { - if(config.crossorigin) { + if (_inArray(config.types.html5, plyr.type)) { + if (config.crossorigin) { plyr.media.setAttribute('crossorigin', ''); } if (config.autoplay) { @@ -1879,16 +1883,20 @@ // Classname reset plyr.container.className = plyr.originalClassName; + // Restore class hooks + _toggleClass(plyr.container, config.classes.fullscreen.active, plyr.isFullscreen); + _toggleClass(plyr.container, config.classes.captions.active, plyr.captionsEnabled); + // Autoplay the new source? config.autoplay = (source.autoplay || config.autoplay); // Set media id for embeds - if(_inArray(config.types.embed, plyr.type)) { + if (_inArray(config.types.embed, plyr.type)) { plyr.embedId = source.sources; } // Set new sources for html5 - if(_inArray(config.types.html5, plyr.type)) { + if (_inArray(config.types.html5, plyr.type)) { _insertChildElements('source', source.sources); } @@ -1899,13 +1907,13 @@ _mediaUpdated(); // HTML5 stuff - if(_inArray(config.types.html5, plyr.type)) { + if (_inArray(config.types.html5, plyr.type)) { // Set volume _setVolume(); _updateVolume(); // UI updates - if(plyr.supported.full) { + if (plyr.supported.full) { // Reset time display _timeUpdate(); @@ -1914,7 +1922,7 @@ } // Setup captions - if('tracks' in source) { + if ('tracks' in source) { _insertChildElements('track', source.tracks); // Captions @@ -1930,7 +1938,7 @@ } } - if('title' in source) { + if ('title' in source) { config.title = source.title; _setupPlayAria(); } @@ -2292,17 +2300,17 @@ // Select the elements // Assume elements is a NodeList by default - if(typeof elements === 'string') { + if (typeof elements === 'string') { elements = document.querySelectorAll(elements); } // Single HTMLElement passed - else if(elements instanceof HTMLElement) { + else if (elements instanceof HTMLElement) { elements = [elements]; } // No selector passed, possibly options as first argument else if (!(elements instanceof NodeList) && typeof elements !== 'string') { // If options are the first argument - if(typeof options === 'undefined' && typeof elements === 'object') { + if (typeof options === 'undefined' && typeof elements === 'object') { options = elements; } diff --git a/src/less/plyr.less b/src/less/plyr.less index e57c2b1a..c2411ea9 100644 --- a/src/less/plyr.less +++ b/src/less/plyr.less @@ -32,10 +32,12 @@ // Tooltips @tooltip-bg: @controls-bg; -@tooltip-border-color: @off-white; +@tooltip-border-color: fade(@gray-dark, 10%); +@tooltip-border-width: 1px; +@tooltip-shadow: 0 0 5px @tooltip-border-color, 0 0 0 @tooltip-border-width @tooltip-border-color; @tooltip-color: @control-color; @tooltip-padding: @control-spacing; -@tooltip-arrow-size: 5px; +@tooltip-arrow-size: 6px; @tooltip-radius: 3px; // Progress @@ -331,32 +333,45 @@ opacity: 0; background: @tooltip-bg; - border: 1px solid @tooltip-border-color; + box-shadow: @tooltip-shadow; border-radius: @tooltip-radius; color: @tooltip-color; font-size: @font-size-small; line-height: 1.5; font-weight: 600; - transform: translate(-50%, (@tooltip-padding * 3)) scale(0); + transform: translate(-50%, (@tooltip-padding * 3)) scale(.8); transform-origin: 50% 100%; transition: transform .2s .1s ease, opacity .2s .1s ease; - // Arrow - &::after { + // Arrows + &::after, + &::before { content: ''; position: absolute; - z-index: 1; + width: 0; + height: 0; top: 100%; left: 50%; - display: block; - width: 10px; - height: 10px; - background: @tooltip-bg; - transform: translate(-50%, -50%) rotate(45deg) translateY(1px); - border: 1px solid @tooltip-border-color; - border-width: 0 1px 1px 0; + transform: translateX(-50%); } + // The border triangle + &::after { + @border-arrow-size: (@tooltip-arrow-size + (@tooltip-border-width * 1)); + bottom: -(@border-arrow-size + @tooltip-border-width); + border-right: @border-arrow-size solid transparent; + border-top: @border-arrow-size solid @tooltip-border-color; + border-left: @border-arrow-size solid transparent; + z-index: 1; + } + // The background triangle + &::before { + bottom: -@tooltip-arrow-size; + border-right: @tooltip-arrow-size solid transparent; + border-top: @tooltip-arrow-size solid @tooltip-bg; + border-left: @tooltip-arrow-size solid transparent; + z-index: 2; + } } button:hover .plyr-tooltip, button.tab-focus:focus .plyr-tooltip { diff --git a/src/sass/plyr.scss b/src/sass/plyr.scss index 08485efa..7cefca3a 100644 --- a/src/sass/plyr.scss +++ b/src/sass/plyr.scss @@ -44,15 +44,18 @@ $control-color-hover: null !default; // Tooltips $tooltip-bg: $controls-bg !default; +$tooltip-border-color: transparentize(@gray-dark, .1) !default; +$tooltip-border-width: 1px; +$tooltip-shadow: 0 0 5px $tooltip-border-color, 0 0 0 $tooltip-border-width $tooltip-border-color; $tooltip-color: $control-color !default; $tooltip-padding: $control-spacing !default; -$tooltip-arrow-size: 5px !default; +$tooltip-arrow-size: 6px !default; $tooltip-radius: 3px !default; // Progress -$progress-bg: rgba(red($gray), green($gray), blue($gray), .2) !default; +$progress-bg: transparentize($gray, .2) !default; $progress-playing-bg: $blue !default; -$progress-buffered-bg: rgba(red($gray), green($gray), blue($gray), .25) !default; +$progress-buffered-bg: transparentize($gray, .25) !default; $progress-loading-size: 40px !default; $progress-loading-bg: rgba(0,0,0, .15) !default; @@ -334,29 +337,44 @@ $bp-captions-large: 768px !default; // When captions jump to the larger opacity: 0; background: $tooltip-bg; + box-shadow: $tooltip-shadow; border-radius: $tooltip-radius; color: $tooltip-color; font-size: $font-size-small; line-height: 1.5; font-weight: 600; - transform: translate(-50%, ($tooltip-padding * 3)) scale(0); + transform: translate(-50%, ($tooltip-padding * 3)) scale(.8); transform-origin: 50% 100%; transition: transform .2s .1s ease, opacity .2s .1s ease; - &::after { + // Arrows + &::after, + &::before { content: ''; - display: block; position: absolute; - left: 50%; - bottom: -$tooltip-arrow-size; - margin-left: -$tooltip-arrow-size; width: 0; height: 0; - transition: inherit; - border-style: solid; - border-width: $tooltip-arrow-size $tooltip-arrow-size 0 $tooltip-arrow-size; - border-color: $controls-bg transparent transparent; + top: 100%; + left: 50%; + transform: translateX(-50%); + } + // The border triangle + &::after { + $border-arrow-size: ($tooltip-arrow-size + ($tooltip-border-width * 1)); + bottom: -($border-arrow-size + $tooltip-border-width); + border-right: $border-arrow-size solid transparent; + border-top: $border-arrow-size solid $tooltip-border-color; + border-left: $border-arrow-size solid transparent; + z-index: 1; + } + // The background triangle + &::before { + bottom: -$tooltip-arrow-size; + border-right: $tooltip-arrow-size solid transparent; + border-top: $tooltip-arrow-size solid $tooltip-bg; + border-left: $tooltip-arrow-size solid transparent; + z-index: 2; } } button:hover .plyr-tooltip, |