Changed classification of parameters

FFBox Changelog.md

@@ -1,5 +1,10 @@
 # FFBox Changelog
 
+
+`2020-09-19` 重新进行了参数分类  
+
+---
+
 # v2.3
 
 - 调整了资源文件的布局

src/App.vue

@@ -6,8 +6,9 @@
 </template>
 
 <script>
-const version = '2.3'
-const buildNumber = 6
+const version = '2.4'
+const buildNumber = 7
+//	1.0	1.1	2.0	2.1	2.2	2.3	2.4
 
 import ContentWrapper from './App/ContentWrapper'
 import FloatingContent from './App/FloatingContent'
@@ -92,9 +93,7 @@ const store = new Vuex.Store({
 		},
 		// 全局参数
 		globalParams: {
-			format: {
-				format: 'MP4',
-				moveflags: false,
+			input: {
 				hwaccel: '不使用'
 			},
 			video: {
@@ -124,6 +123,10 @@ const store = new Vuex.Store({
 					sample_fmt: '自动',
 					channel_layout: '自动'
 				}
+			},
+			output: {
+				format: 'MP4',
+				moveflags: false,
 			}
 		},
 		// 全局命令行接收到的信息
@@ -244,7 +247,7 @@ const store = new Vuex.Store({
 			task.status = TASK_RUNNING
 			task.taskProgress = []
 			task.taskProgress_size = []
-			var newFFmpeg = new FFmpeg(0, getFFmpegParaArray(task.filepath, task.after.format, task.after.video, task.after.audio))
+			var newFFmpeg = new FFmpeg(0, getFFmpegParaArray(task.filepath, task.after.input, task.after.video, task.after.audio, task.after.output))
 			newFFmpeg.on('finished', () => {
 				task.status = TASK_FINISHED
 				task.progress_smooth.progress = 1
@@ -605,11 +608,11 @@ const store = new Vuex.Store({
 		dragParabox (state, value) {
 			state.draggerPos = value
 		},
-		// 修改参数，保存到本地磁盘（args：type (format | video | videoDetail | audio), key, value）
+		// 修改参数，保存到本地磁盘（args：type (input | video | videoDetail | audio | audioDetail | output), key, value）
 		changePara (state, args) {
 			switch (args.type) {
-				case 'format':
-					state.globalParams.format[args.key] = args.value
+				case 'input':
+					state.globalParams.input[args.key] = args.value
 					break;
 				case 'video':
 					state.globalParams.video[args.key] = args.value
@@ -623,16 +626,19 @@ const store = new Vuex.Store({
 				case 'audioDetail':
 					state.globalParams.audio.detail[args.key] = args.value
 					break;
+				case 'output':
+					state.globalParams.output[args.key] = args.value
+					break;
 			}
 			// 更改到一些不匹配的值后会导致 getFFmpegParaArray 出错，但是修正代码就在后面，因此仅需忽略它，让它继续运行下去，不要急着更新
 			Vue.nextTick(() => {
-				state.globalParams.paraArray = getFFmpegParaArray('[输入文件名]', state.globalParams.format, state.globalParams.video, state.globalParams.audio)
+				state.globalParams.paraArray = getFFmpegParaArray('[输入文件名]', state.globalParams.input, state.globalParams.video, state.globalParams.audio, state.globalParams.output)
 				state.globalParams = JSON.parse(JSON.stringify(state.globalParams))
 
 				for (const id of state.taskSelection) {
 					var task = state.tasks.get(id)
 					task.after = JSON.parse(JSON.stringify(state.globalParams))
-					task.paraArray = getFFmpegParaArray(task.filepath, task.after.format, task.after.video, task.after.audio, true)
+					task.paraArray = getFFmpegParaArray(task.filepath, task.after.input, task.after.video, task.after.audio, task.after.output, true)
 					task.computedAfter = {
 						vrate: vGenerator.getRateControlParam(task.after.video),
 						arate: aGenerator.getRateControlParam(task.after.audio)
@@ -648,9 +654,10 @@ const store = new Vuex.Store({
 			// 存盘
 			clearTimeout(saveAllParaTimer)
 			saveAllParaTimer = setTimeout(() => {
-				electronStore.set('format', state.globalParams.format)
+				electronStore.set('input', state.globalParams.input)
 				electronStore.set('video', state.globalParams.video)
 				electronStore.set('audio', state.globalParams.audio)
+				electronStore.set('output', state.globalParams.output)
 				console.log("参数已保存")
 			}, 700);
 		},
@@ -733,7 +740,7 @@ const store = new Vuex.Store({
 			})
 
 			// 更新命令行参数
-			task.paraArray = getFFmpegParaArray(task.filepath, task.after.format, task.after.video, task.after.audio, true)
+			task.paraArray = getFFmpegParaArray(task.filepath, task.after.input, task.after.video, task.after.audio, task.after.output, true)
 			task.computedAfter = {
 				vrate: vGenerator.getRateControlParam(task.after.video),
 				arate: aGenerator.getRateControlParam(task.after.audio)
@@ -836,7 +843,7 @@ export default {
 			}
 		})
 		// 更新全局参数输出
-		this.$store.state.globalParams.paraArray = getFFmpegParaArray('[输入文件名]', this.$store.state.globalParams.format, this.$store.state.globalParams.video, this.$store.state.globalParams.audio)
+		this.$store.state.globalParams.paraArray = getFFmpegParaArray('[输入文件名]', this.$store.state.globalParams.input, this.$store.state.globalParams.video, this.$store.state.globalParams.audio, this.$store.state.globalParams.output)
 		this.$store.state.globalParams = JSON.parse(JSON.stringify(this.$store.state.globalParams))
 
 		console.log('exe 路径：' + remote.app.getPath('exe'))
@@ -857,9 +864,10 @@ export default {
 				electronStore.set('ffbox.buildNumber', buildNumber)
 			} else {
 				this.$store.commit('replacePara', {
-					format: electronStore.get('format'),
+					input: electronStore.get('input'),
 					video: electronStore.get('video'),
 					audio: electronStore.get('audio'),
+					output: electronStore.get('output'),
 				})
 			}
 		}, 1);
@@ -878,16 +886,15 @@ export default {
 	store
 }
 
-function getFFmpegParaArray (filepath, fParams, vParams, aParams, withQuotes = false) {
+function getFFmpegParaArray (filepath, iParams, vParams, aParams, oParams, withQuotes = false) {
 	var ret = []
 	ret.push('-hide_banner')
-	ret.push(...fGenerator.getHwaccelParam(fParams))
+	ret.push(...fGenerator.getInputParam(iParams))
 	ret.push('-i')
 	ret.push((withQuotes ? '"' : '') + filepath + (withQuotes ? '"' : ''))
-	ret.push(...fGenerator.getPreProcessParam(fParams))
 	ret.push(...vGenerator.getVideoParam(vParams))
 	ret.push(...aGenerator.getAudioParam(aParams))
-	ret.push(...fGenerator.getOutputParam(fParams, commonfunc.getFilePathWithoutPostfix(filepath) + '_converted', withQuotes))
+	ret.push(...fGenerator.getOutputParam(oParams, commonfunc.getFilePathWithoutPostfix(filepath) + '_converted', withQuotes))
 	ret.push('-y')
 	return ret
 }

src/App/Codecs/formats.js

@@ -141,16 +141,20 @@ const hwaccels = [
 ]
 
 const generator = {
-	getOutputParam: function (formatParams, filename, withQuotes = false) {
+	getOutputParam: function (outputParams, filename, withQuotes = false) {
 		var ret = []
-		if (formatParams.format != '无') {
+		if (outputParams.format != '无') {
 			var format = formats.find((value) => {
-				return value.sName == formatParams.format
+				return value.sName == outputParams.format
 			})
 			if (format) {
 				var extension = format.extension
 			} else {	// 用户手动输入的格式
-				var extension = formatParams.format
+				var extension = outputParams.format
+			}
+			if (outputParams.moveflags) {
+				ret.push('-movflags')
+				ret.push('+faststart')
 			}
 			ret.push((withQuotes ? '"' : '') + filename + '.' + extension + (withQuotes ? '"' : ''))
 		} else {
@@ -161,20 +165,12 @@ const generator = {
 		}
 		return ret
 	},
-	getPreProcessParam: function (formatParams) {
-		var ret = []
-		if (formatParams.moveflags) {
-			ret.push('-movflags')
-			ret.push('+faststart')
-		}
-		return ret
-	},
-	getHwaccelParam: function (formatParams) {
+	getInputParam: function (inputParams) {
 		var ret = []
-		if (formatParams.hwaccel != '不使用') {
+		if (inputParams.hwaccel != '不使用') {
 			ret.push('-hwaccel')
 			var hwaccel = hwaccels.find((value) => {
-				return value.sName == formatParams.hwaccel
+				return value.sName == inputParams.hwaccel
 			}).hwaccel
 			ret.push(hwaccel)
 		}

src/App/ContentWrapper/Clientarea/Maincontent/Parabox.vue

@@ -3,14 +3,14 @@
 		<div id="parabox-dragger" @mousedown="dragStart" @touchstart="dragStart">
 			<div id="parabox-dragger-left"></div>
 			<div id="parabox-dragger-right"></div>
-			<div id="parabox-name" :style="{ backgroundPositionY: 12.5 * $store.state.paraselected + 25 + '%' }"></div>
+			<div id="parabox-name" :style="{ backgroundPositionY: (100 / 7) * $store.state.paraselected + (100 / 7 * 2) + '%' }"></div>
 		</div>
 		<div id="paraboxes">
 			<transition name="paraboxes-ani">
-				<shorcuts-view v-show="$store.state.paraselected == 0"></shorcuts-view>
+				<shortcuts-view v-show="$store.state.paraselected == 0"></shortcuts-view>
 			</transition>
 			<transition name="paraboxes-ani">
-				<format-view v-show="$store.state.paraselected == 1"></format-view>
+				<input-view v-show="$store.state.paraselected == 1"></input-view>
 			</transition>
 			<transition name="paraboxes-ani">
 				<vcodec-view v-show="$store.state.paraselected == 2"></vcodec-view>
@@ -19,31 +19,27 @@
 				<acodec-view v-show="$store.state.paraselected == 3"></acodec-view>
 			</transition>
 			<transition name="paraboxes-ani">
-				<veffect-view v-show="$store.state.paraselected == 4"></veffect-view>
+				<effect-view v-show="$store.state.paraselected == 4"></effect-view>
 			</transition>
 			<transition name="paraboxes-ani">
-				<aeffect-view v-show="$store.state.paraselected == 5"></aeffect-view>
-			</transition>
-			<transition name="paraboxes-ani">
-				<timing-view v-show="$store.state.paraselected == 6"></timing-view>
+				<output-view v-show="$store.state.paraselected == 5"></output-view>
 			</transition>
 		</div>
 	</div>
 </template>
 
 <script>
-import ShorcutsView from './Parabox/ShorcutsView'
-import FormatView from './Parabox/FormatView'
+import ShortcutsView from './Parabox/ShortcutsView'
+import InputView from './Parabox/InputView'
 import VcodecView from './Parabox/VcodecView'
 import AcodecView from './Parabox/AcodecView'
-import VeffectView from './Parabox/VeffectView'
-import AeffectView from './Parabox/AeffectView'
-import TimingView from './Parabox/TimingView'
+import EffectView from './Parabox/EffectView'
+import OutputView from './Parabox/OutputView'
 
 export default {
 	name: 'Parabox',
 	components: {
-		ShorcutsView, FormatView, VcodecView, AcodecView, VeffectView, AeffectView, TimingView
+		ShortcutsView, InputView, VcodecView, AcodecView, EffectView, OutputView
 	},
 	props: {
 	},
@@ -176,5 +172,4 @@ export default {
 			height: calc(100% - 28px);
 		}
 
-
 </style>

src/App/ContentWrapper/Clientarea/Maincontent/Parabox/AcodecView.vue

@@ -126,24 +126,11 @@ export default {
 	methods: {
 		// 由子组件发生变化所触发的事件（mode 为组件类型，sName 为参数名，value 为参数值，list 为对于 combo 需要传入的列表（废弃））
 		onChange: function (mode, sName, value) {
-			switch (mode) {
-				case 'combo':
-					// 注：这里 commit 的 value 不能直接读取 import 来的变量，直接用开发者工具读取也不行，但是 console.log 可以，疑似 vue 的 bug
-					// console.log(this.formatsList[args.paramName + 's'][args.value].sName)
-					this.$store.commit('changePara', {
-						type: 'audio',
-						key: sName,
-						value
-					})
-					break;
-				case 'slider':
-					this.$store.commit('changePara', {
-						type: 'audio',
-						key: sName,
-						value
-					})
-					break;
-			}
+			this.$store.commit('changePara', {
+				type: 'audio',
+				key: sName,
+				value
+			})
 			if (sName == 'acodec') {
 			// 更改 acodec 后将 aencoder 恢复为默认
 				this.$store.commit('changePara', {
@@ -182,22 +169,11 @@ export default {
 			}
 		},
 		onDetailChange: function (mode, sName, value) {
-			switch (mode) {
-				case 'combo':
-					this.$store.commit('changePara', {
-						type: 'audioDetail',
-						key: sName,
-						value: value
-					})
-					break;			
-				case 'slider':					
-					this.$store.commit('changePara', {
-						type: 'audioDetail',
-						key: sName,
-						value
-					})
-					break;
-			}
+			this.$store.commit('changePara', {
+				type: 'audioDetail',
+				key: sName,
+				value: value
+			})
 		},
 		// getAudioParams: function () {
 		// 	console.log(generator.getAudioParam(this.$store.state.globalParams.audio))

src/App/ContentWrapper/Clientarea/Maincontent/Parabox/TimingView.vue → src/App/ContentWrapper/Clientarea/Maincontent/Parabox/EffectView.vue

@@ -1,13 +1,13 @@
 <template>
-	<div id="timing-view">
+	<div id="effect-view">
 		<p style="text-align: center;">此功能暂未开发<br />请关注 https://FFBox.ttqf.tech/ 以获取版本更新</p>
 	</div>
 </template>
 
 <script>
 
 export default {
-	name: 'TimingView',
+	name: 'EffectView',
 	components: {
 		
 	},
@@ -22,7 +22,7 @@ export default {
 </script>
 
 <style scoped>
-	#timing-view {
+	#effect-view {
 		position: absolute;
 		width: 100%;
 		height: 100%;