#1 Cleaning up the code on the main component. Abstracting more logic into the timer component.

Author: ackzell

components/CurrentTimer.vue

@@ -0,0 +1,66 @@
+<template>
+  <p class="display-2 text-center">{{ minutes }}</p>
+</template>
+
+<script>
+export default {
+  props: {
+    timerStatus: {
+      type: String,
+      default: 'stopped' // 'started'
+    }
+  },
+  data() {
+    return {
+      elapsedTime: 0,
+      interval: null,
+      isRunning: false
+    }
+  },
+  computed: {
+    minutes() {
+      let minutes = Math.floor(this.elapsedTime / 60)
+      let seconds = this.elapsedTime - minutes * 60
+
+      if (minutes < 10) {
+        minutes = '0' + minutes
+      }
+      if (seconds < 10) {
+        seconds = '0' + seconds
+      }
+      return minutes + ':' + seconds
+    }
+  },
+  watch: {
+    timerStatus(newVal, oldVal) {
+      if (newVal !== oldVal) {
+        if (newVal === 'stopped') {
+          this.stopTimer()
+        } else {
+          this.toggleTimer()
+        }
+      }
+    }
+  },
+  methods: {
+    toggleTimer() {
+      if (this.isRunning) {
+        clearInterval(this.interval)
+      } else {
+        this.interval = setInterval(this.incrementTime, 1000)
+      }
+      this.isRunning = !this.isRunning
+    },
+    incrementTime() {
+      this.elapsedTime = +this.elapsedTime + 1
+    },
+    stopTimer() {
+      // reset the count
+      this.elapsedTime = 0
+      // and reset the timer
+      clearInterval(this.interval)
+      this.isRunning = false
+    }
+  }
+}
+</script>

components/Timer.vue

@@ -8,20 +8,24 @@
         <v-toolbar color="primary" flat>
           <v-toolbar-title>VoiceMail</v-toolbar-title>
           <v-spacer></v-spacer>
+
+          <!-- Start  / Finish recording -->
           <v-btn
             :color="isRecording ? 'red' : 'primary darken-2'"
             @click="toggleRecorder"
           >
             <v-icon dark>{{
-              isRecording ? 'mdi-pause' : 'mdi-microphone'
+              isRecording ? 'mdi-stop' : 'mdi-microphone'
             }}</v-icon>
           </v-btn>
-          <v-btn icon @click="stopRecording">
-            <v-icon>mdi-stop</v-icon>
+
+          <!-- discard recording -->
+          <v-btn icon :disabled="!isRecording" @click="stopRecording">
+            <v-icon small>mdi-delete</v-icon>
           </v-btn>
         </v-toolbar>
         <v-card-text>
-          <current-timer :elapsed-time="timer"></current-timer>
+          <timer :timer-status="timerStatus"></timer>
 
           <recordings-list
             v-model="selected"
@@ -53,21 +57,18 @@
 import { WebAudioRecorder } from 'web-audio-recorder-js-webpack'
 
 import RecordingsList from '@/components/RecordingsList'
-import CurrentTimer from '@/components/CurrentTimer'
+import Timer from '@/components/Timer'
 
 const ENCODING_TYPE = 'mp3'
 const ENCODE_AFTER_RECORD = true
 
 export default {
   components: {
     RecordingsList,
-    CurrentTimer
+    Timer
   },
   data() {
     return {
-      availableDevices: [],
-      selectedDevice: null,
-      logData: '',
       isRecording: false,
       audios: [
         { isPlaying: false, duration: '01:45', volume: 50 },
@@ -80,58 +81,13 @@ export default {
       input: null,
       audioContext: null,
       selected: null,
-      timer: null
-    }
-  },
-  async created() {
-    if (navigator && navigator.mediaDevices) {
-      const mediaDevices = await navigator.mediaDevices.getUserMedia({
-        audio: true
-      })
-
-      if (mediaDevices) {
-        const devices = await navigator.mediaDevices.enumerateDevices()
-
-        this.availableDevices = devices.filter(
-          (device) => device.kind === 'audioinput'
-        )
-      }
+      timerStatus: 'stopped'
     }
   },
   methods: {
     toggleRecorder() {
       this.isRecording = !this.isRecording
-      this.toggleTimer()
-    },
-    toggleTimer() {
-      if (this.isRunning) {
-        clearInterval(this.interval)
-        console.log('timer stops')
-      } else {
-        this.interval = setInterval(this.incrementTime, 1000)
-      }
-      this.isRunning = !this.isRunning
-    },
-    incrementTime() {
-      this.timer = +this.timer + 1
-    },
-    stopTimer() {
-      // reset the count
-      this.timer = 0
-      // and reset the timer
-      clearInterval(this.interval)
-      this.isRunning = false
-    },
-    inputChanged() {
-      // console.log('input changed')
-      if (this.getUserMediaStream) {
-      }
-      navigator.mediaDevices.getUserMedia({
-        audio: true,
-        deviceId: {
-          exact: this.selectedDevice
-        }
-      })
+      this.timerStatus = this.isRecording ? 'started' : 'stopped'
     },
     startRecording() {
       if (navigator.mediaDevices) {
@@ -154,7 +110,7 @@ export default {
               )
             })
 
-            this.log(
+            console.warn(
               'getUserMedia() success, stream created, initializing WebAudioRecorder...'
             )
 
@@ -172,30 +128,30 @@ export default {
               encoding: ENCODING_TYPE,
               onEncoderLoading: (recorder, encoding) => {
                 // show "loading encoder..." display
-                this.log('Loading ' + encoding + ' encoder...')
+                console.warn('Loading ' + encoding + ' encoder...')
               },
               onEncoderLoaded: (recorder, encoding) => {
                 // hide "loading encoder..." display
-                this.log(encoding + ' encoder loaded')
+                console.warn(encoding + ' encoder loaded')
               },
               onComplete: (recorder, blob) => {
-                this.log('Encoding complete')
+                console.warn('Encoding complete')
                 const url = URL.createObjectURL(blob)
                 this.audios.push(url)
                 // createDownloadLink(blob, recorder.encoding);
               }
             })
 
             this.recorder.setOptions({
-              timeLimit: 300,
+              timeLimit: 60,
               encodeAfterRecord: ENCODE_AFTER_RECORD,
               mp3: {
                 bitRate: 160
               }
             })
 
             this.recorder.startRecording()
-            this.log('Recording started')
+            console.warn('Recording started')
             this.isRecording = true
           })
           .catch((err) => {
@@ -205,8 +161,7 @@ export default {
     },
     stopRecording() {
       this.isRecording = false
-
-      this.stopTimer()
+      this.timerStatus = 'stopped'
 
       //   // stop microphone access
       //   //! can't do this, otherwise can't record further notes
@@ -216,12 +171,12 @@ export default {
       //   // every single time a new recording is started 🤔
       //   this.getUserMediaStream.getAudioTracks()[0].stop()
 
-      //   // tell the recorder to finish the recording (stop recording + encode the recorded audio)
-      //   this.recorder.finishRecording()
-      //   this.log('Recording stopped')
+      // tell the recorder to finish the recording (stop recording + encode the recorded audio)
+      // this.recorder.finishRecording()
+      // console.warn('Recording stopped')
       // },
       // log(event) {
-      //   this.logData += event + `<br>`
+      //   console.warnData += event + `<br>`
       // }
     }
   }