First working POC

src/lib/components/home/Carousel.svelte

@@ -0,0 +1,101 @@
+<script lang="ts">
+  import type { MediaItem } from "$lib/api/types";
+  import MediaCard from "$lib/components/library/MediaCard.svelte";
+
+  interface Props {
+    title: string;
+    items: MediaItem[];
+    onItemClick?: (item: MediaItem) => void;
+    showAll?: () => void;
+  }
+
+  let { title, items, onItemClick, showAll }: Props = $props();
+
+  let scrollContainer: HTMLDivElement | null = $state(null);
+  let showLeftArrow = $state(false);
+  let showRightArrow = $state(true);
+
+  function handleScroll() {
+    if (!scrollContainer) return;
+    showLeftArrow = scrollContainer.scrollLeft > 0;
+    showRightArrow =
+      scrollContainer.scrollLeft <
+      scrollContainer.scrollWidth - scrollContainer.clientWidth - 10;
+  }
+
+  function scrollLeft() {
+    scrollContainer?.scrollBy({ left: -600, behavior: "smooth" });
+  }
+
+  function scrollRight() {
+    scrollContainer?.scrollBy({ left: 600, behavior: "smooth" });
+  }
+</script>
+
+<div class="space-y-3">
+  <!-- Header -->
+  <div class="flex items-center justify-between px-4">
+    <h2 class="text-2xl font-semibold text-white">{title}</h2>
+    {#if showAll}
+      <button
+        onclick={showAll}
+        class="text-sm text-gray-400 hover:text-white transition-colors"
+      >
+        See all
+      </button>
+    {/if}
+  </div>
+
+  <!-- Scrollable row -->
+  <div class="relative group">
+    <div
+      bind:this={scrollContainer}
+      onscroll={handleScroll}
+      class="flex gap-4 overflow-x-auto scrollbar-hide scroll-smooth px-4 pb-4"
+    >
+      {#each items as item (item.id)}
+        <MediaCard
+          {item}
+          size="medium"
+          showProgress={true}
+          onclick={() => onItemClick?.(item)}
+        />
+      {/each}
+    </div>
+
+    <!-- Navigation arrows (Spotify-style - only show on hover) -->
+    {#if showLeftArrow}
+      <button
+        onclick={scrollLeft}
+        class="absolute left-0 top-1/2 -translate-y-1/2 p-2 bg-black/80 hover:bg-black rounded-full opacity-0 group-hover:opacity-100 transition-opacity z-10 ml-2"
+        aria-label="Scroll left"
+      >
+        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
+          <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
+        </svg>
+      </button>
+    {/if}
+
+    {#if showRightArrow}
+      <button
+        onclick={scrollRight}
+        class="absolute right-0 top-1/2 -translate-y-1/2 p-2 bg-black/80 hover:bg-black rounded-full opacity-0 group-hover:opacity-100 transition-opacity z-10 mr-2"
+        aria-label="Scroll right"
+      >
+        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
+          <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
+        </svg>
+      </button>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .scrollbar-hide::-webkit-scrollbar {
+    display: none;
+  }
+  .scrollbar-hide {
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+  }
+</style>

src/lib/components/home/HeroBanner.svelte

@@ -0,0 +1,259 @@
+<script lang="ts">
+  import { goto } from "$app/navigation";
+  import type { MediaItem } from "$lib/api/types";
+  import { auth } from "$lib/stores/auth";
+
+  interface Props {
+    items: MediaItem[];
+    autoRotate?: boolean;
+    interval?: number;
+  }
+
+  let { items, autoRotate = true, interval = 6000 }: Props = $props();
+
+  let currentIndex = $state(0);
+  let intervalId: number | null = null;
+
+  // Touch/swipe state
+  let touchStartX = $state(0);
+  let touchEndX = $state(0);
+  let isSwiping = $state(false);
+
+  const currentItem = $derived(items[currentIndex] ?? null);
+
+  function getHeroImageUrl(): string {
+    if (!currentItem) return "";
+    const repo = auth.getRepository();
+
+    // 1. Try backdrop image first (best for hero display)
+    if (currentItem.backdropImageTags?.[0]) {
+      return repo.getImageUrl(currentItem.id, "Backdrop", {
+        maxWidth: 1920,
+        tag: currentItem.backdropImageTags[0],
+      });
+    }
+
+    // 2. For episodes, try to use series backdrop from parent
+    if (currentItem.type === "Episode") {
+      // First try parent backdrop tags (includes image tag for caching)
+      if (currentItem.seriesId && currentItem.parentBackdropImageTags?.[0]) {
+        return repo.getImageUrl(currentItem.seriesId, "Backdrop", {
+          maxWidth: 1920,
+          tag: currentItem.parentBackdropImageTags[0],
+        });
+      }
+      // Fallback: try series backdrop without tag (may not be cached optimally)
+      if (currentItem.seriesId) {
+        return repo.getImageUrl(currentItem.seriesId, "Backdrop", {
+          maxWidth: 1920,
+        });
+      }
+      // Last resort for episodes: try season backdrop
+      if (currentItem.seasonId) {
+        return repo.getImageUrl(currentItem.seasonId, "Backdrop", {
+          maxWidth: 1920,
+        });
+      }
+    }
+
+    // 3. For music tracks, try album backdrop first, then primary
+    if (currentItem.type === "Audio" && currentItem.albumId) {
+      // Try album backdrop first (more cinematic for hero)
+      return repo.getImageUrl(currentItem.albumId, "Backdrop", {
+        maxWidth: 1920,
+      });
+    }
+
+    // 4. Fall back to primary image (poster, album art, episode thumbnail)
+    if (currentItem.primaryImageTag) {
+      return repo.getImageUrl(currentItem.id, "Primary", {
+        maxWidth: 1920,
+        tag: currentItem.primaryImageTag,
+      });
+    }
+
+    // 5. Last resort for audio: try album primary image
+    if (currentItem.type === "Audio" && currentItem.albumId) {
+      return repo.getImageUrl(currentItem.albumId, "Primary", {
+        maxWidth: 1920,
+      });
+    }
+
+    return "";
+  }
+
+  function next() {
+    currentIndex = (currentIndex + 1) % items.length;
+  }
+
+  function prev() {
+    currentIndex = (currentIndex - 1 + items.length) % items.length;
+  }
+
+  function goToIndex(idx: number) {
+    currentIndex = idx;
+  }
+
+  // Touch/swipe handlers
+  function handleTouchStart(e: TouchEvent) {
+    touchStartX = e.touches[0].clientX;
+    isSwiping = true;
+  }
+
+  function handleTouchMove(e: TouchEvent) {
+    if (!isSwiping) return;
+    touchEndX = e.touches[0].clientX;
+  }
+
+  function handleTouchEnd() {
+    if (!isSwiping) return;
+    isSwiping = false;
+
+    const swipeThreshold = 50; // Minimum swipe distance in pixels
+    const diff = touchStartX - touchEndX;
+
+    if (Math.abs(diff) > swipeThreshold) {
+      if (diff > 0) {
+        // Swiped left - go to next
+        next();
+      } else {
+        // Swiped right - go to previous
+        prev();
+      }
+    }
+
+    touchStartX = 0;
+    touchEndX = 0;
+  }
+
+  // Auto-rotate logic
+  $effect(() => {
+    if (autoRotate && items.length > 1) {
+      intervalId = window.setInterval(next, interval);
+      return () => {
+        if (intervalId) clearInterval(intervalId);
+      };
+    }
+  });
+
+  const heroImageUrl = $derived(getHeroImageUrl());
+</script>
+
+<div
+  class="relative h-[500px] rounded-xl overflow-hidden group mb-8 touch-pan-y"
+  ontouchstart={handleTouchStart}
+  ontouchmove={handleTouchMove}
+  ontouchend={handleTouchEnd}
+>
+  {#if heroImageUrl}
+    <img
+      src={heroImageUrl}
+      alt={currentItem?.name}
+      class="absolute inset-0 w-full h-full object-cover"
+    />
+  {:else}
+    <div class="absolute inset-0 bg-gradient-to-br from-[var(--color-jellyfin)] to-purple-900"></div>
+  {/if}
+
+  <!-- Gradient overlay -->
+  <div class="absolute inset-0 bg-gradient-to-r from-black/90 via-black/60 to-transparent"></div>
+
+  {#if currentItem}
+    <!-- Content -->
+    <div class="relative h-full flex flex-col justify-end p-12 max-w-3xl">
+      <div class="space-y-4">
+        <h1 class="text-5xl font-bold text-white drop-shadow-lg">
+          {currentItem.name}
+        </h1>
+
+        <!-- Metadata -->
+        <div class="flex items-center gap-4 text-sm text-gray-200">
+          {#if currentItem.productionYear}
+            <span>{currentItem.productionYear}</span>
+          {/if}
+          {#if currentItem.communityRating}
+            <span class="flex items-center gap-1">
+              <svg class="w-4 h-4 text-yellow-400" fill="currentColor" viewBox="0 0 24 24">
+                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
+              </svg>
+              {currentItem.communityRating.toFixed(1)}
+            </span>
+          {/if}
+          {#if currentItem.officialRating}
+            <span class="px-2 py-0.5 border border-gray-300 rounded text-xs">
+              {currentItem.officialRating}
+            </span>
+          {/if}
+        </div>
+
+        {#if currentItem.overview}
+          <p class="text-gray-200 line-clamp-3 text-lg leading-relaxed">
+            {currentItem.overview}
+          </p>
+        {/if}
+
+        <!-- Actions -->
+        <div class="flex gap-3 pt-2">
+          <button
+            onclick={() => goto(`/player/${currentItem.id}`)}
+            class="px-8 py-3 bg-white text-black hover:bg-white/90 rounded-lg font-semibold text-lg flex items-center gap-2 transition-colors"
+          >
+            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
+              <path d="M8 5v14l11-7z"/>
+            </svg>
+            Play
+          </button>
+          <button
+            onclick={() => {
+              // Navigate to full series detail page with cast/crew/related content
+              // (even for episodes, show the series page so users see cast and related items)
+              if (currentItem.type === "Episode" && currentItem.seriesId) {
+                goto(`/library/${currentItem.seriesId}`);
+              } else {
+                goto(`/library/${currentItem.id}`);
+              }
+            }}
+            class="px-8 py-3 bg-gray-600/80 hover:bg-gray-600 backdrop-blur-sm rounded-lg font-semibold text-lg transition-colors"
+          >
+            More Info
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Navigation -->
+    {#if items.length > 1}
+      <!-- Indicators / Location Bar -->
+      <div class="absolute bottom-6 left-1/2 transform -translate-x-1/2 flex gap-3 bg-black/40 backdrop-blur-sm px-4 py-2 rounded-full">
+        {#each items as _, idx}
+          <button
+            onclick={() => goToIndex(idx)}
+            class="h-2 rounded-full transition-all hover:bg-white/80 cursor-pointer {idx === currentIndex ? 'bg-white w-12' : 'bg-white/50 w-8'}"
+            aria-label={`Go to item ${idx + 1}: ${items[idx]?.name || ''}`}
+          ></button>
+        {/each}
+      </div>
+
+      <!-- Swipe Indicators (Desktop hover) -->
+      <button
+        onclick={prev}
+        class="absolute left-4 top-1/2 transform -translate-y-1/2 w-12 h-12 bg-black/40 backdrop-blur-sm rounded-full items-center justify-center transition-opacity opacity-0 group-hover:opacity-100 hover:bg-black/60 hidden md:flex"
+        aria-label="Previous item"
+      >
+        <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
+        </svg>
+      </button>
+
+      <button
+        onclick={next}
+        class="absolute right-4 top-1/2 transform -translate-y-1/2 w-12 h-12 bg-black/40 backdrop-blur-sm rounded-full items-center justify-center transition-opacity opacity-0 group-hover:opacity-100 hover:bg-black/60 hidden md:flex"
+        aria-label="Next item"
+      >
+        <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
+        </svg>
+      </button>
+    {/if}
+  {/if}
+</div>