44 lines
1.2 KiB
Svelte
44 lines
1.2 KiB
Svelte
<script lang="ts">
|
|
import {
|
|
sleepTimerActive,
|
|
sleepTimerMode,
|
|
sleepTimerRemainingSeconds,
|
|
} from "$lib/stores/sleepTimer";
|
|
import { formatTime } from "$lib/utils/playbackUnits";
|
|
|
|
interface Props {
|
|
onClick?: () => void;
|
|
}
|
|
|
|
let { onClick }: Props = $props();
|
|
|
|
function getDisplayText(): string {
|
|
const mode = $sleepTimerMode;
|
|
switch (mode.kind) {
|
|
case "time":
|
|
return formatTime($sleepTimerRemainingSeconds);
|
|
case "endOfTrack":
|
|
return "End";
|
|
case "episodes":
|
|
return `${mode.remaining} ep`;
|
|
default:
|
|
return "";
|
|
}
|
|
}
|
|
</script>
|
|
|
|
{#if $sleepTimerActive}
|
|
<button
|
|
onclick={onClick}
|
|
class="flex items-center gap-1 px-2 py-1 rounded-full bg-[var(--color-jellyfin)]/20 text-[var(--color-jellyfin)] text-xs font-medium hover:bg-[var(--color-jellyfin)]/30 transition-colors"
|
|
title="Sleep timer active - click to modify"
|
|
>
|
|
<svg class="w-3 h-3" fill="currentColor" viewBox="0 0 24 24">
|
|
<path
|
|
d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z"
|
|
/>
|
|
</svg>
|
|
<span>{getDisplayText()}</span>
|
|
</button>
|
|
{/if}
|