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,71 @@
+<script lang="ts">
+  import { goto } from "$app/navigation";
+  import type { Person } from "$lib/api/types";
+
+  interface Props {
+    people: Person[];
+    roleFilter: string[];  // e.g., ["Director", "Writer", "Producer"]
+    label?: string;  // e.g., "Directed by", "Written by"
+    maxShow?: number;  // Default: 3
+  }
+
+  let {
+    people,
+    roleFilter,
+    label,
+    maxShow = 3
+  }: Props = $props();
+
+  // Filter and limit people by role
+  const filteredPeople = $derived(
+    people
+      .filter(p => roleFilter.includes(p.type || "") && p.id && p.id.trim() !== "")
+      .slice(0, maxShow)
+  );
+
+  const totalMatching = $derived(
+    people.filter(p => roleFilter.includes(p.type || "") && p.id && p.id.trim() !== "").length
+  );
+
+  function handlePersonClick(personId: string, e: MouseEvent) {
+    e.preventDefault();
+    goto(`/library/${personId}`);
+  }
+
+  // Generate label if not provided
+  const displayLabel = $derived.by(() => {
+    if (label) return label;
+
+    if (roleFilter.length === 1) {
+      const role = roleFilter[0];
+      if (role === "Director") return "Directed by";
+      if (role === "Writer") return "Written by";
+      if (role === "Producer") return "Produced by";
+      if (role === "Composer") return "Music by";
+      return `${role}:`;
+    }
+    return "Credits:";
+  });
+</script>
+
+{#if filteredPeople.length > 0}
+  <div class="text-sm text-gray-400 flex flex-wrap items-baseline gap-2">
+    <span class="text-gray-500">{displayLabel}</span>
+    <div class="flex flex-wrap gap-1">
+      {#each filteredPeople as person, index (person.id)}
+        <button
+          onclick={(e) => handlePersonClick(person.id, e)}
+          class="text-[var(--color-jellyfin)] hover:underline"
+        >
+          {person.name}
+        </button>
+        {#if index < filteredPeople.length - 1}
+          <span class="text-gray-500">,</span>
+        {/if}
+      {/each}
+      {#if totalMatching > maxShow}
+        <span class="text-gray-500">+{totalMatching - maxShow} more</span>
+      {/if}
+    </div>
+  </div>
+{/if}