ampvideobaseelement docs

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 <VideoIframe {...props}>
 ```
 
-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()

extensions/amp-video/1.0/video-iframe.js

@@ -211,7 +211,7 @@ export {VideoIframeInternal};
 
 /**
  * VideoWrapper using an <iframe> for implementation.
- * Usable on the AMP layer through VideoBaseElement.
+ * Usable on the AMP layer through AmpVideoBaseElement.
  * @param {VideoIframeDef.Props} props
  * @param {{current: (?T)}} ref
  * @return {PreactDef.Renderable}
@@ -223,7 +223,7 @@ function VideoIframeWithRef(props, ref) {
 
 /**
  * VideoWrapper using an <iframe> for implementation.
- * Usable on the AMP layer through VideoBaseElement.
+ * Usable on the AMP layer through AmpVideoBaseElement.
  * @param {VideoIframeDef.Props} props
  * @return {PreactDef.Renderable}=
  */