From 4748be58d340d5d92bb0314eed2206a1cd109bf5 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Wed, 1 Apr 2026 12:00:00 +0800
Subject: [PATCH] enable click to play and update rrweb

---
 package.json        |  2 +-
 src/Controller.html | 19 ++++++++++++++++---
 src/Player.html     |  3 +++
 3 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index e055b939..eb8c40a9 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
     "svelte": "^2.16.0"
   },
   "dependencies": {
-    "rrweb": "^0.7.9"
+    "rrweb": "^0.7.11"
   },
   "scripts": {
     "build": "rollup -c",
diff --git a/src/Controller.html b/src/Controller.html
index f95ce5c2..3af4c71c 100644
--- a/src/Controller.html
+++ b/src/Controller.html
@@ -2,7 +2,11 @@
 <div class="rr-controller">
   <div class="rr-timeline">
     <span class="rr-timeline__time">{formatTime(currentTime)}</span>
-    <div class="rr-progress" ref:progress>
+    <div
+      class="rr-progress"
+      class:disabled="isSkipping"
+      ref:progress on:click="handleProgressClick(event)"
+    >
       <div class="rr-progress__step" ref:step style="width: {percentage}"></div>
       <div
         class="rr-progress__handler"
@@ -155,6 +159,10 @@
         }
       },
       handleProgressClick(event) {
+        const { meta, replayer, isPlaying, isSkipping } = this.get();
+        if (isSkipping) {
+          return;
+        }
         const progressRect = this.refs.progress.getBoundingClientRect();
         const x = event.clientX - progressRect.left;
         let percent = x / progressRect.width;
@@ -163,7 +171,6 @@
         } else if (percent > 1) {
           percent = 1;
         }
-        const { meta, replayer, isPlaying } = this.get();
         const timeOffset = meta.totalTime * percent;
         this.set({ currentTime: timeOffset });
         replayer.play(timeOffset);
@@ -254,7 +261,13 @@
     background: #eee;
     position: relative;
     border-radius: 3px;
-    /* cursor: pointer; */
+    cursor: pointer;
+    border-top: solid 4px #fff;
+    border-bottom: solid 4px #fff;
+  }
+
+  .rr-progress.disabled {
+    cursor: not-allowed;
   }
 
   .rr-progress__step {
diff --git a/src/Player.html b/src/Player.html
index 6ec461a4..674d7220 100644
--- a/src/Player.html
+++ b/src/Player.html
@@ -64,6 +64,9 @@
         const { replayer } = this.get();
         replayer.on(event, handler);
       },
+      addEvent(event) {
+        replayer.addEvent(event);
+      },
     },
     oncreate() {
       const { events } = this.get();