@vouchfor/embeds 0.0.0-experiment.146014a → 0.0.0-experiment.14fd0e7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vouchfor/embeds",
-  "version": "0.0.0-experiment.146014a",
+  "version": "0.0.0-experiment.14fd0e7",
   "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.146014a",
+    "@vouchfor/media-player": "0.0.0-experiment.14fd0e7",
     "uuid": "^9.0.1"
   },
   "peerDependencies": {

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

@@ -242,19 +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._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();
+      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);
@@ -265,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;
   }