Skip to content

Commit c42aa7b

Browse files
alfgalfg
committed
[refactor] Split input/output form items into own components.
1 parent 7bb5714 commit c42aa7b

File tree

5 files changed

+159
-77
lines changed

5 files changed

+159
-77
lines changed

‎src/App.vue

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ App
66
router-view
77
Editor Container component.
88
Presets Pre-defined and user-saved presets.
9+
Input Input source.
10+
Output Output destination.
911
Format FFmpeg Format Options
1012
Video FFmpeg Video Options
1113
Audio FFmpeg Audio Options

‎src/components/Editor.vue

Lines changed: 28 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -8,65 +8,11 @@
88
<!-- Input and Output protocol and filenames. -->
99
<b-form-row>
1010
<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>
11+
<Input v-model="form.input" />
4912
</b-col>
5013

5114
<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>
15+
<Output v-model="form.output" />
7016
</b-col>
7117
</b-form-row>
7218

@@ -139,6 +85,8 @@ import util from '@/util';
13985
import storage from '@/storage';
14086
14187
import Presets from './Presets.vue';
88+
import Input from './Input.vue';
89+
import Output from './Output.vue';
14290
import Format from './Format.vue';
14391
import Video from './Video.vue';
14492
import Audio from './Audio.vue';
@@ -147,7 +95,7 @@ import Options from './Options.vue';
14795
import Command from './Command.vue';
14896
import Toolbar from './Toolbar.vue';
14997
import JsonViewer from './JsonViewer.vue';
150-
import FileBrowser from './FileBrowser.vue';
98+
// import FileBrowser from './FileBrowser.vue';
15199
152100
const {
153101
protocols,
@@ -159,6 +107,8 @@ export default {
159107
name: 'Editor',
160108
components: {
161109
Presets,
110+
Input,
111+
Output,
162112
Format,
163113
Video,
164114
Audio,
@@ -167,7 +117,7 @@ export default {
167117
Command,
168118
Toolbar,
169119
JsonViewer,
170-
FileBrowser,
120+
// FileBrowser,
171121
},
172122
props: {},
173123
data() {
@@ -177,12 +127,17 @@ export default {
177127
id: 'custom',
178128
name: null,
179129
},
180-
protocolInput: 'movie.mp4',
181-
protocolOutput: 'movie.mp4',
130+
// protocolInput: 'movie.mp4',
131+
// protocolOutput: 'movie.mp4',
182132
form: {
183-
input: 'input.mp4',
184-
inputFile: null,
185-
output: 'output.mp4',
133+
input: {
134+
name: 'input.mp4',
135+
file: null,
136+
},
137+
output: {
138+
name: 'output.mp4',
139+
file: null,
140+
},
186141
format: {
187142
container: 'mp4',
188143
clip: false,
@@ -284,13 +239,13 @@ export default {
284239
},
285240
},
286241
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-
},
242+
// setProtocol(type, value) {
243+
// if (type === 'input') {
244+
// this.form.input = value;
245+
// } else if (type === 'output') {
246+
// this.form.output = value;
247+
// }
248+
// },
294249
setPreset(value) {
295250
this.reset();
296251
const preset = presets.getPreset(value);
@@ -318,9 +273,9 @@ export default {
318273
const params = util.transformToQueryParams(this.form);
319274
this.$router.push({ query: params }).catch(() => {});
320275
},
321-
update(key, value) {
322-
this.$emit('input', { ...this.value, [key]: value });
323-
},
276+
// update(key, value) {
277+
// this.$emit('input', { ...this.value, [key]: value });
278+
// },
324279
reset() {
325280
// Restore form from default copy.
326281
this.form = merge(this.form, this.default);

‎src/components/Input.vue

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<template>
2+
<div class="input">
3+
<b-form-group label="Input:" label-for="input">
4+
<b-input-group>
5+
<b-form-select
6+
v-if="!$store.state.ffmpegdEnabled || !$store.state.wsConnected"
7+
class="protocol"
8+
v-model="protocolInput"
9+
@change="update('name', $event)"
10+
>
11+
<option v-for="o in protocols" :key="o.id" :value="o.value">{{o.name}}</option>
12+
</b-form-select>
13+
14+
<b-form-input
15+
v-if="!$store.state.ffmpegdEnabled || !$store.state.wsConnected"
16+
v-model="value.name"
17+
:state="Boolean(value.name)"
18+
placeholder="Example: input.mp4"
19+
></b-form-input>
20+
21+
<b-form-input
22+
v-else
23+
v-model="value"
24+
placeholder=""
25+
@focus="onFileFocus"
26+
></b-form-input>
27+
28+
<div v-if="showFileBrowser">
29+
<FileBrowser v-on:file="onFileSelect" v-on:close="onClose" />
30+
</div>
31+
</b-input-group>
32+
</b-form-group>
33+
</div>
34+
</template>
35+
36+
<script>
37+
import form from '@/form';
38+
39+
import FileBrowser from '@/components/FileBrowser.vue';
40+
41+
const {
42+
protocols,
43+
} = form;
44+
45+
export default {
46+
name: 'Input',
47+
components: {
48+
FileBrowser,
49+
},
50+
props: ['value'],
51+
data() {
52+
return {
53+
protocolInput: 'movie.mp4',
54+
protocols,
55+
showFileBrowser: false,
56+
};
57+
},
58+
methods: {
59+
update(key, value) {
60+
this.$emit('input', { ...this.value, [key]: value });
61+
},
62+
},
63+
};
64+
</script>
65+
66+
<style scoped>
67+
.protocol {
68+
flex: 0 0 20% !important;
69+
}
70+
</style>

‎src/components/Output.vue

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<template>
2+
<div class="output">
3+
<b-form-group label="Output:" label-for="output">
4+
<b-input-group>
5+
<b-form-select
6+
v-if="!$store.state.ffmpegdEnabled"
7+
class="protocol"
8+
v-model="protocolOutput"
9+
@change="update('name', $event)"
10+
>
11+
<option v-for="o in protocols" :key="o.id" :value="o.value">{{o.name}}</option>
12+
</b-form-select>
13+
14+
<b-form-input
15+
v-model="value.name"
16+
:state="Boolean(value.name)"
17+
placeholder="Example: output.mp4"
18+
></b-form-input>
19+
</b-input-group>
20+
</b-form-group>
21+
</div>
22+
</template>
23+
24+
<script>
25+
import form from '@/form';
26+
27+
const {
28+
protocols,
29+
} = form;
30+
31+
export default {
32+
name: 'Output',
33+
components: {},
34+
props: ['value'],
35+
data() {
36+
return {
37+
protocolOutput: 'movie.mp4',
38+
protocols,
39+
};
40+
},
41+
methods: {
42+
update(key, value) {
43+
console.log(key, value);
44+
this.$emit('input', { ...this.value, [key]: value });
45+
},
46+
},
47+
};
48+
</script>
49+
50+
<style scoped>
51+
.protocol {
52+
flex: 0 0 20% !important;
53+
}
54+
</style>

‎src/util.js

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,14 @@ 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+
input, inputFile, output, format, video, audio, filters, options,
77
} = formData;
88

9+
console.log(output.name);
10+
911
const opt = {
10-
protocol,
11-
input: inputFile ? inputFile.name : input,
12-
output,
12+
input: inputFile ? inputFile.name : input.name,
13+
output: output.name,
1314

1415
// Format.
1516
container: format.container,

0 commit comments

Comments
 (0)