feat: adding FileBrowser component for input if ffmpegd is enabled.

Author: alfg

src/components/Editor.vue

@@ -11,7 +11,7 @@
         <b-form-group label="Input:" label-for="input">
           <b-input-group>
             <b-form-select
-              v-if="!$store.state.ffmpegdEnabled"
+              v-if="!$store.state.ffmpegdEnabled || !$store.state.wsConnected"
               class="protocol"
               v-model="protocolInput"
               @change="setProtocol('input', $event)"
@@ -20,19 +20,30 @@
             </b-form-select>
 
             <b-form-input
-              v-if="!$store.state.ffmpegdEnabled"
+              v-if="!$store.state.ffmpegdEnabled || !$store.state.wsConnected"
               v-model="form.input"
               :state="Boolean(form.input)"
               placeholder="Example: output.mp4"
             ></b-form-input>
 
-            <b-form-file
+            <b-form-input
+              v-else
+              v-model="form.input"
+              placeholder=""
+              @focus="onFileFocus"
+            ></b-form-input>
+
+            <div v-if="showFileBrowser">
+              <FileBrowser v-on:file="onFileSelect" v-on:close="onClose" />
+            </div>
+
+            <!-- <b-form-file
               v-else
               v-model="form.inputFile"
               :state="Boolean(form.inputFile)"
               placeholder="Choose a file or drop it here..."
               drop-placeholder="Drop file here..."
-            ></b-form-file>
+            ></b-form-file> -->
           </b-input-group>
         </b-form-group>
       </b-col>
@@ -136,6 +147,7 @@ import Options from './Options.vue';
 import Command from './Command.vue';
 import Toolbar from './Toolbar.vue';
 import JsonViewer from './JsonViewer.vue';
+import FileBrowser from './FileBrowser.vue';
 
 const {
   protocols,
@@ -155,6 +167,7 @@ export default {
     Command,
     Toolbar,
     JsonViewer,
+    FileBrowser,
   },
   props: {},
   data() {
@@ -234,6 +247,7 @@ export default {
       controls: {
         showJSON: false,
       },
+      showFileBrowser: false,
     };
   },
   created() {
@@ -340,6 +354,16 @@ export default {
       });
       this.$emit('onEncode');
     },
+    onFileSelect(file) {
+      this.form.input = file;
+      this.showFileBrowser = false;
+    },
+    onFileFocus() {
+      this.showFileBrowser = true;
+    },
+    onClose() {
+      this.showFileBrowser = false;
+    },
   },
 };
 </script>

src/components/FileBrowser.vue

@@ -0,0 +1,106 @@
+<template>
+  <div id="file-browser">
+    <div>
+      <ul>
+        <li class="cwd">{{ data.cwd }}</li>
+        <li v-if="prefix !== ''">
+          <a href="#" @click.prevent="goBack">...</a>
+        </li>
+        <li v-for="o in filteredFiles" v-bind:key="o.label">
+          <a href="#" @click.prevent="onFileSelect">{{ o.label }}</a>
+        </li>
+      </ul>
+      <b-button
+        class="float-right mr-2"
+        squared variant="light"
+        size="sm"
+        @click="close"
+      >Cancel</b-button>
+    </div>
+  </div>
+</template>
+
+<script>
+const LOCALSTORAGE_HOST_URI = 'host';
+const host = window.localStorage.getItem(LOCALSTORAGE_HOST_URI) || 'http://localhost:8080';
+
+export default {
+  data() {
+    return {
+      prefix: '',
+      data: [],
+    };
+  },
+  computed: {
+    filteredFiles() {
+      const items = [];
+      if (this.data && this.data.folders) {
+        this.data.folders.forEach((item) => {
+          const o = {
+            label: item,
+            children: [],
+          };
+          items.push(o);
+        });
+      }
+      if (this.data && this.data.files) {
+        this.data.files.forEach((item) => {
+          const o = {
+            label: item.name,
+            children: [],
+          };
+          items.push(o);
+        });
+      }
+      return items.filter((o) => o.label !== this.prefix);
+    },
+  },
+  mounted() {
+    this.getData();
+  },
+  methods: {
+    onFileSelect(event) {
+      const { text } = event.target;
+      if (text[text.length - 1] !== '/') {
+        this.$emit('file', `${event.target.text}`);
+      } else {
+        this.getData(text);
+      }
+    },
+    goBack() {
+      const arr = this.prefix.split('/');
+      arr.splice(-2, 1); // Remove last path, but keep leading slash.
+      const newPrefix = arr.join('/');
+      this.getData(newPrefix);
+    },
+    getData(prefix = '') {
+      fetch(`${host}/files?prefix=${prefix}`)
+        .then((response) => response.json())
+        .then((data) => {
+          this.data = data;
+          this.prefix = prefix;
+        });
+    },
+    close() {
+      this.$emit('close');
+    },
+  },
+};
+</script>
+
+<style scoped>
+#file-browser {
+  width: 100%;
+  position: absolute;
+  padding: 15px 0;
+  left: 0;
+  top: 36px;
+  background: white;
+  border: #ced4da solid 1px;
+  z-index: 1;
+}
+.cwd {
+  list-style: none;
+  font-family: monospace;
+}
+</style>