@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/dist/es/components/Embed/controllers/fetcher.d.ts +5 -0
- package/dist/es/components/Embed/index.d.ts +14 -15
- package/dist/es/embeds.js +187 -170
- package/dist/es/embeds.js.map +1 -1
- package/dist/es/utils/env.d.ts +3 -3
- package/dist/iife/embeds.iife.js +311 -370
- package/dist/iife/embeds.iife.js.map +1 -1
- package/package.json +4 -4
- package/src/components/Embed/Embed.stories.ts +8 -24
- package/src/components/Embed/controllers/fetcher.ts +62 -14
- package/src/components/Embed/controllers/tracking.ts +26 -33
- package/src/components/Embed/index.ts +23 -28
- package/src/utils/env.ts +3 -3
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.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
|
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.
|
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
|
-
|
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
|
-
|
59
|
-
|
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 = [
|
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,
|
59
|
+
async ([env, apiKey, data, vouchId, templateId]: TaskDeps) => {
|
20
60
|
try {
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
const { embedApiUrl } = getEnvUrls(env);
|
61
|
+
host.vouch = undefined;
|
62
|
+
host.template = undefined;
|
25
63
|
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
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
|
-
|
32
|
-
|
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
|
-
|
83
|
+
this.fetching = false;
|
36
84
|
}
|
37
85
|
},
|
38
|
-
() => [host.env, host.apiKey, host.
|
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
|
-
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
|
142
|
-
|
143
|
-
|
144
|
-
|
145
|
-
|
146
|
-
|
147
|
-
|
148
|
-
|
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
|
-
|
247
|
-
|
248
|
-
|
249
|
-
|
250
|
-
|
251
|
-
|
252
|
-
|
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
|
-
|
259
|
-
|
260
|
-
|
261
|
-
|
262
|
-
|
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,
|
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' })
|
33
|
-
@property({ type: String })
|
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
|
81
|
-
|
82
|
-
|
83
|
-
|
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.
|
181
|
-
.
|
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 = '
|
22
|
-
const stagingEmbedApiUrl = 'https://embed-staging.vouchfor.com/
|
23
|
-
const prodEmbedApiUrl = 'https://embed.vouchfor.com/
|
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';
|