@vouchfor/embeds 0.0.0-experiment.88ebbc0 → 0.0.0-experiment.8b3403f

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vouchfor/embeds",
-  "version": "0.0.0-experiment.88ebbc0",
+  "version": "0.0.0-experiment.8b3403f",
   "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.88ebbc0",
+    "@vouchfor/media-player": "0.0.0-experiment.8b3403f",
     "uuid": "^9.0.1"
   },
   "peerDependencies": {

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

@@ -31,23 +31,48 @@ class FetcherController {
     return this._fetching;
   }
 
-  private async getVouch(env: Environment, apiKey: string, vouchId: string) {
+  private getVouch = async (env: Environment, apiKey: string, vouchId: string) => {
     const { embedApiUrl } = getEnvUrls(env);
 
-    return fetch(`${embedApiUrl}/vouches/${vouchId}`, {
+    const vouch = await fetch(`${embedApiUrl}/vouches/${vouchId}`, {
       method: 'GET',
       headers: [['X-Api-Key', apiKey]]
-    }).then((response) => response.json());
-  }
+    }).then((response) => {
+      this.host.dispatchEvent(new CustomEvent('vouch:loaded', { detail: vouchId }));
+      return response.json();
+    });
+
+    // HACK: trigger another fetch after we received the data to update the cache in the background
+    fetch(`${embedApiUrl}/vouches/${vouchId}`, {
+      method: 'GET',
+      headers: [
+        ['X-Api-Key', apiKey],
+        ['Cache-Control', 'max-age=0']
+      ]
+    });
+
+    return vouch;
+  };
 
-  private async getTemplate(env: Environment, apiKey: string, templateId: string) {
+  private getTemplate = async (env: Environment, apiKey: string, templateId: string) => {
     const { embedApiUrl } = getEnvUrls(env);
 
-    return fetch(`${embedApiUrl}/templates/${templateId}`, {
+    const template = await fetch(`${embedApiUrl}/templates/${templateId}`, {
       method: 'GET',
       headers: [['X-Api-Key', apiKey]]
     }).then((response) => response.json());
-  }
+
+    // HACK: trigger another fetch after we received the data to update the cache in the background
+    fetch(`${embedApiUrl}/templates/${templateId}`, {
+      method: 'GET',
+      headers: [
+        ['X-Api-Key', apiKey],
+        ['Cache-Control', 'max-age=0']
+      ]
+    });
+
+    return template;
+  };
 
   constructor(host: EmbedHost) {
     this.host = host;

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

@@ -116,7 +116,7 @@ class TrackingController implements ReactiveController {
     });
 
     return {
-      source: 'media_player',
+      source: this.host.trackingSource,
       time: new Date(),
       region,
       country,

package/src/components/Embed/index.ts

@@ -17,6 +17,7 @@ import '@vouchfor/media-player';
 type EmbedProps = Pick<MediaPlayerProps, 'data' | 'aspectRatio' | 'preload' | 'autoplay' | 'controls'> & {
   env: Environment;
   apiKey: string;
+  trackingSource?: string;
   vouchId?: string;
   templateId?: string;
 };
@@ -31,6 +32,7 @@ class Embed extends LitElement {
 
   @property({ type: String }) env: EmbedProps['env'] = 'prod';
   @property({ type: String }) apiKey: EmbedProps['apiKey'] = '';
+  @property({ type: String }) trackingSource: EmbedProps['trackingSource'] = 'embed';
 
   @property({ type: Array }) controls: EmbedProps['controls'];
   @property({ type: String }) preload: EmbedProps['preload'] = 'auto';