FEAT: add error notification for failed imports

src/components/FileManager.vue

@@ -248,7 +248,8 @@
               slot="metadata.album"
               slot-scope="data"
             >
-              <span v-if="data.item.source.import.state !== 'done'"><img
+              <span v-if="data.item.source.import.state === 'aborted'"><b-badge variant="danger">Error:</b-badge></span>
+              <span v-else-if="data.item.source.import.state !== 'done'"><img
                 src="../assets/radio.gif"
                 width="24"
                 alt="loading data"
@@ -266,6 +267,7 @@
               slot-scope="data"
             >
               <span v-if="data.item.source.import.state === 'done'">{{ data.value }}</span>
+              <span v-else-if="data.item.source.import.state === 'aborted'">import was aborted</span>
               <span v-else-if="data.item.source.import.progress !== undefined">{{ data.item.source.import.progress.step }} :</span>
             </template>
 
@@ -281,6 +283,10 @@
               <div v-if="data.item.source.import.state === 'done'">
                 {{ prettyNanoseconds(data.value) }}
               </div>
+              <!-- If the import was aborted show some error info -->
+              <div v-else-if="data.item.source.import.state === 'aborted'">
+                {{ data.item.source.import.error }}
+              </div>
               <!-- Or print the progress for ongoing imports. We use the variant
               prop of the b-progress to display the bar in different colours -
               either the info variant for the fetching phase or the success
@@ -1138,9 +1144,23 @@ export default {
         // ideally we should refine this so that every single file gets updated independently)
         //this.uploadInterval = setInterval(() => { this.fetchImports(this.shows[this.currentShow].slug) }, 100)
       }).catch(error => {
-        this.$log.error(error.response.status + ' ' + error.response.statusText)
-        this.$log.error(error.response)
-        alert('Error: could not start the file upload. See console for details.')
+        if (error.response.status === 500 && error.response.data.error === 'ffmpeg returned 1') {
+          this.$log.error(error.response.status + ' ' + error.response.statusText)
+          this.$log.error(error.response)
+          // if we use a file format that is not supported by ffmpeg, we should find
+          // the second to last line should notify us about invalid data
+          let ffmpegError = error.response.data.detail[error.response.data.detail.length - 2]
+          if (ffmpegError.line === 'pipe:: Invalid data found when processing input') {
+            // in this case we can make the error message in the files table more specific
+            alert('Error: import aborted. The audio data format of your file is not valid!')
+          } else {
+            alert('Error: ffmpeg could not processs your file! See console for details.')
+          }
+        } else {
+          this.$log.error(error.response.status + ' ' + error.response.statusText)
+          this.$log.error(error.response)
+          alert('Error: could not finish the file upload/import. See console for details.')
+        }
       })
     },