#11 #1 Cleaning up the code. Working on the selection logic.

Author: ackzell

components/RecordingItem.vue

@@ -113,13 +113,10 @@ export default {
     }`
 
     this.track.addEventListener('loadeddata', () => {
-      console.log('finished loading')
-      console.log(this.track.duration)
       this.totalDuration = getMMSS(this.track.duration)
     })
 
     this.track.addEventListener('ended', () => {
-      console.log('ended!')
       this.isPlaying = false
     })
 
@@ -142,9 +139,7 @@ export default {
       }
     },
     seek(payload) {
-      if (typeof payload === 'number') {
-        this.track.currentTime = (payload * this.track.duration) / 100
-      }
+      this.track.currentTime = (payload * this.track.duration) / 100
     }
   }
 }

components/RecordingsList.vue

@@ -3,7 +3,12 @@
     <v-list-item-group
       v-model="selected"
       mandatory
-      @change="$emit('input', selected)"
+      @change="
+        $emit(
+          'input',
+          recordingsInternal[selected] ? recordingsInternal[selected].id : null
+        )
+      "
     >
       <div v-for="(recording, index) in recordingsInternal" :key="recording.id">
         <recording-item
@@ -27,7 +32,7 @@ export default {
   },
   props: {
     value: {
-      type: Number,
+      type: String,
       default: null
     },
     recordings: {
@@ -37,17 +42,18 @@ export default {
   },
   data() {
     return {
-      selected: this.selectedItem,
+      selected: null,
       recordingsInternal: this.recordings
     }
   },
   methods: {
     remove(id) {
-      console.log(id)
       const index = this.recordings.findIndex(
         (recording) => recording.id === id
       )
-
+      if (this.selected === index) {
+        this.$emit('input', null)
+      }
       this.recordingsInternal.splice(index, 1)
     }
   }

functions/store_file.js

@@ -1,4 +1,3 @@
-// const { MongoClient } = require('mongodb')
 import { MongoClient } from 'mongodb'
 
 exports.handler = function(event, context, callback) {

package.json

@@ -11,7 +11,8 @@
     "generate": "nuxt generate",
     "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
     "test": "jest",
-    "deploy": "nuxt build; netlify-lambda build functions"
+    "deploy": "nuxt build; netlify-lambda build functions",
+    "fn": "netlify-lambda serve functions"
   },
   "lint-staged": {
     "*.{js,vue}": "npm run lint",

pages/index.vue

@@ -47,25 +47,27 @@
 
           <recordings-list
             v-if="recordings.length"
-            v-model="selected"
+            v-model="selectedRecording"
             :recordings="recordings"
           ></recordings-list>
-
-          selected: {{ selected }}
         </v-card-text>
       </v-card>
 
       <v-card class="mt-4">
         <v-card-text>
           <v-text-field
+            v-model="name"
             name="name"
             label="Your Name"
             single-line
           ></v-text-field>
         </v-card-text>
         <v-card-actions>
           <v-spacer></v-spacer>
-          <v-btn color="primary" :disabled="!recordings.length && !selected"
+          <v-btn
+            color="primary"
+            :disabled="!selectedRecording || !name"
+            @click="sendRecording"
             >Send it!</v-btn
           >
         </v-card-actions>
@@ -93,16 +95,14 @@ export default {
       recorder: null,
       input: null,
       audioContext: null,
-      selected: null,
+      selectedRecording: null,
       timerStatus: 'stopped',
       recordings: [],
       count: 0,
-      TIME_LIMIT: 60
+      TIME_LIMIT: 60,
+      name: ''
     }
   },
-  created() {
-    console.log(typeof WebAudioRecorder)
-  },
   methods: {
     toggleRecorder() {
       this.isRecording = !this.isRecording
@@ -153,13 +153,15 @@ export default {
                 const url = URL.createObjectURL(blob)
                 // the url already gives us a unique id, so we might as well use that :D
                 const id = url.split('3333/')[1]
-                this.recordings.push({
+                const recording = {
                   number: ++this.count,
                   id,
                   audio: url,
                   encoding: ENCODING_TYPE
-                })
+                }
+                this.recordings.push(recording)
               },
+              // stop the recording when time is up
               onTimeout: this.stopRecording
             })
 
@@ -184,21 +186,16 @@ export default {
       this.isRecording = false
       this.timerStatus = 'stopped'
 
-      //   // stop microphone access
-      //   //! can't do this, otherwise can't record further notes
-
-      //   // see https://blog.addpipe.com/using-webaudiorecorder-js-to-record-audio-on-your-website/
-      //   // I don't understand why they initialize the recording object
-      //   // every single time a new recording is started 🤔
+      // stop microphone access
+      // see https://blog.addpipe.com/using-webaudiorecorder-js-to-record-audio-on-your-website/
       this.getUserMediaStream.getAudioTracks()[0].stop()
 
       // tell the recorder to finish the recording (stop recording + encode the recorded audio)
       this.recorder.finishRecording()
       console.warn('Recording stopped')
-      // },
-      // log(event) {
-      //   console.warnData += event + `<br>`
-      // }
+    },
+    sendRecording() {
+      console.log(this.selectedRecording)
     }
   },
   head() {