From a6ec5eceab04f99986bf5ab75d0b6bad9d5dfa3b Mon Sep 17 00:00:00 2001
From: Alan Orozco <alanorozco@users.noreply.github.com>
Date: Thu, 6 May 2021 07:20:59 -0700
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=F0=9F=93=96=20Provide=20a=20?=
 =?UTF-8?q?Storybook=20wrapper=20to=20execute=20video=20actions=20(#34222)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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
---
 .../amp-video/1.0/storybook/Basic.amp.js      | 26 +++----------
 .../amp-video/1.0/storybook/_helpers.js       | 39 +++++++++++++++++++
 .../amp-vimeo/1.0/storybook/Basic.amp.js      | 13 +++++--
 .../amp-youtube/1.0/storybook/Basic.amp.js    | 13 ++++++-
 4 files changed, 66 insertions(+), 25 deletions(-)
 create mode 100644 extensions/amp-video/1.0/storybook/_helpers.js

diff --git a/extensions/amp-video/1.0/storybook/Basic.amp.js b/extensions/amp-video/1.0/storybook/Basic.amp.js
index 5127ce016c83..22a57eeb34f1 100644
--- a/extensions/amp-video/1.0/storybook/Basic.amp.js
+++ b/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>
   );
 };
 
diff --git a/extensions/amp-video/1.0/storybook/_helpers.js b/extensions/amp-video/1.0/storybook/_helpers.js
new file mode 100644
index 000000000000..655fa5534781
--- /dev/null
+++ b/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>
+);
diff --git a/extensions/amp-vimeo/1.0/storybook/Basic.amp.js b/extensions/amp-vimeo/1.0/storybook/Basic.amp.js
index 804e032f03dd..31a46bb6a727 100644
--- a/extensions/amp-vimeo/1.0/storybook/Basic.amp.js
+++ b/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>
+  );
 };
diff --git a/extensions/amp-youtube/1.0/storybook/Basic.amp.js b/extensions/amp-youtube/1.0/storybook/Basic.amp.js
index b2fd0767eeb2..9db2a41c2bda 100644
--- a/extensions/amp-youtube/1.0/storybook/Basic.amp.js
+++ b/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);