Tab focus and caption position fixes (fixes #61, fixes #92)

3 files changed, 75 insertions, 35 deletions

diff --git a/src/js/plyr.js b/src/js/plyr.js
index 269274fd..4e379da6 100644
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr
-// plyr.js v1.2.1
+// plyr.js v1.2.2
 // https://github.com/selz/plyr
 // License: The MIT License (MIT)
 // ==========================================================================
@@ -59,7 +59,7 @@
             loading:            "loading",
             tooltip:            "player-tooltip",
             hidden:             "sr-only",
-            hover:              "hover",
+            hover:              "player-hover",
             captions: {
                 enabled:        "captions-enabled",
                 active:         "captions-active"
@@ -1322,7 +1322,7 @@
             // Show the player controls
             function _showControls() {
                 // Set shown class
-                _toggleClass(player.controls, config.classes.hover, true);
+                _toggleClass(player.container, config.classes.hover, true);
 
                 // Clear timer every movement
                 window.clearTimeout(hoverTimer);
@@ -1330,7 +1330,7 @@
                 // If the mouse is not over the controls, set a timeout to hide them
                 if(!isMouseOver) {
                     hoverTimer = window.setTimeout(function() {
-                        _toggleClass(player.controls, config.classes.hover, false);
+                        _toggleClass(player.container, config.classes.hover, false);
                     }, 2000);
                 }
             }
@@ -1675,6 +1675,32 @@
             // IE doesn't support input event, so we fallback to change
             var inputEvent = (player.browser.name == "IE" ? "change" : "input");
 
+            // Detect tab focus
+            function checkFocus() {
+                var focused = document.activeElement;
+                if (!focused || focused == document.body) {
+                    focused = null;
+                }
+                else if (document.querySelector){
+                    focused = document.querySelector(":focus");
+                }
+                for (var button in player.buttons) {
+                    var element = player.buttons[button];
+
+                    _toggleClass(element, "tab-focus", (element === focused));
+                }
+            }
+            _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);
+                });
+            }
+
             // Play
             _on(player.buttons.play, "click", function() { 
                 _play(); 
diff --git a/src/less/plyr.less b/src/less/plyr.less
index 5ff29b3a..69f490e1 100644
--- a/src/less/plyr.less
+++ b/src/less/plyr.less
@@ -351,9 +351,9 @@
         }
     }
     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);
@@ -596,16 +596,7 @@
         .player-video-wrapper {
             height: 100%;
             width: 100%;
-
-            .player-captions {
-                top: auto;
-                bottom: 90px;
-
-                @media (min-width: @bp-control-split) {
-                    bottom: 60px;
-                }
-            }
-        }
+        }  
         .player-controls {
             position: absolute;
             bottom: 0;
@@ -614,13 +605,29 @@
         }
 
         // Hide controls when playing in full screen
-        &.fullscreen-hide-controls.playing .player-controls {
-            transform: translateY(100%) translateY(@control-spacing / 2);
-            transition: transform .3s .2s ease;
-
-            &.hover {
+        &.fullscreen-hide-controls.playing {
+            .player-controls {
+                transform: translateY(100%) translateY(@control-spacing / 2);
+                transition: transform .3s .2s ease;
+            }
+            &.player-hover .player-controls {
                 transform: translateY(0);
             }
+            .player-captions {
+                bottom: (@control-spacing / 2);
+                transition: bottom .3s .2s ease;
+            }
+        }
+
+        // Captions
+        .player-captions,
+        &.fullscreen-hide-controls.playing.player-hover .player-captions {
+            top: auto;
+            bottom: 90px;
+
+            @media (min-width: @bp-control-split) {
+                bottom: 60px;
+            }
         }
     }
 
diff --git a/src/sass/plyr.scss b/src/sass/plyr.scss
index 5e8150e7..eeda4f4c 100644
--- a/src/sass/plyr.scss
+++ b/src/sass/plyr.scss
@@ -594,15 +594,6 @@ $bp-captions-large:       768px !default; // When captions jump to the larger fo
         .player-video-wrapper {
             height: 100%;
             width: 100%;
-
-            .player-captions {
-                top: auto;
-                bottom: 90px;
-
-                @media (min-width: $bp-control-split) {
-                    bottom: 60px;
-                }
-            }
         }
         .player-controls {
             position: absolute;
@@ -612,13 +603,29 @@ $bp-captions-large:       768px !default; // When captions jump to the larger fo
         }
 
         // Hide controls when playing in full screen
-        &.fullscreen-hide-controls.playing .player-controls {
-            transform: translateY(100%) translateY($control-spacing / 2);
-            transition: transform .3s .2s ease;
-
-            &.hover {
+        &.fullscreen-hide-controls.playing {
+            .player-controls {
+                transform: translateY(100%) translateY($control-spacing / 2);
+                transition: transform .3s .2s ease;
+            }
+            &.player-hover .player-controls {
                 transform: translateY(0);
             }
+            .player-captions {
+                bottom: (@control-spacing / 2);
+                transition: bottom .3s .2s ease;
+            }
+        }
+
+        // Captions
+        .player-captions,
+        &.fullscreen-hide-controls.playing.player-hover .player-captions {
+            top: auto;
+            bottom: 90px;
+
+            @media (min-width: $bp-control-split) {
+                bottom: 60px;
+            }
         }
     }