@vouchfor/embeds 0.0.0-experiment.0f953a2 → 0.0.0-experiment.108d575

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": "0.0.0-experiment.0f953a2",
3
+ "version": "0.0.0-experiment.108d575",
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.0f953a2",
46
- "@vouchfor/media-player": "0.0.0-experiment.0f953a2",
46
+ "@vouchfor/canvas-video": "0.0.0-experiment.108d575",
47
+ "@vouchfor/media-player": "0.0.0-experiment.108d575",
47
48
  "uuid": "^9.0.1"
48
49
  },
49
50
  "peerDependencies": {
@@ -52,17 +53,17 @@
52
53
  "devDependencies": {
53
54
  "@esm-bundle/chai": "^4.3.4-fix.0",
54
55
  "@open-wc/testing": "^4.0.0",
55
- "@storybook/addon-essentials": "^8.0.2",
56
- "@storybook/addon-links": "^8.0.2",
57
- "@storybook/blocks": "^8.0.2",
58
- "@storybook/web-components": "^8.0.2",
59
- "@storybook/web-components-vite": "^8.0.2",
56
+ "@storybook/addon-essentials": "^8.0.4",
57
+ "@storybook/addon-links": "^8.0.4",
58
+ "@storybook/blocks": "^8.0.4",
59
+ "@storybook/web-components": "^8.0.4",
60
+ "@storybook/web-components-vite": "^8.0.4",
60
61
  "@svgr/core": "^8.1.0",
61
62
  "@types/flat": "^5.0.5",
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.0f953a2",
66
+ "@vouchfor/video-utils": "0.0.0-experiment.108d575",
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",
@@ -76,7 +77,7 @@
76
77
  "react-dom": "^18.2.0",
77
78
  "rollup-plugin-tla": "^0.0.2",
78
79
  "sinon": "^17.0.1",
79
- "storybook": "^8.0.2",
80
+ "storybook": "^8.0.4",
80
81
  "svgson": "^5.3.1",
81
82
  "typescript": "^5.4.3",
82
83
  "vite": "^5.2.2",
@@ -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 };
@@ -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: {
@@ -5,6 +5,7 @@ import { createRef, ref } from 'lit/directives/ref.js';
5
5
 
6
6
  import type { Scene, Scenes, TemplateInstance } from '@vouchfor/canvas-video';
7
7
  import type { MediaPlayer, MediaPlayerProps } from '@vouchfor/media-player';
8
+ import type { PropertyValueMap } from 'lit';
8
9
  import type { Environment } from '~/utils/env';
9
10
 
10
11
  import { EventForwardController } from './controllers/event-forwarder';
@@ -13,7 +14,10 @@ import { TrackingController } from './controllers/tracking';
13
14
 
14
15
  import '@vouchfor/media-player';
15
16
 
16
- type PlayerEmbedProps = Pick<MediaPlayerProps, 'data' | 'aspectRatio' | 'preload' | 'autoplay' | 'controls'> & {
17
+ type PlayerEmbedProps = Pick<
18
+ MediaPlayerProps,
19
+ 'data' | 'aspectRatio' | 'language' | 'preload' | 'autoplay' | 'controls'
20
+ > & {
17
21
  env: Environment;
18
22
  apiKey: string;
19
23
  disableTracking?: boolean;
@@ -48,6 +52,7 @@ class PlayerEmbed extends LitElement {
48
52
  @property({ type: String }) preload: PlayerEmbedProps['preload'] = 'auto';
49
53
  @property({ type: Boolean }) autoplay: PlayerEmbedProps['autoplay'] = false;
50
54
  @property({ type: Number }) aspectRatio: PlayerEmbedProps['aspectRatio'] = 0;
55
+ @property({ type: String }) language?: MediaPlayerProps['language'];
51
56
 
52
57
  private eventController = new EventForwardController(this, [
53
58
  'durationchange',
@@ -60,10 +65,12 @@ class PlayerEmbed extends LitElement {
60
65
  'playing',
61
66
  'ratechange',
62
67
  'scenechange',
68
+ 'scenesupdate',
63
69
  'seeking',
64
70
  'seeked',
65
71
  'timeupdate',
66
72
  'volumechange',
73
+ 'processing',
67
74
  'waiting',
68
75
 
69
76
  'video:loadeddata',
@@ -216,6 +223,13 @@ class PlayerEmbed extends LitElement {
216
223
  return null;
217
224
  }
218
225
 
226
+ protected willUpdate(changedProperties: PropertyValueMap<PlayerEmbedProps>) {
227
+ // If the vouch this embed is pointing to changes then reset the player
228
+ if (changedProperties.has('vouchId') && this.vouchId !== changedProperties.get('vouchId')) {
229
+ this.reset(0, false);
230
+ }
231
+ }
232
+
219
233
  render() {
220
234
  return html`
221
235
  ${this._renderStyles()}
@@ -228,6 +242,7 @@ class PlayerEmbed extends LitElement {
228
242
  .template=${this.template}
229
243
  aspectRatio=${ifDefined(this.aspectRatio)}
230
244
  preload=${ifDefined(this.preload)}
245
+ language=${ifDefined(this.language)}
231
246
  .controls=${this.controls}
232
247
  ></vmp-media-player>
233
248
  `;
@@ -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
  );
@@ -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: