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

package/src/components/Embed/index.ts

@@ -0,0 +1,217 @@
+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, 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';
+
+import { EventForwardController } from './controllers/event-forwarder';
+import { FetcherController } from './controllers/fetcher';
+import { TrackingController } from './controllers/tracking';
+
+import '@vouchfor/media-player';
+
+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 }) 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: Number }) aspectRatio: EmbedProps['aspectRatio'] = 0;
+
+  private eventController = new EventForwardController(this, [
+    'durationchange',
+    'ended',
+    'error',
+    'loadeddata',
+    'pause',
+    'stalled',
+    'play',
+    'playing',
+    'ratechange',
+    'scenechange',
+    'seeking',
+    'seeked',
+    'timeupdate',
+    'volumechange',
+    'waiting',
+
+    'video:loadeddata',
+    'video:seeking',
+    'video:seeked',
+    'video:play',
+    'video:playing',
+    'video:pause',
+    'video:stalled',
+    'video:timeupdate',
+    '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);
+
+  @state() vouch: EmbedProps['data'];
+  @state() template: TemplateInstance | undefined;
+
+  get fetching() {
+    return this._fetcherController.fetching;
+  }
+
+  get waiting() {
+    return this._mediaPlayerRef.value?.waiting;
+  }
+
+  get seeking() {
+    return this._mediaPlayerRef.value?.seeking;
+  }
+
+  get paused() {
+    return this._mediaPlayerRef.value?.paused;
+  }
+
+  get captions() {
+    return this._mediaPlayerRef.value?.captions;
+  }
+
+  get fullscreen() {
+    return this._mediaPlayerRef.value?.fullscreen;
+  }
+
+  get duration() {
+    return this._mediaPlayerRef.value?.duration;
+  }
+
+  set currentTime(value: number) {
+    if (this._mediaPlayerRef.value) {
+      this._mediaPlayerRef.value.currentTime = value;
+    }
+  }
+  get currentTime() {
+    return this._mediaPlayerRef.value?.currentTime ?? 0;
+  }
+
+  set playbackRate(value: number) {
+    if (this._mediaPlayerRef.value) {
+      this._mediaPlayerRef.value.playbackRate = value;
+    }
+  }
+  get playbackRate() {
+    return this._mediaPlayerRef.value?.playbackRate ?? 1;
+  }
+
+  set volume(value: number) {
+    if (this._mediaPlayerRef.value) {
+      this._mediaPlayerRef.value.volume = value;
+    }
+  }
+  get volume() {
+    return this._mediaPlayerRef.value?.volume ?? 1;
+  }
+
+  set muted(value: boolean) {
+    if (this._mediaPlayerRef.value) {
+      this._mediaPlayerRef.value.muted = value;
+    }
+  }
+  get muted() {
+    return this._mediaPlayerRef.value?.muted ?? false;
+  }
+
+  get scene(): Scene | null {
+    return this._mediaPlayerRef.value?.scene ?? null;
+  }
+
+  get scenes(): Scene[] {
+    return this._mediaPlayerRef.value?.scenes ?? [];
+  }
+
+  get sceneConfig(): Scenes | null {
+    return this._mediaPlayerRef.value?.sceneConfig ?? null;
+  }
+
+  get videoState() {
+    return this._mediaPlayerRef.value?.videoState;
+  }
+
+  get mediaPlayer() {
+    return this._mediaPlayerRef.value;
+  }
+
+  play() {
+    this._mediaPlayerRef.value?.play();
+  }
+
+  pause() {
+    this._mediaPlayerRef.value?.pause();
+  }
+
+  setScene(index: number) {
+    this._mediaPlayerRef.value?.setScene(index);
+  }
+
+  render() {
+    return html`
+      <vmp-media-player
+        ${ref(this._mediaPlayerRef)}
+        ${this.eventController.register()}
+        ?autoplay=${this.autoplay}
+        ?loading=${this.fetching}
+        .data=${this.vouch}
+        .template=${this.template}
+        aspectRatio=${ifDefined(this.aspectRatio)}
+        preload=${ifDefined(this.preload)}
+        .controls=${this.controls}
+      ></vmp-media-player>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vouch-embed': Embed;
+  }
+
+  namespace JSX {
+    interface IntrinsicElements {
+      'vouch-embed': Embed;
+    }
+  }
+}
+
+export { Embed };
+export type { EmbedProps };

package/src/index.ts

@@ -1 +1 @@
-export { InlineEmbed } from '~/components/InlineEmbed';
+export { Embed } from '~/components/Embed';

package/src/utils/env.ts

@@ -0,0 +1,64 @@
+type Environment = 'local' | 'dev' | 'staging' | 'prod';
+
+type GetEnvUrlsReturn = {
+  videoUrl: string;
+  publicApiUrl: string;
+  embedApiUrl: string;
+};
+
+const devVideoUrl = 'https://d2rxhdlm2q91uk.cloudfront.net';
+const stagingVideoUrl = 'https://d1ix11aj5kfygl.cloudfront.net';
+const prodVideoUrl = 'https://d157jlwnudd93d.cloudfront.net';
+
+const devPublicApiUrl = 'https://bshyfw4h5a.execute-api.ap-southeast-2.amazonaws.com/dev';
+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 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 (!['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 {
+      videoUrl: devVideoUrl,
+      publicApiUrl: devPublicApiUrl,
+      embedApiUrl: devEmbedApiUrl
+    };
+  }
+
+  if (env === 'staging') {
+    return {
+      videoUrl: stagingVideoUrl,
+      publicApiUrl: stagingPublicApiUrl,
+      embedApiUrl: stagingEmbedApiUrl
+    };
+  }
+
+  if (env === 'prod') {
+    return {
+      videoUrl: prodVideoUrl,
+      publicApiUrl: prodPublicApiUrl,
+      embedApiUrl: prodEmbedApiUrl
+    };
+  }
+}
+
+export { devEmbedApiUrl, stagingEmbedApiUrl, prodEmbedApiUrl, getEnvUrls };
+export type { Environment };

package/src/utils/events.ts

@@ -0,0 +1,13 @@
+function forwardEvent(type: string, fromElement: HTMLElement, toElement: HTMLElement) {
+  function forwarder(event: Event) {
+    toElement.dispatchEvent(new CustomEvent(event.type, event));
+  }
+
+  fromElement.addEventListener(type, forwarder);
+
+  return () => {
+    fromElement.removeEventListener(type, forwarder);
+  };
+}
+
+export { forwardEvent };

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

@@ -1,17 +0,0 @@
-import { MediaPlayer } from '@vouchfor/media-player';
-import type { MediaPlayerProps } from '@vouchfor/media-player';
-type InlineEmbedProps = MediaPlayerProps;
-declare class InlineEmbed extends MediaPlayer {
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'vembed-inline': InlineEmbed;
-    }
-    namespace JSX {
-        interface IntrinsicElements {
-            'vembed-inline': InlineEmbed;
-        }
-    }
-}
-export { InlineEmbed };
-export type { InlineEmbedProps };

package/dist/es/index.d.ts

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

package/src/components/InlineEmbed/InlineEmbed.stories.ts

@@ -1,119 +0,0 @@
-import { html } from 'lit';
-import { ifDefined } from 'lit/directives/if-defined.js';
-
-import type { InlineEmbedProps } from './';
-import type { Meta, StoryObj } from '@storybook/web-components';
-
-import './';
-
-type InlineEmbedArgs = InlineEmbedProps & {
-  showVouch?: boolean;
-};
-
-const _InlineEmbed = ({
-  vouchHashId,
-  preload,
-  autoplay,
-  env,
-  apiKey,
-  controls,
-  enableTracking,
-  trackingSource,
-
-  // Template properties
-  type,
-  format,
-  resolution,
-  aspectRatio,
-  headerShortName,
-  headerSubtitle,
-  headerBrandLogo
-}: InlineEmbedArgs) => {
-  return html`
-    <div style="height: 100vh">
-      <vembed-inline
-        env=${ifDefined(env)}
-        apiKey=${ifDefined(apiKey)}
-        ?autoplay=${autoplay}
-        ?enableTracking=${enableTracking}
-        .vouchHashId=${vouchHashId}
-        resolution=${ifDefined(resolution)}
-        aspectRatio=${ifDefined(aspectRatio)}
-        preload=${ifDefined(preload)}
-        type=${ifDefined(type)}
-        .controls=${controls}
-        trackingSource=${ifDefined(trackingSource)}
-        format=${ifDefined(format)}
-        ?headerShortName=${headerShortName}
-        ?headerBrandLogo=${headerBrandLogo}
-        headerSubtitle=${ifDefined(headerSubtitle)}
-      ></vembed-inline>
-    </div>
-  `;
-};
-
-// More on how to set up stories at: https://storybook.js.org/docs/web-components/writing-stories/introduction
-const meta = {
-  title: 'Embeds/Inline',
-  tags: ['autodocs'],
-  render: (args) => _InlineEmbed(args),
-  component: 'vembed-inline'
-} satisfies Meta<InlineEmbedProps>;
-
-type Story = StoryObj<InlineEmbedArgs>;
-
-const InlineEmbed: Story = {
-  args: {
-    env: 'dev',
-    apiKey: 'RtW1R7JYej-pymoGNEUCblZz0NTLZzsuC9xKxcsewIYpf3UEIePcGvtkRnd4K',
-    vouchHashId: 'X526IKhw90',
-    resolution: 1080,
-    aspectRatio: 0,
-    preload: 'none',
-    autoplay: false,
-    enableTracking: true,
-    trackingSource: 'media_player_storybook',
-
-    type: 'BASIC',
-    format: 'letterbox',
-    headerShortName: true,
-    headerSubtitle: 'client',
-    headerBrandLogo: false,
-
-    showVouch: true
-  },
-  argTypes: {
-    type: {
-      control: 'radio',
-      options: ['BARE', 'BASIC', 'INLINE', 'JUMBO', 'FOUNDIT', 'CISCO']
-    },
-    headerSubtitle: {
-      control: 'radio',
-      options: ['role', 'client']
-    },
-    headerShortName: {
-      control: 'boolean'
-    },
-    headerBrandLogo: {
-      control: 'boolean'
-    },
-    preload: {
-      control: 'radio',
-      options: ['auto', 'none']
-    },
-    format: {
-      control: 'radio',
-      options: ['letterbox', 'letterbox-video', 'crop', 'crop-top', 'squarebox']
-    },
-    env: {
-      control: 'radio',
-      options: ['prod', 'staging', 'dev']
-    }
-  },
-  parameters: {
-    layout: 'fullscreen'
-  }
-};
-
-export default meta;
-export { InlineEmbed };

package/src/components/InlineEmbed/index.ts

@@ -1,24 +0,0 @@
-import { MediaPlayer } from '@vouchfor/media-player';
-import { customElement } from 'lit/decorators.js';
-
-import type { MediaPlayerProps } from '@vouchfor/media-player';
-
-type InlineEmbedProps = MediaPlayerProps;
-
-@customElement('vembed-inline')
-class InlineEmbed extends MediaPlayer {}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'vembed-inline': InlineEmbed;
-  }
-
-  namespace JSX {
-    interface IntrinsicElements {
-      'vembed-inline': InlineEmbed;
-    }
-  }
-}
-
-export { InlineEmbed };
-export type { InlineEmbedProps };