chore: updating vue2, vue/cli, bootstrap and bootstrap-vue packages to the latest. Resolve some warnings with some exceptions.

Author: alfg

.eslintrc.js

@@ -13,10 +13,13 @@ module.exports = {
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'off' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'vue/multi-word-component-names': 'off',
+    'vue/no-mutating-props': 'off',
+    'vuejs-accessibility/media-has-caption': 'off',
   },
 
   parserOptions: {
-    parser: 'babel-eslint',
+    parser: '@babel/eslint-parser',
   },
 
   overrides: [

package-lock.json

@@ -10,27 +10,32 @@
     "deploy": "npm run build && gh-pages -d dist"
   },
   "dependencies": {
-    "bootstrap": "^4.5.2",
-    "bootstrap-vue": "^2.17.3",
+    "bootstrap": "^4.6.2",
+    "bootstrap-vue": "^2.22.0",
     "core-js": "^3.4.3",
     "gh-pages": "^3.1.0",
     "lodash.clonedeep": "^4.5.0",
     "lodash.merge": "^4.6.2",
-    "vue": "^2.6.11",
-    "vue-router": "^3.2.0"
+    "vue": "^2.7.8",
+    "vue-router": "^3.5.4"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-eslint": "~4.5.0",
-    "@vue/cli-plugin-router": "~4.5.0",
-    "@vue/cli-plugin-unit-jest": "~4.5.4",
-    "@vue/cli-service": "~4.5.0",
-    "@vue/eslint-config-airbnb": "^5.0.2",
+    "@babel/core": "^7.12.16",
+    "@babel/eslint-parser": "^7.12.16",
+    "@vue/cli-plugin-babel": "^5.0.8",
+    "@vue/cli-plugin-eslint": "^5.0.8",
+    "@vue/cli-plugin-router": "^5.0.8",
+    "@vue/cli-plugin-unit-jest": "^5.0.8",
+    "@vue/cli-service": "^5.0.8",
+    "@vue/eslint-config-airbnb": "^6.0.0",
     "@vue/test-utils": "^1.0.3",
-    "babel-eslint": "^10.1.0",
-    "eslint": "^6.7.2",
-    "eslint-plugin-vue": "^6.2.2",
-    "vue-template-compiler": "^2.6.11"
+    "eslint": "^7.32.0",
+    "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-vue": "^8.0.3",
+    "eslint-plugin-vuejs-accessibility": "^1.1.0",
+    "vue-template-compiler": "^2.6.11",
+    "jest": "^27.1.0",
+    "@vue/vue2-jest": "^27.0.0-alpha.3"
   },
   "homepage": "https://alfg.github.io/ffmpeg-commander"
 }

package.json

@@ -68,7 +68,7 @@ App
 </template>
 
 <script>
-import { name, version } from '../package.json';
+import pkgInfo from '../package.json';
 import GitHubCorner from './components/GitHubCorner.vue';
 import Queue from './components/Queue.vue';
 
@@ -91,8 +91,8 @@ export default {
   },
   data() {
     return {
-      name,
-      version,
+      name: pkgInfo.name,
+      version: pkgInfo.version,
       tabIndex: 0,
     };
   },

src/App.vue

@@ -58,6 +58,7 @@
       v-on:reset="reset"
       v-on:save="save"
       v-on:encode="encode"
+      v-on:toggleJSON="toggleJSON"
     />
 
     <!-- JSON formatted viewer so the user can view or copy the configured
@@ -67,7 +68,6 @@
 </template>
 
 <script>
-import path from 'path';
 import merge from 'lodash.merge';
 import clone from 'lodash.clonedeep';
 import form from '@/form';
@@ -232,9 +232,11 @@ export default {
       this.cmd = ffmpeg.build(opt);
     },
     updateOutput() {
+      // This is a bit of a hack to update the output filename extension
+      // in the form.io.output field, which is mutating a property.
       if (this.form.io.output) {
         const { format, io } = this.form;
-        const ext = path.extname(io.output);
+        const ext = util.extname(io.output);
         if (ext) {
           this.form.io.output = `${io.output.replace(ext, `.${format.container}`)}`;
         }
@@ -260,9 +262,8 @@ export default {
       }
 
       // Save the preset name and reload the presets list.
-      const presetName = presets.savePresetToLocalStorage(
-        this.preset.id, this.preset.name, this.form,
-      );
+      const presetName = presets
+        .savePresetToLocalStorage(this.preset.id, this.preset.name, this.form);
       this.presets = presets.getPresetOptions();
       this.preset.id = presetName;
       this.preset.name = this.preset.name || this.preset.id;
@@ -281,6 +282,9 @@ export default {
       });
       this.$emit('onEncode');
     },
+    toggleJSON() {
+      this.controls.showJSON = !this.controls.showJSON;
+    },
   },
 };
 </script>

src/components/Editor.vue

@@ -19,13 +19,15 @@
               v-model="value.input"
               :state="Boolean(value.input)"
               placeholder="Example: input.mp4"
+              @input="update('input', $event)"
             ></b-form-input>
 
             <b-form-input
               v-else
               v-model="value.input"
               placeholder=""
               @focus="onFileFocus"
+              @input="update('input', $event)"
             ></b-form-input>
 
             <div v-if="showFileBrowser">
@@ -43,7 +45,7 @@
               v-if="!$store.state.ffmpegdEnabled"
               class="protocol"
               v-model="protocolOutput"
-              @change="update('output', $event)"
+              @input="update('output', $event)"
             >
               <option v-for="o in protocols" :key="o.id" :value="o.value">{{o.name}}</option>
             </b-form-select>
@@ -52,6 +54,7 @@
               v-model="value.output"
               :state="Boolean(value.output)"
               placeholder="Example: output.mp4"
+              @input="update('output', $event)"
             ></b-form-input>
           </b-input-group>
         </b-form-group>
@@ -97,6 +100,12 @@ export default {
     onClose() {
       this.showFileBrowser = false;
     },
+    addInput() {
+      this.inputs += 1;
+    },
+    removeInput() {
+      this.inputs -= 1;
+    },
   },
 };
 </script>

src/components/FileIO.vue

@@ -5,8 +5,8 @@
         <b-form-group label="Preset: " label-for="preset">
           <b-form-select
             class="u-full-width"
-            v-model="value.id"
-            @change="update('preset', $event)"
+            v-model="id"
+            @change="update('id', $event)"
           >
             <optgroup v-for="(o, i) in presets" :label="o.name" v-bind:key="i">
               <option
@@ -25,7 +25,7 @@
           v-if="value.name"
           >
           <b-form-input
-            v-model="value.name"
+            v-model="name"
           ></b-form-input>
         </b-form-group>
       </b-col>
@@ -42,6 +42,8 @@ export default {
   data() {
     return {
       presets: presets.getPresetOptions(),
+      id: 'custom',
+      name: '',
     };
   },
   methods: {

src/components/Presets.vue

@@ -102,7 +102,7 @@ export default {
       }, 1000);
     },
     toggleJSON() {
-      this.value.showJSON = !this.value.showJSON;
+      this.$emit('toggleJSON');
     },
     deletePreset() {
       presets.deletePreset(this.preset.id);

src/components/Toolbar.vue

@@ -238,9 +238,15 @@ function transformToQueryParams(form) {
   return params;
 }
 
+function extname(filename) {
+  const i = filename.lastIndexOf('.');
+  return (i < 0) ? '' : filename.substr(i);
+}
+
 export default {
   transform,
   transformToJSON,
   transformFromQueryParams,
   transformToQueryParams,
+  extname,
 };