From 53aa9ebadbc6c4abd79533b29ce091e996762e6f Mon Sep 17 00:00:00 2001 From: Keshav Varadachari Date: Wed, 12 Jan 2022 10:52:17 -0500 Subject: [PATCH] ampvideobaseelement docs --- docs/building-a-bento-video-player.md | 41 ++++++++++++++++++------ extensions/amp-video/1.0/video-iframe.js | 4 +-- 2 files changed, 33 insertions(+), 12 deletions(-) diff --git a/docs/building-a-bento-video-player.md b/docs/building-a-bento-video-player.md index d632632a10e19..bed705eb1a875 100644 --- a/docs/building-a-bento-video-player.md +++ b/docs/building-a-bento-video-player.md @@ -14,7 +14,7 @@ - [How Video Player Components Work](#how-video-player-components-work) - [Getting Started](#getting-started) - [Directory Structure](#directory-structure) -- [Extend `VideoBaseElement` for AMP](#extend-videobaseelement-for-amp) +- [Extend `AmpVideoBaseElement` for AMP](#extend-ampvideobaseelement-for-amp) - [`props`](#props) - [Define a Preact component](#define-a-preact-component) - [Forwarding `ref`](#forwarding-ref) @@ -51,7 +51,7 @@ However, most video players are embedded through an iframe so they should use ** return ``` -To enable component support for **AMP documents**, our video player element must extend from a base class `VideoBaseElement`. This enables [actions](https://amp.dev/documentation/guides-and-tutorials/learn/amp-actions-and-events/#amp-video-and-other-video-elements_1) and [analytics](https://github.com/ampproject/amphtml/blob/main/extensions/amp-analytics/amp-video-analytics.md), and allows us to define further behavior specific to the AMP layer, like parsing element attributes into Preact props. +To enable component support for **AMP documents**, our video player element must extend from a base class `AmpVideoBaseElement`. This enables [actions](https://amp.dev/documentation/guides-and-tutorials/learn/amp-actions-and-events/#amp-video-and-other-video-elements_1) and [analytics](https://github.com/ampproject/amphtml/blob/main/extensions/amp-analytics/amp-video-analytics.md), and allows us to define further behavior specific to the AMP layer, like parsing element attributes into Preact props. This guide covers how to implement video player components that are internally implemented using these Preact and AMP components. @@ -75,17 +75,17 @@ A [full directory for a Bento component](./building-a-bento-amp-extension.md#dir └── amp-my-fantastic-player.css # Custom CSS ``` -## Extend `VideoBaseElement` for AMP +## Extend `AmpVideoBaseElement` for AMP -Our `BaseElement` should be a superclass of `VideoBaseElement`. In **`base-element.js`**, we change: +Our `BaseElement` should be a superclass of `BentoVideoBaseElement`. In **`base-element.js`**, we change: ```diff import {MyFantasticPlayer} from './component'; - import {PreactBaseElement} from '#preact/base-element'; -+ import {VideoBaseElement} from '../../amp-video/1.0/video-base-element'; ++ import {BentoVideoBaseElement} from '../../amp-video/1.0/base-element'; - export class BaseElement extends PreactBaseElement {} -+ export class BaseElement extends VideoBaseElement {} ++ export class BaseElement extends BentoVideoBaseElement {} ``` into: @@ -94,16 +94,37 @@ into: // base-element.js // ... import {MyFantasticPlayer} from './component'; -import {VideoBaseElement} from '../../amp-video/1.0/base-element'; +import {BentoVideoBaseElement} from '../../amp-video/1.0/base-element'; -export class BaseElement extends VideoBaseElement {} +export class BaseElement extends BentoVideoBaseElement {} +``` + +Our `AmpFantasticPlayer` should be a superclass of `AmpVideoBaseElement`. in amp-fantastic-player.js, we chagne: + +```diff ++ import {setSuperClass} from '#preact/amp-base-element'; + ++ import {AmpVideoBaseElement} from '../../amp-video/1.0/video-base-element'; + +- class AmpFantasticPlayer extends BaseElement {} ++ class AmpFantasticPlayer extends setSuperClass(BaseElement, AmpVideoBaseElement) {} +``` + +into: + +```js +import {setSuperClass} from '#preact/amp-base-element'; + +import {AmpVideoBaseElement} from '../../amp-video/1.0/video-base-element'; + +class AmpFantasticPlayer extends setSuperClass(BaseElement, AmpVideoBaseElement) {} ``` This enables support for AMP actions and analytics, once we map attributes to their prop counterparts in `BaseElement['props']`, and we implement the Preact component. ### `props` -[**`props`**](https://github.com/ampproject/amphtml/blob/main/docs/building-a-bento-amp-extension.md#preactbaseelementprops) map the AMP element's attributes to the Preact component props. Take a look at [`VideoBaseElement`](../extensions/amp-video/1.0/base-element.js) for how most video properties are mapped. On your own `base-element.js`, you should specify any of them you support. +[**`props`**](https://github.com/ampproject/amphtml/blob/main/docs/building-a-bento-amp-extension.md#preactbaseelementprops) map the AMP element's attributes to the Preact component props. Take a look at [`AmpVideoBaseElement`](../extensions/amp-video/1.0/video-base-element.js) for how most video properties are mapped. On your own `base-element.js`, you should specify any of them you support. ```js // base-element.js @@ -510,7 +531,7 @@ When we click the following button on an AMP document: We call the corresponding function `play`: -> The AMP action `my-element.play` is declared to be forwarded to the Preact component's method. See the [`init()` method on `VideoBaseElement`](../extensions/amp-video/1.0/base-element.js) for a list of the supported actions. +> The AMP action `my-element.play` is declared to be forwarded to the Preact component's method. See the [`init()` method on `AmpVideoBaseElement`](../extensions/amp-video/1.0/video-base-element.js) for a list of the supported actions. ``` -> FantasticPlayer.play() diff --git a/extensions/amp-video/1.0/video-iframe.js b/extensions/amp-video/1.0/video-iframe.js index 923af77a7be7d..a002b9619f22b 100644 --- a/extensions/amp-video/1.0/video-iframe.js +++ b/extensions/amp-video/1.0/video-iframe.js @@ -209,7 +209,7 @@ export {VideoIframeInternal}; /** * VideoWrapper using an