♻️ Consolidate players as .i-amphtml-media-component

css/video-autoplay.css

@@ -35,7 +35,7 @@ i-amphtml-video-mask {
 }
 
 amp-video[controls] .amp-video-eq,
-.i-amphtml-video-component:not(amp-video) .amp-video-eq,
+.i-amphtml-video-interface:not(amp-video) .amp-video-eq,
 amp-story .amp-video-eq {
   display: flex;
 }

extensions/amp-audio/0.1/amp-audio.js

@@ -63,6 +63,8 @@ export class AmpAudio extends AMP.BaseElement {
       this.buildAudioElement();
     }
 
+    this.element.classList.add('i-amphtml-media-component');
+
     this.registerAction('play', this.play_.bind(this));
     this.registerAction('pause', this.pause_.bind(this));
   }

extensions/amp-connatix-player/0.1/amp-connatix-player.js

@@ -93,6 +93,8 @@ export class AmpConnatixPlayer extends AMP.BaseElement {
   buildCallback() {
     const {element} = this;
 
+    element.classList.add('i-amphtml-media-component');
+
     // Player id is mandatory
     this.playerId_ = userAssert(
       element.getAttribute('data-player-id'),

extensions/amp-hulu/0.1/amp-hulu.js

@@ -74,6 +74,8 @@ class AmpHulu extends AMP.BaseElement {
 
   /** @override */
   buildCallback() {
+    this.element.classList.add('i-amphtml-media-component');
+
     this.eid_ = userAssert(
       this.element.getAttribute('data-eid'),
       'The data-eid attribute is required for <amp-hulu> %s',

extensions/amp-izlesene/0.1/amp-izlesene.js

@@ -60,6 +60,8 @@ class AmpIzlesene extends AMP.BaseElement {
 
   /** @override */
   buildCallback() {
+    this.element.classList.add('i-amphtml-media-component');
+
     this.videoid_ = userAssert(
       this.element.getAttribute('data-videoid'),
       'The data-videoid attribute is required for <amp-izlesene> %s',

extensions/amp-jwplayer/0.1/amp-jwplayer.js

@@ -74,6 +74,8 @@ class AmpJWPlayer extends AMP.BaseElement {
 
   /** @override */
   buildCallback() {
+    this.element.classList.add('i-amphtml-media-component');
+
     const {element} = this;
     this.contentid_ = userAssert(
       element.getAttribute('data-playlist-id') ||

extensions/amp-kaltura-player/0.1/amp-kaltura-player.js

@@ -61,6 +61,8 @@ class AmpKaltura extends AMP.BaseElement {
       this.element
     );
 
+    this.element.classList.add('i-amphtml-media-component');
+
     this.entryId_ = this.element.getAttribute('data-entryid') || 'default';
   }
 

extensions/amp-megaphone/0.1/amp-megaphone.js

@@ -78,6 +78,7 @@ class AmpMegaphone extends AMP.BaseElement {
 
   /** @override */
   buildCallback() {
+    this.element.classList.add('i-amphtml-media-component');
     this.updateBaseUrl_();
   }
 

extensions/amp-o2-player/0.1/amp-o2-player.js

@@ -59,6 +59,8 @@ class AmpO2Player extends AMP.BaseElement {
 
   /** @override */
   buildCallback() {
+    this.element.classList.add('i-amphtml-media-component');
+
     this.pid_ = userAssert(
       this.element.getAttribute('data-pid'),
       'data-pid attribute is required for <amp-o2-player> %s',

extensions/amp-reach-player/0.1/amp-reach-player.js

@@ -43,6 +43,11 @@ class AmpReachPlayer extends AMP.BaseElement {
     return isLayoutSizeDefined(layout);
   }
 
+  /** @override */
+  buildCallback() {
+    this.element.classList.add('i-amphtml-media-component');
+  }
+
   /** @override */
   layoutCallback() {
     const embedId = this.element.getAttribute('data-embed-id') || 'default';

extensions/amp-soundcloud/0.1/amp-soundcloud.js

@@ -58,6 +58,11 @@ class AmpSoundcloud extends AMP.BaseElement {
     return isLayoutSizeDefined(layout);
   }
 
+  /** @override */
+  buildCallback() {
+    this.element.classList.add('i-amphtml-media-component');
+  }
+
   /**@override*/
   layoutCallback() {
     const height = this.element.getAttribute('height');

extensions/amp-springboard-player/0.1/amp-springboard-player.js

@@ -66,6 +66,8 @@ class AmpSpringboardPlayer extends AMP.BaseElement {
 
   /** @override */
   buildCallback() {
+    this.element.classList.add('i-amphtml-media-component');
+
     this.mode_ = userAssert(
       this.element.getAttribute('data-mode'),
       'The data-mode attribute is required for <amp-springboard-player> %s',

src/service/video-manager-impl.js

@@ -192,7 +192,7 @@ export class VideoManager {
     const {element} = entry.video;
     element.dispatchCustomEvent(VideoEvents.REGISTERED);
 
-    element.classList.add('i-amphtml-video-component');
+    element.classList.add('i-amphtml-media-component');
 
     // Unlike events, signals are permanent. We can wait for `REGISTERED` at any
     // moment in the element's lifecycle and the promise will resolve

test/visual-diff/visual-tests

@@ -772,21 +772,21 @@
       "name": "amp-video-docking (left-to-right)",
       "viewport": {"width": 800, "height": 600},
       "interactive_tests": "examples/visual-tests/amp-video-docking/amp-video-docking.js",
-      "loading_complete_selectors": [".i-amphtml-video-component"],
+      "loading_complete_selectors": [".i-amphtml-video-interface"],
     },
     {
       "url": "examples/visual-tests/amp-video-docking/rtl.html",
       "name": "amp-video-docking (right-to-left)",
       "viewport": {"width": 800, "height": 600},
       "interactive_tests": "examples/visual-tests/amp-video-docking/amp-video-docking.js",
-      "loading_complete_selectors": [".i-amphtml-video-component"],
+      "loading_complete_selectors": [".i-amphtml-video-interface"],
     },
     {
       "url": "examples/visual-tests/amp-video-docking/slot.html",
       "name": "amp-video-docking (slot)",
       "viewport": {"width": 800, "height": 600},
       "interactive_tests": "examples/visual-tests/amp-video-docking/amp-video-docking.js",
-      "loading_complete_selectors": [".i-amphtml-video-component"],
+      "loading_complete_selectors": [".i-amphtml-video-interface"],
     },
   ]
 }