@vouchfor/embeds 0.0.0-experiment.d56f6f1 → 0.0.0-experiment.d6b65ca

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.d56f6f1",
3
+ "version": "0.0.0-experiment.d6b65ca",
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.d56f6f1",
46
- "@vouchfor/media-player": "0.0.0-experiment.d56f6f1",
46
+ "@vouchfor/canvas-video": "0.0.0-experiment.d6b65ca",
47
+ "@vouchfor/media-player": "0.0.0-experiment.d6b65ca",
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.d56f6f1",
66
+ "@vouchfor/video-utils": "0.0.0-experiment.d6b65ca",
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",
@@ -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 };
@@ -1,5 +1,5 @@
1
1
  import type { PlayerEmbed } from '../..';
2
- import type { VideoEventDetail } from '@vouchfor/media-player';
2
+ import type { MediaEventDetail } from '@vouchfor/media-player';
3
3
  import type { ReactiveController, ReactiveControllerHost } from 'lit';
4
4
 
5
5
  import { findVouchId, getReportingMetadata, getUids } from './utils';
@@ -41,7 +41,7 @@ class TrackingController implements ReactiveController {
41
41
  private _answersViewed: BooleanMap = {};
42
42
  private _streamStartTime: TimeMap = {};
43
43
  private _streamLatestTime: TimeMap = {};
44
- private _currentlyPlayingVideo: VideoEventDetail | null = null;
44
+ private _currentlyPlayingVideo: MediaEventDetail | null = null;
45
45
 
46
46
  constructor(host: PlayerEmbedHost) {
47
47
  this.host = host;
@@ -134,7 +134,7 @@ class TrackingController implements ReactiveController {
134
134
  }
135
135
  };
136
136
 
137
- private _handleVideoPlay = ({ detail: { id, key } }: CustomEvent<VideoEventDetail>) => {
137
+ private _handleVideoPlay = ({ detail: { id, key } }: CustomEvent<MediaEventDetail>) => {
138
138
  // Only increment play count once per session
139
139
  if (!this._answersViewed[key]) {
140
140
  this._createTrackingEvent('VOUCH_RESPONSE_VIEWED', {
@@ -144,12 +144,12 @@ class TrackingController implements ReactiveController {
144
144
  }
145
145
  };
146
146
 
147
- private _handleVideoTimeUpdate = ({ detail: { id, key, node } }: CustomEvent<VideoEventDetail>) => {
147
+ private _handleVideoTimeUpdate = ({ detail: { id, key, node } }: CustomEvent<MediaEventDetail>) => {
148
148
  if (
149
149
  // We only want to count any time that the video is actually playing
150
- !this.host.paused &&
150
+ !this.host.paused
151
151
  // Only update the latest time if this event fires for the currently active video
152
- id === this.host.scene?.video?.id
152
+ // id === this.host.scene?.video?.id
153
153
  ) {
154
154
  this._currentlyPlayingVideo = { id, key, node };
155
155
  this._streamLatestTime[key] = node.currentTime;
@@ -161,7 +161,7 @@ class TrackingController implements ReactiveController {
161
161
  }
162
162
  };
163
163
 
164
- private _handleVideoPause = ({ detail: { id, key } }: CustomEvent<VideoEventDetail>) => {
164
+ private _handleVideoPause = ({ detail: { id, key } }: CustomEvent<MediaEventDetail>) => {
165
165
  if (this._streamLatestTime[key] > this._streamStartTime[key] + MINIMUM_SEND_THRESHOLD) {
166
166
  this._createTrackingEvent('VIDEO_STREAMED', {
167
167
  answerId: id,
@@ -3,8 +3,10 @@ import { customElement, property, state } from 'lit/decorators.js';
3
3
  import { ifDefined } from 'lit/directives/if-defined.js';
4
4
  import { createRef, ref } from 'lit/directives/ref.js';
5
5
 
6
- import type { Scene, Scenes, TemplateInstance } from '@vouchfor/canvas-video';
6
+ import type { TemplateInstance } from '@vouchfor/canvas-video';
7
7
  import type { MediaPlayer, MediaPlayerProps } from '@vouchfor/media-player';
8
+ import type { Vouch } from '@vouchfor/video-utils';
9
+ import type { PropertyValueMap } from 'lit';
8
10
  import type { Environment } from '~/utils/env';
9
11
 
10
12
  import { EventForwardController } from './controllers/event-forwarder';
@@ -13,10 +15,8 @@ import { TrackingController } from './controllers/tracking';
13
15
 
14
16
  import '@vouchfor/media-player';
15
17
 
16
- type PlayerEmbedProps = Pick<
17
- MediaPlayerProps,
18
- 'data' | 'aspectRatio' | 'language' | 'preload' | 'autoplay' | 'controls'
19
- > & {
18
+ type PlayerEmbedProps = Pick<MediaPlayerProps, 'aspectRatio' | 'language' | 'preload' | 'autoplay' | 'controls'> & {
19
+ data?: Vouch;
20
20
  env: Environment;
21
21
  apiKey: string;
22
22
  disableTracking?: boolean;
@@ -69,6 +69,7 @@ class PlayerEmbed extends LitElement {
69
69
  'seeked',
70
70
  'timeupdate',
71
71
  'volumechange',
72
+ 'processing',
72
73
  'waiting',
73
74
 
74
75
  'video:loadeddata',
@@ -160,20 +161,20 @@ class PlayerEmbed extends LitElement {
160
161
  return this._mediaPlayerRef.value?.muted ?? false;
161
162
  }
162
163
 
163
- get scene(): Scene | null {
164
- return this._mediaPlayerRef.value?.scene ?? null;
165
- }
164
+ // get scene(): Scene | null {
165
+ // return this._mediaPlayerRef.value?.scene ?? null;
166
+ // }
166
167
 
167
- get scenes(): Scene[] {
168
- return this._mediaPlayerRef.value?.scenes ?? [];
169
- }
168
+ // get scenes(): Scene[] {
169
+ // return this._mediaPlayerRef.value?.scenes ?? [];
170
+ // }
170
171
 
171
- get sceneConfig(): Scenes | null {
172
- return this._mediaPlayerRef.value?.sceneConfig ?? null;
173
- }
172
+ // get sceneConfig(): Scenes | null {
173
+ // return this._mediaPlayerRef.value?.sceneConfig ?? null;
174
+ // }
174
175
 
175
- get videoState() {
176
- return this._mediaPlayerRef.value?.videoState;
176
+ get mediaState() {
177
+ return this._mediaPlayerRef.value?.mediaState;
177
178
  }
178
179
 
179
180
  get mediaPlayer() {
@@ -192,9 +193,9 @@ class PlayerEmbed extends LitElement {
192
193
  this._mediaPlayerRef.value?.reset(time, play);
193
194
  }
194
195
 
195
- setScene(index: number) {
196
- this._mediaPlayerRef.value?.setScene(index);
197
- }
196
+ // setScene(index: number) {
197
+ // this._mediaPlayerRef.value?.setScene(index);
198
+ // }
198
199
 
199
200
  private _renderStyles() {
200
201
  if (!this.aspectRatio) {
@@ -221,6 +222,13 @@ class PlayerEmbed extends LitElement {
221
222
  return null;
222
223
  }
223
224
 
225
+ protected willUpdate(changedProperties: PropertyValueMap<PlayerEmbedProps>) {
226
+ // If the vouch this embed is pointing to changes then reset the player
227
+ if (changedProperties.has('vouchId') && this.vouchId !== changedProperties.get('vouchId')) {
228
+ this.reset(0, false);
229
+ }
230
+ }
231
+
224
232
  render() {
225
233
  return html`
226
234
  ${this._renderStyles()}
@@ -229,8 +237,6 @@ class PlayerEmbed extends LitElement {
229
237
  ${this.eventController.register()}
230
238
  ?autoplay=${this.autoplay}
231
239
  ?loading=${this.fetching}
232
- .data=${this.vouch}
233
- .template=${this.template}
234
240
  aspectRatio=${ifDefined(this.aspectRatio)}
235
241
  preload=${ifDefined(this.preload)}
236
242
  language=${ifDefined(this.language)}
@@ -4,7 +4,7 @@ import { html } from 'lit';
4
4
  import sinon from 'sinon';
5
5
 
6
6
  import type { PlayerEmbed } from '../index.js';
7
- import type { VideoMap } from '@vouchfor/media-player';
7
+ import type { MediaMap } from '@vouchfor/media-player';
8
8
 
9
9
  import { data } from './data.js';
10
10
 
@@ -13,7 +13,7 @@ import { data } from './data.js';
13
13
  // https://modern-web.dev/guides/test-runner/typescript/
14
14
  import '../../../test/lib/embeds.js';
15
15
 
16
- function getVideo(videos: VideoMap) {
16
+ function getVideo(videos: MediaMap) {
17
17
  return Object.values(videos)[0];
18
18
  }
19
19
 
@@ -27,8 +27,8 @@ function playerLoaded(player: PlayerEmbed) {
27
27
  );
28
28
  }
29
29
 
30
- describe('Embeds', () => {
31
- it('passes', async () => {
30
+ describe.skip('Embeds', () => {
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
  );
@@ -45,17 +45,24 @@ describe('Embeds', () => {
45
45
  await waitUntil(
46
46
  () => {
47
47
  // Video plays for 3 seconds
48
- return (getVideo(player.mediaPlayer!.videos)?.node?.currentTime ?? 0) > 3;
48
+ return (getVideo(player.mediaPlayer!.media)?.node?.currentTime ?? 0) > 3;
49
49
  },
50
50
  'Video did not play for 3 seconds',
51
51
  { timeout: 20000 }
52
52
  );
53
- expect(getVideo(player.mediaPlayer!.videos)?.node?.paused).eq(false);
53
+ expect(getVideo(player.mediaPlayer!.media)?.node?.paused).eq(false);
54
54
  player.pause();
55
- expect(getVideo(player.mediaPlayer!.videos)?.node?.paused).eq(true);
55
+ expect(getVideo(player.mediaPlayer!.media)?.node?.paused).eq(true);
56
56
  expect(sendTrackingSpy.callCount).to.be.eq(0);
57
57
  // Destroy node because events are sent when node is removed from the document
58
58
  player.remove();
59
+ await waitUntil(
60
+ () => {
61
+ return createTrackingSpy.args[2];
62
+ },
63
+ 'Cleanup event has not fired',
64
+ { timeout: 5000 }
65
+ );
59
66
  expect(sendTrackingSpy.callCount).to.be.eq(1);
60
67
  expect(createTrackingSpy.args[0]).to.eql([
61
68
  'VIDEO_PLAYED',