@vouchfor/embeds 0.0.0-experiment.4eb5f06 → 0.0.0-experiment.526750e

package/dist/es/components/Embed/controllers/tracking.d.ts

@@ -9,8 +9,9 @@ declare class TrackingController implements ReactiveController {
     private _hasPlayed;
     private _hasLoaded;
     private _answersViewed;
-    private _streamedTime;
+    private _streamStartTime;
     private _streamLatestTime;
+    private _currentlyPlayingVideo;
     constructor(host: EmbedHost);
     private _findVouchId;
     private _createVisitor;

package/dist/es/embeds.js

@@ -78,7 +78,7 @@ const { is: pe, defineProperty: ue, getOwnPropertyDescriptor: _e, getOwnProperty
   return e;
 } }, qt = (r, t) => !pe(r, t), At = { attribute: !0, type: String, converter: dt, reflect: !1, hasChanged: qt };
 Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), E.litPropertyMetadata ?? (E.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
-let M = class extends HTMLElement {
+let L = class extends HTMLElement {
   static addInitializer(t) {
     this._$Ei(), (this.l ?? (this.l = [])).push(t);
   }
@@ -289,14 +289,14 @@ let M = class extends HTMLElement {
   firstUpdated(t) {
   }
 };
-M.elementStyles = [], M.shadowRootOptions = { mode: "open" }, M[I("elementProperties")] = /* @__PURE__ */ new Map(), M[I("finalized")] = /* @__PURE__ */ new Map(), rt == null || rt({ ReactiveElement: M }), (E.reactiveElementVersions ?? (E.reactiveElementVersions = [])).push("2.0.2");
+L.elementStyles = [], L.shadowRootOptions = { mode: "open" }, L[I("elementProperties")] = /* @__PURE__ */ new Map(), L[I("finalized")] = /* @__PURE__ */ new Map(), rt == null || rt({ ReactiveElement: L }), (E.reactiveElementVersions ?? (E.reactiveElementVersions = [])).push("2.0.2");
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
 const V = globalThis, Y = V.trustedTypes, Et = Y ? Y.createPolicy("lit-html", { createHTML: (r) => r }) : void 0, Xt = "$lit$", y = `lit$${(Math.random() + "").slice(9)}$`, Kt = "?" + y, ve = `<${Kt}>`, U = document, Q = () => U.createComment(""), B = (r) => r === null || typeof r != "object" && typeof r != "function", Jt = Array.isArray, ye = (r) => Jt(r) || typeof (r == null ? void 0 : r[Symbol.iterator]) == "function", nt = `[ 	
-\f\r]`, L = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, bt = /-->/g, St = />/g, S = RegExp(`>|${nt}(?:([^\\s"'>=/]+)(${nt}*=${nt}*(?:[^ 	
+\f\r]`, M = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, St = /-->/g, bt = />/g, b = RegExp(`>|${nt}(?:([^\\s"'>=/]+)(${nt}*=${nt}*(?:[^ 	
 \f\r"'\`<>=]|("|')|))|$)`, "g"), wt = /'/g, Pt = /"/g, Ft = /^(?:script|style|textarea|title)$/i, W = Symbol.for("lit-noChange"), _ = Symbol.for("lit-nothing"), Ct = /* @__PURE__ */ new WeakMap(), C = U.createTreeWalker(U, 129);
 function Gt(r, t) {
   if (!Array.isArray(r) || !r.hasOwnProperty("raw"))
@@ -305,14 +305,14 @@ function Gt(r, t) {
 }
 const Ae = (r, t) => {
   const e = r.length - 1, i = [];
-  let s, n = t === 2 ? "<svg>" : "", o = L;
+  let s, n = t === 2 ? "<svg>" : "", o = M;
   for (let a = 0; a < e; a++) {
     const h = r[a];
     let c, d, l = -1, p = 0;
     for (; p < h.length && (o.lastIndex = p, d = o.exec(h), d !== null); )
-      p = o.lastIndex, o === L ? d[1] === "!--" ? o = bt : d[1] !== void 0 ? o = St : d[2] !== void 0 ? (Ft.test(d[2]) && (s = RegExp("</" + d[2], "g")), o = S) : d[3] !== void 0 && (o = S) : o === S ? d[0] === ">" ? (o = s ?? L, l = -1) : d[1] === void 0 ? l = -2 : (l = o.lastIndex - d[2].length, c = d[1], o = d[3] === void 0 ? S : d[3] === '"' ? Pt : wt) : o === Pt || o === wt ? o = S : o === bt || o === St ? o = L : (o = S, s = void 0);
-    const u = o === S && r[a + 1].startsWith("/>") ? " " : "";
-    n += o === L ? h + ve : l >= 0 ? (i.push(c), h.slice(0, l) + Xt + h.slice(l) + y + u) : h + y + (l === -2 ? a : u);
+      p = o.lastIndex, o === M ? d[1] === "!--" ? o = St : d[1] !== void 0 ? o = bt : d[2] !== void 0 ? (Ft.test(d[2]) && (s = RegExp("</" + d[2], "g")), o = b) : d[3] !== void 0 && (o = b) : o === b ? d[0] === ">" ? (o = s ?? M, l = -1) : d[1] === void 0 ? l = -2 : (l = o.lastIndex - d[2].length, c = d[1], o = d[3] === void 0 ? b : d[3] === '"' ? Pt : wt) : o === Pt || o === wt ? o = b : o === St || o === bt ? o = M : (o = b, s = void 0);
+    const u = o === b && r[a + 1].startsWith("/>") ? " " : "";
+    n += o === M ? h + ve : l >= 0 ? (i.push(c), h.slice(0, l) + Xt + h.slice(l) + y + u) : h + y + (l === -2 ? a : u);
   }
   return [Gt(r, n + (r[e] || "<?>") + (t === 2 ? "</svg>" : "")), i];
 };
@@ -332,7 +332,7 @@ let pt = class Zt {
           for (const l of s.getAttributeNames())
             if (l.endsWith(Xt)) {
               const p = d[o++], u = s.getAttribute(l).split(y), g = /([.?@])?(.*)/.exec(p);
-              h.push({ type: 1, index: n, name: g[2], strings: u, ctor: g[1] === "." ? be : g[1] === "?" ? Se : g[1] === "@" ? we : it }), s.removeAttribute(l);
+              h.push({ type: 1, index: n, name: g[2], strings: u, ctor: g[1] === "." ? Se : g[1] === "?" ? be : g[1] === "@" ? we : it }), s.removeAttribute(l);
             } else
               l.startsWith(y) && (h.push({ type: 6, index: n }), s.removeAttribute(l));
         if (Ft.test(s.tagName)) {
@@ -486,14 +486,14 @@ let Ee = class {
   O(t) {
     t === _ ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, t ?? "");
   }
-}, be = class extends it {
+}, Se = class extends it {
   constructor() {
     super(...arguments), this.type = 3;
   }
   O(t) {
     this.element[this.name] = t === _ ? void 0 : t;
   }
-}, Se = class extends it {
+}, be = class extends it {
   constructor() {
     super(...arguments), this.type = 4;
   }
@@ -571,10 +571,10 @@ const Te = (r) => new Ce(typeof r == "string" ? r : r + "", void 0, te), Ue = (r
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const { is: Re, defineProperty: xe, getOwnPropertyDescriptor: He, getOwnPropertyNames: Oe, getOwnPropertySymbols: Ne, getPrototypeOf: Me } = Object, b = globalThis, Rt = b.trustedTypes, Le = Rt ? Rt.emptyScript : "", ht = b.reactiveElementPolyfillSupport, D = (r, t) => r, ut = { toAttribute(r, t) {
+const { is: Re, defineProperty: xe, getOwnPropertyDescriptor: He, getOwnPropertyNames: Oe, getOwnPropertySymbols: Ne, getPrototypeOf: Le } = Object, S = globalThis, Rt = S.trustedTypes, Me = Rt ? Rt.emptyScript : "", ht = S.reactiveElementPolyfillSupport, D = (r, t) => r, ut = { toAttribute(r, t) {
   switch (t) {
     case Boolean:
-      r = r ? Le : null;
+      r = r ? Me : null;
       break;
     case Object:
     case Array:
@@ -600,7 +600,7 @@ const { is: Re, defineProperty: xe, getOwnPropertyDescriptor: He, getOwnProperty
   }
   return e;
 } }, ee = (r, t) => !Re(r, t), xt = { attribute: !0, type: String, converter: ut, reflect: !1, hasChanged: ee };
-Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), b.litPropertyMetadata ?? (b.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
+Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), S.litPropertyMetadata ?? (S.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
 class x extends HTMLElement {
   static addInitializer(t) {
     this._$Ei(), (this.l ?? (this.l = [])).push(t);
@@ -633,7 +633,7 @@ class x extends HTMLElement {
   static _$Ei() {
     if (this.hasOwnProperty(D("elementProperties")))
       return;
-    const t = Me(this);
+    const t = Le(this);
     t.finalize(), t.l !== void 0 && (this.l = [...t.l]), this.elementProperties = new Map(t.elementProperties);
   }
   static finalize() {
@@ -812,7 +812,7 @@ class x extends HTMLElement {
   firstUpdated(t) {
   }
 }
-x.elementStyles = [], x.shadowRootOptions = { mode: "open" }, x[D("elementProperties")] = /* @__PURE__ */ new Map(), x[D("finalized")] = /* @__PURE__ */ new Map(), ht == null || ht({ ReactiveElement: x }), (b.reactiveElementVersions ?? (b.reactiveElementVersions = [])).push("2.0.2");
+x.elementStyles = [], x.shadowRootOptions = { mode: "open" }, x[D("elementProperties")] = /* @__PURE__ */ new Map(), x[D("finalized")] = /* @__PURE__ */ new Map(), ht == null || ht({ ReactiveElement: x }), (S.reactiveElementVersions ?? (S.reactiveElementVersions = [])).push("2.0.2");
 /**
  * @license
  * Copyright 2017 Google LLC
@@ -820,7 +820,7 @@ x.elementStyles = [], x.shadowRootOptions = { mode: "open" }, x[D("elementProper
  */
 const z = globalThis, tt = z.trustedTypes, Ht = tt ? tt.createPolicy("lit-html", { createHTML: (r) => r }) : void 0, ie = "$lit$", A = `lit$${(Math.random() + "").slice(9)}$`, se = "?" + A, ke = `<${se}>`, R = document, q = () => R.createComment(""), X = (r) => r === null || typeof r != "object" && typeof r != "function", re = Array.isArray, Ie = (r) => re(r) || typeof (r == null ? void 0 : r[Symbol.iterator]) == "function", at = `[ 	
 \f\r]`, k = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, Ot = /-->/g, Nt = />/g, w = RegExp(`>|${at}(?:([^\\s"'>=/]+)(${at}*=${at}*(?:[^ 	
-\f\r"'\`<>=]|("|')|))|$)`, "g"), Mt = /'/g, Lt = /"/g, ne = /^(?:script|style|textarea|title)$/i, Ve = (r) => (t, ...e) => ({ _$litType$: r, strings: t, values: e }), De = Ve(1), O = Symbol.for("lit-noChange"), $ = Symbol.for("lit-nothing"), kt = /* @__PURE__ */ new WeakMap(), T = R.createTreeWalker(R, 129);
+\f\r"'\`<>=]|("|')|))|$)`, "g"), Lt = /'/g, Mt = /"/g, ne = /^(?:script|style|textarea|title)$/i, Ve = (r) => (t, ...e) => ({ _$litType$: r, strings: t, values: e }), De = Ve(1), O = Symbol.for("lit-noChange"), $ = Symbol.for("lit-nothing"), kt = /* @__PURE__ */ new WeakMap(), T = R.createTreeWalker(R, 129);
 function oe(r, t) {
   if (!Array.isArray(r) || !r.hasOwnProperty("raw"))
     throw Error("invalid template strings array");
@@ -833,7 +833,7 @@ const ze = (r, t) => {
     const h = r[a];
     let c, d, l = -1, p = 0;
     for (; p < h.length && (o.lastIndex = p, d = o.exec(h), d !== null); )
-      p = o.lastIndex, o === k ? d[1] === "!--" ? o = Ot : d[1] !== void 0 ? o = Nt : d[2] !== void 0 ? (ne.test(d[2]) && (s = RegExp("</" + d[2], "g")), o = w) : d[3] !== void 0 && (o = w) : o === w ? d[0] === ">" ? (o = s ?? k, l = -1) : d[1] === void 0 ? l = -2 : (l = o.lastIndex - d[2].length, c = d[1], o = d[3] === void 0 ? w : d[3] === '"' ? Lt : Mt) : o === Lt || o === Mt ? o = w : o === Ot || o === Nt ? o = k : (o = w, s = void 0);
+      p = o.lastIndex, o === k ? d[1] === "!--" ? o = Ot : d[1] !== void 0 ? o = Nt : d[2] !== void 0 ? (ne.test(d[2]) && (s = RegExp("</" + d[2], "g")), o = w) : d[3] !== void 0 && (o = w) : o === w ? d[0] === ">" ? (o = s ?? k, l = -1) : d[1] === void 0 ? l = -2 : (l = o.lastIndex - d[2].length, c = d[1], o = d[3] === void 0 ? w : d[3] === '"' ? Mt : Lt) : o === Mt || o === Lt ? o = w : o === Ot || o === Nt ? o = k : (o = w, s = void 0);
     const u = o === w && r[a + 1].startsWith("/>") ? " " : "";
     n += o === k ? h + ke : l >= 0 ? (i.push(c), h.slice(0, l) + ie + h.slice(l) + A + u) : h + A + (l === -2 ? a : u);
   }
@@ -1168,9 +1168,7 @@ class ri {
           ["X-Cache-Check", o]
         ]
       }), h = await a.json();
-      this.host.dispatchEvent(new CustomEvent("vouch:loaded", { detail: s }));
-      const c = (d = a == null ? void 0 : a.headers) == null ? void 0 : d.get("X-Cache-Check");
-      return c && c !== o && fetch(`${n}/vouches/${s}`, {
+      return this.host.dispatchEvent(new CustomEvent("vouch:loaded", { detail: s })), ((d = a == null ? void 0 : a.headers) == null ? void 0 : d.get("X-Cache-Check")) !== o && fetch(`${n}/vouches/${s}`, {
         method: "GET",
         headers: [
           ["X-Api-Key", i],
@@ -1185,8 +1183,8 @@ class ri {
           ["X-Api-Key", i],
           ["X-Cache-Check", o]
         ]
-      }), h = await a.json(), c = (d = a == null ? void 0 : a.headers) == null ? void 0 : d.get("X-Cache-Check");
-      return c && c !== o && fetch(`${n}/templates/${s}`, {
+      }), h = await a.json();
+      return ((d = a == null ? void 0 : a.headers) == null ? void 0 : d.get("X-Cache-Check")) !== o && fetch(`${n}/templates/${s}`, {
         method: "GET",
         headers: [
           ["X-Api-Key", i],
@@ -1226,7 +1224,7 @@ class ri {
 const ni = 10;
 class oi {
   constructor(t) {
-    this._tabId = void 0, this._clientId = void 0, this._visitorId = void 0, this._hasPlayed = !1, this._hasLoaded = {}, this._answersViewed = {}, this._streamedTime = {}, this._streamLatestTime = {}, this._createVisitor = (e) => {
+    this._tabId = void 0, this._clientId = void 0, this._visitorId = void 0, this._hasPlayed = !1, this._hasLoaded = {}, this._answersViewed = {}, this._streamStartTime = {}, this._streamLatestTime = {}, this._currentlyPlayingVideo = null, this._createVisitor = (e) => {
       var s, n;
       const { publicApiUrl: i } = et(this.host.env);
       return (n = (s = window.localStorage) == null ? void 0 : s.setItem) == null || n.call(s, "vouch-uid-visitor", e), navigator.sendBeacon(`${i}/api/visitor`, JSON.stringify({ visitorId: e })), e;
@@ -1250,56 +1248,48 @@ class oi {
         ...s
       };
     }, this._sendTrackingEvent = (e, i) => {
-      const { publicApiUrl: s } = et(this.host.env), { client: n, tab: o, request: a, visitor: h } = this._getUids();
-      this.host.disableTracking || navigator.sendBeacon(
-        `${s}/api/events`,
+      if (!this._findVouchId() || this.host.disableTracking)
+        return;
+      const { publicApiUrl: n } = et(this.host.env), { client: o, tab: a, request: h, visitor: c } = this._getUids();
+      navigator.sendBeacon(
+        `${n}/api/events`,
         JSON.stringify({
           event: e,
           payload: i,
           context: {
-            "x-uid-client": n,
-            "x-uid-tab": o,
-            "x-uid-request": a,
-            "x-uid-visitor": h,
+            "x-uid-client": o,
+            "x-uid-tab": a,
+            "x-uid-request": h,
+            "x-uid-visitor": c,
             "x-reporting-metadata": this._getReportingMetadata()
           }
         })
       );
     }, this._handleVouchLoaded = ({ detail: e }) => {
-      e && (this._hasLoaded[e] || (this._sendTrackingEvent("VOUCH_LOADED", {
-        vouchId: e
-      }), this._hasLoaded[e] = !0));
+      e && (this._hasLoaded[e] || (this._sendTrackingEvent("VOUCH_LOADED"), this._hasLoaded[e] = !0));
     }, this._handlePlay = () => {
-      const e = this._findVouchId();
-      e && (this._hasPlayed || (this._sendTrackingEvent("VIDEO_PLAYED", {
-        vouchId: e,
+      this._hasPlayed || (this._sendTrackingEvent("VIDEO_PLAYED", {
         streamStart: this.host.currentTime
-      }), this._hasPlayed = !0));
+      }), this._hasPlayed = !0);
     }, this._handleVideoPlay = ({ detail: { id: e, key: i, node: s } }) => {
-      const n = this._findVouchId();
-      n && (this._answersViewed[i] || (this._sendTrackingEvent("VOUCH_RESPONSE_VIEWED", {
-        vouchId: n,
+      this._answersViewed[i] || (this._sendTrackingEvent("VOUCH_RESPONSE_VIEWED", {
         answerId: e
-      }), this._answersViewed[i] = !0), this._streamedTime[i] = s.currentTime, this._streamLatestTime[i] = s.currentTime);
+      }), this._answersViewed[i] = !0), this._streamStartTime[i] = s.currentTime, this._streamLatestTime[i] = s.currentTime;
     }, this._handleVideoTimeUpdate = ({ detail: { id: e, key: i, node: s } }) => {
-      var o, a;
-      const n = this._findVouchId();
-      n && (s.currentTime && !s.paused && !this.host.paused && // Only fire the video seeked event when this video is the active one
-      e === ((a = (o = this.host.scene) == null ? void 0 : o.video) == null ? void 0 : a.id) && // Throttle the frequency that we send streamed events while playing
-      s.currentTime - this._streamedTime[i] > ni && (this._sendTrackingEvent("VIDEO_STREAMED", {
-        vouchId: n,
+      var n, o;
+      this.host.paused || (this._currentlyPlayingVideo = { id: e, key: i, node: s }, this._streamLatestTime[i] = s.currentTime), !s.paused && !this.host.paused && // Only fire the video seeked event when this video is the active one
+      e === ((o = (n = this.host.scene) == null ? void 0 : n.video) == null ? void 0 : o.id) && // Throttle the frequency that we send streamed events while playing
+      this._streamLatestTime[i] - this._streamStartTime[i] > ni && (this._sendTrackingEvent("VIDEO_STREAMED", {
         answerId: e,
-        streamStart: this._streamedTime[i],
-        streamEnd: s.currentTime
-      }), this._streamedTime[i] = s.currentTime), this.host.paused || (this._streamLatestTime[i] = s.currentTime));
+        streamStart: this._streamStartTime[i],
+        streamEnd: this._streamLatestTime[i]
+      }), this._streamStartTime[i] = s.currentTime);
     }, this._handleVideoPause = ({ detail: { id: e, key: i } }) => {
-      const s = this._findVouchId();
-      s && (this._streamLatestTime[i] > this._streamedTime[i] + 0.5 && this._sendTrackingEvent("VIDEO_STREAMED", {
-        vouchId: s,
+      this._streamLatestTime[i] > this._streamStartTime[i] && this._sendTrackingEvent("VIDEO_STREAMED", {
         answerId: e,
-        streamStart: this._streamedTime[i],
+        streamStart: this._streamStartTime[i],
         streamEnd: this._streamLatestTime[i]
-      }), delete this._streamedTime[i], delete this._streamLatestTime[i]);
+      }), this._currentlyPlayingVideo = null, delete this._streamStartTime[i], delete this._streamLatestTime[i];
     }, this.host = t, t.addController(this);
   }
   _findVouchId() {
@@ -1330,6 +1320,14 @@ class oi {
   }
   hostDisconnected() {
     var t, e, i, s;
+    if (this._currentlyPlayingVideo) {
+      const { id: n, key: o } = this._currentlyPlayingVideo;
+      this._streamLatestTime[o] > this._streamStartTime[o] && this._sendTrackingEvent("VIDEO_STREAMED", {
+        answerId: n,
+        streamStart: this._streamStartTime[o],
+        streamEnd: this._streamLatestTime[o]
+      });
+    }
     this.host.removeEventListener("vouch:loaded", this._handleVouchLoaded), (t = this.host.mediaPlayer) == null || t.removeEventListener("play", this._handlePlay), (e = this.host.mediaPlayer) == null || e.removeEventListener("video:play", this._handleVideoPlay), (i = this.host.mediaPlayer) == null || i.removeEventListener("video:pause", this._handleVideoPause), (s = this.host.mediaPlayer) == null || s.removeEventListener("video:timeupdate", this._handleVideoTimeUpdate);
   }
 }