@vouchfor/embeds 0.0.0-experiment.e14607a → 0.0.0-experiment.e7e20dd

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@vouchfor/embeds",
-  "version": "0.0.0-experiment.e14607a",
+  "version": "0.0.0-experiment.e7e20dd",
   "license": "MIT",
   "author": "Aaron Williams",
   "main": "dist/es/embeds.js",
   "module": "dist/es/embeds.js",
   "type": "module",
-  "types": "dist/es/index.d.ts",
+  "types": "dist/es/src/index.d.ts",
   "exports": {
     ".": "./dist/es/embeds.js"
   },
@@ -15,9 +15,13 @@
     "tag": "experiment",
     "access": "public"
   },
+  "engines": {
+    "node": ">=18.18.0"
+  },
   "scripts": {
-    "build": "rm -rf dist && tsc && vite build --mode iife && vite build --mode es",
+    "build": "rm -rf dist && tsc && yarn build:self",
     "build:deps": "yarn --cwd ../media-player build",
+    "build:self": "vite build --mode iife && vite build --mode es && node scripts/build.cjs",
     "build:package": "yarn build",
     "build:storybook": "yarn prebuild && storybook build",
     "generate:manifest": "wca src --outFile custom-elements.json",
@@ -28,48 +32,56 @@
     "size": "size-limit",
     "storybook": "yarn prebuild && storybook dev -p 6007",
     "prebuild": "yarn build:deps && yarn generate:manifest",
-    "test": "true"
+    "test": "rm -rf test/lib && yarn prebuild && vite build --mode test && web-test-runner",
+    "test:ci": "yarn test --config web-test-runner.ci.config.js"
   },
   "lint-staged": {
     "**/*.{ts,tsx,js}": "eslint --fix --quiet",
     "**/*.{md,json,yml}": "prettier --write"
   },
   "dependencies": {
+    "@a11y/focus-trap": "^1.0.5",
     "@lit/task": "^1.0.0",
-    "@vouchfor/media-player": "0.0.0-experiment.e14607a",
+    "@vouchfor/canvas-video": "0.0.0-experiment.e7e20dd",
+    "@vouchfor/media-player": "0.0.0-experiment.e7e20dd",
     "uuid": "^9.0.1"
   },
   "peerDependencies": {
-    "lit": "^3.1.0"
+    "lit": "^3.1.2"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4-fix.0",
-    "@open-wc/testing": "^3.2.0",
-    "@storybook/addon-essentials": "^7.4.5",
-    "@storybook/addon-links": "^7.4.5",
-    "@storybook/blocks": "^7.4.5",
-    "@storybook/web-components": "^7.4.5",
-    "@storybook/web-components-vite": "^7.4.5",
-    "@types/mocha": "^10.0.1",
-    "@vouchfor/eslint-config": "^1.0.0",
-    "@vouchfor/prettier-config": "^1.0.0",
-    "@web/dev-server-esbuild": "^0.4.1",
-    "@web/test-runner": "^0.17.1",
-    "@web/test-runner-browserstack": "^0.6.1",
-    "@web/test-runner-mocha": "^0.8.1",
-    "@web/test-runner-playwright": "^0.10.1",
-    "dotenv": "^16.3.1",
-    "eslint": "^8.50.0",
-    "eslint-plugin-import": "^2.28.1",
-    "lint-staged": "^14.0.1",
-    "lit": "^3.1.0",
-    "prettier": "^3.0.3",
+    "@open-wc/testing": "^4.0.0",
+    "@storybook/addon-essentials": "^8.0.2",
+    "@storybook/addon-links": "^8.0.2",
+    "@storybook/blocks": "^8.0.2",
+    "@storybook/web-components": "^8.0.2",
+    "@storybook/web-components-vite": "^8.0.2",
+    "@svgr/core": "^8.1.0",
+    "@types/flat": "^5.0.5",
+    "@types/mocha": "^10.0.6",
+    "@vouchfor/eslint-config": "^1.0.1",
+    "@vouchfor/prettier-config": "^1.0.1",
+    "@vouchfor/video-utils": "0.0.0-experiment.e7e20dd",
+    "@web/dev-server-esbuild": "^1.0.2",
+    "@web/test-runner": "^0.18.1",
+    "@web/test-runner-browserstack": "^0.7.1",
+    "@web/test-runner-mocha": "^0.9.0",
+    "@web/test-runner-playwright": "^0.11.0",
+    "glob": "^10.3.10",
+    "lint-staged": "^15.2.2",
+    "lit": "^3.1.2",
+    "lodash": "^4.17.21",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "storybook": "^7.4.5",
-    "typescript": "^5.1.3",
-    "vite": "^4.4.9",
-    "vite-plugin-dts": "^3.6.0",
-    "web-component-analyzer": "^1.1.7"
+    "rollup-plugin-tla": "^0.0.2",
+    "sinon": "^17.0.1",
+    "storybook": "^8.0.2",
+    "svgson": "^5.3.1",
+    "typescript": "^5.4.3",
+    "vite": "^5.2.2",
+    "vite-plugin-commonjs": "^0.10.1",
+    "vite-plugin-dts": "^3.7.3",
+    "web-component-analyzer": "^2.0.0"
   }
 }

package/src/components/DialogEmbed/Dialog.stories.ts

@@ -0,0 +1,91 @@
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+
+import type { DialogEmbedProps } from '.';
+import type { Meta, StoryObj } from '@storybook/web-components';
+
+import '.';
+
+type DialogEmbedArgs = DialogEmbedProps & {
+  showVouch?: boolean;
+};
+
+const _DialogEmbed = ({
+  vouchId,
+  templateId,
+  questions,
+  preload,
+  autoplay,
+  env,
+  apiKey,
+  controls,
+  aspectRatio
+}: DialogEmbedArgs) => {
+  return html`
+    <div style="padding: 20px;">
+      <vouch-embed-dialog
+        env=${ifDefined(env)}
+        apiKey=${ifDefined(apiKey)}
+        vouchId=${ifDefined(vouchId)}
+        templateId=${ifDefined(templateId)}
+        .questions=${questions}
+        .controls=${controls}
+        ?autoplay=${autoplay}
+        preload=${ifDefined(preload)}
+        aspectRatio=${ifDefined(aspectRatio)}
+        @error=${console.log}
+      ></vouch-embed-dialog>
+      <vouch-embed-dialog
+        env=${ifDefined(env)}
+        apiKey=${ifDefined(apiKey)}
+        vouchId=${ifDefined(vouchId)}
+        templateId=${ifDefined(templateId)}
+        .questions=${questions}
+        .controls=${controls}
+        ?autoplay=${autoplay}
+        preload=${ifDefined(preload)}
+        aspectRatio=${ifDefined(aspectRatio)}
+        @error=${console.log}
+      ></vouch-embed-dialog>
+    </div>
+  `;
+};
+
+// More on how to set up stories at: https://storybook.js.org/docs/web-components/writing-stories/introduction
+const meta = {
+  title: 'Dialog',
+  tags: ['autodocs'],
+  render: (args) => _DialogEmbed(args),
+  component: 'vouch-embed-dialog'
+} satisfies Meta<DialogEmbedProps>;
+
+type Story = StoryObj<DialogEmbedArgs>;
+
+const Dialog: Story = {
+  args: {
+    env: 'dev',
+    apiKey: 'TVik9uTMgE-PD25UTHIS6gyl0hMBWC7AT4dkpdlLBT4VIfDWZJrQiCk6Ak7m1',
+    vouchId: '6JQEIPeStt',
+    templateId: '357fc118-e179-4171-9446-ff2b8e9d1b29',
+    questions: [],
+    aspectRatio: 0,
+    preload: 'none',
+    autoplay: false
+  },
+  argTypes: {
+    env: {
+      control: 'radio',
+      options: ['local', 'dev', 'staging', 'prod']
+    },
+    preload: {
+      control: 'radio',
+      options: ['auto', 'none']
+    }
+  },
+  parameters: {
+    layout: 'fullscreen'
+  }
+};
+
+export default meta;
+export { Dialog };

package/src/components/DialogEmbed/DialogOverlay.ts

@@ -0,0 +1,131 @@
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { styleMap } from 'lit/directives/style-map.js';
+
+import type { DialogEmbedProps } from '.';
+
+import '@a11y/focus-trap';
+
+@customElement('vouch-embed-dialog-overlay')
+class DialogOverlay extends LitElement {
+  static styles = [
+    css`
+      :host {
+        --vouch-media-player-border-radius: var(--vu-media-player-border-radius, 12px);
+        --overlay-background-color: var(--vu-overlay-background-color, black);
+        --overlay-background-opacity: var(--vu-overlay-background-opacity, 0.4);
+
+        --dialog-width: var(--vu-dialog-width, 890px);
+        --dialog-height: var(--vu-dialog-height, 500px);
+      }
+
+      .container {
+        position: fixed;
+        display: flex;
+        inset: 0;
+        opacity: 1;
+        z-index: 2147483647;
+        align-items: center;
+        justify-content: center;
+        transition: opacity 100ms ease-in;
+      }
+
+      .hidden {
+        opacity: 0;
+        pointer-events: none;
+      }
+
+      .background {
+        position: absolute;
+        inset: 0;
+        opacity: var(--overlay-background-opacity);
+        background-color: var(--overlay-background-color);
+      }
+
+      focus-trap {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin: 40px;
+        width: var(--dialog-width);
+        height: var(--dialog-height);
+        max-width: calc(100% - 80px);
+        max-height: calc(100% - 80px);
+      }
+
+      .video-frame {
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        max-width: 100%;
+        max-height: 100%;
+      }
+
+      .video-frame.grow {
+        width: 100%;
+        height: 100%;
+      }
+
+      vmp-icon-button {
+        position: absolute;
+        top: 0;
+        right: 0;
+        margin: 10px;
+      }
+    `
+  ];
+
+  @property({ type: Boolean }) open = false;
+  @property({ type: Number }) aspectRatio: DialogEmbedProps['aspectRatio'] = 0;
+
+  render() {
+    return html`
+      <div
+        class=${classMap({
+          container: true,
+          hidden: !this.open
+        })}
+      >
+        <div
+          class="background"
+          @click=${() => this.dispatchEvent(new CustomEvent('overlay:click', { bubbles: true, composed: true }))}
+        ></div>
+        <focus-trap>
+          <div
+            class=${classMap({
+              'video-frame': true,
+              grow: this.aspectRatio === 0
+            })}
+            style=${styleMap({
+              aspectRatio: this.aspectRatio
+            })}
+          >
+            <slot></slot>
+            <vmp-icon-button
+              icon="close"
+              rounded="full"
+              weight="heavy"
+              @click=${() => this.dispatchEvent(new CustomEvent('close:click', { bubbles: true, composed: true }))}
+            ></vmp-icon-button>
+          </div>
+        </focus-trap>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vouch-embed-dialog-overlay': DialogOverlay;
+  }
+
+  namespace JSX {
+    interface IntrinsicElements {
+      'vouch-embed-dialog-overlay': DialogOverlay;
+    }
+  }
+}
+
+export { DialogOverlay };

package/src/components/DialogEmbed/DialogPortal.ts

@@ -0,0 +1,126 @@
+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 { styleMap } from 'lit/directives/style-map.js';
+
+import type { DialogEmbedProps } from '.';
+import type { MediaPlayer } from '@vouchfor/media-player';
+
+import './DialogOverlay';
+
+@customElement('vouch-embed-dialog-portal')
+class DialogPortal extends LitElement {
+  @property({ type: String }) vouchId: DialogEmbedProps['vouchId'];
+  @property({ type: String }) templateId: DialogEmbedProps['templateId'];
+  @property({ type: Array }) questions: DialogEmbedProps['questions'];
+
+  @property({ type: String }) env: DialogEmbedProps['env'] = 'prod';
+  @property({ type: String }) apiKey: DialogEmbedProps['apiKey'] = '';
+  @property({ type: Boolean }) disableTracking: DialogEmbedProps['disableTracking'] = false;
+  @property({ type: String }) trackingSource: DialogEmbedProps['trackingSource'] = 'embedded_player';
+
+  @property({ type: Array }) controls: DialogEmbedProps['controls'];
+  @property({ type: String }) preload: DialogEmbedProps['preload'] = 'none';
+  @property({ type: Boolean }) disableAutoplay: DialogEmbedProps['disableAutoplay'] = false;
+  @property({ type: Number }) aspectRatio: DialogEmbedProps['aspectRatio'] = 0;
+
+  private _mediaPlayerRef = createRef<MediaPlayer>();
+
+  @state() open = false;
+
+  private _handleToggle = ({ detail }: CustomEvent<string>) => {
+    // Because we have to attach this listener to the document since this element is portalled outside of the button,
+    // we also have to make sure that this player is actually the one we want to open and play by passing in an ID
+    // from the button wrapper parent and checking against that same ID we pass as the event detail
+    if (this.id === detail) {
+      this.open = !this.open;
+
+      if (this.open) {
+        if (!this.disableAutoplay && this._mediaPlayerRef?.value) {
+          this._mediaPlayerRef.value.muted = false;
+          this._mediaPlayerRef.value.play();
+        }
+      } else {
+        this._mediaPlayerRef?.value?.pause();
+      }
+    }
+  };
+
+  // We could do the same thing on close and check for the correct ID but it doesn't really matter
+  private _handleClose = () => {
+    this.open = false;
+    this._mediaPlayerRef?.value?.pause();
+  };
+
+  private _handleDocumentKeyUp = (e: KeyboardEvent) => {
+    if (e.key === 'Escape') {
+      this._handleClose();
+    }
+  };
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    document.addEventListener('dialogembed:click', this._handleToggle);
+    document.addEventListener('keyup', this._handleDocumentKeyUp);
+    document.addEventListener('close:click', this._handleClose);
+    document.addEventListener('overlay:click', this._handleClose);
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+    document.removeEventListener('dialogembed:click', this._handleToggle);
+    document.removeEventListener('keyup', this._handleDocumentKeyUp);
+    document.removeEventListener('close:click', this._handleClose);
+    document.removeEventListener('overlay:click', this._handleClose);
+  }
+
+  protected createRenderRoot(): HTMLElement | DocumentFragment {
+    // We must create a new node here because portalling into the same node (document.body) causes the second
+    // element to overwrite the first for some reason (not behaviour really stated in the docs)
+    // I am fairly certain this function is only run once as the default behaviour creates the open shadow root
+    // and returns that shadow root in this function: https://lit.dev/docs/components/shadow-dom/#implementing-createrenderroot
+    const newNode = document.createElement('div');
+    document.body.appendChild(newNode);
+    return newNode;
+  }
+
+  render() {
+    return html`
+      <vouch-embed-dialog-overlay ?open=${this.open} aspectRatio=${this.aspectRatio}>
+        <vouch-embed-player
+          ${ref(this._mediaPlayerRef)}
+          style=${styleMap({
+            maxWidth: '100%',
+            maxHeight: '100%'
+          })}
+          ?autoplay=${false}
+          vouchId=${ifDefined(this.vouchId)}
+          templateId=${ifDefined(this.templateId)}
+          .questions=${this.questions}
+          .controls=${this.controls}
+          env=${ifDefined(this.env)}
+          apiKey=${ifDefined(this.apiKey)}
+          ?disableTracking=${this.disableTracking}
+          trackingSource=${ifDefined(this.trackingSource)}
+          preload=${ifDefined(this.preload)}
+          aspectRatio=${this.aspectRatio}
+        ></vouch-embed-player>
+      </vouch-embed-dialog-overlay>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vouch-embed-dialog-portal': DialogPortal;
+  }
+
+  namespace JSX {
+    interface IntrinsicElements {
+      'vouch-embed-dialog-portal': DialogPortal;
+    }
+  }
+}
+
+export { DialogPortal };

package/src/components/DialogEmbed/index.ts

@@ -0,0 +1,97 @@
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { v4 as uuidv4 } from 'uuid';
+
+import type { PlayerEmbedProps } from '../PlayerEmbed';
+
+import '../PlayerEmbed';
+import './DialogPortal';
+
+type DialogEmbedProps = Omit<PlayerEmbedProps, 'data'> & {
+  disableAutoplay?: boolean;
+};
+
+@customElement('vouch-embed-dialog')
+class DialogEmbed extends LitElement {
+  static styles = [
+    css`
+      :host {
+        --vu-button-padding: 10px 20px;
+        --vu-button-background: #287179;
+        --vu-button-background-hover: #4faab2;
+
+        display: flex;
+        width: fit-content;
+        height: fit-content;
+      }
+    `
+  ];
+
+  @property({ type: String }) vouchId: DialogEmbedProps['vouchId'];
+  @property({ type: String }) templateId: DialogEmbedProps['templateId'];
+  @property({ type: Array }) questions: DialogEmbedProps['questions'];
+
+  @property({ type: String }) env: DialogEmbedProps['env'] = 'prod';
+  @property({ type: String }) apiKey: DialogEmbedProps['apiKey'] = '';
+  @property({ type: Boolean }) disableTracking: DialogEmbedProps['disableTracking'] = false;
+  @property({ type: String }) trackingSource: DialogEmbedProps['trackingSource'] = 'embedded_player';
+
+  @property({ type: Array }) controls: DialogEmbedProps['controls'];
+  @property({ type: String }) preload: DialogEmbedProps['preload'] = 'none';
+  @property({ type: Boolean }) disableAutoplay: DialogEmbedProps['disableAutoplay'] = false;
+  @property({ type: Number }) aspectRatio: DialogEmbedProps['aspectRatio'] = 0;
+
+  private _id = uuidv4();
+
+  private _handleRootClick = () => {
+    this.dispatchEvent(new CustomEvent('dialogembed:click', { detail: this._id, bubbles: true, composed: true }));
+  };
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    this.addEventListener('click', this._handleRootClick);
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.removeEventListener('click', this._handleRootClick);
+  }
+
+  render() {
+    return html`
+      <slot>
+        <vmp-button size="large">Play</vmp-button>
+      </slot>
+      <vouch-embed-dialog-portal
+        id=${this._id}
+        ?autoplay=${false}
+        vouchId=${ifDefined(this.vouchId)}
+        templateId=${ifDefined(this.templateId)}
+        .questions=${this.questions}
+        .controls=${this.controls}
+        env=${ifDefined(this.env)}
+        apiKey=${ifDefined(this.apiKey)}
+        ?disableTracking=${this.disableTracking}
+        trackingSource=${ifDefined(this.trackingSource)}
+        preload=${ifDefined(this.preload)}
+        aspectRatio=${this.aspectRatio}
+      ></vouch-embed-dialog-portal>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vouch-embed-dialog': DialogEmbed;
+  }
+
+  namespace JSX {
+    interface IntrinsicElements {
+      'vouch-embed-dialog': DialogEmbed;
+    }
+  }
+}
+
+export { DialogEmbed };
+export type { DialogEmbedProps };

package/src/components/{Embed/Embed.stories.ts → PlayerEmbed/PlayerEmbed.stories.ts}

@@ -1,48 +1,61 @@
 import { html } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 
-import type { EmbedProps } from './';
+import type { PlayerEmbedProps } from '.';
 import type { Meta, StoryObj } from '@storybook/web-components';
 
-import './';
+import '.';
 
-type EmbedArgs = EmbedProps & {
+type PlayerEmbedArgs = PlayerEmbedProps & {
   showVouch?: boolean;
 };
 
-const _Embed = ({ vouchId, templateId, preload, autoplay, env, apiKey, controls, aspectRatio }: EmbedArgs) => {
+const _PlayerEmbed = ({
+  vouchId,
+  templateId,
+  questions,
+  preload,
+  autoplay,
+  env,
+  apiKey,
+  controls,
+  aspectRatio
+}: PlayerEmbedArgs) => {
   return html`
     <div style="height: 100vh">
-      <vouch-embed
+      <vouch-embed-player
         env=${ifDefined(env)}
         apiKey=${ifDefined(apiKey)}
         vouchId=${ifDefined(vouchId)}
         templateId=${ifDefined(templateId)}
+        .questions=${questions}
         .controls=${controls}
         ?autoplay=${autoplay}
         preload=${ifDefined(preload)}
         aspectRatio=${ifDefined(aspectRatio)}
-      ></vouch-embed>
+        @error=${console.log}
+      ></vouch-embed-player>
     </div>
   `;
 };
 
 // More on how to set up stories at: https://storybook.js.org/docs/web-components/writing-stories/introduction
 const meta = {
-  title: 'Embed',
+  title: 'Embeds',
   tags: ['autodocs'],
-  render: (args) => _Embed(args),
-  component: 'vouch-embed'
-} satisfies Meta<EmbedProps>;
+  render: (args) => _PlayerEmbed(args),
+  component: 'vouch-embed-player'
+} satisfies Meta<PlayerEmbedProps>;
 
-type Story = StoryObj<EmbedArgs>;
+type Story = StoryObj<PlayerEmbedArgs>;
 
-const Embed: Story = {
+const Player: Story = {
   args: {
-    env: 'local',
+    env: 'dev',
     apiKey: 'TVik9uTMgE-PD25UTHIS6gyl0hMBWC7AT4dkpdlLBT4VIfDWZJrQiCk6Ak7m1',
     vouchId: '6JQEIPeStt',
     templateId: '357fc118-e179-4171-9446-ff2b8e9d1b29',
+    questions: [],
     aspectRatio: 0,
     preload: 'none',
     autoplay: false
@@ -63,4 +76,4 @@ const Embed: Story = {
 };
 
 export default meta;
-export { Embed };
+export { Player };

package/src/components/{Embed → PlayerEmbed}/controllers/event-forwarder.ts

@@ -1,27 +1,28 @@
 import { createRef, ref } from 'lit/directives/ref.js';
 
-import type { Embed } from '..';
+import type { PlayerEmbed } from '..';
 import type { ReactiveController, ReactiveControllerHost } from 'lit';
+import type { DirectiveResult } from 'lit/directive.js';
 import type { Ref } from 'lit/directives/ref.js';
 
 import { forwardEvent } from '~/utils/events';
 
-type EmbedHost = ReactiveControllerHost & Embed;
+type PlayerEmbedHost = ReactiveControllerHost & PlayerEmbed;
 
 class EventForwardController implements ReactiveController {
-  host: EmbedHost;
+  host: PlayerEmbedHost;
 
   private _events: string[] = [];
   private _cleanup: (() => void)[] = [];
   private _forwardElementRef: Ref<HTMLElement> = createRef();
 
-  constructor(host: EmbedHost, events: string[]) {
+  constructor(host: PlayerEmbedHost, events: string[]) {
     this.host = host;
     this._events = events;
     host.addController(this);
   }
 
-  register() {
+  register(): DirectiveResult {
     return ref(this._forwardElementRef);
   }