@vouchfor/embeds 0.0.0-experiment.2ab669a → 0.0.0-experiment.2c20f03
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 -1085
- package/dist/es/embeds.js.map +1 -1
- package/dist/es/src/components/DialogEmbed/DialogOverlay.d.ts +20 -0
- package/dist/es/src/components/DialogEmbed/DialogPortal.d.ts +36 -0
- package/dist/es/src/components/DialogEmbed/index.d.ts +38 -0
- package/dist/es/{components/Embed → src/components/PlayerEmbed}/controllers/event-forwarder.d.ts +6 -5
- package/dist/es/{components/Embed → src/components/PlayerEmbed}/controllers/fetcher.d.ts +5 -4
- package/dist/es/src/components/PlayerEmbed/controllers/tracking/index.d.ts +36 -0
- package/dist/es/src/components/PlayerEmbed/controllers/tracking/utils.d.ts +17 -0
- package/dist/es/src/components/PlayerEmbed/index.d.ts +75 -0
- package/dist/es/src/components/PlayerEmbed/tests/data.d.ts +3 -0
- package/dist/es/src/index.d.ts +2 -0
- package/dist/es/src/utils/env.d.ts +12 -0
- package/dist/iife/dialog-embed/embed.iife.js +1759 -0
- package/dist/iife/dialog-embed/embed.iife.js.map +1 -0
- package/dist/iife/embeds.iife.js +767 -430
- package/dist/iife/embeds.iife.js.map +1 -1
- package/dist/iife/player-embed/embed.iife.js +1621 -0
- package/dist/iife/player-embed/embed.iife.js.map +1 -0
- package/package.json +43 -31
- package/src/components/DialogEmbed/Dialog.stories.ts +91 -0
- package/src/components/DialogEmbed/DialogOverlay.ts +131 -0
- package/src/components/DialogEmbed/DialogPortal.ts +126 -0
- package/src/components/DialogEmbed/index.ts +97 -0
- package/src/components/{Embed/Embed.stories.ts → PlayerEmbed/PlayerEmbed.stories.ts} +43 -16
- package/src/components/{Embed → PlayerEmbed}/controllers/event-forwarder.ts +6 -5
- package/src/components/PlayerEmbed/controllers/fetcher.ts +152 -0
- package/src/components/PlayerEmbed/controllers/tracking/index.ts +224 -0
- package/src/components/PlayerEmbed/controllers/tracking/utils.ts +95 -0
- package/src/components/{Embed → PlayerEmbed}/index.ts +85 -26
- package/src/components/PlayerEmbed/tests/PlayerEmbed.spec.ts +80 -0
- package/src/components/PlayerEmbed/tests/data.ts +183 -0
- package/src/index.ts +2 -1
- package/src/utils/env.ts +15 -29
- package/dist/es/components/Embed/controllers/tracking.d.ts +0 -28
- package/dist/es/components/Embed/index.d.ts +0 -62
- package/dist/es/index.d.ts +0 -1
- package/dist/es/utils/env.d.ts +0 -18
- package/src/components/Embed/controllers/fetcher.ts +0 -88
- package/src/components/Embed/controllers/tracking.ts +0 -261
- /package/dist/es/{utils → src/utils}/events.d.ts +0 -0
package/dist/es/utils/env.d.ts
DELETED
@@ -1,18 +0,0 @@
|
|
1
|
-
type Environment = 'dev' | 'staging' | 'prod';
|
2
|
-
type GetEnvUrlsReturn = {
|
3
|
-
marketingUrl: string;
|
4
|
-
videoUrl: string;
|
5
|
-
publicApiUrl: string;
|
6
|
-
embedApiUrl: string;
|
7
|
-
publicRecorderUrl: string;
|
8
|
-
};
|
9
|
-
declare const marketingUrl = "https://vouchfor.com";
|
10
|
-
declare const devEmbedApiUrl = "https://embed-dev.vouchfor.com/v2";
|
11
|
-
declare const stagingEmbedApiUrl = "https://embed-staging.vouchfor.com/v2";
|
12
|
-
declare const prodEmbedApiUrl = "https://embed.vouchfor.com/v2";
|
13
|
-
declare const devPublicRecorderUrl = "https://dev.vouchfor.com";
|
14
|
-
declare const stagingPublicRecorderUrl = "https://staging.vouchfor.com";
|
15
|
-
declare const prodPublicRecorderUrl = "https://app.vouchfor.com";
|
16
|
-
declare function getEnvUrls(env: Environment): GetEnvUrlsReturn;
|
17
|
-
export { marketingUrl, devEmbedApiUrl, stagingEmbedApiUrl, prodEmbedApiUrl, devPublicRecorderUrl, stagingPublicRecorderUrl, prodPublicRecorderUrl, getEnvUrls };
|
18
|
-
export type { Environment };
|
@@ -1,88 +0,0 @@
|
|
1
|
-
import { Task } from '@lit/task';
|
2
|
-
|
3
|
-
import type { Embed, EmbedProps } from '..';
|
4
|
-
import type { ReactiveControllerHost } from 'lit';
|
5
|
-
import type { Environment } from '~/utils/env';
|
6
|
-
|
7
|
-
import { getEnvUrls } from '~/utils/env';
|
8
|
-
|
9
|
-
type EmbedHost = ReactiveControllerHost & Embed;
|
10
|
-
|
11
|
-
type TaskDeps = [
|
12
|
-
EmbedProps['env'],
|
13
|
-
EmbedProps['apiKey'],
|
14
|
-
EmbedProps['data'],
|
15
|
-
EmbedProps['vouchId'],
|
16
|
-
EmbedProps['templateId']
|
17
|
-
];
|
18
|
-
|
19
|
-
class FetcherController {
|
20
|
-
host: EmbedHost;
|
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 async 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) => response.json());
|
41
|
-
}
|
42
|
-
|
43
|
-
private async getTemplate(env: Environment, apiKey: string, templateId: string) {
|
44
|
-
const { embedApiUrl } = getEnvUrls(env);
|
45
|
-
|
46
|
-
return fetch(`${embedApiUrl}/templates/${templateId}`, {
|
47
|
-
method: 'GET',
|
48
|
-
headers: [['X-Api-Key', apiKey]]
|
49
|
-
}).then((response) => response.json());
|
50
|
-
}
|
51
|
-
|
52
|
-
constructor(host: EmbedHost) {
|
53
|
-
this.host = host;
|
54
|
-
new Task<TaskDeps, void>(
|
55
|
-
this.host,
|
56
|
-
async ([env, apiKey, data, vouchId, templateId]: TaskDeps) => {
|
57
|
-
try {
|
58
|
-
host.vouch = undefined;
|
59
|
-
host.template = undefined;
|
60
|
-
|
61
|
-
if (data) {
|
62
|
-
let template;
|
63
|
-
if (templateId) {
|
64
|
-
this.fetching = true;
|
65
|
-
template = await this.getTemplate(env, apiKey, templateId);
|
66
|
-
}
|
67
|
-
host.vouch = data;
|
68
|
-
host.template = template ?? data?.settings?.template?.instance;
|
69
|
-
} else if (vouchId) {
|
70
|
-
this.fetching = true;
|
71
|
-
|
72
|
-
const [vouch, template] = await Promise.all([
|
73
|
-
this.getVouch(env, apiKey, vouchId),
|
74
|
-
templateId ? this.getTemplate(env, apiKey, templateId) : null
|
75
|
-
]);
|
76
|
-
host.vouch = vouch;
|
77
|
-
host.template = template ?? vouch?.settings?.template?.instance;
|
78
|
-
}
|
79
|
-
} finally {
|
80
|
-
this.fetching = false;
|
81
|
-
}
|
82
|
-
},
|
83
|
-
() => [host.env, host.apiKey, host.data, host.vouchId, host.templateId]
|
84
|
-
);
|
85
|
-
}
|
86
|
-
}
|
87
|
-
|
88
|
-
export { FetcherController };
|
@@ -1,261 +0,0 @@
|
|
1
|
-
import { v4 as uuidv4 } from 'uuid';
|
2
|
-
|
3
|
-
import type { Embed } from '..';
|
4
|
-
import type { VideoEventDetail } from '@vouchfor/media-player';
|
5
|
-
import type { ReactiveController, ReactiveControllerHost } from 'lit';
|
6
|
-
|
7
|
-
import { getEnvUrls } from '~/utils/env';
|
8
|
-
|
9
|
-
const STREAMED_THROTTLE = 2000;
|
10
|
-
|
11
|
-
type EmbedHost = ReactiveControllerHost & Embed;
|
12
|
-
|
13
|
-
type TrackingEvent = 'VOUCH_LOADED' | 'VOUCH_RESPONSE_VIEWED' | 'VIDEO_PLAYED' | 'VIDEO_STREAMED';
|
14
|
-
type TrackingPayload = {
|
15
|
-
vouchId: string;
|
16
|
-
answerId?: string;
|
17
|
-
streamStart?: number;
|
18
|
-
streamEnd?: number;
|
19
|
-
};
|
20
|
-
|
21
|
-
type TimeMap = {
|
22
|
-
[key: string]: number;
|
23
|
-
};
|
24
|
-
|
25
|
-
type BooleanMap = {
|
26
|
-
[key: string]: boolean;
|
27
|
-
};
|
28
|
-
|
29
|
-
class TrackingController implements ReactiveController {
|
30
|
-
host: EmbedHost;
|
31
|
-
|
32
|
-
private _tabId: string | undefined = undefined;
|
33
|
-
private _clientId: string | undefined = undefined;
|
34
|
-
private _visitorId: string | undefined = undefined;
|
35
|
-
|
36
|
-
private _hasPlayed = false;
|
37
|
-
private _hasLoaded: BooleanMap = {};
|
38
|
-
private _answersViewed: BooleanMap = {};
|
39
|
-
private _streamedTime: TimeMap = {};
|
40
|
-
private _streamedPrevTimestamp: TimeMap = {};
|
41
|
-
|
42
|
-
constructor(host: EmbedHost) {
|
43
|
-
this.host = host;
|
44
|
-
host.addController(this);
|
45
|
-
}
|
46
|
-
|
47
|
-
private _findVouchId() {
|
48
|
-
if (this.host.data) {
|
49
|
-
if ('uuid' in this.host.data) {
|
50
|
-
return this.host.data.uuid;
|
51
|
-
}
|
52
|
-
return this.host.data.id;
|
53
|
-
}
|
54
|
-
}
|
55
|
-
|
56
|
-
private _createVisitor = (visitorId: string) => {
|
57
|
-
const { publicApiUrl } = getEnvUrls(this.host.env);
|
58
|
-
window.localStorage?.setItem?.('vouch-uid-visitor', visitorId);
|
59
|
-
navigator.sendBeacon(`${publicApiUrl}/api/visitor`, JSON.stringify({ visitorId }));
|
60
|
-
return visitorId;
|
61
|
-
};
|
62
|
-
|
63
|
-
private _getUids() {
|
64
|
-
if (typeof window === 'undefined') {
|
65
|
-
return {
|
66
|
-
client: null,
|
67
|
-
tab: null,
|
68
|
-
request: uuidv4()
|
69
|
-
};
|
70
|
-
}
|
71
|
-
|
72
|
-
// Persisted for a user for the same device + browser, so we can e.g. search for all logs related to that browser
|
73
|
-
const visitorId =
|
74
|
-
this._visitorId || window.localStorage?.getItem?.('vouch-uid-visitor') || this._createVisitor(uuidv4());
|
75
|
-
// Persisted for a user for the same device + browser, so we can e.g. search for all logs related to that browser
|
76
|
-
const clientId = this._clientId || window.localStorage?.getItem?.('vouch-uid-client') || uuidv4();
|
77
|
-
// Persisted in session storage, so we can search for everything the user has done in a specific tab
|
78
|
-
const tabId = this._tabId || window.sessionStorage?.getItem?.('vouch-uid-tab') || uuidv4();
|
79
|
-
// Not persisted, allows us to search for any logs related to a single FE request
|
80
|
-
// E.g. BE should pass this request ID through all other services to be able to group logs
|
81
|
-
const requestId = uuidv4();
|
82
|
-
|
83
|
-
// Cache and persist uids
|
84
|
-
if (visitorId !== this._visitorId) {
|
85
|
-
this._visitorId = visitorId;
|
86
|
-
window.localStorage?.setItem?.('vouch-uid-visitor', visitorId);
|
87
|
-
}
|
88
|
-
|
89
|
-
if (clientId !== this._clientId) {
|
90
|
-
this._clientId = clientId;
|
91
|
-
window.localStorage?.setItem?.('vouch-uid-client', clientId);
|
92
|
-
}
|
93
|
-
|
94
|
-
if (tabId !== this._tabId) {
|
95
|
-
this._tabId = tabId;
|
96
|
-
window.sessionStorage?.setItem?.('vouch-uid-tab', tabId);
|
97
|
-
}
|
98
|
-
|
99
|
-
return {
|
100
|
-
client: clientId,
|
101
|
-
tab: tabId,
|
102
|
-
request: requestId,
|
103
|
-
visitor: visitorId
|
104
|
-
};
|
105
|
-
}
|
106
|
-
|
107
|
-
private _getReportingMetadata = () => {
|
108
|
-
const [country, region] = Intl.DateTimeFormat().resolvedOptions().timeZone?.split?.('/') ?? [];
|
109
|
-
|
110
|
-
const utmParams: any = {};
|
111
|
-
[...new URLSearchParams(location.search).entries()].forEach(([key, value]) => {
|
112
|
-
if (/utm/.test(key)) {
|
113
|
-
const param = key.toLowerCase().replace(/[-_][a-z0-9]/g, (group) => group.slice(-1).toUpperCase());
|
114
|
-
utmParams[param] = value;
|
115
|
-
}
|
116
|
-
});
|
117
|
-
|
118
|
-
return {
|
119
|
-
source: 'media_player',
|
120
|
-
time: new Date(),
|
121
|
-
region,
|
122
|
-
country,
|
123
|
-
screenHeight: window.screen.height,
|
124
|
-
screenWidth: window.screen.width,
|
125
|
-
referrer: document.referrer,
|
126
|
-
currentUrl: location.href,
|
127
|
-
...utmParams
|
128
|
-
};
|
129
|
-
};
|
130
|
-
|
131
|
-
private _sendTrackingEvent = (event: TrackingEvent, payload: TrackingPayload) => {
|
132
|
-
const { publicApiUrl } = getEnvUrls(this.host.env);
|
133
|
-
const { client, tab, request, visitor } = this._getUids();
|
134
|
-
|
135
|
-
// Don't send tracking if we don't have a source
|
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
|
-
);
|
150
|
-
};
|
151
|
-
|
152
|
-
private _handleVouchLoaded = ({ detail: vouchId }: CustomEvent<string>) => {
|
153
|
-
if (!vouchId) {
|
154
|
-
return;
|
155
|
-
}
|
156
|
-
|
157
|
-
// Only send loaded event once per session
|
158
|
-
if (!this._hasLoaded[vouchId]) {
|
159
|
-
this._sendTrackingEvent('VOUCH_LOADED', {
|
160
|
-
vouchId
|
161
|
-
});
|
162
|
-
this._hasLoaded[vouchId] = true;
|
163
|
-
}
|
164
|
-
};
|
165
|
-
|
166
|
-
private _handlePlay = () => {
|
167
|
-
const vouchId = this._findVouchId();
|
168
|
-
|
169
|
-
if (!vouchId) {
|
170
|
-
return;
|
171
|
-
}
|
172
|
-
|
173
|
-
// Only send the video played event once per session
|
174
|
-
if (!this._hasPlayed) {
|
175
|
-
this._sendTrackingEvent('VIDEO_PLAYED', {
|
176
|
-
vouchId,
|
177
|
-
streamStart: this.host.currentTime
|
178
|
-
});
|
179
|
-
this._hasPlayed = true;
|
180
|
-
}
|
181
|
-
};
|
182
|
-
|
183
|
-
private _handleVideoPlay = ({ detail: { id, node } }: CustomEvent<VideoEventDetail>) => {
|
184
|
-
const vouchId = this._findVouchId();
|
185
|
-
if (!vouchId) {
|
186
|
-
return;
|
187
|
-
}
|
188
|
-
// Only increment play count once per session
|
189
|
-
if (!this._answersViewed[id]) {
|
190
|
-
this._sendTrackingEvent('VOUCH_RESPONSE_VIEWED', {
|
191
|
-
vouchId,
|
192
|
-
answerId: id
|
193
|
-
});
|
194
|
-
this._answersViewed[id] = true;
|
195
|
-
}
|
196
|
-
this._streamedTime[id] = node.currentTime;
|
197
|
-
this._streamedPrevTimestamp[id] = Date.now();
|
198
|
-
};
|
199
|
-
|
200
|
-
private _handleVideoTimeUpdate = ({ detail: { id, node } }: CustomEvent<VideoEventDetail>) => {
|
201
|
-
const vouchId = this._findVouchId();
|
202
|
-
if (!vouchId) {
|
203
|
-
return;
|
204
|
-
}
|
205
|
-
const currentTimestamp = Date.now();
|
206
|
-
if (
|
207
|
-
!this.host.paused &&
|
208
|
-
// Only fire the video seeked event when this video is the active one
|
209
|
-
id === this.host.scene?.video?.id &&
|
210
|
-
// Throttle the frequency that we send streamed events while playing
|
211
|
-
currentTimestamp - this._streamedPrevTimestamp[id] > STREAMED_THROTTLE
|
212
|
-
) {
|
213
|
-
this._sendTrackingEvent('VIDEO_STREAMED', {
|
214
|
-
vouchId,
|
215
|
-
answerId: id,
|
216
|
-
streamStart: this._streamedTime[id],
|
217
|
-
streamEnd: node.currentTime
|
218
|
-
});
|
219
|
-
this._streamedTime[id] = node.currentTime;
|
220
|
-
this._streamedPrevTimestamp[id] = currentTimestamp;
|
221
|
-
}
|
222
|
-
};
|
223
|
-
|
224
|
-
private _handleVideoPause = ({ detail: { id, node } }: CustomEvent<VideoEventDetail>) => {
|
225
|
-
const vouchId = this._findVouchId();
|
226
|
-
if (!vouchId) {
|
227
|
-
return;
|
228
|
-
}
|
229
|
-
// Send a video streamed event any time the video pauses then reset the streamed state
|
230
|
-
// We do this to capture the last bit of time that the video was played between the previous
|
231
|
-
// stream event and the video being paused manually or stopping because it ended
|
232
|
-
this._sendTrackingEvent('VIDEO_STREAMED', {
|
233
|
-
vouchId,
|
234
|
-
answerId: id,
|
235
|
-
streamStart: this._streamedTime[id],
|
236
|
-
streamEnd: node.currentTime
|
237
|
-
});
|
238
|
-
delete this._streamedTime[id];
|
239
|
-
delete this._streamedPrevTimestamp[id];
|
240
|
-
};
|
241
|
-
|
242
|
-
hostConnected() {
|
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
|
-
});
|
250
|
-
}
|
251
|
-
|
252
|
-
hostDisconnected() {
|
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);
|
258
|
-
}
|
259
|
-
}
|
260
|
-
|
261
|
-
export { TrackingController };
|
File without changes
|