@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.
Files changed (41) hide show
  1. package/dist/es/embeds.js +1012 -1085
  2. package/dist/es/embeds.js.map +1 -1
  3. package/dist/es/src/components/DialogEmbed/DialogOverlay.d.ts +20 -0
  4. package/dist/es/src/components/DialogEmbed/DialogPortal.d.ts +36 -0
  5. package/dist/es/src/components/DialogEmbed/index.d.ts +38 -0
  6. package/dist/es/{components/Embed → src/components/PlayerEmbed}/controllers/event-forwarder.d.ts +6 -5
  7. package/dist/es/{components/Embed → src/components/PlayerEmbed}/controllers/fetcher.d.ts +5 -4
  8. package/dist/es/src/components/PlayerEmbed/controllers/tracking/index.d.ts +36 -0
  9. package/dist/es/src/components/PlayerEmbed/controllers/tracking/utils.d.ts +17 -0
  10. package/dist/es/src/components/PlayerEmbed/index.d.ts +75 -0
  11. package/dist/es/src/components/PlayerEmbed/tests/data.d.ts +3 -0
  12. package/dist/es/src/index.d.ts +2 -0
  13. package/dist/es/src/utils/env.d.ts +12 -0
  14. package/dist/iife/dialog-embed/embed.iife.js +1759 -0
  15. package/dist/iife/dialog-embed/embed.iife.js.map +1 -0
  16. package/dist/iife/embeds.iife.js +767 -430
  17. package/dist/iife/embeds.iife.js.map +1 -1
  18. package/dist/iife/player-embed/embed.iife.js +1621 -0
  19. package/dist/iife/player-embed/embed.iife.js.map +1 -0
  20. package/package.json +43 -31
  21. package/src/components/DialogEmbed/Dialog.stories.ts +91 -0
  22. package/src/components/DialogEmbed/DialogOverlay.ts +131 -0
  23. package/src/components/DialogEmbed/DialogPortal.ts +126 -0
  24. package/src/components/DialogEmbed/index.ts +97 -0
  25. package/src/components/{Embed/Embed.stories.ts → PlayerEmbed/PlayerEmbed.stories.ts} +43 -16
  26. package/src/components/{Embed → PlayerEmbed}/controllers/event-forwarder.ts +6 -5
  27. package/src/components/PlayerEmbed/controllers/fetcher.ts +152 -0
  28. package/src/components/PlayerEmbed/controllers/tracking/index.ts +224 -0
  29. package/src/components/PlayerEmbed/controllers/tracking/utils.ts +95 -0
  30. package/src/components/{Embed → PlayerEmbed}/index.ts +85 -26
  31. package/src/components/PlayerEmbed/tests/PlayerEmbed.spec.ts +80 -0
  32. package/src/components/PlayerEmbed/tests/data.ts +183 -0
  33. package/src/index.ts +2 -1
  34. package/src/utils/env.ts +15 -29
  35. package/dist/es/components/Embed/controllers/tracking.d.ts +0 -28
  36. package/dist/es/components/Embed/index.d.ts +0 -62
  37. package/dist/es/index.d.ts +0 -1
  38. package/dist/es/utils/env.d.ts +0 -18
  39. package/src/components/Embed/controllers/fetcher.ts +0 -88
  40. package/src/components/Embed/controllers/tracking.ts +0 -261
  41. /package/dist/es/{utils → src/utils}/events.d.ts +0 -0
@@ -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