@vouchfor/embeds 0.0.0-experiment.b40b077 → 0.0.0-experiment.b77073f

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.b40b077",
3
+ "version": "0.0.0-experiment.b77073f",
4
4
  "license": "MIT",
5
5
  "author": "Aaron Williams",
6
6
  "main": "dist/es/embeds.js",
@@ -26,7 +26,7 @@
26
26
  "lint:staged": "lint-staged",
27
27
  "prepublishOnly": "yarn build",
28
28
  "size": "size-limit",
29
- "storybook": "yarn prebuild && storybook dev -p 6006",
29
+ "storybook": "yarn prebuild && storybook dev -p 6007",
30
30
  "prebuild": "yarn build:deps && yarn generate:manifest",
31
31
  "test": "true"
32
32
  },
@@ -35,8 +35,8 @@
35
35
  "**/*.{md,json,yml}": "prettier --write"
36
36
  },
37
37
  "dependencies": {
38
- "@lit/task": "1.0.0",
39
- "@vouchfor/media-player": "0.0.0-experiment.b40b077",
38
+ "@lit/task": "^1.0.0",
39
+ "@vouchfor/media-player": "0.0.0-experiment.b77073f",
40
40
  "uuid": "^9.0.1"
41
41
  },
42
42
  "peerDependencies": {
@@ -10,32 +10,18 @@ type EmbedArgs = EmbedProps & {
10
10
  showVouch?: boolean;
11
11
  };
12
12
 
13
- const _Embed = ({
14
- vouchHashId,
15
- preload,
16
- autoplay,
17
- env,
18
- apiKey,
19
- controls,
20
- enableTracking,
21
- trackingSource,
22
-
23
- resolution,
24
- aspectRatio
25
- }: EmbedArgs) => {
13
+ const _Embed = ({ vouchId, templateId, preload, autoplay, env, apiKey, controls, aspectRatio }: EmbedArgs) => {
26
14
  return html`
27
15
  <div style="height: 100vh">
28
16
  <vouch-embed
29
17
  env=${ifDefined(env)}
30
18
  apiKey=${ifDefined(apiKey)}
19
+ vouchId=${ifDefined(vouchId)}
20
+ templateId=${ifDefined(templateId)}
21
+ .controls=${controls}
31
22
  ?autoplay=${autoplay}
32
- ?enableTracking=${enableTracking}
33
- vouchHashId=${ifDefined(vouchHashId)}
34
- resolution=${ifDefined(resolution)}
35
- aspectRatio=${ifDefined(aspectRatio)}
36
23
  preload=${ifDefined(preload)}
37
- .controls=${controls}
38
- trackingSource=${ifDefined(trackingSource)}
24
+ aspectRatio=${ifDefined(aspectRatio)}
39
25
  ></vouch-embed>
40
26
  </div>
41
27
  `;
@@ -55,13 +41,11 @@ const Embed: Story = {
55
41
  args: {
56
42
  env: 'dev',
57
43
  apiKey: 'TVik9uTMgE-PD25UTHIS6gyl0hMBWC7AT4dkpdlLBT4VIfDWZJrQiCk6Ak7m1',
58
- vouchHashId: '6JQEIPeStt',
59
- resolution: 1080,
44
+ vouchId: '6JQEIPeStt',
45
+ templateId: '7d0113f7-3f9a-4bdd-97e3-07ee6eec5730',
60
46
  aspectRatio: 0,
61
47
  preload: 'none',
62
- autoplay: false,
63
- enableTracking: true,
64
- trackingSource: 'media_player_storybook'
48
+ autoplay: false
65
49
  },
66
50
  argTypes: {
67
51
  env: {
@@ -2,40 +2,88 @@ import { Task } from '@lit/task';
2
2
 
3
3
  import type { Embed, EmbedProps } from '..';
4
4
  import type { ReactiveControllerHost } from 'lit';
5
+ import type { Environment } from '~/utils/env';
5
6
 
6
7
  import { getEnvUrls } from '~/utils/env';
7
8
 
8
9
  type EmbedHost = ReactiveControllerHost & Embed;
9
10
 
10
- type TaskDeps = [EmbedProps['env'], EmbedProps['apiKey'], EmbedProps['vouchHashId']];
11
+ type TaskDeps = [
12
+ EmbedProps['env'],
13
+ EmbedProps['apiKey'],
14
+ EmbedProps['data'],
15
+ EmbedProps['vouchId'],
16
+ EmbedProps['templateId']
17
+ ];
11
18
 
12
19
  class FetcherController {
13
20
  host: EmbedHost;
14
21
 
22
+ private _fetching = false;
23
+
24
+ set fetching(value) {
25
+ if (this._fetching !== value) {
26
+ this._fetching = value;
27
+ this.host.requestUpdate();
28
+ }
29
+ }
30
+ get fetching() {
31
+ return this._fetching;
32
+ }
33
+
34
+ private getVouch = (env: Environment, apiKey: string, vouchId: string) => {
35
+ const { embedApiUrl } = getEnvUrls(env);
36
+
37
+ return fetch(`${embedApiUrl}/vouches/${vouchId}`, {
38
+ method: 'GET',
39
+ headers: [['X-Api-Key', apiKey]]
40
+ }).then((response) => {
41
+ this.host.dispatchEvent(new CustomEvent('vouch:loaded', { detail: vouchId }));
42
+ return response.json();
43
+ });
44
+ };
45
+
46
+ private async getTemplate(env: Environment, apiKey: string, templateId: string) {
47
+ const { embedApiUrl } = getEnvUrls(env);
48
+
49
+ return fetch(`${embedApiUrl}/templates/${templateId}`, {
50
+ method: 'GET',
51
+ headers: [['X-Api-Key', apiKey]]
52
+ }).then((response) => response.json());
53
+ }
54
+
15
55
  constructor(host: EmbedHost) {
16
56
  this.host = host;
17
57
  new Task<TaskDeps, void>(
18
58
  this.host,
19
- async ([env, apiKey, vouchHashId]: TaskDeps) => {
59
+ async ([env, apiKey, data, vouchId, templateId]: TaskDeps) => {
20
60
  try {
21
- if (vouchHashId) {
22
- host.fetching = true;
23
-
24
- const { embedApiUrl } = getEnvUrls(env);
61
+ host.vouch = undefined;
62
+ host.template = undefined;
25
63
 
26
- const data = await fetch(`${embedApiUrl}/v1/vouches/${vouchHashId}`, {
27
- method: 'GET',
28
- headers: [['X-Api-Key', apiKey]]
29
- }).then((response) => response.json());
64
+ if (data) {
65
+ let template;
66
+ if (templateId) {
67
+ this.fetching = true;
68
+ template = await this.getTemplate(env, apiKey, templateId);
69
+ }
70
+ host.vouch = data;
71
+ host.template = template ?? data?.settings?.template?.instance;
72
+ } else if (vouchId) {
73
+ this.fetching = true;
30
74
 
31
- host.data = data;
32
- host.instance = data?.settings?.template?.instance;
75
+ const [vouch, template] = await Promise.all([
76
+ this.getVouch(env, apiKey, vouchId),
77
+ templateId ? this.getTemplate(env, apiKey, templateId) : null
78
+ ]);
79
+ host.vouch = vouch;
80
+ host.template = template ?? vouch?.settings?.template?.instance;
33
81
  }
34
82
  } finally {
35
- host.fetching = false;
83
+ this.fetching = false;
36
84
  }
37
85
  },
38
- () => [host.env, host.apiKey, host.vouchHashId]
86
+ () => [host.env, host.apiKey, host.data, host.vouchId, host.templateId]
39
87
  );
40
88
  }
41
89
  }
@@ -116,7 +116,6 @@ class TrackingController implements ReactiveController {
116
116
  });
117
117
 
118
118
  return {
119
- // Source might be embeds, could be playlink etc.
120
119
  source: this.host.trackingSource,
121
120
  time: new Date(),
122
121
  region,
@@ -134,22 +133,20 @@ class TrackingController implements ReactiveController {
134
133
  const { client, tab, request, visitor } = this._getUids();
135
134
 
136
135
  // Don't send tracking if we don't have a source
137
- if (this.host.enableTracking && this.host.trackingSource) {
138
- navigator.sendBeacon(
139
- `${publicApiUrl}/api/events`,
140
- JSON.stringify({
141
- event,
142
- payload,
143
- context: {
144
- 'x-uid-client': client,
145
- 'x-uid-tab': tab,
146
- 'x-uid-request': request,
147
- 'x-uid-visitor': visitor,
148
- 'x-reporting-metadata': this._getReportingMetadata()
149
- }
150
- })
151
- );
152
- }
136
+ navigator.sendBeacon(
137
+ `${publicApiUrl}/api/events`,
138
+ JSON.stringify({
139
+ event,
140
+ payload,
141
+ context: {
142
+ 'x-uid-client': client,
143
+ 'x-uid-tab': tab,
144
+ 'x-uid-request': request,
145
+ 'x-uid-visitor': visitor,
146
+ 'x-reporting-metadata': this._getReportingMetadata()
147
+ }
148
+ })
149
+ );
153
150
  };
154
151
 
155
152
  private _handleVouchLoaded = ({ detail: vouchId }: CustomEvent<string>) => {
@@ -243,25 +240,21 @@ class TrackingController implements ReactiveController {
243
240
  };
244
241
 
245
242
  hostConnected() {
246
- if (this.host.enableTracking && this.host.trackingSource) {
247
- requestAnimationFrame(() => {
248
- this.host.addEventListener('vouch:loaded', this._handleVouchLoaded);
249
- this.host.mediaPlayer?.addEventListener('play', this._handlePlay);
250
- this.host.mediaPlayer?.addEventListener('video:play', this._handleVideoPlay);
251
- this.host.mediaPlayer?.addEventListener('video:pause', this._handleVideoPause);
252
- this.host.mediaPlayer?.addEventListener('video:timeupdate', this._handleVideoTimeUpdate);
253
- });
254
- }
243
+ requestAnimationFrame(() => {
244
+ this.host.addEventListener('vouch:loaded', this._handleVouchLoaded);
245
+ this.host.mediaPlayer?.addEventListener('play', this._handlePlay);
246
+ this.host.mediaPlayer?.addEventListener('video:play', this._handleVideoPlay);
247
+ this.host.mediaPlayer?.addEventListener('video:pause', this._handleVideoPause);
248
+ this.host.mediaPlayer?.addEventListener('video:timeupdate', this._handleVideoTimeUpdate);
249
+ });
255
250
  }
256
251
 
257
252
  hostDisconnected() {
258
- if (this.host.enableTracking && this.host.trackingSource) {
259
- this.host.removeEventListener('vouch:loaded', this._handleVouchLoaded);
260
- this.host.mediaPlayer?.removeEventListener('play', this._handlePlay);
261
- this.host.mediaPlayer?.removeEventListener('video:play', this._handleVideoPlay);
262
- this.host.mediaPlayer?.removeEventListener('video:pause', this._handleVideoPause);
263
- this.host.mediaPlayer?.removeEventListener('video:timeupdate', this._handleVideoTimeUpdate);
264
- }
253
+ this.host.removeEventListener('vouch:loaded', this._handleVouchLoaded);
254
+ this.host.mediaPlayer?.removeEventListener('play', this._handlePlay);
255
+ this.host.mediaPlayer?.removeEventListener('video:play', this._handleVideoPlay);
256
+ this.host.mediaPlayer?.removeEventListener('video:pause', this._handleVideoPause);
257
+ this.host.mediaPlayer?.removeEventListener('video:timeupdate', this._handleVideoTimeUpdate);
265
258
  }
266
259
  }
267
260
 
@@ -1,9 +1,9 @@
1
1
  import { html, LitElement } from 'lit';
2
- import { customElement, state, property } from 'lit/decorators.js';
2
+ 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 } from '@vouchfor/canvas-video';
6
+ import type { Scene, TemplateInstance } from '@vouchfor/canvas-video';
7
7
  import type { MediaPlayer, MediaPlayerProps } from '@vouchfor/media-player';
8
8
  import type { Ref } from 'lit/directives/ref.js';
9
9
  import type { Environment } from '~/utils/env';
@@ -14,39 +14,30 @@ import { TrackingController } from './controllers/tracking';
14
14
 
15
15
  import '@vouchfor/media-player';
16
16
 
17
- type EmbedProps = Pick<
18
- MediaPlayerProps,
19
- 'data' | 'resolution' | 'aspectRatio' | 'preload' | 'autoplay' | 'controls'
20
- > & {
17
+ type EmbedProps = Pick<MediaPlayerProps, 'data' | 'aspectRatio' | 'preload' | 'autoplay' | 'controls'> & {
21
18
  env: Environment;
22
19
  apiKey: string;
23
- vouchHashId?: string;
24
- enableTracking?: boolean;
25
20
  trackingSource?: string;
21
+ vouchId?: string;
22
+ templateId?: string;
26
23
  };
27
24
 
28
25
  @customElement('vouch-embed')
29
26
  class Embed extends LitElement {
30
27
  private _mediaPlayerRef: Ref<MediaPlayer> = createRef();
31
28
 
32
- @property({ type: Object, attribute: 'data' }) propData: EmbedProps['data'];
33
- @property({ type: String }) vouchHashId: EmbedProps['vouchHashId'];
29
+ @property({ type: Object, attribute: 'data' }) data: EmbedProps['data'];
30
+ @property({ type: String }) vouchId: EmbedProps['vouchId'];
31
+ @property({ type: String }) templateId: EmbedProps['templateId'];
34
32
 
35
33
  @property({ type: String }) env: EmbedProps['env'] = 'prod';
36
34
  @property({ type: String }) apiKey: EmbedProps['apiKey'] = '';
35
+ @property({ type: String }) trackingSource: EmbedProps['trackingSource'] = 'embed';
37
36
 
37
+ @property({ type: Array }) controls: EmbedProps['controls'];
38
38
  @property({ type: String }) preload: EmbedProps['preload'] = 'auto';
39
39
  @property({ type: Boolean }) autoplay: EmbedProps['autoplay'] = false;
40
- @property({ type: Boolean }) enableTracking: EmbedProps['enableTracking'] = false;
41
- @property({ type: String }) trackingSource: EmbedProps['trackingSource'] = 'media_player';
42
-
43
- @property({ type: Number }) resolution: EmbedProps['resolution'] = 1080;
44
40
  @property({ type: Number }) aspectRatio: EmbedProps['aspectRatio'] = 0;
45
- @property({ type: Array }) controls: EmbedProps['controls'];
46
-
47
- @state() data: MediaPlayerProps['data'];
48
- @state() instance: MediaPlayerProps['instance'];
49
- @state() fetching = false;
50
41
 
51
42
  private eventController = new EventForwardController(this, [
52
43
  'durationchange',
@@ -75,12 +66,17 @@ class Embed extends LitElement {
75
66
  'video:ended',
76
67
  'video:error'
77
68
  ]);
69
+ private _fetcherController = new FetcherController(this);
78
70
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
79
71
  // @ts-ignore
80
- private trackingController = new TrackingController(this);
81
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
82
- // @ts-ignore
83
- private fetcherController = new FetcherController(this);
72
+ private _trackingController = new TrackingController(this);
73
+
74
+ @state() vouch: EmbedProps['data'];
75
+ @state() template: TemplateInstance | undefined;
76
+
77
+ get fetching() {
78
+ return this._fetcherController.fetching;
79
+ }
84
80
 
85
81
  get waiting() {
86
82
  return this._mediaPlayerRef.value?.waiting;
@@ -172,18 +168,17 @@ class Embed extends LitElement {
172
168
 
173
169
  render() {
174
170
  return html`
175
- <vmp-media-player
171
+ <vmp-new-media-player
176
172
  ${ref(this._mediaPlayerRef)}
177
173
  ${this.eventController.register()}
178
174
  ?autoplay=${this.autoplay}
179
175
  ?loading=${this.fetching}
180
- .data=${this.data}
181
- .instance=${this.instance}
182
- resolution=${ifDefined(this.resolution)}
176
+ .data=${this.vouch}
177
+ .template=${this.template}
183
178
  aspectRatio=${ifDefined(this.aspectRatio)}
184
179
  preload=${ifDefined(this.preload)}
185
180
  .controls=${this.controls}
186
- ></vmp-media-player>
181
+ ></vmp-new-media-player>
187
182
  `;
188
183
  }
189
184
  }
package/src/utils/env.ts CHANGED
@@ -18,9 +18,9 @@ const devPublicApiUrl = 'https://bshyfw4h5a.execute-api.ap-southeast-2.amazonaws
18
18
  const stagingPublicApiUrl = 'https://gyzw7rpbq3.execute-api.ap-southeast-2.amazonaws.com/staging';
19
19
  const prodPublicApiUrl = 'https://vfcjuim1l3.execute-api.ap-southeast-2.amazonaws.com/prod';
20
20
 
21
- const devEmbedApiUrl = 'http://localhost:6060/v1';
22
- const stagingEmbedApiUrl = 'https://embed-staging.vouchfor.com/v1';
23
- const prodEmbedApiUrl = 'https://embed.vouchfor.com/v1';
21
+ const devEmbedApiUrl = 'https://embed-dev.vouchfor.com/v2';
22
+ const stagingEmbedApiUrl = 'https://embed-staging.vouchfor.com/v2';
23
+ const prodEmbedApiUrl = 'https://embed.vouchfor.com/v2';
24
24
 
25
25
  const devPublicRecorderUrl = 'https://dev.vouchfor.com';
26
26
  const stagingPublicRecorderUrl = 'https://staging.vouchfor.com';