feat(frontend): library page, components, and schedule/add-to-block dialogs (tasks 11-14)
This commit is contained in:
@@ -0,0 +1,183 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { useChannels, useUpdateChannel } from "@/hooks/use-channels";
|
||||
import type { LibraryItemFull, Weekday, ProgrammingBlock, ScheduleConfig } from "@/lib/types";
|
||||
import { WEEKDAYS, WEEKDAY_LABELS } from "@/lib/types";
|
||||
|
||||
interface Props {
|
||||
selectedItems: LibraryItemFull[];
|
||||
}
|
||||
|
||||
export function ScheduleFromLibraryDialog({ selectedItems }: 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 [strategy, setStrategy] = useState<"sequential" | "random" | "best_fit">("sequential");
|
||||
|
||||
const { data: channels } = useChannels();
|
||||
const updateChannel = useUpdateChannel();
|
||||
|
||||
const selectedChannel = channels?.find(c => c.id === channelId);
|
||||
const isEpisodic = selectedItems.every(i => i.content_type === "episode");
|
||||
const allSameSeries =
|
||||
isEpisodic &&
|
||||
selectedItems.length > 0 &&
|
||||
new Set(selectedItems.map(i => i.series_name)).size === 1;
|
||||
|
||||
function toggleDay(day: Weekday) {
|
||||
setSelectedDays(prev => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(day)) next.delete(day);
|
||||
else next.add(day);
|
||||
return next;
|
||||
});
|
||||
}
|
||||
|
||||
async function handleConfirm() {
|
||||
if (!selectedChannel || selectedDays.size === 0) return;
|
||||
const startTimeFull = startTime.length === 5 ? `${startTime}:00` : startTime;
|
||||
|
||||
const newBlock: ProgrammingBlock = 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) {
|
||||
updatedDayBlocks[day] = [...(updatedDayBlocks[day] ?? []), newBlock];
|
||||
}
|
||||
|
||||
const scheduleConfig: ScheduleConfig = { day_blocks: updatedDayBlocks };
|
||||
|
||||
await updateChannel.mutateAsync({
|
||||
id: channelId,
|
||||
data: { schedule_config: scheduleConfig },
|
||||
});
|
||||
setOpen(false);
|
||||
}
|
||||
|
||||
const canConfirm = !!channelId && selectedDays.size > 0;
|
||||
const daysLabel = [...selectedDays].map(d => WEEKDAY_LABELS[d]).join(", ");
|
||||
const preview = canConfirm
|
||||
? `${selectedDays.size} block(s) will be created on ${selectedChannel?.name} — ${daysLabel} at ${startTime}, ${strategy}`
|
||||
: null;
|
||||
|
||||
return (
|
||||
<>
|
||||
<Button size="sm" onClick={() => setOpen(true)}>Schedule on channel</Button>
|
||||
<Dialog open={open} onOpenChange={setOpen}>
|
||||
<DialogContent className="max-w-md">
|
||||
<DialogHeader><DialogTitle>Schedule on channel</DialogTitle></DialogHeader>
|
||||
<div className="flex flex-col gap-4">
|
||||
<div>
|
||||
<p className="mb-1.5 text-xs text-zinc-400">Channel</p>
|
||||
<Select value={channelId} onValueChange={setChannelId}>
|
||||
<SelectTrigger><SelectValue placeholder="Select channel…" /></SelectTrigger>
|
||||
<SelectContent>
|
||||
{channels?.map(c => (
|
||||
<SelectItem key={c.id} value={c.id}>{c.name}</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div>
|
||||
<p className="mb-1.5 text-xs text-zinc-400">Days</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{WEEKDAYS.map(day => (
|
||||
<label key={day} className="flex items-center gap-1.5 cursor-pointer">
|
||||
<Checkbox checked={selectedDays.has(day)} onCheckedChange={() => toggleDay(day)} />
|
||||
<span className="text-xs">{WEEKDAY_LABELS[day]}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-4">
|
||||
<div className="flex-1">
|
||||
<p className="mb-1.5 text-xs text-zinc-400">
|
||||
Start time{selectedChannel?.timezone ? ` (${selectedChannel.timezone})` : ""}
|
||||
</p>
|
||||
<Input
|
||||
type="time"
|
||||
value={startTime}
|
||||
onChange={e => setStartTime(e.target.value)}
|
||||
disabled={!channelId}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<p className="mb-1.5 text-xs text-zinc-400">Duration (mins)</p>
|
||||
<Input
|
||||
type="number"
|
||||
min={1}
|
||||
value={durationMins}
|
||||
onChange={e => setDurationMins(Number(e.target.value))}
|
||||
disabled={!channelId}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="mb-1.5 text-xs text-zinc-400">Fill strategy</p>
|
||||
<Select
|
||||
value={strategy}
|
||||
onValueChange={(v: "sequential" | "random" | "best_fit") => setStrategy(v)}
|
||||
disabled={!channelId}
|
||||
>
|
||||
<SelectTrigger><SelectValue /></SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="sequential">Sequential</SelectItem>
|
||||
<SelectItem value="random">Random</SelectItem>
|
||||
<SelectItem value="best_fit">Best fit</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
{preview && (
|
||||
<p className="rounded-md bg-emerald-950/30 border border-emerald-800 px-3 py-2 text-xs text-emerald-300">
|
||||
{preview}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setOpen(false)}>Cancel</Button>
|
||||
<Button
|
||||
disabled={!canConfirm || updateChannel.isPending}
|
||||
onClick={handleConfirm}
|
||||
>
|
||||
{updateChannel.isPending ? "Saving…" : `Create ${selectedDays.size} block(s)`}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user