@vouchfor/embeds 0.0.0-experiment.eb79200 → 0.0.0-experiment.f112aaa

package/src/components/Embed/index.ts

@@ -1,9 +1,9 @@
-import { html, LitElement } from 'lit';
-import { customElement, state, property } from 'lit/decorators.js';
+import { css, html, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { createRef, ref } from 'lit/directives/ref.js';
 
-import type { Scene } from '@vouchfor/canvas-video';
+import type { Scene, Scenes, TemplateInstance } from '@vouchfor/canvas-video';
 import type { MediaPlayer, MediaPlayerProps } from '@vouchfor/media-player';
 import type { Ref } from 'lit/directives/ref.js';
 import type { Environment } from '~/utils/env';
@@ -14,39 +14,43 @@ import { TrackingController } from './controllers/tracking';
 
 import '@vouchfor/media-player';
 
-type EmbedProps = Pick<
-  MediaPlayerProps,
-  'data' | 'resolution' | 'aspectRatio' | 'preload' | 'autoplay' | 'controls'
-> & {
+type EmbedProps = Pick<MediaPlayerProps, 'data' | 'aspectRatio' | 'preload' | 'autoplay' | 'controls'> & {
   env: Environment;
   apiKey: string;
-  vouchHashId?: string;
-  enableTracking?: boolean;
+  disableTracking?: boolean;
   trackingSource?: string;
+  vouchId?: string;
+  templateId?: string;
+  // Index of the questions to include starting from 1
+  questions?: number[];
 };
 
 @customElement('vouch-embed')
 class Embed extends LitElement {
+  static styles = [
+    css`
+      :host {
+        display: flex;
+      }
+    `
+  ];
+
   private _mediaPlayerRef: Ref<MediaPlayer> = createRef();
 
-  @property({ type: Object, attribute: 'data' }) propData: EmbedProps['data'];
-  @property({ type: String }) vouchHashId: EmbedProps['vouchHashId'];
+  @property({ type: Object }) data: EmbedProps['data'];
+  @property({ type: String }) vouchId: EmbedProps['vouchId'];
+  @property({ type: String }) templateId: EmbedProps['templateId'];
+  @property({ type: Array }) questions: EmbedProps['questions'];
 
   @property({ type: String }) env: EmbedProps['env'] = 'prod';
   @property({ type: String }) apiKey: EmbedProps['apiKey'] = '';
+  @property({ type: Boolean }) disableTracking: EmbedProps['disableTracking'] = false;
+  @property({ type: String }) trackingSource: EmbedProps['trackingSource'] = 'embed';
 
+  @property({ type: Array }) controls: EmbedProps['controls'];
   @property({ type: String }) preload: EmbedProps['preload'] = 'auto';
   @property({ type: Boolean }) autoplay: EmbedProps['autoplay'] = false;
-  @property({ type: Boolean }) enableTracking: EmbedProps['enableTracking'] = false;
-  @property({ type: String }) trackingSource: EmbedProps['trackingSource'] = 'media_player';
-
-  @property({ type: Number }) resolution: EmbedProps['resolution'] = 1080;
   @property({ type: Number }) aspectRatio: EmbedProps['aspectRatio'] = 0;
-  @property({ type: Array }) controls: EmbedProps['controls'];
-
-  @state() data: MediaPlayerProps['data'];
-  @state() instance: MediaPlayerProps['instance'];
-  @state() fetching = false;
 
   private eventController = new EventForwardController(this, [
     'durationchange',
@@ -66,6 +70,7 @@ class Embed extends LitElement {
     'waiting',
 
     'video:loadeddata',
+    'video:seeking',
     'video:seeked',
     'video:play',
     'video:playing',
@@ -75,12 +80,17 @@ class Embed extends LitElement {
     'video:ended',
     'video:error'
   ]);
+  private _fetcherController = new FetcherController(this);
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
-  private trackingController = new TrackingController(this);
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  private fetcherController = new FetcherController(this);
+  private _trackingController = new TrackingController(this);
+
+  @state() vouch: EmbedProps['data'];
+  @state() template: TemplateInstance | undefined;
+
+  get fetching() {
+    return this._fetcherController.fetching;
+  }
 
   get waiting() {
     return this._mediaPlayerRef.value?.waiting;
@@ -150,6 +160,10 @@ class Embed extends LitElement {
     return this._mediaPlayerRef.value?.scenes ?? [];
   }
 
+  get sceneConfig(): Scenes | null {
+    return this._mediaPlayerRef.value?.sceneConfig ?? null;
+  }
+
   get videoState() {
     return this._mediaPlayerRef.value?.videoState;
   }
@@ -177,9 +191,8 @@ class Embed extends LitElement {
         ${this.eventController.register()}
         ?autoplay=${this.autoplay}
         ?loading=${this.fetching}
-        .data=${this.data}
-        .instance=${this.instance}
-        resolution=${ifDefined(this.resolution)}
+        .data=${this.vouch}
+        .template=${this.template}
         aspectRatio=${ifDefined(this.aspectRatio)}
         preload=${ifDefined(this.preload)}
         .controls=${this.controls}

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/event-forwarder.d.ts

@@ -1,14 +0,0 @@
-import type { Embed } from '..';
-import type { ReactiveController, ReactiveControllerHost } from 'lit';
-type EmbedHost = ReactiveControllerHost & Embed;
-declare class EventForwardController implements ReactiveController {
-    host: EmbedHost;
-    private _events;
-    private _cleanup;
-    private _forwardElementRef;
-    constructor(host: EmbedHost, events: string[]);
-    register(): import("lit-html/directive.js").DirectiveResult<typeof import("lit-html/directives/ref.js").RefDirective>;
-    hostConnected(): void;
-    hostDisconnected(): void;
-}
-export { EventForwardController };

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 };