@firstlook-uat/sdk 0.4.3 → 0.4.4

package/dist/firstlook.es.js

@@ -33,7 +33,7 @@ function R(c) {
     }
   };
 }
-function q() {
+function T() {
   return {
     userAgent: navigator.userAgent,
     platform: navigator.platform,
@@ -187,7 +187,7 @@ function F(c) {
     items: s
   };
 }
-class P {
+class O {
   constructor(e, t) {
     this.shadowRoot = e, this.callbacks = t, this.minimized = !1, this.timerInterval = null, this.startTime = 0, this.checklist = [], this.root = document.createElement("div"), this.root.className = "fl-quest-overlay", this.root.style.pointerEvents = "auto";
     for (const s of ["click", "mousedown", "mouseup", "pointerdown", "pointerup", "touchstart", "touchend"])
@@ -376,8 +376,8 @@ class P {
     this.timerInterval && (clearInterval(this.timerInterval), this.timerInterval = null);
   }
 }
-const z = 100, O = 2 * 1024 * 1024;
-class Q {
+const P = 100, z = 2 * 1024 * 1024;
+class B {
   constructor(e, t, s) {
     this.config = e, this.events = t, this.maskSelector = s, this.actionLogs = [], this.snapshots = [], this.snapshotTimer = null, this.startTime = 0, this.running = !1, this.handleClick = this.onClick.bind(this), this.handleScroll = this.throttle(this.onScroll.bind(this), 500), this.handleInput = this.onInput.bind(this);
   }
@@ -444,8 +444,8 @@ class Q {
       const s = e.querySelector("#firstlook-sdk-root");
       s == null || s.remove();
       const i = e.outerHTML;
-      if (i.length > O) return;
-      this.snapshots.length >= z && this.snapshots.shift(), this.snapshots.push({
+      if (i.length > z) return;
+      this.snapshots.length >= P && this.snapshots.shift(), this.snapshots.push({
         type: "dom-snapshot",
         timestamp: Date.now() - this.startTime,
         data: i
@@ -466,7 +466,7 @@ function w(c) {
   const e = c.tagName.toLowerCase(), t = c.id ? `#${c.id}` : "", s = c.className && typeof c.className == "string" ? `.${c.className.trim().split(/\s+/).slice(0, 2).join(".")}` : "", i = ((n = c.textContent) == null ? void 0 : n.trim().slice(0, 30)) || "";
   return `${e}${t}${s}${i ? ` "${i}"` : ""}`;
 }
-class B {
+class Q {
   constructor(e) {
     this.events = e, this.mediaRecorder = null, this.stream = null, this.chunks = [], this._recording = !1;
   }
@@ -716,10 +716,10 @@ class H {
     });
   }
 }
-const T = ["#e17055", "#6c5ce7", "#00b894", "#fdcb6e", "#ffffff"];
-class _ {
+const q = ["#e17055", "#6c5ce7", "#00b894", "#fdcb6e", "#ffffff"];
+class W {
   constructor(e) {
-    this.shadowRoot = e, this.overlay = null, this.canvas = null, this.ctx = null, this.drawing = !1, this.currentPath = [], this.paths = [], this.selectedColor = T[0], this.screenshotDataUrl = "";
+    this.shadowRoot = e, this.overlay = null, this.canvas = null, this.ctx = null, this.drawing = !1, this.currentPath = [], this.paths = [], this.selectedColor = q[0], this.screenshotDataUrl = "";
   }
   async open() {
     return this.screenshotDataUrl = await this.captureScreenshot(), new Promise((e) => {
@@ -731,7 +731,7 @@ class _ {
         type: "text",
         placeholder: "Add a comment..."
       }), i = r("div", { className: "fl-color-picker" });
-      for (const a of T) {
+      for (const a of q) {
         const h = r("div", { className: `fl-color-swatch ${a === this.selectedColor ? "fl-selected" : ""}` });
         h.style.background = a, h.onclick = () => {
           this.selectedColor = a, i.querySelectorAll(".fl-color-swatch").forEach((d) => d.classList.remove("fl-selected")), h.classList.add("fl-selected");
@@ -835,11 +835,11 @@ class _ {
     return ((e = this.canvas) == null ? void 0 : e.toDataURL("image/png")) || this.screenshotDataUrl;
   }
 }
-class W {
+class _ {
   constructor(e, t) {
     this.shadowRoot = e, this.events = t, this.annotations = [], this.active = !1, this.onKeydown = (s) => {
       s.ctrlKey && s.shiftKey && s.key === "R" && (s.preventDefault(), this.trigger());
-    }, this.annotationCanvas = new _(e);
+    }, this.annotationCanvas = new W(e);
   }
   start() {
     document.addEventListener("keydown", this.onKeydown);
@@ -937,7 +937,7 @@ class C {
 }
 const x = class x {
   constructor(e) {
-    this.onActivate = e, this.handler = null, this.sequence = [], this.sequenceTimer = null;
+    this.onActivate = e, this.handler = null, this.sequence = [], this.typeBuffer = "", this.sequenceTimer = null, this.typeTimer = null;
   }
   start() {
     this.handler = (e) => {
@@ -945,6 +945,15 @@ const x = class x {
         e.preventDefault(), this.onActivate();
         return;
       }
+      if (e.key.length === 1) {
+        if (this.typeBuffer += e.key, this.typeTimer && clearTimeout(this.typeTimer), this.typeTimer = setTimeout(() => {
+          this.typeBuffer = "";
+        }, 3e3), this.typeBuffer.endsWith(x.MAGIC_WORD)) {
+          this.typeBuffer = "", this.onActivate();
+          return;
+        }
+        this.typeBuffer.length > 20 && (this.typeBuffer = this.typeBuffer.slice(-12));
+      }
       if (e.key.startsWith("Arrow")) {
         this.sequence.push(e.key), this.sequenceTimer && clearTimeout(this.sequenceTimer), this.sequenceTimer = setTimeout(() => {
           this.sequence = [];
@@ -955,7 +964,7 @@ const x = class x {
     }, window.addEventListener("keydown", this.handler);
   }
   stop() {
-    this.handler && (window.removeEventListener("keydown", this.handler), this.handler = null), this.sequenceTimer && (clearTimeout(this.sequenceTimer), this.sequenceTimer = null);
+    this.handler && (window.removeEventListener("keydown", this.handler), this.handler = null), this.sequenceTimer && (clearTimeout(this.sequenceTimer), this.sequenceTimer = null), this.typeTimer && (clearTimeout(this.typeTimer), this.typeTimer = null);
   }
 };
 x.KONAMI = [
@@ -967,7 +976,7 @@ x.KONAMI = [
   "ArrowRight",
   "ArrowLeft",
   "ArrowRight"
-];
+], x.MAGIC_WORD = "1st/look.";
 let S = x;
 class X {
   constructor(e, t) {
@@ -1006,7 +1015,7 @@ class X {
     return this.root !== null;
   }
 }
-const Y = (
+const G = (
   /* css */
   `
   :host {
@@ -1507,7 +1516,7 @@ const Y = (
   }
   .fl-feedback-modal-actions { padding: 0 16px 16px; }
 `
-), G = 5;
+), Y = 5;
 class J {
   constructor() {
     this.config = null, this.events = new L(), this.state = "idle", this.hostElement = null, this.shadowRoot = null, this.questManager = null, this.questOverlay = null, this.sessionRecorder = null, this.voiceRecorder = null, this.watermark = null, this.fieldMasker = null, this.storage = null, this.issueReporter = null, this.debugMenu = null, this.tapTrigger = null, this.deepLinkTrigger = null, this.keyboardTrigger = null, this.sessionId = null, this.sessionStartTime = 0, this.maxDurationTimer = null, this.backupTimer = null, this.isFlushing = !1;
@@ -1543,11 +1552,11 @@ class J {
     var s;
     if (this.state !== "active")
       throw new Error("[FirstLook] Cannot start session: SDK not active. Call activate() first.");
-    (s = this.debugMenu) == null || s.hide(), this.sessionId = D(), this.sessionStartTime = Date.now(), this.questManager = new E(this.events), this.questManager.loadQuests(e), this.sessionRecorder = new Q(
+    (s = this.debugMenu) == null || s.hide(), this.sessionId = D(), this.sessionStartTime = Date.now(), this.questManager = new E(this.events), this.questManager.loadQuests(e), this.sessionRecorder = new B(
       this.config,
       this.events,
       this.fieldMasker.getCombinedSelector()
-    ), this.voiceRecorder = new B(this.events), this.issueReporter = new W(this.shadowRoot, this.events), this.issueReporter.start(), this.sessionRecorder.start(), this.fieldMasker.start(), this.config.recording.voice && await this.voiceRecorder.start(), this.config.security.watermark && (this.watermark = new U(this.shadowRoot, this.config), this.watermark.show()), this.questOverlay = new P(this.shadowRoot, {
+    ), this.voiceRecorder = new Q(this.events), this.issueReporter = new _(this.shadowRoot, this.events), this.issueReporter.start(), this.sessionRecorder.start(), this.fieldMasker.start(), this.config.recording.voice && await this.voiceRecorder.start(), this.config.security.watermark && (this.watermark = new U(this.shadowRoot, this.config), this.watermark.show()), this.questOverlay = new O(this.shadowRoot, {
       onOkWithFeedback: (i) => this.handleQuestOk(i),
       onConcern: (i) => this.handleConcern(i),
       onNg: () => this.handleQuestNg(),
@@ -1611,7 +1620,7 @@ class J {
       projectId: this.config.projectId,
       userId: this.config.userId,
       role: this.config.role,
-      deviceInfo: q(),
+      deviceInfo: T(),
       startedAt: new Date(this.sessionStartTime).toISOString(),
       endedAt: (/* @__PURE__ */ new Date()).toISOString(),
       duration: Math.floor((Date.now() - this.sessionStartTime) / 1e3),
@@ -1651,7 +1660,7 @@ class J {
     var t;
     (t = document.getElementById("firstlook-sdk-root")) == null || t.remove(), this.hostElement = document.createElement("div"), this.hostElement.id = "firstlook-sdk-root", this.hostElement.style.cssText = "position:fixed;inset:0;z-index:2147483647;pointer-events:none;", document.body.appendChild(this.hostElement), this.shadowRoot = this.hostElement.attachShadow({ mode: "closed" });
     const e = document.createElement("style");
-    e.textContent = Y, this.shadowRoot.appendChild(e);
+    e.textContent = G, this.shadowRoot.appendChild(e);
   }
   setupTriggers() {
     const e = this.config.triggers;
@@ -1742,7 +1751,7 @@ class J {
         }
         const t = await this.storage.getPendingUploads();
         for (const s of t) {
-          if (s.attempts >= G) {
+          if (s.attempts >= Y) {
             await this.storage.removeFromQueue(s.key);
             continue;
           }
@@ -1778,7 +1787,7 @@ class J {
           projectId: this.config.projectId,
           userId: this.config.userId,
           role: this.config.role,
-          deviceInfo: q(),
+          deviceInfo: T(),
           startedAt: new Date(this.sessionStartTime).toISOString(),
           duration: Math.floor((Date.now() - this.sessionStartTime) / 1e3),
           quests: ((e = this.questManager) == null ? void 0 : e.getResults()) ?? [],