Basic UI for Live

Squashed commit of the following:

commit 2c5d4d523e2e1f3a1bcdafda292d6a0ebea7a200
Author: Tom Johnson <seniorflexdeveloper@gmail.com>
Date:   Tue Apr 1 15:02:37 2014 -0700

    update control text for liveDisplay component

commit 10f21cc2a09b6823a73fae4cf1881490f9038d30
Author: Tom Johnson <seniorflexdeveloper@gmail.com>
Date:   Tue Apr 1 12:23:20 2014 -0700

    whitespace fix

commit 6a093d67989479f63ed4ac6bdddd5d1a3d0b08bb
Author: Tom Johnson <seniorflexdeveloper@gmail.com>
Date:   Tue Apr 1 12:21:42 2014 -0700

    remove window scope of infinity

commit 2dd8284bd3c7b2c7692a78563c3cfe9558f25ab4
Author: Tom Johnson <seniorflexdeveloper@gmail.com>
Date:   Tue Apr 1 12:12:13 2014 -0700

    update to fix infinity capitalization. only do css logic on valid duration. set any duration of less than zero to window.Infinity

commit f940bef8b50156c5b8fcd969c9b5d39be9fe5589
Author: Tom Johnson <seniorflexdeveloper@gmail.com>
Date:   Tue Apr 1 10:01:27 2014 -0700

    update to less than zero on player durationChange

commit 554c003dac640b7a658355cd46b6ab146cf50b24
Author: Tom Johnson <seniorflexdeveloper@gmail.com>
Date:   Mon Mar 31 17:26:13 2014 -0700

    update exports, fix tests

commit 2fb10cb06a65c3f91342563bfa925d9a472ede33
Author: Tom Johnson <seniorflexdeveloper@gmail.com>
Date:   Mon Mar 31 13:39:00 2014 -0700

    fix tests, remove update display list in LiveDisplay

commit bc47c5ed67e036c79067ebc6666b310fd0b68d04
Author: Tom Johnson <seniorflexdeveloper@gmail.com>
Date:   Mon Mar 31 13:13:43 2014 -0700

    Basic UI for Live

build/source-loader.js

@@ -26,6 +26,7 @@ var sourceFiles = [
   "src/js/menu.js",
   "src/js/player.js",
   "src/js/control-bar/control-bar.js",
+  "src/js/control-bar/live-display.js",
   "src/js/control-bar/play-toggle.js",
   "src/js/control-bar/time-display.js",
   "src/js/control-bar/fullscreen-toggle.js",

src/css/video-js.less

@@ -400,6 +400,27 @@ fonts to show/hide properly.
   padding-top: 0.1em /* Minor adjustment */;
 }
 
+/* Live Mode
+--------------------------------------------------------------------------------
+*/
+.vjs-default-skin.vjs-live .vjs-time-controls,
+.vjs-default-skin.vjs-live .vjs-time-divider,
+.vjs-default-skin.vjs-live .vjs-progress-control {
+  display: none;
+}
+.vjs-default-skin.vjs-live .vjs-live-display {
+  display: block;
+}
+
+/* Live Display
+--------------------------------------------------------------------------------
+*/
+.vjs-default-skin .vjs-live-display {
+  display: none;
+  font-size: 1em;
+  line-height: 3em;
+}
+
 /* Time Display
 --------------------------------------------------------------------------------
 */

src/js/control-bar/control-bar.js

@@ -16,6 +16,7 @@ vjs.ControlBar.prototype.options_ = {
     'timeDivider': {},
     'durationDisplay': {},
     'remainingTimeDisplay': {},
+    'liveDisplay': {},
     'progressControl': {},
     'fullscreenToggle': {},
     'volumeControl': {},

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

@@ -0,0 +1,28 @@
+/**
+ * Displays the live indicator
+ * TODO - Future make it click to snap to live
+ * @param {vjs.Player|Object} player
+ * @param {Object=} options
+ * @constructor
+ */
+vjs.LiveDisplay = vjs.Component.extend({
+  init: function(player, options){
+    vjs.Component.call(this, player, options);
+  }
+});
+
+vjs.LiveDisplay.prototype.createEl = function(){
+  var el = vjs.Component.prototype.createEl.call(this, 'div', {
+    className: 'vjs-live-controls vjs-control'
+  });
+
+  this.contentEl_ = vjs.createEl('div', {
+    className: 'vjs-live-display',
+    innerHTML: '<span class="vjs-control-text">Stream Type </span>LIVE',
+    'aria-live': 'off'
+  });
+
+  el.appendChild(this.contentEl_);
+
+  return el;
+};

src/js/exports.js

@@ -84,6 +84,7 @@ goog.exportSymbol('videojs.CurrentTimeDisplay', vjs.CurrentTimeDisplay);
 goog.exportSymbol('videojs.DurationDisplay', vjs.DurationDisplay);
 goog.exportSymbol('videojs.TimeDivider', vjs.TimeDivider);
 goog.exportSymbol('videojs.RemainingTimeDisplay', vjs.RemainingTimeDisplay);
+goog.exportSymbol('videojs.LiveDisplay', vjs.LiveDisplay);
 goog.exportSymbol('videojs.Slider', vjs.Slider);
 goog.exportSymbol('videojs.ProgressControl', vjs.ProgressControl);
 goog.exportSymbol('videojs.SeekBar', vjs.SeekBar);

src/js/player.js

@@ -505,7 +505,16 @@ vjs.Player.prototype.onDurationChange = function(){
   // accidentally cause the stack to blow up.
   var duration = this.techGet('duration');
   if (duration) {
+    if (duration < 0) {
+      duration = Infinity;
+    }
     this.duration(duration);
+    // Determine if the stream is live and propagate styles down to UI.
+    if (duration === Infinity) {
+      this.addClass('vjs-live');
+    } else {
+      this.removeClass('vjs-live');
+    }
   }
 };