@vouchfor/embeds-legacy 0.0.0-experiment.83dfd4d → 0.0.0-experiment.8803166

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vouchfor/embeds-legacy",
-  "version": "0.0.0-experiment.83dfd4d",
+  "version": "0.0.0-experiment.8803166",
   "license": "MIT",
   "author": "Aaron Williams",
   "main": "dist/es/embeds-legacy.js",
@@ -31,10 +31,11 @@
     "prepublishOnly": "yarn build",
     "size": "size-limit",
     "storybook": "yarn prebuild && storybook dev -p 6007",
-    "prebuild": "yarn build:deps && yarn generate:manifest",
+    "prebuild": "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:watch": "yarn test --watch"
+    "test:watch": "yarn test --watch",
+    "typecheck": "tsc --noEmit"
   },
   "lint-staged": {
     "**/*.{ts,tsx,js}": "eslint --fix --quiet",
@@ -42,47 +43,47 @@
   },
   "dependencies": {
     "@a11y/focus-trap": "^1.0.5",
-    "@lit/task": "^1.0.0",
-    "@vouchfor/canvas-video-legacy": "^9.0.0",
-    "@vouchfor/media-player-legacy": "0.0.0-experiment.83dfd4d",
+    "@lit/task": "^1.0.2",
+    "@vouchfor/canvas-video-legacy": "0.0.0-experiment.8803166",
+    "@vouchfor/media-player-legacy": "0.0.0-experiment.8803166",
     "uuid": "^9.0.1"
   },
   "peerDependencies": {
     "lit": "^3.1.2"
   },
   "devDependencies": {
-    "@esm-bundle/chai": "^4.3.4-fix.0",
+    "@esm-bundle/chai": "^4.3.4",
     "@open-wc/testing": "^4.0.0",
-    "@storybook/addon-essentials": "^8.5.8",
-    "@storybook/addon-links": "^8.5.8",
-    "@storybook/blocks": "^8.5.8",
-    "@storybook/web-components": "^8.5.8",
-    "@storybook/web-components-vite": "^8.5.8",
+    "@storybook/addon-essentials": "^8.6.12",
+    "@storybook/addon-links": "^8.6.12",
+    "@storybook/blocks": "^8.6.12",
+    "@storybook/web-components": "^8.6.12",
+    "@storybook/web-components-vite": "^8.6.12",
     "@svgr/core": "^8.1.0",
     "@types/flat": "^5.0.5",
-    "@types/mocha": "^10.0.6",
-    "@vouchfor/eslint-config": "^1.0.1",
+    "@types/mocha": "^10.0.10",
+    "@vouchfor/eslint-config": "^1.0.5",
     "@vouchfor/prettier-config": "^1.0.1",
-    "@vouchfor/video-utils-legacy": "^2.0.3",
-    "@web/dev-server-esbuild": "^1.0.2",
-    "@web/test-runner": "^0.18.1",
-    "@web/test-runner-browserstack": "^0.7.1",
+    "@vouchfor/video-utils-legacy": "0.0.0-experiment.8803166",
+    "@web/dev-server-esbuild": "^1.0.4",
+    "@web/test-runner": "^0.20.1",
+    "@web/test-runner-browserstack": "^0.8.0",
     "@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",
+    "glob": "^10.4.5",
+    "lint-staged": "^15.5.1",
+    "lit": "^3.3.0",
     "lodash": "^4.17.21",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "rollup-plugin-tla": "^0.0.2",
     "sinon": "^17.0.1",
-    "storybook": "^8.5.8",
+    "storybook": "^8.6.12",
     "svgson": "^5.3.1",
-    "typescript": "^5.4.3",
-    "vite": "^5.2.2",
-    "vite-plugin-commonjs": "^0.10.1",
-    "vite-plugin-dts": "^3.7.3",
+    "typescript": "^5.8.3",
+    "vite": "^5.4.18",
+    "vite-plugin-commonjs": "^0.10.4",
+    "vite-plugin-dts": "^3.9.1",
     "web-component-analyzer": "^2.0.0"
   }
 }

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

@@ -19,7 +19,8 @@ const _PlayerEmbed = ({
   env,
   apiKey,
   controls,
-  aspectRatio
+  aspectRatio,
+  senderId
 }: PlayerEmbedArgs) => {
   return html`
     <div style="height: 100vh">
@@ -33,6 +34,7 @@ const _PlayerEmbed = ({
         ?autoplay=${autoplay}
         preload=${ifDefined(preload)}
         aspectRatio=${ifDefined(aspectRatio)}
+        senderId=${ifDefined(senderId)}
         @error=${console.log}
       ></vouch-embed-legacy-player>
     </div>

package/src/components/PlayerEmbed/controllers/tracking/index.ts

@@ -15,6 +15,7 @@ type TrackingPayload = {
   answerId?: string;
   streamStart?: number;
   streamEnd?: number;
+  senderId?: string;
 };
 
 type BatchEvent = {
@@ -59,6 +60,7 @@ class TrackingController implements ReactiveController {
       event,
       payload: {
         ...payload,
+        senderId: this.host.senderId,
         vouchId,
         time: new Date().toISOString()
       }
@@ -127,9 +129,7 @@ class TrackingController implements ReactiveController {
   private _handlePlay = () => {
     // Only send the video played event once per session
     if (!this._hasPlayed) {
-      this._createTrackingEvent('VIDEO_PLAYED', {
-        streamStart: this.host.currentTime
-      });
+      this._createTrackingEvent('VIDEO_PLAYED', { streamStart: this.host.currentTime });
       this._hasPlayed = true;
     }
   };

package/src/components/PlayerEmbed/index.ts

@@ -1,3 +1,4 @@
+import { resolveDefaultLanguage } from '@vouchfor/media-player-legacy';
 import { css, html, LitElement } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
@@ -11,12 +12,13 @@ import type { Environment } from '~/utils/env';
 import { EventForwardController } from './controllers/event-forwarder';
 import { FetcherController } from './controllers/fetcher';
 import { TrackingController } from './controllers/tracking';
+import { getEnvUrls } from '~/utils/env';
 
 import '@vouchfor/media-player-legacy';
 
 type PlayerEmbedProps = Pick<
   MediaPlayerProps,
-  'data' | 'aspectRatio' | 'language' | 'preload' | 'autoplay' | 'controls'
+  'data' | 'aspectRatio' | 'preload' | 'autoplay' | 'controls' | 'defaultLanguage' | 'languages'
 > & {
   env: Environment;
   apiKey: string;
@@ -26,6 +28,7 @@ type PlayerEmbedProps = Pick<
   templateId?: string;
   // Index of the questions to include starting from 1
   questions?: number[];
+  senderId?: string;
 };
 
 @customElement('vouch-embed-legacy-player')
@@ -52,7 +55,9 @@ class PlayerEmbed extends LitElement {
   @property({ type: String }) preload: PlayerEmbedProps['preload'] = 'auto';
   @property({ type: Boolean }) autoplay: PlayerEmbedProps['autoplay'] = false;
   @property({ type: Number }) aspectRatio: PlayerEmbedProps['aspectRatio'] = 0;
-  @property({ type: String }) language?: MediaPlayerProps['language'];
+  @property({ type: String }) senderId?: PlayerEmbedProps['senderId'];
+  @property({ type: String }) defaultLanguage?: PlayerEmbedProps['defaultLanguage'];
+  @property({ type: Array }) languages?: PlayerEmbedProps['languages'];
 
   private eventController = new EventForwardController(this, [
     'durationchange',
@@ -240,9 +245,14 @@ class PlayerEmbed extends LitElement {
         ?loading=${this.fetching}
         .data=${this.vouch}
         .template=${this.template}
+        .translateBaseUrl=${getEnvUrls(this.env).translateApiUrl}
+        .defaultLanguage=${this.defaultLanguage ??
+        (this.vouch?.questions?.items?.[0]?.answer?.transcription?.language
+          ? resolveDefaultLanguage(this.vouch.questions.items[0].answer.transcription.language)
+          : undefined)}
+        .languages=${this.languages}
         aspectRatio=${ifDefined(this.aspectRatio)}
         preload=${ifDefined(this.preload)}
-        language=${ifDefined(this.language)}
         .controls=${this.controls}
       ></vmp-legacy-media-player>
     `;

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

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

package/src/utils/env.ts

@@ -4,6 +4,7 @@ type GetEnvUrlsReturn = {
   videoUrl: string;
   publicApiUrl: string;
   embedApiUrl: string;
+  translateApiUrl: string;
 };
 
 const devVideoUrl = 'https://d2rxhdlm2q91uk.cloudfront.net';
@@ -19,6 +20,10 @@ const devEmbedApiUrl = 'https://embed-dev.vouchfor.com/v2';
 const stagingEmbedApiUrl = 'https://embed-staging.vouchfor.com/v2';
 const prodEmbedApiUrl = 'https://embed.vouchfor.com/v2';
 
+const devTranslateApiUrl = 'https://public-dev.vouchfor.com';
+const stagingTranslateApiUrl = 'https://public-staging.vouchfor.com';
+const prodTranslateApiUrl = 'https://public.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
@@ -31,7 +36,8 @@ function getEnvUrls(env: Environment): GetEnvUrlsReturn {
     return {
       videoUrl: devVideoUrl,
       publicApiUrl: devPublicApiUrl,
-      embedApiUrl: localEmbedApiUrl
+      embedApiUrl: localEmbedApiUrl,
+      translateApiUrl: devTranslateApiUrl
     };
   }
 
@@ -39,7 +45,8 @@ function getEnvUrls(env: Environment): GetEnvUrlsReturn {
     return {
       videoUrl: devVideoUrl,
       publicApiUrl: devPublicApiUrl,
-      embedApiUrl: devEmbedApiUrl
+      embedApiUrl: devEmbedApiUrl,
+      translateApiUrl: devTranslateApiUrl
     };
   }
 
@@ -47,7 +54,8 @@ function getEnvUrls(env: Environment): GetEnvUrlsReturn {
     return {
       videoUrl: stagingVideoUrl,
       publicApiUrl: stagingPublicApiUrl,
-      embedApiUrl: stagingEmbedApiUrl
+      embedApiUrl: stagingEmbedApiUrl,
+      translateApiUrl: stagingTranslateApiUrl
     };
   }
 
@@ -55,7 +63,8 @@ function getEnvUrls(env: Environment): GetEnvUrlsReturn {
     return {
       videoUrl: prodVideoUrl,
       publicApiUrl: prodPublicApiUrl,
-      embedApiUrl: prodEmbedApiUrl
+      embedApiUrl: prodEmbedApiUrl,
+      translateApiUrl: prodTranslateApiUrl
     };
   }
 }