Skip to content

Commit

Permalink
♻️📖 Provide a Storybook wrapper to execute video actions (#34222)
Browse files Browse the repository at this point in the history
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
  • Loading branch information
alanorozco authored May 6, 2021
1 parent ff2d14b commit a6ec5ec
Show file tree
Hide file tree
Showing 4 changed files with 66 additions and 25 deletions.
26 changes: 5 additions & 21 deletions extensions/amp-video/1.0/storybook/Basic.amp.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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>
);
};

Expand Down
39 changes: 39 additions & 0 deletions extensions/amp-video/1.0/storybook/_helpers.js
Original file line number Diff line number Diff line change
@@ -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>
);
13 changes: 10 additions & 3 deletions extensions/amp-vimeo/1.0/storybook/Basic.amp.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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"
Expand All @@ -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>
);
};
13 changes: 12 additions & 1 deletion extensions/amp-youtube/1.0/storybook/Basic.amp.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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);
Expand All @@ -40,6 +41,7 @@ export const Default = () => {
const credentials = text('credentials', 'include');
return (
<amp-youtube
id={id}
width={width}
height={height}
data-videoid={videoid}
Expand All @@ -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);
Expand Down

0 comments on commit a6ec5ec

Please sign in to comment.