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');
+    }
   }
 };