@vouchfor/embeds 0.0.0-experiment.de04f63 → 0.0.0-experiment.df12bef
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/embeds.js +1012 -618
- package/dist/es/embeds.js.map +1 -1
- package/dist/es/{components → src/components}/Embed/controllers/fetcher.d.ts +5 -0
- package/dist/es/{components → src/components}/Embed/controllers/tracking.d.ts +7 -2
- package/dist/es/{components → src/components}/Embed/index.d.ts +18 -16
- package/dist/es/src/utils/env.d.ts +12 -0
- package/dist/iife/embeds.iife.js +467 -403
- package/dist/iife/embeds.iife.js.map +1 -1
- package/package.json +6 -6
- package/src/components/Embed/Embed.stories.ts +11 -26
- package/src/components/Embed/controllers/fetcher.ts +104 -14
- package/src/components/Embed/controllers/tracking.ts +117 -93
- package/src/components/Embed/index.ts +30 -28
- package/src/utils/env.ts +18 -32
- package/dist/es/components/Embed/controllers/event-forwarder.d.ts +0 -14
- package/dist/es/utils/env.d.ts +0 -18
- /package/dist/es/{index.d.ts → src/index.d.ts} +0 -0
- /package/dist/es/{utils → src/utils}/events.d.ts +0 -0
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.df12bef",
|
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.df12bef",
|
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",
|
@@ -10,32 +10,19 @@ 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
|
-
|
24
|
+
aspectRatio=${ifDefined(aspectRatio)}
|
25
|
+
@error=${console.log}
|
39
26
|
></vouch-embed>
|
40
27
|
</div>
|
41
28
|
`;
|
@@ -53,20 +40,18 @@ type Story = StoryObj<EmbedArgs>;
|
|
53
40
|
|
54
41
|
const Embed: Story = {
|
55
42
|
args: {
|
56
|
-
env: '
|
43
|
+
env: 'local',
|
57
44
|
apiKey: 'TVik9uTMgE-PD25UTHIS6gyl0hMBWC7AT4dkpdlLBT4VIfDWZJrQiCk6Ak7m1',
|
58
|
-
|
59
|
-
|
45
|
+
vouchId: '6JQEIPeStt',
|
46
|
+
templateId: '357fc118-e179-4171-9446-ff2b8e9d1b29',
|
60
47
|
aspectRatio: 0,
|
61
48
|
preload: 'none',
|
62
|
-
autoplay: false
|
63
|
-
enableTracking: true,
|
64
|
-
trackingSource: 'media_player_storybook'
|
49
|
+
autoplay: false
|
65
50
|
},
|
66
51
|
argTypes: {
|
67
52
|
env: {
|
68
53
|
control: 'radio',
|
69
|
-
options: ['
|
54
|
+
options: ['local', 'dev', 'staging', 'prod']
|
70
55
|
},
|
71
56
|
preload: {
|
72
57
|
control: 'radio',
|
@@ -1,41 +1,131 @@
|
|
1
1
|
import { Task } from '@lit/task';
|
2
|
+
import { v4 as uuidv4 } from 'uuid';
|
2
3
|
|
3
4
|
import type { Embed, EmbedProps } from '..';
|
4
5
|
import type { ReactiveControllerHost } from 'lit';
|
6
|
+
import type { Environment } from '~/utils/env';
|
5
7
|
|
6
8
|
import { getEnvUrls } from '~/utils/env';
|
7
9
|
|
8
10
|
type EmbedHost = ReactiveControllerHost & Embed;
|
9
11
|
|
10
|
-
type TaskDeps = [
|
12
|
+
type TaskDeps = [
|
13
|
+
EmbedProps['env'],
|
14
|
+
EmbedProps['apiKey'],
|
15
|
+
EmbedProps['data'],
|
16
|
+
EmbedProps['vouchId'],
|
17
|
+
EmbedProps['templateId']
|
18
|
+
];
|
11
19
|
|
12
20
|
class FetcherController {
|
13
21
|
host: EmbedHost;
|
14
22
|
|
23
|
+
private _fetching = false;
|
24
|
+
|
25
|
+
set fetching(value) {
|
26
|
+
if (this._fetching !== value) {
|
27
|
+
this._fetching = value;
|
28
|
+
this.host.requestUpdate();
|
29
|
+
}
|
30
|
+
}
|
31
|
+
get fetching() {
|
32
|
+
return this._fetching;
|
33
|
+
}
|
34
|
+
|
35
|
+
private getVouch = async (env: Environment, apiKey: string, vouchId: string) => {
|
36
|
+
const { embedApiUrl } = getEnvUrls(env);
|
37
|
+
|
38
|
+
const cacheCheck = uuidv4();
|
39
|
+
const res = await fetch(`${embedApiUrl}/vouches/${vouchId}`, {
|
40
|
+
method: 'GET',
|
41
|
+
headers: [
|
42
|
+
['X-Api-Key', apiKey],
|
43
|
+
['X-Cache-Check', cacheCheck]
|
44
|
+
]
|
45
|
+
});
|
46
|
+
|
47
|
+
const vouch = await res.json();
|
48
|
+
this.host.dispatchEvent(new CustomEvent('vouch:loaded', { detail: vouch?.id }));
|
49
|
+
|
50
|
+
// HACK: we're currently using API Gateway caching on the embed API without any invalidation logic,
|
51
|
+
// so to ensure that the cache stays up to date, whenever we detect a cache hit we trigger another
|
52
|
+
// API call with the `Cache-Control` header which will re-fill the cache
|
53
|
+
const resCacheCheck = res?.headers?.get('X-Cache-Check');
|
54
|
+
if (resCacheCheck !== cacheCheck) {
|
55
|
+
fetch(`${embedApiUrl}/vouches/${vouchId}`, {
|
56
|
+
method: 'GET',
|
57
|
+
headers: [
|
58
|
+
['X-Api-Key', apiKey],
|
59
|
+
['Cache-Control', 'max-age=0']
|
60
|
+
]
|
61
|
+
});
|
62
|
+
}
|
63
|
+
|
64
|
+
return vouch;
|
65
|
+
};
|
66
|
+
|
67
|
+
private getTemplate = async (env: Environment, apiKey: string, templateId: string) => {
|
68
|
+
const { embedApiUrl } = getEnvUrls(env);
|
69
|
+
|
70
|
+
const cacheCheck = uuidv4();
|
71
|
+
const res = await fetch(`${embedApiUrl}/templates/${templateId}`, {
|
72
|
+
method: 'GET',
|
73
|
+
headers: [
|
74
|
+
['X-Api-Key', apiKey],
|
75
|
+
['X-Cache-Check', cacheCheck]
|
76
|
+
]
|
77
|
+
});
|
78
|
+
const template = await res.json();
|
79
|
+
|
80
|
+
// HACK: we're currently using API Gateway caching on the embed API without any invalidation logic,
|
81
|
+
// so to ensure that the cache stays up to date, whenever we detect a cache hit we trigger another
|
82
|
+
// API call with the `Cache-Control` header which will re-fill the cache
|
83
|
+
const resCacheCheck = res?.headers?.get('X-Cache-Check');
|
84
|
+
if (resCacheCheck !== cacheCheck) {
|
85
|
+
fetch(`${embedApiUrl}/templates/${templateId}`, {
|
86
|
+
method: 'GET',
|
87
|
+
headers: [
|
88
|
+
['X-Api-Key', apiKey],
|
89
|
+
['Cache-Control', 'max-age=0']
|
90
|
+
]
|
91
|
+
});
|
92
|
+
}
|
93
|
+
|
94
|
+
return template;
|
95
|
+
};
|
96
|
+
|
15
97
|
constructor(host: EmbedHost) {
|
16
98
|
this.host = host;
|
17
99
|
new Task<TaskDeps, void>(
|
18
100
|
this.host,
|
19
|
-
async ([env, apiKey,
|
101
|
+
async ([env, apiKey, data, vouchId, templateId]: TaskDeps) => {
|
20
102
|
try {
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
const { embedApiUrl } = getEnvUrls(env);
|
103
|
+
host.vouch = undefined;
|
104
|
+
host.template = undefined;
|
25
105
|
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
106
|
+
if (data) {
|
107
|
+
let template;
|
108
|
+
if (templateId) {
|
109
|
+
this.fetching = true;
|
110
|
+
template = await this.getTemplate(env, apiKey, templateId);
|
111
|
+
}
|
112
|
+
host.vouch = data;
|
113
|
+
host.template = template ?? data?.settings?.template?.instance;
|
114
|
+
} else if (vouchId) {
|
115
|
+
this.fetching = true;
|
30
116
|
|
31
|
-
|
32
|
-
|
117
|
+
const [vouch, template] = await Promise.all([
|
118
|
+
this.getVouch(env, apiKey, vouchId),
|
119
|
+
templateId ? this.getTemplate(env, apiKey, templateId) : null
|
120
|
+
]);
|
121
|
+
host.vouch = vouch;
|
122
|
+
host.template = template ?? vouch?.settings?.template?.instance;
|
33
123
|
}
|
34
124
|
} finally {
|
35
|
-
|
125
|
+
this.fetching = false;
|
36
126
|
}
|
37
127
|
},
|
38
|
-
() => [host.env, host.apiKey, host.
|
128
|
+
() => [host.env, host.apiKey, host.data, host.vouchId, host.templateId]
|
39
129
|
);
|
40
130
|
}
|
41
131
|
}
|
@@ -4,15 +4,16 @@ import type { Embed } from '..';
|
|
4
4
|
import type { VideoEventDetail } from '@vouchfor/media-player';
|
5
5
|
import type { ReactiveController, ReactiveControllerHost } from 'lit';
|
6
6
|
|
7
|
+
import packageJson from '../../../../package.json';
|
7
8
|
import { getEnvUrls } from '~/utils/env';
|
8
9
|
|
9
|
-
const
|
10
|
+
const MINIMUM_SEND_THRESHOLD = 1;
|
10
11
|
|
11
12
|
type EmbedHost = ReactiveControllerHost & Embed;
|
12
13
|
|
13
14
|
type TrackingEvent = 'VOUCH_LOADED' | 'VOUCH_RESPONSE_VIEWED' | 'VIDEO_PLAYED' | 'VIDEO_STREAMED';
|
14
15
|
type TrackingPayload = {
|
15
|
-
vouchId
|
16
|
+
vouchId?: string;
|
16
17
|
answerId?: string;
|
17
18
|
streamStart?: number;
|
18
19
|
streamEnd?: number;
|
@@ -36,21 +37,23 @@ class TrackingController implements ReactiveController {
|
|
36
37
|
private _hasPlayed = false;
|
37
38
|
private _hasLoaded: BooleanMap = {};
|
38
39
|
private _answersViewed: BooleanMap = {};
|
39
|
-
private
|
40
|
-
private
|
40
|
+
private _streamStartTime: TimeMap = {};
|
41
|
+
private _streamLatestTime: TimeMap = {};
|
42
|
+
private _currentlyPlayingVideo: VideoEventDetail | null = null;
|
41
43
|
|
42
44
|
constructor(host: EmbedHost) {
|
43
45
|
this.host = host;
|
44
46
|
host.addController(this);
|
45
47
|
}
|
46
48
|
|
47
|
-
private _findVouchId() {
|
48
|
-
if (
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
return this.host.
|
49
|
+
private _findVouchId(payload?: TrackingPayload) {
|
50
|
+
if (payload && 'vouchId' in payload) {
|
51
|
+
return payload.vouchId;
|
52
|
+
}
|
53
|
+
if (this.host.vouch) {
|
54
|
+
return this.host.vouch.id;
|
53
55
|
}
|
56
|
+
return null;
|
54
57
|
}
|
55
58
|
|
56
59
|
private _createVisitor = (visitorId: string) => {
|
@@ -116,7 +119,6 @@ class TrackingController implements ReactiveController {
|
|
116
119
|
});
|
117
120
|
|
118
121
|
return {
|
119
|
-
// Source might be embeds, could be playlink etc.
|
120
122
|
source: this.host.trackingSource,
|
121
123
|
time: new Date(),
|
122
124
|
region,
|
@@ -129,26 +131,53 @@ class TrackingController implements ReactiveController {
|
|
129
131
|
};
|
130
132
|
};
|
131
133
|
|
132
|
-
private _sendTrackingEvent = (event: TrackingEvent, payload
|
134
|
+
private _sendTrackingEvent = (event: TrackingEvent, payload?: TrackingPayload) => {
|
135
|
+
const vouchId = this._findVouchId(payload);
|
136
|
+
|
137
|
+
if (!vouchId || this.host.disableTracking) {
|
138
|
+
return;
|
139
|
+
}
|
140
|
+
|
133
141
|
const { publicApiUrl } = getEnvUrls(this.host.env);
|
134
142
|
const { client, tab, request, visitor } = this._getUids();
|
135
143
|
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
|
142
|
-
|
143
|
-
|
144
|
-
|
145
|
-
|
146
|
-
|
147
|
-
|
148
|
-
|
149
|
-
|
150
|
-
|
151
|
-
|
144
|
+
navigator.sendBeacon(
|
145
|
+
`${publicApiUrl}/api/v2/events`,
|
146
|
+
JSON.stringify({
|
147
|
+
event,
|
148
|
+
payload: {
|
149
|
+
...payload,
|
150
|
+
vouchId
|
151
|
+
},
|
152
|
+
context: {
|
153
|
+
'x-uid-client': client,
|
154
|
+
'x-uid-tab': tab,
|
155
|
+
'x-uid-request': request,
|
156
|
+
'x-uid-visitor': visitor,
|
157
|
+
'x-reporting-metadata': this._getReportingMetadata(),
|
158
|
+
'x-embeds-version': packageJson.version
|
159
|
+
}
|
160
|
+
})
|
161
|
+
);
|
162
|
+
};
|
163
|
+
|
164
|
+
private _streamEnded = () => {
|
165
|
+
if (this._currentlyPlayingVideo) {
|
166
|
+
const { id, key } = this._currentlyPlayingVideo;
|
167
|
+
// Don't send a tracking event when seeking backwards
|
168
|
+
if (this._streamLatestTime[key] > this._streamStartTime[key] + MINIMUM_SEND_THRESHOLD) {
|
169
|
+
// Send a video streamed event any time the stream ends to capture the time between starting
|
170
|
+
// the video and the video stopping for any reason (pausing, deleting the embed node or closing the browser)
|
171
|
+
this._sendTrackingEvent('VIDEO_STREAMED', {
|
172
|
+
answerId: id,
|
173
|
+
streamStart: this._streamStartTime[key],
|
174
|
+
streamEnd: this._streamLatestTime[key]
|
175
|
+
});
|
176
|
+
}
|
177
|
+
|
178
|
+
// Make sure these events are only sent once by deleting the start and latest times
|
179
|
+
delete this._streamStartTime[key];
|
180
|
+
delete this._streamLatestTime[key];
|
152
181
|
}
|
153
182
|
};
|
154
183
|
|
@@ -159,109 +188,104 @@ class TrackingController implements ReactiveController {
|
|
159
188
|
|
160
189
|
// Only send loaded event once per session
|
161
190
|
if (!this._hasLoaded[vouchId]) {
|
162
|
-
this._sendTrackingEvent('VOUCH_LOADED', {
|
163
|
-
vouchId
|
164
|
-
});
|
191
|
+
this._sendTrackingEvent('VOUCH_LOADED', { vouchId });
|
165
192
|
this._hasLoaded[vouchId] = true;
|
166
193
|
}
|
167
194
|
};
|
168
195
|
|
169
196
|
private _handlePlay = () => {
|
170
|
-
const vouchId = this._findVouchId();
|
171
|
-
|
172
|
-
if (!vouchId) {
|
173
|
-
return;
|
174
|
-
}
|
175
|
-
|
176
197
|
// Only send the video played event once per session
|
177
198
|
if (!this._hasPlayed) {
|
178
199
|
this._sendTrackingEvent('VIDEO_PLAYED', {
|
179
|
-
vouchId,
|
180
200
|
streamStart: this.host.currentTime
|
181
201
|
});
|
182
202
|
this._hasPlayed = true;
|
183
203
|
}
|
184
204
|
};
|
185
205
|
|
186
|
-
private _handleVideoPlay = ({ detail: { id, node } }: CustomEvent<VideoEventDetail>) => {
|
187
|
-
const vouchId = this._findVouchId();
|
188
|
-
if (!vouchId) {
|
189
|
-
return;
|
190
|
-
}
|
206
|
+
private _handleVideoPlay = ({ detail: { id, key, node } }: CustomEvent<VideoEventDetail>) => {
|
191
207
|
// Only increment play count once per session
|
192
|
-
if (!this._answersViewed[
|
208
|
+
if (!this._answersViewed[key]) {
|
193
209
|
this._sendTrackingEvent('VOUCH_RESPONSE_VIEWED', {
|
194
|
-
vouchId,
|
195
210
|
answerId: id
|
196
211
|
});
|
197
|
-
this._answersViewed[
|
212
|
+
this._answersViewed[key] = true;
|
198
213
|
}
|
199
|
-
this._streamedTime[id] = node.currentTime;
|
200
|
-
this._streamedPrevTimestamp[id] = Date.now();
|
201
|
-
};
|
202
214
|
|
203
|
-
|
204
|
-
|
205
|
-
|
206
|
-
return;
|
215
|
+
if (!this._streamStartTime[key]) {
|
216
|
+
this._streamStartTime[key] = node.currentTime;
|
217
|
+
this._streamLatestTime[key] = node.currentTime;
|
207
218
|
}
|
208
|
-
|
219
|
+
};
|
220
|
+
|
221
|
+
private _handleVideoTimeUpdate = ({ detail: { id, key, node } }: CustomEvent<VideoEventDetail>) => {
|
209
222
|
if (
|
223
|
+
// We only want to count any time that the video is actually playing
|
210
224
|
!this.host.paused &&
|
211
|
-
// Only
|
212
|
-
id === this.host.scene?.video?.id
|
213
|
-
// Throttle the frequency that we send streamed events while playing
|
214
|
-
currentTimestamp - this._streamedPrevTimestamp[id] > STREAMED_THROTTLE
|
225
|
+
// Only update the latest time if this event fires for the currently active video
|
226
|
+
id === this.host.scene?.video?.id
|
215
227
|
) {
|
228
|
+
this._currentlyPlayingVideo = { id, key, node };
|
229
|
+
this._streamLatestTime[key] = node.currentTime;
|
230
|
+
}
|
231
|
+
};
|
232
|
+
|
233
|
+
private _handleVideoPause = ({ detail: { id, key } }: CustomEvent<VideoEventDetail>) => {
|
234
|
+
if (this._streamLatestTime[key] > this._streamStartTime[key] + MINIMUM_SEND_THRESHOLD) {
|
216
235
|
this._sendTrackingEvent('VIDEO_STREAMED', {
|
217
|
-
vouchId,
|
218
236
|
answerId: id,
|
219
|
-
streamStart: this.
|
220
|
-
streamEnd:
|
237
|
+
streamStart: this._streamStartTime[key],
|
238
|
+
streamEnd: this._streamLatestTime[key]
|
221
239
|
});
|
222
|
-
this._streamedTime[id] = node.currentTime;
|
223
|
-
this._streamedPrevTimestamp[id] = currentTimestamp;
|
224
240
|
}
|
241
|
+
delete this._streamStartTime[key];
|
242
|
+
delete this._streamLatestTime[key];
|
225
243
|
};
|
226
244
|
|
227
|
-
private
|
228
|
-
|
229
|
-
|
230
|
-
|
245
|
+
private _pageUnloading = () => {
|
246
|
+
this._streamEnded();
|
247
|
+
// This will try to send the same stream event again so we delete the start and latest
|
248
|
+
// time in stream ended so that there is no times to send and the pause event does nothing
|
249
|
+
this.host.pause();
|
250
|
+
};
|
251
|
+
|
252
|
+
private _handleVisibilityChange = () => {
|
253
|
+
if (document.visibilityState === 'hidden') {
|
254
|
+
this._pageUnloading();
|
231
255
|
}
|
232
|
-
|
233
|
-
|
234
|
-
|
235
|
-
this.
|
236
|
-
vouchId,
|
237
|
-
answerId: id,
|
238
|
-
streamStart: this._streamedTime[id],
|
239
|
-
streamEnd: node.currentTime
|
240
|
-
});
|
241
|
-
delete this._streamedTime[id];
|
242
|
-
delete this._streamedPrevTimestamp[id];
|
256
|
+
};
|
257
|
+
|
258
|
+
private _handlePageHide = () => {
|
259
|
+
this._pageUnloading();
|
243
260
|
};
|
244
261
|
|
245
262
|
hostConnected() {
|
246
|
-
|
247
|
-
|
248
|
-
|
249
|
-
|
250
|
-
|
251
|
-
|
252
|
-
|
253
|
-
|
254
|
-
|
263
|
+
requestAnimationFrame(() => {
|
264
|
+
if ('onvisibilitychange' in document) {
|
265
|
+
document.addEventListener('visibilitychange', this._handleVisibilityChange);
|
266
|
+
} else {
|
267
|
+
window.addEventListener('pagehide', this._handlePageHide);
|
268
|
+
}
|
269
|
+
this.host.addEventListener('vouch:loaded', this._handleVouchLoaded);
|
270
|
+
this.host.mediaPlayer?.addEventListener('play', this._handlePlay);
|
271
|
+
this.host.mediaPlayer?.addEventListener('video:play', this._handleVideoPlay);
|
272
|
+
this.host.mediaPlayer?.addEventListener('video:pause', this._handleVideoPause);
|
273
|
+
this.host.mediaPlayer?.addEventListener('video:timeupdate', this._handleVideoTimeUpdate);
|
274
|
+
});
|
255
275
|
}
|
256
276
|
|
257
277
|
hostDisconnected() {
|
258
|
-
|
259
|
-
|
260
|
-
|
261
|
-
|
262
|
-
|
263
|
-
this.host.mediaPlayer?.removeEventListener('video:timeupdate', this._handleVideoTimeUpdate);
|
278
|
+
this._streamEnded();
|
279
|
+
if ('onvisibilitychange' in document) {
|
280
|
+
document.removeEventListener('visibilitychange', this._handleVisibilityChange);
|
281
|
+
} else {
|
282
|
+
window.removeEventListener('pagehide', this._handlePageHide);
|
264
283
|
}
|
284
|
+
this.host.removeEventListener('vouch:loaded', this._handleVouchLoaded);
|
285
|
+
this.host.mediaPlayer?.removeEventListener('play', this._handlePlay);
|
286
|
+
this.host.mediaPlayer?.removeEventListener('video:play', this._handleVideoPlay);
|
287
|
+
this.host.mediaPlayer?.removeEventListener('video:pause', this._handleVideoPause);
|
288
|
+
this.host.mediaPlayer?.removeEventListener('video:timeupdate', this._handleVideoTimeUpdate);
|
265
289
|
}
|
266
290
|
}
|
267
291
|
|
@@ -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, Scenes, 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,32 @@ 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
|
-
|
24
|
-
enableTracking?: boolean;
|
20
|
+
disableTracking?: boolean;
|
25
21
|
trackingSource?: string;
|
22
|
+
vouchId?: string;
|
23
|
+
templateId?: string;
|
26
24
|
};
|
27
25
|
|
28
26
|
@customElement('vouch-embed')
|
29
27
|
class Embed extends LitElement {
|
30
28
|
private _mediaPlayerRef: Ref<MediaPlayer> = createRef();
|
31
29
|
|
32
|
-
@property({ type: Object, attribute: 'data' })
|
33
|
-
@property({ type: String })
|
30
|
+
@property({ type: Object, attribute: 'data' }) data: EmbedProps['data'];
|
31
|
+
@property({ type: String }) vouchId: EmbedProps['vouchId'];
|
32
|
+
@property({ type: String }) templateId: EmbedProps['templateId'];
|
34
33
|
|
35
34
|
@property({ type: String }) env: EmbedProps['env'] = 'prod';
|
36
35
|
@property({ type: String }) apiKey: EmbedProps['apiKey'] = '';
|
36
|
+
@property({ type: Boolean }) disableTracking: EmbedProps['disableTracking'] = false;
|
37
|
+
@property({ type: String }) trackingSource: EmbedProps['trackingSource'] = 'embed';
|
37
38
|
|
39
|
+
@property({ type: Array }) controls: EmbedProps['controls'];
|
38
40
|
@property({ type: String }) preload: EmbedProps['preload'] = 'auto';
|
39
41
|
@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
42
|
@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
43
|
|
51
44
|
private eventController = new EventForwardController(this, [
|
52
45
|
'durationchange',
|
@@ -66,6 +59,7 @@ class Embed extends LitElement {
|
|
66
59
|
'waiting',
|
67
60
|
|
68
61
|
'video:loadeddata',
|
62
|
+
'video:seeking',
|
69
63
|
'video:seeked',
|
70
64
|
'video:play',
|
71
65
|
'video:playing',
|
@@ -75,12 +69,17 @@ class Embed extends LitElement {
|
|
75
69
|
'video:ended',
|
76
70
|
'video:error'
|
77
71
|
]);
|
72
|
+
private _fetcherController = new FetcherController(this);
|
78
73
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
79
74
|
// @ts-ignore
|
80
|
-
private
|
81
|
-
|
82
|
-
|
83
|
-
|
75
|
+
private _trackingController = new TrackingController(this);
|
76
|
+
|
77
|
+
@state() vouch: EmbedProps['data'];
|
78
|
+
@state() template: TemplateInstance | undefined;
|
79
|
+
|
80
|
+
get fetching() {
|
81
|
+
return this._fetcherController.fetching;
|
82
|
+
}
|
84
83
|
|
85
84
|
get waiting() {
|
86
85
|
return this._mediaPlayerRef.value?.waiting;
|
@@ -150,6 +149,10 @@ class Embed extends LitElement {
|
|
150
149
|
return this._mediaPlayerRef.value?.scenes ?? [];
|
151
150
|
}
|
152
151
|
|
152
|
+
get sceneConfig(): Scenes | null {
|
153
|
+
return this._mediaPlayerRef.value?.sceneConfig ?? null;
|
154
|
+
}
|
155
|
+
|
153
156
|
get videoState() {
|
154
157
|
return this._mediaPlayerRef.value?.videoState;
|
155
158
|
}
|
@@ -172,18 +175,17 @@ class Embed extends LitElement {
|
|
172
175
|
|
173
176
|
render() {
|
174
177
|
return html`
|
175
|
-
<vmp-media-player
|
178
|
+
<vmp-new-media-player
|
176
179
|
${ref(this._mediaPlayerRef)}
|
177
180
|
${this.eventController.register()}
|
178
181
|
?autoplay=${this.autoplay}
|
179
182
|
?loading=${this.fetching}
|
180
|
-
.data=${this.
|
181
|
-
.
|
182
|
-
resolution=${ifDefined(this.resolution)}
|
183
|
+
.data=${this.vouch}
|
184
|
+
.template=${this.template}
|
183
185
|
aspectRatio=${ifDefined(this.aspectRatio)}
|
184
186
|
preload=${ifDefined(this.preload)}
|
185
187
|
.controls=${this.controls}
|
186
|
-
></vmp-media-player>
|
188
|
+
></vmp-new-media-player>
|
187
189
|
`;
|
188
190
|
}
|
189
191
|
}
|