jellytau/src/routes/+page.svelte

<script lang="ts">
  import { onMount } from "svelte";
  import { goto } from "$app/navigation";
  import { platform } from "@tauri-apps/plugin-os";
  import { auth, isAuthenticated } from "$lib/stores/auth";
  import { home } from "$lib/stores/home";
  import { library, libraries } from "$lib/stores/library";
  import { isServerReachable } from "$lib/stores/connectivity";
  import { currentMedia } from "$lib/stores/player";
  import HeroBanner from "$lib/components/home/HeroBanner.svelte";
  import Carousel from "$lib/components/home/Carousel.svelte";
  import MediaCard from "$lib/components/library/MediaCard.svelte";
  import type { MediaItem, Library } from "$lib/api/types";

  // Track if we've done an initial load (plain variable, not reactive)
  let hasLoadedOnce = false;
  let previousServerReachable = false;
  let isAndroid = $state(false);

  // Redirect to login if not authenticated
  $effect(() => {
    if (!$isAuthenticated) {
      goto("/login");
    }
  });

  // Load home sections when authenticated
  onMount(async () => {
    // Detect platform
    try {
      const platformName = await platform();
      isAndroid = platformName === "android";
    } catch (err) {
      console.error("Platform detection failed:", err);
    }

    if ($isAuthenticated) {
      await home.loadHomeSections();
      if ($libraries.length === 0) {
        await library.loadLibraries();
      }
      hasLoadedOnce = true;
    }
  });

  // Reload when server becomes reachable (handles startup timing issue)
  $effect(() => {
    const serverReachable = $isServerReachable;

    // If server just became reachable and we've already done initial load, reload to get fresh data
    if (serverReachable && !previousServerReachable && hasLoadedOnce && $isAuthenticated) {
      home.loadHomeSections();
    }

    // Update tracking (outside reactive context to avoid re-triggering)
    previousServerReachable = serverReachable;
  });

  // Tap → detail page. Non-playable containers already routed to /library; now
  // movies and episodes go to their detail page too instead of playing straight
  // away. Channel leaves (no detail page) still go direct to the player.
  // TRACES: UR-058 | DR-087
  function handleItemClick(item: MediaItem) {
    switch (item.kind) {
      case "channelItem":
      case "liveChannel":
        goto(`/player/${item.id}`);
        break;
      case "episode":
        // An episode is never browsed as a bare Episode page — it opens in its
        // series' Episode Focus View so the series context loads (ux-flows §5B.1).
        if (item.seriesId) {
          goto(`/library/${item.seriesId}?episode=${item.id}`);
        } else {
          goto(`/library/${item.id}`);
        }
        break;
      default:
        goto(`/library/${item.id}`);
        break;
    }
  }

  // Long press → play immediately, confirming first so an accidental hold on a
  // half-watched item doesn't blow away the user's spot without warning.
  // TRACES: UR-058 | DR-087
  function handleItemLongPress(item: MediaItem) {
    switch (item.kind) {
      case "movie":
      case "episode":
      case "channelItem":
      case "liveChannel":
        if (confirm(`Play "${item.name}" now?`)) {
          goto(`/player/${item.id}`);
        }
        break;
      default:
        // Containers (series/season/album/…) have no single "play now" target.
        goto(`/library/${item.id}`);
        break;
    }
  }

  // Playlist libraries live inside the Music landing page, not as top-level shortcuts.
  const shortcutLibraries = $derived(
    $libraries.filter((lib) => lib.collectionType !== "playlists")
  );

  function handleLibraryClick(lib: Library) {
    // Mirror /library routing: dedicated landing pages need currentLibrary set.
    library.setCurrentLibrary(lib);
    switch (lib.collectionType) {
      case "music":
        goto("/library/music");
        break;
      case "tvshows":
        goto("/library/tv");
        break;
      case "movies":
        goto("/library/movies");
        break;
      default:
        library.clearGenres();
        goto("/library");
        break;
    }
  }

  const heroItems = $derived($home.heroItems);
  const resumeItems = $derived($home.resumeItems.filter(
    i => i.kind === "movie" || i.kind === "episode"
  ));
  const nextUpItems = $derived($home.nextUpItems);
  const latestItems = $derived($home.latestItems);
  const recentlyPlayedAudio = $derived($home.recentlyPlayedAudio);
  const resumeMovies = $derived($home.resumeMovies);
  const isLoading = $derived($home.isLoading);
</script>

{#if isLoading}
  <div class="h-screen flex justify-center items-center">
    <div class="w-8 h-8 border-2 border-[var(--color-jellyfin)] border-t-transparent rounded-full animate-spin"></div>
  </div>
{:else}
  <div class="h-screen overflow-y-auto p-4 pb-16 md:pb-4 {isAndroid && $currentMedia && $currentMedia.type !== 'Movie' && $currentMedia.type !== 'Episode' ? 'pb-40' : ''}">
    <div class="space-y-8">

    <!-- Hero Banner -->
    {#if heroItems.length > 0}
      <HeroBanner items={heroItems} />
    {/if}

    <!-- Your Libraries: quick jump into each dedicated landing page -->
    {#if shortcutLibraries.length > 0}
      <div>
        <h2 class="text-xl font-bold text-white mb-4 px-4">Your Libraries</h2>
        <div class="flex gap-4 overflow-x-auto px-4 pb-2">
          {#each shortcutLibraries as lib (lib.id)}
            <div class="flex-shrink-0">
              <MediaCard
                item={lib}
                size="medium"
                onclick={() => handleLibraryClick(lib)}
              />
            </div>
          {/each}
        </div>
      </div>
    {/if}

    <!-- Next Movie -->
    {#if resumeMovies.length > 0}
      <Carousel
        title="Next Movie"
        items={resumeMovies}
        onItemClick={handleItemClick}
        onItemLongPress={handleItemLongPress}
      />
    {/if}

    <!-- Next Episode -->
    {#if nextUpItems.length > 0}
      <Carousel
        title="Next Episode"
        items={nextUpItems}
        onItemClick={handleItemClick}
        onItemLongPress={handleItemLongPress}
      />
    {/if}

    <!-- Recently Listened -->
    {#if recentlyPlayedAudio.length > 0}
      <Carousel
        title="Recently Listened"
        items={recentlyPlayedAudio}
        onItemClick={handleItemClick}
        onItemLongPress={handleItemLongPress}
      />
    {/if}

    <!-- Continue Watching -->
    {#if resumeItems.length > 0}
      <Carousel
        title="Continue Watching"
        items={resumeItems}
        onItemClick={handleItemClick}
        onItemLongPress={handleItemLongPress}
      />
    {/if}

    <!-- Recently Added -->
    {#if latestItems.length > 0}
      <Carousel
        title="Recently Added"
        items={latestItems}
        onItemClick={handleItemClick}
        onItemLongPress={handleItemLongPress}
      />
    {/if}

    <!-- Quick Access -->
    <div class="pt-4 px-4">
      <button
        onclick={() => goto("/library")}
        class="text-[var(--color-jellyfin)] hover:underline text-lg"
      >
        Browse all libraries →
      </button>
    </div>
    </div>
  </div>
{/if}