peter
dac391a890
Round 3 reviewed round 2's diff. Trend across the loop: 32 findings over the whole epic, 15 over round 1's fixes, 11 over round 2's. What it caught is mostly the same shape as before — a guard narrowed until it was wrong in the other direction — plus one item this branch had now got wrong three different ways. Backspace ownership over the player, third and final answer. Round 1 deferred to nothing (the cheat sheet took the key and the player stopped underneath it). Round 1's fix deferred to `anyLayerAbove` (the player's own gear/tracks popovers push layers too, so it stopped closing them). Round 2's fix named the sheet and palette (the app-wide ErrorDialog is neither, so the player tore down under it). The rule that actually holds is not a list of overlays: the player's own panels answer first, because handleBack's cascade is what closes them, and anything else layered above takes the key. The rail's inline rename is settled by measurement rather than argument. Two rounds reasoned about whether a React passive effect lands before or after floating-ui's return-focus microtask and reached opposite conclusions; a jsdom harness built to decide it reproduced no failure for ANY shape, because focus never enters the menu there — so it was deleted rather than kept as a test that discriminates nothing. Checked in a real browser instead: the field opens and holds focus. The shipped fix works, and the comment now says what was measured rather than what was inferred. The same check found that round 1's OTHER rail fix never worked at all. Escape does run its own handler (typing then Escape leaves the name unchanged, so it cancels rather than blur-commits) and the row button is focusable when focused from outside — yet focus still lands on <body>. Three explanations, none of which survived. So the refocus machinery is reverted to the shape that shipped before this epic and the gap is documented where the next person will hit it, with the evidence and an instruction to instrument before theorising. A fourth guess would have been worse than a known bug. Also: the two comments in Playlists.tsx that still claimed the disabled menu rows explain themselves — untrue since round 2 reverted `inert`, and exactly the comment-vs-code drift CLAUDE.md calls the source of the worst bugs here. And the move-failure toast printed HttpError.detail verbatim, which for the reachable 404 is the backend's bare English "Unknown playlist"; only a structured detail has been through localizeDetail, so only a structured detail reaches the toast now.
970 lines
41 KiB
TypeScript
970 lines
41 KiB
TypeScript
import { lazy, Suspense, useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||
import { useTranslation } from "react-i18next";
|
||
import { useQuery, useQueryClient } from "@tanstack/react-query";
|
||
import { qk } from "../lib/queryKeys";
|
||
import {
|
||
DndContext,
|
||
KeyboardSensor,
|
||
PointerSensor,
|
||
closestCenter,
|
||
useSensor,
|
||
useSensors,
|
||
type DragEndEvent,
|
||
} from "@dnd-kit/core";
|
||
import {
|
||
SortableContext,
|
||
arrayMove,
|
||
sortableKeyboardCoordinates,
|
||
useSortable,
|
||
verticalListSortingStrategy,
|
||
} from "@dnd-kit/sortable";
|
||
import { CSS } from "@dnd-kit/utilities";
|
||
import {
|
||
AlertTriangle,
|
||
ArrowDown,
|
||
ArrowDownToLine,
|
||
ArrowUp,
|
||
ArrowUpToLine,
|
||
Check,
|
||
ExternalLink,
|
||
FolderInput,
|
||
GripVertical,
|
||
ListPlus,
|
||
Pencil,
|
||
Play,
|
||
RefreshCw,
|
||
RotateCcw,
|
||
Trash2,
|
||
Upload,
|
||
X,
|
||
Youtube,
|
||
} from "lucide-react";
|
||
import { api, HttpError, type Playlist, type Video } from "../lib/api";
|
||
import { notify } from "../lib/notifications";
|
||
import { notifyYouTubeActionError } from "../lib/youtubeErrors";
|
||
import { playlistName } from "../lib/playlistName";
|
||
import { useUndoable } from "../lib/useUndoable";
|
||
import { cycleSort, type SortState } from "../lib/columnSort";
|
||
import { formatRuntime } from "../lib/format";
|
||
import { applyView, sameOrder } from "../lib/playlistView";
|
||
const PlayerModal = lazy(() => import("./PlayerModal"));
|
||
import { Button } from "./ui/Button";
|
||
import { type ActionMenuItem } from "./ui/ActionMenu";
|
||
import { ContextMenu } from "./ui/ContextMenu";
|
||
import { useContextMenu } from "./ui/useContextMenu";
|
||
import UndoToolbar from "./ui/UndoToolbar";
|
||
import { PageToolbar } from "./ui/PageShell";
|
||
import { useConfirm } from "./ConfirmProvider";
|
||
import { usePlaylistActions } from "./usePlaylistActions";
|
||
import { usePlaylists } from "./PlaylistsProvider";
|
||
import { useMe } from "../lib/useMe";
|
||
import {
|
||
ColumnHead,
|
||
alignClass,
|
||
filterRows,
|
||
isActive,
|
||
type Column,
|
||
type FilterMap,
|
||
} from "./ui/tableHeader";
|
||
import { GRIP_KEY, playlistColumns } from "./playlistColumns";
|
||
|
||
// The playlist detail is a HYBRID table (E4 S4): real sortable/filterable column headers over a
|
||
// body that is still a drag-reorderable @dnd-kit list.
|
||
//
|
||
// The distinction that shapes the whole module: **the column sort and the filters are a VIEW**,
|
||
// while the playlist's own order is stored data. Before S4 the sort control wrote straight through
|
||
// to the server, so picking "sort by title" silently rewrote the playlist and marked a
|
||
// YouTube-linked mirror dirty. Now nothing is written until the user presses "Save this order",
|
||
// which still goes through the undoable path — the capability is intact, it just stopped being a
|
||
// side effect of looking at the list.
|
||
//
|
||
// It composes `tableHeader`'s pieces instead of rendering a `DataTable`, because DataTable owns
|
||
// its own filter/sort/page state and the stored order needs a single owner.
|
||
|
||
// The neutral view: "#" ascending IS the stored order, so the header can show a real arrow for it
|
||
// instead of the list looking unsorted (or, worse, looking sorted by whatever column the stored
|
||
// order happens to correlate with — the user read a channel-grouped playlist as sorted by Channel).
|
||
const STORED_SORT: SortState = { key: "pos", dir: "asc" };
|
||
const isStoredSort = (s: SortState) => s?.key === "pos" && s.dir === "asc";
|
||
|
||
const idsKey = (items: Video[]) =>
|
||
items
|
||
.map((v) => v.id)
|
||
.sort()
|
||
.join(",");
|
||
|
||
function Row({
|
||
video,
|
||
columns,
|
||
dragDisabled,
|
||
dragHint,
|
||
menuProps,
|
||
}: {
|
||
video: Video;
|
||
columns: Column<Video>[];
|
||
dragDisabled: boolean;
|
||
dragHint: string;
|
||
/** useContextMenu's trigger props. On the WHOLE row, not a handle: a right-click anywhere in the
|
||
* row opens the menu, the way a native list does. The row's own buttons keep their left-click
|
||
* behaviour — a right-click just isn't a button press. */
|
||
menuProps: Record<string, unknown>;
|
||
}) {
|
||
const { t } = useTranslation();
|
||
const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
|
||
id: video.id,
|
||
disabled: dragDisabled,
|
||
});
|
||
return (
|
||
<tr
|
||
ref={setNodeRef}
|
||
style={{
|
||
transform: CSS.Transform.toString(transform),
|
||
// No transition on the row being dragged: dnd-kit drives `transform` from the pointer, so
|
||
// animating it makes the row trail the cursor. The others keep it for the reflow animation.
|
||
transition: isDragging ? undefined : transition,
|
||
opacity: isDragging ? 0.6 : 1,
|
||
}}
|
||
// transition-COLORS, not `transition` — the bare utility animates transform too, which is
|
||
// the same lag by another route (150ms behind the pointer, on every row).
|
||
className="border-b border-border/50 hover:bg-card/40 transition-colors"
|
||
{...menuProps}
|
||
>
|
||
{columns.map((col) => (
|
||
<td
|
||
key={col.key}
|
||
style={col.width ? { width: col.width } : undefined}
|
||
className={`px-2 py-1.5 align-middle ${col.nowrap ? "whitespace-nowrap" : ""} ${alignClass(col.align)}`}
|
||
>
|
||
{col.key === GRIP_KEY ? (
|
||
// The one cell the column defs can't render: the handle needs this row's sortable
|
||
// attributes/listeners. Disabled (not hidden) under a view, so the affordance stays
|
||
// put and can explain itself instead of silently doing nothing.
|
||
<button
|
||
{...attributes}
|
||
{...(dragDisabled ? {} : listeners)}
|
||
// `disabled` would drop it from the tab order AND suppress the tooltip, so the
|
||
// reason reached nobody. aria-disabled keeps it focusable and the name carries the why.
|
||
aria-disabled={dragDisabled || undefined}
|
||
onClick={(e) => dragDisabled && e.preventDefault()}
|
||
title={dragDisabled ? dragHint : t("playlists.dragHandle")}
|
||
aria-label={
|
||
dragDisabled ? dragHint : t("playlists.dragHandleOf", { title: video.title })
|
||
}
|
||
className={`text-muted ${dragDisabled ? "opacity-30 cursor-not-allowed" : "hover:text-fg cursor-grab active:cursor-grabbing"}`}
|
||
>
|
||
<GripVertical className="w-4 h-4" />
|
||
</button>
|
||
) : (
|
||
col.render(video)
|
||
)}
|
||
</td>
|
||
))}
|
||
</tr>
|
||
);
|
||
}
|
||
|
||
export default function Playlists() {
|
||
const me = useMe();
|
||
const canWrite = me.can_write;
|
||
// The selected playlist lives in PlaylistsProvider, shared with the PlaylistsRail (which owns the
|
||
// list + its rail controls). This detail pane reacts to the selection.
|
||
const { selectedId } = usePlaylists();
|
||
const { t } = useTranslation();
|
||
const qc = useQueryClient();
|
||
const confirm = useConfirm();
|
||
const plActions = usePlaylistActions();
|
||
const [renaming, setRenaming] = useState(false);
|
||
const [renameValue, setRenameValue] = useState("");
|
||
// The stored order is undoable: drag and "save this order" both go through `order.set`, so each
|
||
// is reversible (buttons + Ctrl+Z/Y). onApply persists the new order to the server.
|
||
const order = useUndoable<Video[]>([], {
|
||
onApply: (next) => {
|
||
if (selectedId == null) return;
|
||
api
|
||
.reorderPlaylist(
|
||
selectedId,
|
||
next.map((v) => v.id),
|
||
)
|
||
.then(() => {
|
||
// Refresh the sidebar (cover may change) and the detail (so the now-dirty state,
|
||
// and the Reset/Unsynced indicators, show without an F5). The membership guard
|
||
// keeps the refetch from wiping the undo history on a pure reorder.
|
||
qc.invalidateQueries({ queryKey: qk.playlists() });
|
||
qc.invalidateQueries({ queryKey: qk.playlist(selectedId) });
|
||
})
|
||
.catch((e) => {
|
||
// Was a bare .then(): a failed reorder left the UI showing an order the server had
|
||
// rejected, and produced an unhandled rejection. Say so and resync from the server.
|
||
notifyYouTubeActionError(e, t("playlists.reorderFailed"));
|
||
// Clear the membership guard first: a reorder never changes the id SET, so without this
|
||
// the arriving detail is judged "same list" and the rejected order stays on screen — and
|
||
// becomes the base for the next drag.
|
||
lastSetRef.current = "";
|
||
qc.invalidateQueries({ queryKey: qk.playlist(selectedId) });
|
||
});
|
||
},
|
||
});
|
||
const items = order.value;
|
||
// VIEW state — never written to the server on its own.
|
||
const [viewSort, setViewSort] = useState<SortState>(STORED_SORT);
|
||
const [filters, setFilters] = useState<FilterMap>({});
|
||
const [groupBy, setGroupBy] = useState(false);
|
||
// Tracks the membership (id set) currently loaded into `order`, so a refetch that only
|
||
// re-confirms our own reorder doesn't wipe the undo history — we reset history only when
|
||
// the actual set of items changes (different playlist, or an add/remove).
|
||
const lastSetRef = useRef<string>("");
|
||
// The open player is tracked by video ID, not by a position: `shown` is derived, so a refetch or
|
||
// a change of view would otherwise slide a different video under the index — or unmount the player
|
||
// mid-playback. PlayerModal already tracks its own queue by id; this is the parent half of that.
|
||
const [playingId, setPlayingId] = useState<string | null>(null);
|
||
// ONE context menu for the whole table, not one popover per <tr> (see ui/ContextMenu): the row it
|
||
// belongs to is `rowMenu.target`, and the panel anchors to the pointer.
|
||
const rowMenu = useContextMenu<Video>();
|
||
|
||
const listQuery = useQuery({
|
||
queryKey: qk.playlists(),
|
||
queryFn: () => api.playlists(),
|
||
refetchOnWindowFocus: true,
|
||
});
|
||
const playlists = listQuery.data ?? [];
|
||
|
||
const detailQuery = useQuery({
|
||
queryKey: qk.playlist(selectedId),
|
||
queryFn: () => api.playlist(selectedId as number),
|
||
enabled: selectedId != null,
|
||
// Refetch when returning to the tab so a change made elsewhere (another tab/device)
|
||
// shows up — including the player's live N / M count, which reads the queue length.
|
||
refetchOnWindowFocus: true,
|
||
});
|
||
const detail = detailQuery.data;
|
||
|
||
useEffect(() => {
|
||
if (!detail) return;
|
||
// Scoped to the playlist: two lists holding the SAME videos would otherwise look identical to
|
||
// the guard, so the second would render in the first's order and inherit its undo stack.
|
||
const key = `${selectedId}:${idsKey(detail.items)}`;
|
||
if (key !== lastSetRef.current) {
|
||
lastSetRef.current = key;
|
||
order.reset(detail.items);
|
||
}
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
}, [detail]);
|
||
|
||
// Reset the view when switching playlists (the stored order itself is per-playlist).
|
||
useEffect(() => {
|
||
setViewSort(STORED_SORT);
|
||
setFilters({});
|
||
setGroupBy(false);
|
||
}, [selectedId]);
|
||
|
||
const builtin = detail?.kind === "watch_later";
|
||
// YouTube-mirrored playlists can be edited locally and synced back (the read-sync skips a
|
||
// dirty mirror so it won't clobber unpushed edits); the YT-link button marks their origin.
|
||
const editable = !builtin;
|
||
const linked = editable && !!detail?.yt_playlist_id;
|
||
// LOCAL editing (reorder, remove) needs no YouTube write scope — `canWrite` gates only the
|
||
// push/delete-on-YouTube paths. Folding it in here would have taken drag and remove away from
|
||
// every account without the scope, which they have always had.
|
||
const canEdit = editable;
|
||
const [pushing, setPushing] = useState(false);
|
||
const [reverting, setReverting] = useState(false);
|
||
|
||
const onPlay = useCallback((v: Video) => setPlayingId(v.id), []);
|
||
const onRemove = useCallback((v: Video) => {
|
||
removeRef.current(v);
|
||
}, []);
|
||
|
||
const storedIndex = useMemo(() => {
|
||
const m = new Map(items.map((v, i) => [v.id, i]));
|
||
return (v: Video) => m.get(v.id) ?? 0;
|
||
}, [items]);
|
||
|
||
// Total playtime of the whole playlist (sums every item, matching the itemCount beside it — not
|
||
// the filtered `shown` set). Items with an unknown duration count as 0; hidden when nothing sums.
|
||
const totalSeconds = useMemo(
|
||
() => items.reduce((acc, v) => acc + (v.duration_seconds ?? 0), 0),
|
||
[items],
|
||
);
|
||
|
||
const columns = useMemo(
|
||
() => playlistColumns({ t, indexOf: storedIndex, onPlay, onRemove, canEdit }),
|
||
[t, storedIndex, onPlay, onRemove, canEdit],
|
||
);
|
||
|
||
const filterActive = Object.values(filters).some(isActive);
|
||
const shown = useMemo(
|
||
() => applyView(filterRows(items, columns, filters), columns, viewSort, groupBy),
|
||
[items, columns, filters, viewSort, groupBy],
|
||
);
|
||
// Read by the drag announcements, which must report the CURRENT positions without making the
|
||
// announcement closures a render dependency of DndContext.
|
||
const shownRef = useRef(shown);
|
||
shownRef.current = shown;
|
||
|
||
const viewActive = !isStoredSort(viewSort) || groupBy || filterActive;
|
||
// Saving a FILTERED view would drop every hidden item from the playlist, so the button only
|
||
// offers itself when the view is a pure reordering of the whole list.
|
||
const canSaveOrder = canEdit && !filterActive && !sameOrder(shown, items);
|
||
|
||
function toggleSort(key: string) {
|
||
// Cycling off any column lands back on the stored order rather than on a nameless "unsorted".
|
||
setViewSort((s) => cycleSort(s, key) ?? STORED_SORT);
|
||
}
|
||
function applyFilter(key: string, value: string | string[]) {
|
||
setFilters((f) => ({ ...f, [key]: value }));
|
||
}
|
||
function clearView() {
|
||
setViewSort(STORED_SORT);
|
||
setFilters({});
|
||
setGroupBy(false);
|
||
}
|
||
function saveOrder() {
|
||
order.set(shown); // onApply persists it
|
||
clearView();
|
||
}
|
||
|
||
const sensors = useSensors(
|
||
useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),
|
||
// The grip was focusable and called itself "reorder", but only a pointer could move it.
|
||
useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
|
||
);
|
||
|
||
const posOf = (id: string | number) => shownRef.current.findIndex((v) => v.id === id) + 1;
|
||
const titleOf = (id: string | number) => shownRef.current.find((v) => v.id === id)?.title ?? "";
|
||
const total = () => shownRef.current.length;
|
||
const screenReaderInstructions = { draggable: t("playlists.dndInstructions") };
|
||
const announcements = {
|
||
onDragStart: ({ active }: { active: { id: string | number } }) =>
|
||
t("playlists.dndPickedUp", {
|
||
title: titleOf(active.id),
|
||
pos: posOf(active.id),
|
||
total: total(),
|
||
}),
|
||
onDragOver: ({ active }: { active: { id: string | number } }) =>
|
||
t("playlists.dndMovedOver", {
|
||
title: titleOf(active.id),
|
||
pos: posOf(active.id),
|
||
total: total(),
|
||
}),
|
||
onDragEnd: ({ active }: { active: { id: string | number } }) =>
|
||
t("playlists.dndDropped", {
|
||
title: titleOf(active.id),
|
||
pos: posOf(active.id),
|
||
total: total(),
|
||
}),
|
||
onDragCancel: ({ active }: { active: { id: string | number } }) =>
|
||
t("playlists.dndCancelled", { title: titleOf(active.id), pos: posOf(active.id) }),
|
||
};
|
||
|
||
const plName = (p: { kind: string; name: string }) => playlistName(p, t);
|
||
|
||
function refreshAll() {
|
||
qc.invalidateQueries({ queryKey: qk.playlists() });
|
||
qc.invalidateQueries({ queryKey: qk.playlist(selectedId) });
|
||
}
|
||
|
||
async function revertToYoutube() {
|
||
if (selectedId == null || !detail || reverting) return;
|
||
const ok = await confirm({
|
||
title: t("playlists.revertTitle"),
|
||
message: t("playlists.revertMsg"),
|
||
confirmLabel: t("playlists.revertConfirm"),
|
||
danger: true,
|
||
});
|
||
if (!ok) return;
|
||
setReverting(true);
|
||
try {
|
||
await api.revertPlaylist(selectedId);
|
||
refreshAll();
|
||
notify({ level: "success", message: t("playlists.revertDone", { name: plName(detail) }) });
|
||
} catch (e) {
|
||
notifyYouTubeActionError(e, t("playlists.revertFailed"));
|
||
} finally {
|
||
setReverting(false);
|
||
}
|
||
}
|
||
|
||
async function pushToYoutube() {
|
||
if (selectedId == null || !detail || pushing) return;
|
||
setPushing(true);
|
||
try {
|
||
const plan = await api.playlistPushPlan(selectedId);
|
||
const nothingToDo =
|
||
plan.action === "update" &&
|
||
!plan.add_yt &&
|
||
!plan.add_local &&
|
||
!plan.remove_yt &&
|
||
!plan.remove_local &&
|
||
!plan.to_reorder &&
|
||
!plan.rename;
|
||
if (nothingToDo) {
|
||
notify({ level: "info", message: t("playlists.pushUpToDate", { name: plName(detail) }) });
|
||
return;
|
||
}
|
||
if (!plan.affordable) {
|
||
notify({
|
||
level: "warning",
|
||
message: t("playlists.pushNoQuota", {
|
||
left: plan.remaining_today,
|
||
units: plan.units_estimate,
|
||
}),
|
||
});
|
||
return;
|
||
}
|
||
let message: string;
|
||
if (plan.action === "create") {
|
||
message = t("playlists.pushPlanCreate", {
|
||
count: plan.add_yt,
|
||
units: plan.units_estimate,
|
||
left: plan.remaining_today,
|
||
});
|
||
} else {
|
||
// One sentence per side that actually changes; the untouched side gets a short "stays
|
||
// unchanged" reassurance instead of a "+0 / −0" the reader has to decode.
|
||
const here: string[] = [];
|
||
if (plan.add_local) here.push(t("playlists.mergeAddLocal", { count: plan.add_local }));
|
||
if (plan.remove_local)
|
||
here.push(t("playlists.mergeRemoveLocal", { count: plan.remove_local }));
|
||
const yt: string[] = [];
|
||
if (plan.add_yt) yt.push(t("playlists.mergeAddYt", { count: plan.add_yt }));
|
||
if (plan.remove_yt) yt.push(t("playlists.mergeRemoveYt", { count: plan.remove_yt }));
|
||
if (plan.to_reorder) yt.push(t("playlists.mergeReorder", { count: plan.to_reorder }));
|
||
if (plan.rename) yt.push(t("playlists.mergeRename"));
|
||
const sentences = [...here, ...yt];
|
||
if (here.length && !yt.length) sentences.push(t("playlists.mergeYtUnchanged"));
|
||
if (yt.length && !here.length) sentences.push(t("playlists.mergeLocalUnchanged"));
|
||
const quota =
|
||
plan.units_estimate > 0
|
||
? t("playlists.mergeQuota", {
|
||
units: plan.units_estimate,
|
||
left: plan.remaining_today,
|
||
})
|
||
: t("playlists.mergeQuotaFree");
|
||
message = sentences.join(" ") + quota;
|
||
}
|
||
const ok = await confirm({
|
||
title: t("playlists.pushTitle"),
|
||
message,
|
||
confirmLabel: t("playlists.pushConfirm"),
|
||
});
|
||
if (!ok) return;
|
||
const r = await api.pushPlaylist(selectedId);
|
||
refreshAll();
|
||
if (r.failures.length) {
|
||
notify({
|
||
level: "warning",
|
||
message: t("playlists.pushPartial", { count: r.failures.length }),
|
||
});
|
||
} else {
|
||
notify({ level: "success", message: t("playlists.pushDone", { name: plName(detail) }) });
|
||
}
|
||
} catch (e) {
|
||
notifyYouTubeActionError(e, t("playlists.pushFailed"));
|
||
} finally {
|
||
setPushing(false);
|
||
}
|
||
}
|
||
|
||
function onDragEnd(e: DragEndEvent) {
|
||
const { active: a, over } = e;
|
||
if (!over || a.id === over.id || selectedId == null) return;
|
||
const oldIndex = items.findIndex((v) => v.id === a.id);
|
||
const newIndex = items.findIndex((v) => v.id === over.id);
|
||
if (oldIndex < 0 || newIndex < 0) return;
|
||
order.set(arrayMove(items, oldIndex, newIndex)); // onApply persists
|
||
}
|
||
|
||
async function removeItem(video: Video) {
|
||
if (selectedId == null) return;
|
||
const ok = await confirm({
|
||
title: t("playlists.removeItem"),
|
||
message: t("playlists.confirmRemove", { title: video.title }),
|
||
confirmLabel: t("playlists.removeItem"),
|
||
danger: true,
|
||
});
|
||
if (!ok) return;
|
||
// A removal isn't itself undoable, but it no longer THROWS AWAY the reorder history: rebasing
|
||
// drops the item from every snapshot, so the stack stays valid for what's left.
|
||
const next = items.filter((v) => v.id !== video.id);
|
||
order.rebase((list) => list.filter((v) => v.id !== video.id));
|
||
lastSetRef.current = `${selectedId}:${idsKey(next)}`;
|
||
try {
|
||
await api.removeFromPlaylist(selectedId, video.id);
|
||
refreshAll();
|
||
} catch {
|
||
// The optimistic removal above didn't stick — resync from the server to restore the row.
|
||
// api.req already surfaced the error to the user via the global error dialog.
|
||
refreshAll();
|
||
}
|
||
}
|
||
// Kept in a ref so the memoized column callbacks don't rebuild on every state change.
|
||
const removeRef = useRef(removeItem);
|
||
removeRef.current = removeItem;
|
||
|
||
async function moveItemTo(video: Video, target: Playlist) {
|
||
if (selectedId == null) return;
|
||
// Optimistic, exactly like removeItem: from THIS list's point of view a move is a removal, and
|
||
// rebasing keeps the undo stack valid for what's left instead of throwing it away.
|
||
const next = items.filter((v) => v.id !== video.id);
|
||
order.rebase((list) => list.filter((v) => v.id !== video.id));
|
||
lastSetRef.current = `${selectedId}:${idsKey(next)}`;
|
||
try {
|
||
// ONE request. The two-call version (add there, remove here) leaves the video in BOTH lists
|
||
// whenever the second call fails — see the endpoint's docstring.
|
||
await api.moveToPlaylist(selectedId, video.id, target.id);
|
||
notify({
|
||
level: "success",
|
||
message: t("playlists.movedToast", { title: video.title, name: plName(target) }),
|
||
});
|
||
} catch (e) {
|
||
// NOT a silent revert. `req` deliberately leaves 401/403/404 to the caller as control flow, and
|
||
// every move failure a user can actually reach is a 404 (the 400 `same_playlist` case is already
|
||
// impossible — the submenu never offers the current list). So the row used to snap back with no
|
||
// explanation and the shipped moveErrors strings were unreachable (E10 review round 1).
|
||
// ONLY the statuses `req` deliberately leaves to the caller. It already opens the blocking
|
||
// error dialog for 400/409/422 and 5xx and raises the connectivity notice for a bad gateway,
|
||
// so toasting unconditionally reported a transport fault twice (E10 review round 2).
|
||
if (e instanceof HttpError && (e.status === 404 || e.status === 403))
|
||
notify({ level: "error", message: e.detail || t("playlists.moveFailed") });
|
||
}
|
||
// BOTH sides changed, and so did this video's membership. `qk.playlist(selectedId)` is an exact
|
||
// key, so it cannot cover the target — invalidate the whole `["playlist"]` prefix, exactly as
|
||
// AddToPlaylist does for the same reason.
|
||
qc.invalidateQueries({ queryKey: qk.playlists() });
|
||
qc.invalidateQueries({ queryKey: qk.playlist() });
|
||
qc.invalidateQueries({ queryKey: qk.playlistMembership(video.id) });
|
||
}
|
||
|
||
// Keyboard/menu reordering, for the same stored order the drag handle writes — so it goes through
|
||
// `order.set` (undoable + persisted), not a direct API call. Gated by the same rule as the drag
|
||
// handle: a view (sort/group/filter) is not the stored order, so moving "up" inside one would
|
||
// write something the user never saw.
|
||
function moveInOrder(video: Video, to: "top" | "up" | "down" | "bottom") {
|
||
const from = items.findIndex((v) => v.id === video.id);
|
||
if (from < 0) return;
|
||
const target =
|
||
to === "top" ? 0 : to === "bottom" ? items.length - 1 : to === "up" ? from - 1 : from + 1;
|
||
if (target === from || target < 0 || target >= items.length) return;
|
||
order.set(arrayMove(items, from, target)); // onApply persists
|
||
}
|
||
|
||
async function saveRename() {
|
||
if (selectedId == null) return;
|
||
const name = renameValue.trim();
|
||
setRenaming(false);
|
||
if (name && name !== detail?.name) await plActions.rename(selectedId, name);
|
||
}
|
||
|
||
async function deletePlaylist() {
|
||
if (!detail) return;
|
||
// The dialog, the "delete on YouTube too?" branch and the re-selection live in
|
||
// usePlaylistActions — the rail's context menu deletes through the SAME code.
|
||
await plActions.remove(detail);
|
||
}
|
||
|
||
function playerState(id: string, status: string) {
|
||
api.setState(id, status).then(() => {
|
||
qc.invalidateQueries({ queryKey: qk.playlist(selectedId) });
|
||
qc.invalidateQueries({ queryKey: qk.feed() });
|
||
});
|
||
}
|
||
|
||
// Stable identity: PlayerModal's keydown/scroll-lock effect depends on it, so a fresh closure
|
||
// every render re-subscribed those listeners and re-ran focusModal() under the open player.
|
||
const closePlayer = useCallback(() => setPlayingId(null), []);
|
||
|
||
// Name the current view in the user's terms: "Title ↑", "grouped by channel", or both.
|
||
const sortLabel =
|
||
viewSort && !isStoredSort(viewSort)
|
||
? `${columns.find((c) => c.key === viewSort.key)?.header ?? viewSort.key} ${
|
||
viewSort.dir === "asc" ? "↑" : "↓"
|
||
}`
|
||
: null;
|
||
const viewName = groupBy
|
||
? sortLabel
|
||
? t("playlists.viewGroupedAnd", { sort: sortLabel })
|
||
: t("playlists.viewGrouped")
|
||
: (sortLabel ?? "");
|
||
const viewStatus = filterActive
|
||
? t("playlists.viewFiltered", { shown: shown.length, total: items.length })
|
||
: canSaveOrder
|
||
? t("playlists.viewDiffers", { view: viewName })
|
||
: t("playlists.viewMatches", { view: viewName });
|
||
|
||
// Order matters: a built-in list is never reorderable, whatever the view says.
|
||
const dragHint = !canEdit
|
||
? t("playlists.dragBlockedBuiltin")
|
||
: filterActive
|
||
? t("playlists.dragBlockedFilter")
|
||
: t("playlists.dragBlockedSort");
|
||
const playingIndex = playingId ? shown.findIndex((v) => v.id === playingId) : -1;
|
||
|
||
// The row menu, built from the row the user right-clicked. Same item shape (and therefore same
|
||
// rows, same paint, same keyboard model) as any ⋯ ActionMenu in the app.
|
||
const moveTargets = playlists.filter((p) => p.id !== selectedId);
|
||
const storedOrderEditable = canEdit && !viewActive;
|
||
const ctxRow = rowMenu.target;
|
||
const ctxItems: ActionMenuItem[] = !ctxRow
|
||
? []
|
||
: [
|
||
{
|
||
id: "play",
|
||
label: t("card.play"),
|
||
icon: <Play className="w-4 h-4" />,
|
||
onSelect: () => setPlayingId(ctxRow.id),
|
||
},
|
||
...(canEdit
|
||
? ([
|
||
moveTargets.length
|
||
? {
|
||
id: "move",
|
||
label: t("playlists.moveTo"),
|
||
icon: <FolderInput className="w-4 h-4" />,
|
||
separatorBefore: true,
|
||
items: moveTargets.map((pl) => ({
|
||
id: `move-${pl.id}`,
|
||
label: plName(pl),
|
||
icon:
|
||
pl.source === "youtube" || pl.yt_playlist_id ? (
|
||
<Youtube className="w-4 h-4" />
|
||
) : (
|
||
<ListPlus className="w-4 h-4" />
|
||
),
|
||
onSelect: () => void moveItemTo(ctxRow, pl),
|
||
})),
|
||
}
|
||
: // Kept visible and disabled rather than dropped: an action that vanishes teaches
|
||
// nobody why. KNOWN GAP: the `title` that carries the why currently reaches nobody
|
||
// either — see ActionMenu's `title` prop, where the two failed attempts at fixing
|
||
// that are recorded. The row is honest about being off; it is not yet honest about
|
||
// the reason.
|
||
{
|
||
id: "move",
|
||
label: t("playlists.moveTo"),
|
||
icon: <FolderInput className="w-4 h-4" />,
|
||
separatorBefore: true,
|
||
disabled: true,
|
||
title: t("playlists.moveNoTargets"),
|
||
onSelect: () => {},
|
||
},
|
||
...(
|
||
[
|
||
["top", t("playlists.orderTop"), <ArrowUpToLine className="w-4 h-4" />],
|
||
["up", t("playlists.orderUp"), <ArrowUp className="w-4 h-4" />],
|
||
["down", t("playlists.orderDown"), <ArrowDown className="w-4 h-4" />],
|
||
["bottom", t("playlists.orderBottom"), <ArrowDownToLine className="w-4 h-4" />],
|
||
] as const
|
||
).map(([to, label, icon], i) => ({
|
||
id: `order-${to}`,
|
||
label,
|
||
icon,
|
||
separatorBefore: i === 0,
|
||
// Same gate as the drag handle. NOTE the drag handle explains itself and this row
|
||
// does not: the handle is `aria-disabled` (focusable, tooltip-capable) while a menu
|
||
// row cannot be — see ActionMenu's `title` prop for why.
|
||
disabled: !storedOrderEditable,
|
||
title: storedOrderEditable ? undefined : dragHint,
|
||
onSelect: () => moveInOrder(ctxRow, to),
|
||
})),
|
||
{
|
||
id: "remove",
|
||
label: t("playlists.removeItem"),
|
||
icon: <X className="w-4 h-4" />,
|
||
separatorBefore: true,
|
||
danger: true,
|
||
onSelect: () => void removeItem(ctxRow),
|
||
},
|
||
] satisfies ActionMenuItem[])
|
||
: []),
|
||
];
|
||
|
||
if (selectedId == null) {
|
||
return <div className="text-muted text-sm p-4">{t("playlists.pickOne")}</div>;
|
||
}
|
||
// The page used to render "Loading…" forever when the detail query failed — an error read as a
|
||
// slow network that never arrived.
|
||
if (detailQuery.isError) {
|
||
return (
|
||
<div className="text-sm p-4 flex flex-col items-start gap-3">
|
||
<span className="inline-flex items-center gap-2 text-muted">
|
||
<AlertTriangle className="w-4 h-4 text-danger" />
|
||
{t("playlists.loadFailed")}
|
||
</span>
|
||
<Button variant="outline" size="xs" onClick={() => detailQuery.refetch()}>
|
||
{t("common.retry")}
|
||
</Button>
|
||
</div>
|
||
);
|
||
}
|
||
if (!detail) {
|
||
return <div className="text-muted text-sm p-4">{t("playlists.loading")}</div>;
|
||
}
|
||
|
||
return (
|
||
// No top padding: the sticky column header must sit flush at the scroller top so it doesn't
|
||
// shift up when `position: sticky` engages on the first scroll (the fixed toolbar band above
|
||
// gives the breathing room). Same reason as the channel table — see Channels.tsx.
|
||
<div className="px-4 pb-4">
|
||
{/* Header (title, actions, view controls) is fixed chrome — it portals into the shell's
|
||
fixed band, so only the video list scrolls. */}
|
||
<PageToolbar>
|
||
{/* Two tight rows beside a small cover: title + actions on the first, the meta line and the
|
||
view controls sharing the second. This band is FIXED chrome (it never scrolls), so every
|
||
row it sheds is list height won back — the old layout stacked three rows next to the
|
||
cover plus a fourth block under it, for roughly twice this height. */}
|
||
<div className="px-4 py-2 max-w-5xl mx-auto">
|
||
<div className="flex gap-3 items-center">
|
||
<div className="w-20 h-11.25 rounded-lg bg-card overflow-hidden shrink-0">
|
||
{items[0]?.thumbnail_url && (
|
||
<img src={items[0].thumbnail_url} alt="" className="w-full h-full object-cover" />
|
||
)}
|
||
</div>
|
||
<div className="min-w-0 flex-1">
|
||
<div className="flex items-center gap-2 min-w-0">
|
||
{renaming ? (
|
||
<input
|
||
autoFocus
|
||
value={renameValue}
|
||
onChange={(e) => setRenameValue(e.target.value)}
|
||
onBlur={saveRename}
|
||
onKeyDown={(e) => {
|
||
if (e.key === "Enter") saveRename();
|
||
if (e.key === "Escape") setRenaming(false);
|
||
}}
|
||
aria-label={t("playlists.rename")}
|
||
className="min-w-0 flex-1 text-lg font-semibold bg-surface border border-border rounded-md px-2 py-0.5 focus:outline-hidden focus:ring-2 focus:ring-accent/40"
|
||
/>
|
||
) : (
|
||
<>
|
||
<h2 className="text-lg font-semibold truncate">{plName(detail)}</h2>
|
||
{editable && (
|
||
<button
|
||
onClick={() => {
|
||
setRenameValue(detail.name);
|
||
setRenaming(true);
|
||
}}
|
||
title={t("playlists.rename")}
|
||
aria-label={t("playlists.rename")}
|
||
className="shrink-0 text-muted hover:text-fg"
|
||
>
|
||
<Pencil className="w-3.5 h-3.5" />
|
||
</button>
|
||
)}
|
||
{detail.yt_playlist_id && (
|
||
<a
|
||
href={`https://www.youtube.com/playlist?list=${detail.yt_playlist_id}`}
|
||
target="_blank"
|
||
rel="noreferrer noopener"
|
||
title={t("playlists.openOnYoutube")}
|
||
aria-label={t("playlists.openOnYoutube")}
|
||
className="shrink-0 text-muted hover:text-accent"
|
||
>
|
||
<ExternalLink className="w-3.5 h-3.5" />
|
||
</a>
|
||
)}
|
||
</>
|
||
)}
|
||
<div className="ml-auto flex gap-1.5 items-center shrink-0">
|
||
{linked && detail.dirty && (
|
||
<span
|
||
title={t("playlists.unsyncedHint")}
|
||
className="inline-flex items-center gap-1.5 text-2xs text-accent mr-1"
|
||
>
|
||
<span className="w-1.5 h-1.5 rounded-full bg-accent" />
|
||
{t("playlists.unsynced")}
|
||
</span>
|
||
)}
|
||
<button
|
||
onClick={() => shown.length && setPlayingId(shown[0]!.id)}
|
||
disabled={!shown.length}
|
||
className="inline-flex items-center gap-1.5 text-xs font-semibold px-3 py-1.5 rounded-lg btn-primary disabled:opacity-40 transition"
|
||
>
|
||
<Play className="w-3.5 h-3.5 fill-current" /> {t("playlists.playAll")}
|
||
</button>
|
||
{editable && canWrite && (
|
||
<button
|
||
onClick={pushToYoutube}
|
||
disabled={pushing}
|
||
title={linked ? t("playlists.pushToYoutube") : t("playlists.exportToYoutube")}
|
||
aria-label={
|
||
linked ? t("playlists.pushToYoutube") : t("playlists.exportToYoutube")
|
||
}
|
||
className={`inline-flex items-center justify-center p-2 rounded-lg border transition disabled:opacity-40 ${
|
||
detail.dirty
|
||
? "border-accent text-accent hover:bg-accent/10"
|
||
: "border-border text-muted hover:text-fg hover:border-accent"
|
||
}`}
|
||
>
|
||
{pushing ? (
|
||
<RefreshCw className="w-3.5 h-3.5 animate-spin" />
|
||
) : linked ? (
|
||
<Youtube className="w-3.5 h-3.5" />
|
||
) : (
|
||
<Upload className="w-3.5 h-3.5" />
|
||
)}
|
||
</button>
|
||
)}
|
||
{linked && detail.dirty && (
|
||
<Button
|
||
variant="outline"
|
||
size="icon-sm"
|
||
onClick={revertToYoutube}
|
||
disabled={reverting}
|
||
title={t("playlists.revert")}
|
||
aria-label={t("playlists.revert")}
|
||
>
|
||
<RotateCcw className={`w-3.5 h-3.5 ${reverting ? "animate-spin" : ""}`} />
|
||
</Button>
|
||
)}
|
||
{editable && (
|
||
<Button
|
||
variant="outline-danger"
|
||
size="icon-sm"
|
||
onClick={deletePlaylist}
|
||
title={t("playlists.delete")}
|
||
aria-label={t("playlists.delete")}
|
||
icon={<Trash2 className="w-3.5 h-3.5" />}
|
||
/>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex items-center gap-2 mt-1 flex-wrap">
|
||
<span className="text-xs text-muted">
|
||
{t("playlists.itemCount", { count: items.length })}
|
||
{totalSeconds > 0 && ` · ${formatRuntime(totalSeconds)}`}
|
||
{filterActive && ` · ${t("playlists.filteredCount", { count: shown.length })}`}
|
||
</span>
|
||
{(items.length > 1 || viewActive) && (
|
||
<>
|
||
<span aria-hidden="true" className="text-xs text-muted/40">
|
||
·
|
||
</span>
|
||
<label className="inline-flex items-center gap-1.5 text-xs text-muted cursor-pointer select-none">
|
||
<input
|
||
type="checkbox"
|
||
checked={groupBy}
|
||
onChange={(e) => setGroupBy(e.target.checked)}
|
||
className="accent-accent"
|
||
/>
|
||
{t("playlists.groupByChannel")}
|
||
</label>
|
||
{viewActive && (
|
||
<button
|
||
onClick={clearView}
|
||
className="text-xs text-muted hover:text-accent underline underline-offset-2 transition"
|
||
>
|
||
{t("playlists.clearView")}
|
||
</button>
|
||
)}
|
||
{canSaveOrder && (
|
||
<Button
|
||
variant="outline-accent"
|
||
size="xs"
|
||
onClick={saveOrder}
|
||
icon={<Check className="w-3.5 h-3.5" />}
|
||
>
|
||
{t("playlists.saveOrder")}
|
||
</Button>
|
||
)}
|
||
{/* ONE sentence that names the state. Three loose texts used to pile up here
|
||
(reset link + save hint + "reordering is off"), and none of them answered the
|
||
question a user actually has — "did I just change my playlist?". Worse,
|
||
sorting a list whose stored order ALREADY matches the sort produced a
|
||
warning, no Save button and no visible change, which reads as a malfunction.
|
||
Now the line says which of the three situations you are in; the disabled grip
|
||
still explains itself on hover/focus. */}
|
||
{viewActive && <span className="text-2xs text-muted/80">{viewStatus}</span>}
|
||
{canEdit && (
|
||
<div className="ml-auto">
|
||
<UndoToolbar
|
||
canUndo={order.canUndo}
|
||
canRedo={order.canRedo}
|
||
onUndo={order.undo}
|
||
onRedo={order.redo}
|
||
/>
|
||
</div>
|
||
)}
|
||
</>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</PageToolbar>
|
||
|
||
{items.length === 0 ? (
|
||
<div className="text-sm text-muted grid place-items-center text-center py-12">
|
||
<div>
|
||
<ListPlus className="w-6 h-6 mx-auto mb-2 opacity-60" />
|
||
{t("playlists.empty")}
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<DndContext
|
||
sensors={sensors}
|
||
collisionDetection={closestCenter}
|
||
onDragEnd={onDragEnd}
|
||
// dnd-kit's defaults are hardcoded English. They were harmless while only a pointer could
|
||
// drag; now that the keyboard can, they ARE the instructions for the feature.
|
||
accessibility={{ screenReaderInstructions, announcements }}
|
||
>
|
||
{/* Not clipped, so the header's filter popovers can overflow the table box. */}
|
||
<div className="max-w-5xl mx-auto">
|
||
{/* table-fixed, not auto: every column but the title has a declared width, so the
|
||
title absorbs the rest and its `truncate` works. Auto layout sizes columns from
|
||
min-content, and a nowrap title cell's min-content is the entire title. */}
|
||
<table className="w-full table-fixed border-collapse text-sm">
|
||
<ColumnHead
|
||
columns={columns}
|
||
sort={viewSort}
|
||
onToggleSort={toggleSort}
|
||
filters={filters}
|
||
onFilter={applyFilter}
|
||
/>
|
||
<SortableContext
|
||
items={shown.map((v) => v.id)}
|
||
strategy={verticalListSortingStrategy}
|
||
>
|
||
<tbody>
|
||
{shown.map((v) => (
|
||
<Row
|
||
key={v.id}
|
||
video={v}
|
||
columns={columns}
|
||
dragDisabled={!canEdit || viewActive}
|
||
dragHint={dragHint}
|
||
menuProps={rowMenu.triggerProps(v)}
|
||
/>
|
||
))}
|
||
</tbody>
|
||
</SortableContext>
|
||
</table>
|
||
{shown.length === 0 && (
|
||
<div className="text-muted py-8 text-center text-sm">
|
||
{t("playlists.noneMatchFilter")}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</DndContext>
|
||
)}
|
||
|
||
{/* One surface for the whole table, outside the rows — it anchors to the pointer, not the row. */}
|
||
<ContextMenu menu={rowMenu} ariaLabel={t("playlists.rowMenu")} items={ctxItems} />
|
||
|
||
{playingIndex >= 0 && (
|
||
<Suspense fallback={null}>
|
||
<PlayerModal
|
||
video={shown[playingIndex]!}
|
||
queue={shown}
|
||
startIndex={playingIndex}
|
||
startAt={null}
|
||
onClose={closePlayer}
|
||
onState={playerState}
|
||
/>
|
||
</Suspense>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|