ffmpeg-settings.svelte 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
  1. <script lang="ts">
  2. import {
  3. notificationController,
  4. NotificationType
  5. } from '$lib/components/shared-components/notification/notification';
  6. import { api, SystemConfigFFmpegDto } from '@api';
  7. import SettingButtonsRow from '../setting-buttons-row.svelte';
  8. import SettingInputField, { SettingInputFieldType } from '../setting-input-field.svelte';
  9. import _ from 'lodash';
  10. export let ffmpegConfig: SystemConfigFFmpegDto; // this is the config that is being edited
  11. import { fade } from 'svelte/transition';
  12. let savedConfig: SystemConfigFFmpegDto;
  13. let defaultConfig: SystemConfigFFmpegDto;
  14. async function getConfigs() {
  15. [savedConfig, defaultConfig] = await Promise.all([
  16. api.systemConfigApi.getConfig().then((res) => res.data.ffmpeg),
  17. api.systemConfigApi.getDefaults().then((res) => res.data.ffmpeg)
  18. ]);
  19. }
  20. async function saveSetting() {
  21. try {
  22. const { data: configs } = await api.systemConfigApi.getConfig();
  23. const result = await api.systemConfigApi.updateConfig({
  24. ...configs,
  25. ffmpeg: ffmpegConfig
  26. });
  27. ffmpegConfig = { ...result.data.ffmpeg };
  28. savedConfig = { ...result.data.ffmpeg };
  29. notificationController.show({
  30. message: 'FFmpeg settings saved',
  31. type: NotificationType.Info
  32. });
  33. } catch (e) {
  34. console.error('Error [ffmpeg-settings] [saveSetting]', e);
  35. notificationController.show({
  36. message: 'Unable to save settings',
  37. type: NotificationType.Error
  38. });
  39. }
  40. }
  41. async function reset() {
  42. const { data: resetConfig } = await api.systemConfigApi.getConfig();
  43. ffmpegConfig = { ...resetConfig.ffmpeg };
  44. savedConfig = { ...resetConfig.ffmpeg };
  45. notificationController.show({
  46. message: 'Reset FFmpeg settings to the recent saved settings',
  47. type: NotificationType.Info
  48. });
  49. }
  50. async function resetToDefault() {
  51. const { data: configs } = await api.systemConfigApi.getDefaults();
  52. ffmpegConfig = { ...configs.ffmpeg };
  53. defaultConfig = { ...configs.ffmpeg };
  54. notificationController.show({
  55. message: 'Reset FFmpeg settings to default',
  56. type: NotificationType.Info
  57. });
  58. }
  59. </script>
  60. <div>
  61. {#await getConfigs() then}
  62. <div in:fade={{ duration: 500 }}>
  63. <form autocomplete="off" on:submit|preventDefault>
  64. <div class="flex flex-col gap-4 ml-4 mt-4">
  65. <SettingInputField
  66. inputType={SettingInputFieldType.NUMBER}
  67. label="CRF"
  68. bind:value={ffmpegConfig.crf}
  69. required={true}
  70. isEdited={!(ffmpegConfig.crf == savedConfig.crf)}
  71. />
  72. <SettingInputField
  73. inputType={SettingInputFieldType.TEXT}
  74. label="PRESET"
  75. bind:value={ffmpegConfig.preset}
  76. required={true}
  77. isEdited={!(ffmpegConfig.preset == savedConfig.preset)}
  78. />
  79. <SettingInputField
  80. inputType={SettingInputFieldType.TEXT}
  81. label="AUDIO CODEC"
  82. bind:value={ffmpegConfig.targetAudioCodec}
  83. required={true}
  84. isEdited={!(ffmpegConfig.targetAudioCodec == savedConfig.targetAudioCodec)}
  85. />
  86. <SettingInputField
  87. inputType={SettingInputFieldType.TEXT}
  88. label="VIDEO CODEC"
  89. bind:value={ffmpegConfig.targetVideoCodec}
  90. required={true}
  91. isEdited={!(ffmpegConfig.targetVideoCodec == savedConfig.targetVideoCodec)}
  92. />
  93. <SettingInputField
  94. inputType={SettingInputFieldType.TEXT}
  95. label="SCALING"
  96. bind:value={ffmpegConfig.targetScaling}
  97. required={true}
  98. isEdited={!(ffmpegConfig.targetScaling == savedConfig.targetScaling)}
  99. />
  100. </div>
  101. <div class="ml-4">
  102. <SettingButtonsRow
  103. on:reset={reset}
  104. on:save={saveSetting}
  105. on:reset-to-default={resetToDefault}
  106. showResetToDefault={!_.isEqual(savedConfig, defaultConfig)}
  107. />
  108. </div>
  109. </form>
  110. </div>
  111. {/await}
  112. </div>