videojs_rails 4.8.5 → 4.9.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: fd3726f0bcb50d96a549cd38708be1bb4b3d0e38
-  data.tar.gz: 2b455501a0e722edfea7674eabfadbb60943ca6e
+  metadata.gz: dd83ed4ae38c370b448785bff4dfabccc489277c
+  data.tar.gz: 67eb6cadd49fe9623c20c6bf9a6e9fc1ba1a7802
 SHA512:
-  metadata.gz: d0bc45fb6f8af378b09346432560df7a7b6745a77037740b47734153e23f65f5db3e8d877430a93fb07115e635829554c73f7e71d2501f65671c8e863b8e46ba
-  data.tar.gz: 7175ddcba6b9c779f21628e907f5f918e698c3ea8ceb92d0e6d0ca68fe71efa04face1c91b50291448d4179664036e550ba703ced671a5102f7a50aa529941b1
+  metadata.gz: ae07acbaeda8ac7e420b761b4b79126eae148cb3964bd5b985a24af34f9799a545d6203add474aa2dddb5d4e0a9c1e5651072117ef9ba583a195fc295b8984e5
+  data.tar.gz: 53d5a6b2a2fec3ce534ce0f9dc7cd24c3f2268bd0a7049c046d68add803f02401be1128f4005c925afc42f4314bb66a4537b7648407ac7da913847abe5a2cbb4

data/lib/videojs_rails/version.rb

@@ -1,3 +1,3 @@
 module VideojsRails
-  VERSION = '4.8.5'
+  VERSION = '4.9.0'
 end

data/vendor/assets/javascripts/video.js.erb

@@ -63,7 +63,7 @@ var vjs = function(id, options, ready){
 var videojs = window['videojs'] = vjs;
 
 // CDN Version. Used to target right flash swf.
-vjs.CDN_VERSION = '4.8';
+vjs.CDN_VERSION = '4.9';
 vjs.ACCESS_PROTOCOL = ('https:' == document.location.protocol ? 'https://' : 'http://');
 
 /**
@@ -116,7 +116,7 @@ vjs.options = {
 };
 
 // Set CDN Version of swf
-// The added (+) blocks the replace from changing this 4.8 string
+// The added (+) blocks the replace from changing this 4.9 string
 if (vjs.CDN_VERSION !== 'GENERATED'+'_CDN_VSN') {
   videojs.options['flash']['swf'] = "<%= asset_path('video-js.swf') %>";
 }
@@ -972,6 +972,17 @@ vjs.isEmpty = function(obj) {
   return true;
 };
 
+/**
+ * Check if an element has a CSS class
+ * @param {Element} element Element to check
+ * @param {String} classToCheck Classname to check
+ * @private
+ */
+vjs.hasClass = function(element, classToCheck){
+  return ((' ' + element.className + ' ').indexOf(' ' + classToCheck + ' ') !== -1);
+};
+
+
 /**
  * Add a CSS class name to an element
  * @param {Element} element    Element to add class name to
@@ -979,7 +990,7 @@ vjs.isEmpty = function(obj) {
  * @private
  */
 vjs.addClass = function(element, classToAdd){
-  if ((' '+element.className+' ').indexOf(' '+classToAdd+' ') == -1) {
+  if (!vjs.hasClass(element, classToAdd)) {
     element.className = element.className === '' ? classToAdd : element.className + ' ' + classToAdd;
   }
 };
@@ -993,7 +1004,7 @@ vjs.addClass = function(element, classToAdd){
 vjs.removeClass = function(element, classToRemove){
   var classNames, i;
 
-  if (element.className.indexOf(classToRemove) == -1) { return; }
+  if (!vjs.hasClass(element, classToRemove)) {return;}
 
   classNames = element.className.split(' ');
 
@@ -2267,6 +2278,16 @@ vjs.Component.prototype.triggerReady = function(){
 /* Display
 ============================================================================= */
 
+/**
+ * Check if a component's element has a CSS class name
+ *
+ * @param {String} classToCheck Classname to check
+ * @return {vjs.Component}
+ */
+vjs.Component.prototype.hasClass = function(classToCheck){
+  return vjs.hasClass(this.el_, classToCheck);
+};
+
 /**
  * Add a CSS class name to the component's element
  *
@@ -2713,6 +2734,17 @@ vjs.Slider = vjs.Component.extend({
   }
 });
 
+vjs.Slider.prototype.dispose = function() {
+  vjs.off(document, 'mousemove', this.boundEvents.move, false);
+  vjs.off(document, 'mouseup', this.boundEvents.end, false);
+  vjs.off(document, 'touchmove', this.boundEvents.move, false);
+  vjs.off(document, 'touchend', this.boundEvents.end, false);
+
+  vjs.off(document, 'keyup', vjs.bind(this, this.onKeyPress));
+
+  vjs.Component.prototype.dispose.call(this);
+};
+
 vjs.Slider.prototype.createEl = function(type, props) {
   props = props || {};
   // Add the slider element class to all sub classes
@@ -3128,7 +3160,6 @@ vjs.MenuButton.prototype.unpressButton = function(){
   this.menu.unlockShowing();
   this.el_.setAttribute('aria-pressed', false);
 };
-
 /**
  * Custom MediaError to mimic the HTML5 MediaError
  * @param {Number} code The media error code
@@ -3349,6 +3380,9 @@ vjs.Player = vjs.Component.extend({
     // see enableTouchActivity in Component
     options.reportTouchActivity = false;
 
+    // Set isAudio based on whether or not an audio tag was used
+    this.isAudio(this.tag.nodeName.toLowerCase() === 'audio');
+
     // Run base component initializing with new options.
     // Builds the element through createEl()
     // Inits and embeds any child components in opts
@@ -3362,6 +3396,10 @@ vjs.Player = vjs.Component.extend({
       this.addClass('vjs-controls-disabled');
     }
 
+    if (this.isAudio()) {
+      this.addClass('vjs-audio');
+    }
+
     // TODO: Make this smarter. Toggle user state between touching/mousing
     // using events, since devices can have both touch and mouse events.
     // if (vjs.TOUCH_ENABLED) {
@@ -3452,12 +3490,24 @@ vjs.Player.prototype.dispose = function(){
 };
 
 vjs.Player.prototype.getTagSettings = function(tag){
-  var options = {
-    'sources': [],
-    'tracks': []
-  };
+  var tagOptions,
+      dataSetup,
+      options = {
+        'sources': [],
+        'tracks': []
+      };
+
+  tagOptions = vjs.getElementAttributes(tag);
+  dataSetup = tagOptions['data-setup'];
 
-  vjs.obj.merge(options, vjs.getElementAttributes(tag));
+  // Check if data-setup attr exists.
+  if (dataSetup !== null){
+    // Parse options JSON
+    // If empty string, make it a parsable json object.
+    vjs.obj.merge(tagOptions, vjs.JSON.parse(dataSetup || '{}'));
+  }
+
+  vjs.obj.merge(options, tagOptions);
 
   // Get tag children settings
   if (tag.hasChildNodes()) {
@@ -3517,7 +3567,13 @@ vjs.Player.prototype.createEl = function(){
   // ID will now reference player box, not the video tag
   attrs = vjs.getElementAttributes(tag);
   vjs.obj.each(attrs, function(attr) {
-    el.setAttribute(attr, attrs[attr]);
+    // workaround so we don't totally break IE7
+    // http://stackoverflow.com/questions/3653444/css-styles-not-applied-on-dynamic-elements-in-internet-explorer-7
+    if (attr == 'class') {
+      el.className = attrs[attr];
+    } else {
+      el.setAttribute(attr, attrs[attr]);
+    }
   });
 
   // Update tag id/class for use as HTML5 playback tech
@@ -3768,7 +3824,7 @@ vjs.Player.prototype.onPause = function(){
 /**
  * Fired when the current playback position has changed
  *
- * During playback this is fired every 15-250 milliseconds, depnding on the
+ * During playback this is fired every 15-250 milliseconds, depending on the
  * playback technology in use.
  * @event timeupdate
  */
@@ -4549,6 +4605,8 @@ vjs.Player.prototype.poster = function(src){
 
   // alert components that the poster has been set
   this.trigger('posterchange');
+
+  return this;
 };
 
 /**
@@ -4831,6 +4889,16 @@ vjs.Player.prototype.playbackRate = function(rate) {
 
 };
 
+vjs.Player.prototype.isAudio_ = false;
+vjs.Player.prototype.isAudio = function(bool) {
+  if (bool !== undefined) {
+    this.isAudio_ = !!bool;
+    return this;
+  }
+
+  return this.isAudio_;
+};
+
 // Methods to add support for
 // networkState: function(){ return this.techCall('networkState'); },
 // readyState: function(){ return this.techCall('readyState'); },
@@ -5594,6 +5662,12 @@ vjs.VolumeMenuButton.prototype.createMenu = function(){
     contentElType: 'div'
   });
   var vc = new vjs.VolumeBar(this.player_, vjs.obj.merge({'vertical': true}, this.options_.volumeBar));
+  vc.on('focus', function() {
+    menu.lockShowing();
+  });
+  vc.on('blur', function() {
+    menu.unlockShowing();
+  });
   menu.addChild(vc);
   return menu;
 };
@@ -5765,7 +5839,9 @@ vjs.PosterImage = vjs.Button.extend({
       this.src(player.poster());
     }));
 
-    player.on('play', vjs.bind(this, this.hide));
+    if (!player.isAudio()) {
+      player.on('play', vjs.bind(this, this.hide));
+    }
   }
 });
 
@@ -7216,8 +7292,6 @@ vjs.TextTrack = vjs.Component.extend({
     this.activeCues_ = [];
     this.readyState_ = 0;
     this.mode_ = 0;
-
-    this.player_.on('fullscreenchange', vjs.bind(this, this.adjustFontSize));
   }
 });
 
@@ -7375,22 +7449,6 @@ vjs.TextTrack.prototype.mode = function(){
   return this.mode_;
 };
 
-/**
- * Change the font size of the text track to make it larger when playing in fullscreen mode
- * and restore it to its normal size when not in fullscreen mode.
- */
-vjs.TextTrack.prototype.adjustFontSize = function(){
-    if (this.player_.isFullscreen()) {
-        // Scale the font by the same factor as increasing the video width to the full screen window width.
-        // Additionally, multiply that factor by 1.4, which is the default font size for
-        // the caption track (from the CSS)
-        this.el_.style.fontSize = screen.width / this.player_.width() * 1.4 * 100 + '%';
-    } else {
-        // Change the font size of the text track back to its original non-fullscreen size
-        this.el_.style.fontSize = '';
-    }
-};
-
 /**
  * Create basic div to hold cue text
  * @return {Element}
@@ -8185,33 +8243,48 @@ if (typeof window.JSON !== 'undefined' && window.JSON.parse === 'function') {
 
 // Automatically set up any tags that have a data-setup attribute
 vjs.autoSetup = function(){
-  var options, vid, player,
-      vids = document.getElementsByTagName('video');
+  var options, mediaEl, player, i, e;
+
+  // One day, when we stop supporting IE8, go back to this, but in the meantime...*hack hack hack*
+  // var vids = Array.prototype.slice.call(document.getElementsByTagName('video'));
+  // var audios = Array.prototype.slice.call(document.getElementsByTagName('audio'));
+  // var mediaEls = vids.concat(audios);
+
+  // Because IE8 doesn't support calling slice on a node list, we need to loop through each list of elements
+  // to build up a new, combined list of elements.
+  var vids = document.getElementsByTagName('video');
+  var audios = document.getElementsByTagName('audio');
+  var mediaEls = [];
+  if (vids && vids.length > 0) {
+    for(i=0, e=vids.length; i<e; i++) {
+      mediaEls.push(vids[i]);
+    }
+  }
+  if (audios && audios.length > 0) {
+    for(i=0, e=audios.length; i<e; i++) {
+      mediaEls.push(audios[i]);
+    }
+  }
 
   // Check if any media elements exist
-  if (vids && vids.length > 0) {
+  if (mediaEls && mediaEls.length > 0) {
 
-    for (var i=0,j=vids.length; i<j; i++) {
-      vid = vids[i];
+    for (i=0,e=mediaEls.length; i<e; i++) {
+      mediaEl = mediaEls[i];
 
       // Check if element exists, has getAttribute func.
       // IE seems to consider typeof el.getAttribute == 'object' instead of 'function' like expected, at least when loading the player immediately.
-      if (vid && vid.getAttribute) {
+      if (mediaEl && mediaEl.getAttribute) {
 
         // Make sure this player hasn't already been set up.
-        if (vid['player'] === undefined) {
-          options = vid.getAttribute('data-setup');
+        if (mediaEl['player'] === undefined) {
+          options = mediaEl.getAttribute('data-setup');
 
           // Check if data-setup attr exists.
           // We only auto-setup if they've added the data-setup attr.
           if (options !== null) {
-
-            // Parse options JSON
-            // If empty string, make it a parsable json object.
-            options = vjs.JSON.parse(options || '{}');
-
             // Create new video.js instance.
-            player = videojs(vid, options);
+            player = videojs(mediaEl);
           }
         }
 

data/vendor/assets/stylesheets/video-js.css.erb

@@ -1,6 +1,6 @@
 /*!
 Video.js Default Styles (http://videojs.com)
-Version 4.8.5
+Version 4.9.0
 Create your own skin at http://designer.videojs.com
 */
 /* SKIN
@@ -123,6 +123,11 @@ The default control bar that is a container for most of the controls.
 .vjs-default-skin.vjs-error .vjs-control-bar {
   display: none;
 }
+/* Don't hide the control bar if it's audio */
+.vjs-audio.vjs-default-skin.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
+  opacity: 1;
+  visibility: visible;
+}
 /* IE8 is flakey with fonts, and you have to change the actual content to force
 fonts to show/hide properly.
   - "\9" IE8 hack didn't work for this
@@ -144,7 +149,7 @@ fonts to show/hide properly.
   height: 3.0em;
   width: 4em;
 }
-/* FontAwsome button icons */
+/* Font button icons */
 .vjs-default-skin .vjs-control:before {
   font-family: VideoJS;
   font-size: 1.5em;
@@ -244,9 +249,6 @@ fonts to show/hide properly.
   height: 0.6em;
   margin: 1.1em auto 0;
 }
-.vjs-default-skin .vjs-volume-menu-button .vjs-menu-content {
-  height: 2.9em;
-}
 .vjs-default-skin .vjs-volume-level {
   position: absolute;
   top: 0;
@@ -273,9 +275,31 @@ fonts to show/hide properly.
   width: 1em;
   height: 1em;
 }
+/* The volume menu button is like menu buttons (captions/subtitles) but works
+    a little differently. It needs to be possible to tab to the volume slider
+    without hitting space bar on the menu button. To do this we're not using
+    display:none to hide the slider menu by default, and instead setting the
+    width and height to zero. */
+.vjs-default-skin .vjs-volume-menu-button .vjs-menu {
+  display: block;
+  width: 0;
+  height: 0;
+  border-top-color: transparent;
+}
 .vjs-default-skin .vjs-volume-menu-button .vjs-menu .vjs-menu-content {
-  width: 6em;
-  left: -4em;
+  height: 0;
+  width: 0;
+}
+.vjs-default-skin .vjs-volume-menu-button:hover .vjs-menu,
+.vjs-default-skin .vjs-volume-menu-button .vjs-menu.vjs-lock-showing {
+  border-top-color: rgba(7, 40, 50, 0.5);
+  /* Same as ul background */
+
+}
+.vjs-default-skin .vjs-volume-menu-button:hover .vjs-menu .vjs-menu-content,
+.vjs-default-skin .vjs-volume-menu-button .vjs-menu.vjs-lock-showing .vjs-menu-content {
+  height: 2.9em;
+  width: 10em;
 }
 /* Progress
 --------------------------------------------------------------------------------
@@ -686,7 +710,8 @@ easily in the skin designer. http://designer.videojs.com/
   -moz-box-shadow: -0.2em -0.2em 0.3em rgba(255, 255, 255, 0.2);
   box-shadow: -0.2em -0.2em 0.3em rgba(255, 255, 255, 0.2);
 }
-.vjs-default-skin .vjs-menu-button:hover .vjs-menu {
+.vjs-default-skin .vjs-menu-button:hover .vjs-control-content .vjs-menu,
+.vjs-default-skin .vjs-control-content .vjs-menu.vjs-lock-showing {
   display: block;
 }
 .vjs-default-skin .vjs-menu-button ul li {
@@ -893,6 +918,10 @@ body.vjs-full-window {
 .vjs-tt-cue {
   display: block;
 }
+/* Increase font-size when fullscreen */
+.video-js.vjs-fullscreen .vjs-text-track {
+  font-size: 3em;
+}
 /* Hide disabled or unsupported controls */
 .vjs-default-skin .vjs-hidden {
   display: none;

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: videojs_rails
 version: !ruby/object:Gem::Version
-  version: 4.8.5
+  version: 4.9.0
 platform: ruby
 authors:
 - Sean Behan