@vouchfor/embeds 0.0.0-experiment.310b30d → 0.0.0-experiment.321abe4

Sign up to get free protection for your applications and to get access to all the features.
Files changed (15) hide show
  1. package/dist/es/embeds.js +12 -5
  2. package/dist/es/embeds.js.map +1 -1
  3. package/dist/es/src/components/PlayerEmbed/index.d.ts +2 -1
  4. package/dist/iife/dialog-embed/embed.iife.js +214 -205
  5. package/dist/iife/dialog-embed/embed.iife.js.map +1 -1
  6. package/dist/iife/embeds.iife.js +202 -193
  7. package/dist/iife/embeds.iife.js.map +1 -1
  8. package/dist/iife/player-embed/embed.iife.js +196 -187
  9. package/dist/iife/player-embed/embed.iife.js.map +1 -1
  10. package/package.json +6 -5
  11. package/src/components/PlayerEmbed/MultiEmbed.stories.ts +135 -0
  12. package/src/components/PlayerEmbed/PlayerEmbed.stories.ts +15 -1
  13. package/src/components/PlayerEmbed/index.ts +8 -1
  14. package/src/components/PlayerEmbed/tests/PlayerEmbed.spec.ts +1 -1
  15. package/src/components/PlayerEmbed/tests/data.ts +23 -23
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vouchfor/embeds",
3
- "version": "0.0.0-experiment.310b30d",
3
+ "version": "0.0.0-experiment.321abe4",
4
4
  "license": "MIT",
5
5
  "author": "Aaron Williams",
6
6
  "main": "dist/es/embeds.js",
@@ -33,7 +33,8 @@
33
33
  "storybook": "yarn prebuild && storybook dev -p 6007",
34
34
  "prebuild": "yarn build:deps && yarn generate:manifest",
35
35
  "test": "rm -rf test/lib && yarn prebuild && vite build --mode test && web-test-runner",
36
- "test:ci": "yarn test --config web-test-runner.ci.config.js"
36
+ "test:ci": "yarn test --config web-test-runner.ci.config.js",
37
+ "test:watch": "yarn test --watch"
37
38
  },
38
39
  "lint-staged": {
39
40
  "**/*.{ts,tsx,js}": "eslint --fix --quiet",
@@ -42,8 +43,8 @@
42
43
  "dependencies": {
43
44
  "@a11y/focus-trap": "^1.0.5",
44
45
  "@lit/task": "^1.0.0",
45
- "@vouchfor/canvas-video": "0.0.0-experiment.310b30d",
46
- "@vouchfor/media-player": "0.0.0-experiment.310b30d",
46
+ "@vouchfor/canvas-video": "0.0.0-experiment.321abe4",
47
+ "@vouchfor/media-player": "0.0.0-experiment.321abe4",
47
48
  "uuid": "^9.0.1"
48
49
  },
49
50
  "peerDependencies": {
@@ -62,7 +63,7 @@
62
63
  "@types/mocha": "^10.0.6",
63
64
  "@vouchfor/eslint-config": "^1.0.1",
64
65
  "@vouchfor/prettier-config": "^1.0.1",
65
- "@vouchfor/video-utils": "0.0.0-experiment.310b30d",
66
+ "@vouchfor/video-utils": "0.0.0-experiment.321abe4",
66
67
  "@web/dev-server-esbuild": "^1.0.2",
67
68
  "@web/test-runner": "^0.18.1",
68
69
  "@web/test-runner-browserstack": "^0.7.1",
package/src/components/PlayerEmbed/MultiEmbed.stories.ts ADDED
@@ -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 };
package/src/components/PlayerEmbed/PlayerEmbed.stories.ts CHANGED
@@ -58,7 +58,21 @@ const Player: Story = {
58
58
  questions: [],
59
59
  aspectRatio: 0,
60
60
  preload: 'none',
61
- autoplay: false
61
+ autoplay: false,
62
+ controls: [
63
+ 'progress',
64
+ 'play-large',
65
+ 'navigation',
66
+ 'play',
67
+ 'volume',
68
+ 'current-time',
69
+ 'duration',
70
+ 'speed',
71
+ 'captions',
72
+ 'fullscreen',
73
+ 'preview',
74
+ 'languages'
75
+ ]
62
76
  },
63
77
  argTypes: {
64
78
  env: {
package/src/components/PlayerEmbed/index.ts CHANGED
@@ -13,7 +13,10 @@ import { TrackingController } from './controllers/tracking';
13
13
 
14
14
  import '@vouchfor/media-player';
15
15
 
16
- type PlayerEmbedProps = Pick<MediaPlayerProps, 'data' | 'aspectRatio' | 'preload' | 'autoplay' | 'controls'> & {
16
+ type PlayerEmbedProps = Pick<
17
+ MediaPlayerProps,
18
+ 'data' | 'aspectRatio' | 'language' | 'preload' | 'autoplay' | 'controls'
19
+ > & {
17
20
  env: Environment;
18
21
  apiKey: string;
19
22
  disableTracking?: boolean;
@@ -48,6 +51,7 @@ class PlayerEmbed extends LitElement {
48
51
  @property({ type: String }) preload: PlayerEmbedProps['preload'] = 'auto';
49
52
  @property({ type: Boolean }) autoplay: PlayerEmbedProps['autoplay'] = false;
50
53
  @property({ type: Number }) aspectRatio: PlayerEmbedProps['aspectRatio'] = 0;
54
+ @property({ type: String }) language?: MediaPlayerProps['language'];
51
55
 
52
56
  private eventController = new EventForwardController(this, [
53
57
  'durationchange',
@@ -60,10 +64,12 @@ class PlayerEmbed extends LitElement {
60
64
  'playing',
61
65
  'ratechange',
62
66
  'scenechange',
67
+ 'scenesupdate',
63
68
  'seeking',
64
69
  'seeked',
65
70
  'timeupdate',
66
71
  'volumechange',
72
+ 'processing',
67
73
  'waiting',
68
74
 
69
75
  'video:loadeddata',
@@ -228,6 +234,7 @@ class PlayerEmbed extends LitElement {
228
234
  .template=${this.template}
229
235
  aspectRatio=${ifDefined(this.aspectRatio)}
230
236
  preload=${ifDefined(this.preload)}
237
+ language=${ifDefined(this.language)}
231
238
  .controls=${this.controls}
232
239
  ></vmp-media-player>
233
240
  `;
package/src/components/PlayerEmbed/tests/PlayerEmbed.spec.ts CHANGED
@@ -28,7 +28,7 @@ function playerLoaded(player: PlayerEmbed) {
28
28
  }
29
29
 
30
30
  describe('Embeds', () => {
31
- it('passes', async () => {
31
+ it('Sends correct tracking events', async () => {
32
32
  const player = await fixture<PlayerEmbed>(
33
33
  html`<vouch-embed-player env="dev" .data=${data} aspectratio=${1}></vouch-embed-player>`
34
34
  );
package/src/components/PlayerEmbed/tests/data.ts CHANGED
@@ -39,14 +39,14 @@ const data = {
39
39
  thumbnail:
40
40
  'https://d2rxhdlm2q91uk.cloudfront.net/TVik9uTMgE/6JQEIPeStt/5c66bb3a-ed68-41a0-a601-a49865104418/5c66bb3a-ed68-41a0-a601-a49865104418_poster.0000001.jpg?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9kMnJ4aGRsbTJxOTF1ay5jbG91ZGZyb250Lm5ldC9UVmlrOXVUTWdFLyoiLCJDb25kaXRpb24iOnsiRGF0ZUxlc3NUaGFuIjp7IkFXUzpFcG9jaFRpbWUiOjIwMTYzMjM0Mjl9fX1dfQ__&Key-Pair-Id=K2SWKOH0FA5F6M&Signature=SGA54MFpy4jaqKJHKEuxRfjk-~NBFAh1tdW9Y6uYJwc0LFjDDgX1sraerSyohmVhj~-QVIrglY5BvglDIhrFcLJWGTkgj4vhyLprk1a7EDckv0HBgp-k1ZKvoDtt3wBOzrL4GicfXBkuMpIu5jv5MY3xemlJj2a6V~h65XJuLO4u-xS~McH6rS3mRxoNl4GcYUVm4upre1DGQx-5Suy6Ateoxl6xxoF8kg5EL02KxkIGiRpwXJTvVmUuVF0rpBj-IE40MfmhLBQ1NNSXiqb3-HjpkKwhYPvB5APVh23mzGmqJ0P3jbr2F1cU4Jvlqsjb6GVP61wGOz9ITeWPZkOy8A__'
41
41
  },
42
- client: {
43
- id: '03540d70-1c75-4867-a235-bac842ed6ce4',
44
- name: 'Not Supplied',
45
- logoSrc: 'https://logo.clearbit.com/vouchfor.com?size=260'
46
- },
47
42
  contact: {
48
43
  id: 'b62f62a3-0cd4-4512-9b52-121cb2f3e72f',
49
- name: 'Aaron Williams'
44
+ name: 'Aaron Williams',
45
+ client: {
46
+ id: '03540d70-1c75-4867-a235-bac842ed6ce4',
47
+ name: 'Not Supplied',
48
+ logoSrc: 'https://logo.clearbit.com/vouchfor.com?size=260'
49
+ }
50
50
  },
51
51
  captions: {
52
52
  current:
@@ -83,14 +83,14 @@ const data = {
83
83
  thumbnail:
84
84
  'https://d2rxhdlm2q91uk.cloudfront.net/TVik9uTMgE/6JQEIPeStt/5c66bb3a-ed68-41a0-a601-a49865104418/5c66bb3a-ed68-41a0-a601-a49865104418_poster.0000001.jpg?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9kMnJ4aGRsbTJxOTF1ay5jbG91ZGZyb250Lm5ldC9UVmlrOXVUTWdFLyoiLCJDb25kaXRpb24iOnsiRGF0ZUxlc3NUaGFuIjp7IkFXUzpFcG9jaFRpbWUiOjIwMTYzMjM0Mjl9fX1dfQ__&Key-Pair-Id=K2SWKOH0FA5F6M&Signature=SGA54MFpy4jaqKJHKEuxRfjk-~NBFAh1tdW9Y6uYJwc0LFjDDgX1sraerSyohmVhj~-QVIrglY5BvglDIhrFcLJWGTkgj4vhyLprk1a7EDckv0HBgp-k1ZKvoDtt3wBOzrL4GicfXBkuMpIu5jv5MY3xemlJj2a6V~h65XJuLO4u-xS~McH6rS3mRxoNl4GcYUVm4upre1DGQx-5Suy6Ateoxl6xxoF8kg5EL02KxkIGiRpwXJTvVmUuVF0rpBj-IE40MfmhLBQ1NNSXiqb3-HjpkKwhYPvB5APVh23mzGmqJ0P3jbr2F1cU4Jvlqsjb6GVP61wGOz9ITeWPZkOy8A__'
85
85
  },
86
- client: {
87
- id: '03540d70-1c75-4867-a235-bac842ed6ce4',
88
- logoSrc: 'https://logo.clearbit.com/vouchfor.com?size=260'
89
- },
90
86
  contact: {
91
87
  id: 'b62f62a3-0cd4-4512-9b52-121cb2f3e72f',
92
88
  name: 'Aaron Williams',
93
- roleTitle: 'Software Engineer'
89
+ roleTitle: 'Software Engineer',
90
+ client: {
91
+ id: '03540d70-1c75-4867-a235-bac842ed6ce4',
92
+ logoSrc: 'https://logo.clearbit.com/vouchfor.com?size=260'
93
+ }
94
94
  },
95
95
  captions: {
96
96
  current:
@@ -121,15 +121,15 @@ const data = {
121
121
  thumbnail:
122
122
  'https://d2rxhdlm2q91uk.cloudfront.net/TVik9uTMgE/6JQEIPeStt/e77c81a7-f6ef-4eae-91fc-b620d092d8d6/e77c81a7-f6ef-4eae-91fc-b620d092d8d6_poster.0000001.jpg?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9kMnJ4aGRsbTJxOTF1ay5jbG91ZGZyb250Lm5ldC9UVmlrOXVUTWdFLyoiLCJDb25kaXRpb24iOnsiRGF0ZUxlc3NUaGFuIjp7IkFXUzpFcG9jaFRpbWUiOjIwMTYzMjM0Mjl9fX1dfQ__&Key-Pair-Id=K2SWKOH0FA5F6M&Signature=SGA54MFpy4jaqKJHKEuxRfjk-~NBFAh1tdW9Y6uYJwc0LFjDDgX1sraerSyohmVhj~-QVIrglY5BvglDIhrFcLJWGTkgj4vhyLprk1a7EDckv0HBgp-k1ZKvoDtt3wBOzrL4GicfXBkuMpIu5jv5MY3xemlJj2a6V~h65XJuLO4u-xS~McH6rS3mRxoNl4GcYUVm4upre1DGQx-5Suy6Ateoxl6xxoF8kg5EL02KxkIGiRpwXJTvVmUuVF0rpBj-IE40MfmhLBQ1NNSXiqb3-HjpkKwhYPvB5APVh23mzGmqJ0P3jbr2F1cU4Jvlqsjb6GVP61wGOz9ITeWPZkOy8A__'
123
123
  },
124
- client: {
125
- id: '03540d70-1c75-4867-a235-bac842ed6ce4',
126
- name: 'Vouch',
127
- logoSrc: 'https://logo.clearbit.com/vouchfor.com?size=260'
128
- },
129
124
  contact: {
130
125
  id: 'b62f62a3-0cd4-4512-9b52-121cb2f3e72f',
131
126
  name: 'Aaron Williams',
132
- roleTitle: 'Software Engineer'
127
+ roleTitle: 'Software Engineer',
128
+ client: {
129
+ id: '03540d70-1c75-4867-a235-bac842ed6ce4',
130
+ name: 'Vouch',
131
+ logoSrc: 'https://logo.clearbit.com/vouchfor.com?size=260'
132
+ }
133
133
  },
134
134
  captions: {
135
135
  current:
@@ -160,15 +160,15 @@ const data = {
160
160
  thumbnail:
161
161
  'https://d2rxhdlm2q91uk.cloudfront.net/TVik9uTMgE/6JQEIPeStt/39fd188d-a4dc-43b9-bac8-32fd71bfbc90/39fd188d-a4dc-43b9-bac8-32fd71bfbc90_poster.0000001.jpg?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9kMnJ4aGRsbTJxOTF1ay5jbG91ZGZyb250Lm5ldC9UVmlrOXVUTWdFLyoiLCJDb25kaXRpb24iOnsiRGF0ZUxlc3NUaGFuIjp7IkFXUzpFcG9jaFRpbWUiOjIwMTYzMjM0Mjl9fX1dfQ__&Key-Pair-Id=K2SWKOH0FA5F6M&Signature=SGA54MFpy4jaqKJHKEuxRfjk-~NBFAh1tdW9Y6uYJwc0LFjDDgX1sraerSyohmVhj~-QVIrglY5BvglDIhrFcLJWGTkgj4vhyLprk1a7EDckv0HBgp-k1ZKvoDtt3wBOzrL4GicfXBkuMpIu5jv5MY3xemlJj2a6V~h65XJuLO4u-xS~McH6rS3mRxoNl4GcYUVm4upre1DGQx-5Suy6Ateoxl6xxoF8kg5EL02KxkIGiRpwXJTvVmUuVF0rpBj-IE40MfmhLBQ1NNSXiqb3-HjpkKwhYPvB5APVh23mzGmqJ0P3jbr2F1cU4Jvlqsjb6GVP61wGOz9ITeWPZkOy8A__'
162
162
  },
163
- client: {
164
- id: '03540d70-1c75-4867-a235-bac842ed6ce4',
165
- name: 'Vouch',
166
- logoSrc: 'https://logo.clearbit.com/vouchfor.com?size=260'
167
- },
168
163
  contact: {
169
164
  id: 'b62f62a3-0cd4-4512-9b52-121cb2f3e72f',
170
165
  name: 'Aaron Williams',
171
- roleTitle: 'Software Engineer'
166
+ roleTitle: 'Software Engineer',
167
+ client: {
168
+ id: '03540d70-1c75-4867-a235-bac842ed6ce4',
169
+ name: 'Vouch',
170
+ logoSrc: 'https://logo.clearbit.com/vouchfor.com?size=260'
171
+ }
172
172
  },
173
173
  captions: {
174
174
  current: