@vouchfor/embeds 0.0.0-experiment.d892f46 → 0.0.0-experiment.d8c5de1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vouchfor/embeds",
-  "version": "0.0.0-experiment.d892f46",
+  "version": "0.0.0-experiment.d8c5de1",
   "license": "MIT",
   "author": "Aaron Williams",
   "main": "dist/es/embeds.js",
@@ -36,7 +36,7 @@
   },
   "dependencies": {
     "@lit/task": "^1.0.0",
-    "@vouchfor/media-player": "0.0.0-experiment.d892f46",
+    "@vouchfor/media-player": "0.0.0-experiment.d8c5de1",
     "uuid": "^9.0.1"
   },
   "peerDependencies": {

package/src/components/Embed/Embed.stories.ts

@@ -22,6 +22,7 @@ const _Embed = ({ vouchId, templateId, preload, autoplay, env, apiKey, controls,
         ?autoplay=${autoplay}
         preload=${ifDefined(preload)}
         aspectRatio=${ifDefined(aspectRatio)}
+        @error=${console.log}
       ></vouch-embed>
     </div>
   `;

package/src/components/Embed/controllers/tracking.ts

@@ -142,7 +142,7 @@ class TrackingController implements ReactiveController {
     const { client, tab, request, visitor } = this._getUids();
 
     navigator.sendBeacon(
-      `${publicApiUrl}/api/events`,
+      `${publicApiUrl}/api/v2/events`,
       JSON.stringify({
         event,
         payload: {
@@ -174,6 +174,8 @@ class TrackingController implements ReactiveController {
           streamEnd: this._streamLatestTime[key]
         });
       }
+
+      // Make sure these events are only sent once by deleting the start and latest times
       delete this._streamStartTime[key];
       delete this._streamLatestTime[key];
     }
@@ -240,16 +242,30 @@ class TrackingController implements ReactiveController {
     delete this._streamLatestTime[key];
   };
 
+  private _pageUnloading = () => {
+    this._streamEnded();
+    // This will try to send the same stream event again so we delete the start and latest
+    // time in stream ended so that there is no times to send and the pause event does nothing
+    this.host.pause();
+  };
+
   private _handleVisibilityChange = () => {
     if (document.visibilityState === 'hidden') {
-      this.host.pause();
-      this._streamEnded();
+      this._pageUnloading();
     }
   };
 
+  private _handlePageHide = () => {
+    this._pageUnloading();
+  };
+
   hostConnected() {
     requestAnimationFrame(() => {
-      document.addEventListener('visibilitychange', this._handleVisibilityChange);
+      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);
@@ -260,7 +276,11 @@ class TrackingController implements ReactiveController {
 
   hostDisconnected() {
     this._streamEnded();
-    document.removeEventListener('visibilitychange', this._handleVisibilityChange);
+    if ('onvisibilitychange' in document) {
+      document.removeEventListener('visibilitychange', this._handleVisibilityChange);
+    } else {
+      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);

package/src/components/Embed/index.ts

@@ -3,7 +3,7 @@ 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 { Scene, TemplateInstance } from '@vouchfor/canvas-video';
+import type { Scene, Scenes, TemplateInstance } from '@vouchfor/canvas-video';
 import type { MediaPlayer, MediaPlayerProps } from '@vouchfor/media-player';
 import type { Ref } from 'lit/directives/ref.js';
 import type { Environment } from '~/utils/env';
@@ -149,6 +149,10 @@ class Embed extends LitElement {
     return this._mediaPlayerRef.value?.scenes ?? [];
   }
 
+  get sceneConfig(): Scenes | null {
+    return this._mediaPlayerRef.value?.sceneConfig ?? null;
+  }
+
   get videoState() {
     return this._mediaPlayerRef.value?.videoState;
   }