TT#47514 Play sound item sound file

Change-Id: Ic5d02c03ffc2cd31d2bfe2eeff0c762b1f84a166

src/api/pbx-config.js

@@ -777,3 +777,15 @@ export function getSoundSetWithFiles(id) {
         });
     });
 }
+
+export function playSoundFile(options) {
+    return new Promise((resolve, reject)=>{
+        let params = { format: options.format };
+        Vue.http.get(`api/soundfilerecordings/${options.id}`, { params: params, responseType: 'blob' })
+            .then((res) => {
+                resolve(URL.createObjectURL(res.body));
+            }).catch((err) => {
+                reject(err);
+            });
+    });
+}

src/components/form/CscSoundFileUpload.vue

@@ -58,18 +58,16 @@
             />
         </div>
         <csc-audio-player
-            v-if="!hidePlayer"
             ref="audioPlayer"
+            class="csc-greeting-player"
             :file-url="fileUrl"
             :loaded="loaded"
-            class="csc-greeting-player"
-            @load="init"
             :disable="disablePlayer"
+            @load="init"
             @playing="audioPlayerPlaying"
             @stopped="audioPlayerStopped"
         />
         <div
-            v-if="!hidePlayer"
             class="csc-file-upload-actions"
         >
             <q-btn
@@ -93,7 +91,7 @@
             <q-btn
                 :disable="isPlaying"
                 flat
-                v-if="uploaded && selectedFile == null"
+                v-if="uploaded && selectedFile == null && !disable"
                 color="primary"
                 icon="undo"
                 @click="undo"
@@ -133,9 +131,7 @@
             'fileTypes',
             'fileUrl',
             'loaded',
-            'disabled',
+            'disable'
-            'hidePlayer',
-            'floatLabel'
         ],
         data () {
             return {
@@ -158,7 +154,7 @@
             inputButtons() {
                 let buttons = [];
                 let self = this;
-                if (this.isPlaying || this.disabled) {
+                if (this.isPlaying && !this.disable) {
                     buttons.push({
                             icon: 'folder',
                             error: false,
@@ -168,7 +164,7 @@
                         }
                     );
                 }
-                else {
+                else if (!this.disable) {
                     buttons.push({
                             icon: 'folder',
                             error: false,
@@ -221,6 +217,14 @@
             init() {
                 this.$emit('init');
             }
+        },
+        watch: {
+            stopAll(state) {
+                if (state && this.$refs.audioPlayer) {
+                    this.$refs.audioPlayer.stop();
+                    this.audioPlayerStopped();
+                }
+            }
         }
     }
 </script>

src/components/pages/PbxConfiguration/CscPbxSoundItem.vue

@@ -5,13 +5,17 @@
     >
         <q-item-main>
             <csc-sound-file-upload
-                :ref="refName"
+                ref="uploadSoundFile"
                 icon="music_note"
                 file-types=".wav,.mp3"
                 :label="handleName"
                 :value="fileLabel"
-                :disabled="true"
+                :file-url="playSoundFileUrl(item.id)"
-                :hide-player="!file"
+                :loaded="playSoundFileLoaded(item.id)"
+                :stop-all="!isLastPlayed(item.id)"
+                :uploaded="file"
+                :disable="true"
+                @init="initSoundFileAudio"
             >
                 <div
                     slot="additional"
@@ -42,6 +46,9 @@
         QTooltip
     } from 'quasar-framework'
     import CscSoundFileUpload from '../../form/CscSoundFileUpload'
+    import {
+        mapGetters
+    } from 'vuex'
     export default {
         name: 'csc-pbx-sound-item',
         props: {
@@ -59,12 +66,18 @@
         data () {
             return {
                 loop: this.hasLoop(),
-                file: this.hasFile()
+                file: this.hasFile(),
+                platform: this.$q.platform.is
             }
         },
         mounted() {
         },
         computed: {
+            ...mapGetters('pbxConfig', [
+                'playSoundFileUrl',
+                'playSoundFileLoaded',
+                'isLastPlayed'
+            ]),
             handleName() {
                 return `${this.group}: ${this.item.handle}`;
             },
@@ -73,7 +86,7 @@
             },
             fileLabel() {
                 let noSound = this.$t('pbxConfig.noSoundUploaded');
-                return this.item.filename.length > 0 ? this.item.filename : noSound;
+                return this.file ? this.item.filename : noSound;
             },
             loopClasses() {
                 let classes = ['csc-additional'];
@@ -89,6 +102,9 @@
                 return this.loop ?
                     this.$t('pbxConfig.dontPlayInLoop') :
                     this.$t('pbxConfig.playInLoop');
+            },
+            soundFileFormat() {
+                return this.platform.mozilla ? 'ogg' : 'mp3';
             }
         },
         methods: {
@@ -96,7 +112,18 @@
                 return !!this.item.loopplay;
             },
             hasFile() {
-                return this.item.filename.length > 0;
+                return this.item.filename ? this.item.filename.length > 0 : false;
+            },
+            playSoundFile() {
+                this.$store.dispatch('pbxConfig/playSoundFile', {
+                    id: this.item.id,
+                    format: this.soundFileFormat
+                });
+            },
+            initSoundFileAudio() {
+                this.playSoundFile();
+                this.$refs.uploadSoundFile.setPlayingTrue();
+                this.$refs.uploadSoundFile.setPausedFalse();
             }
         },
         watch: {

src/store/pbx-config/actions.js

@@ -44,7 +44,8 @@ import {
     setSoundSetName,
     setSoundSetDescription,
     setSoundSetContractDefault,
-    getSoundSetWithFiles
+    getSoundSetWithFiles,
+    playSoundFile
 } from '../../api/pbx-config'
 
 export default {
@@ -648,5 +649,16 @@ export default {
                 reject(err);
             });
         });
+    },
+    playSoundFile(context, options) {
+        context.commit('playSoundFileRequesting');
+        playSoundFile(options).then((url) => {
+            context.commit('playSoundFileSucceeded', {
+                id: options.id,
+                url: url
+            });
+        }).catch((err) => {
+            context.commit('playSoundFileFailed', err.message);
+        });
     }
 }

src/store/pbx-config/getters.js

@@ -335,5 +335,20 @@ export default {
     },
     isSoundSetsRequesting(state) {
         return state.listSoundSetsState === RequestState.requesting;
+    },
+    playSoundFileUrl(state) {
+        return (id) => {
+            return state.soundFileUrls[id];
+        }
+    },
+    playSoundFileLoaded(state) {
+        return (id) => {
+            return state.soundFileUrls[id] ? true : false;
+        }
+    },
+    isLastPlayed(state) {
+        return (id) => {
+            return state.lastPlayed + '' === id + '';
+        }
     }
 }

src/store/pbx-config/mutations.js

@@ -525,5 +525,19 @@ export default {
     soundSetReloadingFailed(state, err) {
         state.soundSetReloadingState = RequestState.failed;
         state.soundSetReloadingError = err;
+    },
+    playSoundFileRequesting(state) {
+        state.playSoundFileState = RequestState.requesting;
+        state.playSoundFileError = null;
+    },
+    playSoundFileSucceeded(state, options) {
+        Vue.set(state.soundFileUrls, options.id, options.url);
+        state.lastPlayed = options.id;
+        state.playSoundFileState = RequestState.succeeded;
+        state.playSoundFileError = null;
+    },
+    playSoundFileFailed(state, err) {
+        state.playSoundFileState = RequestState.failed;
+        state.playSoundFileError = err;
     }
 }

src/store/pbx-config/state.js

@@ -87,5 +87,9 @@ export default {
     soundSetFilesErrors: {},
     soundSetReloading: null,
     soundSetReloadingState: RequestState.initiated,
-    soundSetReloadingError: null
+    soundSetReloadingError: null,
+    playSoundFileState: RequestState.initiated,
+    playSoundFileError: null,
+    soundFileUrls: {},
+    lastPlayed: null
 }

src/store/voicebox.js

@@ -537,7 +537,7 @@ export default {
             }).then((url) => {
                 context.commit('playBusyGreetingSucceeded', url);
             }).catch((err) => {
-                context.commit('playBusyGreetingFailed', err.mesage);
+                context.commit('playBusyGreetingFailed', err.message);
             });
         },
         playUnavailGreeting(context, format) {
@@ -548,7 +548,7 @@ export default {
             }).then((url) => {
                 context.commit('playUnavailGreetingSucceeded', url);
             }).catch((err) => {
-                context.commit('playUnavailGreetingFailed', err.mesage);
+                context.commit('playUnavailGreetingFailed', err.message);
             });
         },
         abortUploadBusyGreeting(context) {