From 750ed8b69e1d8159606e93fdc4d1574fccb31ad1 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Wed, 1 Apr 2026 12:00:00 +0800
Subject: [PATCH] impl auto play

---
 package.json        |  2 +-
 public/index.html   |  1 +
 src/Controller.html | 10 +++++++++-
 src/Player.html     |  4 +++-
 src/utils.js        |  3 +++
 5 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index a96ac663..5049bcec 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
     "svelte": "^2.16.0"
   },
   "dependencies": {
-    "rrweb": "^0.7.2"
+    "rrweb": "^0.7.7"
   },
   "scripts": {
     "build": "rollup -c",
diff --git a/public/index.html b/public/index.html
index 857cd297..8dafb1ed 100644
--- a/public/index.html
+++ b/public/index.html
@@ -19,6 +19,7 @@
         target: document.body,
         data: {
           events,
+          autoPlay: false,
         },
       });
     </script>
diff --git a/src/Controller.html b/src/Controller.html
index f9878b15..f95ce5c2 100644
--- a/src/Controller.html
+++ b/src/Controller.html
@@ -175,11 +175,19 @@
     onupdate({ changed, current, previous }) {
       if (current.replayer && !previous) {
         window.replayer = current.replayer;
-        // auto play
         setTimeout(() => {
           this.set({ isPlaying: true });
         }, 0);
         current.replayer.play(0);
+        if (!current.autoPlay) {
+          let firstFullSnapshotRebuilded = false;
+          current.replayer.on('fullsnapshot-rebuilded', () => {
+            if (!firstFullSnapshotRebuilded) {
+              firstFullSnapshotRebuilded = true;
+              current.replayer.pause();
+            }
+          });
+        }
         current.replayer.on('pause', () => {
           this.set({ isPlaying: false });
         });
diff --git a/src/Player.html b/src/Player.html
index d4524723..09d4958f 100644
--- a/src/Player.html
+++ b/src/Player.html
@@ -1,7 +1,7 @@
 <div class="rr-player" ref:player style="{playerStyle}">
   <div class="rr-player__frame" ref:frame { style }></div>
   {#if replayer}
-  <Controller { replayer } {showController} on:fullscreen="fullscreen()" />
+  <Controller { replayer } {showController} {autoPlay} on:fullscreen="fullscreen()" />
   {/if}
 </div>
 
@@ -28,6 +28,7 @@
         width: 1024,
         height: 576,
         events: [],
+        autoPlay: true,
         replayer: null,
       };
     },
@@ -66,6 +67,7 @@
         speed: 1,
         root: this.refs.frame,
         skipInactive: true,
+        showWarning: true,
       });
       replayer.on('resize', (dimension) =>
         this.updateScale(replayer.wrapper, dimension)
diff --git a/src/utils.js b/src/utils.js
index 985ef40a..fbb808db 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -21,6 +21,9 @@ const SECOND = 1000;
 const MINUTE = 60 * SECOND;
 const HOUR = 60 * MINUTE;
 export function formatTime(ms) {
+  if (ms <= 0) {
+    return '00:00';
+  }
   const hour = Math.floor(ms / HOUR);
   ms = ms % HOUR;
   const minute = Math.floor(ms / MINUTE);