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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (26) hide show
  1. package/dist/es/embeds.js +116 -199
  2. package/dist/es/embeds.js.map +1 -1
  3. package/dist/es/src/components/DialogEmbed/DialogOverlay.d.ts +4 -4
  4. package/dist/es/src/components/DialogEmbed/DialogPortal.d.ts +3 -3
  5. package/dist/es/src/components/DialogEmbed/index.d.ts +4 -5
  6. package/dist/es/src/components/PlayerEmbed/controllers/event-forwarder.d.ts +4 -3
  7. package/dist/es/src/components/PlayerEmbed/controllers/fetcher.d.ts +3 -2
  8. package/dist/es/src/components/PlayerEmbed/controllers/tracking/index.d.ts +4 -2
  9. package/dist/es/src/components/PlayerEmbed/controllers/tracking/utils.d.ts +4 -3
  10. package/dist/es/src/components/PlayerEmbed/index.d.ts +15 -13
  11. package/dist/es/src/components/PlayerEmbed/tests/data.d.ts +4 -2
  12. package/dist/es/src/components/PlayerEmbed/tests/media-data.d.ts +19 -0
  13. package/dist/iife/dialog-embed/embed.iife.js +2647 -317
  14. package/dist/iife/dialog-embed/embed.iife.js.map +1 -1
  15. package/dist/iife/embeds.iife.js +2647 -317
  16. package/dist/iife/embeds.iife.js.map +1 -1
  17. package/dist/iife/player-embed/embed.iife.js +2625 -295
  18. package/dist/iife/player-embed/embed.iife.js.map +1 -1
  19. package/package.json +31 -29
  20. package/src/components/PlayerEmbed/MultiEmbed.stories.ts +135 -0
  21. package/src/components/PlayerEmbed/PlayerEmbed.stories.ts +18 -2
  22. package/src/components/PlayerEmbed/controllers/tracking/index.ts +10 -10
  23. package/src/components/PlayerEmbed/index.ts +33 -18
  24. package/src/components/PlayerEmbed/tests/PlayerEmbed.spec.ts +14 -7
  25. package/src/components/PlayerEmbed/tests/data.ts +120 -76
  26. package/src/components/PlayerEmbed/tests/media-data.ts +22 -0
package/dist/es/embeds.js CHANGED
@@ -1,15 +1,14 @@
1
- import { css, LitElement, html } from 'lit';
2
- import { property, state, customElement } from 'lit/decorators.js';
3
- import { ifDefined } from 'lit/directives/if-defined.js';
4
- import { createRef, ref } from 'lit/directives/ref.js';
5
- import { Task } from '@lit/task';
6
- import { v4 } from 'uuid';
7
- import { TEMPLATE_VERSION } from '@vouchfor/canvas-video';
8
- import '@vouchfor/media-player';
9
- import { styleMap } from 'lit/directives/style-map.js';
10
- import { classMap } from 'lit/directives/class-map.js';
11
- import '@a11y/focus-trap';
12
-
1
+ import { css, LitElement, html } from "lit";
2
+ import { property, state, customElement } from "lit/decorators.js";
3
+ import { ifDefined } from "lit/directives/if-defined.js";
4
+ import { createRef, ref } from "lit/directives/ref.js";
5
+ import { Task } from "@lit/task";
6
+ import { v4 } from "uuid";
7
+ import { TEMPLATE_VERSION } from "@vouchfor/canvas-video";
8
+ import "@vouchfor/media-player";
9
+ import { styleMap } from "lit/directives/style-map.js";
10
+ import { classMap } from "lit/directives/class-map.js";
11
+ import "@a11y/focus-trap";
13
12
  function forwardEvent(type, fromElement, toElement) {
14
13
  function forwarder(event) {
15
14
  toElement.dispatchEvent(new CustomEvent(event.type, event));
@@ -19,7 +18,6 @@ function forwardEvent(type, fromElement, toElement) {
19
18
  fromElement.removeEventListener(type, forwarder);
20
19
  };
21
20
  }
22
-
23
21
  class EventForwardController {
24
22
  constructor(host, events) {
25
23
  this._events = [];
@@ -48,7 +46,6 @@ class EventForwardController {
48
46
  this._cleanup = [];
49
47
  }
50
48
  }
51
-
52
49
  const devVideoUrl = "https://d2rxhdlm2q91uk.cloudfront.net";
53
50
  const stagingVideoUrl = "https://d1ix11aj5kfygl.cloudfront.net";
54
51
  const prodVideoUrl = "https://d157jlwnudd93d.cloudfront.net";
@@ -92,11 +89,11 @@ function getEnvUrls(env) {
92
89
  };
93
90
  }
94
91
  }
95
-
96
92
  class FetcherController {
97
93
  constructor(host) {
98
94
  this._fetching = false;
99
95
  this.getVouch = async (env, apiKey, vouchId) => {
96
+ var _a;
100
97
  const { embedApiUrl } = getEnvUrls(env);
101
98
  const cacheCheck = v4();
102
99
  const res = await fetch(`${embedApiUrl}/vouches/${vouchId}`, {
@@ -107,8 +104,8 @@ class FetcherController {
107
104
  ]
108
105
  });
109
106
  const vouch = await res.json();
110
- this.host.dispatchEvent(new CustomEvent("vouch:loaded", { detail: vouch?.id }));
111
- const resCacheCheck = res?.headers?.get("X-Cache-Check");
107
+ this.host.dispatchEvent(new CustomEvent("vouch:loaded", { detail: vouch == null ? void 0 : vouch.id }));
108
+ const resCacheCheck = (_a = res == null ? void 0 : res.headers) == null ? void 0 : _a.get("X-Cache-Check");
112
109
  if (resCacheCheck !== cacheCheck) {
113
110
  fetch(`${embedApiUrl}/vouches/${vouchId}`, {
114
111
  method: "GET",
@@ -121,6 +118,7 @@ class FetcherController {
121
118
  return vouch;
122
119
  };
123
120
  this.getTemplate = async (env, apiKey, templateId) => {
121
+ var _a;
124
122
  const { embedApiUrl } = getEnvUrls(env);
125
123
  const cacheCheck = v4();
126
124
  const res = await fetch(`${embedApiUrl}/templates/${templateId}`, {
@@ -131,7 +129,7 @@ class FetcherController {
131
129
  ]
132
130
  });
133
131
  const template = await res.json();
134
- const resCacheCheck = res?.headers?.get("X-Cache-Check");
132
+ const resCacheCheck = (_a = res == null ? void 0 : res.headers) == null ? void 0 : _a.get("X-Cache-Check");
135
133
  if (resCacheCheck !== cacheCheck) {
136
134
  fetch(`${embedApiUrl}/templates/${templateId}`, {
137
135
  method: "GET",
@@ -147,6 +145,7 @@ class FetcherController {
147
145
  new Task(
148
146
  this.host,
149
147
  async ([env, apiKey, data, vouchId, templateId]) => {
148
+ var _a, _b, _c, _d;
150
149
  try {
151
150
  host.vouch = void 0;
152
151
  host.template = void 0;
@@ -157,7 +156,7 @@ class FetcherController {
157
156
  template = await this.getTemplate(env, apiKey, templateId);
158
157
  }
159
158
  this._vouch = data;
160
- host.template = template ?? data?.settings?.template?.instance;
159
+ host.template = template ?? ((_b = (_a = data == null ? void 0 : data.settings) == null ? void 0 : _a.template) == null ? void 0 : _b.instance);
161
160
  } else if (vouchId) {
162
161
  this.fetching = true;
163
162
  const [vouch, template] = await Promise.all([
@@ -165,7 +164,7 @@ class FetcherController {
165
164
  templateId ? this.getTemplate(env, apiKey, templateId) : null
166
165
  ]);
167
166
  this._vouch = vouch;
168
- host.template = template ?? vouch?.settings?.template?.instance;
167
+ host.template = template ?? ((_d = (_c = vouch == null ? void 0 : vouch.settings) == null ? void 0 : _c.template) == null ? void 0 : _d.instance);
169
168
  }
170
169
  } finally {
171
170
  this.fetching = false;
@@ -179,7 +178,7 @@ class FetcherController {
179
178
  host.vouch = vouch ? {
180
179
  ...vouch,
181
180
  questions: {
182
- items: vouch?.questions.items.filter((_, index) => !questions?.length || questions?.includes(index + 1))
181
+ items: vouch == null ? void 0 : vouch.questions.items.filter((_, index) => !(questions == null ? void 0 : questions.length) || (questions == null ? void 0 : questions.includes(index + 1)))
183
182
  }
184
183
  } : void 0;
185
184
  },
@@ -196,114 +195,10 @@ class FetcherController {
196
195
  return this._fetching;
197
196
  }
198
197
  }
199
-
200
- const name = "@vouchfor/embeds";
201
- const version = "0.0.0-experiment.e7e20dd";
202
- const license = "MIT";
203
- const author = "Aaron Williams";
204
- const main = "dist/es/embeds.js";
205
- const module = "dist/es/embeds.js";
206
- const type = "module";
207
- const types = "dist/es/src/index.d.ts";
208
- const exports = {
209
- ".": "./dist/es/embeds.js"
210
- };
211
- const files = [
212
- "dist",
213
- "src"
214
- ];
215
- const publishConfig = {
216
- tag: "experiment",
217
- access: "public"
218
- };
219
- const engines = {
220
- node: ">=18.18.0"
221
- };
222
- const scripts = {
223
- build: "rm -rf dist && tsc && yarn build:self",
224
- "build:deps": "yarn --cwd ../media-player build",
225
- "build:self": "vite build --mode iife && vite build --mode es && node scripts/build.cjs",
226
- "build:package": "yarn build",
227
- "build:storybook": "yarn prebuild && storybook build",
228
- "generate:manifest": "wca src --outFile custom-elements.json",
229
- lint: "eslint . --quiet",
230
- "lint:fix": "eslint . --fix",
231
- "lint:staged": "lint-staged",
232
- prepublishOnly: "yarn build",
233
- size: "size-limit",
234
- storybook: "yarn prebuild && storybook dev -p 6007",
235
- prebuild: "yarn build:deps && yarn generate:manifest",
236
- test: "rm -rf test/lib && yarn prebuild && vite build --mode test && web-test-runner",
237
- "test:ci": "yarn test --config web-test-runner.ci.config.js"
238
- };
239
- const dependencies = {
240
- "@a11y/focus-trap": "^1.0.5",
241
- "@lit/task": "^1.0.0",
242
- "@vouchfor/canvas-video": "0.0.0-experiment.e7e20dd",
243
- "@vouchfor/media-player": "0.0.0-experiment.e7e20dd",
244
- uuid: "^9.0.1"
245
- };
246
- const peerDependencies = {
247
- lit: "^3.1.2"
248
- };
249
- const devDependencies = {
250
- "@esm-bundle/chai": "^4.3.4-fix.0",
251
- "@open-wc/testing": "^4.0.0",
252
- "@storybook/addon-essentials": "^8.0.2",
253
- "@storybook/addon-links": "^8.0.2",
254
- "@storybook/blocks": "^8.0.2",
255
- "@storybook/web-components": "^8.0.2",
256
- "@storybook/web-components-vite": "^8.0.2",
257
- "@svgr/core": "^8.1.0",
258
- "@types/flat": "^5.0.5",
259
- "@types/mocha": "^10.0.6",
260
- "@vouchfor/eslint-config": "^1.0.1",
261
- "@vouchfor/prettier-config": "^1.0.1",
262
- "@vouchfor/video-utils": "0.0.0-experiment.e7e20dd",
263
- "@web/dev-server-esbuild": "^1.0.2",
264
- "@web/test-runner": "^0.18.1",
265
- "@web/test-runner-browserstack": "^0.7.1",
266
- "@web/test-runner-mocha": "^0.9.0",
267
- "@web/test-runner-playwright": "^0.11.0",
268
- glob: "^10.3.10",
269
- "lint-staged": "^15.2.2",
270
- lit: "^3.1.2",
271
- lodash: "^4.17.21",
272
- react: "^18.2.0",
273
- "react-dom": "^18.2.0",
274
- "rollup-plugin-tla": "^0.0.2",
275
- sinon: "^17.0.1",
276
- storybook: "^8.0.2",
277
- svgson: "^5.3.1",
278
- typescript: "^5.4.3",
279
- vite: "^5.2.2",
280
- "vite-plugin-commonjs": "^0.10.1",
281
- "vite-plugin-dts": "^3.7.3",
282
- "web-component-analyzer": "^2.0.0"
283
- };
198
+ const version = "0.0.0-experiment.e89c310";
284
199
  const packageJson = {
285
- name: name,
286
- version: version,
287
- license: license,
288
- author: author,
289
- main: main,
290
- module: module,
291
- type: type,
292
- types: types,
293
- exports: exports,
294
- files: files,
295
- publishConfig: publishConfig,
296
- engines: engines,
297
- scripts: scripts,
298
- "lint-staged": {
299
- "**/*.{ts,tsx,js}": "eslint --fix --quiet",
300
- "**/*.{md,json,yml}": "prettier --write"
301
- },
302
- dependencies: dependencies,
303
- peerDependencies: peerDependencies,
304
- devDependencies: devDependencies
200
+ version
305
201
  };
306
-
307
202
  function createVisitor(env) {
308
203
  const { publicApiUrl } = getEnvUrls(env);
309
204
  const visitorId = v4();
@@ -311,6 +206,7 @@ function createVisitor(env) {
311
206
  return visitorId;
312
207
  }
313
208
  function getUids(env) {
209
+ var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
314
210
  if (typeof window === "undefined") {
315
211
  return {
316
212
  client: null,
@@ -318,21 +214,21 @@ function getUids(env) {
318
214
  request: v4()
319
215
  };
320
216
  }
321
- let visitorId = window.localStorage?.getItem?.("vouch-uid-visitor");
322
- let clientId = window.localStorage?.getItem?.("vouch-uid-client");
323
- let tabId = window.sessionStorage?.getItem?.("vouch-uid-tab");
217
+ let visitorId = (_b = (_a = window.localStorage) == null ? void 0 : _a.getItem) == null ? void 0 : _b.call(_a, "vouch-uid-visitor");
218
+ let clientId = (_d = (_c = window.localStorage) == null ? void 0 : _c.getItem) == null ? void 0 : _d.call(_c, "vouch-uid-client");
219
+ let tabId = (_f = (_e = window.sessionStorage) == null ? void 0 : _e.getItem) == null ? void 0 : _f.call(_e, "vouch-uid-tab");
324
220
  const requestId = v4();
325
221
  if (!visitorId) {
326
222
  visitorId = createVisitor(env);
327
- window.localStorage?.setItem?.("vouch-uid-visitor", visitorId);
223
+ (_h = (_g = window.localStorage) == null ? void 0 : _g.setItem) == null ? void 0 : _h.call(_g, "vouch-uid-visitor", visitorId);
328
224
  }
329
225
  if (!clientId) {
330
226
  clientId = v4();
331
- window.localStorage?.setItem?.("vouch-uid-client", clientId);
227
+ (_j = (_i = window.localStorage) == null ? void 0 : _i.setItem) == null ? void 0 : _j.call(_i, "vouch-uid-client", clientId);
332
228
  }
333
229
  if (!tabId) {
334
230
  tabId = v4();
335
- window.sessionStorage?.setItem?.("vouch-uid-tab", tabId);
231
+ (_l = (_k = window.sessionStorage) == null ? void 0 : _k.setItem) == null ? void 0 : _l.call(_k, "vouch-uid-tab", tabId);
336
232
  }
337
233
  return {
338
234
  client: clientId,
@@ -345,10 +241,11 @@ function findVouchId(payload, vouch) {
345
241
  if (payload && "vouchId" in payload) {
346
242
  return payload.vouchId;
347
243
  }
348
- return vouch?.id ?? null;
244
+ return (vouch == null ? void 0 : vouch.id) ?? null;
349
245
  }
350
246
  function getReportingMetadata(source = "embedded_player") {
351
- const [country, region] = Intl.DateTimeFormat().resolvedOptions().timeZone?.split?.("/") ?? [];
247
+ var _a, _b;
248
+ const [country, region] = ((_b = (_a = Intl.DateTimeFormat().resolvedOptions().timeZone) == null ? void 0 : _a.split) == null ? void 0 : _b.call(_a, "/")) ?? [];
352
249
  const utmParams = {};
353
250
  [...new URLSearchParams(location.search).entries()].forEach(([key, value]) => {
354
251
  if (/utm/.test(key)) {
@@ -371,7 +268,6 @@ function getReportingMetadata(source = "embedded_player") {
371
268
  ...utmParams
372
269
  };
373
270
  }
374
-
375
271
  const MINIMUM_SEND_THRESHOLD = 1;
376
272
  class TrackingController {
377
273
  constructor(host) {
@@ -391,6 +287,7 @@ class TrackingController {
391
287
  event,
392
288
  payload: {
393
289
  ...payload,
290
+ senderId: this.host.senderId,
394
291
  vouchId,
395
292
  time: (/* @__PURE__ */ new Date()).toISOString()
396
293
  }
@@ -444,9 +341,7 @@ class TrackingController {
444
341
  };
445
342
  this._handlePlay = () => {
446
343
  if (!this._hasPlayed) {
447
- this._createTrackingEvent("VIDEO_PLAYED", {
448
- streamStart: this.host.currentTime
449
- });
344
+ this._createTrackingEvent("VIDEO_PLAYED", { streamStart: this.host.currentTime });
450
345
  this._hasPlayed = true;
451
346
  }
452
347
  };
@@ -461,8 +356,7 @@ class TrackingController {
461
356
  this._handleVideoTimeUpdate = ({ detail: { id, key, node } }) => {
462
357
  if (
463
358
  // We only want to count any time that the video is actually playing
464
- !this.host.paused && // Only update the latest time if this event fires for the currently active video
465
- id === this.host.scene?.video?.id
359
+ !this.host.paused
466
360
  ) {
467
361
  this._currentlyPlayingVideo = { id, key, node };
468
362
  this._streamLatestTime[key] = node.currentTime;
@@ -500,19 +394,21 @@ class TrackingController {
500
394
  }
501
395
  hostConnected() {
502
396
  requestAnimationFrame(() => {
397
+ var _a, _b, _c, _d;
503
398
  if ("onvisibilitychange" in document) {
504
399
  document.addEventListener("visibilitychange", this._handleVisibilityChange);
505
400
  } else {
506
401
  window.addEventListener("pagehide", this._handlePageHide);
507
402
  }
508
403
  this.host.addEventListener("vouch:loaded", this._handleVouchLoaded);
509
- this.host.mediaPlayer?.addEventListener("play", this._handlePlay);
510
- this.host.mediaPlayer?.addEventListener("video:play", this._handleVideoPlay);
511
- this.host.mediaPlayer?.addEventListener("video:pause", this._handleVideoPause);
512
- this.host.mediaPlayer?.addEventListener("video:timeupdate", this._handleVideoTimeUpdate);
404
+ (_a = this.host.mediaPlayer) == null ? void 0 : _a.addEventListener("play", this._handlePlay);
405
+ (_b = this.host.mediaPlayer) == null ? void 0 : _b.addEventListener("video:play", this._handleVideoPlay);
406
+ (_c = this.host.mediaPlayer) == null ? void 0 : _c.addEventListener("video:pause", this._handleVideoPause);
407
+ (_d = this.host.mediaPlayer) == null ? void 0 : _d.addEventListener("video:timeupdate", this._handleVideoTimeUpdate);
513
408
  });
514
409
  }
515
410
  hostDisconnected() {
411
+ var _a, _b, _c, _d;
516
412
  this._pageUnloading();
517
413
  if ("onvisibilitychange" in document) {
518
414
  document.removeEventListener("visibilitychange", this._handleVisibilityChange);
@@ -520,13 +416,12 @@ class TrackingController {
520
416
  window.removeEventListener("pagehide", this._handlePageHide);
521
417
  }
522
418
  this.host.removeEventListener("vouch:loaded", this._handleVouchLoaded);
523
- this.host.mediaPlayer?.removeEventListener("play", this._handlePlay);
524
- this.host.mediaPlayer?.removeEventListener("video:play", this._handleVideoPlay);
525
- this.host.mediaPlayer?.removeEventListener("video:pause", this._handleVideoPause);
526
- this.host.mediaPlayer?.removeEventListener("video:timeupdate", this._handleVideoTimeUpdate);
419
+ (_a = this.host.mediaPlayer) == null ? void 0 : _a.removeEventListener("play", this._handlePlay);
420
+ (_b = this.host.mediaPlayer) == null ? void 0 : _b.removeEventListener("video:play", this._handleVideoPlay);
421
+ (_c = this.host.mediaPlayer) == null ? void 0 : _c.removeEventListener("video:pause", this._handleVideoPause);
422
+ (_d = this.host.mediaPlayer) == null ? void 0 : _d.removeEventListener("video:timeupdate", this._handleVideoTimeUpdate);
527
423
  }
528
424
  }
529
-
530
425
  var __defProp$3 = Object.defineProperty;
531
426
  var __getOwnPropDesc$3 = Object.getOwnPropertyDescriptor;
532
427
  var __decorateClass$3 = (decorators, target, key, kind) => {
@@ -534,8 +429,7 @@ var __decorateClass$3 = (decorators, target, key, kind) => {
534
429
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
535
430
  if (decorator = decorators[i])
536
431
  result = (kind ? decorator(target, key, result) : decorator(result)) || result;
537
- if (kind && result)
538
- __defProp$3(target, key, result);
432
+ if (kind && result) __defProp$3(target, key, result);
539
433
  return result;
540
434
  };
541
435
  let PlayerEmbed = class extends LitElement {
@@ -559,10 +453,12 @@ let PlayerEmbed = class extends LitElement {
559
453
  "playing",
560
454
  "ratechange",
561
455
  "scenechange",
456
+ "scenesupdate",
562
457
  "seeking",
563
458
  "seeked",
564
459
  "timeupdate",
565
460
  "volumechange",
461
+ "processing",
566
462
  "waiting",
567
463
  "video:loadeddata",
568
464
  "video:seeking",
@@ -570,14 +466,13 @@ let PlayerEmbed = class extends LitElement {
570
466
  "video:play",
571
467
  "video:playing",
572
468
  "video:pause",
469
+ "video:waiting",
573
470
  "video:stalled",
574
471
  "video:timeupdate",
575
472
  "video:ended",
576
473
  "video:error"
577
474
  ]);
578
475
  this._fetcherController = new FetcherController(this);
579
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
580
- // @ts-ignore
581
476
  this._trackingController = new TrackingController(this);
582
477
  this._mediaPlayerRef = createRef();
583
478
  }
@@ -585,25 +480,32 @@ let PlayerEmbed = class extends LitElement {
585
480
  return this._fetcherController.fetching;
586
481
  }
587
482
  get waiting() {
588
- return this._mediaPlayerRef.value?.waiting;
483
+ var _a;
484
+ return (_a = this._mediaPlayerRef.value) == null ? void 0 : _a.waiting;
589
485
  }
590
486
  get initialised() {
591
- return this._mediaPlayerRef.value?.initialised;
487
+ var _a;
488
+ return (_a = this._mediaPlayerRef.value) == null ? void 0 : _a.initialised;
592
489
  }
593
490
  get seeking() {
594
- return this._mediaPlayerRef.value?.seeking;
491
+ var _a;
492
+ return (_a = this._mediaPlayerRef.value) == null ? void 0 : _a.seeking;
595
493
  }
596
494
  get paused() {
597
- return this._mediaPlayerRef.value?.paused;
495
+ var _a;
496
+ return (_a = this._mediaPlayerRef.value) == null ? void 0 : _a.paused;
598
497
  }
599
498
  get captions() {
600
- return this._mediaPlayerRef.value?.captions;
499
+ var _a;
500
+ return (_a = this._mediaPlayerRef.value) == null ? void 0 : _a.captions;
601
501
  }
602
502
  get fullscreen() {
603
- return this._mediaPlayerRef.value?.fullscreen;
503
+ var _a;
504
+ return (_a = this._mediaPlayerRef.value) == null ? void 0 : _a.fullscreen;
604
505
  }
605
506
  get duration() {
606
- return this._mediaPlayerRef.value?.duration;
507
+ var _a;
508
+ return (_a = this._mediaPlayerRef.value) == null ? void 0 : _a.duration;
607
509
  }
608
510
  set currentTime(value) {
609
511
  if (this._mediaPlayerRef.value) {
@@ -611,7 +513,8 @@ let PlayerEmbed = class extends LitElement {
611
513
  }
612
514
  }
613
515
  get currentTime() {
614
- return this._mediaPlayerRef.value?.currentTime ?? 0;
516
+ var _a;
517
+ return ((_a = this._mediaPlayerRef.value) == null ? void 0 : _a.currentTime) ?? 0;
615
518
  }
616
519
  set playbackRate(value) {
617
520
  if (this._mediaPlayerRef.value) {
@@ -619,7 +522,8 @@ let PlayerEmbed = class extends LitElement {
619
522
  }
620
523
  }
621
524
  get playbackRate() {
622
- return this._mediaPlayerRef.value?.playbackRate ?? 1;
525
+ var _a;
526
+ return ((_a = this._mediaPlayerRef.value) == null ? void 0 : _a.playbackRate) ?? 1;
623
527
  }
624
528
  set volume(value) {
625
529
  if (this._mediaPlayerRef.value) {
@@ -627,7 +531,8 @@ let PlayerEmbed = class extends LitElement {
627
531
  }
628
532
  }
629
533
  get volume() {
630
- return this._mediaPlayerRef.value?.volume ?? 1;
534
+ var _a;
535
+ return ((_a = this._mediaPlayerRef.value) == null ? void 0 : _a.volume) ?? 1;
631
536
  }
632
537
  set muted(value) {
633
538
  if (this._mediaPlayerRef.value) {
@@ -635,35 +540,40 @@ let PlayerEmbed = class extends LitElement {
635
540
  }
636
541
  }
637
542
  get muted() {
638
- return this._mediaPlayerRef.value?.muted ?? false;
639
- }
640
- get scene() {
641
- return this._mediaPlayerRef.value?.scene ?? null;
642
- }
643
- get scenes() {
644
- return this._mediaPlayerRef.value?.scenes ?? [];
645
- }
646
- get sceneConfig() {
647
- return this._mediaPlayerRef.value?.sceneConfig ?? null;
543
+ var _a;
544
+ return ((_a = this._mediaPlayerRef.value) == null ? void 0 : _a.muted) ?? false;
648
545
  }
649
- get videoState() {
650
- return this._mediaPlayerRef.value?.videoState;
546
+ // get scene(): Scene | null {
547
+ // return this._mediaPlayerRef.value?.scene ?? null;
548
+ // }
549
+ // get scenes(): Scene[] {
550
+ // return this._mediaPlayerRef.value?.scenes ?? [];
551
+ // }
552
+ // get sceneConfig(): Scenes | null {
553
+ // return this._mediaPlayerRef.value?.sceneConfig ?? null;
554
+ // }
555
+ get mediaState() {
556
+ var _a;
557
+ return (_a = this._mediaPlayerRef.value) == null ? void 0 : _a.mediaState;
651
558
  }
652
559
  get mediaPlayer() {
653
560
  return this._mediaPlayerRef.value;
654
561
  }
655
562
  play() {
656
- this._mediaPlayerRef.value?.play();
563
+ var _a;
564
+ (_a = this._mediaPlayerRef.value) == null ? void 0 : _a.play();
657
565
  }
658
566
  pause() {
659
- this._mediaPlayerRef.value?.pause();
567
+ var _a;
568
+ (_a = this._mediaPlayerRef.value) == null ? void 0 : _a.pause();
660
569
  }
661
570
  reset(time = 0, play = false) {
662
- this._mediaPlayerRef.value?.reset(time, play);
663
- }
664
- setScene(index) {
665
- this._mediaPlayerRef.value?.setScene(index);
571
+ var _a;
572
+ (_a = this._mediaPlayerRef.value) == null ? void 0 : _a.reset(time, play);
666
573
  }
574
+ // setScene(index: number) {
575
+ // this._mediaPlayerRef.value?.setScene(index);
576
+ // }
667
577
  _renderStyles() {
668
578
  if (!this.aspectRatio) {
669
579
  return html`
@@ -686,6 +596,11 @@ let PlayerEmbed = class extends LitElement {
686
596
  }
687
597
  return null;
688
598
  }
599
+ willUpdate(changedProperties) {
600
+ if (changedProperties.has("vouchId") && this.vouchId !== changedProperties.get("vouchId")) {
601
+ this.reset(0, false);
602
+ }
603
+ }
689
604
  render() {
690
605
  return html`
691
606
  ${this._renderStyles()}
@@ -694,10 +609,9 @@ let PlayerEmbed = class extends LitElement {
694
609
  ${this.eventController.register()}
695
610
  ?autoplay=${this.autoplay}
696
611
  ?loading=${this.fetching}
697
- .data=${this.vouch}
698
- .template=${this.template}
699
612
  aspectRatio=${ifDefined(this.aspectRatio)}
700
613
  preload=${ifDefined(this.preload)}
614
+ language=${ifDefined(this.language)}
701
615
  .controls=${this.controls}
702
616
  ></vmp-media-player>
703
617
  `;
@@ -746,6 +660,12 @@ __decorateClass$3([
746
660
  __decorateClass$3([
747
661
  property({ type: Number })
748
662
  ], PlayerEmbed.prototype, "aspectRatio", 2);
663
+ __decorateClass$3([
664
+ property({ type: String })
665
+ ], PlayerEmbed.prototype, "language", 2);
666
+ __decorateClass$3([
667
+ property({ type: String })
668
+ ], PlayerEmbed.prototype, "senderId", 2);
749
669
  __decorateClass$3([
750
670
  state()
751
671
  ], PlayerEmbed.prototype, "vouch", 2);
@@ -755,7 +675,6 @@ __decorateClass$3([
755
675
  PlayerEmbed = __decorateClass$3([
756
676
  customElement("vouch-embed-player")
757
677
  ], PlayerEmbed);
758
-
759
678
  var __defProp$2 = Object.defineProperty;
760
679
  var __getOwnPropDesc$2 = Object.getOwnPropertyDescriptor;
761
680
  var __decorateClass$2 = (decorators, target, key, kind) => {
@@ -763,8 +682,7 @@ var __decorateClass$2 = (decorators, target, key, kind) => {
763
682
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
764
683
  if (decorator = decorators[i])
765
684
  result = (kind ? decorator(target, key, result) : decorator(result)) || result;
766
- if (kind && result)
767
- __defProp$2(target, key, result);
685
+ if (kind && result) __defProp$2(target, key, result);
768
686
  return result;
769
687
  };
770
688
  let DialogOverlay = class extends LitElement {
@@ -884,7 +802,6 @@ __decorateClass$2([
884
802
  DialogOverlay = __decorateClass$2([
885
803
  customElement("vouch-embed-dialog-overlay")
886
804
  ], DialogOverlay);
887
-
888
805
  var __defProp$1 = Object.defineProperty;
889
806
  var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
890
807
  var __decorateClass$1 = (decorators, target, key, kind) => {
@@ -892,8 +809,7 @@ var __decorateClass$1 = (decorators, target, key, kind) => {
892
809
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
893
810
  if (decorator = decorators[i])
894
811
  result = (kind ? decorator(target, key, result) : decorator(result)) || result;
895
- if (kind && result)
896
- __defProp$1(target, key, result);
812
+ if (kind && result) __defProp$1(target, key, result);
897
813
  return result;
898
814
  };
899
815
  let DialogPortal = class extends LitElement {
@@ -909,22 +825,23 @@ let DialogPortal = class extends LitElement {
909
825
  this._mediaPlayerRef = createRef();
910
826
  this.open = false;
911
827
  this._handleToggle = ({ detail }) => {
828
+ var _a, _b, _c;
912
829
  if (this.id === detail) {
913
830
  this.open = !this.open;
914
831
  if (this.open) {
915
- if (!this.disableAutoplay && this._mediaPlayerRef?.value) {
832
+ if (!this.disableAutoplay && ((_a = this._mediaPlayerRef) == null ? void 0 : _a.value)) {
916
833
  this._mediaPlayerRef.value.muted = false;
917
834
  this._mediaPlayerRef.value.play();
918
835
  }
919
836
  } else {
920
- this._mediaPlayerRef?.value?.pause();
837
+ (_c = (_b = this._mediaPlayerRef) == null ? void 0 : _b.value) == null ? void 0 : _c.pause();
921
838
  }
922
839
  }
923
840
  };
924
- // We could do the same thing on close and check for the correct ID but it doesn't really matter
925
841
  this._handleClose = () => {
842
+ var _a, _b;
926
843
  this.open = false;
927
- this._mediaPlayerRef?.value?.pause();
844
+ (_b = (_a = this._mediaPlayerRef) == null ? void 0 : _a.value) == null ? void 0 : _b.pause();
928
845
  };
929
846
  this._handleDocumentKeyUp = (e) => {
930
847
  if (e.key === "Escape") {
@@ -1015,7 +932,6 @@ __decorateClass$1([
1015
932
  DialogPortal = __decorateClass$1([
1016
933
  customElement("vouch-embed-dialog-portal")
1017
934
  ], DialogPortal);
1018
-
1019
935
  var __defProp = Object.defineProperty;
1020
936
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
1021
937
  var __decorateClass = (decorators, target, key, kind) => {
@@ -1023,8 +939,7 @@ var __decorateClass = (decorators, target, key, kind) => {
1023
939
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
1024
940
  if (decorator = decorators[i])
1025
941
  result = (kind ? decorator(target, key, result) : decorator(result)) || result;
1026
- if (kind && result)
1027
- __defProp(target, key, result);
942
+ if (kind && result) __defProp(target, key, result);
1028
943
  return result;
1029
944
  };
1030
945
  let DialogEmbed = class extends LitElement {
@@ -1121,6 +1036,8 @@ __decorateClass([
1121
1036
  DialogEmbed = __decorateClass([
1122
1037
  customElement("vouch-embed-dialog")
1123
1038
  ], DialogEmbed);
1124
-
1125
- export { DialogEmbed, PlayerEmbed };
1039
+ export {
1040
+ DialogEmbed,
1041
+ PlayerEmbed
1042
+ };
1126
1043
  //# sourceMappingURL=embeds.js.map