refactor(routing): add vue router

package.json

@@ -10,21 +10,22 @@
     "lint-fix": "eslint --ext .js,vue . --fix"
   },
   "dependencies": {
-    "@babel/runtime": "^7.3.4",
+    "@babel/runtime": "^7.4.3",
     "eventemitter3": "^3.1.0",
     "generic-pool": "^3.6.1",
     "gif-writer": "^0.9.3",
     "objectFitPolyfill": "^2.1.1",
     "p-event": "^4.0.0",
     "postcss-modules": "^1.4.1",
-    "vue": "^2.6.6",
+    "vue": "^2.6.10",
+    "vue-router": "^3.0.2",
     "vuex": "^3.0.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.3.4",
+    "@babel/core": "^7.4.3",
     "@babel/plugin-transform-runtime": "^7.3.4",
     "@vue/component-compiler-utils": "^2.6.0",
-    "autoprefixer": "^9.4.10",
+    "autoprefixer": "^9.5.0",
     "eslint": "^5.15.1",
     "eslint-config-standard": "^12.0.0",
     "eslint-plugin-import": "^2.16.0",
@@ -32,11 +33,11 @@
     "eslint-plugin-promise": "^4.0.1",
     "eslint-plugin-standard": "^4.0.0",
     "eslint-plugin-vue": "^5.2.2",
-    "parcel-bundler": "^1.12.0",
+    "parcel-bundler": "^1.12.3",
     "parcel-plugin-static-files-copy": "^2.0.0",
     "parcel-plugin-sw-precache": "^1.0.4",
     "vue-hot-reload-api": "^2.3.3",
-    "vue-template-compiler": "^2.6.8"
+    "vue-template-compiler": "^2.6.10"
   },
   "staticFiles": {
     "staticPath": "public",

src/App.vue

@@ -1,26 +1,14 @@
 <template lang="html">
   <div class="layout">
-    <welcome-screen v-if="!welcomed && !downloading.status"></welcome-screen>
+    <router-view></router-view>
-    <capture-screen v-if="welcomed && !downloading.status"></capture-screen>
-    <download-screen v-if="downloading.status"></download-screen>
   </div>
 </template>
 
 <script>
-
-import welcomeScreen from '/views/screens/welcome'
-import captureScreen from '/views/screens/capture'
-import downloadScreen from '/views/screens/download'
-
 import { mapState } from 'vuex'
 
 export default {
   name: 'souvenir',
-  components: {
-    welcomeScreen,
-    captureScreen,
-    downloadScreen
-  },
   computed: {
     ...mapState([
       'welcomed',

src/main.js

@@ -1,5 +1,6 @@
 import Vue from 'vue'
 import App from '/App.vue'
+import router from '/router'
 import store from '/store'
 
 import registerServiceWorker from '/register-service-worker.js'
@@ -7,6 +8,7 @@ import registerServiceWorker from '/register-service-worker.js'
 Vue.config.productionTip = false
 
 new Vue({
+  router,
   store,
   render: h => h(App)
 }).$mount('#app')

src/router.js

@@ -0,0 +1,16 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+
+import Welcome from '/views/screens/welcome'
+import Capture from '/views/screens/capture'
+import Download from '/views/screens/download'
+
+Vue.use(VueRouter)
+
+export default new VueRouter({
+  routes: [
+    { name: 'home', path: '/', component: Welcome },
+    { name: 'capture', path: '/capture', component: Capture },
+    { name: 'download', path: '/download', component: Download }
+  ]
+})

src/store.js

@@ -111,31 +111,42 @@ export default new Vuex.Store({
       }
     },
     capture ({ state, commit, dispatch }) {
-      commit('startCapture')
+      return new Promise((resolve, reject) => {
-      const capturing = capture(state.mediaStream, state.timer.selected * 1000, state.facingMode)
+        commit('startCapture')
+        const capturing = capture(state.mediaStream, state.timer.selected * 1000, state.facingMode)
 
-      capturing.once('error', error => console.error(error))
+        capturing.once('error', error => {
+          console.error(error)
+          reject(error)
+        })
 
-      capturing.on('progress', value => commit('updateCaptureState', Math.round(value * 100)))
+        capturing.on('progress', value => commit('updateCaptureState', Math.round(value * 100)))
 
-      capturing.once('done', captureData => {
+        capturing.once('done', captureData => {
-        commit('stopCapture')
+          commit('stopCapture')
-        commit('updateCaptureState', 0)
+          commit('updateCaptureState', 0)
-        dispatch('encode', captureData)
+          resolve(captureData)
+        })
       })
     },
     encode ({ commit }, captureData) {
-      commit('startEncoding')
+      return new Promise((resolve, reject) => {
-      const encoding = encode(captureData)
+        commit('startEncoding')
+        const encoding = encode(captureData)
 
-      encoding.once('error', error => console.error(error))
+        encoding.once('error', error => {
+          console.error(error)
+          reject(error)
+        })
 
-      encoding.on('progress', value => commit('updateEncodingState', Math.round(value * 100)))
+        encoding.on('progress', value => commit('updateEncodingState', Math.round(value * 100)))
 
-      encoding.once('done', objectUrl => {
+        encoding.once('done', objectUrl => {
-        commit('stopEncoding')
+          commit('stopEncoding')
-        commit('updateEncodingState', 0)
+          commit('updateEncodingState', 0)
-        commit('startDownloading', objectUrl)
+          commit('startDownloading', objectUrl)
+          resolve(objectUrl)
+        })
       })
     }
   }

src/views/screens/capture.vue

@@ -44,8 +44,10 @@ export default {
     }
   },
   methods: {
-    startCapture () {
+    async startCapture () {
-      this.$store.dispatch('capture')
+      const captureData = await this.$store.dispatch('capture')
+      await this.$store.dispatch('encode', captureData)
+      this.$router.push({ name: 'download' })
     },
     ensureCameraStarted () {
       if (!this.mediaStream) {

src/views/screens/download.vue

@@ -26,6 +26,7 @@ export default {
   methods: {
     back () {
       this.$store.commit('stopDownloading')
+      this.$router.push({ name: 'capture' })
     }
   }
 }

src/views/screens/welcome.vue

@@ -9,7 +9,7 @@
         <li class="welcome-steps__item">Save as a GIF</li>
       </ol>
     </div>
-    <button class="btn btn--primary" @click="welcome">Let's make a souvenir!</button>
+    <button class="btn btn--primary" @click="startCapture">Let's make a souvenir!</button>
   </div>
 </template>
 
@@ -22,8 +22,8 @@ export default {
     illuWelcome
   },
   methods: {
-    welcome () {
+    startCapture () {
-      this.$store.commit('updateWelcomed', true)
+      this.$router.push({ name: 'capture' })
     }
   }
 }