From 93274a6d7b1f33d7db9b987b1ee7e2292411a92a Mon Sep 17 00:00:00 2001
From: Jason Rasmussen <jrasm91@gmail.com>
Date: Thu, 29 Dec 2022 16:13:37 -0500
Subject: [PATCH] chore(web): show corresponding ffmpeg argument (#1217)

---
 .../admin-page/settings/ffmpeg/ffmpeg-settings.svelte  | 10 +++++-----
 .../admin-page/settings/setting-input-field.svelte     |  2 +-
 .../storate-template/storage-template-settings.svelte  |  4 ++--
 .../user-settings-page/change-password-settings.svelte |  6 +++---
 .../user-settings-page/user-profile-settings.svelte    |  8 ++++----
 5 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/web/src/lib/components/admin-page/settings/ffmpeg/ffmpeg-settings.svelte b/web/src/lib/components/admin-page/settings/ffmpeg/ffmpeg-settings.svelte
index a3d9d6fddb..eb1b16fecb 100644
--- a/web/src/lib/components/admin-page/settings/ffmpeg/ffmpeg-settings.svelte
+++ b/web/src/lib/components/admin-page/settings/ffmpeg/ffmpeg-settings.svelte
@@ -77,7 +77,7 @@
 				<div class="flex flex-col gap-4 ml-4 mt-4">
 					<SettingInputField
 						inputType={SettingInputFieldType.NUMBER}
-						label="CRF"
+						label="CONSTANT RATE FACTOR (-crf)"
 						bind:value={ffmpegConfig.crf}
 						required={true}
 						isEdited={!(ffmpegConfig.crf == savedConfig.crf)}
@@ -85,7 +85,7 @@
 
 					<SettingInputField
 						inputType={SettingInputFieldType.TEXT}
-						label="PRESET"
+						label="PRESET (-preset)"
 						bind:value={ffmpegConfig.preset}
 						required={true}
 						isEdited={!(ffmpegConfig.preset == savedConfig.preset)}
@@ -93,7 +93,7 @@
 
 					<SettingInputField
 						inputType={SettingInputFieldType.TEXT}
-						label="AUDIO CODEC"
+						label="AUDIO CODEC (-acodec)"
 						bind:value={ffmpegConfig.targetAudioCodec}
 						required={true}
 						isEdited={!(ffmpegConfig.targetAudioCodec == savedConfig.targetAudioCodec)}
@@ -101,7 +101,7 @@
 
 					<SettingInputField
 						inputType={SettingInputFieldType.TEXT}
-						label="VIDEO CODEC"
+						label="VIDEO CODEC (-vcodec)"
 						bind:value={ffmpegConfig.targetVideoCodec}
 						required={true}
 						isEdited={!(ffmpegConfig.targetVideoCodec == savedConfig.targetVideoCodec)}
@@ -109,7 +109,7 @@
 
 					<SettingInputField
 						inputType={SettingInputFieldType.TEXT}
-						label="SCALING"
+						label="SCALING (-vf scale=)"
 						bind:value={ffmpegConfig.targetScaling}
 						required={true}
 						isEdited={!(ffmpegConfig.targetScaling == savedConfig.targetScaling)}
diff --git a/web/src/lib/components/admin-page/settings/setting-input-field.svelte b/web/src/lib/components/admin-page/settings/setting-input-field.svelte
index 4fde6f000b..c0c8089f81 100644
--- a/web/src/lib/components/admin-page/settings/setting-input-field.svelte
+++ b/web/src/lib/components/admin-page/settings/setting-input-field.svelte
@@ -25,7 +25,7 @@
 
 <div class="w-full">
 	<div class={`flex place-items-center gap-1 h-[26px]`}>
-		<label class={`immich-form-label text-xs`} for={label}>{label.toUpperCase()} </label>
+		<label class={`immich-form-label text-xs`} for={label}>{label}</label>
 		{#if required}
 			<div class="text-red-400">*</div>
 		{/if}
diff --git a/web/src/lib/components/admin-page/settings/storate-template/storage-template-settings.svelte b/web/src/lib/components/admin-page/settings/storate-template/storage-template-settings.svelte
index 02e2f13ca7..65398a005f 100644
--- a/web/src/lib/components/admin-page/settings/storate-template/storage-template-settings.svelte
+++ b/web/src/lib/components/admin-page/settings/storate-template/storage-template-settings.svelte
@@ -197,7 +197,7 @@
 					</div>
 					<div class="flex gap-2 align-bottom">
 						<SettingInputField
-							label="template"
+							label="TEMPLATE"
 							required
 							inputType={SettingInputFieldType.TEXT}
 							bind:value={storageConfig.template}
@@ -206,7 +206,7 @@
 
 						<div class="flex-0">
 							<SettingInputField
-								label="Extension"
+								label="EXTENSION"
 								inputType={SettingInputFieldType.TEXT}
 								value={'.jpeg'}
 								disabled
diff --git a/web/src/lib/components/user-settings-page/change-password-settings.svelte b/web/src/lib/components/user-settings-page/change-password-settings.svelte
index 9ecbdfa1c5..09fe5db4b9 100644
--- a/web/src/lib/components/user-settings-page/change-password-settings.svelte
+++ b/web/src/lib/components/user-settings-page/change-password-settings.svelte
@@ -44,21 +44,21 @@
 			<div class="flex flex-col gap-4 ml-4 mt-4">
 				<SettingInputField
 					inputType={SettingInputFieldType.PASSWORD}
-					label="Password"
+					label="PASSWORD"
 					bind:value={password}
 					required={true}
 				/>
 
 				<SettingInputField
 					inputType={SettingInputFieldType.PASSWORD}
-					label="New password"
+					label="NEW PASSWORD"
 					bind:value={newPassword}
 					required={true}
 				/>
 
 				<SettingInputField
 					inputType={SettingInputFieldType.PASSWORD}
-					label="Confirm password"
+					label="CONFIRM PASSWORD"
 					bind:value={confirmPassword}
 					required={true}
 				/>
diff --git a/web/src/lib/components/user-settings-page/user-profile-settings.svelte b/web/src/lib/components/user-settings-page/user-profile-settings.svelte
index 097ef2e2c9..bf002cbee3 100644
--- a/web/src/lib/components/user-settings-page/user-profile-settings.svelte
+++ b/web/src/lib/components/user-settings-page/user-profile-settings.svelte
@@ -39,27 +39,27 @@
 			<div class="flex flex-col gap-4 ml-4 mt-4">
 				<SettingInputField
 					inputType={SettingInputFieldType.TEXT}
-					label="User ID"
+					label="USER ID"
 					bind:value={user.id}
 					disabled={true}
 				/>
 
 				<SettingInputField
 					inputType={SettingInputFieldType.EMAIL}
-					label="Email"
+					label="EMAIL"
 					bind:value={user.email}
 				/>
 
 				<SettingInputField
 					inputType={SettingInputFieldType.TEXT}
-					label="First name"
+					label="FIRST NAME"
 					bind:value={user.firstName}
 					required={true}
 				/>
 
 				<SettingInputField
 					inputType={SettingInputFieldType.TEXT}
-					label="Last name"
+					label="LAST NAME"
 					bind:value={user.lastName}
 					required={true}
 				/>