impl auto play

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