@vouchfor/embeds 0.0.0-experiment.01cbe51

package/src/components/Embed/index.ts

@@ -0,0 +1,199 @@
+import { 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 { 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;
+  trackingSource?: string;
+  vouchId?: string;
+  templateId?: string;
+};
+
+@customElement('vouch-embed')
+class Embed extends LitElement {
+  private _mediaPlayerRef: Ref<MediaPlayer> = createRef();
+
+  @property({ type: Object, attribute: 'data' }) data: EmbedProps['data'];
+  @property({ type: String }) vouchId: EmbedProps['vouchId'];
+  @property({ type: String }) templateId: EmbedProps['templateId'];
+
+  @property({ type: String }) env: EmbedProps['env'] = 'prod';
+  @property({ type: String }) apiKey: EmbedProps['apiKey'] = '';
+  @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: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 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-new-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-new-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

@@ -0,0 +1 @@
+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/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />