@vouchfor/embeds 0.0.0-experiment.1b80037 → 0.0.0-experiment.1f98c5e

package/src/components/Embed/index.ts

@@ -1,9 +1,9 @@
-import { html, LitElement } from 'lit';
-import { customElement, 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, TemplateInstance } 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,33 +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;
+  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' }) data: EmbedProps['data'];
+  @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'] = 'embedded_player';
 
+  @property({ type: Array }) controls: EmbedProps['controls'];
   @property({ type: String }) preload: EmbedProps['preload'] = 'auto';
   @property({ type: Boolean }) autoplay: EmbedProps['autoplay'] = false;
-
-  @property({ type: Number }) resolution: EmbedProps['resolution'] = 1080;
   @property({ type: Number }) aspectRatio: EmbedProps['aspectRatio'] = 0;
-  @property({ type: Array }) controls: EmbedProps['controls'];
 
   private eventController = new EventForwardController(this, [
     'durationchange',
@@ -60,6 +70,7 @@ class Embed extends LitElement {
     'waiting',
 
     'video:loadeddata',
+    'video:seeking',
     'video:seeked',
     'video:play',
     'video:playing',
@@ -74,13 +85,8 @@ class Embed extends LitElement {
   // @ts-ignore
   private _trackingController = new TrackingController(this);
 
-  get vouch() {
-    return this._fetcherController.vouch;
-  }
-
-  get template(): TemplateInstance | null {
-    return this._fetcherController.template;
-  }
+  @state() vouch: EmbedProps['data'];
+  @state() template: TemplateInstance | undefined;
 
   get fetching() {
     return this._fetcherController.fetching;
@@ -154,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;
   }
@@ -183,7 +193,6 @@ class Embed extends LitElement {
         ?loading=${this.fetching}
         .data=${this.vouch}
         .template=${this.template}
-        resolution=${ifDefined(this.resolution)}
         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/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 | null | undefined);
-    get vouch(): import("@vouchfor/media-player/dist/src/components/MediaPlayer/types").Vouch | null | undefined;
-    set template(value: TemplateInstance | null);
-    get template(): TemplateInstance | null;
-    private getVouch;
-    private getTemplate;
-    constructor(host: EmbedHost);
-}
-export { FetcherController };

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