Audio fullscreen, Tooltip tweaks, Docs

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,