fix: Progress holder gaps cause tooltips misalignment and time toolti…

…p outlines (#4031)

* Address #3645 by using pixel margins
* Fix outlines

Fixes #3645

src/css/components/_progress.scss

@@ -25,6 +25,15 @@
   height: 0.3em;
 }
 
+.video-js .vjs-progress-control .vjs-progress-holder {
+
+  // This is one of the rare cases where we are using a pixel dimension. The
+  // reason is that the progress holder font-size changes on hover. With the
+  // default em-based margins, this means it gets narrower and causes issues
+  // with mouseover behaviors/math.
+  margin: 0 10px;
+}
+
 // This increases the size of the progress holder so there is an increased
 // hit area for clicks/touches.
 .video-js .vjs-progress-control:hover .vjs-progress-holder {
@@ -83,17 +92,14 @@
 
 // .vjs-time-tooltip
 //
-// These elements are displayed above the progress bar. They are not components
-// themselves, but they are managed by the MouseTimeDisplay and PlayProgressBar
-// components individually.
+// These elements are displayed above the progress bar.
 //
 // By default, they are hidden and only shown when hovering over the progress
 // control.
 .video-js .vjs-time-tooltip {
   @include background-color-with-alpha(#fff, 0.8);
   @include border-radius(0.3em);
   color: #000;
-  display: inline-block;
 
   // By floating the tooltips to the right, their right edge becomes aligned
   // with the right edge of their parent element. However, in order to have them
@@ -114,7 +120,13 @@
   z-index: 1;
 }
 
-.video-js .vjs-progress-control:hover .vjs-time-tooltip {
+.video-js .vjs-progress-holder:focus .vjs-time-tooltip {
+  display: none;
+}
+
+.video-js .vjs-progress-control:hover .vjs-time-tooltip,
+.video-js .vjs-progress-control:hover .vjs-progress-holder:focus .vjs-time-tooltip {
+  display: block;
 
   // Ensure that we maintain a font-size of ~10px.
   font-size: 0.6em;

src/js/control-bar/progress-control/play-progress-bar.js

@@ -15,19 +15,6 @@ import './time-tooltip';
  */
 class PlayProgressBar extends Component {
 
-  /**
-   * Creates an instance of this class.
-   *
-   * @param {Player} player
-   *        The {@link Player} that this class should be attached to.
-   *
-   * @param {Object} [options]
-   *        The key/value store of player options.
-   */
-  constructor(player, options) {
-    super(player, options);
-  }
-
   /**
    * Create the the DOM element for this class.
    *