Add custom header & minor refactoring

demo/app.vue

@@ -13,6 +13,7 @@
       upload-url="some url"
       :attempts="3"
       :time="2"
+      :headers="headers"
       :start-record="callback"
       :stop-record="callback"
       :start-upload="callback"
@@ -24,19 +25,15 @@
 </template>
 
 <script>
-  import AudioPlayer from '../src/components/player'
-  import AudioRecorder from '../src/components/recorder'
-
   export default {
     name: 'app',
-    components: {
-      AudioPlayer,
-      AudioRecorder
-    },
     data () {
       return {
         mp3: '/demo/example.mp3',
-        showRecorder: true
+        showRecorder: true,
+        headers: {
+          'X-Custom-Header': 'some data'
+        }
       }
     },
     methods: {

demo/index.js

@@ -2,8 +2,12 @@ import Vue from 'vue'
 import axios from 'axios'
 import app from './app'
 
+import AudioRecorder from '@/index'
+
 Vue.prototype.$http = axios
 
+Vue.use(AudioRecorder)
+
 new Vue({
   el: '#app',
   render: h => h(app)

src/components/line-control.vue

@@ -24,7 +24,7 @@
 </template>
 
 <script>
-  import { calculateLineHeadPosition } from '@/lib/utils.js'
+  import { calculateLineHeadPosition } from '@/lib/utils'
 
   export default {
     props: {

src/components/player.vue

@@ -97,11 +97,11 @@
         :class="{'ar-player__play--active': isPlaying}"
         @click.native="decorator(playback)"/>
 
-      <icon-button
+      <uploader
         id="upload"
         class="ar-icon ar-icon__sm"
-        name="save"
-        @click.native="decorator(upload)"/>
+        :record="record"
+        :options="uploaderOptions"/>
     </div>
 
     <div class="ar-player-bar">
@@ -120,32 +120,31 @@
 </template>
 
 <script>
-  import IconButton from './icon-button'
-  import LineControl from './line-control'
+  import IconButton    from './icon-button'
+  import LineControl   from './line-control'
+  import Uploader      from './uploader'
   import VolumeControl from './volume-control'
-  import { convertTimeMMSS } from '@/lib/utils.js'
+  import { convertTimeMMSS } from '@/lib/utils'
 
   export default {
     props: {
-      src              : { type: String                  },
-      uploadUrl        : { type: String                  },
-      record           : { type: Object                  },
-      compact          : { type: Boolean, default: true  },
-      startUpload      : { type: Function                },
-      successfulUpload : { type: Function                },
-      failedUpload     : { type: Function                }
+      src     : { type: String },
+      record  : { type: Object },
+      compact : { type: Boolean, default: true },
+      uploaderOptions : { type: Object, default: () => new Object }
     },
     data () {
       return {
-        isPlaying: false,
-        duration: convertTimeMMSS(0),
-        playedTime: convertTimeMMSS(0),
-        progress: 0
+        isPlaying  : false,
+        duration   : convertTimeMMSS(0),
+        playedTime : convertTimeMMSS(0),
+        progress   : 0
       }
     },
     components: {
       IconButton,
       LineControl,
+      Uploader,
       VolumeControl
     },
     mounted: function() {
@@ -161,6 +160,10 @@
       })
 
       this.player.addEventListener('timeupdate', this._onTimeUpdate)
+
+      this.$eventBus.$on('remove-record', () => {
+        this._resetProgress()
+      })
     },
     computed: {
       audioSource () {
@@ -188,30 +191,6 @@
 
         this.isPlaying = !this.isPlaying
       },
-      upload () {
-        if (this.startUpload) {
-          this.startUpload()
-        }
-
-        this.$emit('on-start-upload')
-
-        let data = new FormData()
-        data.append('audio', this.record.blob, 'my-record')
-
-        this.$http.post(this.uploadUrl, data, {
-          headers: {'Content-Type': `multipart/form-data; boundary=${data._boundary}`}
-        }).then(resp => {
-          this.$emit('on-end-upload', 'success')
-          if (this.successfulUpload) {
-            this.successfulUpload(resp)
-          }
-        }).catch(error => {
-          this.$emit('on-end-upload', 'fail')
-          if (this.failedUpload) {
-            this.failedUpload(error)
-          }
-        })
-      },
       download () {
         let link = document.createElement('a')
         link.href = this.record.url
@@ -228,12 +207,11 @@
         if (this.isPlaying) {
           this.player.pause()
         }
-        setTimeout(() => {
-          this.duration   = convertTimeMMSS(0)
-          this.playedTime = convertTimeMMSS(0)
-          this.progress   = 0
-          this.isPlaying  = false
-        }, 0)
+
+        this.duration   = convertTimeMMSS(0)
+        this.playedTime = convertTimeMMSS(0)
+        this.progress   = 0
+        this.isPlaying  = false
       },
       _onTimeUpdate () {
         this.playedTime = convertTimeMMSS(this.player.currentTime)

src/components/recorder.vue

@@ -211,15 +211,7 @@
         </div>
       </div>
 
-      <audio-player
-        :compact="compact"
-        :record="selected"
-        :upload-url="uploadUrl"
-        :start-upload="startUpload"
-        :successful-upload="successfulUpload"
-        :failed-upload="failedUpload"
-        @start-upload="onStartUpload"
-        @end-upload="onEndUpload"/>
+      <audio-player :compact="compact" :record="selected" :uploader-options="uploaderOptions"/>
 
       <div :class="uploadStatusClasses" v-if="uploadStatus">{{message}}</div>
     </div>
@@ -227,52 +219,76 @@
 </template>
 
 <script>
-  import AudioPlayer          from './player.vue'
-  import IconButton           from './icon-button.vue'
-  import Recorder             from '@/lib/recorder.js'
-  import { convertTimeMMSS }  from '@/lib/utils.js'
+  import AudioPlayer from './player'
+  import IconButton  from './icon-button'
+  import Recorder    from '@/lib/recorder'
+  import { convertTimeMMSS }  from '@/lib/utils'
 
   export default {
     props: {
-      attempts  : { type: Number                  },
-      compact   : { type: Boolean, default: false },
-      time      : { type: Number                  },
-      uploadUrl : { type: String                  },
+      attempts : { type: Number                  },
+      compact  : { type: Boolean, default: false },
+      time     : { type: Number                  },
+
+      attemptsLimit : { type: Function },
+      micFailed     : { type: Function },
+      startRecord   : { type: Function },
+      stopRecord    : { type: Function },
 
-      attemptsLimit    : { type: Function },
       failedUpload     : { type: Function },
-      micFailed        : { type: Function },
-      startRecord      : { type: Function },
+      headers          : { type: Object   },
       startUpload      : { type: Function },
-      stopRecord       : { type: Function },
       successfulUpload : { type: Function },
+      uploadUrl        : { type: String   },
 
       successfulUploadMsg : { type: String, default: 'Upload successful' },
       failedUploadMsg     : { type: String, default: 'Upload fail'       }
     },
     data () {
       return {
-        isUploading: false,
-        recorder: new Recorder({
-          afterStop: () => {
-            this.recordList = this.recorder.recordList()
-
-            if (this.stopRecord) {
-              this.stopRecord('stop record')
-            }
-          },
-          attempts: this.attempts,
-          time: this.time
-        }),
-        recordList: [],
-        selected: {},
-        uploadStatus: null
+        isUploading : false,
+        recorder    : new Recorder({
+                        afterStop: () => {
+                          this.recordList = this.recorder.recordList()
+                          if (this.stopRecord) {
+                            this.stopRecord('stop record')
+                          }
+                        },
+                        attempts: this.attempts,
+                        time: this.time
+                      }),
+        recordList      : [],
+        selected        : {},
+        uploadStatus    : null,
+        uploaderOptions : {}
       }
     },
     components: {
       AudioPlayer,
       IconButton
     },
+    created () {
+      this.uploaderOptions = {
+        failedUpload     : this.failedUpload,
+        headers          : this.headers,
+        startUpload      : this.startUpload,
+        successfulUpload : this.successfulUpload,
+        uploadUrl        : this.uploadUrl
+      }
+
+      this.$eventBus.$on('start-upload', () => {
+        this.isUploading = true
+      })
+
+      this.$eventBus.$on('end-upload', (resp) => {
+        this.isUploading = false
+        this.uploadStatus = status
+        setTimeout(() => {this.uploadStatus = null}, 1500)
+      })
+    },
+    beforeDestroy () {
+      this.stopRecorder()
+    },
     methods: {
       toggleRecorder () {
         if (this.attempts && this.recorder.records.length >= this.attempts) {
@@ -301,14 +317,7 @@
       removeRecord (idx) {
         this.recordList.splice(idx, 1)
         this.$set(this.selected, 'url', null)
-      },
-      onStartUpload () {
-        this.isUploading = true
-      },
-      onEndUpload (status) {
-        this.isUploading = false
-        this.uploadStatus = status
-        setTimeout(() => {this.uploadStatus = null}, 1500)
+        this.$eventBus.$emit('remove-record')
       }
     },
     computed: {

src/components/uploader.vue

@@ -0,0 +1,54 @@
+<style lang="scss">
+  @import '../scss/icons';
+</style>
+
+<template>
+  <icon-button name="save" @click.native="upload"/>
+</template>
+
+<script>
+  import IconButton from './icon-button'
+
+  export default {
+    props: {
+      options : { type: Object },
+      record  : { type: Object }
+    },
+    components: {
+      IconButton
+    },
+    methods: {
+      upload () {
+        if (!this.record.url) {
+          return
+        }
+
+        this.$eventBus.$emit('start-upload')
+
+        if (this.options.startUpload) {
+          this.options.startUpload()
+        }
+
+        let data = new FormData()
+        data.append('audio', this.record.blob, 'my-record')
+
+        let headers = Object.assign(this.options.headers, {})
+        headers['Content-Type'] = `multipart/form-data; boundary=${data._boundary}`
+
+        this.$http.post(this.options.uploadUrl, data, { headers: headers }).then(resp => {
+          this.$eventBus.$emit('end-upload', 'success')
+
+          if (this.options.successfulUpload) {
+            this.options.successfulUpload(resp)
+          }
+        }).catch(error => {
+          this.$eventBus.$emit('end-upload', 'fail')
+
+          if (this.options.failedUpload) {
+            this.options.failedUpload(error)
+          }
+        })
+      }
+    }
+  }
+</script>

src/components/volume-control.vue

@@ -37,8 +37,8 @@
 </template>
 
 <script>
-  import IconButton from './icon-button.vue'
-  import LineControl from './line-control.vue'
+  import IconButton  from './icon-button'
+  import LineControl from './line-control'
 
   export default {
     data () {

src/index.js

@@ -1,5 +1,5 @@
-import AudioPlayer from './components/player.vue'
-import AudioRecorder from './components/recorder.vue'
+import AudioPlayer   from '@/components/player.vue'
+import AudioRecorder from '@/components/recorder.vue'
 
 const components = {
   AudioPlayer,
@@ -12,6 +12,8 @@ const components = {
 
     this.installed = true
 
+    Vue.prototype.$eventBus = Vue.prototype.$eventBus || new Vue
+
     Vue.component('audio-player', AudioPlayer)
     Vue.component('audio-recorder', AudioRecorder)
   }