@vouchfor/embeds 0.0.0-experiment.51a4ad7 → 0.0.0-experiment.51c7ed5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vouchfor/embeds",
-  "version": "0.0.0-experiment.51a4ad7",
+  "version": "0.0.0-experiment.51c7ed5",
   "license": "MIT",
   "author": "Aaron Williams",
   "main": "dist/es/embeds.js",
@@ -43,8 +43,8 @@
   "dependencies": {
     "@a11y/focus-trap": "^1.0.5",
     "@lit/task": "^1.0.0",
-    "@vouchfor/canvas-video": "0.0.0-experiment.51a4ad7",
-    "@vouchfor/media-player": "0.0.0-experiment.51a4ad7",
+    "@vouchfor/canvas-video": "0.0.0-experiment.51c7ed5",
+    "@vouchfor/media-player": "0.0.0-experiment.51c7ed5",
     "uuid": "^9.0.1"
   },
   "peerDependencies": {
@@ -63,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.51a4ad7",
+    "@vouchfor/video-utils": "0.0.0-experiment.51c7ed5",
     "@web/dev-server-esbuild": "^1.0.2",
     "@web/test-runner": "^0.18.1",
     "@web/test-runner-browserstack": "^0.7.1",

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

@@ -147,9 +147,9 @@ class TrackingController implements ReactiveController {
   private _handleVideoTimeUpdate = ({ detail: { id, key, node } }: CustomEvent<VideoEventDetail>) => {
     if (
       // We only want to count any time that the video is actually playing
-      !this.host.paused
+      !this.host.paused &&
       // Only update the latest time if this event fires for the currently active video
-      // id === this.host.scene?.video?.id
+      id === this.host.scene?.video?.id
     ) {
       this._currentlyPlayingVideo = { id, key, node };
       this._streamLatestTime[key] = node.currentTime;

package/src/components/PlayerEmbed/index.ts

@@ -3,9 +3,8 @@ 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 type { TemplateInstance } from '@vouchfor/canvas-video';
+import type { Scene, Scenes, TemplateInstance } from '@vouchfor/canvas-video';
 import type { MediaPlayer, MediaPlayerProps } from '@vouchfor/media-player';
-import type { Vouch } from '@vouchfor/video-utils';
 import type { PropertyValueMap } from 'lit';
 import type { Environment } from '~/utils/env';
 
@@ -15,8 +14,10 @@ import { TrackingController } from './controllers/tracking';
 
 import '@vouchfor/media-player';
 
-type PlayerEmbedProps = Pick<MediaPlayerProps, 'aspectRatio' | 'language' | 'preload' | 'autoplay' | 'controls'> & {
-  data?: Vouch;
+type PlayerEmbedProps = Pick<
+  MediaPlayerProps,
+  'data' | 'aspectRatio' | 'language' | 'preload' | 'autoplay' | 'controls'
+> & {
   env: Environment;
   apiKey: string;
   disableTracking?: boolean;
@@ -161,17 +162,17 @@ class PlayerEmbed extends LitElement {
     return this._mediaPlayerRef.value?.muted ?? false;
   }
 
-  // get scene(): Scene | null {
-  //   return this._mediaPlayerRef.value?.scene ?? null;
-  // }
+  get scene(): Scene | null {
+    return this._mediaPlayerRef.value?.scene ?? null;
+  }
 
-  // get scenes(): Scene[] {
-  //   return this._mediaPlayerRef.value?.scenes ?? [];
-  // }
+  get scenes(): Scene[] {
+    return this._mediaPlayerRef.value?.scenes ?? [];
+  }
 
-  // get sceneConfig(): Scenes | null {
-  //   return this._mediaPlayerRef.value?.sceneConfig ?? null;
-  // }
+  get sceneConfig(): Scenes | null {
+    return this._mediaPlayerRef.value?.sceneConfig ?? null;
+  }
 
   get videoState() {
     return this._mediaPlayerRef.value?.videoState;
@@ -193,9 +194,9 @@ class PlayerEmbed extends LitElement {
     this._mediaPlayerRef.value?.reset(time, play);
   }
 
-  // setScene(index: number) {
-  //   this._mediaPlayerRef.value?.setScene(index);
-  // }
+  setScene(index: number) {
+    this._mediaPlayerRef.value?.setScene(index);
+  }
 
   private _renderStyles() {
     if (!this.aspectRatio) {
@@ -237,6 +238,8 @@ class PlayerEmbed 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)}

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

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