From c792f724699caa9ba3609d86b82f648471b08e34 Mon Sep 17 00:00:00 2001
From: pyorot <FMasic@hotmail.co.uk>
Date: Thu, 2 Jan 2025 16:38:33 +0000
Subject: [PATCH] chore(web): transcoding settings cleanup (#14765)

* rearrangement only

* add accordions (requiring new localisation keys)

* localisation string adjustments

* capitalisation fix in existing code

* suggestions from @mertalev + revert accidental EOF \n deletion

* linting

---------

Co-authored-by: Alex <alex.tran1502@gmail.com>
---
 i18n/en.json                                  |   8 +-
 .../settings/ffmpeg/ffmpeg-settings.svelte    | 413 ++++++++++--------
 2 files changed, 225 insertions(+), 196 deletions(-)

diff --git a/i18n/en.json b/i18n/en.json
index b5f8f3ca9a4d5..e2957372a1b04 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -289,6 +289,8 @@
     "transcoding_constant_rate_factor": "Constant rate factor (-crf)",
     "transcoding_constant_rate_factor_description": "Video quality level. Typical values are 23 for H.264, 28 for HEVC, 31 for VP9, and 35 for AV1. Lower is better, but produces larger files.",
     "transcoding_disabled_description": "Don't transcode any videos, may break playback on some clients",
+    "transcoding_encoding_options": "Encoding Options",
+    "transcoding_encoding_options_description": "Set codecs, resolution, quality and other options for the encoded videos",
     "transcoding_hardware_acceleration": "Hardware Acceleration",
     "transcoding_hardware_acceleration_description": "Experimental; much faster, but will have lower quality at the same bitrate",
     "transcoding_hardware_decoding": "Hardware decoding",
@@ -301,6 +303,8 @@
     "transcoding_max_keyframe_interval": "Maximum keyframe interval",
     "transcoding_max_keyframe_interval_description": "Sets the maximum frame distance between keyframes. Lower values worsen compression efficiency, but improve seek times and may improve quality in scenes with fast movement. 0 sets this value automatically.",
     "transcoding_optimal_description": "Videos higher than target resolution or not in an accepted format",
+    "transcoding_policy": "Transcode Policy",
+    "transcoding_policy_description": "Set when a video will be transcoded",
     "transcoding_preferred_hardware_device": "Preferred hardware device",
     "transcoding_preferred_hardware_device_description": "Applies only to VAAPI and QSV. Sets the dri node used for hardware transcoding.",
     "transcoding_preset_preset": "Preset (-preset)",
@@ -309,7 +313,7 @@
     "transcoding_reference_frames_description": "The number of frames to reference when compressing a given frame. Higher values improve compression efficiency, but slow down encoding. 0 sets this value automatically.",
     "transcoding_required_description": "Only videos not in an accepted format",
     "transcoding_settings": "Video Transcoding Settings",
-    "transcoding_settings_description": "Manage the resolution and encoding information of the video files",
+    "transcoding_settings_description": "Manage which videos to transcode and how to process them",
     "transcoding_target_resolution": "Target resolution",
     "transcoding_target_resolution_description": "Higher resolutions can preserve more detail but take longer to encode, have larger file sizes, and can reduce app responsiveness.",
     "transcoding_temporal_aq": "Temporal AQ",
@@ -322,7 +326,7 @@
     "transcoding_transcode_policy_description": "Policy for when a video should be transcoded. HDR videos will always be transcoded (except if transcoding is disabled).",
     "transcoding_two_pass_encoding": "Two-pass encoding",
     "transcoding_two_pass_encoding_setting_description": "Transcode in two passes to produce better encoded videos. When max bitrate is enabled (required for it to work with H.264 and HEVC), this mode uses a bitrate range based on the max bitrate and ignores CRF. For VP9, CRF can be used if max bitrate is disabled.",
-    "transcoding_video_codec": "Video Codec",
+    "transcoding_video_codec": "Video codec",
     "transcoding_video_codec_description": "VP9 has high efficiency and web compatibility, but takes longer to transcode. HEVC performs similarly, but has lower web compatibility. H.264 is widely compatible and quick to transcode, but produces much larger files. AV1 is the most efficient codec but lacks support on older devices.",
     "trash_enabled_description": "Enable Trash features",
     "trash_number_of_days": "Number of days",
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 702ec1c1710b9..58c4be0ca0d9e 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
@@ -65,212 +65,237 @@
           </FormatMessage>
         </p>
 
-        <SettingInputField
-          inputType={SettingInputFieldType.NUMBER}
-          {disabled}
-          label={$t('admin.transcoding_constant_rate_factor')}
-          description={$t('admin.transcoding_constant_rate_factor_description')}
-          bind:value={config.ffmpeg.crf}
-          required={true}
-          isEdited={config.ffmpeg.crf !== savedConfig.ffmpeg.crf}
-        />
+        <SettingAccordion
+          key="transcoding-policy"
+          title={$t('admin.transcoding_policy')}
+          subtitle={$t('admin.transcoding_policy_description')}
+        >
+          <div class="ml-4 mt-4 flex flex-col gap-4">
+            <SettingSelect
+              label={$t('admin.transcoding_transcode_policy')}
+              {disabled}
+              desc={$t('admin.transcoding_transcode_policy_description')}
+              bind:value={config.ffmpeg.transcode}
+              name="transcode"
+              options={[
+                { value: TranscodePolicy.All, text: $t('all_videos') },
+                {
+                  value: TranscodePolicy.Optimal,
+                  text: $t('admin.transcoding_optimal_description'),
+                },
+                {
+                  value: TranscodePolicy.Bitrate,
+                  text: $t('admin.transcoding_bitrate_description'),
+                },
+                {
+                  value: TranscodePolicy.Required,
+                  text: $t('admin.transcoding_required_description'),
+                },
+                {
+                  value: TranscodePolicy.Disabled,
+                  text: $t('admin.transcoding_disabled_description'),
+                },
+              ]}
+              isEdited={config.ffmpeg.transcode !== savedConfig.ffmpeg.transcode}
+            />
 
-        <SettingSelect
-          label={$t('admin.transcoding_preset_preset')}
-          {disabled}
-          desc={$t('admin.transcoding_preset_preset_description')}
-          bind:value={config.ffmpeg.preset}
-          name="preset"
-          options={[
-            { value: 'ultrafast', text: 'ultrafast' },
-            { value: 'superfast', text: 'superfast' },
-            { value: 'veryfast', text: 'veryfast' },
-            { value: 'faster', text: 'faster' },
-            { value: 'fast', text: 'fast' },
-            { value: 'medium', text: 'medium' },
-            { value: 'slow', text: 'slow' },
-            { value: 'slower', text: 'slower' },
-            { value: 'veryslow', text: 'veryslow' },
-          ]}
-          isEdited={config.ffmpeg.preset !== savedConfig.ffmpeg.preset}
-        />
+            <SettingCheckboxes
+              label={$t('admin.transcoding_accepted_video_codecs')}
+              {disabled}
+              desc={$t('admin.transcoding_accepted_video_codecs_description')}
+              bind:value={config.ffmpeg.acceptedVideoCodecs}
+              name="videoCodecs"
+              options={[
+                { value: VideoCodec.H264, text: 'H.264' },
+                { value: VideoCodec.Hevc, text: 'HEVC' },
+                { value: VideoCodec.Vp9, text: 'VP9' },
+                { value: VideoCodec.Av1, text: 'AV1' },
+              ]}
+              isEdited={!isEqual(
+                sortBy(config.ffmpeg.acceptedVideoCodecs),
+                sortBy(savedConfig.ffmpeg.acceptedVideoCodecs),
+              )}
+            />
 
-        <SettingSelect
-          label={$t('admin.transcoding_video_codec')}
-          {disabled}
-          desc={$t('admin.transcoding_video_codec_description')}
-          bind:value={config.ffmpeg.targetVideoCodec}
-          options={[
-            { value: VideoCodec.H264, text: 'h264' },
-            { value: VideoCodec.Hevc, text: 'hevc' },
-            { value: VideoCodec.Vp9, text: 'vp9' },
-            { value: VideoCodec.Av1, text: 'av1' },
-          ]}
-          name="vcodec"
-          isEdited={config.ffmpeg.targetVideoCodec !== savedConfig.ffmpeg.targetVideoCodec}
-          onSelect={() => (config.ffmpeg.acceptedVideoCodecs = [config.ffmpeg.targetVideoCodec])}
-        />
+            <SettingCheckboxes
+              label={$t('admin.transcoding_accepted_audio_codecs')}
+              {disabled}
+              desc={$t('admin.transcoding_accepted_audio_codecs_description')}
+              bind:value={config.ffmpeg.acceptedAudioCodecs}
+              name="audioCodecs"
+              options={[
+                { value: AudioCodec.Aac, text: 'AAC' },
+                { value: AudioCodec.Mp3, text: 'MP3' },
+                { value: AudioCodec.Libopus, text: 'Opus' },
+                { value: AudioCodec.PcmS16Le, text: 'PCM (16 bit)' },
+              ]}
+              isEdited={!isEqual(
+                sortBy(config.ffmpeg.acceptedAudioCodecs),
+                sortBy(savedConfig.ffmpeg.acceptedAudioCodecs),
+              )}
+            />
 
-        <!-- PCM is excluded here since it's a bad choice for users storage-wise -->
-        <SettingSelect
-          label={$t('admin.transcoding_audio_codec')}
-          {disabled}
-          desc={$t('admin.transcoding_audio_codec_description')}
-          bind:value={config.ffmpeg.targetAudioCodec}
-          options={[
-            { value: AudioCodec.Aac, text: 'aac' },
-            { value: AudioCodec.Mp3, text: 'mp3' },
-            { value: AudioCodec.Libopus, text: 'opus' },
-          ]}
-          name="acodec"
-          isEdited={config.ffmpeg.targetAudioCodec !== savedConfig.ffmpeg.targetAudioCodec}
-          onSelect={() =>
-            config.ffmpeg.acceptedAudioCodecs.includes(config.ffmpeg.targetAudioCodec)
-              ? null
-              : config.ffmpeg.acceptedAudioCodecs.push(config.ffmpeg.targetAudioCodec)}
-        />
+            <SettingCheckboxes
+              label={$t('admin.transcoding_accepted_containers')}
+              {disabled}
+              desc={$t('admin.transcoding_accepted_containers_description')}
+              bind:value={config.ffmpeg.acceptedContainers}
+              name="videoContainers"
+              options={[
+                { value: VideoContainer.Mov, text: 'MOV' },
+                { value: VideoContainer.Ogg, text: 'Ogg' },
+                { value: VideoContainer.Webm, text: 'WebM' },
+              ]}
+              isEdited={!isEqual(
+                sortBy(config.ffmpeg.acceptedContainers),
+                sortBy(savedConfig.ffmpeg.acceptedContainers),
+              )}
+            />
+          </div>
+        </SettingAccordion>
 
-        <SettingCheckboxes
-          label={$t('admin.transcoding_accepted_video_codecs')}
-          {disabled}
-          desc={$t('admin.transcoding_accepted_video_codecs_description')}
-          bind:value={config.ffmpeg.acceptedVideoCodecs}
-          name="videoCodecs"
-          options={[
-            { value: VideoCodec.H264, text: 'H.264' },
-            { value: VideoCodec.Hevc, text: 'HEVC' },
-            { value: VideoCodec.Vp9, text: 'VP9' },
-            { value: VideoCodec.Av1, text: 'AV1' },
-          ]}
-          isEdited={!isEqual(sortBy(config.ffmpeg.acceptedVideoCodecs), sortBy(savedConfig.ffmpeg.acceptedVideoCodecs))}
-        />
+        <SettingAccordion
+          key="encoding-options"
+          title={$t('admin.transcoding_encoding_options')}
+          subtitle={$t('admin.transcoding_encoding_options_description')}
+        >
+          <div class="ml-4 mt-4 flex flex-col gap-4">
+            <SettingSelect
+              label={$t('admin.transcoding_video_codec')}
+              {disabled}
+              desc={$t('admin.transcoding_video_codec_description')}
+              bind:value={config.ffmpeg.targetVideoCodec}
+              options={[
+                { value: VideoCodec.H264, text: 'h264' },
+                { value: VideoCodec.Hevc, text: 'hevc' },
+                { value: VideoCodec.Vp9, text: 'vp9' },
+                { value: VideoCodec.Av1, text: 'av1' },
+              ]}
+              name="vcodec"
+              isEdited={config.ffmpeg.targetVideoCodec !== savedConfig.ffmpeg.targetVideoCodec}
+              onSelect={() => (config.ffmpeg.acceptedVideoCodecs = [config.ffmpeg.targetVideoCodec])}
+            />
 
-        <SettingCheckboxes
-          label={$t('admin.transcoding_accepted_audio_codecs')}
-          {disabled}
-          desc={$t('admin.transcoding_accepted_audio_codecs_description')}
-          bind:value={config.ffmpeg.acceptedAudioCodecs}
-          name="audioCodecs"
-          options={[
-            { value: AudioCodec.Aac, text: 'AAC' },
-            { value: AudioCodec.Mp3, text: 'MP3' },
-            { value: AudioCodec.Libopus, text: 'Opus' },
-            { value: AudioCodec.PcmS16Le, text: 'PCM (16 bit)' },
-          ]}
-          isEdited={!isEqual(sortBy(config.ffmpeg.acceptedAudioCodecs), sortBy(savedConfig.ffmpeg.acceptedAudioCodecs))}
-        />
+            <!-- PCM is excluded here since it's a bad choice for users storage-wise -->
+            <SettingSelect
+              label={$t('admin.transcoding_audio_codec')}
+              {disabled}
+              desc={$t('admin.transcoding_audio_codec_description')}
+              bind:value={config.ffmpeg.targetAudioCodec}
+              options={[
+                { value: AudioCodec.Aac, text: 'aac' },
+                { value: AudioCodec.Mp3, text: 'mp3' },
+                { value: AudioCodec.Libopus, text: 'opus' },
+              ]}
+              name="acodec"
+              isEdited={config.ffmpeg.targetAudioCodec !== savedConfig.ffmpeg.targetAudioCodec}
+              onSelect={() =>
+                config.ffmpeg.acceptedAudioCodecs.includes(config.ffmpeg.targetAudioCodec)
+                  ? null
+                  : config.ffmpeg.acceptedAudioCodecs.push(config.ffmpeg.targetAudioCodec)}
+            />
 
-        <SettingCheckboxes
-          label={$t('admin.transcoding_accepted_containers')}
-          {disabled}
-          desc={$t('admin.transcoding_accepted_containers_description')}
-          bind:value={config.ffmpeg.acceptedContainers}
-          name="videoContainers"
-          options={[
-            { value: VideoContainer.Mov, text: 'MOV' },
-            { value: VideoContainer.Ogg, text: 'Ogg' },
-            { value: VideoContainer.Webm, text: 'WebM' },
-          ]}
-          isEdited={!isEqual(sortBy(config.ffmpeg.acceptedContainers), sortBy(savedConfig.ffmpeg.acceptedContainers))}
-        />
+            <SettingSelect
+              label={$t('admin.transcoding_target_resolution')}
+              {disabled}
+              desc={$t('admin.transcoding_target_resolution_description')}
+              bind:value={config.ffmpeg.targetResolution}
+              options={[
+                { value: '2160', text: '4k' },
+                { value: '1440', text: '1440p' },
+                { value: '1080', text: '1080p' },
+                { value: '720', text: '720p' },
+                { value: '480', text: '480p' },
+                { value: 'original', text: $t('original') },
+              ]}
+              name="resolution"
+              isEdited={config.ffmpeg.targetResolution !== savedConfig.ffmpeg.targetResolution}
+            />
 
-        <SettingSelect
-          label={$t('admin.transcoding_target_resolution')}
-          {disabled}
-          desc={$t('admin.transcoding_target_resolution_description')}
-          bind:value={config.ffmpeg.targetResolution}
-          options={[
-            { value: '2160', text: '4k' },
-            { value: '1440', text: '1440p' },
-            { value: '1080', text: '1080p' },
-            { value: '720', text: '720p' },
-            { value: '480', text: '480p' },
-            { value: 'original', text: $t('original') },
-          ]}
-          name="resolution"
-          isEdited={config.ffmpeg.targetResolution !== savedConfig.ffmpeg.targetResolution}
-        />
+            <SettingInputField
+              inputType={SettingInputFieldType.NUMBER}
+              {disabled}
+              label={$t('admin.transcoding_constant_rate_factor')}
+              description={$t('admin.transcoding_constant_rate_factor_description')}
+              bind:value={config.ffmpeg.crf}
+              required={true}
+              isEdited={config.ffmpeg.crf !== savedConfig.ffmpeg.crf}
+            />
 
-        <SettingInputField
-          inputType={SettingInputFieldType.TEXT}
-          {disabled}
-          label={$t('admin.transcoding_max_bitrate')}
-          description={$t('admin.transcoding_max_bitrate_description')}
-          bind:value={config.ffmpeg.maxBitrate}
-          isEdited={config.ffmpeg.maxBitrate !== savedConfig.ffmpeg.maxBitrate}
-        />
+            <SettingSelect
+              label={$t('admin.transcoding_preset_preset')}
+              {disabled}
+              desc={$t('admin.transcoding_preset_preset_description')}
+              bind:value={config.ffmpeg.preset}
+              name="preset"
+              options={[
+                { value: 'ultrafast', text: 'ultrafast' },
+                { value: 'superfast', text: 'superfast' },
+                { value: 'veryfast', text: 'veryfast' },
+                { value: 'faster', text: 'faster' },
+                { value: 'fast', text: 'fast' },
+                { value: 'medium', text: 'medium' },
+                { value: 'slow', text: 'slow' },
+                { value: 'slower', text: 'slower' },
+                { value: 'veryslow', text: 'veryslow' },
+              ]}
+              isEdited={config.ffmpeg.preset !== savedConfig.ffmpeg.preset}
+            />
 
-        <SettingInputField
-          inputType={SettingInputFieldType.NUMBER}
-          {disabled}
-          label={$t('admin.transcoding_threads')}
-          description={$t('admin.transcoding_threads_description')}
-          bind:value={config.ffmpeg.threads}
-          isEdited={config.ffmpeg.threads !== savedConfig.ffmpeg.threads}
-        />
+            <SettingInputField
+              inputType={SettingInputFieldType.TEXT}
+              {disabled}
+              label={$t('admin.transcoding_max_bitrate')}
+              description={$t('admin.transcoding_max_bitrate_description')}
+              bind:value={config.ffmpeg.maxBitrate}
+              isEdited={config.ffmpeg.maxBitrate !== savedConfig.ffmpeg.maxBitrate}
+            />
 
-        <SettingSelect
-          label={$t('admin.transcoding_transcode_policy')}
-          {disabled}
-          desc={$t('admin.transcoding_transcode_policy_description')}
-          bind:value={config.ffmpeg.transcode}
-          name="transcode"
-          options={[
-            { value: TranscodePolicy.All, text: $t('all_videos') },
-            {
-              value: TranscodePolicy.Optimal,
-              text: $t('admin.transcoding_optimal_description'),
-            },
-            {
-              value: TranscodePolicy.Bitrate,
-              text: $t('admin.transcoding_bitrate_description'),
-            },
-            {
-              value: TranscodePolicy.Required,
-              text: $t('admin.transcoding_required_description'),
-            },
-            {
-              value: TranscodePolicy.Disabled,
-              text: $t('admin.transcoding_disabled_description'),
-            },
-          ]}
-          isEdited={config.ffmpeg.transcode !== savedConfig.ffmpeg.transcode}
-        />
+            <SettingInputField
+              inputType={SettingInputFieldType.NUMBER}
+              {disabled}
+              label={$t('admin.transcoding_threads')}
+              description={$t('admin.transcoding_threads_description')}
+              bind:value={config.ffmpeg.threads}
+              isEdited={config.ffmpeg.threads !== savedConfig.ffmpeg.threads}
+            />
 
-        <SettingSelect
-          label={$t('admin.transcoding_tone_mapping')}
-          {disabled}
-          desc={$t('admin.transcoding_tone_mapping_description')}
-          bind:value={config.ffmpeg.tonemap}
-          name="tonemap"
-          options={[
-            {
-              value: ToneMapping.Hable,
-              text: 'Hable',
-            },
-            {
-              value: ToneMapping.Mobius,
-              text: 'Mobius',
-            },
-            {
-              value: ToneMapping.Reinhard,
-              text: 'Reinhard',
-            },
-            {
-              value: ToneMapping.Disabled,
-              text: $t('disabled'),
-            },
-          ]}
-          isEdited={config.ffmpeg.tonemap !== savedConfig.ffmpeg.tonemap}
-        />
+            <SettingSelect
+              label={$t('admin.transcoding_tone_mapping')}
+              {disabled}
+              desc={$t('admin.transcoding_tone_mapping_description')}
+              bind:value={config.ffmpeg.tonemap}
+              name="tonemap"
+              options={[
+                {
+                  value: ToneMapping.Hable,
+                  text: 'Hable',
+                },
+                {
+                  value: ToneMapping.Mobius,
+                  text: 'Mobius',
+                },
+                {
+                  value: ToneMapping.Reinhard,
+                  text: 'Reinhard',
+                },
+                {
+                  value: ToneMapping.Disabled,
+                  text: $t('disabled'),
+                },
+              ]}
+              isEdited={config.ffmpeg.tonemap !== savedConfig.ffmpeg.tonemap}
+            />
 
-        <SettingSwitch
-          title={$t('admin.transcoding_two_pass_encoding')}
-          {disabled}
-          subtitle={$t('admin.transcoding_two_pass_encoding_setting_description')}
-          bind:checked={config.ffmpeg.twoPass}
-          isEdited={config.ffmpeg.twoPass !== savedConfig.ffmpeg.twoPass}
-        />
+            <SettingSwitch
+              title={$t('admin.transcoding_two_pass_encoding')}
+              {disabled}
+              subtitle={$t('admin.transcoding_two_pass_encoding_setting_description')}
+              bind:checked={config.ffmpeg.twoPass}
+              isEdited={config.ffmpeg.twoPass !== savedConfig.ffmpeg.twoPass}
+            />
+          </div>
+        </SettingAccordion>
 
         <SettingAccordion
           key="hardware-acceleration"