From 8c97483c3e6c366b91a3e2f7de85a7276228cbe0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Ml=C3=A1dek?= <tmladek@inventati.org>
Date: Thu, 25 Jan 2018 11:43:14 +0100
Subject: [PATCH] fix video position slider & playback crashes

---
 src/components/Player.vue | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/Player.vue b/src/components/Player.vue
index 16172e6..c94600d 100644
--- a/src/components/Player.vue
+++ b/src/components/Player.vue
@@ -4,8 +4,8 @@
       <canvas ref="canvas" id="player-canvas" :height="height" :width="width"></canvas>
     </div>
     <div>
-      <label for="posSlider">POS</label>
-      <input type="range" min="0" :max="frames - 1" value="0" class="slider" id="posSlider" v-model="position">
+      <!--suppress HtmlFormInputWithoutLabel -->
+      <input type="range" min="0" :max="frames - 1" value="0" class="slider" v-model.number="position">
     </div>
     <button @click="playPause">{{buttonLabel}}</button>
   </div>
@@ -60,6 +60,9 @@
     },
     methods: {
       playPause: function () {
+        if (this.frames === 0) {
+          return
+        }
         this.playing = !this.playing
         if (this.playing) {
           this.tmp_ctx = this.$refs.canvas.getContext('2d')
@@ -88,7 +91,10 @@
         this.$render()
         if (this.position < this.frames) {
           this.position += 1
-          requestAnimationFrame(this.$render_advance)
+          this.animation_id = requestAnimationFrame(this.$render_advance)
+        } else {
+          this.playPause()
+          this.position = 0
         }
       }
     }