TT#122353 CallRecordings - Lazy load audio files

- TT#123301 If file is loaded once, the file must not be refetched from the server
- TT#123300 Loads the audio file not before the user has clicked the play button
- TT#123302 Make sure not breaking all other player integrations

Change-Id: Ieb37bea2f9ca648e12afffe9f908743319416da4

src/pages/CscPageCallRecording.vue

@@ -137,10 +137,13 @@
                                                 class="row justify-end table-td-action-cont"
                                             >
                                                 <csc-audio-player
-                                                    v-if="innerProps.row.url"
-                                                    :file-url="innerProps.row.url"
                                                     :pausable="true"
                                                     class="player-btns"
+                                                    :file-url="innerProps.row.url"
+                                                    @load="fetchFile({
+                                                        recId: props.row.id,
+                                                        streamId: innerProps.row.id
+                                                    })"
                                                 />
                                                 <q-btn
                                                     size="md"
@@ -273,7 +276,8 @@ export default {
             fetchStreams: 'csc-call-recordings',
             deleteRecording: 'csc-call-recordings',
             downloadRecording: 'csc-call-recordings',
-            playStreamFile: 'csc-call-recordings'
+            playStreamFile: 'csc-call-recordings',
+            fetchFile: 'csc-call-recordings'
         }),
         async fetchPaginatedRecordings (props) {
             const { page, rowsPerPage, sortBy, descending } = props.pagination

src/store/call-recordings.js

@@ -1,5 +1,10 @@
 import Vue from 'vue'
-import { getRecordings, getRecordingStreams, downloadRecordingStream, getRecordingStream } from '../api/subscriber'
+import {
+    getRecordings,
+    getRecordingStreams,
+    downloadRecordingStream,
+    getRecordingStream
+} from '../api/subscriber'
 export default {
     namespaced: true,
     state: {
@@ -25,6 +30,11 @@ export default {
         callRecordingStreams (state, data) {
             const recording = state.recordings.filter(rec => rec.id === data.recId)[0]
             recording.files = data.streams
+        },
+        callRecordingStream (state, { recId, streamId, url }) {
+            const recording = state.recordings.filter(rec => rec.id === recId)[0]
+            const stream = recording.files.filter((file) => file.id === streamId)[0]
+            stream.url = url
         }
     },
     actions: {
@@ -38,15 +48,19 @@ export default {
         },
         async fetchStreams (context, recId) {
             const streams = await getRecordingStreams(recId)
-            await Promise.all(streams.map(async stream => {
-                const blob = await getRecordingStream(stream.id)
-                stream.url = blob
-            }))
             context.commit('callRecordingStreams', {
                 recId: recId,
                 streams: streams
             })
         },
+        async fetchFile (context, { recId, streamId }) {
+            const blob = await getRecordingStream(streamId)
+            context.commit('callRecordingStream', {
+                recId: recId,
+                streamId: streamId,
+                url: blob
+            })
+        },
         async deleteRecording (context, recId) {
             await Vue.http.delete('api/callrecordings/' + recId + '?force_delete=1')
         },