✨ Add VideoInterface support to Connatix Player component (#39558)

* Add VideoInterface support to Connatix Player component

* Add documentation for AMP docking support

* fix validator test output

* fix test config

* potential fi

* validator fixes

* remove unused import

build-system/test-configs/dep-check-config.js

@@ -356,6 +356,8 @@ exports.rules = [
         'src/service/video-manager-impl.js',
       'extensions/amp-gfycat/0.1/amp-gfycat.js->' +
         'src/service/video-manager-impl.js',
+      'extensions/amp-connatix-player/0.1/amp-connatix-player.js->' +
+        'src/service/video-manager-impl.js',
       'extensions/amp-a4a/0.1/friendly-frame-util.js->' +
         'src/service/url-replacements-impl.js',
       'extensions/amp-nexxtv-player/0.1/amp-nexxtv-player.js->' +

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

@@ -13,6 +13,7 @@ import {PauseHelper} from '#core/dom/video/pause-helper';
 import {tryParseJson} from '#core/types/object/json';
 
 import {Services} from '#service';
+import {installVideoManagerForDoc} from '#service/video-manager-impl';
 
 import {getData} from '#utils/event-helper';
 import {userAssert} from '#utils/log';
@@ -23,8 +24,12 @@ import {
   getConsentPolicySharedData,
   getConsentPolicyState,
 } from '../../../src/consent';
+import {redispatch} from '../../../src/iframe-video';
 import {addParamsToUrl} from '../../../src/url';
-import {setIsMediaComponent} from '../../../src/video-interface';
+import {
+  VideoEvents_Enum,
+  setIsMediaComponent,
+} from '../../../src/video-interface';
 
 /**
  * @param {!Array<T>} promises
@@ -84,6 +89,9 @@ export class AmpConnatixPlayer extends AMP.BaseElement {
 
     /** @private @const */
     this.pauseHelper_ = new PauseHelper(this.element);
+
+    /** @private {boolean} */
+    this.isFullscreen_ = false;
   }
 
   /**
@@ -149,7 +157,24 @@ export class AmpConnatixPlayer extends AMP.BaseElement {
           this.playerReadyResolver_(this.iframe_);
           break;
         }
+        case 'cnxContentPlaying': {
+          this.pauseHelper_.updatePlaying(true);
+          break;
+        }
+        case 'cnxContentPaused': {
+          this.pauseHelper_.updatePlaying(false);
+          break;
+        }
+        case 'cnxFullscreenChanged': {
+          this.isFullscreen_ = !this.isFullscreen_;
+          break;
+        }
       }
+
+      redispatch(this.element, dataJSON['func'].toString(), {
+        'cnxContentPlaying': VideoEvents_Enum.PLAYING,
+        'cnxContentPaused': VideoEvents_Enum.PAUSE,
+      });
     });
   }
 
@@ -227,6 +252,8 @@ export class AmpConnatixPlayer extends AMP.BaseElement {
   buildCallback() {
     const {element} = this;
 
+    installVideoManagerForDoc(element);
+
     setIsMediaComponent(element);
 
     // Player id is mandatory
@@ -289,6 +316,8 @@ export class AmpConnatixPlayer extends AMP.BaseElement {
     element.appendChild(iframe);
     this.iframe_ = /** @type {HTMLIFrameElement} */ (iframe);
 
+    Services.videoManagerForDoc(element).register(this);
+
     // bind to player events (playerRendered after we can send commands to player and other)
     this.bindToPlayerCommands_();
     // bind to amp consent and send consent info to the iframe content and propagate to player
@@ -339,6 +368,112 @@ export class AmpConnatixPlayer extends AMP.BaseElement {
 
     return true;
   }
+
+  // VideoInterface Implementation. See ../src/video-interface.VideoInterface
+
+  /** @override */
+  supportsPlatform() {
+    return true;
+  }
+
+  /** @override */
+  isInteractive() {
+    return true;
+  }
+
+  /** @override */
+  play(unusedIsAutoplay) {
+    this.sendCommand_('play');
+  }
+
+  /** @override */
+  pause() {
+    this.sendCommand_('pause');
+  }
+
+  /** @override */
+  mute() {
+    this.sendCommand_('mute');
+  }
+
+  /** @override */
+  unmute() {
+    this.sendCommand_('unmute');
+  }
+
+  /** @override */
+  showControls() {
+    // Not supported.
+  }
+
+  /** @override */
+  hideControls() {
+    // Not supported.
+  }
+
+  /** @override */
+  fullscreenEnter() {
+    if (!this.iframe_) {
+      return;
+    }
+
+    this.sendCommand_('enterFullscreen');
+  }
+
+  /** @override */
+  fullscreenExit() {
+    if (!this.iframe_) {
+      return;
+    }
+
+    this.sendCommand_('exitFullscreen');
+  }
+
+  /** @override */
+  isFullscreen() {
+    if (!this.iframe_) {
+      return false;
+    }
+    return this.isFullscreen_;
+  }
+
+  /** @override */
+  getMetadata() {
+    // Not implemented
+  }
+
+  /** @override */
+  preimplementsMediaSessionAPI() {
+    return true;
+  }
+
+  /** @override */
+  preimplementsAutoFullscreen() {
+    return false;
+  }
+
+  /** @override */
+  getCurrentTime() {
+    // Not implemented
+    return NaN;
+  }
+
+  /** @override */
+  getDuration() {
+    // Not implemented
+    return NaN;
+  }
+
+  /** @override */
+  getPlayedRanges() {
+    // Not supported.
+    return [];
+  }
+
+  /** @override */
+  seekTo(unusedTimeSeconds) {
+    this.user().error('TAG', '`seekTo` not supported.');
+  }
 }
 
 AMP.extension('amp-connatix-player', '0.1', (AMP) => {

extensions/amp-connatix-player/0.1/test/validator-amp-connatix-player.html

@@ -25,6 +25,14 @@
     width="150"
     height="80">
   </amp-connatix-player>
+  <!-- Invalid: dock without amp-video-docking extension -->
+  <amp-connatix-player
+    data-player-id="f721b0d8-7a79-42b6-b637-fa4e86138ed9"
+    layout="responsive"
+    width="150"
+    height="80"
+    dock>
+  </amp-connatix-player>
   <!-- Valid -->
   <amp-connatix-player
     data-player-id="f721b0d8-7a79-42b6-b637-fa4e86138ed9"

extensions/amp-connatix-player/0.1/test/validator-amp-connatix-player.out

@@ -28,6 +28,16 @@ amp-connatix-player/0.1/test/validator-amp-connatix-player.html:23:2 The mandato
 |      width="150"
 |      height="80">
 |    </amp-connatix-player>
+|    <!-- Invalid: dock without amp-video-docking extension -->
+|    <amp-connatix-player
+>>   ^~~~~~~~~
+amp-connatix-player/0.1/test/validator-amp-connatix-player.html:29:2 The attribute 'dock' requires including the 'amp-video-docking' extension JavaScript.
+|      data-player-id="f721b0d8-7a79-42b6-b637-fa4e86138ed9"
+|      layout="responsive"
+|      width="150"
+|      height="80"
+|      dock>
+|    </amp-connatix-player>
 |    <!-- Valid -->
 |    <amp-connatix-player
 |      data-player-id="f721b0d8-7a79-42b6-b637-fa4e86138ed9"
@@ -36,4 +46,4 @@ amp-connatix-player/0.1/test/validator-amp-connatix-player.html:23:2 The mandato
 |      height="80">
 |    </amp-connatix-player>
 |  </body>
-|  </html>
+|  </html>

extensions/amp-connatix-player/amp-connatix-player.md

@@ -42,6 +42,10 @@ This can be found at the Library section in the Connatix management dashboard.
 
 All `data-param-*` prefixed attributes are turned into URL parameters and passed to iframe src.
 
+### `dock`
+Requires `amp-video-docking` extension. If this attribute is present and the video is playing manually, the video will be "minimized" and fixed to a corner or an element when the user scrolls out of the video component's visual area.
+For more details, see [documentation on the docking extension itself](https://github.com/ampproject/amphtml/blob/master/extensions/amp-video-docking/amp-video-docking.md).
+
 ### Common attributes
 
 This element includes [common attributes](https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes)

extensions/amp-connatix-player/validator-amp-connatix-player.protoascii

@@ -17,6 +17,10 @@ tags: {  # <amp-connatix-player>
     name: "data-player-id"
     mandatory: true
   }
+  attrs: {
+    name: "dock"
+    requires_extension: "amp-video-docking"
+  }
   spec_url: "https://amp.dev/documentation/components/amp-connatix-player/"
   amp_layout: {
     supported_layouts: FILL