impl auto play

package.json

@@ -16,7 +16,7 @@
     "svelte": "^2.16.0"
   },
   "dependencies": {
-    "rrweb": "^0.7.2"
+    "rrweb": "^0.7.7"
   },
   "scripts": {
     "build": "rollup -c",

public/index.html

@@ -19,6 +19,7 @@
         target: document.body,
         data: {
           events,
+          autoPlay: false,
         },
       });
     </script>

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 });
         });

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)

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);