/
Basic.amp.js
81 lines (73 loc) · 2.03 KB
/
Basic.amp.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
import * as Preact from '#preact';
import {withAmp} from '@ampproject/storybook-addon';
import {text, withKnobs} from '@storybook/addon-knobs';
export default {
title: 'amp-brightcove-1_0',
decorators: [withKnobs, withAmp],
parameters: {
extensions: [{name: 'amp-brightcove', version: '1.0'}],
experiments: ['bento'],
},
};
export const Default = () => {
return (
<amp-brightcove
id="myPlayer"
data-referrer="EXTERNAL_REFERRER"
data-account="1290862519001"
data-video-id="ref:amp-docs-sample"
data-player-id="SyIOV8yWM"
layout="responsive"
width="480"
height="270"
></amp-brightcove>
);
};
export const WithPlaceholderAndFallback = () => {
const videoid = text('videoid', 'ref:amp-docs-sample');
const playerid = text('playerid', 'SyIOV8yWM');
const account = text('account', '1290862519001');
const height = text('height', '270');
const width = text('width', '480');
return (
<amp-brightcove
id="myPlayer"
data-referrer="EXTERNAL_REFERRER"
data-account={account}
data-video-id={videoid}
data-player-id={playerid}
layout="responsive"
width={width}
height={height}
>
<div placeholder style="background:red">
Placeholder. Loading content...
</div>
<div fallback style="background:blue">
Fallback. Could not load content...
</div>
</amp-brightcove>
);
};
export const Actions = () => {
return (
<>
<button on="tap:myPlayer.play">Play</button>
<button on="tap:myPlayer.pause">Pause</button>
<button on="tap:myPlayer.mute">Mute</button>
<button on="tap:myPlayer.unmute">Unmute</button>
<button on="tap:myPlayer.fullscreen">Fullscreen</button>
<p>Autoplay</p>
<amp-brightcove
id="myPlayer"
autoplay
data-account="1290862519001"
data-video-id="ref:amp-docs-sample"
data-player-id="SyIOV8yWM"
layout="responsive"
width="480"
height="270"
></amp-brightcove>
</>
);
};