web/video.js
1
0
Fork 0
mirror of https://github.com/videojs/video.js.git synced 2024-12-25 02:42:10 +02:00
Code Releases Activity

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

Browse Source
This commit is contained in:
Steve Heffernan 2013-11-26 16:53:23 -08:00
parent 875fc2ff32
commit ef0d63b5ba
7 changed files with 64 additions and 162 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
CHANGELOG.md
View File

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

25
src/js/poster.js
View File

@ -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,20 +48,14 @@ 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
@ -66,10 +63,10 @@ vjs.PosterImage.prototype.src = function(url){
// 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;
}
};

1
test/index.html
View File

@ -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'
];

61
test/unit/controls.js vendored
View File

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

97
test/unit/player.js
View File

@ -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;
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';
tag = PlayerTest.makeTag();
tag.setAttribute('poster', poster);
fixture = document.getElementById('qunit-fixture');
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');
var pcEmitted = false;
player.on('posterchange', function(){
pcEmitted = true;
});
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']
});
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');
fixture.appendChild(tag);
player = new vjs.Player(tag, {
'techOrder': ['mediaFaker']
});
originalPoster = player.poster();
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();
});

33
test/unit/poster.js Normal file
View File

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

7
test/unit/test-helpers.js
View File

@ -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);
}
};
};