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

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.
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: