loop & fullscreen

refactor playing/recoridng/pausing functions

src/components/Player.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="player" :class="{fullscreen: fullscreen}">
+  <div id="player">
     <div>
       <label for="zoom">Zoom:</label>
       <input type="number" min="1" :max="50" value="1" class="slider" v-model.number="zoom" id="zoom">
@@ -9,17 +9,19 @@
               :height="canvas_height" :width="canvas_width">
       </canvas>
     </div>
-    <div id="controls" class="{'fullscreen-controls': fullscreen}">
+    <div id="controls">
-      <div>
-        <label for="recordMode">Record output</label>
-        <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" :disabled=record>
+               v-model.number="position" :disabled=recording>
       </div>
       <div>
-        <button @click="playPause">{{buttonLabel}}</button>
+        <button @click="playOnceOrPause">{{!this.playing ? "PLAY ONCE" : "STOP"}}</button>
+      </div>
+      <div>
+        <button @click="recordSequence">RECORD</button>
+      </div>
+      <div>
+        <button @click="loopFullscreen">LOOP & FULLSCREEN</button>
       </div>
       <div>
         <label for="sort">Sort by size</label>
@@ -56,14 +58,14 @@ export default {
       image: null,
       playing: false,
       zoom: 1,
-      fullscreen: false,
+      recording: false,
+      looping: false,
       sortBySize: false,
       sortDirection: false,
       discardPartial: false,
       position: 0,
       tmp_ctx: null,
       animation_id: null,
-      record: false,
       capturer: new CCapture({
         format: "webm",
         verbose: true,
@@ -123,17 +125,6 @@ export default {
         return sequence;
       }
     },
-    buttonLabel: function () {
-      if (!this.playing) {
-        if (this.record) {
-          return "RECORD";
-        } else {
-          return "PLAY";
-        }
-      } else {
-        return "STOP";
-      }
-    },
   },
   mounted: function () {
     this.$bus.$on("imageLoaded", (image) => {
@@ -160,35 +151,89 @@ export default {
       this.tmp_ctx = this.$refs.canvas.getContext("2d");
       this.$render();
     },
-    record: function () {
+    looping: function () {
-      if (this.record) {
+      this.recording = false;
+    },
+    recording: function () {
+      if (this.recording) {
         this.position = 0;
         if (!bowser.chrome) {
           alert("Recording only supported in Chrome :( \n" +
             "https://github.com/spite/ccapture.js/#limitations");
         }
       }
+      this.looping = false;
     },
   },
   methods: {
-    playPause: function () {
+    play: function () {
       if (this.frames === 0) {
         return;
       }
-      this.playing = !this.playing;
+      if (!this.playing) {
-      if (this.playing) {
+        // eslint-disable-next-line no-console
+        console.log("STARTED");
         this.tmp_ctx = this.$refs.canvas.getContext("2d");
-        if (this.record) this.capturer.start();
         this.$render_advance();
-      } else {
+        this.playing = true;
-        cancelAnimationFrame(this.animation_id);
       }
     },
+    stop: function () {
+      if (this.playing) {
+        // eslint-disable-next-line no-console
+        console.log("STOPPED");
+        cancelAnimationFrame(this.animation_id);
+        this.playing = false;
+      }
+    },
+    playOnceOrPause: function () {
+      if (!this.playing) {
+        this.looping = false;
+        this.recording = false;
+        this.position = 0;
+        this.play();
+      } else {
+        this.stop();
+      }
+    },
+    recordSequence: function () {
+      this.looping = false;
+      this.recording = true;
+      this.stop();
+      this.position = 0;
+      this.capturer.start();
+      this.play();
+    },
+    loopFullscreen: function () {
+      this.play();
+      this.looping = true;
+      this.recording = false;
+      document.getElementById("player-canvas").requestFullscreen();
+    },
     clear: function (style) {
       let ctx = this.$refs.canvas.getContext("2d");
       ctx.fillStyle = style;
       ctx.fillRect(0, 0, parseInt(this.canvas_width), parseInt(this.canvas_height));
     },
+    $render_advance: function () {
+      this.$render();
+      if (this.position < this.frames) {
+        this.position += 1;
+        this.animation_id = requestAnimationFrame(this.$render_advance);
+        if (this.recording) this.capturer.capture(this.$refs.canvas);
+      } else {
+        if (!this.looping) {
+          this.stop();
+          if (this.recording) {
+            this.capturer.stop();
+            this.capturer.save();
+          }
+        } else {
+          this.animation_id = requestAnimationFrame(this.$render_advance);
+        }
+        this.position = 0;
+      }
+    },
     $render: function () {
       let frame = this.frame_sequence[this.position];
       if (frame === undefined) return;
@@ -198,21 +243,6 @@ export default {
         x, y, w, h,
         0, 0, w * this.zoom, h * this.zoom);
     },
-    $render_advance: function () {
-      this.$render();
-      if (this.position < this.frames) {
-        this.position += 1;
-        this.animation_id = requestAnimationFrame(this.$render_advance);
-        if (this.record) this.capturer.capture(this.$refs.canvas);
-      } else {
-        this.playPause();
-        this.position = 0;
-        if (this.record) {
-          this.capturer.stop();
-          this.capturer.save();
-        }
-      }
-    },
   },
 };
 </script>