apply viewport resize and input event changes

src/index.ts

@@ -1,4 +1,5 @@
 import record from './record';
 import replay from './replay';
+import { mirror } from './utils';
 
-export { record, replay };
+export { record, replay, mirror };

src/replay/index.ts

@@ -1,5 +1,4 @@
 import { rebuild } from 'rrweb-snapshot';
-import { mirror } from '../utils';
 import later from './timer';
 import {
   EventType,
@@ -63,6 +62,8 @@ class Replayer {
   }
 
   private getDelay(event: eventWithTime): number {
+    // Mouse move events was recorded in a throttle function,
+    // so we need to find the real timestamp by traverse the time offsets.
     if (
       event.type === EventType.IncrementalSnapshot &&
       event.data.source === IncrementalSource.MouseMove
@@ -82,8 +83,7 @@ class Replayer {
   }
 
   private rebuildFullSnapshot(event: fullSnapshotEvent) {
-    const [doc, map] = rebuild(event.data.node);
+    const doc = rebuild(event.data.node);
-    mirror.map = map;
     if (doc) {
       this.iframe.contentDocument!.open();
       // https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML
@@ -120,7 +120,19 @@ class Replayer {
         });
         break;
       case IncrementalSource.ViewportResize:
-      case IncrementalSource.Input:
+        this.iframe.width = `${d.width}px`;
+        this.iframe.height = `${d.height}px`;
+        break;
+      case IncrementalSource.Input: {
+        const target: HTMLInputElement | null = this.iframe.contentDocument!.querySelector(
+          `[data-rrid="${d.id}"]`,
+        );
+        if (target) {
+          target.checked = d.isChecked;
+          target.value = d.text;
+        }
+        break;
+      }
       default:
     }
   }

src/replay/styles/style.css

@@ -3,8 +3,16 @@
 }
 .replayer-mouse {
   position: absolute;
+  width: 1px;
+  height: 1px;
+}
+.replayer-mouse::after {
+  content: '';
+  display: inline-block;
   width: 20px;
   height: 20px;
   border-radius: 10px;
   background: thistle;
+  transform: translate(-10px, -10px);
+  opacity: 0.5;
 }

src/replay/timer.ts

@@ -1,10 +1,10 @@
 const FRAME_MS = 16;
 
-function later(cb: () => void, delayMs: number) {
+function later(cb: () => void, delayMs: number, speed = 1) {
   const now = performance.now();
 
   function check(step: number) {
-    if (step - now > delayMs - FRAME_MS) {
+    if (step - now > delayMs / speed - FRAME_MS) {
       cb();
     } else {
       requestAnimationFrame(check);