feat(poster): add support for marking player as maincontent (#9173)

Author: kontrollanten

src/js/poster-image.js

@@ -28,6 +28,10 @@ class PosterImage extends ClickableComponent {
   constructor(player, options) {
     super(player, options);
 
+    const { mainContent } = (options && options.playerOptions) || {};
+
+    this.isMainContent = mainContent;
+
     this.update();
 
     this.update_ = (e) => this.update(e);
@@ -139,7 +143,8 @@ class PosterImage extends ClickableComponent {
         },
         {},
         Dom.createEl('img', {
-          loading: 'lazy',
+          loading: this.isMainContent ? 'eager' : 'lazy',
+          fetchPriority: this.isMainContent ? 'high' : 'auto',
           crossOrigin: this.crossOrigin()
         }, {
           alt: ''

test/unit/poster.test.js

@@ -32,6 +32,15 @@ QUnit.test('should create and update a poster image', function(assert) {
   posterImage.dispose();
 });
 
+QUnit.test('should mark img as prioritized request when mainContent is true', function(assert) {
+  const posterImage = new PosterImage(this.mockPlayer, { playerOptions: { mainContent: true } });
+
+  assert.equal(posterImage.$('img').loading, 'eager', 'img is loading eager');
+  assert.equal(posterImage.$('img').fetchPriority, 'high', 'img has fetchpriority high');
+
+  posterImage.dispose();
+});
+
 QUnit.test('should mirror crossOrigin', function(assert) {
   assert.strictEqual(this.mockPlayer.posterImage.$('img').crossOrigin, null, 'crossOrigin not set when not present in options');
   assert.strictEqual(this.mockPlayer.posterImage.crossOrigin(), null, 'crossOrigin not set from getter when not present in options');