@vouchfor/embeds 0.0.0-experiment.0796c7f → 0.0.0-experiment.0a5555c

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vouchfor/embeds",
-  "version": "0.0.0-experiment.0796c7f",
+  "version": "0.0.0-experiment.0a5555c",
   "license": "MIT",
   "author": "Aaron Williams",
   "main": "dist/es/embeds.js",
@@ -33,7 +33,8 @@
     "storybook": "yarn prebuild && storybook dev -p 6007",
     "prebuild": "yarn build:deps && yarn generate:manifest",
     "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"
+    "test:ci": "yarn test --config web-test-runner.ci.config.js",
+    "test:watch": "yarn test --watch"
   },
   "lint-staged": {
     "**/*.{ts,tsx,js}": "eslint --fix --quiet",
@@ -42,8 +43,8 @@
   "dependencies": {
     "@a11y/focus-trap": "^1.0.5",
     "@lit/task": "^1.0.0",
-    "@vouchfor/canvas-video": "0.0.0-experiment.0796c7f",
-    "@vouchfor/media-player": "0.0.0-experiment.0796c7f",
+    "@vouchfor/canvas-video": "0.0.0-experiment.0a5555c",
+    "@vouchfor/media-player": "0.0.0-experiment.0a5555c",
     "uuid": "^9.0.1"
   },
   "peerDependencies": {
@@ -62,7 +63,7 @@
     "@types/mocha": "^10.0.6",
     "@vouchfor/eslint-config": "^1.0.1",
     "@vouchfor/prettier-config": "^1.0.1",
-    "@vouchfor/video-utils": "0.0.0-experiment.0796c7f",
+    "@vouchfor/video-utils": "0.0.0-experiment.0a5555c",
     "@web/dev-server-esbuild": "^1.0.2",
     "@web/test-runner": "^0.18.1",
     "@web/test-runner-browserstack": "^0.7.1",

package/src/components/PlayerEmbed/MultiEmbed.stories.ts

@@ -0,0 +1,135 @@
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+
+import type { PlayerEmbedProps } from '.';
+import type { Meta, StoryObj } from '@storybook/web-components';
+
+import '.';
+
+type MultiEmbedArgs = PlayerEmbedProps & {
+  apiKey1?: string;
+  apiKey2?: string;
+  apiKey3?: string;
+  vouchId1?: string;
+  vouchId2?: string;
+  vouchId3?: string;
+  showVouch?: boolean;
+};
+
+const _MultiEmbed = ({
+  vouchId1,
+  vouchId2,
+  vouchId3,
+  templateId,
+  questions,
+  preload,
+  autoplay,
+  env,
+  apiKey1,
+  apiKey2,
+  apiKey3,
+  controls,
+  aspectRatio
+}: MultiEmbedArgs) => {
+  return html`
+    <div style="height: 33vh">
+      <vouch-embed-player
+        env=${ifDefined(env)}
+        apiKey=${ifDefined(apiKey1)}
+        vouchId=${ifDefined(vouchId1)}
+        templateId=${ifDefined(templateId)}
+        .questions=${questions}
+        .controls=${controls}
+        ?autoplay=${autoplay}
+        preload=${ifDefined(preload)}
+        aspectRatio=${ifDefined(aspectRatio)}
+        @error=${console.log}
+      ></vouch-embed-player>
+    </div>
+    <div style="height: 33vh">
+      <vouch-embed-player
+        env=${ifDefined(env)}
+        apiKey=${ifDefined(apiKey2)}
+        vouchId=${ifDefined(vouchId2)}
+        templateId=${ifDefined(templateId)}
+        .questions=${questions}
+        .controls=${controls}
+        ?autoplay=${autoplay}
+        preload=${ifDefined(preload)}
+        aspectRatio=${ifDefined(aspectRatio)}
+        @error=${console.log}
+      ></vouch-embed-player>
+    </div>
+    <div style="height: 33vh">
+      <vouch-embed-player
+        env=${ifDefined(env)}
+        apiKey=${ifDefined(apiKey3)}
+        vouchId=${ifDefined(vouchId3)}
+        templateId=${ifDefined(templateId)}
+        .questions=${questions}
+        .controls=${controls}
+        ?autoplay=${autoplay}
+        preload=${ifDefined(preload)}
+        aspectRatio=${ifDefined(aspectRatio)}
+        @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: 'Embeds',
+  tags: ['autodocs'],
+  render: (args) => _MultiEmbed(args),
+  component: 'vouch-embed-player'
+} satisfies Meta<PlayerEmbedProps>;
+
+type Story = StoryObj<MultiEmbedArgs>;
+
+const MultiPlayer: Story = {
+  args: {
+    env: 'dev',
+    apiKey1: 'TVik9uTMgE-PD25UTHIS6gyl0hMBWC7AT4dkpdlLBT4VIfDWZJrQiCk6Ak7m1',
+    vouchId1: '6JQEIPeStt',
+    apiKey2: 'TVik9uTMgE-PD25UTHIS6gyl0hMBWC7AT4dkpdlLBT4VIfDWZJrQiCk6Ak7m1',
+    vouchId2: '6JQEIPeStt',
+    apiKey3: 'TVik9uTMgE-PD25UTHIS6gyl0hMBWC7AT4dkpdlLBT4VIfDWZJrQiCk6Ak7m1',
+    vouchId3: '6JQEIPeStt',
+    templateId: '357fc118-e179-4171-9446-ff2b8e9d1b29',
+    questions: [],
+    aspectRatio: 0,
+    preload: 'none',
+    autoplay: false,
+    controls: [
+      'progress',
+      'play-large',
+      'navigation',
+      'play',
+      'volume',
+      'current-time',
+      'duration',
+      'speed',
+      'captions',
+      'fullscreen',
+      'preview',
+      'languages'
+    ]
+  },
+  argTypes: {
+    env: {
+      control: 'radio',
+      options: ['local', 'dev', 'staging', 'prod']
+    },
+    preload: {
+      control: 'radio',
+      options: ['auto', 'none']
+    }
+  },
+  parameters: {
+    layout: 'fullscreen'
+  }
+};
+
+export default meta;
+export { MultiPlayer };

package/src/components/PlayerEmbed/index.ts

@@ -5,6 +5,7 @@ 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 { PropertyValueMap } from 'lit';
 import type { Environment } from '~/utils/env';
 
 import { EventForwardController } from './controllers/event-forwarder';
@@ -69,6 +70,7 @@ class PlayerEmbed extends LitElement {
     'seeked',
     'timeupdate',
     'volumechange',
+    'processing',
     'waiting',
 
     'video:loadeddata',
@@ -221,6 +223,13 @@ class PlayerEmbed extends LitElement {
     return null;
   }
 
+  protected willUpdate(changedProperties: PropertyValueMap<PlayerEmbedProps>) {
+    // If the vouch this embed is pointing to changes then reset the player
+    if (changedProperties.has('vouchId') && this.vouchId !== changedProperties.get('vouchId')) {
+      this.reset(0, false);
+    }
+  }
+
   render() {
     return html`
       ${this._renderStyles()}

package/src/components/PlayerEmbed/tests/PlayerEmbed.spec.ts

@@ -28,7 +28,7 @@ function playerLoaded(player: PlayerEmbed) {
 }
 
 describe('Embeds', () => {
-  it('passes', async () => {
+  it('Sends correct tracking events', async () => {
     const player = await fixture<PlayerEmbed>(
       html`<vouch-embed-player env="dev" .data=${data} aspectratio=${1}></vouch-embed-player>`
     );