add canvas zoom

src/components/Player.vue

@@ -1,13 +1,20 @@
 <template>
-  <div id="player">
-    <div id="player-canvas-container">
-      <canvas ref="canvas" id="player-canvas" :height="height" :width="width"></canvas>
-    </div>
+  <div id="player" :class="{fullscreen: fullscreen}">
     <div>
-      <!--suppress HtmlFormInputWithoutLabel -->
-      <input type="range" min="0" :max="frames - 1" value="0" class="slider" v-model.number="position">
+      <label for="zoom">Zoom:</label>
+      <input type="number" min="1" :max="50" value="1" class="slider" v-model.number="zoom" id="zoom">
+    </div>
+    <div id="player-canvas-container">
+      <canvas ref="canvas" id="player-canvas"
+              :height="canvas_height" :width="canvas_width">
+      </canvas>
+    </div>
+    <div id="controls" class="{'fullscreen-controls': fullscreen}">
+      <div>
+        <input type="range" min="0" :max="frames - 1" value="0" class="slider" v-model.number="position">
+      </div>
+      <button @click="playPause">{{buttonLabel}}</button>
     </div>
-    <button @click="playPause">{{buttonLabel}}</button>
   </div>
 </template>
 
@@ -23,6 +30,8 @@
         image: null,
         buttonLabel: 'PLAY',
         playing: false,
+        zoom: 1,
+        fullscreen: false,
         position: 0,
         tmp_ctx: null,
         animation_id: null
@@ -33,6 +42,12 @@
         if (this.image === null) return 0
         return Math.ceil(this.image.width / this.width) *
           Math.ceil(this.image.height / this.height)
+      },
+      canvas_height: function () {
+        return this.height * this.zoom
+      },
+      canvas_width: function () {
+        return this.width * this.zoom
       }
     },
     mounted: function () {
@@ -42,12 +57,12 @@
       this.clear('red')
     },
     watch: {
-      width: function () {
+      canvas_width: function () {
         setTimeout(() => {
           this.clear('red')
         }, 0)
       },
-      height: function () {
+      canvas_height: function () {
         setTimeout(() => {
           this.clear('red')
         }, 0)
@@ -76,7 +91,7 @@
       clear: function (style) {
         let ctx = this.$refs.canvas.getContext('2d')
         ctx.fillStyle = style
-        ctx.fillRect(0, 0, parseInt(this.width), parseInt(this.height))
+        ctx.fillRect(0, 0, parseInt(this.canvas_width), parseInt(this.canvas_height))
       },
       $render: function () {
         let wb = Math.ceil(this.image.width / this.width)
@@ -85,7 +100,9 @@
         let y = Math.floor(this.position / wb) * this.height
         let h = y + this.height < this.image.height ? this.height : this.image.height - y
         if (w !== this.width || h !== this.height) this.clear('black')
-        this.tmp_ctx.drawImage(this.image, x, y, w, h, 0, 0, w, h)
+        this.tmp_ctx.drawImage(this.image,
+          x, y, w, h,
+          0, 0, w * this.zoom, h * this.zoom)
       },
       $render_advance: function () {
         this.$render()
@@ -102,5 +119,25 @@
 </script>
 
 <style scoped>
+  #player {
+    text-align: center;
+  }
 
+  .fullscreen {
+    position: absolute;
+    top: 0;
+    left: 0;
+    background-color: rgba(1, 1, 1, .9);
+    width: 100%;
+    height: 100%;
+  }
+
+  .fullscreen-controls {
+    position: absolute;
+    bottom: 0;
+  }
+
+  #zoom {
+    width: 3em;
+  }
 </style>