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

fix: Remove img el when there's no poster source (#8130)

Browse Source 
* fix: No invalid img el with no poster source

* move dom changes into setSrc
This commit is contained in:
mister-ben 2023-02-20 10:04:39 +01:00 committed by GitHub
parent 2c7eea889a
commit a27ee053bb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 39 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
src/js/poster-image.js
View File

@ -46,23 +46,9 @@ class PosterImage extends ClickableComponent {
* The element that gets created.
*/
createEl() {
const el = Dom.createEl(
'picture', {
className: 'vjs-poster',
// Don't want poster to be tabbable.
tabIndex: -1
},
{},
Dom.createEl('img', {
loading: 'lazy',
crossOrigin: this.crossOrigin()
}, {
alt: ''
})
);
return el;
// The el is an empty div to keep position in the DOM
// A picture and img el will be inserted when a source is set
return Dom.createEl('div', { className: 'vjs-poster'});
}
/**
@ -79,9 +65,9 @@ class PosterImage extends ClickableComponent {
crossOrigin(value) {
// `null` can be set to unset a value
if (typeof value === 'undefined') {
if (this.el_) {
if (this.$('img')) {
// If the poster's element exists, give its value
return this.el_.querySelector('img').crossOrigin;
return this.$('img').crossOrigin;
} else if (this.player_.tech_ && this.player_.tech_.isReady_) {
// If not but the tech is ready, query the tech
return this.player_.crossOrigin();
@ -97,7 +83,9 @@ class PosterImage extends ClickableComponent {
return;
}
this.el_.querySelector('img').crossOrigin = value;
if (this.$('img')) {
this.$('img').crossOrigin = value;
}
return;
}
@ -125,13 +113,38 @@ class PosterImage extends ClickableComponent {
}
/**
* Set the source of the `PosterImage` depending on the display method.
* Set the source of the `PosterImage` depending on the display method. (Re)creates
* the inner picture and img elementss when needed.
*
* @param {string} url
* The URL to the source for the `PosterImage`.
* @param {string} [url]
* The URL to the source for the `PosterImage`. If not specified or falsy,
* any source and ant inner picture/img are removed.
*/
setSrc(url) {
this.el_.querySelector('img').src = url;
if (!url) {
this.el_.textContent = '';
return;
}
if (!this.$('img')) {
this.el_.appendChild(Dom.createEl(
'picture', {
className: 'vjs-poster',
// Don't want poster to be tabbable.
tabIndex: -1
},
{},
Dom.createEl('img', {
loading: 'lazy',
crossOrigin: this.crossOrigin()
}, {
alt: ''
})
));
}
this.$('img').src = url;
}
/**

2
test/unit/poster.test.js
View File

@ -61,6 +61,7 @@ QUnit.test('should remove itself from the document flow when there is no poster'
true,
'Poster image hides with an empty source'
);
assert.equal(posterImage.$('img'), null, 'Poster image with no source has no img el');
// Updated with a valid source
this.mockPlayer.poster_ = this.poster2;
@ -70,6 +71,7 @@ QUnit.test('should remove itself from the document flow when there is no poster'
false,
'Poster image shows again when there is a source'
);
assert.ok(posterImage.$('img'), 'Poster image with source restores img el');
posterImage.dispose();
});