GKaszewski/k-tv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(frontend): make library sidebar drilldown-aware

Browse Source
This commit is contained in:
Gabriel Kaszewski
2026-03-20 01:18:52 +01:00
parent 66eef2c82e
commit 33338ac100
3 changed files with 162 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
k-tv-frontend/app/(main)/library/components/library-sidebar.tsx
View File

@@ -5,23 +5,61 @@ import type { LibrarySearchParams } from "@/hooks/use-library-search";
import { Input } from "@/components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Badge } from "@/components/ui/badge";
import { ArrowLeft } from "lucide-react";
interface Props {
filter: LibrarySearchParams;
onFilterChange: (next: Partial<LibrarySearchParams>) => void;
viewMode: "grouped" | "flat";
drilldown: null | { series: string } | { series: string; season: number };
onBack: () => void;
}
const CONTENT_TYPES = [
{ value: "", label: "All types" },
const ALL = "";
const CONTENT_TYPES_ALL = [
{ value: ALL, label: "All types" },
{ value: "movie", label: "Movies" },
{ value: "episode", label: "Episodes" },
{ value: "short", label: "Shorts" },
];
export function LibrarySidebar({ filter, onFilterChange }: Props) {
const CONTENT_TYPES_GROUPED = [
{ value: ALL, label: "All types" },
{ value: "movie", label: "Movies" },
{ value: "short", label: "Shorts" },
];
export function LibrarySidebar({ filter, onFilterChange, viewMode, drilldown, onBack }: Props) {
const { data: collections } = useCollections(filter.provider);
const { data: genres } = useGenres(filter.type, { provider: filter.provider });
if (drilldown !== null) {
return (
<aside className="w-56 shrink-0 border-r border-zinc-800 bg-zinc-950 p-4 flex flex-col gap-4">
<button
type="button"
onClick={onBack}
className="flex items-center gap-1.5 text-xs text-zinc-400 hover:text-zinc-100 transition-colors"
>
<ArrowLeft className="h-3.5 w-3.5" />
Back
</button>
<div>
<p className="mb-1.5 text-xs font-medium uppercase tracking-wider text-zinc-500">Search</p>
<Input
placeholder="Search…"
value={filter.q ?? ""}
onChange={e => onFilterChange({ q: e.target.value || undefined })}
className="h-8 text-xs"
/>
</div>
</aside>
);
}
const contentTypes = viewMode === "grouped" ? CONTENT_TYPES_GROUPED : CONTENT_TYPES_ALL;
return (
<aside className="w-56 shrink-0 border-r border-zinc-800 bg-zinc-950 p-4 flex flex-col gap-4">
<div>
@@ -36,10 +74,10 @@ export function LibrarySidebar({ filter, onFilterChange }: Props) {
<div>
<p className="mb-1.5 text-xs font-medium uppercase tracking-wider text-zinc-500">Type</p>
<Select value={filter.type ?? ""} onValueChange={v => onFilterChange({ type: v || undefined })}>
<Select value={filter.type ?? ALL} onValueChange={v => onFilterChange({ type: v === ALL ? undefined : v })}>
<SelectTrigger className="h-8 text-xs"><SelectValue /></SelectTrigger>
<SelectContent>
{CONTENT_TYPES.map(ct => (
{contentTypes.map(ct => (
<SelectItem key={ct.value} value={ct.value}>{ct.label}</SelectItem>
))}
</SelectContent>

54
k-tv-frontend/app/(main)/library/components/schedule-from-library-dialog.tsx
View File

@@ -12,16 +12,18 @@ import { WEEKDAYS, WEEKDAY_LABELS } from "@/lib/types";
interface Props {
selectedItems: LibraryItemFull[];
selectedShows?: ShowSummary[];
}
export function ScheduleFromLibraryDialog({ selectedItems }: Props) {
export function ScheduleFromLibraryDialog({ selectedItems, selectedShows }: Props) {
const [open, setOpen] = useState(false);
const [channelId, setChannelId] = useState("");
const [selectedDays, setSelectedDays] = useState<Set<Weekday>>(new Set());
const [startTime, setStartTime] = useState("20:00");
const [durationMins, setDurationMins] = useState(() =>
selectedItems.length === 1 ? Math.ceil(selectedItems[0].duration_secs / 60) : 60
);
const [durationMins, setDurationMins] = useState(() => {
if (selectedItems.length === 1) return Math.ceil(selectedItems[0].duration_secs / 60);
return 60;
});
const [strategy, setStrategy] = useState<"sequential" | "random" | "best_fit">("sequential");
const { data: channels } = useChannels();
@@ -47,32 +49,54 @@ export function ScheduleFromLibraryDialog({ selectedItems }: Props) {
if (!selectedChannel || selectedDays.size === 0) return;
const startTimeFull = startTime.length === 5 ? `${startTime}:00` : startTime;
const newBlock: ProgrammingBlock = allSameSeries
const hasShows = selectedShows && selectedShows.length > 0;
const newBlock: ProgrammingBlock = hasShows
? {
id: globalThis.crypto.randomUUID(),
name: `${selectedItems[0].series_name ?? "Series"} — ${startTime}`,
name: selectedShows!.length === 1
? `${selectedShows![0].series_name} — ${startTime}`
: `${selectedShows!.length} shows — ${startTime}`,
start_time: startTimeFull,
duration_mins: durationMins,
content: {
type: "algorithmic",
filter: {
content_type: "episode",
series_names: [selectedItems[0].series_name!],
series_names: selectedShows!.map(s => s.series_name),
genres: [],
tags: [],
collections: [],
},
strategy,
provider_id: selectedItems[0].id.split("::")[0],
},
}
: {
id: globalThis.crypto.randomUUID(),
name: `${selectedItems.length} items — ${startTime}`,
start_time: startTimeFull,
duration_mins: durationMins,
content: { type: "manual", items: selectedItems.map(i => i.id) },
};
: allSameSeries
? {
id: globalThis.crypto.randomUUID(),
name: `${selectedItems[0].series_name ?? "Series"} — ${startTime}`,
start_time: startTimeFull,
duration_mins: durationMins,
content: {
type: "algorithmic",
filter: {
content_type: "episode",
series_names: [selectedItems[0].series_name!],
genres: [],
tags: [],
collections: [],
},
strategy,
provider_id: selectedItems[0].id.split("::")[0],
},
}
: {
id: globalThis.crypto.randomUUID(),
name: `${selectedItems.length} items — ${startTime}`,
start_time: startTimeFull,
duration_mins: durationMins,
content: { type: "manual", items: selectedItems.map(i => i.id) },
};
const updatedDayBlocks = { ...selectedChannel.schedule_config.day_blocks };
for (const day of selectedDays) {