Updated relevant function of "output" parameter.

FFBox Changelog.md

@@ -1,5 +1,11 @@
 # FFBox Changelog
 
+# v2.6
+
+- 增加了 macOS 系统的相关支持
+- 优化了“输出文件名”参数的相关功能
+---
+`2021-01-04` 修复“输出文件名”参数的识别的跨平台 bug，增加 Inputbox 的 placeholder  
 `2020-12-22` 更新“输出文件名”参数的识别保留字并修改相关逻辑，少量优化浏览器启动支持性  
 `2020-12-20` macOS 相关更新：多选功能；参数控件的遍历方式优化  
 `2020-12-19` macOS 相关更新：字体、关闭窗口后退出  

package.json

@@ -18,6 +18,7 @@
   "main": "background.js",
   "dependencies": {
     "electron-store": "^5.2.0",
+    "upath": "^2.0.1",
     "vue": "^2.6.11",
     "vuex": "^3.4.0"
   },

src/App.vue

@@ -14,7 +14,7 @@ import ContentWrapper from './App/ContentWrapper'
 import FloatingContent from './App/FloatingContent'
 import Vue from 'vue'
 import Vuex from 'vuex'
-import path from 'path'	// path 编译后可用于浏览器
+import upath from 'upath'
 
 let ElectronStore, electronStore, ipc, remote, currentWindow
 if (process.env.IS_ELECTRON) {
@@ -80,7 +80,7 @@ const defaultParams = {
 	output: {
 		format: 'MP4',
 		moveflags: false,
-		filename: '[filename]_converted.[fileext]'
+		filename: '[filedir]/[filebasename]_converted.[fileext]'
 	}
 }
 
@@ -641,7 +641,7 @@ const store = new Vuex.Store({
 			}
 			// 更改到一些不匹配的值后会导致 getFFmpegParaArray 出错，但是修正代码就在后面，因此仅需忽略它，让它继续运行下去，不要急着更新
 			Vue.nextTick(() => {
-				Vue.set(state.globalParams, 'paraArray', getFFmpegParaArray('[输入文件名]', state.globalParams.input, state.globalParams.video, state.globalParams.audio, state.globalParams.output))
+				Vue.set(state.globalParams, 'paraArray', getFFmpegParaArray('[输入目录]/[输入文件名].[输入扩展名]', state.globalParams.input, state.globalParams.video, state.globalParams.audio, state.globalParams.output))
 				// state.globalParams.paraArray = getFFmpegParaArray('[输入文件名]', state.globalParams.input, state.globalParams.video, state.globalParams.audio, state.globalParams.output)
 				// state.globalParams = JSON.parse(JSON.stringify(state.globalParams))
 
@@ -679,7 +679,7 @@ const store = new Vuex.Store({
 				state.globalParams = Object.assign({}, defaultParams)
 			}
 			Vue.nextTick(() => {
-				Vue.set(state.globalParams, 'paraArray', getFFmpegParaArray('[输入文件名]', state.globalParams.input, state.globalParams.video, state.globalParams.audio, state.globalParams.output))
+				Vue.set(state.globalParams, 'paraArray', getFFmpegParaArray('[输入目录]/[输入文件名].[输入扩展名]', state.globalParams.input, state.globalParams.video, state.globalParams.audio, state.globalParams.output))
 			})
 		},
 		// 添加任务（args：name, path, callback（传回添加后的 id））
@@ -862,7 +862,7 @@ export default {
 			}
 		})
 		// 更新全局参数输出
-		this.$set(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.$set(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))
 
 		if (process.env.IS_ELECTRON) {
 			console.log('exe 路径：' + remote.app.getPath('exe'))
@@ -922,7 +922,7 @@ function getFFmpegParaArray (filepath, iParams, vParams, aParams, oParams, withQ
 	ret.push((withQuotes ? '"' : '') + filepath + (withQuotes ? '"' : ''))
 	ret.push(...vGenerator.getVideoParam(vParams))
 	ret.push(...aGenerator.getAudioParam(aParams))
-	ret.push(...fGenerator.getOutputParam(oParams, path.dirname(filepath), path.basename(filepath, path.extname(filepath)), withQuotes))
+	ret.push(...fGenerator.getOutputParam(oParams, upath.dirname(filepath), upath.trimExt(upath.basename(filepath)), withQuotes))
 	ret.push('-y')
 	return ret
 }

src/App/Codecs/formats.js

@@ -141,7 +141,7 @@ const hwaccels = [
 ]
 
 const generator = {
-	getOutputParam: function (outputParams, filedir, filename, withQuotes = false) {
+	getOutputParam: function (outputParams, filedir, filebasename, withQuotes = false) {
 		var ret = []
 		if (outputParams.format != '无') {
 			var format = formats.find((value) => {
@@ -166,7 +166,7 @@ const generator = {
 			}
 			var outputFileName = outputParams.filename
 			outputFileName = outputFileName.replace(/\[filedir\]/g, filedir)
-			outputFileName = outputFileName.replace(/\[filename\]/g, filename)
+			outputFileName = outputFileName.replace(/\[filebasename\]/g, filebasename)
 			outputFileName = outputFileName.replace(/\[fileext\]/g, extension)
 			if (withQuotes) {
 				outputFileName = '"' + outputFileName + '"'

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

@@ -2,7 +2,7 @@
 	<div class="inputbox" :style="{ width: long ? 'calc(100% - 28px)' : '210px' }">
 		<div class="inputbox-title">{{ title }}</div>
 		<div class="inputbox-selector" :style="selectorStyle">
-			<input type="text" v-model="inputText" @blur="onBlur" @focus="onFocus" @input="onInput">
+			<input type="text" v-model="inputText" @blur="onBlur" @focus="onFocus" @input="onInput" :placeholder="placeholder">
 		</div>
 	</div>
 </template>
@@ -16,25 +16,26 @@ export default {
 	data: () => { return {
 		focused: false,
 		inputText: '-',
-		typeCheckOK: false
+		typeCheckOK: true
 	}},
 	props: {
-		// paramName: String,
 		title: String,
 		text: String,
 		long: [Boolean, String],
-		type: String
+		type: String,
+		placeholder: String,
+		notNull: [Boolean, String]
 	},
 	computed: {
 		selectorStyle: function () {
 			var ret = {}
-			if (!this.typeCheckOK) {
+			if (!this.typeCheckOK || (this.notNull && this.inputText == '')) {
 				ret.border = '#E66 1px solid'
-				ret.boxShadow = '0 0 12px hsla(0, 100%, 60%, 0.3), 0px 4px 8px rgba(0, 0, 0, 0.1)'
+				ret.boxShadow = '0 0 12px hsla(0, 100%, 60%, 0.3), 0px 4px 8px rgba(0, 0, 0, 0.05)'
 				if (this.focused) {
 					ret.background = '#FEE'
 				} else {
-					ret.background = '#F3E3E3'
+					ret.background = '#F7E7E7'
 				}
 			} else {
 				if (this.focused) {
@@ -121,7 +122,7 @@ export default {
 		.inputbox-selector:active {
 			background: #E7E7E7;
 		}
-			.inputbox-selector input {
+			.inputbox-selector>input {
 				position: absolute;
 				left: 6px;
 				width: calc(100% - 12px);
@@ -135,5 +136,9 @@ export default {
 				font-family: inherit;
 				color: inherit;
 			}
+			.inputbox-selector>input::placeholder {
+				font-size: 13px;
+				opacity: 0.25;
+			}
 
 </style>

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

@@ -4,7 +4,7 @@
 		<checkbox title="元数据前移" :checked="$store.state.globalParams.output.moveflags" @change="onChange('checkbox', 'moveflags', $event)"></checkbox>
 		<inputbox title="剪辑起点" :text="$store.state.globalParams.output.begin" @change="onChange('output', 'begin', $event)" type="duration"></inputbox>
 		<inputbox title="剪辑终点" :text="$store.state.globalParams.output.end" @change="onChange('output', 'end', $event)" type="duration"></inputbox>
-		<inputbox title="输出文件名" :text="$store.state.globalParams.output.filename" @change="onChange('output', 'filename', $event)" long=true></inputbox>
+		<inputbox title="输出文件名" :text="$store.state.globalParams.output.filename" @change="onChange('output', 'filename', $event)" long=true placeholder="[filedir]：文件所在目录；[filebasename]：文件基础名；[fileext]：文件扩展名" notNull=true></inputbox>
 	</div>
 </template>
 

yarn.lock

@@ -8390,6 +8390,11 @@ upath@^1.1.1:
   resolved "https://registry.yarnpkg.com/upath/-/upath-1.2.0.tgz#8f66dbcd55a883acdae4408af8b035a5044c1894"
   integrity sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==
 
+upath@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.npm.taobao.org/upath/download/upath-2.0.1.tgz#50c73dea68d6f6b990f51d279ce6081665d61a8b"
+  integrity sha1-UMc96mjW9rmQ9R0nnOYIFmXWGos=
+
 update-notifier@^4.1.1:
   version "4.1.3"
   resolved "https://registry.yarnpkg.com/update-notifier/-/update-notifier-4.1.3.tgz#be86ee13e8ce48fb50043ff72057b5bd598e1ea3"