mirror of
https://github.com/immich-app/immich
synced 2025-11-07 17:27:20 +00:00
e9722710ac
* support for two-pass transcoding * added max bitrate and thread to transcode api * admin page setting desc+bitrate and thread options * Update web/src/lib/components/admin-page/settings/setting-input-field.svelte Co-authored-by: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com> * Update web/src/lib/components/admin-page/settings/setting-input-field.svelte Co-authored-by: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com> * two-pass slider, `crf` and `threads` as numbers * updated and added transcode tests * refactored `getFfmpegOptions` * default `threads`, `maxBitrate` now 0, more tests * vp9 constant quality mode * fixed nullable `crf` and `threads` * fixed two-pass slider, added apiproperty * optional `desc` for `SettingSelect` * disable two-pass if settings are incompatible * fixed test * transcode interface --------- Co-authored-by: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com>
96 lines
1.8 KiB
Svelte
96 lines
1.8 KiB
Svelte
<script lang="ts">
|
|
import { quintOut } from 'svelte/easing';
|
|
import { fly } from 'svelte/transition';
|
|
|
|
export let title: string;
|
|
export let subtitle = '';
|
|
export let checked = false;
|
|
export let disabled = false;
|
|
export let isEdited = false;
|
|
</script>
|
|
|
|
<div class="flex justify-between place-items-center">
|
|
<div>
|
|
<div class="flex place-items-center gap-1 h-[26px]">
|
|
<label class="immich-form-label text-sm" for={title}>
|
|
{title}
|
|
</label>
|
|
{#if isEdited}
|
|
<div
|
|
transition:fly={{ x: 10, duration: 200, easing: quintOut }}
|
|
class="bg-orange-100 px-2 rounded-full text-orange-900 text-[10px]"
|
|
>
|
|
Unsaved change
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
<p class="text-sm dark:text-immich-dark-fg">{subtitle}</p>
|
|
</div>
|
|
|
|
<label class="relative inline-block flex-none w-[36px] h-[10px]">
|
|
<input
|
|
class="opacity-0 w-0 h-0 disabled::cursor-not-allowed"
|
|
type="checkbox"
|
|
bind:checked
|
|
on:click
|
|
{disabled}
|
|
/>
|
|
|
|
{#if disabled}
|
|
<span class="slider-disable" />
|
|
{:else}
|
|
<span class="slider" />
|
|
{/if}
|
|
</label>
|
|
</div>
|
|
|
|
<style>
|
|
.slider,
|
|
.slider-disable {
|
|
position: absolute;
|
|
cursor: pointer;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: #ccc;
|
|
-webkit-transition: 0.4s;
|
|
transition: 0.4s;
|
|
border-radius: 34px;
|
|
}
|
|
|
|
input:disabled {
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.slider:before,
|
|
.slider-disable:before {
|
|
position: absolute;
|
|
content: '';
|
|
height: 20px;
|
|
width: 20px;
|
|
left: 0px;
|
|
right: 0px;
|
|
bottom: -4px;
|
|
background-color: gray;
|
|
-webkit-transition: 0.4s;
|
|
transition: 0.4s;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
input:checked + .slider-disable {
|
|
background-color: gray;
|
|
}
|
|
|
|
input:checked + .slider {
|
|
background-color: #adcbfa;
|
|
}
|
|
|
|
input:checked + .slider:before {
|
|
-webkit-transform: translateX(18px);
|
|
-ms-transform: translateX(18px);
|
|
transform: translateX(18px);
|
|
background-color: #4250af;
|
|
}
|
|
</style>
|