mirror of
https://github.com/immich-app/immich.git
synced 2025-05-31 04:05:39 -04:00
375 lines
15 KiB
Svelte
375 lines
15 KiB
Svelte
<script lang="ts">
|
|
import Icon from '$lib/components/elements/icon.svelte';
|
|
import {
|
|
AudioCodec,
|
|
CQMode,
|
|
ToneMapping,
|
|
TranscodeHWAccel,
|
|
TranscodePolicy,
|
|
VideoCodec,
|
|
type SystemConfigDto,
|
|
} from '@immich/sdk';
|
|
import { mdiHelpCircleOutline } from '@mdi/js';
|
|
import { isEqual, sortBy } from 'lodash-es';
|
|
import { createEventDispatcher } from 'svelte';
|
|
import { fade } from 'svelte/transition';
|
|
import type { SettingsEventType } from '../admin-settings';
|
|
import SettingAccordion from '$lib/components/shared-components/settings/setting-accordion.svelte';
|
|
import SettingInputField, {
|
|
SettingInputFieldType,
|
|
} from '$lib/components/shared-components/settings/setting-input-field.svelte';
|
|
import SettingSelect from '$lib/components/shared-components/settings/setting-select.svelte';
|
|
import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
|
|
import SettingCheckboxes from '$lib/components/shared-components/settings/setting-checkboxes.svelte';
|
|
import SettingButtonsRow from '$lib/components/shared-components/settings/setting-buttons-row.svelte';
|
|
import { t } from 'svelte-i18n';
|
|
|
|
export let savedConfig: SystemConfigDto;
|
|
export let defaultConfig: SystemConfigDto;
|
|
export let config: SystemConfigDto; // this is the config that is being edited
|
|
export let disabled = false;
|
|
|
|
const dispatch = createEventDispatcher<SettingsEventType>();
|
|
</script>
|
|
|
|
<div>
|
|
<div in:fade={{ duration: 500 }}>
|
|
<form autocomplete="off" on:submit|preventDefault>
|
|
<div class="ml-4 mt-4 flex flex-col gap-4">
|
|
<p class="text-sm dark:text-immich-dark-fg">
|
|
<Icon path={mdiHelpCircleOutline} class="inline" size="15" />
|
|
To learn more about the terminology used here, refer to FFmpeg documentation for
|
|
<a href="https://trac.ffmpeg.org/wiki/Encode/H.264" class="underline" target="_blank" rel="noreferrer"
|
|
>H.264 codec</a
|
|
>,
|
|
<a href="https://trac.ffmpeg.org/wiki/Encode/H.265" class="underline" target="_blank" rel="noreferrer"
|
|
>{$t('admin.transcoding_hevc_codec')}</a
|
|
>
|
|
and
|
|
<a href="https://trac.ffmpeg.org/wiki/Encode/VP9" class="underline" target="_blank" rel="noreferrer"
|
|
>VP9 codec</a
|
|
>.
|
|
</p>
|
|
|
|
<SettingInputField
|
|
inputType={SettingInputFieldType.NUMBER}
|
|
{disabled}
|
|
label={$t('admin.transcoding_constant_rate_factor')}
|
|
desc={$t('admin.transcoding_constant_rate_factor_description')}
|
|
bind:value={config.ffmpeg.crf}
|
|
required={true}
|
|
isEdited={config.ffmpeg.crf !== savedConfig.ffmpeg.crf}
|
|
/>
|
|
|
|
<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}
|
|
/>
|
|
|
|
<SettingSelect
|
|
label={$t('admin.transcoding_audio_codec').toUpperCase()}
|
|
{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}
|
|
on:select={() =>
|
|
config.ffmpeg.acceptedAudioCodecs.includes(config.ffmpeg.targetAudioCodec)
|
|
? null
|
|
: config.ffmpeg.acceptedAudioCodecs.push(config.ffmpeg.targetAudioCodec)}
|
|
/>
|
|
|
|
<SettingCheckboxes
|
|
label={$t('admin.transcoding_accepted_audio_codecs').toUpperCase()}
|
|
{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' },
|
|
]}
|
|
isEdited={!isEqual(sortBy(config.ffmpeg.acceptedAudioCodecs), sortBy(savedConfig.ffmpeg.acceptedAudioCodecs))}
|
|
/>
|
|
|
|
<SettingSelect
|
|
label={$t('admin.transcoding_video_codec').toUpperCase()}
|
|
{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}
|
|
on:select={() => (config.ffmpeg.acceptedVideoCodecs = [config.ffmpeg.targetVideoCodec])}
|
|
/>
|
|
|
|
<SettingCheckboxes
|
|
label={$t('admin.transcoding_accepted_video_codecs').toUpperCase()}
|
|
{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_target_resolution').toUpperCase()}
|
|
{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: 'original' },
|
|
]}
|
|
name="resolution"
|
|
isEdited={config.ffmpeg.targetResolution !== savedConfig.ffmpeg.targetResolution}
|
|
/>
|
|
|
|
<SettingInputField
|
|
inputType={SettingInputFieldType.TEXT}
|
|
{disabled}
|
|
label={$t('admin.transcoding_max_bitrate').toUpperCase()}
|
|
desc={$t('admin.transcoding_max_bitrate_description')}
|
|
bind:value={config.ffmpeg.maxBitrate}
|
|
isEdited={config.ffmpeg.maxBitrate !== savedConfig.ffmpeg.maxBitrate}
|
|
/>
|
|
|
|
<SettingInputField
|
|
inputType={SettingInputFieldType.NUMBER}
|
|
{disabled}
|
|
label={$t('admin.transcoding_threads').toUpperCase()}
|
|
desc={$t('admin.transcoding_threads_description')}
|
|
bind:value={config.ffmpeg.threads}
|
|
isEdited={config.ffmpeg.threads !== savedConfig.ffmpeg.threads}
|
|
/>
|
|
|
|
<SettingSelect
|
|
label={$t('admin.transcoding_transcode_policy').toUpperCase()}
|
|
{disabled}
|
|
desc={$t('admin.transcoding_transcode_policy_description')}
|
|
bind:value={config.ffmpeg.transcode}
|
|
name="transcode"
|
|
options={[
|
|
{ value: TranscodePolicy.All, text: '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_tone_mapping').toUpperCase()}
|
|
{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: 'Disabled',
|
|
},
|
|
]}
|
|
isEdited={config.ffmpeg.tonemap !== savedConfig.ffmpeg.tonemap}
|
|
/>
|
|
|
|
<SettingSwitch
|
|
title={$t('admin.transcoding_two_pass_encoding').toUpperCase()}
|
|
{disabled}
|
|
subtitle={$t('admin.transcoding_two_pass_encoding_setting_description')}
|
|
bind:checked={config.ffmpeg.twoPass}
|
|
isEdited={config.ffmpeg.twoPass !== savedConfig.ffmpeg.twoPass}
|
|
/>
|
|
|
|
<SettingAccordion
|
|
key="hardware-acceleration"
|
|
title={$t('admin.transcoding_hardware_acceleration')}
|
|
subtitle={$t('admin.transcoding_hardware_acceleration_description')}
|
|
>
|
|
<div class="ml-4 mt-4 flex flex-col gap-4">
|
|
<SettingSelect
|
|
label={$t('admin.transcoding_acceleration_api').toUpperCase()}
|
|
{disabled}
|
|
desc={$t('admin.transcoding_acceleration_api_description')}
|
|
bind:value={config.ffmpeg.accel}
|
|
name="accel"
|
|
options={[
|
|
{ value: TranscodeHWAccel.Nvenc, text: $t('admin.transcoding_acceleration_nvenc') },
|
|
{
|
|
value: TranscodeHWAccel.Qsv,
|
|
text: $t('admin.transcoding_acceleration_qsv'),
|
|
},
|
|
{
|
|
value: TranscodeHWAccel.Vaapi,
|
|
text: $t('admin.transcoding_acceleration_vaapi'),
|
|
},
|
|
{
|
|
value: TranscodeHWAccel.Rkmpp,
|
|
text: $t('admin.transcoding_acceleration_rkmpp'),
|
|
},
|
|
{
|
|
value: TranscodeHWAccel.Disabled,
|
|
text: $t('admin.disabled'),
|
|
},
|
|
]}
|
|
isEdited={config.ffmpeg.accel !== savedConfig.ffmpeg.accel}
|
|
/>
|
|
|
|
<SettingSwitch
|
|
title={$t('admin.transcoding_hardware_decoding').toUpperCase()}
|
|
{disabled}
|
|
subtitle={$t('admin.transcoding_hardware_decoding_setting_description')}
|
|
bind:checked={config.ffmpeg.accelDecode}
|
|
isEdited={config.ffmpeg.accelDecode !== savedConfig.ffmpeg.accelDecode}
|
|
/>
|
|
|
|
<SettingSelect
|
|
label={$t('admin.transcoding_constant_quality_mode').toUpperCase()}
|
|
desc={$t('admin.transcoding_constant_quality_mode_description')}
|
|
bind:value={config.ffmpeg.cqMode}
|
|
options={[
|
|
{ value: CQMode.Auto, text: 'Auto' },
|
|
{ value: CQMode.Icq, text: 'ICQ' },
|
|
{ value: CQMode.Cqp, text: 'CQP' },
|
|
]}
|
|
isEdited={config.ffmpeg.cqMode !== savedConfig.ffmpeg.cqMode}
|
|
{disabled}
|
|
/>
|
|
|
|
<SettingSwitch
|
|
title={$t('admin.transcoding_temporal_aq').toUpperCase()}
|
|
{disabled}
|
|
subtitle={$t('admin.transcoding_temporal_aq_description')}
|
|
bind:checked={config.ffmpeg.temporalAQ}
|
|
isEdited={config.ffmpeg.temporalAQ !== savedConfig.ffmpeg.temporalAQ}
|
|
/>
|
|
|
|
<SettingInputField
|
|
inputType={SettingInputFieldType.TEXT}
|
|
label={$t('admin.transcoding_preferred_hardware_device').toUpperCase()}
|
|
desc={$t('admin.transcoding_preferred_hardware_device_description')}
|
|
bind:value={config.ffmpeg.preferredHwDevice}
|
|
isEdited={config.ffmpeg.preferredHwDevice !== savedConfig.ffmpeg.preferredHwDevice}
|
|
{disabled}
|
|
/>
|
|
</div>
|
|
</SettingAccordion>
|
|
|
|
<SettingAccordion
|
|
key="advanced-options"
|
|
title={$t('advanced')}
|
|
subtitle={$t('admin.transcoding_advanced_options_description')}
|
|
>
|
|
<div class="ml-4 mt-4 flex flex-col gap-4">
|
|
<SettingInputField
|
|
inputType={SettingInputFieldType.NUMBER}
|
|
label={$t('admin.transcoding_tone_mapping_npl').toUpperCase()}
|
|
desc={$t('admin.transcoding_tone_mapping_npl_description')}
|
|
bind:value={config.ffmpeg.npl}
|
|
isEdited={config.ffmpeg.npl !== savedConfig.ffmpeg.npl}
|
|
{disabled}
|
|
/>
|
|
|
|
<SettingInputField
|
|
inputType={SettingInputFieldType.NUMBER}
|
|
label={$t('admin.transcoding_max_b_frames').toUpperCase()}
|
|
desc={$t('admin.transcoding_max_b_frames_description')}
|
|
bind:value={config.ffmpeg.bframes}
|
|
isEdited={config.ffmpeg.bframes !== savedConfig.ffmpeg.bframes}
|
|
{disabled}
|
|
/>
|
|
|
|
<SettingInputField
|
|
inputType={SettingInputFieldType.NUMBER}
|
|
label={$t('admin.transcoding_reference_frames').toUpperCase()}
|
|
desc={$t('admin.transcoding_reference_frames_description')}
|
|
bind:value={config.ffmpeg.refs}
|
|
isEdited={config.ffmpeg.refs !== savedConfig.ffmpeg.refs}
|
|
{disabled}
|
|
/>
|
|
|
|
<SettingInputField
|
|
inputType={SettingInputFieldType.NUMBER}
|
|
label={$t('admin.transcoding_max_keyframe_interval').toUpperCase()}
|
|
desc={$t('admin.transcoding_max_keyframe_interval_description')}
|
|
bind:value={config.ffmpeg.gopSize}
|
|
isEdited={config.ffmpeg.gopSize !== savedConfig.ffmpeg.gopSize}
|
|
{disabled}
|
|
/>
|
|
</div>
|
|
</SettingAccordion>
|
|
</div>
|
|
|
|
<div class="ml-4">
|
|
<SettingButtonsRow
|
|
on:reset={({ detail }) => dispatch('reset', { ...detail, configKeys: ['ffmpeg'] })}
|
|
on:save={() => dispatch('save', { ffmpeg: config.ffmpeg })}
|
|
showResetToDefault={!isEqual(savedConfig.ffmpeg, defaultConfig.ffmpeg)}
|
|
{disabled}
|
|
/>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|