♻️📖 Provide a Storybook wrapper to execute video actions (#34222)

Extract a wrapper to add video action buttons to an AMP Storybook.

https://user-images.githubusercontent.com/254946/117086191-c4e6d700-ad00-11eb-95ff-f9e3b51caf2b.png

extensions/amp-video/1.0/storybook/Basic.amp.js

@@ -15,6 +15,7 @@
  */
 
 import * as Preact from '../../../../src/preact';
+import {VideoElementWithActions} from './_helpers';
 import {boolean, number, object, text, withKnobs} from '@storybook/addon-knobs';
 import {withAmp} from '@ampproject/storybook-addon';
 
@@ -129,29 +130,12 @@ export const Default = () => {
   );
 };
 
-const ActionButton = ({children, ...props}) => (
-  <button style={{flex: 1, margin: '0 4px'}} {...props}>
-    {children}
-  </button>
-);
-
 export const Actions = () => {
+  const id = 'player';
   return (
-    <div style="max-width: 800px">
-      <AmpVideoWithKnobs id="player" />
-      <div
-        style={{
-          margin: '12px 0',
-          display: 'flex',
-        }}
-      >
-        <ActionButton on="tap:player.play">Play</ActionButton>
-        <ActionButton on="tap:player.pause">Pause</ActionButton>
-        <ActionButton on="tap:player.mute">Mute</ActionButton>
-        <ActionButton on="tap:player.unmute">Unmute</ActionButton>
-        <ActionButton on="tap:player.fullscreen">Fullscreen</ActionButton>
-      </div>
-    </div>
+    <VideoElementWithActions id={id}>
+      <AmpVideoWithKnobs id={id} />
+    </VideoElementWithActions>
   );
 };
 

extensions/amp-video/1.0/storybook/_helpers.js

@@ -0,0 +1,39 @@
+/**
+ * Copyright 2021 The AMP HTML Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import * as Preact from '../../../../src/preact';
+
+/**
+ * @param {*} props
+ * @param {*} props.id
+ * @param {*} props.children
+ * @return {*}
+ */
+export const VideoElementWithActions = ({
+  id,
+  children,
+  actions = ['play', 'pause', 'mute', 'unmute', 'fullscreen'],
+}) => (
+  <div style="max-width: 800px">
+    <p style={{display: 'flex'}}>
+      {actions.map((action) => (
+        <button style={{flex: 1, margin: '0 4px'}} on={`tap:${id}.${action}`}>
+          {action}
+        </button>
+      ))}
+    </p>
+    {children}
+  </div>
+);

extensions/amp-vimeo/1.0/storybook/Basic.amp.js

@@ -15,6 +15,7 @@
  */
 
 import * as Preact from '../../../../src/preact';
+import {VideoElementWithActions} from '../../../amp-video/1.0/storybook/_helpers';
 import {boolean, text, withKnobs} from '@storybook/addon-knobs';
 import {withAmp} from '@ampproject/storybook-addon';
 
@@ -28,12 +29,13 @@ export default {
   },
 };
 
-export const _default = () => {
+export const Default = ({id}) => {
   const videoid = text('videoid', '27246366');
   const autoplay = boolean('autoplay', true);
   const doNotTrack = boolean('do-not-track', false);
   return (
     <amp-vimeo
+      id={id}
       width="16"
       height="9"
       layout="responsive"
@@ -44,6 +46,11 @@ export const _default = () => {
   );
 };
 
-_default.story = {
-  name: 'default',
+export const Actions = () => {
+  const id = 'my-vimeo';
+  return (
+    <VideoElementWithActions id={id}>
+      <Default id={id} />
+    </VideoElementWithActions>
+  );
 };

extensions/amp-youtube/1.0/storybook/Basic.amp.js

@@ -15,6 +15,7 @@
  */
 
 import * as Preact from '../../../../src/preact';
+import {VideoElementWithActions} from '../../../amp-video/1.0/storybook/_helpers';
 import {boolean, number, text, withKnobs} from '@storybook/addon-knobs';
 import {withAmp} from '@ampproject/storybook-addon';
 
@@ -30,7 +31,7 @@ export default {
   },
 };
 
-export const Default = () => {
+export const Default = ({id}) => {
   const videoid = text('videoid', 'IAvf-rkzNck');
   const layout = text('layout', 'responsive');
   const autoplay = boolean('autoplay', false);
@@ -40,6 +41,7 @@ export const Default = () => {
   const credentials = text('credentials', 'include');
   return (
     <amp-youtube
+      id={id}
       width={width}
       height={height}
       data-videoid={videoid}
@@ -51,6 +53,15 @@ export const Default = () => {
   );
 };
 
+export const Actions = () => {
+  const id = 'my-amp-youtube';
+  return (
+    <VideoElementWithActions id={id}>
+      <Default id={id} />
+    </VideoElementWithActions>
+  );
+};
+
 export const InsideAccordion = () => {
   const videoid = text('videoid', 'IAvf-rkzNck');
   const width = number('width', 300);