#2 #1 Working on the local download, working on removing from list.

Author: ackzell

components/RecordingItem.vue

@@ -1,43 +1,56 @@
 <template>
   <v-list-item :ripple="false">
+    <div class="mr-5">
+      <span class="overline mr-1">Recording {{ recording.number }}</span>
+    </div>
     <v-list-item-avatar>
       <v-btn x-large icon @click="toggleAudio">
         <v-icon v-if="isPlaying">mdi-pause</v-icon>
         <v-icon v-else>mdi-play</v-icon>
       </v-btn>
     </v-list-item-avatar>
-    <v-list-item-content>
-      <v-list-item-title class="overline">
-        Recording {{ index + 1 }}
-      </v-list-item-title>
+    <v-list-item-content class="px-5">
       <v-slider
-        :value="progress"
         active
         color="primary lighten-4"
         rounded
-        inverse-label
-        :label="`${elapsedTime} / ${totalTime}`"
+        :value="progress"
+        :hide-details="true"
         @change="seek"
         @start="sliderConnected = false"
         @end="sliderConnected = true"
       />
     </v-list-item-content>
+    <div class="caption mr-5 ml-3 ">
+      <span> {{ elapsedTime }} / {{ totalDuration }} </span>
+    </div>
     <v-list-item-action>
-      <v-btn icon x-small color="primary darken-3">
+      <v-btn
+        icon
+        x-small
+        color="primary darken-3"
+        :href="href"
+        :download="download"
+      >
         <v-icon>mdi-download</v-icon>
       </v-btn>
     </v-list-item-action>
     <v-list-item-action>
-      <v-btn icon x-small>
+      <v-btn
+        icon
+        x-small
+        color="primary lighten-3"
+        @click="$emit('remove-item', recording.id)"
+      >
         <v-icon>mdi-close</v-icon>
       </v-btn>
     </v-list-item-action>
   </v-list-item>
 </template>
 <script>
-function getMMSS(duration) {
-  let minutes = Math.floor(duration / 60)
-  let seconds = parseInt(duration, 10) - minutes * 60
+function getMMSS(timeInSeconds) {
+  let minutes = Math.floor(timeInSeconds / 60)
+  let seconds = parseInt(timeInSeconds, 10) - minutes * 60
 
   if (minutes < 10) {
     minutes = '0' + minutes
@@ -55,12 +68,8 @@ export default {
       type: Object,
       default: () => ({
         audio: null,
-        isPlaying: false
+        encoding: 'mp3'
       })
-    },
-    index: {
-      type: Number,
-      default: 0
     }
   },
   data() {
@@ -70,21 +79,23 @@ export default {
       totalDuration: null,
       elapsedTime: `00:00`,
       progress: 0,
-      sliderConnected: true
-    }
-  },
-  computed: {
-    totalTime() {
-      return getMMSS(this.totalDuration)
+      sliderConnected: true,
+      href: null,
+      download: ''
     }
   },
   beforeMount() {
     this.track = new Audio(this.recording.audio)
 
+    this.href = this.recording.audio
+    this.download = `Recording ${this.recording.number + 1}.${
+      this.recording.encoding
+    }`
+
     this.track.addEventListener('loadeddata', () => {
       console.log('finished loading')
       console.log(this.track.duration)
-      this.totalDuration = this.track.duration
+      this.totalDuration = getMMSS(this.track.duration)
     })
 
     this.track.addEventListener('ended', () => {
@@ -93,7 +104,7 @@ export default {
     })
 
     this.track.addEventListener('timeupdate', (event) => {
-      const s = parseInt(this.track.currentTime % 60)
+      const s = parseInt(this.track.currentTime, 10)
       this.elapsedTime = getMMSS(s)
 
       if (this.sliderConnected) {
@@ -112,8 +123,6 @@ export default {
     },
     seek(payload) {
       if (typeof payload === 'number') {
-        console.log('endseeking', payload)
-        console.log((payload * this.track.duration) / 100)
         this.track.currentTime = (payload * this.track.duration) / 100
       }
     }

components/RecordingsList.vue

@@ -5,9 +5,15 @@
       mandatory
       @change="$emit('input', selected)"
     >
-      <div v-for="(recording, index) in recordings" :key="index">
-        <recording-item :recording="recording" :index="index"></recording-item>
-        <v-divider v-show="index != recordings.length - 1" inset></v-divider>
+      <div v-for="(recording, index) in recordingsInternal" :key="recording.id">
+        <recording-item
+          :recording="recording"
+          @remove-item="remove(recording.id)"
+        ></recording-item>
+        <v-divider
+          v-show="index != recordingsInternal.length - 1"
+          inset
+        ></v-divider>
       </div>
     </v-list-item-group>
   </v-list>
@@ -31,7 +37,18 @@ export default {
   },
   data() {
     return {
-      selected: this.selectedItem
+      selected: this.selectedItem,
+      recordingsInternal: this.recordings
+    }
+  },
+  methods: {
+    remove(id) {
+      console.log(id)
+      const index = this.recordings.findIndex(
+        (recording) => recording.id === id
+      )
+
+      this.recordingsInternal.splice(index, 1)
     }
   }
 }

pages/index.vue

@@ -28,6 +28,7 @@
           <timer :timer-status="timerStatus"></timer>
 
           <recordings-list
+            v-if="recordings.length"
             v-model="selected"
             :recordings="recordings"
           ></recordings-list>
@@ -77,7 +78,8 @@ export default {
       audioContext: null,
       selected: null,
       timerStatus: 'stopped',
-      recordings: []
+      recordings: [],
+      count: 0
     }
   },
   created() {
@@ -131,9 +133,14 @@ export default {
               onComplete: (recorder, blob) => {
                 console.warn('Encoding complete')
                 const url = URL.createObjectURL(blob)
-                console.log(blob)
-                this.recordings.push({ audio: url })
-                // createDownloadLink(blob, recorder.encoding);
+                // 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({
+                  number: ++this.count,
+                  id,
+                  audio: url,
+                  encoding: ENCODING_TYPE
+                })
               }
             })