feat: use media-path, input-path, and output-path config variables fo…

…r consistent file browsing experience in the client (#170) * feat: make input path be the same as the media path by default * feat: update path-input and file-browser to support separate root-path, and start-path properties * feat: consistent usage of the path config variables throughout the client
TheNickOfTime · Aug 20, 2024 · 15c4d6e · 15c4d6e
1 parent 0c6d2b1
commit 15c4d6e
Show file tree

Hide file tree

Showing 7 changed files with 50 additions and 25 deletions.
diff --git a/client/src/components/base/inputs/path/path-input.tsx b/client/src/components/base/inputs/path/path-input.tsx
@@ -7,7 +7,8 @@ import './path-input.scss';
 type Params = {
 	id: string;
 	label: string;
-	path: string;
+	startPath: string;
+	rootPath: string;
 	mode: FileBrowserMode;
 	allowCreate?: boolean;
 	value: string | undefined;
@@ -17,7 +18,8 @@ type Params = {
 export default function PathInput({
 	id,
 	label,
-	path,
+	startPath,
+	rootPath,
 	mode,
 	allowCreate = false,
 	value,
@@ -65,7 +67,8 @@ export default function PathInput({
 			{showFileBrowser && (
 				<div className='browser-section'>
 					<FileBrowser
-						basePath={path}
+						startPath={startPath}
+						rootPath={rootPath}
 						mode={mode}
 						allowCreate={allowCreate}
 						onConfirm={handleConfirm}

diff --git a/client/src/components/modules/file-browser/components/file-browser-body.tsx b/client/src/components/modules/file-browser/components/file-browser-body.tsx
@@ -4,7 +4,7 @@ import { DirectoryType, DirectoryItemType } from 'types/directory';
 
 type Params = {
 	mode: FileBrowserMode;
-	basePath: string;
+	rootPath: string;
 	directory: DirectoryType | null;
 	updateDirectory: (newPath: string) => void;
 	selectedItem: DirectoryItemType | undefined;
@@ -13,7 +13,7 @@ type Params = {
 
 export default function FileBrowserBody({
 	mode,
-	basePath,
+	rootPath,
 	directory,
 	updateDirectory,
 	selectedItem,
@@ -58,13 +58,16 @@ export default function FileBrowserBody({
 
 	const onDoubleClickFolder = (item: DirectoryItemType) => {
 		updateDirectory(item.path);
+		if (mode == FileBrowserMode.Directory) {
+			setSelectedItem(item);
+		}
 		console.log(`[client] [file-browser] Current path set to '${item.path}'.`);
 	};
 
 	return (
 		<>
 			{/* Show directory up button if  */}
-			{directory && basePath != directory.current.path && directory.parent && (
+			{directory && rootPath != directory.current.path && directory.parent && (
 				<button
 					className='directory-item'
 					onClick={(event) => event.preventDefault()}

diff --git a/client/src/components/modules/file-browser/file-browser.tsx b/client/src/components/modules/file-browser/file-browser.tsx
@@ -15,16 +15,17 @@ import { PrimaryOutletContextType } from 'pages/primary/primary-context';
 import './file-browser.scss';
 
 type Params = {
-	basePath: string;
+	startPath: string;
+	rootPath: string;
 	mode: FileBrowserMode;
 	allowCreate: boolean;
 	onConfirm: (item: DirectoryItemType) => void;
 };
 
-export default function FileBrowser({ basePath, mode, allowCreate, onConfirm }: Params) {
+export default function FileBrowser({ startPath, rootPath, mode, allowCreate, onConfirm }: Params) {
 	const { socket } = useOutletContext<PrimaryOutletContextType>();
 
-	const [currentPath, setCurrentPath] = useState(basePath);
+	const [currentPath, setCurrentPath] = useState(startPath);
 	const [selectedItem, setSelectedItem] = useState<DirectoryItemType>();
 	const [directory, setDirectory] = useState<DirectoryType | null>(null);
 	const [isLoading, setIsLoading] = useState(true);
@@ -122,7 +123,7 @@ export default function FileBrowser({ basePath, mode, allowCreate, onConfirm }:
 				<div className='file-browser-body'>
 					<FileBrowserBody
 						mode={mode}
-						basePath={basePath}
+						rootPath={rootPath}
 						directory={directory}
 						updateDirectory={handleUpdateDirectory}
 						selectedItem={selectedItem}

diff --git a/client/src/components/overlays/create-job/create-job.tsx b/client/src/components/overlays/create-job/create-job.tsx
@@ -115,20 +115,23 @@ export default function CreateJob({ onClose }: Params) {
 
 		// Set the output variables if the path is not set
 		if (!outputPath || !outputChanged) {
-			const parentPath = item.path.replace(item.name + item.extension, '');
-			setOutputPath(parentPath);
+			// const parentPath = item.path.replace(item.name + item.extension, '');
+			const newOutputPath = config.paths['output-path']
+				? config.paths['output-path']
+				: item.path.replace(`/${item.name}${item.extension}`, '');
+			setOutputPath(newOutputPath);
 
 			const newOutputFiles: DirectoryItemsType = [
 				{
-					path: parentPath + item.name + outputExtension,
+					path: `${newOutputPath}/${item.name}${outputExtension}`,
 					name: item.name,
 					extension: outputExtension,
 					isDirectory: false,
 				},
 			];
 			const dedupedOutputFiles = await socket.emitWithAck(
 				'check-name-collision',
-				parentPath,
+				newOutputPath,
 				newOutputFiles
 			);
 			setOutputFiles(dedupedOutputFiles);
@@ -141,18 +144,22 @@ export default function CreateJob({ onClose }: Params) {
 			(await RequestDirectory(socket, item.path, isRecursive)).items
 		);
 
-		const newOutputPath = outputChanged ? outputPath : item.path;
+		const newOutputPath = outputChanged
+			? outputPath
+			: config.paths['output-path']
+			? config.paths['output-path']
+			: item.path;
 		const newOutputFiles: DirectoryItemsType = inputPathItems.map((inputItem) => {
 			return {
-				path: newOutputPath + '/' + inputItem.name + inputItem.extension,
+				path: `${newOutputPath}/${inputItem.name}${outputExtension}`,
 				name: inputItem.name,
 				extension: outputExtension,
 				isDirectory: inputItem.isDirectory,
 			};
 		});
 		const dedupedOutputFiles = await socket.emitWithAck(
 			'check-name-collision',
-			item.path,
+			newOutputPath,
 			newOutputFiles
 		);
 
@@ -305,7 +312,8 @@ export default function CreateJob({ onClose }: Params) {
 					<PathInput
 						id='input-path'
 						label={jobFrom == JobFrom.FromFile ? 'File: ' : 'Directory: '}
-						path={config.paths['input-path']}
+						startPath={config.paths['input-path']}
+						rootPath={config.paths['media-path']}
 						mode={
 							jobFrom == JobFrom.FromFile
 								? FileBrowserMode.SingleFile
@@ -330,7 +338,12 @@ export default function CreateJob({ onClose }: Params) {
 					<PathInput
 						id='output-path'
 						label='Directory: '
-						path={config.paths['output-path']}
+						startPath={
+							config.paths['output-path']
+								? config.paths['output-path']
+								: config.paths['input-path']
+						}
+						rootPath={config.paths['media-path']}
 						mode={FileBrowserMode.Directory}
 						allowCreate={true}
 						value={outputPath}

diff --git a/client/src/components/overlays/register-watcher/register-watcher.tsx b/client/src/components/overlays/register-watcher/register-watcher.tsx
@@ -62,15 +62,17 @@ export default function RegisterWatcher({ onClose }: Params) {
 					<PathInput
 						id='watcher-watch-path'
 						label='Directory to Watch:'
-						path={config.paths['input-path']}
+						startPath={config.paths['input-path']}
+						rootPath={config.paths['media-path']}
 						mode={FileBrowserMode.Directory}
 						value={watchPath}
 						onConfirm={handleWatchPathConfirm}
 					/>
 					<PathInput
 						id='watcher-output-path'
 						label='Output Directory:'
-						path={config.paths['output-path']}
+						startPath={config.paths['output-path'] || config.paths['media-path']}
+						rootPath={config.paths['media-path']}
 						mode={FileBrowserMode.Directory}
 						value={outputPath}
 						onConfirm={handleOutputPathConfirm}

diff --git a/client/src/sections/settings/sub-sections/settings-paths.tsx b/client/src/sections/settings/sub-sections/settings-paths.tsx
@@ -21,7 +21,8 @@ export default function SettingsPaths({ config, setConfig }: Params) {
 			<PathInput
 				id='media-path-selection'
 				label='Root Media Path'
-				path='/'
+				startPath='/'
+				rootPath='/'
 				mode={FileBrowserMode.Directory}
 				allowCreate={false}
 				value={config.paths['media-path']}
@@ -30,7 +31,8 @@ export default function SettingsPaths({ config, setConfig }: Params) {
 			<PathInput
 				id='input-path-selection'
 				label='Default Input Path'
-				path={config.paths['media-path']}
+				startPath={config.paths['input-path']}
+				rootPath={config.paths['media-path']}
 				mode={FileBrowserMode.Directory}
 				allowCreate={true}
 				value={config.paths['input-path']}
@@ -39,7 +41,8 @@ export default function SettingsPaths({ config, setConfig }: Params) {
 			<PathInput
 				id='output-path-selection'
 				label='Default Output Path'
-				path={config.paths['media-path']}
+				startPath={config.paths['output-path'] || config.paths['media-path']}
+				rootPath={config.paths['media-path']}
 				mode={FileBrowserMode.Directory}
 				allowCreate={true}
 				value={config.paths['output-path']}

diff --git a/server/src/template/config.yaml b/server/src/template/config.yaml
@@ -2,7 +2,7 @@ config:
   auto-fix: true
 paths:
   media-path: '/video'
-  input-path: '/video/input'
+  input-path: '/video'
   output-path: ''
 presets:
   show-default-presets: true