@openreplay/tracker 13.0.0 → 13.0.1

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.
Files changed (77) hide show
  1. package/CHANGELOG.md +5 -0
  2. package/cjs/app/canvas.d.ts +2 -1
  3. package/cjs/app/canvas.js +27 -13
  4. package/cjs/app/index.d.ts +6 -0
  5. package/cjs/app/index.js +23 -4
  6. package/cjs/index.js +1 -1
  7. package/coverage/clover.xml +1054 -964
  8. package/coverage/coverage-final.json +21 -21
  9. package/coverage/lcov-report/index.html +43 -43
  10. package/coverage/lcov-report/main/app/canvas.ts.html +224 -47
  11. package/coverage/lcov-report/main/app/guards.ts.html +26 -26
  12. package/coverage/lcov-report/main/app/index.html +42 -42
  13. package/coverage/lcov-report/main/app/index.ts.html +157 -37
  14. package/coverage/lcov-report/main/app/logger.ts.html +1 -1
  15. package/coverage/lcov-report/main/app/messages.gen.ts.html +244 -154
  16. package/coverage/lcov-report/main/app/nodes.ts.html +7 -4
  17. package/coverage/lcov-report/main/app/observer/iframe_observer.ts.html +1 -1
  18. package/coverage/lcov-report/main/app/observer/iframe_offsets.ts.html +1 -1
  19. package/coverage/lcov-report/main/app/observer/index.html +5 -5
  20. package/coverage/lcov-report/main/app/observer/shadow_root_observer.ts.html +1 -1
  21. package/coverage/lcov-report/main/app/observer/top_observer.ts.html +7 -4
  22. package/coverage/lcov-report/main/app/sanitizer.ts.html +2 -2
  23. package/coverage/lcov-report/main/app/session.ts.html +2 -2
  24. package/coverage/lcov-report/main/app/ticker.ts.html +1 -1
  25. package/coverage/lcov-report/main/index.html +13 -13
  26. package/coverage/lcov-report/main/index.ts.html +32 -14
  27. package/coverage/lcov-report/main/modules/Network/beaconProxy.ts.html +17 -8
  28. package/coverage/lcov-report/main/modules/Network/fetchProxy.ts.html +40 -13
  29. package/coverage/lcov-report/main/modules/Network/index.html +21 -21
  30. package/coverage/lcov-report/main/modules/Network/index.ts.html +2 -2
  31. package/coverage/lcov-report/main/modules/Network/networkMessage.ts.html +12 -6
  32. package/coverage/lcov-report/main/modules/Network/utils.ts.html +17 -8
  33. package/coverage/lcov-report/main/modules/Network/xhrProxy.ts.html +39 -12
  34. package/coverage/lcov-report/main/modules/attributeSender.ts.html +1 -1
  35. package/coverage/lcov-report/main/modules/axiosSpy.ts.html +1 -1
  36. package/coverage/lcov-report/main/modules/conditionsManager.ts.html +4 -22
  37. package/coverage/lcov-report/main/modules/connection.ts.html +1 -1
  38. package/coverage/lcov-report/main/modules/console.ts.html +1 -1
  39. package/coverage/lcov-report/main/modules/constructedStyleSheets.ts.html +3 -3
  40. package/coverage/lcov-report/main/modules/cssrules.ts.html +1 -1
  41. package/coverage/lcov-report/main/modules/exception.ts.html +1 -1
  42. package/coverage/lcov-report/main/modules/featureFlags.ts.html +1 -1
  43. package/coverage/lcov-report/main/modules/focus.ts.html +1 -1
  44. package/coverage/lcov-report/main/modules/fonts.ts.html +1 -1
  45. package/coverage/lcov-report/main/modules/img.ts.html +4 -4
  46. package/coverage/lcov-report/main/modules/index.html +24 -24
  47. package/coverage/lcov-report/main/modules/input.ts.html +1 -1
  48. package/coverage/lcov-report/main/modules/mouse.ts.html +1 -1
  49. package/coverage/lcov-report/main/modules/network.ts.html +2 -2
  50. package/coverage/lcov-report/main/modules/performance.ts.html +1 -1
  51. package/coverage/lcov-report/main/modules/scroll.ts.html +1 -1
  52. package/coverage/lcov-report/main/modules/selection.ts.html +1 -1
  53. package/coverage/lcov-report/main/modules/tabs.ts.html +1 -1
  54. package/coverage/lcov-report/main/modules/tagWatcher.ts.html +95 -92
  55. package/coverage/lcov-report/main/modules/timing.ts.html +1 -1
  56. package/coverage/lcov-report/main/modules/userTesting/SignalManager.ts.html +1 -1
  57. package/coverage/lcov-report/main/modules/userTesting/dnd.ts.html +1 -1
  58. package/coverage/lcov-report/main/modules/userTesting/index.html +1 -1
  59. package/coverage/lcov-report/main/modules/userTesting/index.ts.html +1 -1
  60. package/coverage/lcov-report/main/modules/userTesting/recorder.ts.html +1 -1
  61. package/coverage/lcov-report/main/modules/userTesting/styles.ts.html +1 -1
  62. package/coverage/lcov-report/main/modules/userTesting/utils.ts.html +1 -1
  63. package/coverage/lcov-report/main/modules/viewport.ts.html +4 -4
  64. package/coverage/lcov-report/main/utils.ts.html +181 -31
  65. package/coverage/lcov-report/webworker/BatchWriter.ts.html +1 -1
  66. package/coverage/lcov-report/webworker/MessageEncoder.gen.ts.html +31 -7
  67. package/coverage/lcov-report/webworker/PrimitiveEncoder.ts.html +1 -1
  68. package/coverage/lcov-report/webworker/QueueSender.ts.html +48 -18
  69. package/coverage/lcov-report/webworker/index.html +14 -14
  70. package/coverage/lcov-report/webworker/index.ts.html +51 -21
  71. package/coverage/lcov.info +1882 -1653
  72. package/lib/app/canvas.d.ts +2 -1
  73. package/lib/app/canvas.js +27 -13
  74. package/lib/app/index.d.ts +6 -0
  75. package/lib/app/index.js +23 -4
  76. package/lib/index.js +1 -1
  77. package/package.json +1 -1
package/coverage/lcov-report/main/app/canvas.ts.html CHANGED
@@ -23,30 +23,30 @@
23
23
  <div class='clearfix'>
24
24
 
25
25
  <div class='fl pad1y space-right2'>
26
- <span class="strong">0% </span>
26
+ <span class="strong">19.38% </span>
27
27
  <span class="quiet">Statements</span>
28
- <span class='fraction'>0/75</span>
28
+ <span class='fraction'>19/98</span>
29
29
  </div>
30
30
 
31
31
 
32
32
  <div class='fl pad1y space-right2'>
33
- <span class="strong">0% </span>
33
+ <span class="strong">18.18% </span>
34
34
  <span class="quiet">Branches</span>
35
- <span class='fraction'>0/26</span>
35
+ <span class='fraction'>8/44</span>
36
36
  </div>
37
37
 
38
38
 
39
39
  <div class='fl pad1y space-right2'>
40
- <span class="strong">0% </span>
40
+ <span class="strong">10.52% </span>
41
41
  <span class="quiet">Functions</span>
42
- <span class='fraction'>0/16</span>
42
+ <span class='fraction'>2/19</span>
43
43
  </div>
44
44
 
45
45
 
46
46
  <div class='fl pad1y space-right2'>
47
- <span class="strong">0% </span>
47
+ <span class="strong">20.21% </span>
48
48
  <span class="quiet">Lines</span>
49
- <span class='fraction'>0/72</span>
49
+ <span class='fraction'>19/94</span>
50
50
  </div>
51
51
 
52
52
 
@@ -213,9 +213,68 @@
213
213
  <a name='L148'></a><a href='#L148'>148</a>
214
214
  <a name='L149'></a><a href='#L149'>149</a>
215
215
  <a name='L150'></a><a href='#L150'>150</a>
216
- <a name='L151'></a><a href='#L151'>151</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
217
- <span class="cline-any cline-no">&nbsp;</span>
218
- <span class="cline-any cline-no">&nbsp;</span>
216
+ <a name='L151'></a><a href='#L151'>151</a>
217
+ <a name='L152'></a><a href='#L152'>152</a>
218
+ <a name='L153'></a><a href='#L153'>153</a>
219
+ <a name='L154'></a><a href='#L154'>154</a>
220
+ <a name='L155'></a><a href='#L155'>155</a>
221
+ <a name='L156'></a><a href='#L156'>156</a>
222
+ <a name='L157'></a><a href='#L157'>157</a>
223
+ <a name='L158'></a><a href='#L158'>158</a>
224
+ <a name='L159'></a><a href='#L159'>159</a>
225
+ <a name='L160'></a><a href='#L160'>160</a>
226
+ <a name='L161'></a><a href='#L161'>161</a>
227
+ <a name='L162'></a><a href='#L162'>162</a>
228
+ <a name='L163'></a><a href='#L163'>163</a>
229
+ <a name='L164'></a><a href='#L164'>164</a>
230
+ <a name='L165'></a><a href='#L165'>165</a>
231
+ <a name='L166'></a><a href='#L166'>166</a>
232
+ <a name='L167'></a><a href='#L167'>167</a>
233
+ <a name='L168'></a><a href='#L168'>168</a>
234
+ <a name='L169'></a><a href='#L169'>169</a>
235
+ <a name='L170'></a><a href='#L170'>170</a>
236
+ <a name='L171'></a><a href='#L171'>171</a>
237
+ <a name='L172'></a><a href='#L172'>172</a>
238
+ <a name='L173'></a><a href='#L173'>173</a>
239
+ <a name='L174'></a><a href='#L174'>174</a>
240
+ <a name='L175'></a><a href='#L175'>175</a>
241
+ <a name='L176'></a><a href='#L176'>176</a>
242
+ <a name='L177'></a><a href='#L177'>177</a>
243
+ <a name='L178'></a><a href='#L178'>178</a>
244
+ <a name='L179'></a><a href='#L179'>179</a>
245
+ <a name='L180'></a><a href='#L180'>180</a>
246
+ <a name='L181'></a><a href='#L181'>181</a>
247
+ <a name='L182'></a><a href='#L182'>182</a>
248
+ <a name='L183'></a><a href='#L183'>183</a>
249
+ <a name='L184'></a><a href='#L184'>184</a>
250
+ <a name='L185'></a><a href='#L185'>185</a>
251
+ <a name='L186'></a><a href='#L186'>186</a>
252
+ <a name='L187'></a><a href='#L187'>187</a>
253
+ <a name='L188'></a><a href='#L188'>188</a>
254
+ <a name='L189'></a><a href='#L189'>189</a>
255
+ <a name='L190'></a><a href='#L190'>190</a>
256
+ <a name='L191'></a><a href='#L191'>191</a>
257
+ <a name='L192'></a><a href='#L192'>192</a>
258
+ <a name='L193'></a><a href='#L193'>193</a>
259
+ <a name='L194'></a><a href='#L194'>194</a>
260
+ <a name='L195'></a><a href='#L195'>195</a>
261
+ <a name='L196'></a><a href='#L196'>196</a>
262
+ <a name='L197'></a><a href='#L197'>197</a>
263
+ <a name='L198'></a><a href='#L198'>198</a>
264
+ <a name='L199'></a><a href='#L199'>199</a>
265
+ <a name='L200'></a><a href='#L200'>200</a>
266
+ <a name='L201'></a><a href='#L201'>201</a>
267
+ <a name='L202'></a><a href='#L202'>202</a>
268
+ <a name='L203'></a><a href='#L203'>203</a>
269
+ <a name='L204'></a><a href='#L204'>204</a>
270
+ <a name='L205'></a><a href='#L205'>205</a>
271
+ <a name='L206'></a><a href='#L206'>206</a>
272
+ <a name='L207'></a><a href='#L207'>207</a>
273
+ <a name='L208'></a><a href='#L208'>208</a>
274
+ <a name='L209'></a><a href='#L209'>209</a>
275
+ <a name='L210'></a><a href='#L210'>210</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
276
+ <span class="cline-any cline-yes">1x</span>
277
+ <span class="cline-any cline-yes">1x</span>
219
278
  <span class="cline-any cline-neutral">&nbsp;</span>
220
279
  <span class="cline-any cline-neutral">&nbsp;</span>
221
280
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -229,15 +288,18 @@
229
288
  <span class="cline-any cline-neutral">&nbsp;</span>
230
289
  <span class="cline-any cline-neutral">&nbsp;</span>
231
290
  <span class="cline-any cline-neutral">&nbsp;</span>
232
- <span class="cline-any cline-no">&nbsp;</span>
233
- <span class="cline-any cline-no">&nbsp;</span>
234
291
  <span class="cline-any cline-neutral">&nbsp;</span>
235
292
  <span class="cline-any cline-neutral">&nbsp;</span>
236
293
  <span class="cline-any cline-neutral">&nbsp;</span>
237
- <span class="cline-any cline-no">&nbsp;</span>
238
- <span class="cline-any cline-no">&nbsp;</span>
294
+ <span class="cline-any cline-yes">2x</span>
295
+ <span class="cline-any cline-yes">2x</span>
239
296
  <span class="cline-any cline-neutral">&nbsp;</span>
240
- <span class="cline-any cline-no">&nbsp;</span>
297
+ <span class="cline-any cline-neutral">&nbsp;</span>
298
+ <span class="cline-any cline-neutral">&nbsp;</span>
299
+ <span class="cline-any cline-yes">2x</span>
300
+ <span class="cline-any cline-yes">2x</span>
301
+ <span class="cline-any cline-neutral">&nbsp;</span>
302
+ <span class="cline-any cline-yes">2x</span>
241
303
  <span class="cline-any cline-neutral">&nbsp;</span>
242
304
  <span class="cline-any cline-neutral">&nbsp;</span>
243
305
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -249,26 +311,57 @@
249
311
  <span class="cline-any cline-neutral">&nbsp;</span>
250
312
  <span class="cline-any cline-neutral">&nbsp;</span>
251
313
  <span class="cline-any cline-neutral">&nbsp;</span>
314
+ <span class="cline-any cline-yes">2x</span>
252
315
  <span class="cline-any cline-no">&nbsp;</span>
253
316
  <span class="cline-any cline-no">&nbsp;</span>
317
+ <span class="cline-any cline-neutral">&nbsp;</span>
318
+ <span class="cline-any cline-neutral">&nbsp;</span>
319
+ <span class="cline-any cline-yes">2x</span>
320
+ <span class="cline-any cline-yes">2x</span>
321
+ <span class="cline-any cline-yes">2x</span>
254
322
  <span class="cline-any cline-no">&nbsp;</span>
255
323
  <span class="cline-any cline-neutral">&nbsp;</span>
256
324
  <span class="cline-any cline-neutral">&nbsp;</span>
325
+ <span class="cline-any cline-yes">2x</span>
326
+ <span class="cline-any cline-yes">2x</span>
327
+ <span class="cline-any cline-yes">1x</span>
328
+ <span class="cline-any cline-neutral">&nbsp;</span>
329
+ <span class="cline-any cline-neutral">&nbsp;</span>
330
+ <span class="cline-any cline-yes">1x</span>
331
+ <span class="cline-any cline-no">&nbsp;</span>
257
332
  <span class="cline-any cline-no">&nbsp;</span>
258
333
  <span class="cline-any cline-no">&nbsp;</span>
259
334
  <span class="cline-any cline-no">&nbsp;</span>
260
335
  <span class="cline-any cline-no">&nbsp;</span>
261
- <span class="cline-any cline-neutral">&nbsp;</span>
262
336
  <span class="cline-any cline-neutral">&nbsp;</span>
263
337
  <span class="cline-any cline-no">&nbsp;</span>
338
+ <span class="cline-any cline-neutral">&nbsp;</span>
339
+ <span class="cline-any cline-neutral">&nbsp;</span>
340
+ <span class="cline-any cline-neutral">&nbsp;</span>
341
+ <span class="cline-any cline-neutral">&nbsp;</span>
342
+ <span class="cline-any cline-neutral">&nbsp;</span>
343
+ <span class="cline-any cline-neutral">&nbsp;</span>
344
+ <span class="cline-any cline-neutral">&nbsp;</span>
345
+ <span class="cline-any cline-neutral">&nbsp;</span>
264
346
  <span class="cline-any cline-no">&nbsp;</span>
265
347
  <span class="cline-any cline-no">&nbsp;</span>
266
348
  <span class="cline-any cline-neutral">&nbsp;</span>
349
+ <span class="cline-any cline-neutral">&nbsp;</span>
350
+ <span class="cline-any cline-neutral">&nbsp;</span>
351
+ <span class="cline-any cline-neutral">&nbsp;</span>
352
+ <span class="cline-any cline-neutral">&nbsp;</span>
353
+ <span class="cline-any cline-neutral">&nbsp;</span>
354
+ <span class="cline-any cline-yes">1x</span>
355
+ <span class="cline-any cline-neutral">&nbsp;</span>
356
+ <span class="cline-any cline-neutral">&nbsp;</span>
357
+ <span class="cline-any cline-yes">2x</span>
267
358
  <span class="cline-any cline-no">&nbsp;</span>
268
359
  <span class="cline-any cline-no">&nbsp;</span>
269
360
  <span class="cline-any cline-neutral">&nbsp;</span>
270
361
  <span class="cline-any cline-neutral">&nbsp;</span>
271
362
  <span class="cline-any cline-neutral">&nbsp;</span>
363
+ <span class="cline-any cline-neutral">&nbsp;</span>
364
+ <span class="cline-any cline-neutral">&nbsp;</span>
272
365
  <span class="cline-any cline-no">&nbsp;</span>
273
366
  <span class="cline-any cline-no">&nbsp;</span>
274
367
  <span class="cline-any cline-no">&nbsp;</span>
@@ -280,12 +373,19 @@
280
373
  <span class="cline-any cline-neutral">&nbsp;</span>
281
374
  <span class="cline-any cline-no">&nbsp;</span>
282
375
  <span class="cline-any cline-no">&nbsp;</span>
376
+ <span class="cline-any cline-neutral">&nbsp;</span>
377
+ <span class="cline-any cline-neutral">&nbsp;</span>
378
+ <span class="cline-any cline-neutral">&nbsp;</span>
379
+ <span class="cline-any cline-neutral">&nbsp;</span>
380
+ <span class="cline-any cline-neutral">&nbsp;</span>
381
+ <span class="cline-any cline-no">&nbsp;</span>
283
382
  <span class="cline-any cline-no">&nbsp;</span>
284
383
  <span class="cline-any cline-no">&nbsp;</span>
285
384
  <span class="cline-any cline-no">&nbsp;</span>
286
385
  <span class="cline-any cline-neutral">&nbsp;</span>
287
386
  <span class="cline-any cline-neutral">&nbsp;</span>
288
387
  <span class="cline-any cline-neutral">&nbsp;</span>
388
+ <span class="cline-any cline-neutral">&nbsp;</span>
289
389
  <span class="cline-any cline-no">&nbsp;</span>
290
390
  <span class="cline-any cline-neutral">&nbsp;</span>
291
391
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -324,16 +424,33 @@
324
424
  <span class="cline-any cline-neutral">&nbsp;</span>
325
425
  <span class="cline-any cline-neutral">&nbsp;</span>
326
426
  <span class="cline-any cline-neutral">&nbsp;</span>
327
- <span class="cline-any cline-no">&nbsp;</span>
427
+ <span class="cline-any cline-yes">1x</span>
428
+ <span class="cline-any cline-neutral">&nbsp;</span>
429
+ <span class="cline-any cline-neutral">&nbsp;</span>
430
+ <span class="cline-any cline-neutral">&nbsp;</span>
328
431
  <span class="cline-any cline-neutral">&nbsp;</span>
329
432
  <span class="cline-any cline-neutral">&nbsp;</span>
330
433
  <span class="cline-any cline-neutral">&nbsp;</span>
331
434
  <span class="cline-any cline-neutral">&nbsp;</span>
332
435
  <span class="cline-any cline-neutral">&nbsp;</span>
333
436
  <span class="cline-any cline-neutral">&nbsp;</span>
437
+ <span class="cline-any cline-neutral">&nbsp;</span>
438
+ <span class="cline-any cline-neutral">&nbsp;</span>
439
+ <span class="cline-any cline-no">&nbsp;</span>
440
+ <span class="cline-any cline-no">&nbsp;</span>
441
+ <span class="cline-any cline-no">&nbsp;</span>
442
+ <span class="cline-any cline-no">&nbsp;</span>
443
+ <span class="cline-any cline-no">&nbsp;</span>
444
+ <span class="cline-any cline-no">&nbsp;</span>
334
445
  <span class="cline-any cline-no">&nbsp;</span>
335
446
  <span class="cline-any cline-no">&nbsp;</span>
336
447
  <span class="cline-any cline-neutral">&nbsp;</span>
448
+ <span class="cline-any cline-no">&nbsp;</span>
449
+ <span class="cline-any cline-no">&nbsp;</span>
450
+ <span class="cline-any cline-neutral">&nbsp;</span>
451
+ <span class="cline-any cline-no">&nbsp;</span>
452
+ <span class="cline-any cline-neutral">&nbsp;</span>
453
+ <span class="cline-any cline-neutral">&nbsp;</span>
337
454
  <span class="cline-any cline-neutral">&nbsp;</span>
338
455
  <span class="cline-any cline-neutral">&nbsp;</span>
339
456
  <span class="cline-any cline-no">&nbsp;</span>
@@ -343,6 +460,7 @@
343
460
  <span class="cline-any cline-no">&nbsp;</span>
344
461
  <span class="cline-any cline-no">&nbsp;</span>
345
462
  <span class="cline-any cline-no">&nbsp;</span>
463
+ <span class="cline-any cline-no">&nbsp;</span>
346
464
  <span class="cline-any cline-neutral">&nbsp;</span>
347
465
  <span class="cline-any cline-no">&nbsp;</span>
348
466
  <span class="cline-any cline-no">&nbsp;</span>
@@ -362,62 +480,96 @@
362
480
  <span class="cline-any cline-no">&nbsp;</span>
363
481
  <span class="cline-any cline-neutral">&nbsp;</span>
364
482
  <span class="cline-any cline-neutral">&nbsp;</span>
365
- <span class="cline-any cline-no">&nbsp;</span>
483
+ <span class="cline-any cline-yes">1x</span>
366
484
  <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import App from '../app/index.js'
367
- <span class="cstat-no" title="statement not covered" >import { hasTag } from './guards.js'</span>
368
- <span class="cstat-no" title="statement not covered" >import Message, { CanvasNode } from './messages.gen.js'</span>
485
+ import { hasTag } from './guards.js'
486
+ import Message, { CanvasNode } from './messages.gen.js'
369
487
  &nbsp;
370
488
  interface CanvasSnapshot {
371
489
  images: { data: string; id: number }[]
372
490
  createdAt: number
491
+ paused: boolean
492
+ dummy: HTMLCanvasElement
373
493
  }
374
494
  &nbsp;
375
495
  interface Options {
376
496
  fps: number
377
497
  quality: 'low' | 'medium' | 'high'
378
498
  isDebug?: boolean
499
+ fixedScaling?: boolean
379
500
  }
380
501
  &nbsp;
381
502
  class CanvasRecorder {
382
- private <span class="cstat-no" title="statement not covered" >snapshots: Record&lt;number, CanvasSnapshot&gt; = {}</span>
383
- private readonly <span class="cstat-no" title="statement not covered" >intervals: NodeJS.Timeout[] = []</span>
503
+ private snapshots: Record&lt;number, CanvasSnapshot&gt; = {}
504
+ private readonly intervals: NodeJS.Timeout[] = []
384
505
  private readonly interval: number
385
506
  &nbsp;
386
- <span class="fstat-no" title="function not covered" > constructor(</span>
387
- private readonly <span class="cstat-no" title="statement not covered" >app: App,</span>
388
- private readonly <span class="cstat-no" title="statement not covered" >options: Options,</span>
507
+ constructor(
508
+ private readonly app: App,
509
+ private readonly options: Options,
389
510
  ) {
390
- <span class="cstat-no" title="statement not covered" > this.interval = 1000 / options.fps</span>
511
+ this.interval = 1000 / options.fps
391
512
  }
392
513
  &nbsp;
393
514
  <span class="fstat-no" title="function not covered" > startTracking(</span>) {
394
515
  <span class="cstat-no" title="statement not covered" > setTimeout(<span class="fstat-no" title="function not covered" >() =</span>&gt; {</span>
395
- <span class="cstat-no" title="statement not covered" > this.app.nodes.scanTree(this.handleCanvasEl)</span>
516
+ <span class="cstat-no" title="statement not covered" > this.app.nodes.scanTree(this.captureCanvas)</span>
396
517
  <span class="cstat-no" title="statement not covered" > this.app.nodes.attachNodeCallback(<span class="fstat-no" title="function not covered" >(n</span>ode: Node): void =&gt; {</span>
397
- <span class="cstat-no" title="statement not covered" > this.handleCanvasEl(node)</span>
518
+ <span class="cstat-no" title="statement not covered" > this.captureCanvas(node)</span>
398
519
  })
399
520
  }, 500)
400
521
  }
401
522
  &nbsp;
402
- <span class="cstat-no" title="statement not covered" > restartTracking = <span class="fstat-no" title="function not covered" >() =</span>&gt; {</span>
523
+ restartTracking = <span class="fstat-no" title="function not covered" >() =</span>&gt; {
403
524
  <span class="cstat-no" title="statement not covered" > this.clear()</span>
404
- <span class="cstat-no" title="statement not covered" > this.app.nodes.scanTree(this.handleCanvasEl)</span>
525
+ <span class="cstat-no" title="statement not covered" > this.app.nodes.scanTree(this.captureCanvas)</span>
405
526
  }
406
527
  &nbsp;
407
- <span class="cstat-no" title="statement not covered" > handleCanvasEl = <span class="fstat-no" title="function not covered" >(n</span>ode: Node) =&gt; {</span>
408
- const id = <span class="cstat-no" title="statement not covered" >this.app.nodes.getID(node)</span>
409
- <span class="cstat-no" title="statement not covered" > <span class="missing-if-branch" title="if path not taken" >I</span>if (!id || !hasTag(node, 'canvas')) {</span>
528
+ captureCanvas = (node: Node) =&gt; {
529
+ const id = this.app.nodes.getID(node)
530
+ <span class="missing-if-branch" title="if path not taken" >I</span>if (!id || !hasTag(node, 'canvas')) {
410
531
  <span class="cstat-no" title="statement not covered" > return</span>
411
532
  }
412
533
  &nbsp;
413
- const isIgnored = <span class="cstat-no" title="statement not covered" >this.app.sanitizer.isObscured(id) || this.app.sanitizer.isHidden(id)</span>
414
- <span class="cstat-no" title="statement not covered" > <span class="missing-if-branch" title="if path not taken" >I</span>if (isIgnored || !hasTag(node, 'canvas') || this.snapshots[id]) {</span>
415
- <span class="cstat-no" title="statement not covered" > return</span>
534
+ const isIgnored = this.app.sanitizer.isObscured(id) || this.app.sanitizer.isHidden(id)
535
+ if (isIgnored || !hasTag(node, 'canvas') || this.snapshots[id]) {
536
+ return
416
537
  }
538
+ &nbsp;
539
+ const observer = new IntersectionObserver(<span class="fstat-no" title="function not covered" >(e</span>ntries) =&gt; {
540
+ <span class="cstat-no" title="statement not covered" > entries.forEach(<span class="fstat-no" title="function not covered" >(e</span>ntry) =&gt; {</span>
541
+ <span class="cstat-no" title="statement not covered" > <span class="missing-if-branch" title="if path not taken" >I</span>if (entry.isIntersecting) {</span>
542
+ <span class="cstat-no" title="statement not covered" > if (entry.target) {</span>
543
+ <span class="cstat-no" title="statement not covered" > if (this.snapshots[id] &amp;&amp; this.snapshots[id].createdAt) {</span>
544
+ <span class="cstat-no" title="statement not covered" > this.snapshots[id].paused = false</span>
545
+ } else {
546
+ <span class="cstat-no" title="statement not covered" > this.recordCanvas(entry.target, id)</span>
547
+ }
548
+ /**
549
+ * We can switch this to start observing when element is in the view
550
+ * but otherwise right now we're just pausing when it's not
551
+ * just to save some bandwidth and space on backend
552
+ * */
553
+ // observer.unobserve(entry.target)
554
+ } else {
555
+ <span class="cstat-no" title="statement not covered" > <span class="missing-if-branch" title="if path not taken" >I</span>if (this.snapshots[id]) {</span>
556
+ <span class="cstat-no" title="statement not covered" > this.snapshots[id].paused = true</span>
557
+ }
558
+ }
559
+ }
560
+ })
561
+ })
562
+ &nbsp;
563
+ observer.observe(node)
564
+ }
565
+ &nbsp;
566
+ recordCanvas = <span class="fstat-no" title="function not covered" >(n</span>ode: Node, id: number) =&gt; {
417
567
  const ts = <span class="cstat-no" title="statement not covered" >this.app.timestamp()</span>
418
568
  <span class="cstat-no" title="statement not covered" > this.snapshots[id] = {</span>
419
569
  images: [],
420
570
  createdAt: ts,
571
+ paused: false,
572
+ dummy: document.createElement('canvas'),
421
573
  }
422
574
  const canvasMsg = <span class="cstat-no" title="statement not covered" >CanvasNode(id.toString(), ts)</span>
423
575
  <span class="cstat-no" title="statement not covered" > this.app.send(canvasMsg as Message)</span>
@@ -428,11 +580,18 @@ class CanvasRecorder {
428
580
  <span class="cstat-no" title="statement not covered" > this.app.debug.log('Canvas element not in sync')</span>
429
581
  <span class="cstat-no" title="statement not covered" > clearInterval(int)</span>
430
582
  } else {
431
- const snapshot = <span class="cstat-no" title="statement not covered" >captureSnapshot(canvas, this.options.quality)</span>
432
- <span class="cstat-no" title="statement not covered" > this.snapshots[id].images.push({ id: this.app.timestamp(), data: snapshot })</span>
433
- <span class="cstat-no" title="statement not covered" > <span class="missing-if-branch" title="if path not taken" >I</span>if (this.snapshots[id].images.length &gt; 9) {</span>
434
- <span class="cstat-no" title="statement not covered" > this.sendSnaps(this.snapshots[id].images, id, this.snapshots[id].createdAt)</span>
583
+ <span class="cstat-no" title="statement not covered" > <span class="missing-if-branch" title="if path not taken" >I</span>if (!this.snapshots[id].paused) {</span>
584
+ const snapshot = <span class="cstat-no" title="statement not covered" >captureSnapshot(</span>
585
+ canvas,
586
+ this.options.quality,
587
+ this.snapshots[id].dummy,
588
+ this.options.fixedScaling,
589
+ )
590
+ <span class="cstat-no" title="statement not covered" > this.snapshots[id].images.push({ id: this.app.timestamp(), data: snapshot })</span>
591
+ <span class="cstat-no" title="statement not covered" > <span class="missing-if-branch" title="if path not taken" >I</span>if (this.snapshots[id].images.length &gt; 9) {</span>
592
+ <span class="cstat-no" title="statement not covered" > this.sendSnaps(this.snapshots[id].images, id, this.snapshots[id].createdAt)</span>
435
593
  <span class="cstat-no" title="statement not covered" > this.snapshots[id].images = []</span>
594
+ }
436
595
  }
437
596
  }
438
597
  }, this.interval)
@@ -474,19 +633,37 @@ class CanvasRecorder {
474
633
  }
475
634
  }
476
635
  &nbsp;
477
- const qualityInt = <span class="cstat-no" title="statement not covered" >{</span>
478
- low: 0.33,
636
+ const qualityInt = {
637
+ low: 0.35,
479
638
  medium: 0.55,
480
639
  high: 0.8,
481
640
  }
482
641
  &nbsp;
483
- function <span class="fstat-no" title="function not covered" >captureSnapshot(</span>canvas: HTMLCanvasElement, quality: 'low' | 'medium' | 'high' = <span class="branch-0 cbranch-no" title="branch not covered" >'medium')</span> {
642
+ function <span class="fstat-no" title="function not covered" >captureSnapshot(</span>
643
+ canvas: HTMLCanvasElement,
644
+ quality: 'low' | 'medium' | 'high' = <span class="branch-0 cbranch-no" title="branch not covered" >'medium',</span>
645
+ dummy: HTMLCanvasElement,
646
+ fixedScaling = <span class="branch-0 cbranch-no" title="branch not covered" >false,</span>
647
+ ) {
484
648
  const imageFormat = <span class="cstat-no" title="statement not covered" >'image/jpeg' </span>// or /png'
485
- <span class="cstat-no" title="statement not covered" > return canvas.toDataURL(imageFormat, qualityInt[quality])</span>
649
+ <span class="cstat-no" title="statement not covered" > if (fixedScaling) {</span>
650
+ const canvasScaleRatio = <span class="cstat-no" title="statement not covered" >window.devicePixelRatio || 1</span>
651
+ <span class="cstat-no" title="statement not covered" > dummy.width = canvas.width / canvasScaleRatio</span>
652
+ <span class="cstat-no" title="statement not covered" > dummy.height = canvas.height / canvasScaleRatio</span>
653
+ const ctx = <span class="cstat-no" title="statement not covered" >dummy.getContext('2d')</span>
654
+ <span class="cstat-no" title="statement not covered" > <span class="missing-if-branch" title="if path not taken" >I</span>if (!ctx) {</span>
655
+ <span class="cstat-no" title="statement not covered" > return ''</span>
656
+ }
657
+ <span class="cstat-no" title="statement not covered" > ctx.drawImage(canvas, 0, 0, dummy.width, dummy.height)</span>
658
+ <span class="cstat-no" title="statement not covered" > return dummy.toDataURL(imageFormat, qualityInt[quality])</span>
659
+ } else {
660
+ <span class="cstat-no" title="statement not covered" > return canvas.toDataURL(imageFormat, qualityInt[quality])</span>
661
+ }
486
662
  }
487
663
  &nbsp;
488
664
  function <span class="fstat-no" title="function not covered" >dataUrlToBlob(</span>dataUrl: string): [Blob, Uint8Array] | null {
489
665
  const [header, base64] = <span class="cstat-no" title="statement not covered" >dataUrl.split(',')</span>
666
+ <span class="cstat-no" title="statement not covered" > <span class="missing-if-branch" title="if path not taken" >I</span>if (!header || !base64) <span class="cstat-no" title="statement not covered" >return null</span></span>
490
667
  const encParts = <span class="cstat-no" title="statement not covered" >header.match(/:(.*?);/)</span>
491
668
  <span class="cstat-no" title="statement not covered" > <span class="missing-if-branch" title="if path not taken" >I</span>if (!encParts) <span class="cstat-no" title="statement not covered" >return null</span></span>
492
669
  const mime = <span class="cstat-no" title="statement not covered" >encParts[1]</span>
@@ -512,7 +689,7 @@ function <span class="fstat-no" title="function not covered" >saveImageData(</sp
512
689
  <span class="cstat-no" title="statement not covered" > document.body.removeChild(link)</span>
513
690
  }
514
691
  &nbsp;
515
- <span class="cstat-no" title="statement not covered" >export default CanvasRecorder</span>
692
+ export default CanvasRecorder
516
693
  &nbsp;</pre></td></tr></table></pre>
517
694
 
518
695
  <div class='push'></div><!-- for sticky footer -->
@@ -520,7 +697,7 @@ function <span class="fstat-no" title="function not covered" >saveImageData(</sp
520
697
  <div class='footer quiet pad2 space-top1 center small'>
521
698
  Code coverage generated by
522
699
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
523
- at 2024-01-23T12:19:37.435Z
700
+ at 2024-06-04T11:50:55.506Z
524
701
  </div>
525
702
  <script src="../../prettify.js"></script>
526
703
  <script>
package/coverage/lcov-report/main/app/guards.ts.html CHANGED
@@ -23,9 +23,9 @@
23
23
  <div class='clearfix'>
24
24
 
25
25
  <div class='fl pad1y space-right2'>
26
- <span class="strong">0% </span>
26
+ <span class="strong">56.25% </span>
27
27
  <span class="quiet">Statements</span>
28
- <span class='fraction'>0/16</span>
28
+ <span class='fraction'>9/16</span>
29
29
  </div>
30
30
 
31
31
 
@@ -37,16 +37,16 @@
37
37
 
38
38
 
39
39
  <div class='fl pad1y space-right2'>
40
- <span class="strong">0% </span>
40
+ <span class="strong">12.5% </span>
41
41
  <span class="quiet">Functions</span>
42
- <span class='fraction'>0/8</span>
42
+ <span class='fraction'>1/8</span>
43
43
  </div>
44
44
 
45
45
 
46
46
  <div class='fl pad1y space-right2'>
47
- <span class="strong">0% </span>
47
+ <span class="strong">56.25% </span>
48
48
  <span class="quiet">Lines</span>
49
- <span class='fraction'>0/16</span>
49
+ <span class='fraction'>9/16</span>
50
50
  </div>
51
51
 
52
52
 
@@ -61,7 +61,7 @@
61
61
  </div>
62
62
  </template>
63
63
  </div>
64
- <div class='status-line low'></div>
64
+ <div class='status-line medium'></div>
65
65
  <pre><table class="coverage">
66
66
  <tr><td class="line-count quiet"><a name='L1'></a><a href='#L1'>1</a>
67
67
  <a name='L2'></a><a href='#L2'>2</a>
@@ -113,31 +113,31 @@
113
113
  <a name='L48'></a><a href='#L48'>48</a>
114
114
  <a name='L49'></a><a href='#L49'>49</a>
115
115
  <a name='L50'></a><a href='#L50'>50</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
116
- <span class="cline-any cline-no">&nbsp;</span>
116
+ <span class="cline-any cline-yes">1x</span>
117
117
  <span class="cline-any cline-no">&nbsp;</span>
118
118
  <span class="cline-any cline-neutral">&nbsp;</span>
119
119
  <span class="cline-any cline-neutral">&nbsp;</span>
120
- <span class="cline-any cline-no">&nbsp;</span>
120
+ <span class="cline-any cline-yes">1x</span>
121
121
  <span class="cline-any cline-no">&nbsp;</span>
122
122
  <span class="cline-any cline-neutral">&nbsp;</span>
123
123
  <span class="cline-any cline-neutral">&nbsp;</span>
124
- <span class="cline-any cline-no">&nbsp;</span>
124
+ <span class="cline-any cline-yes">1x</span>
125
125
  <span class="cline-any cline-no">&nbsp;</span>
126
126
  <span class="cline-any cline-neutral">&nbsp;</span>
127
127
  <span class="cline-any cline-neutral">&nbsp;</span>
128
- <span class="cline-any cline-no">&nbsp;</span>
128
+ <span class="cline-any cline-yes">1x</span>
129
129
  <span class="cline-any cline-no">&nbsp;</span>
130
130
  <span class="cline-any cline-neutral">&nbsp;</span>
131
131
  <span class="cline-any cline-neutral">&nbsp;</span>
132
- <span class="cline-any cline-no">&nbsp;</span>
132
+ <span class="cline-any cline-yes">1x</span>
133
133
  <span class="cline-any cline-no">&nbsp;</span>
134
134
  <span class="cline-any cline-neutral">&nbsp;</span>
135
135
  <span class="cline-any cline-neutral">&nbsp;</span>
136
- <span class="cline-any cline-no">&nbsp;</span>
136
+ <span class="cline-any cline-yes">1x</span>
137
137
  <span class="cline-any cline-no">&nbsp;</span>
138
138
  <span class="cline-any cline-neutral">&nbsp;</span>
139
139
  <span class="cline-any cline-neutral">&nbsp;</span>
140
- <span class="cline-any cline-no">&nbsp;</span>
140
+ <span class="cline-any cline-yes">1x</span>
141
141
  <span class="cline-any cline-no">&nbsp;</span>
142
142
  <span class="cline-any cline-neutral">&nbsp;</span>
143
143
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -154,39 +154,39 @@
154
154
  <span class="cline-any cline-neutral">&nbsp;</span>
155
155
  <span class="cline-any cline-neutral">&nbsp;</span>
156
156
  <span class="cline-any cline-neutral">&nbsp;</span>
157
- <span class="cline-any cline-no">&nbsp;</span>
157
+ <span class="cline-any cline-yes">1x</span>
158
158
  <span class="cline-any cline-neutral">&nbsp;</span>
159
159
  <span class="cline-any cline-neutral">&nbsp;</span>
160
160
  <span class="cline-any cline-neutral">&nbsp;</span>
161
161
  <span class="cline-any cline-neutral">&nbsp;</span>
162
- <span class="cline-any cline-no">&nbsp;</span>
162
+ <span class="cline-any cline-yes">3x</span>
163
163
  <span class="cline-any cline-neutral">&nbsp;</span>
164
164
  <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">//@ts-ignore
165
- <span class="cstat-no" title="statement not covered" >export function <span class="fstat-no" title="function not covered" >i</span>sNode(</span>sth: any): sth is Node {
165
+ export function <span class="fstat-no" title="function not covered" >isNode(</span>sth: any): sth is Node {
166
166
  <span class="cstat-no" title="statement not covered" > return !!sth &amp;&amp; sth.nodeType != null</span>
167
167
  }
168
168
  &nbsp;
169
- <span class="cstat-no" title="statement not covered" >export function <span class="fstat-no" title="function not covered" >i</span>sSVGElement(</span>node: Element): node is SVGElement {
169
+ export function <span class="fstat-no" title="function not covered" >isSVGElement(</span>node: Element): node is SVGElement {
170
170
  <span class="cstat-no" title="statement not covered" > return node.namespaceURI === 'http://www.w3.org/2000/svg'</span>
171
171
  }
172
172
  &nbsp;
173
- <span class="cstat-no" title="statement not covered" >export function <span class="fstat-no" title="function not covered" >i</span>sElementNode(</span>node: Node): node is Element {
173
+ export function <span class="fstat-no" title="function not covered" >isElementNode(</span>node: Node): node is Element {
174
174
  <span class="cstat-no" title="statement not covered" > return node.nodeType === Node.ELEMENT_NODE</span>
175
175
  }
176
176
  &nbsp;
177
- <span class="cstat-no" title="statement not covered" >export function <span class="fstat-no" title="function not covered" >i</span>sCommentNode(</span>node: Node): node is Comment {
177
+ export function <span class="fstat-no" title="function not covered" >isCommentNode(</span>node: Node): node is Comment {
178
178
  <span class="cstat-no" title="statement not covered" > return node.nodeType === Node.COMMENT_NODE</span>
179
179
  }
180
180
  &nbsp;
181
- <span class="cstat-no" title="statement not covered" >export function <span class="fstat-no" title="function not covered" >i</span>sTextNode(</span>node: Node): node is Text {
181
+ export function <span class="fstat-no" title="function not covered" >isTextNode(</span>node: Node): node is Text {
182
182
  <span class="cstat-no" title="statement not covered" > return node.nodeType === Node.TEXT_NODE</span>
183
183
  }
184
184
  &nbsp;
185
- <span class="cstat-no" title="statement not covered" >export function <span class="fstat-no" title="function not covered" >i</span>sDocument(</span>node: Node): node is Document {
185
+ export function <span class="fstat-no" title="function not covered" >isDocument(</span>node: Node): node is Document {
186
186
  <span class="cstat-no" title="statement not covered" > return node.nodeType === Node.DOCUMENT_NODE</span>
187
187
  }
188
188
  &nbsp;
189
- <span class="cstat-no" title="statement not covered" >export function <span class="fstat-no" title="function not covered" >i</span>sRootNode(</span>node: Node): node is Document | DocumentFragment {
189
+ export function <span class="fstat-no" title="function not covered" >isRootNode(</span>node: Node): node is Document | DocumentFragment {
190
190
  <span class="cstat-no" title="statement not covered" > return node.nodeType === Node.DOCUMENT_NODE || node.nodeType === Node.DOCUMENT_FRAGMENT_NODE</span>
191
191
  }
192
192
  &nbsp;
@@ -203,12 +203,12 @@ type TagTypeMap = {
203
203
  link: HTMLLinkElement
204
204
  canvas: HTMLCanvasElement
205
205
  }
206
- <span class="cstat-no" title="statement not covered" >export function <span class="fstat-no" title="function not covered" >h</span>asTag&lt;</span>T extends keyof TagTypeMap&gt;(
206
+ export function hasTag&lt;T extends keyof TagTypeMap&gt;(
207
207
  el: Node,
208
208
  tagName: T,
209
209
  ): el is TagTypeMap[typeof tagName] {
210
210
  // @ts-ignore
211
- <span class="cstat-no" title="statement not covered" > return el.localName === tagName</span>
211
+ return el.localName === tagName
212
212
  }
213
213
  &nbsp;</pre></td></tr></table></pre>
214
214
 
@@ -217,7 +217,7 @@ type TagTypeMap = {
217
217
  <div class='footer quiet pad2 space-top1 center small'>
218
218
  Code coverage generated by
219
219
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
220
- at 2024-01-23T12:19:37.435Z
220
+ at 2024-06-04T11:50:55.506Z
221
221
  </div>
222
222
  <script src="../../prettify.js"></script>
223
223
  <script>