@vouchfor/embeds 0.0.0-experiment.17b3fc9 → 0.0.0-experiment.1884ce4

package/src/utils/env.ts

@@ -1,15 +1,11 @@
-type Environment = 'dev' | 'staging' | 'prod';
+type Environment = 'local' | 'dev' | 'staging' | 'prod';
 
 type GetEnvUrlsReturn = {
-  marketingUrl: string;
   videoUrl: string;
   publicApiUrl: string;
   embedApiUrl: string;
-  publicRecorderUrl: string;
 };
 
-const marketingUrl = 'https://vouchfor.com';
-
 const devVideoUrl = 'https://d2rxhdlm2q91uk.cloudfront.net';
 const stagingVideoUrl = 'https://d1ix11aj5kfygl.cloudfront.net';
 const prodVideoUrl = 'https://d157jlwnudd93d.cloudfront.net';
@@ -18,61 +14,51 @@ const devPublicApiUrl = 'https://bshyfw4h5a.execute-api.ap-southeast-2.amazonaws
 const stagingPublicApiUrl = 'https://gyzw7rpbq3.execute-api.ap-southeast-2.amazonaws.com/staging';
 const prodPublicApiUrl = 'https://vfcjuim1l3.execute-api.ap-southeast-2.amazonaws.com/prod';
 
-const devEmbedApiUrl = 'http://localhost:6060/v1';
-const stagingEmbedApiUrl = 'https://embed-staging.vouchfor.com/v1';
-const prodEmbedApiUrl = 'https://embed.vouchfor.com/v1';
-
-const devPublicRecorderUrl = 'https://dev.vouchfor.com';
-const stagingPublicRecorderUrl = 'https://staging.vouchfor.com';
-const prodPublicRecorderUrl = 'https://app.vouchfor.com';
+const localEmbedApiUrl = 'http://localhost:6060/v2';
+const devEmbedApiUrl = 'https://embed-dev.vouchfor.com/v2';
+const stagingEmbedApiUrl = 'https://embed-staging.vouchfor.com/v2';
+const prodEmbedApiUrl = 'https://embed.vouchfor.com/v2';
 
 // We are handling the case where env is an unknown string so the ts error is a lie
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
 function getEnvUrls(env: Environment): GetEnvUrlsReturn {
-  if (!['dev', 'staging', 'prod'].includes(env)) {
+  if (!['local', 'dev', 'staging', 'prod'].includes(env)) {
     throw new Error(`Unknown environment: ${env}`);
   }
 
+  if (env === 'local') {
+    return {
+      videoUrl: devVideoUrl,
+      publicApiUrl: devPublicApiUrl,
+      embedApiUrl: localEmbedApiUrl
+    };
+  }
+
   if (env === 'dev') {
     return {
-      marketingUrl,
       videoUrl: devVideoUrl,
       publicApiUrl: devPublicApiUrl,
-      embedApiUrl: devEmbedApiUrl,
-      publicRecorderUrl: devPublicRecorderUrl
+      embedApiUrl: devEmbedApiUrl
     };
   }
 
   if (env === 'staging') {
     return {
-      marketingUrl,
       videoUrl: stagingVideoUrl,
       publicApiUrl: stagingPublicApiUrl,
-      embedApiUrl: stagingEmbedApiUrl,
-      publicRecorderUrl: stagingPublicRecorderUrl
+      embedApiUrl: stagingEmbedApiUrl
     };
   }
 
   if (env === 'prod') {
     return {
-      marketingUrl,
       videoUrl: prodVideoUrl,
       publicApiUrl: prodPublicApiUrl,
-      embedApiUrl: prodEmbedApiUrl,
-      publicRecorderUrl: prodPublicRecorderUrl
+      embedApiUrl: prodEmbedApiUrl
     };
   }
 }
 
-export {
-  marketingUrl,
-  devEmbedApiUrl,
-  stagingEmbedApiUrl,
-  prodEmbedApiUrl,
-  devPublicRecorderUrl,
-  stagingPublicRecorderUrl,
-  prodPublicRecorderUrl,
-  getEnvUrls
-};
+export { devEmbedApiUrl, stagingEmbedApiUrl, prodEmbedApiUrl, getEnvUrls };
 export type { Environment };

package/dist/es/components/Embed/controllers/fetcher.d.ts

@@ -1,20 +0,0 @@
-import type { Embed } from '..';
-import type { TemplateInstance } from '@vouchfor/canvas-video';
-import type { ReactiveControllerHost } from 'lit';
-type EmbedHost = ReactiveControllerHost & Embed;
-declare class FetcherController {
-    host: EmbedHost;
-    private _fetching;
-    private _vouch?;
-    private _template?;
-    set fetching(value: boolean);
-    get fetching(): boolean;
-    set vouch(value: import("@vouchfor/media-player/dist/src/components/MediaPlayer/types").Vouch | undefined);
-    get vouch(): import("@vouchfor/media-player/dist/src/components/MediaPlayer/types").Vouch | undefined;
-    set template(value: TemplateInstance | undefined);
-    get template(): TemplateInstance | undefined;
-    private getVouch;
-    private getTemplate;
-    constructor(host: EmbedHost);
-}
-export { FetcherController };

package/dist/es/components/Embed/controllers/tracking.d.ts

@@ -1,28 +0,0 @@
-import type { Embed } from '..';
-import type { ReactiveController, ReactiveControllerHost } from 'lit';
-type EmbedHost = ReactiveControllerHost & Embed;
-declare class TrackingController implements ReactiveController {
-    host: EmbedHost;
-    private _tabId;
-    private _clientId;
-    private _visitorId;
-    private _hasPlayed;
-    private _hasLoaded;
-    private _answersViewed;
-    private _streamedTime;
-    private _streamedPrevTimestamp;
-    constructor(host: EmbedHost);
-    private _findVouchId;
-    private _createVisitor;
-    private _getUids;
-    private _getReportingMetadata;
-    private _sendTrackingEvent;
-    private _handleVouchLoaded;
-    private _handlePlay;
-    private _handleVideoPlay;
-    private _handleVideoTimeUpdate;
-    private _handleVideoPause;
-    hostConnected(): void;
-    hostDisconnected(): void;
-}
-export { TrackingController };

package/dist/es/components/Embed/index.d.ts

@@ -1,62 +0,0 @@
-import { LitElement } from 'lit';
-import type { Scene, TemplateInstance } from '@vouchfor/canvas-video';
-import type { MediaPlayer, MediaPlayerProps } from '@vouchfor/media-player';
-import type { Environment } from '../../utils/env';
-type EmbedProps = Pick<MediaPlayerProps, 'data' | 'aspectRatio' | 'preload' | 'autoplay' | 'controls'> & {
-    env: Environment;
-    apiKey: string;
-    vouchId?: string;
-    templateId?: string;
-};
-declare class Embed extends LitElement {
-    private _mediaPlayerRef;
-    data: EmbedProps['data'];
-    vouchId: EmbedProps['vouchId'];
-    templateId: EmbedProps['templateId'];
-    env: EmbedProps['env'];
-    apiKey: EmbedProps['apiKey'];
-    controls: EmbedProps['controls'];
-    preload: EmbedProps['preload'];
-    autoplay: EmbedProps['autoplay'];
-    aspectRatio: EmbedProps['aspectRatio'];
-    private eventController;
-    private _fetcherController;
-    private _trackingController;
-    get vouch(): import("@vouchfor/media-player/dist/src/components/MediaPlayer/types").Vouch | undefined;
-    get template(): TemplateInstance | undefined;
-    get fetching(): boolean;
-    get waiting(): boolean | undefined;
-    get seeking(): boolean | undefined;
-    get paused(): boolean | undefined;
-    get captions(): boolean | undefined;
-    get fullscreen(): boolean | undefined;
-    get duration(): number | undefined;
-    set currentTime(value: number);
-    get currentTime(): number;
-    set playbackRate(value: number);
-    get playbackRate(): number;
-    set volume(value: number);
-    get volume(): number;
-    set muted(value: boolean);
-    get muted(): boolean;
-    get scene(): Scene | null;
-    get scenes(): Scene[];
-    get videoState(): import("@vouchfor/media-player/dist/src/components/MediaPlayer/controllers/scenes").VideoStateMap | undefined;
-    get mediaPlayer(): MediaPlayer | undefined;
-    play(): void;
-    pause(): void;
-    setScene(index: number): void;
-    render(): import("lit-html").TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'vouch-embed': Embed;
-    }
-    namespace JSX {
-        interface IntrinsicElements {
-            'vouch-embed': Embed;
-        }
-    }
-}
-export { Embed };
-export type { EmbedProps };

package/dist/es/index.d.ts

@@ -1 +0,0 @@
-export { Embed } from './components/Embed';

package/dist/es/utils/env.d.ts

@@ -1,18 +0,0 @@
-type Environment = 'dev' | 'staging' | 'prod';
-type GetEnvUrlsReturn = {
-    marketingUrl: string;
-    videoUrl: string;
-    publicApiUrl: string;
-    embedApiUrl: string;
-    publicRecorderUrl: string;
-};
-declare const marketingUrl = "https://vouchfor.com";
-declare const devEmbedApiUrl = "http://localhost:6060/v1";
-declare const stagingEmbedApiUrl = "https://embed-staging.vouchfor.com/v1";
-declare const prodEmbedApiUrl = "https://embed.vouchfor.com/v1";
-declare const devPublicRecorderUrl = "https://dev.vouchfor.com";
-declare const stagingPublicRecorderUrl = "https://staging.vouchfor.com";
-declare const prodPublicRecorderUrl = "https://app.vouchfor.com";
-declare function getEnvUrls(env: Environment): GetEnvUrlsReturn;
-export { marketingUrl, devEmbedApiUrl, stagingEmbedApiUrl, prodEmbedApiUrl, devPublicRecorderUrl, stagingPublicRecorderUrl, prodPublicRecorderUrl, getEnvUrls };
-export type { Environment };

package/src/components/Embed/controllers/fetcher.ts

@@ -1,115 +0,0 @@
-import { Task } from '@lit/task';
-
-import type { Embed, EmbedProps } from '..';
-import type { TemplateInstance } from '@vouchfor/canvas-video';
-import type { ReactiveControllerHost } from 'lit';
-import type { Environment } from '~/utils/env';
-
-import { getEnvUrls } from '~/utils/env';
-
-type EmbedHost = ReactiveControllerHost & Embed;
-
-type TaskDeps = [
-  EmbedProps['env'],
-  EmbedProps['apiKey'],
-  EmbedProps['data'],
-  EmbedProps['vouchId'],
-  EmbedProps['templateId']
-];
-
-class FetcherController {
-  host: EmbedHost;
-
-  private _fetching = false;
-  private _vouch?: EmbedProps['data'];
-  private _template?: TemplateInstance;
-
-  set fetching(value) {
-    if (this._fetching !== value) {
-      this._fetching = value;
-      this.host.requestUpdate();
-    }
-  }
-  get fetching() {
-    return this._fetching;
-  }
-
-  set vouch(value) {
-    if (this._vouch !== value) {
-      this._vouch = value;
-      this.host.requestUpdate();
-    }
-  }
-  get vouch() {
-    return this._vouch;
-  }
-
-  set template(value) {
-    if (this._template !== value) {
-      this._template = value;
-      this.host.requestUpdate();
-    }
-  }
-  get template() {
-    return this._template;
-  }
-
-  private async getVouch(env: Environment, apiKey: string, vouchId?: string) {
-    const { embedApiUrl } = getEnvUrls(env);
-
-    if (vouchId) {
-      return fetch(`${embedApiUrl}/vouches/${vouchId}`, {
-        method: 'GET',
-        headers: [['X-Api-Key', apiKey]]
-      }).then((response) => response.json());
-    }
-
-    return null;
-  }
-
-  private async getTemplate(env: Environment, apiKey: string, templateId?: string) {
-    const { embedApiUrl } = getEnvUrls(env);
-
-    if (templateId) {
-      return fetch(`${embedApiUrl}/templates/${templateId}`, {
-        method: 'GET',
-        headers: [['X-Api-Key', apiKey]]
-      }).then((response) => response.json());
-    }
-
-    return null;
-  }
-
-  constructor(host: EmbedHost) {
-    this.host = host;
-    new Task<TaskDeps, void>(
-      this.host,
-      async ([env, apiKey, data, vouchId, templateId]: TaskDeps) => {
-        try {
-          this.vouch = undefined;
-          this.template = undefined;
-
-          if (data) {
-            const template = await this.getTemplate(env, apiKey, templateId);
-            this.vouch = data;
-            this.template = data?.settings?.template?.instance ?? template;
-          } else if (vouchId) {
-            this.fetching = true;
-
-            const [vouch, template] = await Promise.all([
-              this.getVouch(env, apiKey, vouchId),
-              this.getTemplate(env, apiKey, templateId)
-            ]);
-            this.vouch = vouch;
-            this.template = vouch?.settings?.template?.instance ?? template;
-          }
-        } finally {
-          this.fetching = false;
-        }
-      },
-      () => [host.env, host.apiKey, host.data, host.vouchId, host.templateId]
-    );
-  }
-}
-
-export { FetcherController };

package/src/components/Embed/controllers/tracking.ts

@@ -1,261 +0,0 @@
-import { v4 as uuidv4 } from 'uuid';
-
-import type { Embed } from '..';
-import type { VideoEventDetail } from '@vouchfor/media-player';
-import type { ReactiveController, ReactiveControllerHost } from 'lit';
-
-import { getEnvUrls } from '~/utils/env';
-
-const STREAMED_THROTTLE = 2000;
-
-type EmbedHost = ReactiveControllerHost & Embed;
-
-type TrackingEvent = 'VOUCH_LOADED' | 'VOUCH_RESPONSE_VIEWED' | 'VIDEO_PLAYED' | 'VIDEO_STREAMED';
-type TrackingPayload = {
-  vouchId: string;
-  answerId?: string;
-  streamStart?: number;
-  streamEnd?: number;
-};
-
-type TimeMap = {
-  [key: string]: number;
-};
-
-type BooleanMap = {
-  [key: string]: boolean;
-};
-
-class TrackingController implements ReactiveController {
-  host: EmbedHost;
-
-  private _tabId: string | undefined = undefined;
-  private _clientId: string | undefined = undefined;
-  private _visitorId: string | undefined = undefined;
-
-  private _hasPlayed = false;
-  private _hasLoaded: BooleanMap = {};
-  private _answersViewed: BooleanMap = {};
-  private _streamedTime: TimeMap = {};
-  private _streamedPrevTimestamp: TimeMap = {};
-
-  constructor(host: EmbedHost) {
-    this.host = host;
-    host.addController(this);
-  }
-
-  private _findVouchId() {
-    if (this.host.data) {
-      if ('uuid' in this.host.data) {
-        return this.host.data.uuid;
-      }
-      return this.host.data.id;
-    }
-  }
-
-  private _createVisitor = (visitorId: string) => {
-    const { publicApiUrl } = getEnvUrls(this.host.env);
-    window.localStorage?.setItem?.('vouch-uid-visitor', visitorId);
-    navigator.sendBeacon(`${publicApiUrl}/api/visitor`, JSON.stringify({ visitorId }));
-    return visitorId;
-  };
-
-  private _getUids() {
-    if (typeof window === 'undefined') {
-      return {
-        client: null,
-        tab: null,
-        request: uuidv4()
-      };
-    }
-
-    // Persisted for a user for the same device + browser, so we can e.g. search for all logs related to that browser
-    const visitorId =
-      this._visitorId || window.localStorage?.getItem?.('vouch-uid-visitor') || this._createVisitor(uuidv4());
-    // Persisted for a user for the same device + browser, so we can e.g. search for all logs related to that browser
-    const clientId = this._clientId || window.localStorage?.getItem?.('vouch-uid-client') || uuidv4();
-    // Persisted in session storage, so we can search for everything the user has done in a specific tab
-    const tabId = this._tabId || window.sessionStorage?.getItem?.('vouch-uid-tab') || uuidv4();
-    // Not persisted, allows us to search for any logs related to a single FE request
-    // E.g. BE should pass this request ID through all other services to be able to group logs
-    const requestId = uuidv4();
-
-    // Cache and persist uids
-    if (visitorId !== this._visitorId) {
-      this._visitorId = visitorId;
-      window.localStorage?.setItem?.('vouch-uid-visitor', visitorId);
-    }
-
-    if (clientId !== this._clientId) {
-      this._clientId = clientId;
-      window.localStorage?.setItem?.('vouch-uid-client', clientId);
-    }
-
-    if (tabId !== this._tabId) {
-      this._tabId = tabId;
-      window.sessionStorage?.setItem?.('vouch-uid-tab', tabId);
-    }
-
-    return {
-      client: clientId,
-      tab: tabId,
-      request: requestId,
-      visitor: visitorId
-    };
-  }
-
-  private _getReportingMetadata = () => {
-    const [country, region] = Intl.DateTimeFormat().resolvedOptions().timeZone?.split?.('/') ?? [];
-
-    const utmParams: any = {};
-    [...new URLSearchParams(location.search).entries()].forEach(([key, value]) => {
-      if (/utm/.test(key)) {
-        const param = key.toLowerCase().replace(/[-_][a-z0-9]/g, (group) => group.slice(-1).toUpperCase());
-        utmParams[param] = value;
-      }
-    });
-
-    return {
-      source: 'media_player',
-      time: new Date(),
-      region,
-      country,
-      screenHeight: window.screen.height,
-      screenWidth: window.screen.width,
-      referrer: document.referrer,
-      currentUrl: location.href,
-      ...utmParams
-    };
-  };
-
-  private _sendTrackingEvent = (event: TrackingEvent, payload: TrackingPayload) => {
-    const { publicApiUrl } = getEnvUrls(this.host.env);
-    const { client, tab, request, visitor } = this._getUids();
-
-    // Don't send tracking if we don't have a source
-    navigator.sendBeacon(
-      `${publicApiUrl}/api/events`,
-      JSON.stringify({
-        event,
-        payload,
-        context: {
-          'x-uid-client': client,
-          'x-uid-tab': tab,
-          'x-uid-request': request,
-          'x-uid-visitor': visitor,
-          'x-reporting-metadata': this._getReportingMetadata()
-        }
-      })
-    );
-  };
-
-  private _handleVouchLoaded = ({ detail: vouchId }: CustomEvent<string>) => {
-    if (!vouchId) {
-      return;
-    }
-
-    // Only send loaded event once per session
-    if (!this._hasLoaded[vouchId]) {
-      this._sendTrackingEvent('VOUCH_LOADED', {
-        vouchId
-      });
-      this._hasLoaded[vouchId] = true;
-    }
-  };
-
-  private _handlePlay = () => {
-    const vouchId = this._findVouchId();
-
-    if (!vouchId) {
-      return;
-    }
-
-    // Only send the video played event once per session
-    if (!this._hasPlayed) {
-      this._sendTrackingEvent('VIDEO_PLAYED', {
-        vouchId,
-        streamStart: this.host.currentTime
-      });
-      this._hasPlayed = true;
-    }
-  };
-
-  private _handleVideoPlay = ({ detail: { id, node } }: CustomEvent<VideoEventDetail>) => {
-    const vouchId = this._findVouchId();
-    if (!vouchId) {
-      return;
-    }
-    // Only increment play count once per session
-    if (!this._answersViewed[id]) {
-      this._sendTrackingEvent('VOUCH_RESPONSE_VIEWED', {
-        vouchId,
-        answerId: id
-      });
-      this._answersViewed[id] = true;
-    }
-    this._streamedTime[id] = node.currentTime;
-    this._streamedPrevTimestamp[id] = Date.now();
-  };
-
-  private _handleVideoTimeUpdate = ({ detail: { id, node } }: CustomEvent<VideoEventDetail>) => {
-    const vouchId = this._findVouchId();
-    if (!vouchId) {
-      return;
-    }
-    const currentTimestamp = Date.now();
-    if (
-      !this.host.paused &&
-      // Only fire the video seeked event when this video is the active one
-      id === this.host.scene?.video?.id &&
-      // Throttle the frequency that we send streamed events while playing
-      currentTimestamp - this._streamedPrevTimestamp[id] > STREAMED_THROTTLE
-    ) {
-      this._sendTrackingEvent('VIDEO_STREAMED', {
-        vouchId,
-        answerId: id,
-        streamStart: this._streamedTime[id],
-        streamEnd: node.currentTime
-      });
-      this._streamedTime[id] = node.currentTime;
-      this._streamedPrevTimestamp[id] = currentTimestamp;
-    }
-  };
-
-  private _handleVideoPause = ({ detail: { id, node } }: CustomEvent<VideoEventDetail>) => {
-    const vouchId = this._findVouchId();
-    if (!vouchId) {
-      return;
-    }
-    // Send a video streamed event any time the video pauses then reset the streamed state
-    // We do this to capture the last bit of time that the video was played between the previous
-    // stream event and the video being paused manually or stopping because it ended
-    this._sendTrackingEvent('VIDEO_STREAMED', {
-      vouchId,
-      answerId: id,
-      streamStart: this._streamedTime[id],
-      streamEnd: node.currentTime
-    });
-    delete this._streamedTime[id];
-    delete this._streamedPrevTimestamp[id];
-  };
-
-  hostConnected() {
-    requestAnimationFrame(() => {
-      this.host.addEventListener('vouch:loaded', this._handleVouchLoaded);
-      this.host.mediaPlayer?.addEventListener('play', this._handlePlay);
-      this.host.mediaPlayer?.addEventListener('video:play', this._handleVideoPlay);
-      this.host.mediaPlayer?.addEventListener('video:pause', this._handleVideoPause);
-      this.host.mediaPlayer?.addEventListener('video:timeupdate', this._handleVideoTimeUpdate);
-    });
-  }
-
-  hostDisconnected() {
-    this.host.removeEventListener('vouch:loaded', this._handleVouchLoaded);
-    this.host.mediaPlayer?.removeEventListener('play', this._handlePlay);
-    this.host.mediaPlayer?.removeEventListener('video:play', this._handleVideoPlay);
-    this.host.mediaPlayer?.removeEventListener('video:pause', this._handleVideoPause);
-    this.host.mediaPlayer?.removeEventListener('video:timeupdate', this._handleVideoTimeUpdate);
-  }
-}
-
-export { TrackingController };