recording tweaks & fixes

src/components/Player.vue

@@ -15,7 +15,8 @@
         <input type="checkbox" v-model="record" id="recordMode">
       </div>
       <div>
-        <input type="range" min="0" :max="frames - 1" value="0" class="slider" v-model.number="position">
+        <input type="range" min="0" :max="frames - 1" value="0" class="slider"
+               v-model.number="position" :disabled=record>
       </div>
       <div>
         <button @click="playPause">{{buttonLabel}}</button>
@@ -48,7 +49,6 @@
     data: function () {
       return {
         image: null,
-        buttonLabel: 'PLAY',
         playing: false,
         zoom: 1,
         fullscreen: false,
@@ -116,6 +116,17 @@
         } else {
           return sequence
         }
+      },
+      buttonLabel: function () {
+        if (!this.playing) {
+          if (this.record) {
+            return 'RECORD'
+          } else {
+            return 'PLAY'
+          }
+        } else {
+          return 'STOP'
+        }
       }
     },
     mounted: function () {
@@ -141,11 +152,14 @@
         this.$render()
       },
       record: function () {
-        if (this.record && !bowser.chrome) {
+        if (this.record) {
+          this.position = 0
+          if (!bowser.chrome) {
             alert('Recording only supported in Chrome :( \n' +
               'https://github.com/spite/ccapture.js/#limitations')
           }
         }
+      }
     },
     methods: {
       playPause: function () {
@@ -154,13 +168,11 @@
         }
         this.playing = !this.playing
         if (this.playing) {
-          this.buttonLabel = 'STOP'
           this.tmp_ctx = this.$refs.canvas.getContext('2d')
           if (this.record) this.capturer.start()
           this.$render_advance()
         } else {
           cancelAnimationFrame(this.animation_id)
-          this.buttonLabel = 'PLAY'
         }
       },
       clear: function (style) {
@@ -187,8 +199,8 @@
           this.playPause()
           this.position = 0
           if (this.record) {
-            this.record.stop()
-            this.record.save()
+            this.capturer.stop()
+            this.capturer.save()
           }
         }
       }