[refactor] Merge input/output components into FileIO component.

Author: alfg

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ffmpeg-commander",
-  "version": "0.7.2",
+  "version": "0.8.0",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",

src/App.vue

@@ -6,13 +6,12 @@ App
   router-view
     Editor                Container component.
       Presets             Pre-defined and user-saved presets.
-      Input               Input source.
-      Output              Output destination.
-      Format              FFmpeg Format Options
-      Video               FFmpeg Video Options
-      Audio               FFmpeg Audio Options
-      Filters             FFmpeg Filter Options
-      Options             FFmpeg General Options and Logging. Saves to localstorage.
+      FileIO              Source and destination inputs.
+      Format              FFmpeg format options.
+      Video               FFmpeg video options.
+      Audio               FFmpeg audio options.
+      Filters             FFmpeg filter options.
+      Options             FFmpeg general options and logging. Saves to localstorage.
       Command             Command building and rendering logic.
         CommandFragment   Builds command fragments with tooltips.
       Toolbar             User controls for copying command output and managing presets.

src/components/Editor.vue

@@ -6,15 +6,7 @@
     <Presets v-model="preset" />
 
     <!-- Input and Output protocol and filenames. -->
-    <b-form-row>
-      <b-col>
-        <Input v-model="form.input" />
-      </b-col>
-
-      <b-col>
-        <Output v-model="form.output" />
-      </b-col>
-    </b-form-row>
+    <FileIO v-model="form.io" />
 
     <!-- Tabs for each command building component.
     Format, Video, Audio, Filters and Options -->
@@ -85,8 +77,7 @@ import util from '@/util';
 import storage from '@/storage';
 
 import Presets from './Presets.vue';
-import Input from './Input.vue';
-import Output from './Output.vue';
+import FileIO from './FileIO.vue';
 import Format from './Format.vue';
 import Video from './Video.vue';
 import Audio from './Audio.vue';
@@ -106,8 +97,7 @@ export default {
   name: 'Editor',
   components: {
     Presets,
-    Input,
-    Output,
+    FileIO,
     Format,
     Video,
     Audio,
@@ -126,6 +116,12 @@ export default {
         name: null,
       },
       form: {
+        io: {
+          input: 'input.mp4',
+          inputFile: null,
+          output: 'output.mp4',
+          outputFile: null,
+        },
         input: {
           name: 'input.mp4',
           file: null,

src/components/FileIO.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="input">
+    <b-form-row>
+      <!-- Input -->
+      <b-col>
+        <b-form-group label="Input:" label-for="input">
+          <b-input-group>
+            <b-form-select
+              v-if="!$store.state.ffmpegdEnabled || !$store.state.wsConnected"
+              class="protocol"
+              v-model="protocolInput"
+              @change="update('input', $event)"
+            >
+              <option v-for="o in protocols" :key="o.id" :value="o.value">{{o.name}}</option>
+            </b-form-select>
+
+            <b-form-input
+              v-if="!$store.state.ffmpegdEnabled || !$store.state.wsConnected"
+              v-model="value.input"
+              :state="Boolean(value.input)"
+              placeholder="Example: input.mp4"
+            ></b-form-input>
+
+            <b-form-input
+              v-else
+              v-model="value.input"
+              placeholder=""
+              @focus="onFileFocus"
+            ></b-form-input>
+
+            <div v-if="showFileBrowser">
+              <FileBrowser v-on:file="onFileSelect" v-on:close="onClose" />
+            </div>
+          </b-input-group>
+        </b-form-group>
+      </b-col>
+
+      <!-- Output -->
+      <b-col>
+        <b-form-group label="Output:" label-for="output">
+          <b-input-group>
+            <b-form-select
+              v-if="!$store.state.ffmpegdEnabled"
+              class="protocol"
+              v-model="protocolOutput"
+              @change="update('output', $event)"
+            >
+              <option v-for="o in protocols" :key="o.id" :value="o.value">{{o.name}}</option>
+            </b-form-select>
+
+            <b-form-input
+              v-model="value.output"
+              :state="Boolean(value.output)"
+              placeholder="Example: output.mp4"
+            ></b-form-input>
+          </b-input-group>
+        </b-form-group>
+      </b-col>
+    </b-form-row>
+  </div>
+</template>
+
+<script>
+import form from '@/form';
+
+import FileBrowser from '@/components/FileBrowser.vue';
+
+const {
+  protocols,
+} = form;
+
+export default {
+  name: 'Input',
+  components: {
+    FileBrowser,
+  },
+  props: ['value'],
+  data() {
+    return {
+      protocolInput: 'movie.mp4',
+      protocolOutput: 'movie.mp4',
+      protocols,
+      showFileBrowser: false,
+    };
+  },
+  methods: {
+    update(key, value) {
+      this.$emit('input', { ...this.value, [key]: value });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.protocol {
+  flex: 0 0 20% !important;
+}
+</style>

src/components/Input.vue

@@ -3,12 +3,12 @@ import codecMap from '@/codecs';
 // Transforms the form options to ffmpeg build options.
 function transform(formData) {
   const {
-    input, output, format, video, audio, filters, options,
+    io, format, video, audio, filters, options,
   } = formData;
 
   const opt = {
-    input: input.name,
-    output: output.name,
+    input: io.input,
+    output: io.output,
 
     // Format.
     container: format.container,