beenull/immich
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

refactor(web): system-settings

Browse source
This commit is contained in:
martabal 2023-08-14 16:05:09 +02:00
parent 5fa9704a65
commit 0e4b00d07a
No known key found for this signature in database
GPG key ID: C00196E3148A52BD
7 changed files with 548 additions and 613 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

373
web/src/lib/components/admin-page/settings/ffmpeg/ffmpeg-settings.svelte
View file

@ -6,6 +6,7 @@
import { import {
api, api,
AudioCodec, AudioCodec,
SystemConfigDto,
SystemConfigFFmpegDto, SystemConfigFFmpegDto,
ToneMapping, ToneMapping,
TranscodeHWAccel, TranscodeHWAccel,
@ -19,31 +20,23 @@
import { isEqual } from 'lodash-es'; import { isEqual } from 'lodash-es';
import { fade } from 'svelte/transition'; import { fade } from 'svelte/transition';
export let config: SystemConfigDto;
export let ffmpegConfig: SystemConfigFFmpegDto; // this is the config that is being edited export let ffmpegConfig: SystemConfigFFmpegDto; // this is the config that is being edited
export let ffmpegDefault: SystemConfigFFmpegDto;
let savedConfig: SystemConfigFFmpegDto; export let savedConfig: SystemConfigFFmpegDto;
let defaultConfig: SystemConfigFFmpegDto;
async function getConfigs() {
[savedConfig, defaultConfig] = await Promise.all([
api.systemConfigApi.getConfig().then((res) => res.data.ffmpeg),
api.systemConfigApi.getDefaults().then((res) => res.data.ffmpeg),
]);
}
async function saveSetting() { async function saveSetting() {
try { try {
const { data: configs } = await api.systemConfigApi.getConfig(); const { data } = await api.systemConfigApi.updateConfig({
const result = await api.systemConfigApi.updateConfig({
systemConfigDto: { systemConfigDto: {
...configs, ...config,
ffmpeg: ffmpegConfig, ffmpeg: ffmpegConfig,
}, },
}); });
ffmpegConfig = { ...result.data.ffmpeg }; ffmpegConfig = { ...data.ffmpeg };
savedConfig = { ...result.data.ffmpeg }; savedConfig = { ...data.ffmpeg };
config = { ...data };
notificationController.show({ notificationController.show({
message: 'FFmpeg settings saved', message: 'FFmpeg settings saved',
@ -59,10 +52,7 @@
} }
async function reset() { async function reset() {
const { data: resetConfig } = await api.systemConfigApi.getConfig(); ffmpegConfig = { ...savedConfig };
ffmpegConfig = { ...resetConfig.ffmpeg };
savedConfig = { ...resetConfig.ffmpeg };
notificationController.show({ notificationController.show({
message: 'Reset FFmpeg settings to the recent saved settings', message: 'Reset FFmpeg settings to the recent saved settings',
@ -71,10 +61,7 @@
} }
async function resetToDefault() { async function resetToDefault() {
const { data: configs } = await api.systemConfigApi.getDefaults(); ffmpegConfig = ffmpegDefault;
ffmpegConfig = { ...configs.ffmpeg };
defaultConfig = { ...configs.ffmpeg };
notificationController.show({ notificationController.show({
message: 'Reset FFmpeg settings to default', message: 'Reset FFmpeg settings to default',
@ -84,185 +71,183 @@
</script> </script>
<div> <div>
{#await getConfigs() then} <div in:fade={{ duration: 300 }}>
<div in:fade={{ duration: 500 }}> <form autocomplete="off" on:submit|preventDefault>
<form autocomplete="off" on:submit|preventDefault> <div class="ml-4 mt-4 flex flex-col gap-4">
<div class="ml-4 mt-4 flex flex-col gap-4"> <SettingInputField
<SettingInputField inputType={SettingInputFieldType.NUMBER}
inputType={SettingInputFieldType.NUMBER} label="CONSTANT RATE FACTOR (-crf)"
label="CONSTANT RATE FACTOR (-crf)" desc="Video quality level. Typical values are 23 for H.264, 28 for HEVC, and 31 for VP9. Lower is better, but takes longer to encode and produces larger files."
desc="Video quality level. Typical values are 23 for H.264, 28 for HEVC, and 31 for VP9. Lower is better, but takes longer to encode and produces larger files." bind:value={ffmpegConfig.crf}
bind:value={ffmpegConfig.crf} required={true}
required={true} isEdited={!(ffmpegConfig.crf == savedConfig.crf)}
isEdited={!(ffmpegConfig.crf == savedConfig.crf)} />
/>
<SettingSelect <SettingSelect
label="PRESET (-preset)" label="PRESET (-preset)"
desc="Compression speed. Slower presets produce smaller files, and increase quality when targeting a certain bitrate. VP9 ignores speeds above `faster`." desc="Compression speed. Slower presets produce smaller files, and increase quality when targeting a certain bitrate. VP9 ignores speeds above `faster`."
bind:value={ffmpegConfig.preset} bind:value={ffmpegConfig.preset}
name="preset" name="preset"
options={[ options={[
{ value: 'ultrafast', text: 'ultrafast' }, { value: 'ultrafast', text: 'ultrafast' },
{ value: 'superfast', text: 'superfast' }, { value: 'superfast', text: 'superfast' },
{ value: 'veryfast', text: 'veryfast' }, { value: 'veryfast', text: 'veryfast' },
{ value: 'faster', text: 'faster' }, { value: 'faster', text: 'faster' },
{ value: 'fast', text: 'fast' }, { value: 'fast', text: 'fast' },
{ value: 'medium', text: 'medium' }, { value: 'medium', text: 'medium' },
{ value: 'slow', text: 'slow' }, { value: 'slow', text: 'slow' },
{ value: 'slower', text: 'slower' }, { value: 'slower', text: 'slower' },
{ value: 'veryslow', text: 'veryslow' }, { value: 'veryslow', text: 'veryslow' },
]} ]}
isEdited={!(ffmpegConfig.preset == savedConfig.preset)} isEdited={!(ffmpegConfig.preset == savedConfig.preset)}
/> />
<SettingSelect <SettingSelect
label="AUDIO CODEC" label="AUDIO CODEC"
desc="Opus is the highest quality option, but has lower compatibility with old devices or software." desc="Opus is the highest quality option, but has lower compatibility with old devices or software."
bind:value={ffmpegConfig.targetAudioCodec} bind:value={ffmpegConfig.targetAudioCodec}
options={[ options={[
{ value: AudioCodec.Aac, text: 'aac' }, { value: AudioCodec.Aac, text: 'aac' },
{ value: AudioCodec.Mp3, text: 'mp3' }, { value: AudioCodec.Mp3, text: 'mp3' },
{ value: AudioCodec.Opus, text: 'opus' }, { value: AudioCodec.Opus, text: 'opus' },
]} ]}
name="acodec" name="acodec"
isEdited={!(ffmpegConfig.targetAudioCodec == savedConfig.targetAudioCodec)} isEdited={!(ffmpegConfig.targetAudioCodec == savedConfig.targetAudioCodec)}
/> />
<SettingSelect <SettingSelect
label="VIDEO CODEC" label="VIDEO CODEC"
desc="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." desc="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."
bind:value={ffmpegConfig.targetVideoCodec} bind:value={ffmpegConfig.targetVideoCodec}
options={[ options={[
{ value: VideoCodec.H264, text: 'h264' }, { value: VideoCodec.H264, text: 'h264' },
{ value: VideoCodec.Hevc, text: 'hevc' }, { value: VideoCodec.Hevc, text: 'hevc' },
{ value: VideoCodec.Vp9, text: 'vp9' }, { value: VideoCodec.Vp9, text: 'vp9' },
]} ]}
name="vcodec" name="vcodec"
isEdited={!(ffmpegConfig.targetVideoCodec == savedConfig.targetVideoCodec)} isEdited={!(ffmpegConfig.targetVideoCodec == savedConfig.targetVideoCodec)}
/> />
<SettingSelect <SettingSelect
label="TARGET RESOLUTION" label="TARGET RESOLUTION"
desc="Higher resolutions can preserve more detail but take longer to encode, have larger file sizes, and can reduce app responsiveness." desc="Higher resolutions can preserve more detail but take longer to encode, have larger file sizes, and can reduce app responsiveness."
bind:value={ffmpegConfig.targetResolution} bind:value={ffmpegConfig.targetResolution}
options={[ options={[
{ value: '2160', text: '4k' }, { value: '2160', text: '4k' },
{ value: '1440', text: '1440p' }, { value: '1440', text: '1440p' },
{ value: '1080', text: '1080p' }, { value: '1080', text: '1080p' },
{ value: '720', text: '720p' }, { value: '720', text: '720p' },
{ value: '480', text: '480p' }, { value: '480', text: '480p' },
{ value: 'original', text: 'original' }, { value: 'original', text: 'original' },
]} ]}
name="resolution" name="resolution"
isEdited={!(ffmpegConfig.targetResolution == savedConfig.targetResolution)} isEdited={!(ffmpegConfig.targetResolution == savedConfig.targetResolution)}
/> />
<SettingInputField <SettingInputField
inputType={SettingInputFieldType.TEXT} inputType={SettingInputFieldType.TEXT}
label="MAX BITRATE" label="MAX BITRATE"
desc="Setting a max bitrate can make file sizes more predictable at a minor cost to quality. At 720p, typical values are 2600k for VP9 or HEVC, or 4500k for H.264. Disabled if set to 0." desc="Setting a max bitrate can make file sizes more predictable at a minor cost to quality. At 720p, typical values are 2600k for VP9 or HEVC, or 4500k for H.264. Disabled if set to 0."
bind:value={ffmpegConfig.maxBitrate} bind:value={ffmpegConfig.maxBitrate}
isEdited={!(ffmpegConfig.maxBitrate == savedConfig.maxBitrate)} isEdited={!(ffmpegConfig.maxBitrate == savedConfig.maxBitrate)}
/> />
<SettingInputField <SettingInputField
inputType={SettingInputFieldType.NUMBER} inputType={SettingInputFieldType.NUMBER}
label="THREADS" label="THREADS"
desc="Higher values lead to faster encoding, but leave less room for the server to process other tasks while active. This value should not be more than the number of CPU cores. Maximizes utilization if set to 0." desc="Higher values lead to faster encoding, but leave less room for the server to process other tasks while active. This value should not be more than the number of CPU cores. Maximizes utilization if set to 0."
bind:value={ffmpegConfig.threads} bind:value={ffmpegConfig.threads}
isEdited={!(ffmpegConfig.threads == savedConfig.threads)} isEdited={!(ffmpegConfig.threads == savedConfig.threads)}
/> />
<SettingSelect <SettingSelect
label="TRANSCODE POLICY" label="TRANSCODE POLICY"
desc="Policy for when a video should be transcoded." desc="Policy for when a video should be transcoded."
bind:value={ffmpegConfig.transcode} bind:value={ffmpegConfig.transcode}
name="transcode" name="transcode"
options={[ options={[
{ value: TranscodePolicy.All, text: 'All videos' }, { value: TranscodePolicy.All, text: 'All videos' },
{ {
value: TranscodePolicy.Optimal, value: TranscodePolicy.Optimal,
text: 'Videos higher than target resolution or not in the desired format', text: 'Videos higher than target resolution or not in the desired format',
}, },
{ {
value: TranscodePolicy.Required, value: TranscodePolicy.Required,
text: 'Only videos not in the desired format', text: 'Only videos not in the desired format',
}, },
{ {
value: TranscodePolicy.Disabled, value: TranscodePolicy.Disabled,
text: "Don't transcode any videos, may break playback on some clients", text: "Don't transcode any videos, may break playback on some clients",
}, },
]} ]}
isEdited={!(ffmpegConfig.transcode == savedConfig.transcode)} isEdited={!(ffmpegConfig.transcode == savedConfig.transcode)}
/> />
<SettingSelect <SettingSelect
label="HARDWARE ACCELERATION" label="HARDWARE ACCELERATION"
desc="Experimental. Much faster, but will have lower quality at the same bitrate. This setting is 'best effort': it will fallback to software transcoding on failure. VP9 may or may not work depending on your hardware." desc="Experimental. Much faster, but will have lower quality at the same bitrate. This setting is 'best effort': it will fallback to software transcoding on failure. VP9 may or may not work depending on your hardware."
bind:value={ffmpegConfig.accel} bind:value={ffmpegConfig.accel}
name="accel" name="accel"
options={[ options={[
{ value: TranscodeHWAccel.Nvenc, text: 'NVENC (requires NVIDIA GPU)' }, { value: TranscodeHWAccel.Nvenc, text: 'NVENC (requires NVIDIA GPU)' },
{ {
value: TranscodeHWAccel.Qsv, value: TranscodeHWAccel.Qsv,
text: 'Quick Sync (requires 7th gen Intel CPU or later)', text: 'Quick Sync (requires 7th gen Intel CPU or later)',
}, },
{ {
value: TranscodeHWAccel.Vaapi, value: TranscodeHWAccel.Vaapi,
text: 'VAAPI', text: 'VAAPI',
}, },
{ {
value: TranscodeHWAccel.Disabled, value: TranscodeHWAccel.Disabled,
text: 'Disabled', text: 'Disabled',
}, },
]} ]}
isEdited={!(ffmpegConfig.accel == savedConfig.accel)} isEdited={!(ffmpegConfig.accel == savedConfig.accel)}
/> />
<SettingSelect <SettingSelect
label="TONE-MAPPING" label="TONE-MAPPING"
desc="Attempts to preserve the appearance of HDR videos when converted to SDR. Each algorithm makes different tradeoffs for color, detail and brightness. Hable preserves detail, Mobius preserves color, and Reinhard preserves brightness." desc="Attempts to preserve the appearance of HDR videos when converted to SDR. Each algorithm makes different tradeoffs for color, detail and brightness. Hable preserves detail, Mobius preserves color, and Reinhard preserves brightness."
bind:value={ffmpegConfig.tonemap} bind:value={ffmpegConfig.tonemap}
name="tonemap" name="tonemap"
options={[ options={[
{ {
value: ToneMapping.Hable, value: ToneMapping.Hable,
text: 'Hable', text: 'Hable',
}, },
{ {
value: ToneMapping.Mobius, value: ToneMapping.Mobius,
text: 'Mobius', text: 'Mobius',
}, },
{ {
value: ToneMapping.Reinhard, value: ToneMapping.Reinhard,
text: 'Reinhard', text: 'Reinhard',
}, },
{ {
value: ToneMapping.Disabled, value: ToneMapping.Disabled,
text: 'Disabled', text: 'Disabled',
}, },
]} ]}
isEdited={!(ffmpegConfig.tonemap == savedConfig.tonemap)} isEdited={!(ffmpegConfig.tonemap == savedConfig.tonemap)}
/> />
<SettingSwitch <SettingSwitch
title="TWO-PASS ENCODING" title="TWO-PASS ENCODING"
subtitle="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." subtitle="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."
bind:checked={ffmpegConfig.twoPass} bind:checked={ffmpegConfig.twoPass}
isEdited={!(ffmpegConfig.twoPass === savedConfig.twoPass)} isEdited={!(ffmpegConfig.twoPass === savedConfig.twoPass)}
/> />
</div> </div>
<div class="ml-4"> <div class="ml-4">
<SettingButtonsRow <SettingButtonsRow
on:reset={reset} on:reset={reset}
on:save={saveSetting} on:save={saveSetting}
on:reset-to-default={resetToDefault} on:reset-to-default={resetToDefault}
showResetToDefault={!isEqual(savedConfig, defaultConfig)} showResetToDefault={!isEqual(ffmpegConfig, ffmpegDefault)}
/> />
</div> </div>
</form> </form>
</div> </div>
{/await}
</div> </div>

84
web/src/lib/components/admin-page/settings/job-settings/job-settings.svelte
View file

@ -3,41 +3,33 @@
notificationController, notificationController,
NotificationType, NotificationType,
} from '$lib/components/shared-components/notification/notification'; } from '$lib/components/shared-components/notification/notification';
import { api, JobName, SystemConfigJobDto } from '@api'; import { api, JobName, SystemConfigDto, SystemConfigJobDto } from '@api';
import { isEqual } from 'lodash-es'; import { isEqual } from 'lodash-es';
import { fade } from 'svelte/transition'; import { fade } from 'svelte/transition';
import { handleError } from '../../../../utils/handle-error'; import { handleError } from '../../../../utils/handle-error';
import SettingButtonsRow from '../setting-buttons-row.svelte'; import SettingButtonsRow from '../setting-buttons-row.svelte';
import SettingInputField, { SettingInputFieldType } from '../setting-input-field.svelte'; import SettingInputField, { SettingInputFieldType } from '../setting-input-field.svelte';
export let config: SystemConfigDto;
export let jobConfig: SystemConfigJobDto; // this is the config that is being edited export let jobConfig: SystemConfigJobDto; // this is the config that is being edited
export let jobDefault: SystemConfigJobDto;
let savedConfig: SystemConfigJobDto; export let savedConfig: SystemConfigJobDto;
let defaultConfig: SystemConfigJobDto;
const ignoredJobs = [JobName.BackgroundTask, JobName.Search] as JobName[]; const ignoredJobs = [JobName.BackgroundTask, JobName.Search] as JobName[];
const jobNames = Object.values(JobName).filter((jobName) => !ignoredJobs.includes(jobName as JobName)); const jobNames = Object.values(JobName).filter((jobName) => !ignoredJobs.includes(jobName as JobName));
async function getConfigs() {
[savedConfig, defaultConfig] = await Promise.all([
api.systemConfigApi.getConfig().then((res) => res.data.job),
api.systemConfigApi.getDefaults().then((res) => res.data.job),
]);
}
async function saveSetting() { async function saveSetting() {
try { try {
const { data: configs } = await api.systemConfigApi.getConfig(); const { data } = await api.systemConfigApi.updateConfig({
const result = await api.systemConfigApi.updateConfig({
systemConfigDto: { systemConfigDto: {
...configs, ...config,
job: jobConfig, job: jobConfig,
}, },
}); });
jobConfig = { ...result.data.job }; jobConfig = { ...data.job };
savedConfig = { ...result.data.job }; savedConfig = { ...data.job };
config = { ...data };
notificationController.show({ message: 'Job settings saved', type: NotificationType.Info }); notificationController.show({ message: 'Job settings saved', type: NotificationType.Info });
} catch (error) { } catch (error) {
@ -46,10 +38,7 @@
} }
async function reset() { async function reset() {
const { data: resetConfig } = await api.systemConfigApi.getConfig(); jobConfig = { ...savedConfig };
jobConfig = { ...resetConfig.job };
savedConfig = { ...resetConfig.job };
notificationController.show({ notificationController.show({
message: 'Reset Job settings to the recent saved settings', message: 'Reset Job settings to the recent saved settings',
@ -58,10 +47,7 @@
} }
async function resetToDefault() { async function resetToDefault() {
const { data: configs } = await api.systemConfigApi.getDefaults(); jobConfig = jobDefault;
jobConfig = { ...configs.job };
defaultConfig = { ...configs.job };
notificationController.show({ notificationController.show({
message: 'Reset Job settings to default', message: 'Reset Job settings to default',
@ -71,31 +57,29 @@
</script> </script>
<div> <div>
{#await getConfigs() then} <div in:fade={{ duration: 300 }}>
<div in:fade={{ duration: 500 }}> <form autocomplete="off" on:submit|preventDefault>
<form autocomplete="off" on:submit|preventDefault> {#each jobNames as jobName}
{#each jobNames as jobName} <div class="ml-4 mt-4 flex flex-col gap-4">
<div class="ml-4 mt-4 flex flex-col gap-4"> <SettingInputField
<SettingInputField inputType={SettingInputFieldType.NUMBER}
inputType={SettingInputFieldType.NUMBER} label="{api.getJobName(jobName)} Concurrency"
label="{api.getJobName(jobName)} Concurrency" desc=""
desc="" bind:value={jobConfig[jobName].concurrency}
bind:value={jobConfig[jobName].concurrency} required={true}
required={true} isEdited={!(jobConfig[jobName].concurrency == savedConfig[jobName].concurrency)}
isEdited={!(jobConfig[jobName].concurrency == savedConfig[jobName].concurrency)}
/>
</div>
{/each}
<div class="ml-4">
<SettingButtonsRow
on:reset={reset}
on:save={saveSetting}
on:reset-to-default={resetToDefault}
showResetToDefault={!isEqual(savedConfig, defaultConfig)}
/> />
</div> </div>
</form> {/each}
</div>
{/await} <div class="ml-4">
<SettingButtonsRow
on:reset={reset}
on:save={saveSetting}
on:reset-to-default={resetToDefault}
showResetToDefault={!isEqual(jobConfig, jobDefault)}
/>
</div>
</form>
</div>
</div> </div>

238
web/src/lib/components/admin-page/settings/oauth/oauth-settings.svelte
View file

@ -4,7 +4,7 @@
NotificationType, NotificationType,
} from '$lib/components/shared-components/notification/notification'; } from '$lib/components/shared-components/notification/notification';
import { handleError } from '$lib/utils/handle-error'; import { handleError } from '$lib/utils/handle-error';
import { api, SystemConfigOAuthDto } from '@api'; import { api, SystemConfigDto, SystemConfigOAuthDto } from '@api';
import { isEqual } from 'lodash-es'; import { isEqual } from 'lodash-es';
import { fade } from 'svelte/transition'; import { fade } from 'svelte/transition';
import ConfirmDisableLogin from '../confirm-disable-login.svelte'; import ConfirmDisableLogin from '../confirm-disable-login.svelte';
@ -12,10 +12,10 @@
import SettingInputField, { SettingInputFieldType } from '../setting-input-field.svelte'; import SettingInputField, { SettingInputFieldType } from '../setting-input-field.svelte';
import SettingSwitch from '../setting-switch.svelte'; import SettingSwitch from '../setting-switch.svelte';
export let config: SystemConfigDto;
export let oauthConfig: SystemConfigOAuthDto; export let oauthConfig: SystemConfigOAuthDto;
export let oauthDefault: SystemConfigOAuthDto;
let savedConfig: SystemConfigOAuthDto; export let savedConfig: SystemConfigOAuthDto;
let defaultConfig: SystemConfigOAuthDto;
const handleToggleOverride = () => { const handleToggleOverride = () => {
// click runs before bind // click runs before bind
@ -25,13 +25,6 @@
} }
}; };
async function getConfigs() {
[savedConfig, defaultConfig] = await Promise.all([
api.systemConfigApi.getConfig().then((res) => res.data.oauth),
api.systemConfigApi.getDefaults().then((res) => res.data.oauth),
]);
}
async function reset() { async function reset() {
const { data: resetConfig } = await api.systemConfigApi.getConfig(); const { data: resetConfig } = await api.systemConfigApi.getConfig();
@ -59,9 +52,7 @@
async function saveSetting() { async function saveSetting() {
try { try {
const { data: current } = await api.systemConfigApi.getConfig(); if (!config.passwordLogin.enabled && config.oauth.enabled && !oauthConfig.enabled) {
if (!current.passwordLogin.enabled && current.oauth.enabled && !oauthConfig.enabled) {
const confirmed = await openConfirmModal(); const confirmed = await openConfirmModal();
if (!confirmed) { if (!confirmed) {
return; return;
@ -72,15 +63,16 @@
oauthConfig.mobileRedirectUri = ''; oauthConfig.mobileRedirectUri = '';
} }
const { data: updated } = await api.systemConfigApi.updateConfig({ const { data } = await api.systemConfigApi.updateConfig({
systemConfigDto: { systemConfigDto: {
...current, ...config,
oauth: oauthConfig, oauth: oauthConfig,
}, },
}); });
oauthConfig = { ...updated.oauth }; oauthConfig = { ...data.oauth };
savedConfig = { ...updated.oauth }; savedConfig = { ...data.oauth };
config = { ...data };
notificationController.show({ message: 'OAuth settings saved', type: NotificationType.Info }); notificationController.show({ message: 'OAuth settings saved', type: NotificationType.Info });
} catch (error) { } catch (error) {
@ -89,9 +81,7 @@
} }
async function resetToDefault() { async function resetToDefault() {
const { data: defaultConfig } = await api.systemConfigApi.getDefaults(); oauthConfig = oauthDefault;
oauthConfig = { ...defaultConfig.oauth };
notificationController.show({ notificationController.show({
message: 'Reset OAuth settings to default', message: 'Reset OAuth settings to default',
@ -105,115 +95,113 @@
{/if} {/if}
<div class="mt-2"> <div class="mt-2">
{#await getConfigs() then} <div in:fade={{ duration: 300 }}>
<div in:fade={{ duration: 500 }}> <form autocomplete="off" on:submit|preventDefault class="mx-4 flex flex-col gap-4 py-4">
<form autocomplete="off" on:submit|preventDefault class="mx-4 flex flex-col gap-4 py-4"> <p class="text-sm dark:text-immich-dark-fg">
<p class="text-sm dark:text-immich-dark-fg"> For more details about this feature, refer to the <a
For more details about this feature, refer to the <a href="http://immich.app/docs/administration/oauth#mobile-redirect-uri"
href="http://immich.app/docs/administration/oauth#mobile-redirect-uri" class="underline"
class="underline" target="_blank"
target="_blank" rel="noreferrer">docs</a
rel="noreferrer">docs</a >.
>. </p>
</p>
<SettingSwitch title="ENABLE" bind:checked={oauthConfig.enabled} /> <SettingSwitch title="ENABLE" bind:checked={oauthConfig.enabled} />
<hr /> <hr />
<SettingInputField
inputType={SettingInputFieldType.TEXT}
label="ISSUER URL"
bind:value={oauthConfig.issuerUrl}
required={true}
disabled={!oauthConfig.enabled}
isEdited={!(oauthConfig.issuerUrl == savedConfig.issuerUrl)}
/>
<SettingInputField
inputType={SettingInputFieldType.TEXT}
label="CLIENT ID"
bind:value={oauthConfig.clientId}
required={true}
disabled={!oauthConfig.enabled}
isEdited={!(oauthConfig.clientId == savedConfig.clientId)}
/>
<SettingInputField
inputType={SettingInputFieldType.TEXT}
label="CLIENT SECRET"
bind:value={oauthConfig.clientSecret}
required={true}
disabled={!oauthConfig.enabled}
isEdited={!(oauthConfig.clientSecret == savedConfig.clientSecret)}
/>
<SettingInputField
inputType={SettingInputFieldType.TEXT}
label="SCOPE"
bind:value={oauthConfig.scope}
required={true}
disabled={!oauthConfig.enabled}
isEdited={!(oauthConfig.scope == savedConfig.scope)}
/>
<SettingInputField
inputType={SettingInputFieldType.TEXT}
label="STORAGE LABEL CLAIM"
desc="Automatically set the user's storage label to the value of this claim."
bind:value={oauthConfig.storageLabelClaim}
required={true}
disabled={!oauthConfig.storageLabelClaim}
isEdited={!(oauthConfig.storageLabelClaim == savedConfig.storageLabelClaim)}
/>
<SettingInputField
inputType={SettingInputFieldType.TEXT}
label="BUTTON TEXT"
bind:value={oauthConfig.buttonText}
required={false}
disabled={!oauthConfig.enabled}
isEdited={!(oauthConfig.buttonText == savedConfig.buttonText)}
/>
<SettingSwitch
title="AUTO REGISTER"
subtitle="Automatically register new users after signing in with OAuth"
bind:checked={oauthConfig.autoRegister}
disabled={!oauthConfig.enabled}
/>
<SettingSwitch
title="AUTO LAUNCH"
subtitle="Start the OAuth login flow automatically upon navigating to the login page"
disabled={!oauthConfig.enabled}
bind:checked={oauthConfig.autoLaunch}
/>
<SettingSwitch
title="MOBILE REDIRECT URI OVERRIDE"
subtitle="Enable when `app.immich:/` is an invalid redirect URI."
disabled={!oauthConfig.enabled}
on:click={() => handleToggleOverride()}
bind:checked={oauthConfig.mobileOverrideEnabled}
/>
{#if oauthConfig.mobileOverrideEnabled}
<SettingInputField <SettingInputField
inputType={SettingInputFieldType.TEXT} inputType={SettingInputFieldType.TEXT}
label="ISSUER URL" label="MOBILE REDIRECT URI"
bind:value={oauthConfig.issuerUrl} bind:value={oauthConfig.mobileRedirectUri}
required={true} required={true}
disabled={!oauthConfig.enabled} disabled={!oauthConfig.enabled}
isEdited={!(oauthConfig.issuerUrl == savedConfig.issuerUrl)} isEdited={!(oauthConfig.mobileRedirectUri == savedConfig.mobileRedirectUri)}
/> />
{/if}
<SettingInputField <SettingButtonsRow
inputType={SettingInputFieldType.TEXT} on:reset={reset}
label="CLIENT ID" on:save={saveSetting}
bind:value={oauthConfig.clientId} on:reset-to-default={resetToDefault}
required={true} showResetToDefault={!isEqual(oauthConfig, oauthDefault)}
disabled={!oauthConfig.enabled} />
isEdited={!(oauthConfig.clientId == savedConfig.clientId)} </form>
/> </div>
<SettingInputField
inputType={SettingInputFieldType.TEXT}
label="CLIENT SECRET"
bind:value={oauthConfig.clientSecret}
required={true}
disabled={!oauthConfig.enabled}
isEdited={!(oauthConfig.clientSecret == savedConfig.clientSecret)}
/>
<SettingInputField
inputType={SettingInputFieldType.TEXT}
label="SCOPE"
bind:value={oauthConfig.scope}
required={true}
disabled={!oauthConfig.enabled}
isEdited={!(oauthConfig.scope == savedConfig.scope)}
/>
<SettingInputField
inputType={SettingInputFieldType.TEXT}
label="STORAGE LABEL CLAIM"
desc="Automatically set the user's storage label to the value of this claim."
bind:value={oauthConfig.storageLabelClaim}
required={true}
disabled={!oauthConfig.storageLabelClaim}
isEdited={!(oauthConfig.storageLabelClaim == savedConfig.storageLabelClaim)}
/>
<SettingInputField
inputType={SettingInputFieldType.TEXT}
label="BUTTON TEXT"
bind:value={oauthConfig.buttonText}
required={false}
disabled={!oauthConfig.enabled}
isEdited={!(oauthConfig.buttonText == savedConfig.buttonText)}
/>
<SettingSwitch
title="AUTO REGISTER"
subtitle="Automatically register new users after signing in with OAuth"
bind:checked={oauthConfig.autoRegister}
disabled={!oauthConfig.enabled}
/>
<SettingSwitch
title="AUTO LAUNCH"
subtitle="Start the OAuth login flow automatically upon navigating to the login page"
disabled={!oauthConfig.enabled}
bind:checked={oauthConfig.autoLaunch}
/>
<SettingSwitch
title="MOBILE REDIRECT URI OVERRIDE"
subtitle="Enable when `app.immich:/` is an invalid redirect URI."
disabled={!oauthConfig.enabled}
on:click={() => handleToggleOverride()}
bind:checked={oauthConfig.mobileOverrideEnabled}
/>
{#if oauthConfig.mobileOverrideEnabled}
<SettingInputField
inputType={SettingInputFieldType.TEXT}
label="MOBILE REDIRECT URI"
bind:value={oauthConfig.mobileRedirectUri}
required={true}
disabled={!oauthConfig.enabled}
isEdited={!(oauthConfig.mobileRedirectUri == savedConfig.mobileRedirectUri)}
/>
{/if}
<SettingButtonsRow
on:reset={reset}
on:save={saveSetting}
on:reset-to-default={resetToDefault}
showResetToDefault={!isEqual(savedConfig, defaultConfig)}
/>
</form>
</div>
{/await}
</div> </div>

77
web/src/lib/components/admin-page/settings/password-login/password-login-settings.svelte
View file

@ -4,24 +4,17 @@
NotificationType, NotificationType,
} from '$lib/components/shared-components/notification/notification'; } from '$lib/components/shared-components/notification/notification';
import { handleError } from '$lib/utils/handle-error'; import { handleError } from '$lib/utils/handle-error';
import { api, SystemConfigPasswordLoginDto } from '@api'; import { api, SystemConfigDto, SystemConfigPasswordLoginDto } from '@api';
import { isEqual } from 'lodash-es'; import { isEqual } from 'lodash-es';
import { fade } from 'svelte/transition'; import { fade } from 'svelte/transition';
import ConfirmDisableLogin from '../confirm-disable-login.svelte'; import ConfirmDisableLogin from '../confirm-disable-login.svelte';
import SettingButtonsRow from '../setting-buttons-row.svelte'; import SettingButtonsRow from '../setting-buttons-row.svelte';
import SettingSwitch from '../setting-switch.svelte'; import SettingSwitch from '../setting-switch.svelte';
export let config: SystemConfigDto;
export let passwordLoginConfig: SystemConfigPasswordLoginDto; // this is the config that is being edited export let passwordLoginConfig: SystemConfigPasswordLoginDto; // this is the config that is being edited
export let passwordLoginDefault: SystemConfigPasswordLoginDto;
let savedConfig: SystemConfigPasswordLoginDto; export let savedConfig: SystemConfigPasswordLoginDto;
let defaultConfig: SystemConfigPasswordLoginDto;
async function getConfigs() {
[savedConfig, defaultConfig] = await Promise.all([
api.systemConfigApi.getConfig().then((res) => res.data.passwordLogin),
api.systemConfigApi.getDefaults().then((res) => res.data.passwordLogin),
]);
}
let isConfirmOpen = false; let isConfirmOpen = false;
let handleConfirm: (value: boolean) => void; let handleConfirm: (value: boolean) => void;
@ -38,24 +31,23 @@
async function saveSetting() { async function saveSetting() {
try { try {
const { data: current } = await api.systemConfigApi.getConfig(); if (!config.oauth.enabled && config.passwordLogin.enabled && !passwordLoginConfig.enabled) {
if (!current.oauth.enabled && current.passwordLogin.enabled && !passwordLoginConfig.enabled) {
const confirmed = await openConfirmModal(); const confirmed = await openConfirmModal();
if (!confirmed) { if (!confirmed) {
return; return;
} }
} }
const { data: updated } = await api.systemConfigApi.updateConfig({ const { data } = await api.systemConfigApi.updateConfig({
systemConfigDto: { systemConfigDto: {
...current, ...config,
passwordLogin: passwordLoginConfig, passwordLogin: passwordLoginConfig,
}, },
}); });
passwordLoginConfig = { ...updated.passwordLogin }; passwordLoginConfig = { ...data.passwordLogin };
savedConfig = { ...updated.passwordLogin }; savedConfig = { ...data.passwordLogin };
config = { ...data };
notificationController.show({ message: 'Settings saved', type: NotificationType.Info }); notificationController.show({ message: 'Settings saved', type: NotificationType.Info });
} catch (error) { } catch (error) {
@ -64,10 +56,7 @@
} }
async function reset() { async function reset() {
const { data: resetConfig } = await api.systemConfigApi.getConfig(); passwordLoginConfig = { ...savedConfig };
passwordLoginConfig = { ...resetConfig.passwordLogin };
savedConfig = { ...resetConfig.passwordLogin };
notificationController.show({ notificationController.show({
message: 'Reset settings to the recent saved settings', message: 'Reset settings to the recent saved settings',
@ -76,10 +65,7 @@
} }
async function resetToDefault() { async function resetToDefault() {
const { data: configs } = await api.systemConfigApi.getDefaults(); passwordLoginConfig = { ...passwordLoginDefault };
passwordLoginConfig = { ...configs.passwordLogin };
defaultConfig = { ...configs.passwordLogin };
notificationController.show({ notificationController.show({
message: 'Reset password settings to default', message: 'Reset password settings to default',
@ -93,26 +79,25 @@
{/if} {/if}
<div> <div>
{#await getConfigs() then} <div in:fade={{ duration: 300 }}>
<div in:fade={{ duration: 500 }}> <form autocomplete="off" on:submit|preventDefault>
<form autocomplete="off" on:submit|preventDefault> <div class="ml-4 mt-4 flex flex-col gap-4">
<div class="ml-4 mt-4 flex flex-col gap-4"> <div class="ml-4">
<div class="ml-4"> <SettingSwitch
<SettingSwitch title="ENABLED"
title="ENABLED" subtitle="Login with email and password"
subtitle="Login with email and password" isEdited={!(passwordLoginConfig.enabled == savedConfig.enabled)}
bind:checked={passwordLoginConfig.enabled} bind:checked={passwordLoginConfig.enabled}
/> />
<SettingButtonsRow <SettingButtonsRow
on:reset={reset} on:reset={reset}
on:save={saveSetting} on:save={saveSetting}
on:reset-to-default={resetToDefault} on:reset-to-default={resetToDefault}
showResetToDefault={!isEqual(savedConfig, defaultConfig)} showResetToDefault={!isEqual(passwordLoginConfig, passwordLoginDefault)}
/> />
</div>
</div> </div>
</form> </div>
</div> </form>
{/await} </div>
</div> </div>

208
web/src/lib/components/admin-page/settings/storage-template/storage-template-settings.svelte
View file

@ -1,10 +1,13 @@
<script lang="ts"> <script lang="ts">
import { api, SystemConfigStorageTemplateDto, SystemConfigTemplateStorageOptionDto, UserResponseDto } from '@api'; import {
api,
SystemConfigDto,
SystemConfigStorageTemplateDto,
SystemConfigTemplateStorageOptionDto,
UserResponseDto,
} from '@api';
import * as luxon from 'luxon'; import * as luxon from 'luxon';
import handlebar from 'handlebars'; import handlebar from 'handlebars';
import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
import { fade } from 'svelte/transition';
import SupportedDatetimePanel from './supported-datetime-panel.svelte';
import SupportedVariablesPanel from './supported-variables-panel.svelte'; import SupportedVariablesPanel from './supported-variables-panel.svelte';
import SettingButtonsRow from '../setting-buttons-row.svelte'; import SettingButtonsRow from '../setting-buttons-row.svelte';
import { isEqual } from 'lodash-es'; import { isEqual } from 'lodash-es';
@ -14,29 +17,15 @@
} from '$lib/components/shared-components/notification/notification'; } from '$lib/components/shared-components/notification/notification';
import SettingInputField, { SettingInputFieldType } from '../setting-input-field.svelte'; import SettingInputField, { SettingInputFieldType } from '../setting-input-field.svelte';
export let config: SystemConfigDto;
export let storageConfig: SystemConfigStorageTemplateDto; export let storageConfig: SystemConfigStorageTemplateDto;
export let storageDefault: SystemConfigStorageTemplateDto;
export let user: UserResponseDto; export let user: UserResponseDto;
export let templateOptions: SystemConfigTemplateStorageOptionDto;
let savedConfig: SystemConfigStorageTemplateDto; export let savedConfig: SystemConfigStorageTemplateDto;
let defaultConfig: SystemConfigStorageTemplateDto;
let templateOptions: SystemConfigTemplateStorageOptionDto;
let selectedPreset = ''; let selectedPreset = '';
async function getConfigs() {
[savedConfig, defaultConfig, templateOptions] = await Promise.all([
api.systemConfigApi.getConfig().then((res) => res.data.storageTemplate),
api.systemConfigApi.getDefaults().then((res) => res.data.storageTemplate),
api.systemConfigApi.getStorageTemplateOptions().then((res) => res.data),
]);
selectedPreset = savedConfig.template;
}
const getSupportDateTimeFormat = async () => {
const { data } = await api.systemConfigApi.getStorageTemplateOptions();
return data;
};
$: parsedTemplate = () => { $: parsedTemplate = () => {
try { try {
return renderTemplate(storageConfig.template); return renderTemplate(storageConfig.template);
@ -76,11 +65,7 @@
}; };
async function reset() { async function reset() {
const { data: resetConfig } = await api.systemConfigApi.getConfig(); storageConfig = { ...savedConfig };
storageConfig.template = resetConfig.storageTemplate.template;
savedConfig.template = resetConfig.storageTemplate.template;
notificationController.show({ notificationController.show({
message: 'Reset storage template settings to the recent saved settings', message: 'Reset storage template settings to the recent saved settings',
type: NotificationType.Info, type: NotificationType.Info,
@ -89,17 +74,16 @@
async function saveSetting() { async function saveSetting() {
try { try {
const { data: currentConfig } = await api.systemConfigApi.getConfig(); const { data } = await api.systemConfigApi.updateConfig({
const result = await api.systemConfigApi.updateConfig({
systemConfigDto: { systemConfigDto: {
...currentConfig, ...config,
storageTemplate: storageConfig, storageTemplate: storageConfig,
}, },
}); });
storageConfig.template = result.data.storageTemplate.template; storageConfig = { ...data.storageTemplate };
savedConfig.template = result.data.storageTemplate.template; savedConfig = { ...data.storageTemplate };
config = { ...data };
notificationController.show({ notificationController.show({
message: 'Storage template saved', message: 'Storage template saved',
@ -115,9 +99,7 @@
} }
async function resetToDefault() { async function resetToDefault() {
const { data: defaultConfig } = await api.systemConfigApi.getDefaults(); storageConfig = { ...storageDefault };
storageConfig.template = defaultConfig.storageTemplate.template;
notificationController.show({ notificationController.show({
message: 'Reset storage template to default', message: 'Reset storage template to default',
@ -131,94 +113,82 @@
</script> </script>
<section class="dark:text-immich-dark-fg"> <section class="dark:text-immich-dark-fg">
{#await getConfigs() then} <div id="directory-path-builder" class="m-4">
<div id="directory-path-builder" class="m-4"> <h3 class="text-base font-medium text-immich-primary dark:text-immich-dark-primary">Variables</h3>
<h3 class="text-base font-medium text-immich-primary dark:text-immich-dark-primary">Variables</h3>
<section class="support-date"> <section class="support-date" />
{#await getSupportDateTimeFormat()}
<LoadingSpinner /> <section class="support-date">
{:then options} <SupportedVariablesPanel />
<div transition:fade={{ duration: 200 }}> </section>
<SupportedDatetimePanel {options} />
<div class="mt-4 flex flex-col">
<h3 class="text-base font-medium text-immich-primary dark:text-immich-dark-primary">Template</h3>
<div class="my-2 text-xs">
<h4>PREVIEW</h4>
</div>
<p class="text-xs">
Approximately path length limit : <span class="font-semibold text-immich-primary dark:text-immich-dark-primary"
>{parsedTemplate().length + user.id.length + 'UPLOAD_LOCATION'.length}</span
>/260
</p>
<p class="text-xs">
<code>{user.storageLabel || user.id}</code> is the user's Storage Label
</p>
<p class="mt-2 rounded-lg bg-gray-200 p-4 py-2 text-xs dark:bg-gray-700 dark:text-immich-dark-fg">
<span class="text-immich-fg/25 dark:text-immich-dark-fg/50">UPLOAD_LOCATION/{user.storageLabel || user.id}</span
>/{parsedTemplate()}.jpg
</p>
<form autocomplete="off" class="flex flex-col" on:submit|preventDefault>
<div class="my-2 flex flex-col">
<label class="text-xs" for="presets">PRESET</label>
<select
class="mt-2 rounded-lg bg-slate-200 p-2 text-sm hover:cursor-pointer dark:bg-gray-600"
name="presets"
id="preset-select"
bind:value={selectedPreset}
on:change={handlePresetSelection}
>
{#each templateOptions.presetOptions as preset}
<option value={preset}>{renderTemplate(preset)}</option>
{/each}
</select>
</div>
<div class="flex gap-2 align-bottom">
<SettingInputField
label="TEMPLATE"
required
inputType={SettingInputFieldType.TEXT}
bind:value={storageConfig.template}
isEdited={!(storageConfig.template === savedConfig.template)}
/>
<div class="flex-0">
<SettingInputField label="EXTENSION" inputType={SettingInputFieldType.TEXT} value={'.jpg'} disabled />
</div> </div>
{/await}
</section>
<section class="support-date">
<SupportedVariablesPanel />
</section>
<div class="mt-4 flex flex-col">
<h3 class="text-base font-medium text-immich-primary dark:text-immich-dark-primary">Template</h3>
<div class="my-2 text-xs">
<h4>PREVIEW</h4>
</div> </div>
<p class="text-xs"> <div id="migration-info" class="mt-4 text-sm">
Approximately path length limit : <span <p>
class="font-semibold text-immich-primary dark:text-immich-dark-primary" Template changes will only apply to new assets. To retroactively apply the template to previously uploaded
>{parsedTemplate().length + user.id.length + 'UPLOAD_LOCATION'.length}</span assets, run the <a href="/admin/jobs-status" class="text-immich-primary dark:text-immich-dark-primary"
>/260 >Storage Migration Job</a
</p>
<p class="text-xs">
<code>{user.storageLabel || user.id}</code> is the user's Storage Label
</p>
<p class="mt-2 rounded-lg bg-gray-200 p-4 py-2 text-xs dark:bg-gray-700 dark:text-immich-dark-fg">
<span class="text-immich-fg/25 dark:text-immich-dark-fg/50"
>UPLOAD_LOCATION/{user.storageLabel || user.id}</span
>/{parsedTemplate()}.jpg
</p>
<form autocomplete="off" class="flex flex-col" on:submit|preventDefault>
<div class="my-2 flex flex-col">
<label class="text-xs" for="presets">PRESET</label>
<select
class="mt-2 rounded-lg bg-slate-200 p-2 text-sm hover:cursor-pointer dark:bg-gray-600"
name="presets"
id="preset-select"
bind:value={selectedPreset}
on:change={handlePresetSelection}
> >
{#each templateOptions.presetOptions as preset} </p>
<option value={preset}>{renderTemplate(preset)}</option> </div>
{/each}
</select>
</div>
<div class="flex gap-2 align-bottom">
<SettingInputField
label="TEMPLATE"
required
inputType={SettingInputFieldType.TEXT}
bind:value={storageConfig.template}
isEdited={!(storageConfig.template === savedConfig.template)}
/>
<div class="flex-0"> <SettingButtonsRow
<SettingInputField label="EXTENSION" inputType={SettingInputFieldType.TEXT} value={'.jpg'} disabled /> on:reset={reset}
</div> on:save={saveSetting}
</div> on:reset-to-default={resetToDefault}
showResetToDefault={!isEqual(savedConfig, storageConfig)}
<div id="migration-info" class="mt-4 text-sm"> />
<p> </form>
Template changes will only apply to new assets. To retroactively apply the template to previously uploaded
assets, run the <a href="/admin/jobs-status" class="text-immich-primary dark:text-immich-dark-primary"
>Storage Migration Job</a
>
</p>
</div>
<SettingButtonsRow
on:reset={reset}
on:save={saveSetting}
on:reset-to-default={resetToDefault}
showResetToDefault={!isEqual(savedConfig, defaultConfig)}
/>
</form>
</div>
</div> </div>
{/await} </div>
</section> </section>

119
web/src/lib/components/admin-page/settings/thumbnail/thumbnail-settings.svelte
View file

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import SettingSelect from '$lib/components/admin-page/settings/setting-select.svelte'; import SettingSelect from '$lib/components/admin-page/settings/setting-select.svelte';
import { api, SystemConfigThumbnailDto } from '@api'; import { api, SystemConfigDto, SystemConfigThumbnailDto } from '@api';
import { fade } from 'svelte/transition'; import { fade } from 'svelte/transition';
import { isEqual } from 'lodash-es'; import { isEqual } from 'lodash-es';
import SettingButtonsRow from '$lib/components/admin-page/settings/setting-buttons-row.svelte'; import SettingButtonsRow from '$lib/components/admin-page/settings/setting-buttons-row.svelte';
@ -9,23 +9,14 @@
NotificationType, NotificationType,
} from '$lib/components/shared-components/notification/notification'; } from '$lib/components/shared-components/notification/notification';
export let config: SystemConfigDto;
export let thumbnailConfig: SystemConfigThumbnailDto; // this is the config that is being edited export let thumbnailConfig: SystemConfigThumbnailDto; // this is the config that is being edited
export let thumbnailDefault: SystemConfigThumbnailDto;
let savedConfig: SystemConfigThumbnailDto; export let savedConfig: SystemConfigThumbnailDto;
let defaultConfig: SystemConfigThumbnailDto;
async function getConfigs() {
[savedConfig, defaultConfig] = await Promise.all([
api.systemConfigApi.getConfig().then((res) => res.data.thumbnail),
api.systemConfigApi.getDefaults().then((res) => res.data.thumbnail),
]);
}
async function reset() { async function reset() {
const { data: resetConfig } = await api.systemConfigApi.getConfig(); thumbnailConfig = { ...savedConfig };
thumbnailConfig = { ...resetConfig.thumbnail };
savedConfig = { ...resetConfig.thumbnail };
notificationController.show({ notificationController.show({
message: 'Reset thumbnail settings to the recent saved settings', message: 'Reset thumbnail settings to the recent saved settings',
@ -34,10 +25,7 @@
} }
async function resetToDefault() { async function resetToDefault() {
const { data: configs } = await api.systemConfigApi.getDefaults(); thumbnailConfig = { ...thumbnailDefault };
thumbnailConfig = { ...configs.thumbnail };
defaultConfig = { ...configs.thumbnail };
notificationController.show({ notificationController.show({
message: 'Reset thumbnail settings to default', message: 'Reset thumbnail settings to default',
@ -47,17 +35,16 @@
async function saveSetting() { async function saveSetting() {
try { try {
const { data: configs } = await api.systemConfigApi.getConfig(); const { data } = await api.systemConfigApi.updateConfig({
const result = await api.systemConfigApi.updateConfig({
systemConfigDto: { systemConfigDto: {
...configs, ...config,
thumbnail: thumbnailConfig, thumbnail: thumbnailConfig,
}, },
}); });
thumbnailConfig = { ...result.data.thumbnail }; thumbnailConfig = { ...data.thumbnail };
savedConfig = { ...result.data.thumbnail }; savedConfig = { ...data.thumbnail };
config = { ...data };
notificationController.show({ notificationController.show({
message: 'Thumbnail settings saved', message: 'Thumbnail settings saved',
@ -74,48 +61,46 @@
</script> </script>
<div> <div>
{#await getConfigs() then} <div in:fade={{ duration: 300 }}>
<div in:fade={{ duration: 500 }}> <form autocomplete="off" on:submit|preventDefault>
<form autocomplete="off" on:submit|preventDefault> <div class="ml-4 mt-4 flex flex-col gap-4">
<div class="ml-4 mt-4 flex flex-col gap-4"> <SettingSelect
<SettingSelect label="WEBP RESOLUTION"
label="WEBP RESOLUTION" desc="Higher resolutions can preserve more detail but take longer to encode, have larger file sizes, and can reduce app responsiveness."
desc="Higher resolutions can preserve more detail but take longer to encode, have larger file sizes, and can reduce app responsiveness." number
number bind:value={thumbnailConfig.webpSize}
bind:value={thumbnailConfig.webpSize} options={[
options={[ { value: 1080, text: '1080p' },
{ value: 1080, text: '1080p' }, { value: 720, text: '720p' },
{ value: 720, text: '720p' }, { value: 480, text: '480p' },
{ value: 480, text: '480p' }, { value: 250, text: '250p' },
{ value: 250, text: '250p' }, ]}
]} name="resolution"
name="resolution" isEdited={!(thumbnailConfig.webpSize === savedConfig.webpSize)}
isEdited={!(thumbnailConfig.webpSize === savedConfig.webpSize)} />
/>
<SettingSelect <SettingSelect
label="JPEG RESOLUTION" label="JPEG RESOLUTION"
desc="Higher resolutions can preserve more detail but take longer to encode, have larger file sizes, and can reduce app responsiveness." desc="Higher resolutions can preserve more detail but take longer to encode, have larger file sizes, and can reduce app responsiveness."
number number
bind:value={thumbnailConfig.jpegSize} bind:value={thumbnailConfig.jpegSize}
options={[ options={[
{ value: 2160, text: '4K' }, { value: 2160, text: '4K' },
{ value: 1440, text: '1440p' }, { value: 1440, text: '1440p' },
]} ]}
name="resolution" name="resolution"
isEdited={!(thumbnailConfig.jpegSize === savedConfig.jpegSize)} isEdited={!(thumbnailConfig.jpegSize === savedConfig.jpegSize)}
/> />
</div> </div>
<div class="ml-4"> <div class="ml-4">
<SettingButtonsRow <SettingButtonsRow
on:reset={reset} on:reset={reset}
on:save={saveSetting} on:save={saveSetting}
on:reset-to-default={resetToDefault} on:reset-to-default={resetToDefault}
showResetToDefault={!isEqual(savedConfig, defaultConfig)} showResetToDefault={!isEqual(thumbnailConfig, thumbnailDefault)}
/> />
</div> </div>
</form> </form>
</div> </div>
{/await}
</div> </div>

62
web/src/routes/admin/system-settings/+page.svelte
View file

@ -8,30 +8,51 @@
import SettingAccordion from '$lib/components/admin-page/settings/setting-accordion.svelte'; import SettingAccordion from '$lib/components/admin-page/settings/setting-accordion.svelte';
import StorageTemplateSettings from '$lib/components/admin-page/settings/storage-template/storage-template-settings.svelte'; import StorageTemplateSettings from '$lib/components/admin-page/settings/storage-template/storage-template-settings.svelte';
import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte'; import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
import { api } from '@api'; import { SystemConfigDto, SystemConfigTemplateStorageOptionDto, api } from '@api';
import type { PageData } from './$types'; import type { PageData } from './$types';
export let data: PageData; export let data: PageData;
let config: SystemConfigDto;
let currentConfig: SystemConfigDto;
let defaultConfig: SystemConfigDto;
let templateOptions: SystemConfigTemplateStorageOptionDto;
const getConfig = async () => { const getConfig = async () => {
const { data } = await api.systemConfigApi.getConfig(); [config, defaultConfig, templateOptions] = await Promise.all([
return data; api.systemConfigApi.getConfig().then((res) => res.data),
api.systemConfigApi.getDefaults().then((res) => res.data),
api.systemConfigApi.getStorageTemplateOptions().then((res) => res.data),
]);
// deep copy
currentConfig = JSON.parse(JSON.stringify(config));
}; };
</script> </script>
<section class=""> <section class="">
{#await getConfig()} {#await getConfig()}
<LoadingSpinner /> <div class="flex items-center justify-center">
{:then configs} <LoadingSpinner />
</div>
{:then}
<SettingAccordion title="Thumbnail Settings" subtitle="Manage the resolution of thumbnail sizes"> <SettingAccordion title="Thumbnail Settings" subtitle="Manage the resolution of thumbnail sizes">
<ThumbnailSettings thumbnailConfig={configs.thumbnail} /> <ThumbnailSettings
savedConfig={currentConfig.thumbnail}
bind:config={currentConfig}
thumbnailConfig={config.thumbnail}
thumbnailDefault={defaultConfig.thumbnail}
/>
</SettingAccordion> </SettingAccordion>
<SettingAccordion <SettingAccordion
title="FFmpeg Settings" title="FFmpeg Settings"
subtitle="Manage the resolution and encoding information of the video files" subtitle="Manage the resolution and encoding information of the video files"
> >
<FFmpegSettings ffmpegConfig={configs.ffmpeg} /> <FFmpegSettings
savedConfig={currentConfig.ffmpeg}
bind:config={currentConfig}
ffmpegConfig={config.ffmpeg}
ffmpegDefault={defaultConfig.ffmpeg}
/>
</SettingAccordion> </SettingAccordion>
<SettingAccordion <SettingAccordion
@ -39,15 +60,25 @@
subtitle="Manage job concurrency" subtitle="Manage job concurrency"
isOpen={$page.url.searchParams.get('open') === 'job-settings'} isOpen={$page.url.searchParams.get('open') === 'job-settings'}
> >
<JobSettings jobConfig={configs.job} /> <JobSettings savedConfig={currentConfig.job} bind:config jobConfig={config.job} jobDefault={defaultConfig.job} />
</SettingAccordion> </SettingAccordion>
<SettingAccordion title="Password Authentication" subtitle="Manage login with password settings"> <SettingAccordion title="Password Authentication" subtitle="Manage login with password settings">
<PasswordLoginSettings passwordLoginConfig={configs.passwordLogin} /> <PasswordLoginSettings
savedConfig={currentConfig.passwordLogin}
bind:config={currentConfig}
passwordLoginConfig={config.passwordLogin}
passwordLoginDefault={defaultConfig.passwordLogin}
/>
</SettingAccordion> </SettingAccordion>
<SettingAccordion title="OAuth Authentication" subtitle="Manage the login with OAuth settings"> <SettingAccordion title="OAuth Authentication" subtitle="Manage the login with OAuth settings">
<OAuthSettings oauthConfig={configs.oauth} /> <OAuthSettings
savedConfig={currentConfig.oauth}
bind:config={currentConfig}
oauthConfig={config.oauth}
oauthDefault={defaultConfig.oauth}
/>
</SettingAccordion> </SettingAccordion>
<SettingAccordion <SettingAccordion
@ -55,7 +86,14 @@
subtitle="Manage the folder structure and file name of the upload asset" subtitle="Manage the folder structure and file name of the upload asset"
isOpen={$page.url.searchParams.get('open') === 'storage-template'} isOpen={$page.url.searchParams.get('open') === 'storage-template'}
> >
<StorageTemplateSettings storageConfig={configs.storageTemplate} user={data.user} /> <StorageTemplateSettings
savedConfig={currentConfig.storageTemplate}
bind:config={currentConfig}
storageConfig={config.storageTemplate}
user={data.user}
storageDefault={defaultConfig.storageTemplate}
{templateOptions}
/>
</SettingAccordion> </SettingAccordion>
{/await} {/await}
</section> </section>