@vouchfor/embeds 0.0.0-experiment.bdda3d0 → 0.0.0-experiment.c360b77

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.bdda3d0",
3
+ "version": "0.0.0-experiment.c360b77",
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,12 +35,12 @@
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.bdda3d0",
38
+ "@lit/task": "^1.0.0",
39
+ "@vouchfor/media-player": "0.0.0-experiment.c360b77",
40
40
  "uuid": "^9.0.1"
41
41
  },
42
42
  "peerDependencies": {
43
- "lit": "^3.0.2"
43
+ "lit": "^3.1.0"
44
44
  },
45
45
  "devDependencies": {
46
46
  "@esm-bundle/chai": "^4.3.4-fix.0",
@@ -62,7 +62,7 @@
62
62
  "eslint": "^8.50.0",
63
63
  "eslint-plugin-import": "^2.28.1",
64
64
  "lint-staged": "^14.0.1",
65
- "lit": "^2.8.0",
65
+ "lit": "^3.1.0",
66
66
  "prettier": "^3.0.3",
67
67
  "react": "^18.2.0",
68
68
  "react-dom": "^18.2.0",
@@ -39,10 +39,10 @@ type Story = StoryObj<EmbedArgs>;
39
39
 
40
40
  const Embed: Story = {
41
41
  args: {
42
- env: 'dev',
42
+ env: 'local',
43
43
  apiKey: 'TVik9uTMgE-PD25UTHIS6gyl0hMBWC7AT4dkpdlLBT4VIfDWZJrQiCk6Ak7m1',
44
44
  vouchId: '6JQEIPeStt',
45
- templateId: '7d0113f7-3f9a-4bdd-97e3-07ee6eec5730',
45
+ templateId: '357fc118-e179-4171-9446-ff2b8e9d1b29',
46
46
  aspectRatio: 0,
47
47
  preload: 'none',
48
48
  autoplay: false
@@ -50,7 +50,7 @@ const Embed: Story = {
50
50
  argTypes: {
51
51
  env: {
52
52
  control: 'radio',
53
- options: ['prod', 'staging', 'dev']
53
+ options: ['local', 'dev', 'staging', 'prod']
54
54
  },
55
55
  preload: {
56
56
  control: 'radio',
@@ -1,7 +1,6 @@
1
1
  import { Task } from '@lit/task';
2
2
 
3
3
  import type { Embed, EmbedProps } from '..';
4
- import type { TemplateInstance } from '@vouchfor/canvas-video';
5
4
  import type { ReactiveControllerHost } from 'lit';
6
5
  import type { Environment } from '~/utils/env';
7
6
 
@@ -21,8 +20,6 @@ class FetcherController {
21
20
  host: EmbedHost;
22
21
 
23
22
  private _fetching = false;
24
- private _vouch?: EmbedProps['data'];
25
- private _template?: TemplateInstance;
26
23
 
27
24
  set fetching(value) {
28
25
  if (this._fetching !== value) {
@@ -34,51 +31,48 @@ class FetcherController {
34
31
  return this._fetching;
35
32
  }
36
33
 
37
- set vouch(value) {
38
- if (this._vouch !== value) {
39
- this._vouch = value;
40
- this.host.requestUpdate();
41
- }
42
- }
43
- get vouch() {
44
- return this._vouch;
45
- }
46
-
47
- set template(value) {
48
- if (this._template !== value) {
49
- this._template = value;
50
- this.host.requestUpdate();
51
- }
52
- }
53
- get template() {
54
- return this._template;
55
- }
56
-
57
- private async getVouch(env: Environment, apiKey: string, vouchId?: string) {
34
+ private getVouch = async (env: Environment, apiKey: string, vouchId: string) => {
58
35
  const { embedApiUrl } = getEnvUrls(env);
59
36
 
60
- if (vouchId) {
61
- return fetch(`${embedApiUrl}/vouches/${vouchId}`, {
62
- method: 'GET',
63
- headers: [['X-Api-Key', apiKey]]
64
- }).then((response) => response.json());
65
- }
66
-
67
- return null;
68
- }
69
-
70
- private async getTemplate(env: Environment, apiKey: string, templateId?: string) {
37
+ const vouch = await 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
+ // HACK: trigger another fetch after we received the data to update the cache in the background
46
+ fetch(`${embedApiUrl}/vouches/${vouchId}`, {
47
+ method: 'GET',
48
+ headers: [
49
+ ['X-Api-Key', apiKey],
50
+ ['Cache-Control', 'max-age=0']
51
+ ]
52
+ });
53
+
54
+ return vouch;
55
+ };
56
+
57
+ private getTemplate = async (env: Environment, apiKey: string, templateId: string) => {
71
58
  const { embedApiUrl } = getEnvUrls(env);
72
59
 
73
- if (templateId) {
74
- return fetch(`${embedApiUrl}/templates/${templateId}`, {
75
- method: 'GET',
76
- headers: [['X-Api-Key', apiKey]]
77
- }).then((response) => response.json());
78
- }
60
+ const template = await fetch(`${embedApiUrl}/templates/${templateId}`, {
61
+ method: 'GET',
62
+ headers: [['X-Api-Key', apiKey]]
63
+ }).then((response) => response.json());
79
64
 
80
- return null;
81
- }
65
+ // HACK: trigger another fetch after we received the data to update the cache in the background
66
+ fetch(`${embedApiUrl}/templates/${templateId}`, {
67
+ method: 'GET',
68
+ headers: [
69
+ ['X-Api-Key', apiKey],
70
+ ['Cache-Control', 'max-age=0']
71
+ ]
72
+ });
73
+
74
+ return template;
75
+ };
82
76
 
83
77
  constructor(host: EmbedHost) {
84
78
  this.host = host;
@@ -86,22 +80,26 @@ class FetcherController {
86
80
  this.host,
87
81
  async ([env, apiKey, data, vouchId, templateId]: TaskDeps) => {
88
82
  try {
89
- this.vouch = undefined;
90
- this.template = undefined;
83
+ host.vouch = undefined;
84
+ host.template = undefined;
91
85
 
92
86
  if (data) {
93
- const template = await this.getTemplate(env, apiKey, templateId);
94
- this.vouch = data;
95
- this.template = data?.settings?.template?.instance ?? template;
87
+ let template;
88
+ if (templateId) {
89
+ this.fetching = true;
90
+ template = await this.getTemplate(env, apiKey, templateId);
91
+ }
92
+ host.vouch = data;
93
+ host.template = template ?? data?.settings?.template?.instance;
96
94
  } else if (vouchId) {
97
95
  this.fetching = true;
98
96
 
99
97
  const [vouch, template] = await Promise.all([
100
98
  this.getVouch(env, apiKey, vouchId),
101
- this.getTemplate(env, apiKey, templateId)
99
+ templateId ? this.getTemplate(env, apiKey, templateId) : null
102
100
  ]);
103
- this.vouch = vouch;
104
- this.template = vouch?.settings?.template?.instance ?? template;
101
+ host.vouch = vouch;
102
+ host.template = template ?? vouch?.settings?.template?.instance;
105
103
  }
106
104
  } finally {
107
105
  this.fetching = false;
@@ -116,7 +116,7 @@ class TrackingController implements ReactiveController {
116
116
  });
117
117
 
118
118
  return {
119
- source: 'media_player',
119
+ source: this.host.trackingSource,
120
120
  time: new Date(),
121
121
  region,
122
122
  country,
@@ -1,5 +1,5 @@
1
1
  import { html, LitElement } from 'lit';
2
- import { customElement, 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
 
@@ -17,6 +17,7 @@ import '@vouchfor/media-player';
17
17
  type EmbedProps = Pick<MediaPlayerProps, 'data' | 'aspectRatio' | 'preload' | 'autoplay' | 'controls'> & {
18
18
  env: Environment;
19
19
  apiKey: string;
20
+ trackingSource?: string;
20
21
  vouchId?: string;
21
22
  templateId?: string;
22
23
  };
@@ -31,6 +32,7 @@ class Embed extends LitElement {
31
32
 
32
33
  @property({ type: String }) env: EmbedProps['env'] = 'prod';
33
34
  @property({ type: String }) apiKey: EmbedProps['apiKey'] = '';
35
+ @property({ type: String }) trackingSource: EmbedProps['trackingSource'] = 'embed';
34
36
 
35
37
  @property({ type: Array }) controls: EmbedProps['controls'];
36
38
  @property({ type: String }) preload: EmbedProps['preload'] = 'auto';
@@ -69,13 +71,8 @@ class Embed extends LitElement {
69
71
  // @ts-ignore
70
72
  private _trackingController = new TrackingController(this);
71
73
 
72
- get vouch() {
73
- return this._fetcherController.vouch;
74
- }
75
-
76
- get template(): TemplateInstance | undefined {
77
- return this._fetcherController.template;
78
- }
74
+ @state() vouch: EmbedProps['data'];
75
+ @state() template: TemplateInstance | undefined;
79
76
 
80
77
  get fetching() {
81
78
  return this._fetcherController.fetching;
package/src/utils/env.ts CHANGED
@@ -1,15 +1,11 @@
1
- type Environment = 'dev' | 'staging' | 'prod';
1
+ type Environment = 'local' | 'dev' | 'staging' | 'prod';
2
2
 
3
3
  type GetEnvUrlsReturn = {
4
- marketingUrl: string;
5
4
  videoUrl: string;
6
5
  publicApiUrl: string;
7
6
  embedApiUrl: string;
8
- publicRecorderUrl: string;
9
7
  };
10
8
 
11
- const marketingUrl = 'https://vouchfor.com';
12
-
13
9
  const devVideoUrl = 'https://d2rxhdlm2q91uk.cloudfront.net';
14
10
  const stagingVideoUrl = 'https://d1ix11aj5kfygl.cloudfront.net';
15
11
  const prodVideoUrl = 'https://d157jlwnudd93d.cloudfront.net';
@@ -18,61 +14,51 @@ const devPublicApiUrl = 'https://bshyfw4h5a.execute-api.ap-southeast-2.amazonaws
18
14
  const stagingPublicApiUrl = 'https://gyzw7rpbq3.execute-api.ap-southeast-2.amazonaws.com/staging';
19
15
  const prodPublicApiUrl = 'https://vfcjuim1l3.execute-api.ap-southeast-2.amazonaws.com/prod';
20
16
 
21
- const devEmbedApiUrl = 'http://localhost:6060/v1';
22
- const stagingEmbedApiUrl = 'https://embed-staging.vouchfor.com/v1';
23
- const prodEmbedApiUrl = 'https://embed.vouchfor.com/v1';
24
-
25
- const devPublicRecorderUrl = 'https://dev.vouchfor.com';
26
- const stagingPublicRecorderUrl = 'https://staging.vouchfor.com';
27
- const prodPublicRecorderUrl = 'https://app.vouchfor.com';
17
+ const localEmbedApiUrl = 'http://localhost:6060/v2';
18
+ const devEmbedApiUrl = 'https://embed-dev.vouchfor.com/v2';
19
+ const stagingEmbedApiUrl = 'https://embed-staging.vouchfor.com/v2';
20
+ const prodEmbedApiUrl = 'https://embed.vouchfor.com/v2';
28
21
 
29
22
  // We are handling the case where env is an unknown string so the ts error is a lie
30
23
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
31
24
  // @ts-ignore
32
25
  function getEnvUrls(env: Environment): GetEnvUrlsReturn {
33
- if (!['dev', 'staging', 'prod'].includes(env)) {
26
+ if (!['local', 'dev', 'staging', 'prod'].includes(env)) {
34
27
  throw new Error(`Unknown environment: ${env}`);
35
28
  }
36
29
 
30
+ if (env === 'local') {
31
+ return {
32
+ videoUrl: devVideoUrl,
33
+ publicApiUrl: devPublicApiUrl,
34
+ embedApiUrl: localEmbedApiUrl
35
+ };
36
+ }
37
+
37
38
  if (env === 'dev') {
38
39
  return {
39
- marketingUrl,
40
40
  videoUrl: devVideoUrl,
41
41
  publicApiUrl: devPublicApiUrl,
42
- embedApiUrl: devEmbedApiUrl,
43
- publicRecorderUrl: devPublicRecorderUrl
42
+ embedApiUrl: devEmbedApiUrl
44
43
  };
45
44
  }
46
45
 
47
46
  if (env === 'staging') {
48
47
  return {
49
- marketingUrl,
50
48
  videoUrl: stagingVideoUrl,
51
49
  publicApiUrl: stagingPublicApiUrl,
52
- embedApiUrl: stagingEmbedApiUrl,
53
- publicRecorderUrl: stagingPublicRecorderUrl
50
+ embedApiUrl: stagingEmbedApiUrl
54
51
  };
55
52
  }
56
53
 
57
54
  if (env === 'prod') {
58
55
  return {
59
- marketingUrl,
60
56
  videoUrl: prodVideoUrl,
61
57
  publicApiUrl: prodPublicApiUrl,
62
- embedApiUrl: prodEmbedApiUrl,
63
- publicRecorderUrl: prodPublicRecorderUrl
58
+ embedApiUrl: prodEmbedApiUrl
64
59
  };
65
60
  }
66
61
  }
67
62
 
68
- export {
69
- marketingUrl,
70
- devEmbedApiUrl,
71
- stagingEmbedApiUrl,
72
- prodEmbedApiUrl,
73
- devPublicRecorderUrl,
74
- stagingPublicRecorderUrl,
75
- prodPublicRecorderUrl,
76
- getEnvUrls
77
- };
63
+ export { devEmbedApiUrl, stagingEmbedApiUrl, prodEmbedApiUrl, getEnvUrls };
78
64
  export type { Environment };
@@ -1,14 +0,0 @@
1
- import type { Embed } from '..';
2
- import type { ReactiveController, ReactiveControllerHost } from 'lit';
3
- type EmbedHost = ReactiveControllerHost & Embed;
4
- declare class EventForwardController implements ReactiveController {
5
- host: EmbedHost;
6
- private _events;
7
- private _cleanup;
8
- private _forwardElementRef;
9
- constructor(host: EmbedHost, events: string[]);
10
- register(): import("lit-html/directive.js").DirectiveResult<typeof import("lit-html/directives/ref.js").RefDirective>;
11
- hostConnected(): void;
12
- hostDisconnected(): void;
13
- }
14
- export { EventForwardController };