First working POC

2026-01-26 22:21:54 +01:00
commit cfddc1edea
255 changed files with 77606 additions and 0 deletions
@@ -0,0 +1,213 @@
+<script lang="ts">
+  import {
+    sleepTimer,
+    sleepTimerMode,
+    sleepTimerActive,
+  } from "$lib/stores/sleepTimer";
+  import { currentQueueItem } from "$lib/stores/queue";
+
+  interface Props {
+    isOpen?: boolean;
+    onClose?: () => void;
+  }
+
+  let { isOpen = false, onClose }: Props = $props();
+
+  const timePresets = [15, 30, 45, 60];
+  const episodePresets = [1, 2, 3];
+
+  const isEpisode = $derived($currentQueueItem?.type === "Episode");
+  const isVideo = $derived(
+    $currentQueueItem?.type === "Episode" || $currentQueueItem?.type === "Movie"
+  );
+
+  function handleTimePreset(minutes: number) {
+    sleepTimer.setTimeTimer(minutes);
+    onClose?.();
+  }
+
+  function handleEndOfTrack() {
+    sleepTimer.setEndOfTrackTimer();
+    onClose?.();
+  }
+
+  function handleEpisodePreset(count: number) {
+    sleepTimer.setEpisodesTimer(count);
+    onClose?.();
+  }
+
+  function handleCancel() {
+    sleepTimer.cancel();
+    onClose?.();
+  }
+
+  function handleBackdropClick(event: MouseEvent) {
+    if (event.target === event.currentTarget && onClose) {
+      onClose();
+    }
+  }
+
+  function getActiveLabel(): string {
+    const mode = $sleepTimerMode;
+    switch (mode.kind) {
+      case "time":
+        return "Timer active";
+      case "endOfTrack":
+        return "Stops after current";
+      case "episodes":
+        return `${mode.remaining} episode${mode.remaining !== 1 ? "s" : ""} remaining`;
+      default:
+        return "";
+    }
+  }
+
+  function getEndOfTrackLabel(): string {
+    const type = $currentQueueItem?.type;
+    if (type === "Episode") return "End of current episode";
+    if (type === "Movie") return "End of current film";
+    return "End of current track";
+  }
+</script>
+
+{#if isOpen}
+  <div
+    class="fixed inset-0 bg-black/60 z-[60] flex items-end sm:items-center justify-center p-0 sm:p-4"
+    onclick={handleBackdropClick}
+    onkeydown={(e) => { if (e.key === 'Escape') handleBackdropClick(); }}
+    role="dialog"
+    aria-modal="true"
+    aria-labelledby="sleep-timer-title"
+    tabindex="-1"
+  >
+    <div
+      class="bg-[var(--color-surface)] rounded-t-2xl sm:rounded-2xl w-full sm:max-w-md max-h-[80vh] sm:max-h-[70vh] flex flex-col shadow-2xl"
+      onclick={(e) => e.stopPropagation()}
+      role="none"
+    >
+      <!-- Header -->
+      <div
+        class="px-6 py-4 border-b border-gray-800 flex items-center justify-between"
+      >
+        <h2 id="sleep-timer-title" class="text-lg font-semibold text-white">
+          Sleep Timer
+        </h2>
+        <button
+          onclick={onClose}
+          class="p-2 -m-2 text-gray-400 hover:text-white transition-colors"
+          aria-label="Close"
+        >
+          <svg
+            class="w-5 h-5"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M6 18L18 6M6 6l12 12"
+            />
+          </svg>
+        </button>
+      </div>
+
+      <!-- Content -->
+      <div class="flex-1 overflow-y-auto p-4">
+        <!-- Active timer indicator -->
+        {#if $sleepTimerActive}
+          <div
+            class="mb-4 p-4 rounded-lg bg-[var(--color-jellyfin)]/10 border border-[var(--color-jellyfin)]/30"
+          >
+            <div class="flex items-center justify-between">
+              <div class="flex items-center gap-2">
+                <svg
+                  class="w-5 h-5 text-[var(--color-jellyfin)]"
+                  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 class="text-sm font-medium text-[var(--color-jellyfin)]">
+                  {getActiveLabel()}
+                </span>
+              </div>
+              <button
+                onclick={handleCancel}
+                class="text-xs text-gray-400 hover:text-white transition-colors"
+              >
+                Cancel
+              </button>
+            </div>
+          </div>
+        {/if}
+
+        <!-- Time presets -->
+        <div class="mb-6">
+          <h3 class="text-sm font-medium text-gray-400 mb-3">Stop after time</h3>
+          <div class="grid grid-cols-2 gap-2">
+            {#each timePresets as minutes}
+              <button
+                onclick={() => handleTimePreset(minutes)}
+                class="p-4 rounded-lg border border-gray-800 hover:border-[var(--color-jellyfin)]/50 hover:bg-[var(--color-jellyfin)]/5 transition-all text-center"
+              >
+                <span class="text-lg font-medium text-white">{minutes}</span>
+                <span class="text-sm text-gray-400 ml-1">min</span>
+              </button>
+            {/each}
+          </div>
+        </div>
+
+        <!-- End of current track/episode/film -->
+        <div class="mb-6">
+          <h3 class="text-sm font-medium text-gray-400 mb-3">Stop after current</h3>
+          <button
+            onclick={handleEndOfTrack}
+            class="w-full p-4 rounded-lg border border-gray-800 hover:border-[var(--color-jellyfin)]/50 hover:bg-[var(--color-jellyfin)]/5 transition-all text-left flex items-center gap-3"
+          >
+            <svg
+              class="w-6 h-6 text-gray-400"
+              fill="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z" />
+            </svg>
+            <span class="text-white">{getEndOfTrackLabel()}</span>
+          </button>
+        </div>
+
+        <!-- Episode countdown (only for TV episodes) -->
+        {#if isEpisode}
+          <div>
+            <h3 class="text-sm font-medium text-gray-400 mb-3">
+              Stop after episodes
+            </h3>
+            <div class="space-y-2">
+              {#each episodePresets as count}
+                <button
+                  onclick={() => handleEpisodePreset(count)}
+                  class="w-full p-4 rounded-lg border border-gray-800 hover:border-[var(--color-jellyfin)]/50 hover:bg-[var(--color-jellyfin)]/5 transition-all text-left flex items-center gap-3"
+                >
+                  <svg
+                    class="w-6 h-6 text-gray-400"
+                    fill="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      d="M21 3H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h5v2h8v-2h5c1.1 0 1.99-.9 1.99-2L23 5c0-1.1-.9-2-2-2zm0 14H3V5h18v12z"
+                    />
+                  </svg>
+                  <span class="text-white"
+                    >{count} more episode{count !== 1 ? "s" : ""}</span
+                  >
+                </button>
+              {/each}
+            </div>
+          </div>
+        {/if}
+      </div>
+    </div>
+  </div>
+{/if}