@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/dist/es/components/Embed/controllers/fetcher.d.ts +0 -7
- package/dist/es/components/Embed/index.d.ts +5 -3
- package/dist/es/embeds.js +925 -655
- package/dist/es/embeds.js.map +1 -1
- package/dist/es/utils/env.d.ts +5 -11
- package/dist/iife/embeds.iife.js +206 -294
- package/dist/iife/embeds.iife.js.map +1 -1
- package/package.json +6 -6
- package/src/components/Embed/Embed.stories.ts +3 -3
- package/src/components/Embed/controllers/fetcher.ts +49 -51
- package/src/components/Embed/controllers/tracking.ts +1 -1
- package/src/components/Embed/index.ts +5 -8
- package/src/utils/env.ts +18 -32
- package/dist/es/components/Embed/controllers/event-forwarder.d.ts +0 -14
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@vouchfor/embeds",
|
3
|
-
"version": "0.0.0-experiment.
|
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
|
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.
|
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
|
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": "^
|
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: '
|
42
|
+
env: 'local',
|
43
43
|
apiKey: 'TVik9uTMgE-PD25UTHIS6gyl0hMBWC7AT4dkpdlLBT4VIfDWZJrQiCk6Ak7m1',
|
44
44
|
vouchId: '6JQEIPeStt',
|
45
|
-
templateId: '
|
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: ['
|
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
|
-
|
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
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
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
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
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
|
-
|
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
|
-
|
90
|
-
|
83
|
+
host.vouch = undefined;
|
84
|
+
host.template = undefined;
|
91
85
|
|
92
86
|
if (data) {
|
93
|
-
|
94
|
-
|
95
|
-
|
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
|
-
|
104
|
-
|
101
|
+
host.vouch = vouch;
|
102
|
+
host.template = template ?? vouch?.settings?.template?.instance;
|
105
103
|
}
|
106
104
|
} finally {
|
107
105
|
this.fetching = false;
|
@@ -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
|
-
|
73
|
-
|
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
|
22
|
-
const
|
23
|
-
const
|
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 };
|