Basic UI for Live

Squashed commit of the following: commit 2c5d4d5 Author: Tom Johnson <[email protected]> Date: Tue Apr 1 15:02:37 2014 -0700 update control text for liveDisplay component commit 10f21cc Author: Tom Johnson <[email protected]> Date: Tue Apr 1 12:23:20 2014 -0700 whitespace fix commit 6a093d6 Author: Tom Johnson <[email protected]> Date: Tue Apr 1 12:21:42 2014 -0700 remove window scope of infinity commit 2dd8284 Author: Tom Johnson <[email protected]> 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 f940bef Author: Tom Johnson <[email protected]> Date: Tue Apr 1 10:01:27 2014 -0700 update to less than zero on player durationChange commit 554c003 Author: Tom Johnson <[email protected]> Date: Mon Mar 31 17:26:13 2014 -0700 update exports, fix tests commit 2fb10cb Author: Tom Johnson <[email protected]> Date: Mon Mar 31 13:39:00 2014 -0700 fix tests, remove update display list in LiveDisplay commit bc47c5e Author: Tom Johnson <[email protected]> Date: Mon Mar 31 13:13:43 2014 -0700 Basic UI for Live
yakey2008 · Apr 2, 2014 · 6a097c0 · 6a097c0
1 parent efe25c0
commit 6a097c0
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 0 deletions.
diff --git a/build/source-loader.js b/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",

diff --git a/src/css/video-js.less b/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
 --------------------------------------------------------------------------------
 */

diff --git a/src/js/control-bar/control-bar.js b/src/js/control-bar/control-bar.js
@@ -16,6 +16,7 @@ vjs.ControlBar.prototype.options_ = {
     'timeDivider': {},
     'durationDisplay': {},
     'remainingTimeDisplay': {},
+    'liveDisplay': {},
     'progressControl': {},
     'fullscreenToggle': {},
     'volumeControl': {},

diff --git a/src/js/control-bar/live-display.js b/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;
+};
diff --git a/src/js/exports.js b/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);

diff --git a/src/js/player.js b/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');
+    }
   }
 };