Display error if ffmpegd encode fails. Updates to Queue table's _showDetails.

Author: alfg

README.md

@@ -1,14 +1,20 @@
-# ffmpeg-commander
-> `ffmpeg-commander` is a simple web UI for generating common FFmpeg commands.
-
-*Generated options may vary based on your FFmpeg version and build configuration. Tested on version 4.3.1*
+# `ffmpeg-commander`
+A simple web UI for generating common FFmpeg encoding operations.
 
 https://alfg.github.io/ffmpeg-commander/
 
+Check out [docker-ffmpeg](https://github.com/alfg/docker-ffmpeg) for a customized Docker build of FFmpeg.
+
 ![github pages](https://github.com/alfg/ffmpeg-commander/workflows/github%20pages/badge.svg)
 [![Build Status](https://travis-ci.org/alfg/ffmpeg-commander.svg?branch=master)](https://travis-ci.org/alfg/ffmpeg-commander)
 
-Check out [docker-ffmpeg](https://github.com/alfg/docker-ffmpeg) for a customized Docker build of FFmpeg.
+
+## Why?
+`FFmpeg` has many simple and complex options, which can be intimidating at first. I wanted to create a simple interface for generating common encoding operations for video and audio, inspired by [HandBrake](https://handbrake.fr/).
+
+This tool does NOT cover all options of FFmpeg and some assumptions are made when generating the output. So adjustments may be necessary. Generated options may also vary based on your FFmpeg version and build configuration.
+
+If you feel some options can be improved, feel free to open an issue or pull request.
 
 ## Development
 `ffmpeg-commander` is built with [Vue.js](https://vuejs.org) and [Bootstrap Vue](https://bootstrap-vue.org/).

src/components/Editor.vue

@@ -336,6 +336,7 @@ export default {
         status: 'queued',
         input: inputFile ? inputFile.name : input,
         output,
+        _showDetails: false,
       });
       this.$emit('onEncode');
     },

src/components/Queue.vue

@@ -30,7 +30,7 @@
       </template>
 
       <template v-slot:cell(details)="row">
-        <b-button size="sm" @click="row.toggleDetails" class="mr-2">
+        <b-button size="sm" @click="toggleDetails(row.item.id, row.item._showDetails)" class="mr-2">
           {{ row.detailsShowing ? 'Hide' : 'Show'}}
         </b-button>
       </template>
@@ -71,6 +71,21 @@
               </div>
             </b-col>
           </b-row>
+
+          <!-- Display error if recieved from message -->
+          <b-row class="mb-2" v-if="row.item.error">
+            <b-col sm="2" class="text-sm-right"><b>Error:</b></b-col>
+            <b-col>
+              <div class="code">
+                <b-form-textarea
+                  rows="3"
+                  max-rows="3"
+                  :value="JSON.stringify(row.item.error)"
+                ></b-form-textarea>
+              </div>
+            </b-col>
+          </b-row>
+
       </template>
     </b-table>
     <h2 class="text-center" v-if="items.length === 0">No Jobs Found</h2>
@@ -126,11 +141,18 @@ export default {
             this.percent = data.percent;
             this.speed = data.speed;
             this.fps = data.fps;
+            this.err = data.err;
 
             if (this.percent === 100) {
               this.setJobStatus(this.job.id, Status.COMPLETED);
               store.setIsEncoding(false);
             }
+
+            if (this.err) {
+              this.setJobStatus(this.job.id, Status.ERROR);
+              store.setIsEncoding(false);
+              storage.set('queue', this.job.id, 'error', this.err);
+            }
           };
           this.$ws.conn.onerror = () => {
             if (this.job.status !== Status.COMPLETED) {
@@ -164,12 +186,6 @@ export default {
     },
     getQueue() {
       this.items = storage.getAll('queue');
-      this.items.forEach((o) => {
-        if (o.status === Status.ENCODING) {
-          // eslint-disable-next-line no-param-reassign
-          o._showDetails = true; // eslint-disable-line no-underscore-dangle
-        }
-      });
     },
     getNextJob() {
       const filtered = this.items.filter(
@@ -204,6 +220,11 @@ export default {
       this.setJobStatus(id, Status.QUEUED);
       this.getQueue();
     },
+    toggleDetails(id, enabled) {
+      // eslint-disable-next-line no-underscore-dangle
+      storage.toggleDetails('queue', id, !enabled);
+      this.getQueue();
+    },
   },
 };
 </script>

src/storage.js

@@ -15,6 +15,14 @@ const storage = {
     return q.find((item) => item.id === id);
   },
 
+  set(key, id, k, v) {
+    const items = storage.getAll(key);
+    const item = items.find((o) => o.id === id);
+    item[k] = v;
+    window.localStorage.setItem(key, JSON.stringify(items));
+    return item;
+  },
+
   updateStatus(key, id, value) {
     const items = storage.getAll(key);
     const item = items.find((o) => o.id === id);
@@ -23,6 +31,14 @@ const storage = {
     return item;
   },
 
+  toggleDetails(key, id, value) {
+    const items = storage.getAll(key);
+    const item = items.find((o) => o.id === id);
+    item._showDetails = value; // eslint-disable-line no-underscore-dangle
+    window.localStorage.setItem(key, JSON.stringify(items));
+    return item;
+  },
+
   deleteAll(key) {
     window.localStorage.removeItem(key);
   },