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,44 @@
+/**
+ * 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);
+
+    player.on('loadstart', vjs.bind(this, this.updateContent));
+  }
+});
+
+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">LIVE</span>LIVE',
+    'aria-live': 'off'
+  });
+
+  el.appendChild(this.contentEl_);
+
+  return el;
+};
+
+vjs.LiveDisplay.prototype.updateContent = function(){
+
+  // Most Live streams, like RTMP, will report a duration value of -1
+  // HLS Live report window.INFINITY
+
+  /*
+  if (player.duration() < 0 || player.duration() === window.INFINITY) {
+    this.show();
+  } else {
+    this.hide();
+  }
+  */
+};

src/js/player.js

@@ -507,6 +507,13 @@ vjs.Player.prototype.onDurationChange = function(){
   if (duration) {
     this.duration(duration);
   }
+
+  // Determine if the stream is live and propagate styles down to UI.
+  if (duration <= 0 || duration === window.INFINITY) {
+    this.addClass('vjs-live');
+  } else {
+    this.removeClass('vjs-live');
+  }
 };
 
 /**