Skip to content

Commit 76091f1

Browse files
alfgalfg
authored
Merge pull request #25 from alfg/refactor/input-output-components
Refactor input/output components
2 parents 7bb5714 + 39c9b16 commit 76091f1

File tree

5 files changed

+131
-106
lines changed

5 files changed

+131
-106
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "ffmpeg-commander",
3-
"version": "0.7.2",
3+
"version": "0.8.0",
44
"scripts": {
55
"serve": "vue-cli-service serve",
66
"build": "vue-cli-service build",

‎src/App.vue

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,12 @@ App
66
router-view
77
Editor Container component.
88
Presets Pre-defined and user-saved presets.
9-
Format FFmpeg Format Options
10-
Video FFmpeg Video Options
11-
Audio FFmpeg Audio Options
12-
Filters FFmpeg Filter Options
13-
Options FFmpeg General Options and Logging. Saves to localstorage.
9+
FileIO Source and destination inputs.
10+
Format FFmpeg format options.
11+
Video FFmpeg video options.
12+
Audio FFmpeg audio options.
13+
Filters FFmpeg filter options.
14+
Options FFmpeg general options and logging. Saves to localstorage.
1415
Command Command building and rendering logic.
1516
CommandFragment Builds command fragments with tooltips.
1617
Toolbar User controls for copying command output and managing presets.

‎src/components/Editor.vue

Lines changed: 13 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -6,69 +6,7 @@
66
<Presets v-model="preset" />
77

88
<!-- Input and Output protocol and filenames. -->
9-
<b-form-row>
10-
<b-col>
11-
<b-form-group label="Input:" label-for="input">
12-
<b-input-group>
13-
<b-form-select
14-
v-if="!$store.state.ffmpegdEnabled || !$store.state.wsConnected"
15-
class="protocol"
16-
v-model="protocolInput"
17-
@change="setProtocol('input', $event)"
18-
>
19-
<option v-for="o in protocols" :key="o.id" :value="o.value">{{o.name}}</option>
20-
</b-form-select>
21-
22-
<b-form-input
23-
v-if="!$store.state.ffmpegdEnabled || !$store.state.wsConnected"
24-
v-model="form.input"
25-
:state="Boolean(form.input)"
26-
placeholder="Example: output.mp4"
27-
></b-form-input>
28-
29-
<b-form-input
30-
v-else
31-
v-model="form.input"
32-
placeholder=""
33-
@focus="onFileFocus"
34-
></b-form-input>
35-
36-
<div v-if="showFileBrowser">
37-
<FileBrowser v-on:file="onFileSelect" v-on:close="onClose" />
38-
</div>
39-
40-
<!-- <b-form-file
41-
v-else
42-
v-model="form.inputFile"
43-
:state="Boolean(form.inputFile)"
44-
placeholder="Choose a file or drop it here..."
45-
drop-placeholder="Drop file here..."
46-
></b-form-file> -->
47-
</b-input-group>
48-
</b-form-group>
49-
</b-col>
50-
51-
<b-col>
52-
<b-form-group label="Output:" label-for="output">
53-
<b-input-group>
54-
<b-form-select
55-
v-if="!$store.state.ffmpegdEnabled"
56-
class="protocol"
57-
v-model="protocolOutput"
58-
@change="setProtocol('output', $event)"
59-
>
60-
<option v-for="o in protocols" :key="o.id" :value="o.value">{{o.name}}</option>
61-
</b-form-select>
62-
63-
<b-form-input
64-
v-model="form.output"
65-
:state="Boolean(form.output)"
66-
placeholder="Example: output.mp4"
67-
></b-form-input>
68-
</b-input-group>
69-
</b-form-group>
70-
</b-col>
71-
</b-form-row>
9+
<FileIO v-model="form.io" />
7210

7311
<!-- Tabs for each command building component.
7412
Format, Video, Audio, Filters and Options -->
@@ -139,6 +77,7 @@ import util from '@/util';
13977
import storage from '@/storage';
14078
14179
import Presets from './Presets.vue';
80+
import FileIO from './FileIO.vue';
14281
import Format from './Format.vue';
14382
import Video from './Video.vue';
14483
import Audio from './Audio.vue';
@@ -147,7 +86,6 @@ import Options from './Options.vue';
14786
import Command from './Command.vue';
14887
import Toolbar from './Toolbar.vue';
14988
import JsonViewer from './JsonViewer.vue';
150-
import FileBrowser from './FileBrowser.vue';
15189
15290
const {
15391
protocols,
@@ -159,6 +97,7 @@ export default {
15997
name: 'Editor',
16098
components: {
16199
Presets,
100+
FileIO,
162101
Format,
163102
Video,
164103
Audio,
@@ -167,7 +106,6 @@ export default {
167106
Command,
168107
Toolbar,
169108
JsonViewer,
170-
FileBrowser,
171109
},
172110
props: {},
173111
data() {
@@ -177,12 +115,11 @@ export default {
177115
id: 'custom',
178116
name: null,
179117
},
180-
protocolInput: 'movie.mp4',
181-
protocolOutput: 'movie.mp4',
182118
form: {
183-
input: 'input.mp4',
184-
inputFile: null,
185-
output: 'output.mp4',
119+
io: {
120+
input: 'input.mp4',
121+
output: 'output.mp4',
122+
},
186123
format: {
187124
container: 'mp4',
188125
clip: false,
@@ -284,13 +221,6 @@ export default {
284221
},
285222
},
286223
methods: {
287-
setProtocol(type, value) {
288-
if (type === 'input') {
289-
this.form.input = value;
290-
} else if (type === 'output') {
291-
this.form.output = value;
292-
}
293-
},
294224
setPreset(value) {
295225
this.reset();
296226
const preset = presets.getPreset(value);
@@ -302,11 +232,11 @@ export default {
302232
this.cmd = ffmpeg.build(opt);
303233
},
304234
updateOutput() {
305-
if (this.form.output) {
306-
const { format, output } = this.form;
307-
const ext = path.extname(output);
235+
if (this.form.io.output) {
236+
const { format, io } = this.form;
237+
const ext = path.extname(io.output);
308238
if (ext) {
309-
this.form.output = `${output.replace(ext, `.${format.container}`)}`;
239+
this.form.io.output = `${io.output.replace(ext, `.${format.container}`)}`;
310240
}
311241
}
312242
},
@@ -318,9 +248,6 @@ export default {
318248
const params = util.transformToQueryParams(this.form);
319249
this.$router.push({ query: params }).catch(() => {});
320250
},
321-
update(key, value) {
322-
this.$emit('input', { ...this.value, [key]: value });
323-
},
324251
reset() {
325252
// Restore form from default copy.
326253
this.form = merge(this.form, this.default);
@@ -341,29 +268,19 @@ export default {
341268
this.preset.name = this.preset.name || this.preset.id;
342269
},
343270
encode() {
344-
const { input, inputFile, output } = this.form;
271+
const { input, output } = this.form.io;
345272
const json = util.transformToJSON(this.form);
346273
storage.add('queue', {
347274
id: Date.now(),
348275
type: 'encode',
349276
payload: json,
350277
status: 'queued',
351-
input: inputFile ? inputFile.name : input,
278+
input,
352279
output,
353280
_showDetails: false,
354281
});
355282
this.$emit('onEncode');
356283
},
357-
onFileSelect(file) {
358-
this.form.input = file;
359-
this.showFileBrowser = false;
360-
},
361-
onFileFocus() {
362-
this.showFileBrowser = true;
363-
},
364-
onClose() {
365-
this.showFileBrowser = false;
366-
},
367284
},
368285
};
369286
</script>

‎src/components/FileIO.vue

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
<template>
2+
<div class="input">
3+
<b-form-row>
4+
<!-- Input -->
5+
<b-col>
6+
<b-form-group label="Input:" label-for="input">
7+
<b-input-group>
8+
<b-form-select
9+
v-if="!$store.state.ffmpegdEnabled || !$store.state.wsConnected"
10+
class="protocol"
11+
v-model="protocolInput"
12+
@change="update('input', $event)"
13+
>
14+
<option v-for="o in protocols" :key="o.id" :value="o.value">{{o.name}}</option>
15+
</b-form-select>
16+
17+
<b-form-input
18+
v-if="!$store.state.ffmpegdEnabled || !$store.state.wsConnected"
19+
v-model="value.input"
20+
:state="Boolean(value.input)"
21+
placeholder="Example: input.mp4"
22+
></b-form-input>
23+
24+
<b-form-input
25+
v-else
26+
v-model="value.input"
27+
placeholder=""
28+
@focus="onFileFocus"
29+
></b-form-input>
30+
31+
<div v-if="showFileBrowser">
32+
<FileBrowser v-on:file="onFileSelect" v-on:close="onClose" />
33+
</div>
34+
</b-input-group>
35+
</b-form-group>
36+
</b-col>
37+
38+
<!-- Output -->
39+
<b-col>
40+
<b-form-group label="Output:" label-for="output">
41+
<b-input-group>
42+
<b-form-select
43+
v-if="!$store.state.ffmpegdEnabled"
44+
class="protocol"
45+
v-model="protocolOutput"
46+
@change="update('output', $event)"
47+
>
48+
<option v-for="o in protocols" :key="o.id" :value="o.value">{{o.name}}</option>
49+
</b-form-select>
50+
51+
<b-form-input
52+
v-model="value.output"
53+
:state="Boolean(value.output)"
54+
placeholder="Example: output.mp4"
55+
></b-form-input>
56+
</b-input-group>
57+
</b-form-group>
58+
</b-col>
59+
</b-form-row>
60+
</div>
61+
</template>
62+
63+
<script>
64+
import form from '@/form';
65+
66+
import FileBrowser from '@/components/FileBrowser.vue';
67+
68+
const {
69+
protocols,
70+
} = form;
71+
72+
export default {
73+
name: 'Input',
74+
components: {
75+
FileBrowser,
76+
},
77+
props: ['value'],
78+
data() {
79+
return {
80+
protocols,
81+
protocolInput: 'movie.mp4',
82+
protocolOutput: 'movie.mp4',
83+
showFileBrowser: false,
84+
};
85+
},
86+
methods: {
87+
update(key, value) {
88+
this.$emit('input', { ...this.value, [key]: value });
89+
},
90+
onFileSelect(file) {
91+
this.update('input', file);
92+
this.showFileBrowser = false;
93+
},
94+
onFileFocus() {
95+
this.showFileBrowser = true;
96+
},
97+
onClose() {
98+
this.showFileBrowser = false;
99+
},
100+
},
101+
};
102+
</script>
103+
104+
<style scoped>
105+
.protocol {
106+
flex: 0 0 20% !important;
107+
}
108+
</style>

‎src/util.js

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,12 @@ import codecMap from '@/codecs';
33
// Transforms the form options to ffmpeg build options.
44
function transform(formData) {
55
const {
6-
protocol, input, inputFile, output, format, video, audio, filters, options,
6+
io, format, video, audio, filters, options,
77
} = formData;
88

99
const opt = {
10-
protocol,
11-
input: inputFile ? inputFile.name : input,
12-
output,
10+
input: io.input,
11+
output: io.output,
1312

1413
// Format.
1514
container: format.container,

0 commit comments

Comments
 (0)