basics of player component, global imageLoad bus

src/App.vue

@@ -4,7 +4,7 @@
       <Sidebar ref="sidebar" @loadImage="loadImage" @guideSize="guideSize"/>
     </div>
     <div id="canvas-wrap">
-      <Canvas ref="canvas" @imageLoaded="updateImageSize"/>
+      <Canvas ref="canvas"/>
     </div>
   </div>
 </template>
@@ -24,9 +24,6 @@
       },
       guideSize: function (size) {
         this.$refs.canvas.slice = size
-      },
-      updateImageSize: function (size) {
-        this.$refs.sidebar.imageSize = size
       }
     }
   }

src/components/Canvas.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="canvas-container">
-    <canvas id="canvas"></canvas>
+    <canvas ref="canvas" id="canvas"></canvas>
   </div>
 </template>
 
@@ -36,7 +36,7 @@
         this.image = new Image()
         this.image.onload = () => {
           this.imageLoaded = true
-          this.$emit('imageLoaded', [this.image.width, this.image.height])
+          this.$bus.$emit('imageLoaded', this.image)
           this.refresh()
         }
         this.image.src = imageUrl
@@ -44,7 +44,7 @@
       refresh: function () {
         if (!this.imageLoaded) return
         let image = this.image
-        let canvas = document.getElementById('canvas')
+        let canvas = this.$refs.canvas
         let ctx = canvas.getContext('2d')
 
         ctx.clearRect(0, 0, canvas.width, canvas.height)

src/components/Player.vue

@@ -0,0 +1,65 @@
+<template>
+  <div id="player">
+    <div id="player-canvas-container">
+      <canvas ref="canvas" id="player-canvas" :height="height" :width="width"></canvas>
+    </div>
+    <button @click="playPause">{{buttonLabel}}</button>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'player',
+    props: {
+      width: String,
+      height: String
+    },
+    data: function () {
+      return {
+        image: null,
+        buttonLabel: 'PLAY',
+        playing: false
+      }
+    },
+    mounted: function () {
+      this.$bus.$on('imageLoaded', (image) => {
+        this.image = image
+      })
+      this.clear('red')
+    },
+    watch: {
+      width: function () {
+        setTimeout(() => {
+          this.clear('red')
+        }, 0)
+      },
+      height: function () {
+        setTimeout(() => {
+          this.clear('red')
+        }, 0)
+      }
+    },
+    methods: {
+      playPause: function () {
+        this.playing = !this.playing
+        if (this.playing) {
+          this.buttonLabel = 'STOP'
+        } else {
+          this.buttonLabel = 'PLAY'
+        }
+      },
+      clear: function (style) {
+        let ctx = this.$refs.canvas.getContext('2d')
+        ctx.fillStyle = style
+        ctx.fillRect(0, 0, parseInt(this.width), parseInt(this.height))
+      },
+      $render: function () {
+
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

src/components/Sidebar.vue

@@ -41,18 +41,24 @@
       <label>Est. length: {{length}}</label>
     </div>
     <hr>
+    <player :width="guideSizeX" :height="guideSizeY"/>
   </div>
 </template>
 
 <!--suppress JSSuspiciousNameCombination -->
 <script>
+  import Player from '@/components/Player'
+
   export default {
     name: 'Sidebar',
+    components: {
+      player: Player
+    },
     data: function () {
       return {
         imageSize: [-1, -1],
-        guideSizeX: 64,
+        guideSizeX: '64',
-        guideSizeY: 64,
+        guideSizeY: '64',
         lastGuideSizeX: 64,
         lastGuideSizeY: 64,
         lockSize: true,
@@ -151,6 +157,9 @@
       }
     },
     mounted: function () {
+      this.$bus.$on('imageLoaded', (image) => {
+        this.imageSize = [image.width, image.height]
+      })
       this.$emit('guideSize', [this.guideSizeX, this.guideSizeY])
     }
   }

src/main.js

@@ -5,6 +5,8 @@ import App from './App'
 
 Vue.config.productionTip = false
 
+Vue.prototype.$bus = new Vue({})
+
 /* eslint-disable no-new */
 new Vue({
   el: '#app',