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 { 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 type { MediaItem } 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();
      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;
  });

  function handleItemClick(item: MediaItem) {
    switch (item.type) {
      case "Series":
      case "Season":
      case "MusicAlbum":
      case "MusicArtist":
      case "Folder":
      case "Channel":
      case "ChannelFolderItem":
        goto(`/library/${item.id}`);
        break;
      default:
        goto(`/player/${item.id}`);
        break;
    }
  }

  const heroItems = $derived($home.heroItems);
  const resumeItems = $derived($home.resumeItems);
  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}

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

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

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

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

    <!-- Recently Added -->
    {#if latestItems.length > 0}
      <Carousel
        title="Recently Added"
        items={latestItems}
        onItemClick={handleItemClick}
      />
    {/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}