@vouchfor/embeds 0.0.0-experiment.2673197 → 0.0.0-experiment.3c33e0f

package/src/utils/env.ts

@@ -0,0 +1,78 @@
+type Environment = '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';
+
+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 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';
+
+// 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)) {
+    throw new Error(`Unknown environment: ${env}`);
+  }
+
+  if (env === 'dev') {
+    return {
+      marketingUrl,
+      videoUrl: devVideoUrl,
+      publicApiUrl: devPublicApiUrl,
+      embedApiUrl: devEmbedApiUrl,
+      publicRecorderUrl: devPublicRecorderUrl
+    };
+  }
+
+  if (env === 'staging') {
+    return {
+      marketingUrl,
+      videoUrl: stagingVideoUrl,
+      publicApiUrl: stagingPublicApiUrl,
+      embedApiUrl: stagingEmbedApiUrl,
+      publicRecorderUrl: stagingPublicRecorderUrl
+    };
+  }
+
+  if (env === 'prod') {
+    return {
+      marketingUrl,
+      videoUrl: prodVideoUrl,
+      publicApiUrl: prodPublicApiUrl,
+      embedApiUrl: prodEmbedApiUrl,
+      publicRecorderUrl: prodPublicRecorderUrl
+    };
+  }
+}
+
+export {
+  marketingUrl,
+  devEmbedApiUrl,
+  stagingEmbedApiUrl,
+  prodEmbedApiUrl,
+  devPublicRecorderUrl,
+  stagingPublicRecorderUrl,
+  prodPublicRecorderUrl,
+  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/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 };