Fixed display the LIVE control bar item

...and also the layout in IE8 when live

Reorganized the styles some to group the vjs-live changes
with the components their affecting.

closes #2551

CHANGELOG.md

@@ -121,6 +121,7 @@ CHANGELOG
 * @gkatsev fixed the default state of userActive ([view](https://github.com/videojs/video.js/pull/2557))
 * @heff fixed event bubbling in IE8 ([view](https://github.com/videojs/video.js/pull/2563))
 * @heff cleaned up internal duration handling ([view](https://github.com/videojs/video.js/pull/2552))
+* @heff fixed the UI for live streams ([view](https://github.com/videojs/video.js/pull/2557))
 
 --------------------
 

src/css/components/_live.scss

@@ -1,11 +1,14 @@
-.video-js.vjs-live .vjs-time-control,
-.video-js.vjs-live .vjs-time-divider,
-.video-js.vjs-live .vjs-progress-control {
-  display: none;
-}
-
+// We are assuming there is no progress bar and using the live display
+// to fill in the middle space. Live+DVR will need to adjust this.
 .video-js .vjs-live-control {
-  display: none;
+  @include display-flex(flex-start);
+  @include flex(auto);
   font-size: 1em;
   line-height: 3em;
 }
+
+.vjs-no-flex .vjs-live-control {
+  display: table-cell;
+  width: auto;
+  text-align: left;
+}

src/css/components/_progress.scss

@@ -17,6 +17,10 @@
   @include display-flex(center);
 }
 
+.vjs-live .vjs-progress-control {
+  display: none;
+}
+
 /* Box containing play and load progresses. Also acts as seek scrubber. */
 .video-js .vjs-progress-holder {
   @include flex(auto);
@@ -25,7 +29,9 @@
 }
 
 /* We need an increased hit area on hover */
-.video-js .vjs-progress-control:hover .vjs-progress-holder { font-size: 1.666666666666666666em }
+.video-js .vjs-progress-control:hover .vjs-progress-holder {
+  font-size: 1.666666666666666666em
+}
 
 /* Also show the current time tooltip */
 .video-js .vjs-progress-control:hover .vjs-play-progress:after {

src/css/components/_time.scss

@@ -4,7 +4,28 @@
   line-height: 3em;
 }
 
+.vjs-live .vjs-time-control {
+  display: none;
+}
+
 /* We need the extra specificity that referencing .vjs-no-flex provides. */
-.video-js .vjs-current-time, .video-js.vjs-no-flex .vjs-current-time { display: none; }
-.video-js .vjs-duration, .video-js.vjs-no-flex .vjs-duration { display: none; }
-.vjs-time-divider { display: none; line-height: 3em; }
+.video-js .vjs-current-time,
+.video-js.vjs-no-flex .vjs-current-time {
+  display: none;
+}
+
+.video-js .vjs-duration,
+.video-js.vjs-no-flex .vjs-duration {
+  display: none;
+}
+
+.vjs-time-divider {
+  display: none;
+  line-height: 3em;
+}
+
+.vjs-live .vjs-time-divider {
+  // Already the default, but we want to ensure when the player is live
+  // this hides in the same way as the other time controls for other skins
+  display: none;
+}

src/js/control-bar/live-display.js

@@ -7,12 +7,19 @@ import * as Dom from '../utils/dom.js';
 /**
  * Displays the live indicator
  * TODO - Future make it click to snap to live
- * 
+ *
  * @extends Component
  * @class LiveDisplay
  */
 class LiveDisplay extends Component {
 
+  constructor(player, options) {
+    super(player, options);
+
+    this.updateShowing();
+    this.on(this.player(), 'durationchange', this.updateShowing);
+  }
+
   /**
    * Create the component's DOM element
    *
@@ -31,10 +38,17 @@ class LiveDisplay extends Component {
     });
 
     el.appendChild(this.contentEl_);
-
     return el;
   }
 
+  updateShowing() {
+    if (this.player().duration() === Infinity) {
+      this.show();
+    } else {
+      this.hide();
+    }
+  }
+
 }
 
 Component.registerComponent('LiveDisplay', LiveDisplay);

src/js/control-bar/spacer-controls/custom-control-spacer.js

@@ -29,9 +29,14 @@ class CustomControlSpacer extends Spacer {
    * @method createEl
    */
   createEl() {
-    return super.createEl({
-      className: this.buildCSSClass()
+    let el = super.createEl({
+      className: this.buildCSSClass(),
     });
+
+    // No-flex/table-cell mode requires there be some content
+    // in the cell to fill the remaining space of the table.
+    el.innerHTML = ' ';
+    return el;
   }
 }