Safari fix (fixes #96), YouTube tweaks, docs

3 files changed, 54 insertions, 44 deletions

diff --git a/src/js/plyr.js b/src/js/plyr.js
index 4e379da6..1c9c98a8 100644
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr
-// plyr.js v1.2.2
+// plyr.js v1.2.3
 // https://github.com/selz/plyr
 // License: The MIT License (MIT)
 // ==========================================================================
@@ -529,12 +529,12 @@
             },
             browserPrefixes = "webkit moz o ms khtml".split(" ");
 
-        // check for native support
+        // Check for native support
         if (typeof document.cancelFullScreen != "undefined") {
             fullscreen.supportsFullScreen = true;
         }
         else {
-            // check for fullscreen support by vendor prefix
+            // Check for fullscreen support by vendor prefix
             for (var i = 0, il = browserPrefixes.length; i < il; i++ ) {
                 fullscreen.prefix = browserPrefixes[i];
 
@@ -551,12 +551,6 @@
             }
         }
 
-        // Safari doesn't support the ALLOW_KEYBOARD_INPUT flag (for security) so set it to not supported
-        // https://bugs.webkit.org/show_bug.cgi?id=121496
-        if(fullscreen.prefix === "webkit" && !!navigator.userAgent.match(/Version\/[\d\.]+.*Safari/)) {
-             fullscreen.supportsFullScreen = false;
-        }
-
         // Update methods to do something useful
         if (fullscreen.supportsFullScreen) {
             // Yet again Microsoft awesomeness, 
@@ -578,7 +572,7 @@
                 }
             };
             fullscreen.requestFullScreen = function(element) {
-                return (this.prefix === "") ? element.requestFullScreen() : element[this.prefix + (this.prefix == "ms" ? "RequestFullscreen" : "RequestFullScreen")](this.prefix === "webkit" ? element.ALLOW_KEYBOARD_INPUT : null);
+                return (this.prefix === "") ? element.requestFullScreen() : element[this.prefix + (this.prefix == "ms" ? "RequestFullscreen" : "RequestFullScreen")]();
             };
             fullscreen.cancelFullScreen = function() {
                 return (this.prefix === "") ? document.cancelFullScreen() : document[this.prefix + (this.prefix == "ms" ? "ExitFullscreen" : "CancelFullScreen")]();
@@ -852,11 +846,11 @@
                     // Cache the container
                     player.videoContainer = wrapper;
                 }
+            }
 
-                // YouTube
-                if(player.type == "youtube") {
-                    _setupYouTube(player.media.getAttribute("data-video-id"));
-                }
+            // YouTube
+            if(player.type == "youtube") {
+                _setupYouTube(player.media.getAttribute("data-video-id"));
             }
 
             // Autoplay
@@ -910,7 +904,7 @@
                 videoId: id,
                 playerVars: {
                     autoplay: 0,
-                    controls: 0,
+                    controls: (player.supported.full ? 0 : 1),
                     vq: "hd720",
                     rel: 0,
                     showinfo: 0,
@@ -953,14 +947,16 @@
                             }
                         }, 200);
 
-                        // Only setup controls once
-                        if(!player.container.querySelectorAll(config.selectors.controls).length) {
-                            _setupInterface();
-                        }
+                        if(player.supported.full) {
+                            // Only setup controls once
+                            if(!player.container.querySelectorAll(config.selectors.controls).length) {
+                                _setupInterface();
+                            }
 
-                        // Display duration if available
-                        if(config.displayDuration) {
-                            _displayDuration();
+                            // Display duration if available
+                            if(config.displayDuration) {
+                                _displayDuration();
+                            }
                         }
                     },
                     onStateChange: function(event) {
@@ -1692,10 +1688,12 @@
             }
             _on(window, "keyup", function(event) {
                 var code = (event.keyCode ? event.keyCode : event.which);
+
                 if(code == 9) { checkFocus(); }
             });
             for (var button in player.buttons) {
                 var element = player.buttons[button];
+
                 _on(element, "blur", function() {
                     _toggleClass(element, "tab-focus", false);
                 });
@@ -1982,7 +1980,7 @@
 
             case "youtube": 
                 basic = true;
-                full  = !oldIE;
+                full  = (!oldIE && !iPhone);
                 break; 
 
             default:
diff --git a/src/less/plyr.less b/src/less/plyr.less
index 69f490e1..08a9178d 100644
--- a/src/less/plyr.less
+++ b/src/less/plyr.less
@@ -316,6 +316,8 @@
 
     // Tooltips
     &-tooltip {
+        @border-base: darken(@tooltip-bg, 8%);
+
         visibility: hidden;
         position: absolute;
         z-index: 2;
@@ -325,6 +327,7 @@
 
         opacity: 0;
         background: @tooltip-bg;
+        border: 1px solid @border-base;
         border-radius: @tooltip-radius;
         color: @tooltip-color;
         font-size: @font-size-small;
@@ -334,20 +337,23 @@
         transform: translate(-50%, (@tooltip-padding * 3)) scale(0);
         transform-origin: 50% 100%;
         transition: transform .2s .1s ease, opacity .2s .1s ease;
-
+      
+        // Arrow
         &::after {
             content: "";
-            display: block;
             position: absolute;
+            z-index: 1;
+            top: 100%;
             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;
+            display: block;
+            width: 10px;
+            height: 10px;
+            background: @tooltip-bg;
+            transform: translate(-50%, -50%) rotate(45deg) translateY(2px);
+            
+            @arrow-border-color: darken(@border-base, 5%);
+            border: 1px solid rgba(red(@arrow-border-color), green(@arrow-border-color), blue(@arrow-border-color), .8);
+            border-width: 0 1px 1px 0;
         }
     }
     label:hover .player-tooltip,
diff --git a/src/sass/plyr.scss b/src/sass/plyr.scss
index eeda4f4c..95a444a2 100644
--- a/src/sass/plyr.scss
+++ b/src/sass/plyr.scss
@@ -314,6 +314,8 @@ $bp-captions-large:       768px !default; // When captions jump to the larger fo
 
     // Tooltips
     &-tooltip {
+        $border-base: darken($tooltip-bg, 8%);
+
         visibility: hidden;
         position: absolute;
         z-index: 2;
@@ -323,6 +325,7 @@ $bp-captions-large:       768px !default; // When captions jump to the larger fo
 
         opacity: 0;
         background: $tooltip-bg;
+        border: 1px solid $border-base;
         border-radius: $tooltip-radius;
         color: $tooltip-color;
         font-size: $font-size-small;
@@ -333,25 +336,28 @@ $bp-captions-large:       768px !default; // When captions jump to the larger fo
         transform-origin: 50% 100%;
         transition: transform .2s .1s ease, opacity .2s .1s ease;
 
+        // Arrow
         &::after {
             content: "";
-            display: block;
             position: absolute;
+            z-index: 1;
+            top: 100%;
             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;
+            display: block;
+            width: 10px;
+            height: 10px;
+            background: $tooltip-bg;
+            transform: translate(-50%, -50%) rotate(45deg) translateY(2px);
+            
+            $arrow-border-color: darken($border-base, 5%);
+            border: 1px solid rgba(red($arrow-border-color), green($arrow-border-color), blue($arrow-border-color), .8);
+            border-width: 0 1px 1px 0;
         }
     }
     label:hover .player-tooltip,
-    input:focus + label .player-tooltip,
+    input.tab-focus:focus + label .player-tooltip, 
     button:hover .player-tooltip,
-    button:focus .player-tooltip {
+    button.tab-focus:focus .player-tooltip {
         visibility: visible;
         opacity: 1;
         transform: translate(-50%, 0) scale(1);