enable click to play and update rrweb

package.json

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

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 {

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