@screeb/rrweb 1.0.16 → 1.0.18

package/dist/rrweb.js

@@ -8507,7 +8507,15 @@ const defaultMouseTailConfig = {
   strokeStyle: "red"
 };
 function indicatesTouchDevice(e2) {
-  return e2.type == EventType.IncrementalSnapshot && (e2.data.source == IncrementalSource.TouchMove || e2.data.source == IncrementalSource.MouseInteraction && e2.data.type == MouseInteractions.TouchStart);
+  if (e2.type !== EventType.IncrementalSnapshot) {
+    return false;
+  }
+  const data = e2.data;
+  if (data.source === IncrementalSource.MouseInteraction && data.type === MouseInteractions.TouchStart) {
+    const mouseData = data;
+    return mouseData.pointerType === PointerTypes.Touch;
+  }
+  return false;
 }
 function getPointerId(d) {
   const pointerId = "pointerId" in d && typeof d.pointerId === "number" ? d.pointerId : -1;
@@ -10189,34 +10197,38 @@ class Replayer {
       return;
     }
     const { lineCap, lineWidth, strokeStyle, duration } = this.config.mouseTail === true ? defaultMouseTailConfig : Object.assign({}, defaultMouseTailConfig, this.config.mouseTail);
-    const draw = () => {
-      if (!pointer || !pointer.mouseTail) {
-        return;
-      }
-      const mouseTail = pointer.mouseTail;
-      const ctx = mouseTail.getContext("2d");
-      if (!ctx || !pointer.tailPositions.length) {
-        return;
-      }
-      ctx.clearRect(0, 0, mouseTail.width, mouseTail.height);
-      ctx.beginPath();
+    const now = typeof performance !== "undefined" ? performance.now() : Date.now();
+    const maxAge = duration / this.speedService.state.context.timer.speed;
+    pointer.tailPositions.push({ x: position.x, y: position.y, t: now });
+    pointer.tailPositions = pointer.tailPositions.filter(
+      (p) => now - p.t <= maxAge
+    );
+    const mouseTail = pointer.mouseTail;
+    const ctx = mouseTail.getContext("2d");
+    if (!ctx) {
+      return;
+    }
+    ctx.clearRect(0, 0, mouseTail.width, mouseTail.height);
+    if (pointer.tailPositions.length > 1) {
       ctx.lineWidth = lineWidth;
       ctx.lineCap = lineCap;
       ctx.strokeStyle = strokeStyle;
-      ctx.moveTo(pointer.tailPositions[0].x, pointer.tailPositions[0].y);
-      pointer.tailPositions.forEach((p) => ctx.lineTo(p.x, p.y));
-      ctx.stroke();
-    };
-    pointer.tailPositions.push(position);
-    draw();
-    setTimeout$1(() => {
-      if (pointerId in this.pointers) {
-        pointer.tailPositions = pointer.tailPositions.filter(
-          (p) => p !== position
-        );
-        draw();
+      for (let i2 = 1; i2 < pointer.tailPositions.length; i2++) {
+        const prev = pointer.tailPositions[i2 - 1];
+        const curr = pointer.tailPositions[i2];
+        const age = (now - curr.t) / maxAge;
+        const alpha = Math.max(0, 1 - age);
+        if (alpha <= 0) {
+          continue;
+        }
+        ctx.globalAlpha = alpha;
+        ctx.beginPath();
+        ctx.moveTo(prev.x, prev.y);
+        ctx.lineTo(curr.x, curr.y);
+        ctx.stroke();
       }
-    }, duration / this.speedService.state.context.timer.speed);
+      ctx.globalAlpha = 1;
+    }
   }
   hoverElements(el) {
     const iframeDoc = getIFrameContentDocument(this.iframe);