refactor(navigation): better camera usage

src/App.vue

@@ -31,10 +31,6 @@ export default {
     handleVisibilityChange (event) {
       if (document.hidden) {
         this.$store.commit('stopCamera')
-      } else {
-        if (this.welcomed) {
-          this.$store.dispatch('requestCamera', false)
-        }
       }
     }
   },

src/store.js

@@ -84,10 +84,6 @@ export default new Vuex.Store({
     }
   },
   actions: {
-    welcome ({ commit, dispatch }) {
-      commit('updateWelcomed', true)
-      dispatch('requestCamera', false)
-    },
     requestCamera ({ state, commit }, inverseFacingMode) {
       const shouldFaceUser = inverseFacingMode
         ? !state.capturing.shouldFaceUser
@@ -136,10 +132,7 @@ export default new Vuex.Store({
 
       encoding.once('error', error => console.error(error))
 
-      encoding.on('progress', value => {
+      encoding.on('progress', value => commit('updateEncodingState', Math.round(value * 100)))
-        console.log(`Encoding progress ${Math.round(value * 100)}% (${value})`)
-        commit('updateEncodingState', Math.round(value * 100))
-      })
 
       encoding.once('done', objectUrl => {
         commit('stopEncoding')

src/views/screens/capture.vue

@@ -43,6 +43,16 @@ export default {
     startCapture () {
       this.$store.dispatch('capture')
     },
+    ensureCameraStarted () {
+      if (!this.mediaStream) {
+        this.$store.dispatch('requestCamera', false)
+      }
+    },
+    handleVisibilityChange (event) {
+      if (!document.hidden) {
+        this.ensureCameraStarted()
+      }
+    },
     updatePreviewMediaStream() {
       this.$refs.preview.srcObject = this.mediaStream
     }
@@ -54,14 +64,19 @@ export default {
   },
   mounted: function () {
     this.updatePreviewMediaStream()
-    window.objectFitPolyfill(this.$refs.preview)
+    document.addEventListener('visibilitychange', this.handleVisibilityChange)
     document.body.classList.add('capture-body')
+    window.objectFitPolyfill(this.$refs.preview)
+
+    this.ensureCameraStarted()
+
   },
   updated: function () {
     this.updatePreviewMediaStream()
   },
   destroyed: function () {
     document.body.classList.remove('capture-body')
+    document.removeEventListener('visibilitychange', this.handleVisibilityChange)
   }
 }
 </script>

src/views/screens/welcome.vue

@@ -23,7 +23,7 @@ export default {
   },
   methods: {
     welcome () {
-      this.$store.dispatch('welcome')
+      this.$store.commit('updateWelcomed', true)
     }
   }
 }