Modified tests for #838 and updated changelog. closes #838

CHANGELOG.md

@@ -2,7 +2,7 @@ CHANGELOG
 =========
 
 ## Unreleased (HEAD)
-_(none)_
+* Made the poster updateable after initialization ([view](https://github.com/videojs/video.js/pull/838))
 
 --------------------
 

src/js/poster.js

@@ -28,6 +28,9 @@ vjs.PosterImage = vjs.Button.extend({
   }
 });
 
+// use the test el to check for backgroundSize style support
+var _backgroundSizeSupported = 'backgroundSize' in vjs.TEST_VID;
+
 vjs.PosterImage.prototype.createEl = function(){
   var el = vjs.createEl('div', {
     className: 'vjs-poster',
@@ -36,7 +39,7 @@ vjs.PosterImage.prototype.createEl = function(){
     tabIndex: -1
   });
 
-  if (!('backgroundSize' in el.style)) {
+  if (!_backgroundSizeSupported) {
     // setup an img element as a fallback for IE8
     el.appendChild(vjs.createEl('img'));
   }
@@ -45,31 +48,25 @@ vjs.PosterImage.prototype.createEl = function(){
 };
 
 vjs.PosterImage.prototype.src = function(url){
-  var el = this.el(), imgFallback;
+  var el = this.el();
 
   // getter
+  // can't think of a need for a getter here
+  // see #838 if on is needed in the future
+  // still don't want a getter to set src as undefined
   if (url === undefined) {
-    if ('backgroundSize' in el.style) {
-      if (el.style.backgroundImage) {
-        // parse the poster url from the background-image value
-        return (/url\(['"]?(.*)['"]?\)/).exec(el.style.backgroundImage)[1];
-      }
-
-      // the poster is not specified
-      return '';
-    }
-    return el.querySelector('img').src;
+    return;
   }
 
   // setter
   // To ensure the poster image resizes while maintaining its original aspect
   // ratio, use a div with `background-size` when available. For browsers that
   // do not support `background-size` (e.g. IE8), fall back on using a regular
   // img element.
-  if ('backgroundSize' in el.style) {
+  if (_backgroundSizeSupported) {
     el.style.backgroundImage = 'url("' + url + '")';
   } else {
-    el.querySelector('img').src = url;
+    el.firstChild.src = url;
   }
 };
 

test/index.html

@@ -29,6 +29,7 @@
         'test/unit/core.js',
         'test/unit/media.html5.js',
         'test/unit/controls.js',
+        'test/unit/poster.js',
         'test/unit/plugins.js',
         'test/unit/flash.js'
       ];

test/unit/controls.js

@@ -100,64 +100,3 @@ test('calculateDistance should use changedTouches, if available', function() {
 
   equal(slider.calculateDistance(event), 0.5, 'we should have touched exactly in the center, so, the ratio should be half');
 });
-
-test('the poster getter should work correctly even when background-size is not available', function() {
-  var noop = function(){},
-      url = 'http://example.com/poster.jpg',
-      player = {
-        controls: noop,
-        id: noop,
-        on: noop,
-        ready: noop,
-        poster: function(){
-          return url;
-        }
-      },
-      poster = new vjs.PosterImage(player);
-
-  // mock out el() to return an element that behaves like IE8
-  poster.el = function(){
-    return {
-      style: {},
-      querySelector: function() {
-        return {
-          src: url
-        };
-      }
-    };
-  };
-
-  equal(url, poster.src(), 'the poster url is returned');
-});
-
-test('the poster setter should reuse an img when background-size is not available', function() {
-  var noop = function(){},
-      url = 'http://example.com/poster.jpg',
-      img = {},
-      player = {
-        controls: noop,
-        id: noop,
-        on: noop,
-        ready: noop,
-        poster: function(){
-          return url;
-        }
-      },
-      poster = new vjs.PosterImage(player);
-
-  // mock out el() to return an element that behaves like IE8
-  poster.el = function(){
-    return {
-      appendChild: function() {
-        ok(false, 'a new img should not be added to the poster');
-      },
-      style: {},
-      querySelector: function() {
-        return img;
-      }
-    };
-  };
-
-  poster.src(url);
-  equal(img.src, url, 'the img is reused for the new src');
-});

test/unit/player.js

@@ -108,7 +108,6 @@ test('should get tag, source, and track settings', function(){
 
   player.dispose();
 
-
   ok(tag['player'] !== player, 'tag player ref killed');
   ok(!vjs.players['example_1'], 'global player ref killed');
   ok(player.el() === null, 'player el killed');
@@ -141,7 +140,7 @@ test('should not force width and height', function() {
   player.dispose();
 });
 
-test('should accept options from multiple sources and override in correct order', function(){
+test('should wrap the original tag in the player div', function(){
   var tag = PlayerTest.makeTag();
   var container = document.createElement('div');
   var fixture = document.getElementById('qunit-fixture');
@@ -159,94 +158,26 @@ test('should accept options from multiple sources and override in correct order'
   player.dispose();
 });
 
-test('should transfer the poster attribute unmodified', function(){
-  var tag, fixture, poster, player;
-  poster = 'http://example.com/poster.jpg';
-  tag = PlayerTest.makeTag();
-  tag.setAttribute('poster', poster);
-  fixture = document.getElementById('qunit-fixture');
-
-  fixture.appendChild(tag);
-  player = new vjs.Player(tag, {
-    'techOrder': ['mediaFaker']
-  });
-
-  equal(player.tech.el().poster, poster, 'the poster attribute should not be removed');
-
-  player.dispose();
-});
-
-test('should allow the poster to be changed after init', function() {
-  var tag, fixture, updatedPoster, player, posterElement, posterElementUrl, imageElement;
-  tag = PlayerTest.makeTag();
-  tag.setAttribute('poster', 'http://example.com/poster.jpg');
-  fixture = document.getElementById('qunit-fixture');
-
-  fixture.appendChild(tag);
-  player = new vjs.Player(tag, {
-    'techOrder': ['mediaFaker']
-  });
+test('should set and update the poster value', function(){
+  var tag, poster, updatedPoster, player;
 
+  poster = 'http://example.com/poster.jpg';
   updatedPoster = 'http://example.com/updated-poster.jpg';
-  player.poster(updatedPoster);
-
-  strictEqual(player.poster(), updatedPoster, 'the updated poster is returned');
-  strictEqual(player.tech.el().poster, updatedPoster, 'the poster attribute is updated');
-
-  posterElement = document.querySelector('.vjs-poster');
-  ok(posterElement, 'vjs-poster element should exist');
-
-  if (!('backgroundSize' in posterElement.style)) {
-    imageElement = document.getElementsByTagName('img')[0];
-    ok(imageElement, 'image element should exist if the poster div has no background-size CSS property');
-    var imageElementSrc = imageElement.getAttribute('src');
-    strictEqual(imageElementSrc,
-          updatedPoster,
-          'the poster img src is updated');
-  } else {
-    posterElementUrl = posterElement.style.backgroundImage.replace(/"/g, '');
-    strictEqual(posterElementUrl,
-            'url(' + updatedPoster + ')',
-            'the poster div background is updated');
-  }
 
-  player.dispose();
-});
-
-test('should ignore setting an undefined poster after init', function() {
-  var tag, fixture, updatedPoster, originalPoster, player, posterElement, posterElementUrl, imageElement;
   tag = PlayerTest.makeTag();
-  tag.setAttribute('poster', 'http://example.com/poster.jpg');
-  fixture = document.getElementById('qunit-fixture');
+  tag.setAttribute('poster', poster);
 
-  fixture.appendChild(tag);
-  player = new vjs.Player(tag, {
-    'techOrder': ['mediaFaker']
-  });
+  player = PlayerTest.makePlayer({}, tag);
+  equal(player.poster(), poster, 'the poster property should equal the tag attribute');
 
-  originalPoster = player.poster();
+  var pcEmitted = false;
+  player.on('posterchange', function(){
+    pcEmitted = true;
+  });
 
-  updatedPoster = undefined;
   player.poster(updatedPoster);
-  strictEqual(player.poster(), originalPoster, 'the original poster is returned');
-  strictEqual(player.tech.el().poster, originalPoster, 'the poster attribute is unchanged');
-
-  posterElement = document.querySelector('.vjs-poster');
-  ok(posterElement, 'vjs-poster element should exist');
-
-  if (!('backgroundSize' in posterElement.style)) {
-    imageElement = document.getElementsByTagName('img')[0];
-    ok(imageElement, 'image element should exist if the poster div has no background-size CSS property');
-    var imageElementSrc = imageElement.getAttribute('src');
-    strictEqual(imageElementSrc,
-          originalPoster,
-          'the poster img src is not updated');
-  } else {
-    posterElementUrl = posterElement.style.backgroundImage.replace(/"/g, '');
-    strictEqual(posterElementUrl,
-              'url(' + originalPoster + ')',
-              'the poster div background is unchanged');
-  }
+  ok(pcEmitted, 'posterchange event was emitted');
+  equal(player.poster(), updatedPoster, 'the updated poster is returned');
 
   player.dispose();
 });

test/unit/poster.js

@@ -0,0 +1,33 @@
+module('PosterImage');
+
+test('should update the poster source', function(){
+  var player, posterImage, posterEl, poster1, poster2;
+
+  poster1 = 'http://example.com/poster.jpg';
+  poster2 = 'http://example.com/UPDATED.jpg';
+
+  player = PlayerTest.makePlayer({ poster: poster1 });
+
+  posterImage = new vjs.PosterImage(player);
+  posterEl = posterImage.el();
+
+  // check alternative methods for displaying the poster
+  function checkPosterSource(src) {
+    var modern, oldIE;
+
+    // in modern browsers we use backgroundImage to display the poster
+    modern = posterEl.style.backgroundImage.toString().indexOf(src) !== -1;
+    // otherwise we create an image elemement
+    oldIE = posterEl.firstChild && posterEl.firstChild.src === src;
+
+    if (modern || oldIE) {
+      return true;
+    }
+    return false;
+  }
+
+  ok(checkPosterSource(poster1), 'displays the correct poster');
+
+  posterImage.src(poster2);
+  ok(checkPosterSource(poster2), 'displays the correct poster after updating');
+});

test/unit/test-helpers.js

@@ -5,9 +5,10 @@ var PlayerTest = {
     videoTag.className = 'video-js vjs-default-skin';
     return videoTag;
   },
-  makePlayer: function(playerOptions){
+  makePlayer: function(playerOptions, videoTag){
     var player;
-    var videoTag = PlayerTest.makeTag();
+
+    videoTag = videoTag || PlayerTest.makeTag();
 
     var fixture = document.getElementById('qunit-fixture');
     fixture.appendChild(videoTag);
@@ -17,4 +18,4 @@ var PlayerTest = {
 
     return player = new videojs.Player(videoTag, playerOptions);
   }
-};
+};