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