add speed setter and option for display controller or not

src/App.html

@@ -1,14 +0,0 @@
-<Player {events} />
-
-<style>
-</style>
-
-<script>
-  import Player from './Player.html';
-
-  export default {
-    components: {
-      Player,
-    },
-  };
-</script>

src/Controller.html

@@ -1,3 +1,4 @@
+{#if showController}
 <div class="rr-controller">
   <div class="rr-timeline">
     <span class="rr-timeline__time">{formatTime(currentTime)}</span>
@@ -12,10 +13,11 @@
       {isPlaying ? 'pause' : 'play'}
     </button>
     {#each [1, 2, 4, 8] as s}
-    <button class:active="s === speed" on:click="set({ speed: s })">{s}x</button>
+    <button class:active="s === speed" on:click="setSpeed(s)">{s}x</button>
     {/each}
   </div>
 </div>
+{/if}
 
 <script>
   import { formatTime } from './utils.js';
@@ -69,8 +71,8 @@
         requestAnimationFrame(update);
       },
       play() {
-        const { replayer } = this.get();
-        // replayer.play();
+        const { replayer, currentTime } = this.get();
+        replayer.play(currentTime);
         this.loopTimer();
       },
       pause() {
@@ -86,6 +88,11 @@
           this.play();
         }
       },
+      setSpeed(speed) {
+        const { replayer } = this.get();
+        replayer.setConfig({ speed });
+        this.set({ speed });
+      },
     },
     onupdate({ changed, current, previous }) {
       if (current.replayer && !previous) {
@@ -94,6 +101,12 @@
         this.play();
       }
     },
+    ondestroy() {
+      const { isPlaying } = this.get();
+      if (isPlaying) {
+        this.pause();
+      }
+    },
   };
 </script>
 

src/Player.html

@@ -1,7 +1,7 @@
 <div class="rr-player">
   <div class="rr-player__frame" ref:frame { style }></div>
   {#if replayer}
-  <Controller { replayer } />
+  <Controller { replayer } {showController} />
   {/if}
 </div>
 
@@ -15,6 +15,7 @@
     },
     data() {
       return {
+        showController: true,
         width: 1024,
         height: 576,
         events: [],