<script lang="ts">
  import GenericMediaListPage from "$lib/components/library/GenericMediaListPage.svelte";
  import type { MediaItem } from "$lib/api/types";

  /**
   * Track browser
   * @req: UR-007 - Navigate media in library
   * @req: UR-008 - Search media across libraries
   * @req: DR-007 - Library browsing screens
   */

  const config = {
    itemType: "Audio",
    title: "Tracks",
    backPath: "/library/music",
    searchPlaceholder: "Search tracks or artists...",
    sortOptions: [
      {
        key: "SortName",
        label: "Title",
      },
      {
        key: "Artist",
        label: "Artist",
      },
      {
        key: "Album",
        label: "Album",
      },
      {
        key: "DatePlayed",
        label: "Recent",
      },
    ],
    defaultSort: "SortName",
    displayComponent: "tracklist" as const,
    searchFields: ["name", "artists", "album"],
  };
</script>

<GenericMediaListPage {config} />
