@vouchfor/embeds 2.0.12 → 2.0.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vouchfor/embeds",
3
- "version": "2.0.12",
3
+ "version": "2.0.13",
4
4
  "license": "MIT",
5
5
  "author": "Aaron Williams",
6
6
  "main": "dist/es/embeds.js",
@@ -46,7 +46,7 @@
46
46
  "@a11y/focus-trap": "^1.0.5",
47
47
  "@lit/task": "^1.0.0",
48
48
  "@vouchfor/canvas-video": "^8.0.2",
49
- "@vouchfor/media-player": "^3.0.12",
49
+ "@vouchfor/media-player": "^3.0.13",
50
50
  "uuid": "^9.0.1"
51
51
  },
52
52
  "peerDependencies": {
@@ -0,0 +1,135 @@
1
+ import { html } from 'lit';
2
+ import { ifDefined } from 'lit/directives/if-defined.js';
3
+
4
+ import type { PlayerEmbedProps } from '.';
5
+ import type { Meta, StoryObj } from '@storybook/web-components';
6
+
7
+ import '.';
8
+
9
+ type MultiEmbedArgs = PlayerEmbedProps & {
10
+ apiKey1?: string;
11
+ apiKey2?: string;
12
+ apiKey3?: string;
13
+ vouchId1?: string;
14
+ vouchId2?: string;
15
+ vouchId3?: string;
16
+ showVouch?: boolean;
17
+ };
18
+
19
+ const _MultiEmbed = ({
20
+ vouchId1,
21
+ vouchId2,
22
+ vouchId3,
23
+ templateId,
24
+ questions,
25
+ preload,
26
+ autoplay,
27
+ env,
28
+ apiKey1,
29
+ apiKey2,
30
+ apiKey3,
31
+ controls,
32
+ aspectRatio
33
+ }: MultiEmbedArgs) => {
34
+ return html`
35
+ <div style="height: 33vh">
36
+ <vouch-embed-player
37
+ env=${ifDefined(env)}
38
+ apiKey=${ifDefined(apiKey1)}
39
+ vouchId=${ifDefined(vouchId1)}
40
+ templateId=${ifDefined(templateId)}
41
+ .questions=${questions}
42
+ .controls=${controls}
43
+ ?autoplay=${autoplay}
44
+ preload=${ifDefined(preload)}
45
+ aspectRatio=${ifDefined(aspectRatio)}
46
+ @error=${console.log}
47
+ ></vouch-embed-player>
48
+ </div>
49
+ <div style="height: 33vh">
50
+ <vouch-embed-player
51
+ env=${ifDefined(env)}
52
+ apiKey=${ifDefined(apiKey2)}
53
+ vouchId=${ifDefined(vouchId2)}
54
+ templateId=${ifDefined(templateId)}
55
+ .questions=${questions}
56
+ .controls=${controls}
57
+ ?autoplay=${autoplay}
58
+ preload=${ifDefined(preload)}
59
+ aspectRatio=${ifDefined(aspectRatio)}
60
+ @error=${console.log}
61
+ ></vouch-embed-player>
62
+ </div>
63
+ <div style="height: 33vh">
64
+ <vouch-embed-player
65
+ env=${ifDefined(env)}
66
+ apiKey=${ifDefined(apiKey3)}
67
+ vouchId=${ifDefined(vouchId3)}
68
+ templateId=${ifDefined(templateId)}
69
+ .questions=${questions}
70
+ .controls=${controls}
71
+ ?autoplay=${autoplay}
72
+ preload=${ifDefined(preload)}
73
+ aspectRatio=${ifDefined(aspectRatio)}
74
+ @error=${console.log}
75
+ ></vouch-embed-player>
76
+ </div>
77
+ `;
78
+ };
79
+
80
+ // More on how to set up stories at: https://storybook.js.org/docs/web-components/writing-stories/introduction
81
+ const meta = {
82
+ title: 'Embeds',
83
+ tags: ['autodocs'],
84
+ render: (args) => _MultiEmbed(args),
85
+ component: 'vouch-embed-player'
86
+ } satisfies Meta<PlayerEmbedProps>;
87
+
88
+ type Story = StoryObj<MultiEmbedArgs>;
89
+
90
+ const MultiPlayer: Story = {
91
+ args: {
92
+ env: 'dev',
93
+ apiKey1: 'TVik9uTMgE-PD25UTHIS6gyl0hMBWC7AT4dkpdlLBT4VIfDWZJrQiCk6Ak7m1',
94
+ vouchId1: '6JQEIPeStt',
95
+ apiKey2: 'TVik9uTMgE-PD25UTHIS6gyl0hMBWC7AT4dkpdlLBT4VIfDWZJrQiCk6Ak7m1',
96
+ vouchId2: '6JQEIPeStt',
97
+ apiKey3: 'TVik9uTMgE-PD25UTHIS6gyl0hMBWC7AT4dkpdlLBT4VIfDWZJrQiCk6Ak7m1',
98
+ vouchId3: '6JQEIPeStt',
99
+ templateId: '357fc118-e179-4171-9446-ff2b8e9d1b29',
100
+ questions: [],
101
+ aspectRatio: 0,
102
+ preload: 'none',
103
+ autoplay: false,
104
+ controls: [
105
+ 'progress',
106
+ 'play-large',
107
+ 'navigation',
108
+ 'play',
109
+ 'volume',
110
+ 'current-time',
111
+ 'duration',
112
+ 'speed',
113
+ 'captions',
114
+ 'fullscreen',
115
+ 'preview',
116
+ 'languages'
117
+ ]
118
+ },
119
+ argTypes: {
120
+ env: {
121
+ control: 'radio',
122
+ options: ['local', 'dev', 'staging', 'prod']
123
+ },
124
+ preload: {
125
+ control: 'radio',
126
+ options: ['auto', 'none']
127
+ }
128
+ },
129
+ parameters: {
130
+ layout: 'fullscreen'
131
+ }
132
+ };
133
+
134
+ export default meta;
135
+ export { MultiPlayer };