jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(tracker): dynamic canvas start/stop observer

Browse source
This commit is contained in:
nick-delirium 2024-02-07 11:56:33 +01:00
parent 3c12a0fcab
commit 4bb19ecf99
1 changed files with 40 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
tracker/tracker/src/main/app/canvas.ts
View file

@ -5,6 +5,7 @@ import Message, { CanvasNode } from './messages.gen.js'
interface CanvasSnapshot {
images: { data: string; id: number }[]
createdAt: number
paused: boolean
}
interface Options {
@ -27,19 +28,19 @@ class CanvasRecorder {
startTracking() {
setTimeout(() => {
this.app.nodes.scanTree(this.handleCanvasEl)
this.app.nodes.scanTree(this.captureCanvas)
this.app.nodes.attachNodeCallback((node: Node): void => {
this.handleCanvasEl(node)
this.captureCanvas(node)
})
}, 500)
}
restartTracking = () => {
this.clear()
this.app.nodes.scanTree(this.handleCanvasEl)
this.app.nodes.scanTree(this.captureCanvas)
}
handleCanvasEl = (node: Node) => {
captureCanvas = (node: Node) => {
const id = this.app.nodes.getID(node)
if (!id || !hasTag(node, 'canvas')) {
return
@ -49,10 +50,38 @@ class CanvasRecorder {
if (isIgnored || !hasTag(node, 'canvas') || this.snapshots[id]) {
return
}
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
if (entry.target) {
if (this.snapshots[id].createdAt) {
this.snapshots[id].paused = false
} else {
this.recordCanvas(entry.target, id)
}
/**
* We can switch this to start observing when element is in the view
* but otherwise right now we're just pausing when it's not
* just to save some bandwidth and space on backend
* */
// observer.unobserve(entry.target)
} else {
this.snapshots[id].paused = true
}
}
})
})
observer.observe(node)
}
recordCanvas = (node: Node, id: number) => {
const ts = this.app.timestamp()
this.snapshots[id] = {
images: [],
createdAt: ts,
paused: false,
}
const canvasMsg = CanvasNode(id.toString(), ts)
this.app.send(canvasMsg as Message)
@ -63,11 +92,13 @@ class CanvasRecorder {
this.app.debug.log('Canvas element not in sync')
clearInterval(int)
} else {
const snapshot = captureSnapshot(canvas, this.options.quality)
this.snapshots[id].images.push({ id: this.app.timestamp(), data: snapshot })
if (this.snapshots[id].images.length > 9) {
this.sendSnaps(this.snapshots[id].images, id, this.snapshots[id].createdAt)
this.snapshots[id].images = []
if (!this.snapshots[id].paused) {
const snapshot = captureSnapshot(canvas, this.options.quality)
this.snapshots[id].images.push({ id: this.app.timestamp(), data: snapshot })
if (this.snapshots[id].images.length > 9) {
this.sendSnaps(this.snapshots[id].images, id, this.snapshots[id].createdAt)
this.snapshots[id].images = []
}
}
}
}, this.interval)