@vouchfor/embeds 0.0.0-experiment.0f953a2 → 0.0.0-experiment.107ae83

package/dist/es/embeds.js

@@ -1,25 +1,23 @@
-import { css, LitElement, html } from 'lit';
-import { property, state, customElement } from 'lit/decorators.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import { createRef, ref } from 'lit/directives/ref.js';
-import { Task } from '@lit/task';
-import { v4 } from 'uuid';
-import { TEMPLATE_VERSION } from '@vouchfor/canvas-video';
-import '@vouchfor/media-player';
-import { styleMap } from 'lit/directives/style-map.js';
-import { classMap } from 'lit/directives/class-map.js';
-import '@a11y/focus-trap';
-
-function forwardEvent(type, fromElement, toElement) {
+import { css, LitElement, html } from "lit";
+import { property, state, customElement } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { createRef, ref } from "lit/directives/ref.js";
+import { Task } from "@lit/task";
+import { v4 } from "uuid";
+import { TEMPLATE_VERSION } from "@vouchfor/canvas-video";
+import "@vouchfor/media-player";
+import { styleMap } from "lit/directives/style-map.js";
+import { classMap } from "lit/directives/class-map.js";
+import "@a11y/focus-trap";
+function forwardEvent(type2, fromElement, toElement) {
   function forwarder(event) {
     toElement.dispatchEvent(new CustomEvent(event.type, event));
   }
-  fromElement.addEventListener(type, forwarder);
+  fromElement.addEventListener(type2, forwarder);
   return () => {
-    fromElement.removeEventListener(type, forwarder);
+    fromElement.removeEventListener(type2, forwarder);
   };
 }
-
 class EventForwardController {
   constructor(host, events) {
     this._events = [];
@@ -48,7 +46,6 @@ class EventForwardController {
     this._cleanup = [];
   }
 }
-
 const devVideoUrl = "https://d2rxhdlm2q91uk.cloudfront.net";
 const stagingVideoUrl = "https://d1ix11aj5kfygl.cloudfront.net";
 const prodVideoUrl = "https://d157jlwnudd93d.cloudfront.net";
@@ -92,11 +89,11 @@ function getEnvUrls(env) {
     };
   }
 }
-
 class FetcherController {
   constructor(host) {
     this._fetching = false;
     this.getVouch = async (env, apiKey, vouchId) => {
+      var _a;
       const { embedApiUrl } = getEnvUrls(env);
       const cacheCheck = v4();
       const res = await fetch(`${embedApiUrl}/vouches/${vouchId}`, {
@@ -107,8 +104,8 @@ class FetcherController {
         ]
       });
       const vouch = await res.json();
-      this.host.dispatchEvent(new CustomEvent("vouch:loaded", { detail: vouch?.id }));
-      const resCacheCheck = res?.headers?.get("X-Cache-Check");
+      this.host.dispatchEvent(new CustomEvent("vouch:loaded", { detail: vouch == null ? void 0 : vouch.id }));
+      const resCacheCheck = (_a = res == null ? void 0 : res.headers) == null ? void 0 : _a.get("X-Cache-Check");
       if (resCacheCheck !== cacheCheck) {
         fetch(`${embedApiUrl}/vouches/${vouchId}`, {
           method: "GET",
@@ -121,6 +118,7 @@ class FetcherController {
       return vouch;
     };
     this.getTemplate = async (env, apiKey, templateId) => {
+      var _a;
       const { embedApiUrl } = getEnvUrls(env);
       const cacheCheck = v4();
       const res = await fetch(`${embedApiUrl}/templates/${templateId}`, {
@@ -131,7 +129,7 @@ class FetcherController {
         ]
       });
       const template = await res.json();
-      const resCacheCheck = res?.headers?.get("X-Cache-Check");
+      const resCacheCheck = (_a = res == null ? void 0 : res.headers) == null ? void 0 : _a.get("X-Cache-Check");
       if (resCacheCheck !== cacheCheck) {
         fetch(`${embedApiUrl}/templates/${templateId}`, {
           method: "GET",
@@ -147,6 +145,7 @@ class FetcherController {
     new Task(
       this.host,
       async ([env, apiKey, data, vouchId, templateId]) => {
+        var _a, _b, _c, _d;
         try {
           host.vouch = void 0;
           host.template = void 0;
@@ -157,7 +156,7 @@ class FetcherController {
               template = await this.getTemplate(env, apiKey, templateId);
             }
             this._vouch = data;
-            host.template = template ?? data?.settings?.template?.instance;
+            host.template = template ?? ((_b = (_a = data == null ? void 0 : data.settings) == null ? void 0 : _a.template) == null ? void 0 : _b.instance);
           } else if (vouchId) {
             this.fetching = true;
             const [vouch, template] = await Promise.all([
@@ -165,7 +164,7 @@ class FetcherController {
               templateId ? this.getTemplate(env, apiKey, templateId) : null
             ]);
             this._vouch = vouch;
-            host.template = template ?? vouch?.settings?.template?.instance;
+            host.template = template ?? ((_d = (_c = vouch == null ? void 0 : vouch.settings) == null ? void 0 : _c.template) == null ? void 0 : _d.instance);
           }
         } finally {
           this.fetching = false;
@@ -179,7 +178,7 @@ class FetcherController {
         host.vouch = vouch ? {
           ...vouch,
           questions: {
-            items: vouch?.questions.items.filter((_, index) => !questions?.length || questions?.includes(index + 1))
+            items: vouch == null ? void 0 : vouch.questions.items.filter((_, index) => !(questions == null ? void 0 : questions.length) || (questions == null ? void 0 : questions.includes(index + 1)))
           }
         } : void 0;
       },
@@ -196,9 +195,8 @@ class FetcherController {
     return this._fetching;
   }
 }
-
 const name = "@vouchfor/embeds";
-const version = "0.0.0-experiment.0f953a2";
+const version = "0.0.0-experiment.107ae83";
 const license = "MIT";
 const author = "Aaron Williams";
 const main = "dist/es/embeds.js";
@@ -206,104 +204,104 @@ const module = "dist/es/embeds.js";
 const type = "module";
 const types = "dist/es/src/index.d.ts";
 const exports = {
-	".": "./dist/es/embeds.js"
+  ".": "./dist/es/embeds.js"
 };
 const files = [
-	"dist",
-	"src"
+  "dist",
+  "src"
 ];
 const publishConfig = {
-	tag: "experiment",
-	access: "public"
+  tag: "experiment",
+  access: "public"
 };
 const engines = {
-	node: ">=18.18.0"
+  node: ">=18.18.0"
 };
 const scripts = {
-	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",
-	lint: "eslint . --quiet",
-	"lint:fix": "eslint . --fix",
-	"lint:staged": "lint-staged",
-	prepublishOnly: "yarn build",
-	size: "size-limit",
-	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"
+  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",
+  lint: "eslint . --quiet",
+  "lint:fix": "eslint . --fix",
+  "lint:staged": "lint-staged",
+  prepublishOnly: "yarn build",
+  size: "size-limit",
+  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:watch": "yarn test --watch"
 };
 const dependencies = {
-	"@a11y/focus-trap": "^1.0.5",
-	"@lit/task": "^1.0.0",
-	"@vouchfor/canvas-video": "0.0.0-experiment.0f953a2",
-	"@vouchfor/media-player": "0.0.0-experiment.0f953a2",
-	uuid: "^9.0.1"
+  "@a11y/focus-trap": "^1.0.5",
+  "@lit/task": "^1.0.0",
+  "@vouchfor/canvas-video": "^8.2.2",
+  "@vouchfor/media-player": "0.0.0-experiment.107ae83",
+  uuid: "^9.0.1"
 };
 const peerDependencies = {
-	lit: "^3.1.2"
+  lit: "^3.1.2"
 };
 const devDependencies = {
-	"@esm-bundle/chai": "^4.3.4-fix.0",
-	"@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.0f953a2",
-	"@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",
-	"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"
+  "@esm-bundle/chai": "^4.3.4-fix.0",
+  "@open-wc/testing": "^4.0.0",
+  "@storybook/addon-essentials": "^8.0.4",
+  "@storybook/addon-links": "^8.0.4",
+  "@storybook/blocks": "^8.0.4",
+  "@storybook/web-components": "^8.0.4",
+  "@storybook/web-components-vite": "^8.0.4",
+  "@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.107ae83",
+  "@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",
+  "rollup-plugin-tla": "^0.0.2",
+  sinon: "^17.0.1",
+  storybook: "^8.0.4",
+  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"
 };
 const packageJson = {
-	name: name,
-	version: version,
-	license: license,
-	author: author,
-	main: main,
-	module: module,
-	type: type,
-	types: types,
-	exports: exports,
-	files: files,
-	publishConfig: publishConfig,
-	engines: engines,
-	scripts: scripts,
-	"lint-staged": {
-	"**/*.{ts,tsx,js}": "eslint --fix --quiet",
-	"**/*.{md,json,yml}": "prettier --write"
-},
-	dependencies: dependencies,
-	peerDependencies: peerDependencies,
-	devDependencies: devDependencies
+  name,
+  version,
+  license,
+  author,
+  main,
+  module,
+  type,
+  types,
+  exports,
+  files,
+  publishConfig,
+  engines,
+  scripts,
+  "lint-staged": {
+    "**/*.{ts,tsx,js}": "eslint --fix --quiet",
+    "**/*.{md,json,yml}": "prettier --write"
+  },
+  dependencies,
+  peerDependencies,
+  devDependencies
 };
-
 function createVisitor(env) {
   const { publicApiUrl } = getEnvUrls(env);
   const visitorId = v4();
@@ -311,6 +309,7 @@ function createVisitor(env) {
   return visitorId;
 }
 function getUids(env) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
   if (typeof window === "undefined") {
     return {
       client: null,
@@ -318,21 +317,21 @@ function getUids(env) {
       request: v4()
     };
   }
-  let visitorId = window.localStorage?.getItem?.("vouch-uid-visitor");
-  let clientId = window.localStorage?.getItem?.("vouch-uid-client");
-  let tabId = window.sessionStorage?.getItem?.("vouch-uid-tab");
+  let visitorId = (_b = (_a = window.localStorage) == null ? void 0 : _a.getItem) == null ? void 0 : _b.call(_a, "vouch-uid-visitor");
+  let clientId = (_d = (_c = window.localStorage) == null ? void 0 : _c.getItem) == null ? void 0 : _d.call(_c, "vouch-uid-client");
+  let tabId = (_f = (_e = window.sessionStorage) == null ? void 0 : _e.getItem) == null ? void 0 : _f.call(_e, "vouch-uid-tab");
   const requestId = v4();
   if (!visitorId) {
     visitorId = createVisitor(env);
-    window.localStorage?.setItem?.("vouch-uid-visitor", visitorId);
+    (_h = (_g = window.localStorage) == null ? void 0 : _g.setItem) == null ? void 0 : _h.call(_g, "vouch-uid-visitor", visitorId);
   }
   if (!clientId) {
     clientId = v4();
-    window.localStorage?.setItem?.("vouch-uid-client", clientId);
+    (_j = (_i = window.localStorage) == null ? void 0 : _i.setItem) == null ? void 0 : _j.call(_i, "vouch-uid-client", clientId);
   }
   if (!tabId) {
     tabId = v4();
-    window.sessionStorage?.setItem?.("vouch-uid-tab", tabId);
+    (_l = (_k = window.sessionStorage) == null ? void 0 : _k.setItem) == null ? void 0 : _l.call(_k, "vouch-uid-tab", tabId);
   }
   return {
     client: clientId,
@@ -345,10 +344,11 @@ function findVouchId(payload, vouch) {
   if (payload && "vouchId" in payload) {
     return payload.vouchId;
   }
-  return vouch?.id ?? null;
+  return (vouch == null ? void 0 : vouch.id) ?? null;
 }
 function getReportingMetadata(source = "embedded_player") {
-  const [country, region] = Intl.DateTimeFormat().resolvedOptions().timeZone?.split?.("/") ?? [];
+  var _a, _b;
+  const [country, region] = ((_b = (_a = Intl.DateTimeFormat().resolvedOptions().timeZone) == null ? void 0 : _a.split) == null ? void 0 : _b.call(_a, "/")) ?? [];
   const utmParams = {};
   [...new URLSearchParams(location.search).entries()].forEach(([key, value]) => {
     if (/utm/.test(key)) {
@@ -371,7 +371,6 @@ function getReportingMetadata(source = "embedded_player") {
     ...utmParams
   };
 }
-
 const MINIMUM_SEND_THRESHOLD = 1;
 class TrackingController {
   constructor(host) {
@@ -461,8 +460,7 @@ class TrackingController {
     this._handleVideoTimeUpdate = ({ detail: { id, key, node } }) => {
       if (
         // We only want to count any time that the video is actually playing
-        !this.host.paused && // Only update the latest time if this event fires for the currently active video
-        id === this.host.scene?.video?.id
+        !this.host.paused
       ) {
         this._currentlyPlayingVideo = { id, key, node };
         this._streamLatestTime[key] = node.currentTime;
@@ -500,19 +498,21 @@ class TrackingController {
   }
   hostConnected() {
     requestAnimationFrame(() => {
+      var _a, _b, _c, _d;
       if ("onvisibilitychange" in document) {
         document.addEventListener("visibilitychange", this._handleVisibilityChange);
       } else {
         window.addEventListener("pagehide", this._handlePageHide);
       }
       this.host.addEventListener("vouch:loaded", this._handleVouchLoaded);
-      this.host.mediaPlayer?.addEventListener("play", this._handlePlay);
-      this.host.mediaPlayer?.addEventListener("video:play", this._handleVideoPlay);
-      this.host.mediaPlayer?.addEventListener("video:pause", this._handleVideoPause);
-      this.host.mediaPlayer?.addEventListener("video:timeupdate", this._handleVideoTimeUpdate);
+      (_a = this.host.mediaPlayer) == null ? void 0 : _a.addEventListener("play", this._handlePlay);
+      (_b = this.host.mediaPlayer) == null ? void 0 : _b.addEventListener("video:play", this._handleVideoPlay);
+      (_c = this.host.mediaPlayer) == null ? void 0 : _c.addEventListener("video:pause", this._handleVideoPause);
+      (_d = this.host.mediaPlayer) == null ? void 0 : _d.addEventListener("video:timeupdate", this._handleVideoTimeUpdate);
     });
   }
   hostDisconnected() {
+    var _a, _b, _c, _d;
     this._pageUnloading();
     if ("onvisibilitychange" in document) {
       document.removeEventListener("visibilitychange", this._handleVisibilityChange);
@@ -520,13 +520,12 @@ class TrackingController {
       window.removeEventListener("pagehide", this._handlePageHide);
     }
     this.host.removeEventListener("vouch:loaded", this._handleVouchLoaded);
-    this.host.mediaPlayer?.removeEventListener("play", this._handlePlay);
-    this.host.mediaPlayer?.removeEventListener("video:play", this._handleVideoPlay);
-    this.host.mediaPlayer?.removeEventListener("video:pause", this._handleVideoPause);
-    this.host.mediaPlayer?.removeEventListener("video:timeupdate", this._handleVideoTimeUpdate);
+    (_a = this.host.mediaPlayer) == null ? void 0 : _a.removeEventListener("play", this._handlePlay);
+    (_b = this.host.mediaPlayer) == null ? void 0 : _b.removeEventListener("video:play", this._handleVideoPlay);
+    (_c = this.host.mediaPlayer) == null ? void 0 : _c.removeEventListener("video:pause", this._handleVideoPause);
+    (_d = this.host.mediaPlayer) == null ? void 0 : _d.removeEventListener("video:timeupdate", this._handleVideoTimeUpdate);
   }
 }
-
 var __defProp$3 = Object.defineProperty;
 var __getOwnPropDesc$3 = Object.getOwnPropertyDescriptor;
 var __decorateClass$3 = (decorators, target, key, kind) => {
@@ -559,10 +558,12 @@ let PlayerEmbed = class extends LitElement {
       "playing",
       "ratechange",
       "scenechange",
+      "scenesupdate",
       "seeking",
       "seeked",
       "timeupdate",
       "volumechange",
+      "processing",
       "waiting",
       "video:loadeddata",
       "video:seeking",
@@ -576,8 +577,6 @@ let PlayerEmbed = class extends LitElement {
       "video:error"
     ]);
     this._fetcherController = new FetcherController(this);
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
     this._trackingController = new TrackingController(this);
     this._mediaPlayerRef = createRef();
   }
@@ -585,25 +584,32 @@ let PlayerEmbed = class extends LitElement {
     return this._fetcherController.fetching;
   }
   get waiting() {
-    return this._mediaPlayerRef.value?.waiting;
+    var _a;
+    return (_a = this._mediaPlayerRef.value) == null ? void 0 : _a.waiting;
   }
   get initialised() {
-    return this._mediaPlayerRef.value?.initialised;
+    var _a;
+    return (_a = this._mediaPlayerRef.value) == null ? void 0 : _a.initialised;
   }
   get seeking() {
-    return this._mediaPlayerRef.value?.seeking;
+    var _a;
+    return (_a = this._mediaPlayerRef.value) == null ? void 0 : _a.seeking;
   }
   get paused() {
-    return this._mediaPlayerRef.value?.paused;
+    var _a;
+    return (_a = this._mediaPlayerRef.value) == null ? void 0 : _a.paused;
   }
   get captions() {
-    return this._mediaPlayerRef.value?.captions;
+    var _a;
+    return (_a = this._mediaPlayerRef.value) == null ? void 0 : _a.captions;
   }
   get fullscreen() {
-    return this._mediaPlayerRef.value?.fullscreen;
+    var _a;
+    return (_a = this._mediaPlayerRef.value) == null ? void 0 : _a.fullscreen;
   }
   get duration() {
-    return this._mediaPlayerRef.value?.duration;
+    var _a;
+    return (_a = this._mediaPlayerRef.value) == null ? void 0 : _a.duration;
   }
   set currentTime(value) {
     if (this._mediaPlayerRef.value) {
@@ -611,7 +617,8 @@ let PlayerEmbed = class extends LitElement {
     }
   }
   get currentTime() {
-    return this._mediaPlayerRef.value?.currentTime ?? 0;
+    var _a;
+    return ((_a = this._mediaPlayerRef.value) == null ? void 0 : _a.currentTime) ?? 0;
   }
   set playbackRate(value) {
     if (this._mediaPlayerRef.value) {
@@ -619,7 +626,8 @@ let PlayerEmbed = class extends LitElement {
     }
   }
   get playbackRate() {
-    return this._mediaPlayerRef.value?.playbackRate ?? 1;
+    var _a;
+    return ((_a = this._mediaPlayerRef.value) == null ? void 0 : _a.playbackRate) ?? 1;
   }
   set volume(value) {
     if (this._mediaPlayerRef.value) {
@@ -627,7 +635,8 @@ let PlayerEmbed = class extends LitElement {
     }
   }
   get volume() {
-    return this._mediaPlayerRef.value?.volume ?? 1;
+    var _a;
+    return ((_a = this._mediaPlayerRef.value) == null ? void 0 : _a.volume) ?? 1;
   }
   set muted(value) {
     if (this._mediaPlayerRef.value) {
@@ -635,35 +644,40 @@ let PlayerEmbed = class extends LitElement {
     }
   }
   get muted() {
-    return this._mediaPlayerRef.value?.muted ?? false;
-  }
-  get scene() {
-    return this._mediaPlayerRef.value?.scene ?? null;
-  }
-  get scenes() {
-    return this._mediaPlayerRef.value?.scenes ?? [];
-  }
-  get sceneConfig() {
-    return this._mediaPlayerRef.value?.sceneConfig ?? null;
+    var _a;
+    return ((_a = this._mediaPlayerRef.value) == null ? void 0 : _a.muted) ?? false;
   }
-  get videoState() {
-    return this._mediaPlayerRef.value?.videoState;
+  // get scene(): Scene | null {
+  //   return this._mediaPlayerRef.value?.scene ?? null;
+  // }
+  // get scenes(): Scene[] {
+  //   return this._mediaPlayerRef.value?.scenes ?? [];
+  // }
+  // get sceneConfig(): Scenes | null {
+  //   return this._mediaPlayerRef.value?.sceneConfig ?? null;
+  // }
+  get mediaState() {
+    var _a;
+    return (_a = this._mediaPlayerRef.value) == null ? void 0 : _a.mediaState;
   }
   get mediaPlayer() {
     return this._mediaPlayerRef.value;
   }
   play() {
-    this._mediaPlayerRef.value?.play();
+    var _a;
+    (_a = this._mediaPlayerRef.value) == null ? void 0 : _a.play();
   }
   pause() {
-    this._mediaPlayerRef.value?.pause();
+    var _a;
+    (_a = this._mediaPlayerRef.value) == null ? void 0 : _a.pause();
   }
   reset(time = 0, play = false) {
-    this._mediaPlayerRef.value?.reset(time, play);
-  }
-  setScene(index) {
-    this._mediaPlayerRef.value?.setScene(index);
+    var _a;
+    (_a = this._mediaPlayerRef.value) == null ? void 0 : _a.reset(time, play);
   }
+  // setScene(index: number) {
+  //   this._mediaPlayerRef.value?.setScene(index);
+  // }
   _renderStyles() {
     if (!this.aspectRatio) {
       return html`
@@ -686,6 +700,11 @@ let PlayerEmbed = class extends LitElement {
     }
     return null;
   }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("vouchId") && this.vouchId !== changedProperties.get("vouchId")) {
+      this.reset(0, false);
+    }
+  }
   render() {
     return html`
       ${this._renderStyles()}
@@ -694,10 +713,9 @@ let PlayerEmbed = class extends LitElement {
         ${this.eventController.register()}
         ?autoplay=${this.autoplay}
         ?loading=${this.fetching}
-        .data=${this.vouch}
-        .template=${this.template}
         aspectRatio=${ifDefined(this.aspectRatio)}
         preload=${ifDefined(this.preload)}
+        language=${ifDefined(this.language)}
         .controls=${this.controls}
       ></vmp-media-player>
     `;
@@ -746,6 +764,9 @@ __decorateClass$3([
 __decorateClass$3([
   property({ type: Number })
 ], PlayerEmbed.prototype, "aspectRatio", 2);
+__decorateClass$3([
+  property({ type: String })
+], PlayerEmbed.prototype, "language", 2);
 __decorateClass$3([
   state()
 ], PlayerEmbed.prototype, "vouch", 2);
@@ -755,7 +776,6 @@ __decorateClass$3([
 PlayerEmbed = __decorateClass$3([
   customElement("vouch-embed-player")
 ], PlayerEmbed);
-
 var __defProp$2 = Object.defineProperty;
 var __getOwnPropDesc$2 = Object.getOwnPropertyDescriptor;
 var __decorateClass$2 = (decorators, target, key, kind) => {
@@ -884,7 +904,6 @@ __decorateClass$2([
 DialogOverlay = __decorateClass$2([
   customElement("vouch-embed-dialog-overlay")
 ], DialogOverlay);
-
 var __defProp$1 = Object.defineProperty;
 var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
 var __decorateClass$1 = (decorators, target, key, kind) => {
@@ -909,22 +928,23 @@ let DialogPortal = class extends LitElement {
     this._mediaPlayerRef = createRef();
     this.open = false;
     this._handleToggle = ({ detail }) => {
+      var _a, _b, _c;
       if (this.id === detail) {
         this.open = !this.open;
         if (this.open) {
-          if (!this.disableAutoplay && this._mediaPlayerRef?.value) {
+          if (!this.disableAutoplay && ((_a = this._mediaPlayerRef) == null ? void 0 : _a.value)) {
             this._mediaPlayerRef.value.muted = false;
             this._mediaPlayerRef.value.play();
           }
         } else {
-          this._mediaPlayerRef?.value?.pause();
+          (_c = (_b = this._mediaPlayerRef) == null ? void 0 : _b.value) == null ? void 0 : _c.pause();
         }
       }
     };
-    // We could do the same thing on close and check for the correct ID but it doesn't really matter
     this._handleClose = () => {
+      var _a, _b;
       this.open = false;
-      this._mediaPlayerRef?.value?.pause();
+      (_b = (_a = this._mediaPlayerRef) == null ? void 0 : _a.value) == null ? void 0 : _b.pause();
     };
     this._handleDocumentKeyUp = (e) => {
       if (e.key === "Escape") {
@@ -1015,7 +1035,6 @@ __decorateClass$1([
 DialogPortal = __decorateClass$1([
   customElement("vouch-embed-dialog-portal")
 ], DialogPortal);
-
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -1121,6 +1140,8 @@ __decorateClass([
 DialogEmbed = __decorateClass([
   customElement("vouch-embed-dialog")
 ], DialogEmbed);
-
-export { DialogEmbed, PlayerEmbed };
+export {
+  DialogEmbed,
+  PlayerEmbed
+};
 //# sourceMappingURL=embeds.js.map