Tweak button styles, fix Safari visible focus bug

Author: terrill

build/ableplayer.dist.js

@@ -3663,8 +3663,8 @@
     // Removed rewind/forward in favor of seek bar.
 
     var controlLayout = {
-      'ul': ['play','restart'],
-      'ur': ['rewind','forward','seek'],
+      'ul': ['play','restart','rewind','forward'],
+      'ur': ['seek'],
       'bl': [],
       'br': []
     }
@@ -6912,7 +6912,7 @@
 
     var thisObj, duration, elapsed, lastChapterIndex, displayElapsed,
       updateLive, textByState, timestamp, widthUsed,
-      leftControls, rightControls, seekbarWidth, captionsCount,
+      leftControls, rightControls, seekbarWidth, seekbarSpacer, captionsCount,
       buffered, newTop, svgLink, newSvgLink;
 
     thisObj = this;
@@ -7098,6 +7098,8 @@
     // To do this, we need to calculate the width of all buttons surrounding it.
     if (this.seekBar) {
       widthUsed = 0;
+      seekbarSpacer = 40; // adjust for discrepancies in browsers' calculated button widths
+
       leftControls = this.seekBar.wrapperDiv.parent().prev('span.able-left-controls');
       rightControls = leftControls.next('span.able-right-controls');
       leftControls.children().each(function () {
@@ -7111,15 +7113,12 @@
         }
       });
       if (this.isFullscreen()) {
-        seekbarWidth = $(window).width() - widthUsed - 20;
+        seekbarWidth = $(window).width() - widthUsed - seekbarSpacer;
       }
       else {
-        seekbarWidth = this.$ableWrapper.width() - widthUsed - 20;
-      }
-      // Sometimes some minor fluctuations based on browser weirdness, so set a threshold.
-      if (Math.abs(seekbarWidth - this.seekBar.getWidth()) > 5) {
-        this.seekBar.setWidth(seekbarWidth);
+        seekbarWidth = this.$ableWrapper.width() - widthUsed - seekbarSpacer;
       }
+      this.seekBar.setWidth(seekbarWidth);
     }
 
     if (this.$descButton) {

build/ableplayer.js

@@ -3663,8 +3663,8 @@
     // Removed rewind/forward in favor of seek bar.
 
     var controlLayout = {
-      'ul': ['play','restart'],
-      'ur': ['rewind','forward','seek'],
+      'ul': ['play','restart','rewind','forward'],
+      'ur': ['seek'],
       'bl': [],
       'br': []
     }
@@ -6912,7 +6912,7 @@
 
     var thisObj, duration, elapsed, lastChapterIndex, displayElapsed,
       updateLive, textByState, timestamp, widthUsed,
-      leftControls, rightControls, seekbarWidth, captionsCount,
+      leftControls, rightControls, seekbarWidth, seekbarSpacer, captionsCount,
       buffered, newTop, svgLink, newSvgLink;
 
     thisObj = this;
@@ -7098,6 +7098,8 @@
     // To do this, we need to calculate the width of all buttons surrounding it.
     if (this.seekBar) {
       widthUsed = 0;
+      seekbarSpacer = 40; // adjust for discrepancies in browsers' calculated button widths
+
       leftControls = this.seekBar.wrapperDiv.parent().prev('span.able-left-controls');
       rightControls = leftControls.next('span.able-right-controls');
       leftControls.children().each(function () {
@@ -7111,15 +7113,12 @@
         }
       });
       if (this.isFullscreen()) {
-        seekbarWidth = $(window).width() - widthUsed - 20;
+        seekbarWidth = $(window).width() - widthUsed - seekbarSpacer;
       }
       else {
-        seekbarWidth = this.$ableWrapper.width() - widthUsed - 20;
-      }
-      // Sometimes some minor fluctuations based on browser weirdness, so set a threshold.
-      if (Math.abs(seekbarWidth - this.seekBar.getWidth()) > 5) {
-        this.seekBar.setWidth(seekbarWidth);
+        seekbarWidth = this.$ableWrapper.width() - widthUsed - seekbarSpacer;
       }
+      this.seekBar.setWidth(seekbarWidth);
     }
 
     if (this.$descButton) {

build/ableplayer.min.css

@@ -24,17 +24,15 @@ <h1>Able Player Video Demo #5:<br/>Video player with interactive transcript, sub
 
 <p>For additional demos see the <a href="index.html">Index of <em>Able Player</em> Examples</a>.</p>
 
-<video id="video1" preload="auto" width="480" height="360" poster="../media/wwa.jpg" data-able-player data-seekbar-scope="video" data-icon-type="font" data-speed-icons="animals">
+<video id="video1" preload="auto" width="480" height="360" poster="../media/wwa.jpg" data-able-player data-speed-icons="animals">
   <source type="video/webm" src="../media/wwa.webm" data-desc-src="../media/wwa_described.webm"/>
   <source type="video/mp4" src="../media/wwa.mp4" data-desc-src="../media/wwa_described.mp4"/>
   <!-- Able Player will display tracks alphabetically by label -->
-  <track kind="captions" src="../media/wwa_captions_en.vtt" srclang="en" label="English"/>
-<!--
   <track kind="subtitles" src="../media/wwa_captions_es.vtt" srclang="es" label="Espanol"/>
+  <track kind="captions" src="../media/wwa_captions_en.vtt" srclang="en" label="English"/>
   <track kind="descriptions" src="../media/wwa_description_en.vtt" srclang="en"/>
   <track kind="descriptions" src="../media/wwa_description_es.vtt" srclang="es"/>
   <track kind="chapters" src="../media/wwa_chapters_en.vtt" srclang="en"/>
--->
 </video>
 
 </body>

build/ableplayer.min.js

@@ -1,6 +1,6 @@
 {
   "name": "ableplayer",
-  "version": "2.3.66",
+  "version": "2.3.67",
   "description": "fully accessible HTML5 media player",
   "homepage": "http://ableplayer.github.io/ableplayer",
   "bugs": "https://github.com/ableplayer/ableplayer/issues",

demos/video5.html

@@ -863,8 +863,8 @@
     // Removed rewind/forward in favor of seek bar.
 
     var controlLayout = {
-      'ul': ['play','restart'],
-      'ur': ['rewind','forward','seek'],
+      'ul': ['play','restart','rewind','forward'],
+      'ur': ['seek'],
       'bl': [],
       'br': []
     }

media/windows.vtt

@@ -235,7 +235,7 @@
 
     var thisObj, duration, elapsed, lastChapterIndex, displayElapsed,
       updateLive, textByState, timestamp, widthUsed,
-      leftControls, rightControls, seekbarWidth, captionsCount,
+      leftControls, rightControls, seekbarWidth, seekbarSpacer, captionsCount,
       buffered, newTop, svgLink, newSvgLink;
 
     thisObj = this;
@@ -421,6 +421,8 @@
     // To do this, we need to calculate the width of all buttons surrounding it.
     if (this.seekBar) {
       widthUsed = 0;
+      seekbarSpacer = 40; // adjust for discrepancies in browsers' calculated button widths
+
       leftControls = this.seekBar.wrapperDiv.parent().prev('span.able-left-controls');
       rightControls = leftControls.next('span.able-right-controls');
       leftControls.children().each(function () {
@@ -434,15 +436,12 @@
         }
       });
       if (this.isFullscreen()) {
-        seekbarWidth = $(window).width() - widthUsed - 20;
+        seekbarWidth = $(window).width() - widthUsed - seekbarSpacer;
       }
       else {
-        seekbarWidth = this.$ableWrapper.width() - widthUsed - 20;
-      }
-      // Sometimes some minor fluctuations based on browser weirdness, so set a threshold.
-      if (Math.abs(seekbarWidth - this.seekBar.getWidth()) > 5) {
-        this.seekBar.setWidth(seekbarWidth);
+        seekbarWidth = this.$ableWrapper.width() - widthUsed - seekbarSpacer;
       }
+      this.seekBar.setWidth(seekbarWidth);
     }
 
     if (this.$descButton) {

package.json

@@ -151,25 +151,19 @@
   position: relative;
   display: inline-block;
   border-style: none;
-  margin: 0;
+  margin: 3px;
   padding: 0;
   font-size: 20px;
-  width: 40px;
-  min-width: 20px;
-  overflow: hidden !important;
+  min-width: 24px;
+  outline: 2px solid #464646; /* same color as .able-controller background-color */
+  border: none;
+  overflow: visible !important;
   z-index: 6600;
 }
-.able-controller button > span {
-  /* icomoon font icon */
-  font-size: 20px;
-  width: 24px;
-  margin: 0 5px;
-  padding: 0;
-  z-index: 6700;
-}
+.able-controller button > span,
 .able-controller button > img {
-  /* image icon */
-  margin: 0 5px;
+  width: 20px;
+  margin: 0 auto;
   padding: 0;
   z-index: 6700;
 }