enable click to play and update rrweb

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 {