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,96 @@
+<script lang="ts">
+  import { sessions, selectedSession } from "$lib/stores";
+  import SessionsList from "$lib/components/sessions/SessionsList.svelte";
+  import RemoteControls from "$lib/components/sessions/RemoteControls.svelte";
+
+  function handleSelectSession(sessionId: string) {
+    // Toggle selection - if clicking the same session, deselect it
+    if ($sessions.selectedSessionId === sessionId) {
+      sessions.selectSession(null);
+    } else {
+      sessions.selectSession(sessionId);
+    }
+  }
+</script>
+
+<div class="min-h-screen bg-[var(--color-background)] p-4 md:p-8">
+  <div class="max-w-7xl mx-auto">
+    <!-- Page Header -->
+    <header class="mb-8">
+      <h1 class="text-3xl font-bold text-white mb-2">Remote Sessions</h1>
+      <p class="text-gray-400">
+        Control playback on other Jellyfin clients
+      </p>
+    </header>
+
+    <!-- Main Content -->
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+      <!-- Sessions List Column -->
+      <div class="order-1">
+        <SessionsList onSelectSession={handleSelectSession} />
+      </div>
+
+      <!-- Remote Controls Column -->
+      <div class="order-2">
+        {#if $selectedSession}
+          <div class="sticky top-4">
+            <RemoteControls session={$selectedSession} />
+          </div>
+        {:else}
+          <!-- Placeholder when no session selected -->
+          <div class="flex flex-col items-center justify-center p-12 rounded-lg bg-[var(--color-surface)] text-center">
+            <svg class="w-20 h-20 text-gray-600 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122"
+              />
+            </svg>
+            <h3 class="text-lg font-medium text-gray-400 mb-2">Select a Session</h3>
+            <p class="text-sm text-gray-500 max-w-sm">
+              Choose a session from the list to control playback on that device
+            </p>
+          </div>
+        {/if}
+      </div>
+    </div>
+
+    <!-- Help Text -->
+    <div class="mt-8 p-4 rounded-lg bg-[var(--color-surface)] border border-[var(--color-jellyfin)]/20">
+      <h3 class="text-sm font-semibold text-white mb-2">How to use Remote Sessions</h3>
+      <ul class="text-sm text-gray-400 space-y-1 list-disc list-inside">
+        <li>Start playing media on another Jellyfin client (TV, web browser, mobile app)</li>
+        <li>The session will appear in the list above automatically</li>
+        <li>Click on a session to select it and view playback controls</li>
+        <li>Use the controls to play, pause, skip tracks, adjust volume, and seek</li>
+        <li>Sessions update automatically - click refresh for immediate updates</li>
+      </ul>
+    </div>
+  </div>
+</div>
+
+<style>
+  /* Custom scrollbar for better appearance */
+  :global(html) {
+    scrollbar-width: thin;
+    scrollbar-color: var(--color-jellyfin) var(--color-surface);
+  }
+
+  :global(::-webkit-scrollbar) {
+    width: 8px;
+  }
+
+  :global(::-webkit-scrollbar-track) {
+    background: var(--color-surface);
+  }
+
+  :global(::-webkit-scrollbar-thumb) {
+    background: var(--color-jellyfin);
+    border-radius: 4px;
+  }
+
+  :global(::-webkit-scrollbar-thumb:hover) {
+    background: var(--color-jellyfin-hover);
+  }
+</style>