@qaiddev/thumbs-embed 1.0.15 → 1.0.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -0
- package/dist/embed.d.ts +6 -0
- package/dist/modal-positioning.d.ts +27 -0
- package/dist/network-capture.d.ts +8 -0
- package/dist/qaid.js +197 -198
- package/dist/qaid.js.map +1 -1
- package/dist/qaid.umd.cjs +5 -5
- package/dist/qaid.umd.cjs.map +1 -1
- package/package.json +4 -2
package/dist/qaid.js
CHANGED
|
@@ -16,7 +16,7 @@ const st = "button.qaid-btn{width:var(--qaid-btn-size);height:var(--qaid-btn-siz
|
|
|
16
16
|
large: 32
|
|
17
17
|
};
|
|
18
18
|
function dt(e, t, i) {
|
|
19
|
-
const [o, n, s] = [e, t, i].map((
|
|
19
|
+
const [o, n, s] = [e, t, i].map((a) => (a = a / 255, a <= 0.03928 ? a / 12.92 : Math.pow((a + 0.055) / 1.055, 2.4)));
|
|
20
20
|
return 0.2126 * o + 0.7152 * n + 0.0722 * s;
|
|
21
21
|
}
|
|
22
22
|
function ct(e) {
|
|
@@ -46,21 +46,21 @@ function ht(e = {}) {
|
|
|
46
46
|
markerColor: o = "#6366f1",
|
|
47
47
|
buttonSize: n = "medium",
|
|
48
48
|
modalWidth: s = 400,
|
|
49
|
-
backdropOpacity:
|
|
50
|
-
fontFamily:
|
|
51
|
-
fontSize:
|
|
52
|
-
} = e,
|
|
49
|
+
backdropOpacity: a = 0.3,
|
|
50
|
+
fontFamily: c = "system-ui, -apple-system, sans-serif",
|
|
51
|
+
fontSize: l = 16
|
|
52
|
+
} = e, r = at[n], d = rt[n], h = lt(o);
|
|
53
53
|
return {
|
|
54
54
|
"--qaid-positive": t,
|
|
55
55
|
"--qaid-negative": i,
|
|
56
56
|
"--qaid-marker": o,
|
|
57
57
|
"--qaid-marker-text": h,
|
|
58
|
-
"--qaid-btn-size": `${
|
|
59
|
-
"--qaid-icon-size": `${
|
|
58
|
+
"--qaid-btn-size": `${r}px`,
|
|
59
|
+
"--qaid-icon-size": `${d}px`,
|
|
60
60
|
"--qaid-modal-width": `${s}px`,
|
|
61
|
-
"--qaid-backdrop-opacity": String(
|
|
62
|
-
"--qaid-font-family":
|
|
63
|
-
"--qaid-font-size": `${
|
|
61
|
+
"--qaid-backdrop-opacity": String(a),
|
|
62
|
+
"--qaid-font-family": c,
|
|
63
|
+
"--qaid-font-size": `${l}px`
|
|
64
64
|
};
|
|
65
65
|
}
|
|
66
66
|
function ut(e, t) {
|
|
@@ -76,10 +76,7 @@ function pt() {
|
|
|
76
76
|
e.id = "qaid-styles", e.textContent = nt, document.head.appendChild(e);
|
|
77
77
|
}
|
|
78
78
|
function mt() {
|
|
79
|
-
|
|
80
|
-
const e = document.getElementById("qaid-styles");
|
|
81
|
-
e && e.remove();
|
|
82
|
-
}
|
|
79
|
+
w <= 0 || (w--, w === 0 && document.getElementById("qaid-styles").remove());
|
|
83
80
|
}
|
|
84
81
|
const ft = ["data-comp", "data-qa", "data-testid", "data-id"];
|
|
85
82
|
function U(e, t = document.body) {
|
|
@@ -94,11 +91,11 @@ function U(e, t = document.body) {
|
|
|
94
91
|
}
|
|
95
92
|
return null;
|
|
96
93
|
}
|
|
97
|
-
function
|
|
94
|
+
function gt(e, t = 100) {
|
|
98
95
|
const i = e.textContent?.trim().slice(0, t) || "";
|
|
99
96
|
return i.length === t ? i + "..." : i;
|
|
100
97
|
}
|
|
101
|
-
function
|
|
98
|
+
function bt(e) {
|
|
102
99
|
let t = 1, i = e.previousElementSibling;
|
|
103
100
|
for (; i; )
|
|
104
101
|
t++, i = i.previousElementSibling;
|
|
@@ -108,7 +105,7 @@ function vt(e) {
|
|
|
108
105
|
const t = [];
|
|
109
106
|
let i = e;
|
|
110
107
|
for (; i && i !== document.body && i !== document.documentElement; ) {
|
|
111
|
-
const o = i.tagName.toLowerCase(), n =
|
|
108
|
+
const o = i.tagName.toLowerCase(), n = bt(i);
|
|
112
109
|
t.unshift(`${o}:nth-child(${n})`), i = i.parentElement;
|
|
113
110
|
}
|
|
114
111
|
return t.length > 0 ? `body > ${t.join(" > ")}` : "body";
|
|
@@ -121,10 +118,10 @@ function wt(e) {
|
|
|
121
118
|
return t ? `[${t}]` : e.id ? `#${yt(e.id)}` : vt(e);
|
|
122
119
|
}
|
|
123
120
|
function xt(e) {
|
|
124
|
-
const t =
|
|
121
|
+
const t = gt(e), i = U(e);
|
|
125
122
|
return { selector: wt(e), text: t, dataAttr: i };
|
|
126
123
|
}
|
|
127
|
-
const
|
|
124
|
+
const X = {
|
|
128
125
|
width: 400,
|
|
129
126
|
height: 280,
|
|
130
127
|
arrowHeight: 12,
|
|
@@ -132,8 +129,8 @@ const W = {
|
|
|
132
129
|
viewportPadding: 16
|
|
133
130
|
};
|
|
134
131
|
function qt(e, t, i, o, n) {
|
|
135
|
-
const s = e.y,
|
|
136
|
-
if (
|
|
132
|
+
const s = e.y, a = t - (e.y + e.height);
|
|
133
|
+
if (a >= i + o)
|
|
137
134
|
return {
|
|
138
135
|
top: e.y + e.height + o,
|
|
139
136
|
position: "below"
|
|
@@ -143,29 +140,29 @@ function qt(e, t, i, o, n) {
|
|
|
143
140
|
top: e.y - i - o,
|
|
144
141
|
position: "above"
|
|
145
142
|
};
|
|
146
|
-
const
|
|
147
|
-
let
|
|
148
|
-
return
|
|
143
|
+
const c = a > s ? "below" : "above";
|
|
144
|
+
let l;
|
|
145
|
+
return c === "below" ? l = Math.min(
|
|
149
146
|
e.y + e.height + o,
|
|
150
147
|
t - i - n
|
|
151
|
-
) :
|
|
148
|
+
) : l = Math.max(n, e.y - i - o), { top: l, position: c };
|
|
152
149
|
}
|
|
153
150
|
function kt(e, t, i, o) {
|
|
154
151
|
let s = e.x + e.width / 2 - i / 2;
|
|
155
152
|
return s = Math.max(o, Math.min(s, t - i - o)), s;
|
|
156
153
|
}
|
|
157
154
|
function Ct(e, t, i, o = 24, n = 24) {
|
|
158
|
-
const
|
|
159
|
-
return Math.max(o, Math.min(
|
|
155
|
+
const a = e.clickX - t - n / 2;
|
|
156
|
+
return Math.max(o, Math.min(a, i - o - n / 2));
|
|
160
157
|
}
|
|
161
|
-
function St(e, t, i, o =
|
|
158
|
+
function St(e, t, i, o = X) {
|
|
162
159
|
const n = o.height + o.arrowHeight, s = qt(
|
|
163
160
|
e,
|
|
164
161
|
i,
|
|
165
162
|
n,
|
|
166
163
|
o.gap,
|
|
167
164
|
o.viewportPadding
|
|
168
|
-
),
|
|
165
|
+
), a = kt(
|
|
169
166
|
e,
|
|
170
167
|
t,
|
|
171
168
|
o.width,
|
|
@@ -173,11 +170,18 @@ function St(e, t, i, o = W) {
|
|
|
173
170
|
);
|
|
174
171
|
return {
|
|
175
172
|
top: s.top,
|
|
176
|
-
left:
|
|
173
|
+
left: a,
|
|
177
174
|
position: s.position
|
|
178
175
|
};
|
|
179
176
|
}
|
|
180
|
-
function Et(e, t, i, o =
|
|
177
|
+
function Et(e, t, i, o = {}) {
|
|
178
|
+
const n = o.gap ?? 8;
|
|
179
|
+
let s = e.bottom + n;
|
|
180
|
+
s + t.height > i.height - n && (s = e.top - t.height - n);
|
|
181
|
+
let a = e.left;
|
|
182
|
+
return a < n ? a = n : a + t.width > i.width - n && (a = i.width - t.width - n), s < n ? s = n : s + t.height > i.height - n && (s = i.height - t.height - n), { top: s, left: a };
|
|
183
|
+
}
|
|
184
|
+
function Tt(e, t, i, o = X) {
|
|
181
185
|
const n = St(e, t, i, o), s = Ct(
|
|
182
186
|
e,
|
|
183
187
|
n.left,
|
|
@@ -188,22 +192,22 @@ function Et(e, t, i, o = W) {
|
|
|
188
192
|
arrow: { left: s }
|
|
189
193
|
};
|
|
190
194
|
}
|
|
191
|
-
const
|
|
192
|
-
function
|
|
193
|
-
const t = [], i = console.error, o = console.warn, n = console.log, s = (
|
|
194
|
-
const
|
|
195
|
-
message:
|
|
195
|
+
const It = 20;
|
|
196
|
+
function Lt(e) {
|
|
197
|
+
const t = [], i = console.error, o = console.warn, n = console.log, s = (a, c) => {
|
|
198
|
+
const l = {
|
|
199
|
+
message: c.map((r) => String(r)).join(" "),
|
|
196
200
|
timestamp: Date.now(),
|
|
197
|
-
level:
|
|
201
|
+
level: a
|
|
198
202
|
};
|
|
199
|
-
t.length >=
|
|
203
|
+
t.length >= It && t.shift(), t.push(l), e && e(l);
|
|
200
204
|
};
|
|
201
|
-
return console.error = function(...
|
|
202
|
-
s("error",
|
|
203
|
-
}, console.warn = function(...
|
|
204
|
-
s("warn",
|
|
205
|
-
}, console.log = function(...
|
|
206
|
-
s("log",
|
|
205
|
+
return console.error = function(...a) {
|
|
206
|
+
s("error", a), i.apply(console, a);
|
|
207
|
+
}, console.warn = function(...a) {
|
|
208
|
+
s("warn", a), o.apply(console, a);
|
|
209
|
+
}, console.log = function(...a) {
|
|
210
|
+
s("log", a), n.apply(console, a);
|
|
207
211
|
}, {
|
|
208
212
|
errors: t,
|
|
209
213
|
restore: () => {
|
|
@@ -211,16 +215,15 @@ function It(e) {
|
|
|
211
215
|
}
|
|
212
216
|
};
|
|
213
217
|
}
|
|
214
|
-
const
|
|
218
|
+
const Dt = 20, P = 4096;
|
|
215
219
|
function q(e) {
|
|
216
|
-
if (e == null) return;
|
|
217
220
|
const t = typeof e == "string" ? e : JSON.stringify(e);
|
|
218
221
|
return t.length > P ? t.slice(0, P) + "…[truncated]" : t;
|
|
219
222
|
}
|
|
220
223
|
function O(e, t) {
|
|
221
|
-
e.length >=
|
|
224
|
+
e.length >= Dt && e.shift(), e.push(t);
|
|
222
225
|
}
|
|
223
|
-
async function
|
|
226
|
+
async function Ht(e) {
|
|
224
227
|
try {
|
|
225
228
|
const t = await e.clone().text();
|
|
226
229
|
return q(t);
|
|
@@ -228,39 +231,39 @@ async function Dt(e) {
|
|
|
228
231
|
return;
|
|
229
232
|
}
|
|
230
233
|
}
|
|
231
|
-
function
|
|
234
|
+
function Mt() {
|
|
232
235
|
const e = [], t = window.fetch;
|
|
233
236
|
window.fetch = async function(n, s) {
|
|
234
|
-
const
|
|
235
|
-
let
|
|
236
|
-
s?.body && (
|
|
237
|
-
const
|
|
238
|
-
if (
|
|
239
|
-
const
|
|
237
|
+
const a = typeof n == "string" ? n : n instanceof URL ? n.toString() : n.url, c = s?.method ?? (typeof n == "object" && "method" in n ? n.method : "GET");
|
|
238
|
+
let l;
|
|
239
|
+
s?.body && (l = q(s.body));
|
|
240
|
+
const r = await t.apply(window, [n, s]);
|
|
241
|
+
if (r.status >= 400) {
|
|
242
|
+
const d = await Ht(r);
|
|
240
243
|
O(e, {
|
|
241
|
-
url:
|
|
242
|
-
method:
|
|
243
|
-
status:
|
|
244
|
-
statusText:
|
|
245
|
-
requestBody:
|
|
246
|
-
responseBody:
|
|
244
|
+
url: a,
|
|
245
|
+
method: c.toUpperCase(),
|
|
246
|
+
status: r.status,
|
|
247
|
+
statusText: r.statusText,
|
|
248
|
+
requestBody: l,
|
|
249
|
+
responseBody: d,
|
|
247
250
|
timestamp: Date.now()
|
|
248
251
|
});
|
|
249
252
|
}
|
|
250
|
-
return
|
|
253
|
+
return r;
|
|
251
254
|
};
|
|
252
255
|
const i = XMLHttpRequest.prototype.open, o = XMLHttpRequest.prototype.send;
|
|
253
|
-
return XMLHttpRequest.prototype.open = function(n, s, ...
|
|
254
|
-
return this._qaid_method = n, this._qaid_url = typeof s == "string" ? s : s.toString(), i.apply(this, [n, s, ...
|
|
256
|
+
return XMLHttpRequest.prototype.open = function(n, s, ...a) {
|
|
257
|
+
return this._qaid_method = n, this._qaid_url = typeof s == "string" ? s : s.toString(), i.apply(this, [n, s, ...a]);
|
|
255
258
|
}, XMLHttpRequest.prototype.send = function(n) {
|
|
256
|
-
const s = this,
|
|
259
|
+
const s = this, a = n ? q(n) : void 0;
|
|
257
260
|
return s.addEventListener("load", function() {
|
|
258
261
|
s.status >= 400 && O(e, {
|
|
259
262
|
url: s._qaid_url,
|
|
260
263
|
method: s._qaid_method.toUpperCase(),
|
|
261
264
|
status: s.status,
|
|
262
265
|
statusText: s.statusText,
|
|
263
|
-
requestBody:
|
|
266
|
+
requestBody: a,
|
|
264
267
|
responseBody: q(s.responseText),
|
|
265
268
|
timestamp: Date.now()
|
|
266
269
|
});
|
|
@@ -272,10 +275,10 @@ function Ht() {
|
|
|
272
275
|
}
|
|
273
276
|
};
|
|
274
277
|
}
|
|
275
|
-
function
|
|
278
|
+
function Bt() {
|
|
276
279
|
return typeof navigator < "u" && !!navigator.mediaDevices && typeof navigator.mediaDevices.getDisplayMedia == "function" && typeof MediaRecorder < "u";
|
|
277
280
|
}
|
|
278
|
-
function
|
|
281
|
+
function Rt() {
|
|
279
282
|
if (typeof MediaRecorder > "u") return "";
|
|
280
283
|
const e = [
|
|
281
284
|
"video/webm;codecs=vp9",
|
|
@@ -288,11 +291,11 @@ function Bt() {
|
|
|
288
291
|
return t;
|
|
289
292
|
return "";
|
|
290
293
|
}
|
|
291
|
-
function
|
|
294
|
+
function zt(e = {}) {
|
|
292
295
|
const t = e.maxDuration ?? 15, i = e.videoBitsPerSecond ?? 8e5;
|
|
293
|
-
let o = null, n = null, s = [],
|
|
294
|
-
function
|
|
295
|
-
|
|
296
|
+
let o = null, n = null, s = [], a = null, c = null, l = null, r = 0, d = null, h = null, u = !1, p = null;
|
|
297
|
+
function b() {
|
|
298
|
+
l !== null && (clearInterval(l), l = null), p !== null && (clearTimeout(p), p = null), o && (o.getTracks().forEach((m) => m.stop()), o = null), n = null, s = [], a = null, c = null, d = null, h = null;
|
|
296
299
|
}
|
|
297
300
|
function f() {
|
|
298
301
|
u || (u = !0, n && n.state !== "inactive" && n.stop());
|
|
@@ -300,7 +303,7 @@ function Rt(e = {}) {
|
|
|
300
303
|
return {
|
|
301
304
|
async start() {
|
|
302
305
|
u = !1, s = [];
|
|
303
|
-
const m =
|
|
306
|
+
const m = Rt();
|
|
304
307
|
if (!m)
|
|
305
308
|
throw new Error("No supported video MIME type found");
|
|
306
309
|
o = await navigator.mediaDevices.getDisplayMedia({
|
|
@@ -317,49 +320,49 @@ function Rt(e = {}) {
|
|
|
317
320
|
}), n = new MediaRecorder(o, {
|
|
318
321
|
mimeType: m,
|
|
319
322
|
videoBitsPerSecond: i
|
|
320
|
-
}), n.ondataavailable = (
|
|
321
|
-
|
|
323
|
+
}), n.ondataavailable = (g) => {
|
|
324
|
+
g.data.size > 0 && s.push(g.data);
|
|
322
325
|
}, n.onstop = () => {
|
|
323
|
-
const
|
|
324
|
-
|
|
326
|
+
const g = new Blob(s, { type: m });
|
|
327
|
+
d && d(g), c && c(g), o && o.getTracks().forEach((x) => x.stop());
|
|
325
328
|
}, n.onerror = () => {
|
|
326
329
|
h && h(new Error("MediaRecorder error"));
|
|
327
|
-
}, n.start(1e3),
|
|
328
|
-
const
|
|
329
|
-
|
|
330
|
+
}, n.start(1e3), r = Date.now(), l = setInterval(() => {
|
|
331
|
+
const g = Math.floor((Date.now() - r) / 1e3);
|
|
332
|
+
a && a(g);
|
|
330
333
|
}, 1e3), p = setTimeout(() => {
|
|
331
334
|
f();
|
|
332
335
|
}, t * 1e3);
|
|
333
336
|
},
|
|
334
337
|
stop() {
|
|
335
338
|
return new Promise((m, v) => {
|
|
336
|
-
|
|
339
|
+
d = m, h = v, f();
|
|
337
340
|
});
|
|
338
341
|
},
|
|
339
342
|
onTick(m) {
|
|
340
|
-
|
|
343
|
+
a = m;
|
|
341
344
|
},
|
|
342
345
|
onStop(m) {
|
|
343
|
-
|
|
346
|
+
c = m;
|
|
344
347
|
},
|
|
345
348
|
destroy() {
|
|
346
|
-
f(),
|
|
349
|
+
f(), b();
|
|
347
350
|
}
|
|
348
351
|
};
|
|
349
352
|
}
|
|
350
|
-
function
|
|
353
|
+
function Pt(e = 640) {
|
|
351
354
|
return typeof window < "u" && window.innerWidth < e;
|
|
352
355
|
}
|
|
353
356
|
function A(e, t, i) {
|
|
354
357
|
const o = i.map((s) => s.style.visibility);
|
|
355
358
|
i.forEach((s) => s.style.visibility = "hidden");
|
|
356
359
|
const n = document.elementFromPoint(e, t);
|
|
357
|
-
return i.forEach((s,
|
|
360
|
+
return i.forEach((s, a) => s.style.visibility = o[a]), n;
|
|
358
361
|
}
|
|
359
362
|
function $(e) {
|
|
360
363
|
return e ? e.hasAttribute("data-qaid-embed") || e.hasAttribute("data-qaid-embed-overlay") ? !0 : !!e.closest("[data-qaid-embed], [data-qaid-embed-overlay]") : !1;
|
|
361
364
|
}
|
|
362
|
-
function
|
|
365
|
+
function Ot(e, t = 0) {
|
|
363
366
|
const i = e.getBoundingClientRect();
|
|
364
367
|
return {
|
|
365
368
|
x: i.left - t,
|
|
@@ -368,7 +371,7 @@ function Pt(e, t = 0) {
|
|
|
368
371
|
height: i.height + t * 2
|
|
369
372
|
};
|
|
370
373
|
}
|
|
371
|
-
async function
|
|
374
|
+
async function At(e = {}) {
|
|
372
375
|
const { quality: t = 1, maxWidth: i = 1280, maxHeight: o = 800 } = e;
|
|
373
376
|
try {
|
|
374
377
|
if (!navigator.mediaDevices?.getDisplayMedia)
|
|
@@ -378,34 +381,34 @@ async function Ot(e = {}) {
|
|
|
378
381
|
video: {
|
|
379
382
|
displaySurface: "browser"
|
|
380
383
|
}
|
|
381
|
-
}), s = n.getVideoTracks()[0],
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
384
|
+
}), s = n.getVideoTracks()[0], a = s.getSettings(), c = document.createElement("video");
|
|
385
|
+
c.srcObject = n, c.muted = !0, await new Promise((f) => {
|
|
386
|
+
c.onloadedmetadata = () => {
|
|
387
|
+
c.play(), f();
|
|
385
388
|
};
|
|
386
389
|
}), await new Promise((f) => {
|
|
387
390
|
const m = () => {
|
|
388
|
-
|
|
391
|
+
c.readyState >= 2 ? f() : requestAnimationFrame(m);
|
|
389
392
|
};
|
|
390
393
|
m();
|
|
391
394
|
}), await new Promise((f) => setTimeout(f, 100));
|
|
392
|
-
const
|
|
395
|
+
const l = a.width || c.videoWidth, r = a.height || c.videoHeight, d = Math.min(i / l, o / r, 1), h = Math.round(l * d), u = Math.round(r * d), p = document.createElement("canvas");
|
|
393
396
|
p.width = h, p.height = u;
|
|
394
|
-
const
|
|
395
|
-
return
|
|
397
|
+
const b = p.getContext("2d");
|
|
398
|
+
return b ? (b.drawImage(c, 0, 0, h, u), s.stop(), p.toDataURL("image/webp", t)) : (s.stop(), null);
|
|
396
399
|
} catch (n) {
|
|
397
400
|
return console.warn("Screenshot capture failed:", n), null;
|
|
398
401
|
}
|
|
399
402
|
}
|
|
400
|
-
const N = "https://qaid.dev/lib/html2canvas.min.js",
|
|
403
|
+
const N = "https://qaid.dev/lib/html2canvas.min.js", $t = 1e4, Nt = 50;
|
|
401
404
|
let y = null;
|
|
402
|
-
function
|
|
405
|
+
function Kt() {
|
|
403
406
|
if (typeof document > "u" || typeof window > "u")
|
|
404
407
|
return !1;
|
|
405
408
|
const e = document.createElement("canvas");
|
|
406
409
|
return typeof e.getContext == "function" && !!e.getContext("2d");
|
|
407
410
|
}
|
|
408
|
-
function
|
|
411
|
+
function Vt() {
|
|
409
412
|
return window.html2canvas ? Promise.resolve(!0) : y || (y = new Promise((e) => {
|
|
410
413
|
if (!document.querySelector(
|
|
411
414
|
`script[src="${N}"]`
|
|
@@ -418,19 +421,19 @@ function Nt() {
|
|
|
418
421
|
e(!0);
|
|
419
422
|
return;
|
|
420
423
|
}
|
|
421
|
-
if (Date.now() - i >
|
|
424
|
+
if (Date.now() - i > $t) {
|
|
422
425
|
y = null, e(!1);
|
|
423
426
|
return;
|
|
424
427
|
}
|
|
425
|
-
setTimeout(o,
|
|
428
|
+
setTimeout(o, Nt);
|
|
426
429
|
};
|
|
427
430
|
o();
|
|
428
431
|
}), y);
|
|
429
432
|
}
|
|
430
|
-
async function
|
|
433
|
+
async function _t(e = {}) {
|
|
431
434
|
const { quality: t = 0.8, maxWidth: i = 1280, maxHeight: o = 800 } = e;
|
|
432
435
|
try {
|
|
433
|
-
if (!await
|
|
436
|
+
if (!await Vt() || !window.html2canvas)
|
|
434
437
|
return console.warn("html2canvas failed to load"), null;
|
|
435
438
|
const s = await window.html2canvas(document.body, {
|
|
436
439
|
useCORS: !0,
|
|
@@ -442,13 +445,13 @@ async function Vt(e = {}) {
|
|
|
442
445
|
height: document.documentElement.clientHeight,
|
|
443
446
|
x: window.scrollX,
|
|
444
447
|
y: window.scrollY,
|
|
445
|
-
ignoreElements: (
|
|
446
|
-
}),
|
|
447
|
-
if (
|
|
448
|
-
const
|
|
449
|
-
h.width =
|
|
448
|
+
ignoreElements: (r) => r instanceof HTMLElement ? r.classList.contains("qaid-buttons") || r.classList.contains("qaid-targeting-overlay") || r.classList.contains("qaid-modal-container") || r.classList.contains("qaid-bottom-sheet") || r.classList.contains("qaid-backdrop") || r.classList.contains("qaid-selected-marker") || r.classList.contains("qaid-tooltip-text") || r.classList.contains("qaid-recording-indicator") || r.classList.contains("qaid-video-preview") || r.className?.toString().startsWith?.("qaid-") : !1
|
|
449
|
+
}), a = s.width, c = s.height, l = Math.min(i / a, o / c, 1);
|
|
450
|
+
if (l < 1) {
|
|
451
|
+
const r = Math.round(a * l), d = Math.round(c * l), h = document.createElement("canvas");
|
|
452
|
+
h.width = r, h.height = d;
|
|
450
453
|
const u = h.getContext("2d");
|
|
451
|
-
return u ? (u.drawImage(s, 0, 0,
|
|
454
|
+
return u ? (u.drawImage(s, 0, 0, r, d), h.toDataURL("image/webp", t)) : null;
|
|
452
455
|
}
|
|
453
456
|
return s.toDataURL("image/webp", t);
|
|
454
457
|
} catch (n) {
|
|
@@ -459,7 +462,7 @@ const V = "qaid_visitor_id", _ = "qaid_hide_feedback";
|
|
|
459
462
|
function I(e) {
|
|
460
463
|
return e ? `${_}_${e}` : _;
|
|
461
464
|
}
|
|
462
|
-
function
|
|
465
|
+
function Ft(e) {
|
|
463
466
|
try {
|
|
464
467
|
return localStorage.getItem(I(e)) === "1";
|
|
465
468
|
} catch {
|
|
@@ -472,7 +475,7 @@ function F(e, t = !0) {
|
|
|
472
475
|
} catch {
|
|
473
476
|
}
|
|
474
477
|
}
|
|
475
|
-
function
|
|
478
|
+
function Ut() {
|
|
476
479
|
try {
|
|
477
480
|
let e = localStorage.getItem(V);
|
|
478
481
|
return e || (e = crypto.randomUUID(), localStorage.setItem(V, e)), e;
|
|
@@ -480,7 +483,7 @@ function Ft() {
|
|
|
480
483
|
return crypto.randomUUID();
|
|
481
484
|
}
|
|
482
485
|
}
|
|
483
|
-
class
|
|
486
|
+
class Xt {
|
|
484
487
|
config;
|
|
485
488
|
state = "IDLE";
|
|
486
489
|
feedbackData = {
|
|
@@ -594,7 +597,7 @@ class Ut {
|
|
|
594
597
|
maxDuration: t.videoOptions?.maxDuration ?? 15
|
|
595
598
|
},
|
|
596
599
|
recordIcon: t.recordIcon ?? ""
|
|
597
|
-
}, this.boundKeyDown = this.handleKeyDown.bind(this), this.boundMouseMove = this.handleMouseMove.bind(this), this.boundClick = this.handleClick.bind(this), this.boundResize = this.handleResize.bind(this), this.visitorId =
|
|
600
|
+
}, this.boundKeyDown = this.handleKeyDown.bind(this), this.boundMouseMove = this.handleMouseMove.bind(this), this.boundClick = this.handleClick.bind(this), this.boundResize = this.handleResize.bind(this), this.visitorId = Ut(), this.init();
|
|
598
601
|
}
|
|
599
602
|
applyVars(t) {
|
|
600
603
|
ut(t, this.cssVars);
|
|
@@ -609,7 +612,7 @@ class Ut {
|
|
|
609
612
|
backdropOpacity: this.config.backdropOpacity,
|
|
610
613
|
fontFamily: this.config.fontFamily,
|
|
611
614
|
fontSize: this.config.fontSize
|
|
612
|
-
}), !this.config.hideDismiss &&
|
|
615
|
+
}), !this.config.hideDismiss && Ft(this.config.apiKey) && (this._startDismissed = !0), this.checkMobile(), window.addEventListener("resize", this.boundResize), this.createEmbed(), this.consoleCapture = Lt((t) => {
|
|
613
616
|
this.feedbackData.consoleErrors = this.consoleCapture?.errors ?? [];
|
|
614
617
|
}), this.feedbackData.consoleErrors = this.consoleCapture.errors, this.observeDom();
|
|
615
618
|
}
|
|
@@ -632,7 +635,7 @@ class Ut {
|
|
|
632
635
|
}), this.domObserver.observe(document.body, { childList: !0 });
|
|
633
636
|
}
|
|
634
637
|
checkMobile() {
|
|
635
|
-
this.isMobile =
|
|
638
|
+
this.isMobile = Pt();
|
|
636
639
|
}
|
|
637
640
|
handleResize() {
|
|
638
641
|
this.checkMobile();
|
|
@@ -643,37 +646,37 @@ class Ut {
|
|
|
643
646
|
this.config.container && (t = document.querySelector(this.config.container)), t ? (t.appendChild(this.shadowHost), this.isUserProvidedContainer = !0, this.config.hideDismiss = !0) : (this.shadowHost.style.position = "fixed", this.shadowHost.style.display = "block", this.shadowHost.style.inset = "0", this.shadowHost.style.pointerEvents = "none", this.shadowHost.style.zIndex = String(this.config.zIndex), document.body.appendChild(this.shadowHost)), this.shadowRoot = this.shadowHost.attachShadow({ mode: "open" });
|
|
644
647
|
const i = document.createElement("style");
|
|
645
648
|
if (i.textContent = z(), this.shadowRoot.appendChild(i), this.config.css) {
|
|
646
|
-
const
|
|
647
|
-
|
|
649
|
+
const r = document.createElement("style");
|
|
650
|
+
r.textContent = this.config.css, this.shadowRoot.appendChild(r);
|
|
648
651
|
}
|
|
649
652
|
const o = this.config.direction === "vertical" ? "qaid-vertical" : "";
|
|
650
653
|
if (this.isUserProvidedContainer)
|
|
651
654
|
this.buttonsContainer = document.createElement("div"), this.buttonsContainer.className = `qaid-buttons qaid-${this.config.position} ${o}`.trim(), this.config.incognito && this.buttonsContainer.classList.add("qaid-incognito");
|
|
652
655
|
else {
|
|
653
656
|
this.buttonsContainer = document.createElement("div"), this.buttonsContainer.className = `qaid-buttons qaid-auto-container qaid-${this.config.position} ${o}${this.config.incognito ? " qaid-incognito" : ""}`.trim(), this.buttonsContainer.style.pointerEvents = "auto";
|
|
654
|
-
const { x:
|
|
655
|
-
this.config.position.includes("right") ? this.buttonsContainer.style.right = `${
|
|
657
|
+
const { x: r, y: d } = this.config.offset;
|
|
658
|
+
this.config.position.includes("right") ? this.buttonsContainer.style.right = `${r}px` : this.buttonsContainer.style.left = `${r}px`, this.config.position.includes("bottom") ? this.buttonsContainer.style.bottom = `${d}px` : this.buttonsContainer.style.top = `${d}px`;
|
|
656
659
|
}
|
|
657
660
|
this.applyVars(this.buttonsContainer), this.shadowRoot.appendChild(this.buttonsContainer);
|
|
658
|
-
const n = !!this.config.buttonClass, s = n ? `qaid-btn-structural ${this.config.buttonClass}` : "qaid-btn",
|
|
659
|
-
if (
|
|
660
|
-
const
|
|
661
|
-
|
|
662
|
-
const
|
|
663
|
-
|
|
661
|
+
const n = !!this.config.buttonClass, s = n ? `qaid-btn-structural ${this.config.buttonClass}` : "qaid-btn", c = this.config.text.tooltip || "Feedback for us?", l = document.createElement("div");
|
|
662
|
+
if (l.className = "qaid-tooltip-text", l.textContent = c, this.applyVars(l), this.shadowRoot.appendChild(l), this.tooltipElement = l, !this.config.hideThumbs) {
|
|
663
|
+
const r = document.createElement("div");
|
|
664
|
+
r.className = "qaid-tooltip-wrapper";
|
|
665
|
+
const d = document.createElement("button");
|
|
666
|
+
d.type = "button", d.className = n ? `${s} qaid-btn-up` : "qaid-btn qaid-btn-up", d.innerHTML = this.config.positiveIcon || E, d.addEventListener("click", (p) => this.handleThumbClick("up", p.currentTarget, p)), d.addEventListener("mouseenter", () => this.showTooltip(d)), d.addEventListener("mouseleave", () => this.hideTooltip()), r.appendChild(d);
|
|
664
667
|
const h = document.createElement("div");
|
|
665
668
|
h.className = "qaid-tooltip-wrapper";
|
|
666
669
|
const u = document.createElement("button");
|
|
667
|
-
u.type = "button", u.className = n ? `${s} qaid-btn-down` : "qaid-btn qaid-btn-down", u.innerHTML = this.config.negativeIcon || T, u.addEventListener("click", (p) => this.handleThumbClick("down", p.currentTarget, p)), u.addEventListener("mouseenter", () => this.showTooltip(u)), u.addEventListener("mouseleave", () => this.hideTooltip()), h.appendChild(u), this.buttonsContainer.appendChild(
|
|
670
|
+
u.type = "button", u.className = n ? `${s} qaid-btn-down` : "qaid-btn qaid-btn-down", u.innerHTML = this.config.negativeIcon || T, u.addEventListener("click", (p) => this.handleThumbClick("down", p.currentTarget, p)), u.addEventListener("mouseenter", () => this.showTooltip(u)), u.addEventListener("mouseleave", () => this.hideTooltip()), h.appendChild(u), this.buttonsContainer.appendChild(r), this.buttonsContainer.appendChild(h);
|
|
668
671
|
}
|
|
669
|
-
if (this.config.captureVideo &&
|
|
670
|
-
const
|
|
671
|
-
|
|
672
|
-
const
|
|
673
|
-
|
|
672
|
+
if (this.config.captureVideo && Bt()) {
|
|
673
|
+
const r = document.createElement("div");
|
|
674
|
+
r.className = "qaid-tooltip-wrapper";
|
|
675
|
+
const d = document.createElement("button");
|
|
676
|
+
d.type = "button", d.className = n ? `${s} qaid-btn-record` : "qaid-btn qaid-btn-record", d.innerHTML = this.config.recordIcon || it, d.addEventListener("click", () => this.startRecording()), d.addEventListener("mouseenter", () => this.showTooltip(d)), d.addEventListener("mouseleave", () => this.hideTooltip()), r.appendChild(d), this.buttonsContainer.appendChild(r);
|
|
674
677
|
}
|
|
675
|
-
this.config.hideDismiss || (this.dismissBtn = document.createElement("button"), this.dismissBtn.type = "button", this.dismissBtn.className = "qaid-dismiss-btn", this.dismissBtn.setAttribute("aria-label", "Hide Feedback"), this.dismissBtn.title = "Hide Feedback", this.dismissBtn.innerHTML = '<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 2l8 8M10 2l-8 8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>', this.dismissBtn.addEventListener("click", (
|
|
676
|
-
|
|
678
|
+
this.config.hideDismiss || (this.dismissBtn = document.createElement("button"), this.dismissBtn.type = "button", this.dismissBtn.className = "qaid-dismiss-btn", this.dismissBtn.setAttribute("aria-label", "Hide Feedback"), this.dismissBtn.title = "Hide Feedback", this.dismissBtn.innerHTML = '<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 2l8 8M10 2l-8 8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>', this.dismissBtn.addEventListener("click", (r) => {
|
|
679
|
+
r.stopPropagation(), this.handleDismiss();
|
|
677
680
|
}), this.buttonsContainer.insertBefore(this.dismissBtn, this.buttonsContainer.firstChild), this._startDismissed && this.buttonsContainer.classList.add("qaid-incognito"));
|
|
678
681
|
}
|
|
679
682
|
/**
|
|
@@ -694,20 +697,23 @@ class Ut {
|
|
|
694
697
|
}
|
|
695
698
|
tooltipElement = null;
|
|
696
699
|
showTooltip(t) {
|
|
697
|
-
|
|
698
|
-
const i = this.tooltipElement, o = 8;
|
|
700
|
+
const i = this.tooltipElement;
|
|
699
701
|
i.style.visibility = "hidden", i.classList.add("qaid-tooltip-visible");
|
|
700
|
-
const
|
|
701
|
-
|
|
702
|
-
|
|
702
|
+
const o = t.getBoundingClientRect(), n = i.getBoundingClientRect(), { top: s, left: a } = Et(
|
|
703
|
+
o,
|
|
704
|
+
n,
|
|
705
|
+
{ width: window.innerWidth, height: window.innerHeight }
|
|
706
|
+
);
|
|
707
|
+
i.style.top = `${s}px`, i.style.left = `${a}px`, i.style.visibility = "visible";
|
|
703
708
|
}
|
|
704
709
|
hideTooltip() {
|
|
705
|
-
this.tooltipElement
|
|
710
|
+
this.tooltipElement.classList.remove("qaid-tooltip-visible");
|
|
706
711
|
}
|
|
707
712
|
handleDismiss() {
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
|
|
713
|
+
const t = this.buttonsContainer;
|
|
714
|
+
t.classList.add("qaid-incognito"), t.classList.add("qaid-force-hidden"), t.addEventListener("mouseleave", () => {
|
|
715
|
+
t.classList.remove("qaid-force-hidden");
|
|
716
|
+
}, { once: !0 }), F(this.config.apiKey, !0);
|
|
711
717
|
}
|
|
712
718
|
handleThumbClick(t, i, o) {
|
|
713
719
|
this.buttonsContainer?.classList.contains("qaid-incognito") && (this.buttonsContainer.classList.remove("qaid-incognito"), this.buttonsContainer.classList.remove("qaid-force-hidden"), F(this.config.apiKey, !1)), this.config.skipTargeting ? this.submitDirectFeedback(t, i) : this.startTargeting(t, o);
|
|
@@ -758,7 +764,6 @@ class Ut {
|
|
|
758
764
|
}
|
|
759
765
|
}
|
|
760
766
|
handleClick(t) {
|
|
761
|
-
if (this.state !== "TARGETING" || !this.shadowHost) return;
|
|
762
767
|
t.preventDefault(), t.stopPropagation();
|
|
763
768
|
const i = [this.shadowHost, this.overlayShadowHost].filter(Boolean), o = A(
|
|
764
769
|
t.clientX,
|
|
@@ -767,15 +772,15 @@ class Ut {
|
|
|
767
772
|
);
|
|
768
773
|
if (!o || $(o))
|
|
769
774
|
return;
|
|
770
|
-
const n =
|
|
775
|
+
const n = Ot(o, 8);
|
|
771
776
|
this.selectedBounds = {
|
|
772
777
|
...n,
|
|
773
778
|
clickX: t.clientX,
|
|
774
779
|
clickY: t.clientY,
|
|
775
780
|
visible: !0
|
|
776
781
|
};
|
|
777
|
-
const { selector: s, text:
|
|
778
|
-
this.feedbackData.elementSelector = s, this.feedbackData.elementText =
|
|
782
|
+
const { selector: s, text: a } = xt(o);
|
|
783
|
+
this.feedbackData.elementSelector = s, this.feedbackData.elementText = a, this.removeTargetingOverlay(), document.removeEventListener("mousemove", this.boundMouseMove), document.removeEventListener("click", this.boundClick, !0), document.removeEventListener("keydown", this.boundKeyDown), document.body.classList.remove("qaid-targeting", "qaid-type-up"), document.body.style.removeProperty("--qaid-positive"), document.body.style.removeProperty("--qaid-negative"), this.state = "SELECTED", this.showSelectedMarker(), this.submitFeedback();
|
|
779
784
|
}
|
|
780
785
|
cancelTargeting() {
|
|
781
786
|
this.removeTargetingOverlay(), document.removeEventListener("mousemove", this.boundMouseMove), document.removeEventListener("click", this.boundClick, !0), document.removeEventListener("keydown", this.boundKeyDown), document.body.classList.remove("qaid-targeting", "qaid-type-up"), document.body.style.removeProperty("--qaid-positive"), document.body.style.removeProperty("--qaid-negative"), this.state = "IDLE", this.feedbackData.feedbackType = null, this.feedbackData.elementSelector = null, this.feedbackData.elementText = null, this.selectedBounds.visible = !1;
|
|
@@ -784,7 +789,6 @@ class Ut {
|
|
|
784
789
|
this.overlayContainer && (this.overlayContainer.remove(), this.overlayContainer = null), this.captureLayer = null, this.crosshairH = null, this.crosshairV = null, this.scope = null;
|
|
785
790
|
}
|
|
786
791
|
showSelectedMarker() {
|
|
787
|
-
if (!this.selectedBounds.visible) return;
|
|
788
792
|
const t = this.ensureOverlayHost();
|
|
789
793
|
this.marker = document.createElement("div"), this.marker.className = "qaid-selected-marker", this.marker.style.left = `${this.selectedBounds.x}px`, this.marker.style.top = `${this.selectedBounds.y}px`, this.marker.style.width = `${this.selectedBounds.width}px`, this.marker.style.height = `${this.selectedBounds.height}px`, this.marker.style.zIndex = String(this.config.zIndex + 1), this.applyVars(this.marker), t.appendChild(this.marker);
|
|
790
794
|
}
|
|
@@ -792,9 +796,8 @@ class Ut {
|
|
|
792
796
|
this.marker && (this.marker.remove(), this.marker = null);
|
|
793
797
|
}
|
|
794
798
|
async submitFeedback() {
|
|
795
|
-
if (!this.feedbackData.feedbackType) return;
|
|
796
799
|
let t = null;
|
|
797
|
-
this.config.captureScreenshot && (this.config.screenshotMethod === "dom" ? t = await
|
|
800
|
+
this.config.captureScreenshot && (this.config.screenshotMethod === "dom" ? t = await _t(this.config.screenshotOptions) : t = await At(this.config.screenshotOptions));
|
|
798
801
|
const i = this.feedbackData.elementSelector ? {
|
|
799
802
|
x: this.selectedBounds.x,
|
|
800
803
|
y: this.selectedBounds.y,
|
|
@@ -848,7 +851,7 @@ class Ut {
|
|
|
848
851
|
`, this.applyVars(i), t.appendChild(i), this.modalContainer = i, this.setupModalInteractions();
|
|
849
852
|
}
|
|
850
853
|
showPositionedModal() {
|
|
851
|
-
const t = this.ensureOverlayHost(), { modal: i, arrow: o } =
|
|
854
|
+
const t = this.ensureOverlayHost(), { modal: i, arrow: o } = Tt(
|
|
852
855
|
this.selectedBounds,
|
|
853
856
|
window.innerWidth,
|
|
854
857
|
window.innerHeight,
|
|
@@ -885,7 +888,6 @@ class Ut {
|
|
|
885
888
|
`;
|
|
886
889
|
}
|
|
887
890
|
setupModalInteractions() {
|
|
888
|
-
if (!this.modalContainer) return;
|
|
889
891
|
const t = this.modalContainer.querySelector(".qaid-textarea"), i = this.modalContainer.querySelector(".qaid-btn-submit");
|
|
890
892
|
t && (setTimeout(() => t.focus(), 100), t.addEventListener("input", () => {
|
|
891
893
|
i && (i.textContent = t.value.trim() ? this.config.text.submitButton : this.config.text.skipButton);
|
|
@@ -897,12 +899,12 @@ class Ut {
|
|
|
897
899
|
o && o.addEventListener("click", () => {
|
|
898
900
|
const n = this.feedbackData.feedbackType === "up" ? "down" : "up";
|
|
899
901
|
this.feedbackData.feedbackType = n, this.config.buttonClass ? (o.classList.toggle("qaid-btn-up", n === "up"), o.classList.toggle("qaid-btn-down", n === "down")) : (o.classList.toggle("qaid-type-up", n === "up"), o.classList.toggle("qaid-type-down", n === "down"));
|
|
900
|
-
const s = this.config.positiveIcon || E,
|
|
901
|
-
o.innerHTML = n === "up" ? s :
|
|
902
|
+
const s = this.config.positiveIcon || E, a = this.config.negativeIcon || T;
|
|
903
|
+
o.innerHTML = n === "up" ? s : a, this.feedbackId && fetch(`${this.config.endpoint}/${this.feedbackId}`, {
|
|
902
904
|
method: "PATCH",
|
|
903
905
|
headers: { "Content-Type": "application/json" },
|
|
904
906
|
body: JSON.stringify({ feedbackType: n })
|
|
905
|
-
}).catch((
|
|
907
|
+
}).catch((c) => console.error("Failed to update feedback type:", c));
|
|
906
908
|
});
|
|
907
909
|
}
|
|
908
910
|
async submitMessage(t) {
|
|
@@ -931,7 +933,7 @@ class Ut {
|
|
|
931
933
|
async startRecording() {
|
|
932
934
|
if (!(this.isRecording || this.state !== "IDLE"))
|
|
933
935
|
try {
|
|
934
|
-
this.networkCapture =
|
|
936
|
+
this.networkCapture = Mt(), this.videoRecorder = zt({
|
|
935
937
|
maxDuration: this.config.videoOptions.maxDuration
|
|
936
938
|
}), this.videoRecorder.onTick((t) => {
|
|
937
939
|
this.updateRecordingTimer(t);
|
|
@@ -943,14 +945,12 @@ class Ut {
|
|
|
943
945
|
}
|
|
944
946
|
}
|
|
945
947
|
async stopRecording() {
|
|
946
|
-
|
|
947
|
-
|
|
948
|
-
|
|
949
|
-
|
|
950
|
-
this.recordedBlob = null;
|
|
951
|
-
}
|
|
952
|
-
this.isRecording = !1, this.removeRecordingIndicator(), document.removeEventListener("keydown", this.boundKeyDown), this.recordedBlob && this.recordedBlob.size > 0 ? this.showRecordingPreview() : this.cleanupRecording();
|
|
948
|
+
try {
|
|
949
|
+
this.recordedBlob = await this.videoRecorder.stop();
|
|
950
|
+
} catch {
|
|
951
|
+
this.recordedBlob = null;
|
|
953
952
|
}
|
|
953
|
+
this.isRecording = !1, this.removeRecordingIndicator(), document.removeEventListener("keydown", this.boundKeyDown), this.recordedBlob && this.recordedBlob.size > 0 ? this.showRecordingPreview() : this.cleanupRecording();
|
|
954
954
|
}
|
|
955
955
|
showRecordingIndicator() {
|
|
956
956
|
const t = this.ensureOverlayHost();
|
|
@@ -978,7 +978,6 @@ class Ut {
|
|
|
978
978
|
this.recordingIndicator && (this.recordingIndicator.remove(), this.recordingIndicator = null);
|
|
979
979
|
}
|
|
980
980
|
showRecordingPreview() {
|
|
981
|
-
if (!this.recordedBlob) return;
|
|
982
981
|
const t = this.ensureOverlayHost(), i = URL.createObjectURL(this.recordedBlob);
|
|
983
982
|
this.videoPreview = document.createElement("div"), this.videoPreview.className = "qaid-video-preview", this.videoPreview.style.zIndex = String(this.config.zIndex + 100);
|
|
984
983
|
const o = document.createElement("div");
|
|
@@ -987,21 +986,21 @@ class Ut {
|
|
|
987
986
|
n.textContent = "Review your recording";
|
|
988
987
|
const s = document.createElement("video");
|
|
989
988
|
s.src = i, s.controls = !0, s.autoplay = !0, s.muted = !0;
|
|
990
|
-
const
|
|
991
|
-
|
|
992
|
-
const
|
|
993
|
-
|
|
994
|
-
const
|
|
995
|
-
|
|
996
|
-
const
|
|
997
|
-
|
|
989
|
+
const a = document.createElement("textarea");
|
|
990
|
+
a.placeholder = "Optional: Describe the issue you recorded...";
|
|
991
|
+
const c = document.createElement("div");
|
|
992
|
+
c.className = "qaid-video-preview-actions";
|
|
993
|
+
const l = document.createElement("button");
|
|
994
|
+
l.type = "button", l.className = "qaid-video-btn qaid-video-btn-cancel", l.textContent = "Cancel", l.addEventListener("click", () => this.cancelRecordingPreview());
|
|
995
|
+
const r = document.createElement("button");
|
|
996
|
+
r.type = "button", r.className = "qaid-video-btn qaid-video-btn-rerecord", r.textContent = "Re-record", r.addEventListener("click", () => {
|
|
998
997
|
this.cancelRecordingPreview(), this.startRecording();
|
|
999
998
|
});
|
|
1000
|
-
const
|
|
1001
|
-
|
|
1002
|
-
const h =
|
|
1003
|
-
this.submitVideoFeedback(h,
|
|
1004
|
-
}),
|
|
999
|
+
const d = document.createElement("button");
|
|
1000
|
+
d.type = "button", d.className = "qaid-video-btn qaid-video-btn-send", d.textContent = "Send", d.addEventListener("click", () => {
|
|
1001
|
+
const h = a.value.trim() || null;
|
|
1002
|
+
this.submitVideoFeedback(h, d);
|
|
1003
|
+
}), c.appendChild(l), c.appendChild(r), c.appendChild(d), o.appendChild(n), o.appendChild(s), o.appendChild(a), o.appendChild(c), this.videoPreview.appendChild(o), this.applyVars(this.videoPreview), this.overlayShadowHost && (this.overlayShadowHost.style.pointerEvents = "auto"), t.appendChild(this.videoPreview), document.addEventListener("keydown", this.boundKeyDown);
|
|
1005
1004
|
}
|
|
1006
1005
|
cancelRecordingPreview() {
|
|
1007
1006
|
this.removeVideoPreview(), this.cleanupRecording();
|
|
@@ -1045,7 +1044,7 @@ class Ut {
|
|
|
1045
1044
|
this.destroyed = !0, this.domObserver && (this.domObserver.disconnect(), this.domObserver = null), this.boundBeforeSwap && (document.removeEventListener("astro:before-swap", this.boundBeforeSwap), this.boundBeforeSwap = null), this.cleanupRecording(), this.removeVideoPreview(), this.consoleCapture && (this.consoleCapture.restore(), this.consoleCapture = null), window.removeEventListener("resize", this.boundResize), document.removeEventListener("keydown", this.boundKeyDown), document.removeEventListener("mousemove", this.boundMouseMove), document.removeEventListener("click", this.boundClick, !0), document.body.classList.remove("qaid-targeting", "qaid-type-up"), document.body.style.removeProperty("--qaid-positive"), document.body.style.removeProperty("--qaid-negative"), this.shadowHost && (this.shadowHost.remove(), this.shadowHost = null, this.shadowRoot = null), this.overlayShadowHost && (this.overlayShadowHost.remove(), this.overlayShadowHost = null, this.overlayShadowRoot = null), this.buttonsContainer = null, this.overlayContainer = null, this.captureLayer = null, this.crosshairH = null, this.crosshairV = null, this.scope = null, this.marker = null, this.modalContainer = null, this.backdrop = null, this.dismissBtn = null, this.tooltipElement = null, mt();
|
|
1046
1045
|
}
|
|
1047
1046
|
}
|
|
1048
|
-
function
|
|
1047
|
+
function W(e) {
|
|
1049
1048
|
return document.querySelector(e)?.textContent?.trim() ?? "";
|
|
1050
1049
|
}
|
|
1051
1050
|
function Wt() {
|
|
@@ -1057,18 +1056,18 @@ function Wt() {
|
|
|
1057
1056
|
if (!t) return null;
|
|
1058
1057
|
try {
|
|
1059
1058
|
const i = JSON.parse(t);
|
|
1060
|
-
return i.cssSelector && !i.css && (i.css =
|
|
1059
|
+
return i.cssSelector && !i.css && (i.css = W(i.cssSelector), delete i.cssSelector), i;
|
|
1061
1060
|
} catch {
|
|
1062
1061
|
return null;
|
|
1063
1062
|
}
|
|
1064
1063
|
}
|
|
1065
|
-
function
|
|
1064
|
+
function jt(e) {
|
|
1066
1065
|
const t = e.getAttribute("data-endpoint");
|
|
1067
1066
|
if (!t) return null;
|
|
1068
|
-
const i = e.getAttribute("data-position"), o = e.getAttribute("data-zindex"), n = e.getAttribute("data-positive-color"), s = e.getAttribute("data-negative-color"),
|
|
1067
|
+
const i = e.getAttribute("data-position"), o = e.getAttribute("data-zindex"), n = e.getAttribute("data-positive-color"), s = e.getAttribute("data-negative-color"), a = e.getAttribute("data-marker-color"), c = e.getAttribute("data-container"), l = e.getAttribute("data-button-class"), r = e.getAttribute("data-skip-targeting"), d = e.getAttribute("data-incognito"), h = e.getAttribute("data-button-size"), u = e.getAttribute("data-offset-x"), p = e.getAttribute("data-offset-y"), b = e.getAttribute("data-modal-width"), f = e.getAttribute("data-backdrop-opacity"), m = e.getAttribute("data-font-family"), v = e.getAttribute("data-font-size"), g = e.getAttribute("data-tooltip"), x = e.getAttribute("data-modal-title"), L = e.getAttribute("data-modal-subtitle"), D = e.getAttribute("data-placeholder"), H = e.getAttribute("data-submit-button"), M = e.getAttribute("data-skip-button"), j = e.getAttribute("data-positive-icon"), K = e.getAttribute("data-negative-icon"), Y = e.getAttribute("data-api-key"), J = e.getAttribute("data-capture-screenshot"), k = e.getAttribute("data-screenshot-quality"), C = e.getAttribute("data-screenshot-max-width"), S = e.getAttribute("data-screenshot-max-height"), G = e.getAttribute("data-capture-video"), Z = e.getAttribute("data-hide-thumbs"), Q = e.getAttribute("data-hide-dismiss"), B = e.getAttribute("data-video-max-duration"), tt = e.getAttribute("data-screenshot-method"), et = e.getAttribute("data-direction"), R = e.getAttribute("data-css-selector");
|
|
1069
1068
|
return {
|
|
1070
1069
|
endpoint: t,
|
|
1071
|
-
css: R ?
|
|
1070
|
+
css: R ? W(R) : void 0,
|
|
1072
1071
|
apiKey: Y ?? void 0,
|
|
1073
1072
|
captureScreenshot: J === "true" ? !0 : void 0,
|
|
1074
1073
|
screenshotOptions: k || C || S ? {
|
|
@@ -1076,29 +1075,29 @@ function Xt(e) {
|
|
|
1076
1075
|
maxWidth: C ? parseInt(C, 10) : void 0,
|
|
1077
1076
|
maxHeight: S ? parseInt(S, 10) : void 0
|
|
1078
1077
|
} : void 0,
|
|
1079
|
-
container:
|
|
1080
|
-
buttonClass:
|
|
1078
|
+
container: c ?? void 0,
|
|
1079
|
+
buttonClass: l ?? void 0,
|
|
1081
1080
|
direction: et ?? void 0,
|
|
1082
1081
|
position: i ?? void 0,
|
|
1083
1082
|
zIndex: o ? parseInt(o, 10) : void 0,
|
|
1084
|
-
skipTargeting:
|
|
1085
|
-
incognito:
|
|
1083
|
+
skipTargeting: r === "true" ? !0 : void 0,
|
|
1084
|
+
incognito: d === "true" ? !0 : void 0,
|
|
1086
1085
|
buttonSize: h ?? void 0,
|
|
1087
1086
|
offset: u || p ? {
|
|
1088
1087
|
x: u ? parseInt(u, 10) : void 0,
|
|
1089
1088
|
y: p ? parseInt(p, 10) : void 0
|
|
1090
1089
|
} : void 0,
|
|
1091
|
-
modalWidth:
|
|
1090
|
+
modalWidth: b ? parseInt(b, 10) : void 0,
|
|
1092
1091
|
backdropOpacity: f ? parseFloat(f) : void 0,
|
|
1093
1092
|
fontFamily: m ?? void 0,
|
|
1094
1093
|
fontSize: v ? parseInt(v, 10) : void 0,
|
|
1095
1094
|
colors: {
|
|
1096
1095
|
positive: n ?? void 0,
|
|
1097
1096
|
negative: s ?? void 0,
|
|
1098
|
-
marker:
|
|
1097
|
+
marker: a ?? void 0
|
|
1099
1098
|
},
|
|
1100
|
-
text:
|
|
1101
|
-
tooltip:
|
|
1099
|
+
text: g || x || L || D || H || M ? {
|
|
1100
|
+
tooltip: g ?? void 0,
|
|
1102
1101
|
modalTitle: x ?? void 0,
|
|
1103
1102
|
modalSubtitle: L ?? void 0,
|
|
1104
1103
|
placeholder: D ?? void 0,
|
|
@@ -1118,18 +1117,18 @@ function Xt(e) {
|
|
|
1118
1117
|
}
|
|
1119
1118
|
if (typeof document < "u") {
|
|
1120
1119
|
const e = () => {
|
|
1121
|
-
const t = document.currentScript, i = Wt(), o = t ?
|
|
1122
|
-
n?.endpoint && new
|
|
1120
|
+
const t = document.currentScript, i = Wt(), o = t ? jt(t) : null, n = i ?? o;
|
|
1121
|
+
n?.endpoint && new Xt(n);
|
|
1123
1122
|
};
|
|
1124
1123
|
document.readyState === "loading" ? document.addEventListener("DOMContentLoaded", e) : e();
|
|
1125
1124
|
}
|
|
1126
1125
|
export {
|
|
1127
|
-
|
|
1128
|
-
|
|
1129
|
-
|
|
1130
|
-
|
|
1131
|
-
|
|
1132
|
-
|
|
1133
|
-
|
|
1126
|
+
Xt as QaidFeedback,
|
|
1127
|
+
_t as captureDomScreenshot,
|
|
1128
|
+
Mt as captureNetworkErrors,
|
|
1129
|
+
zt as createVideoRecorder,
|
|
1130
|
+
Rt as getSupportedMimeType,
|
|
1131
|
+
Kt as isDomScreenshotSupported,
|
|
1132
|
+
Bt as isVideoRecordingSupported
|
|
1134
1133
|
};
|
|
1135
1134
|
//# sourceMappingURL=qaid.js.map
|