Update version to 3.0.0

- use MP3 instead of WAV
 - new callbacks & properties
 - refactoring

src/components/recorder.vue

@@ -72,7 +72,7 @@
       &__records-limit {
         position: absolute;
         color: #AEAEAE;
-        font-size: 12px;
+        font-size: 13px;
         top: 78px;
       }
     }
@@ -160,6 +160,22 @@
       top: 0;
       color: rgb(244, 120, 90);
     }
+
+    &__downloader,
+    &__uploader {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      margin: auto;
+    }
+
+    &__downloader {
+      right: 115px;
+    }
+
+    &__uploader {
+      right: 85px;
+    }
   }
 
   @import '../scss/icons';
@@ -168,7 +184,6 @@
 <template>
   <div class="ar">
     <div class="ar__overlay" v-if="isUploading"></div>
-
     <div class="ar-spinner" v-if="isUploading">
       <div class="ar-spinner__dot"></div>
       <div class="ar-spinner__dot"></div>
@@ -201,89 +216,91 @@
           :class="{'ar-records__record--selected': record.id === selected.id}"
           :key="record.id"
           v-for="(record, idx) in recordList"
-          @click="selected = record">
+          @click="choiceRecord(record)">
             <div
               class="ar__rm"
               v-if="record.id === selected.id"
               @click="removeRecord(idx)">&times;</div>
             <div class="ar__text">Record {{idx + 1}}</div>
             <div class="ar__text">{{record.duration}}</div>
+
+            <downloader
+              v-if="record.id === selected.id && showDownloadButton"
+              class="ar__downloader"
+              :record="record"
+              :filename="filename"/>
+
+            <uploader
+              v-if="record.id === selected.id && showUploadButton"
+              class="ar__uploader"
+              :record="record"
+              :filename="filename"
+              :headers="headers"
+              :upload-url="uploadUrl"/>
         </div>
       </div>
 
-      <audio-player :compact="compact" :record="selected" :uploader-options="uploaderOptions"/>
-
-      <div :class="uploadStatusClasses" v-if="uploadStatus">{{message}}</div>
+      <audio-player :record="selected"/>
     </div>
   </div>
 </template>
 
 <script>
   import AudioPlayer from './player'
+  import Downloader  from './downloader'
   import IconButton  from './icon-button'
   import Recorder    from '@/lib/recorder'
+  import Uploader    from './uploader'
+  import UploaderPropsMixin from '@/mixins/uploader-props'
   import { convertTimeMMSS }  from '@/lib/utils'
 
   export default {
+    mixins: [UploaderPropsMixin],
     props: {
-      attempts : { type: Number                  },
-      compact  : { type: Boolean, default: false },
-      time     : { type: Number                  },
+      attempts : { type: Number },
+      time     : { type: Number },
 
-      attemptsLimit : { type: Function },
-      micFailed     : { type: Function },
-      startRecord   : { type: Function },
-      stopRecord    : { type: Function },
+      showDownloadButton : { type: Boolean, default: true },
+      showUploadButton   : { type: Boolean, default: true },
 
+      micFailed        : { type: Function },
+      beforeRecording  : { type: Function },
+      pauseRecording   : { type: Function },
+      afterRecording   : { type: Function },
       failedUpload     : { type: Function },
-      headers          : { type: Object   },
-      startUpload      : { type: Function },
+      beforeUpload     : { type: Function },
       successfulUpload : { type: Function },
-      uploadUrl        : { type: String   },
-
-      successfulUploadMsg : { type: String, default: 'Upload successful' },
-      failedUploadMsg     : { type: String, default: 'Upload fail'       }
+      selectRecord     : { type: Function }
     },
     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,
-        uploaderOptions : {}
+        isUploading   : false,
+        recorder      : this._initRecorder(),
+        recordList    : [],
+        selected      : {},
+        uploadStatus  : null,
       }
     },
     components: {
       AudioPlayer,
-      IconButton
+      Downloader,
+      IconButton,
+      Uploader
     },
-    created () {
-      this.uploaderOptions = {
-        failedUpload     : this.failedUpload,
-        headers          : this.headers,
-        startUpload      : this.startUpload,
-        successfulUpload : this.successfulUpload,
-        uploadUrl        : this.uploadUrl
-      }
-
+    mounted () {
       this.$eventBus.$on('start-upload', () => {
         this.isUploading = true
+        this.beforeUpload && this.beforeUpload('before upload')
       })
 
-      this.$eventBus.$on('end-upload', (resp) => {
+      this.$eventBus.$on('end-upload', (msg) => {
         this.isUploading = false
-        this.uploadStatus = status
-        setTimeout(() => {this.uploadStatus = null}, 1500)
+
+        if (msg.status === 'success') {
+          this.successfulUpload && this.successfulUpload(msg.response)
+        } else {
+          this.failedUpload && this.failedUpload(msg.response)
+        }
       })
     },
     beforeDestroy () {
@@ -297,14 +314,8 @@
 
         if (!this.isRecording || (this.isRecording && this.isPause)) {
           this.recorder.start()
-          if (this.startRecord) {
-            this.startRecord('start record')
-          }
         } else {
           this.recorder.pause()
-          if (this.startRecord) {
-            this.startRecord('pause record')
-          }
         }
       },
       stopRecorder () {
@@ -313,16 +324,32 @@
         }
 
         this.recorder.stop()
+        this.recordList = this.recorder.recordList()
       },
       removeRecord (idx) {
         this.recordList.splice(idx, 1)
         this.$set(this.selected, 'url', null)
         this.$eventBus.$emit('remove-record')
+      },
+      choiceRecord (record) {
+        if (this.selected === record) {
+          return
+        }
+        this.selected = record
+        this.selectRecord && this.selectRecord(record)
+      },
+      _initRecorder () {
+        return new Recorder({
+          beforeRecording : this.beforeRecording,
+          afterRecording  : this.afterRecording,
+          pauseRecording  : this.pauseRecording,
+          micFailed       : this.micFailed
+        })
       }
     },
     computed: {
       attemptsLeft () {
-        return this.attempts - this.recorder.records.length
+        return this.attempts - this.recordList.length
       },
       iconButtonType () {
         return this.isRecording && this.isPause ? 'mic' : this.isRecording ? 'pause' : 'mic'
@@ -333,20 +360,12 @@
       isRecording () {
         return this.recorder.isRecording
       },
-      message () {
-        return this.uploadStatus === 'success' ? this.successfulUploadMsg : this.failedUploadMsg
-      },
       recordedTime () {
         if (this.time && this.recorder.duration >= this.time * 60) {
           this.stopRecorder()
         }
         return convertTimeMMSS(this.recorder.duration)
       },
-      uploadStatusClasses () {
-        let classes = ['ar__upload-status']
-        classes.push(this.uploadStatus === 'success' ? 'ar__upload-status--success' : 'ar__upload-status--fail')
-        return classes.join(' ')
-      },
       volume () {
         return parseFloat(this.recorder.volume)
       }