peter/siftlode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(playlists): YouTube-mirrored playlists in the UI (read-only) + sync button

Browse source 
Show YouTube-sourced playlists with a YouTube icon; they're read-only for now (no
rename/delete/reorder/remove, excluded from the add-to-playlist popover) with a
'synced from YouTube' note — editing comes with the write-back phase. Add a 'Sync from
YouTube' button in the Playlists rail (api.syncYoutubePlaylists) with a result toast.
Trilingual strings.
This commit is contained in:
npeter83 2026-06-15 19:37:17 +02:00
parent 240b6fb611
commit 12339009b5
6 changed files with 92 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

4
frontend/src/components/AddToPlaylist.tsx
View file

@ -118,7 +118,9 @@ export default function AddToPlaylist({
}
}
const lists = membership.data ?? [];
// YouTube-mirrored playlists are read-only until the write-back phase, so they can't be
// added to here yet.
const lists = (membership.data ?? []).filter((pl) => pl.source !== "youtube");
return (
<>

97
frontend/src/components/Playlists.tsx
View file

@ -23,27 +23,32 @@ import {
Pencil,
Play,
Plus,
RefreshCw,
Trash2,
X,
Youtube,
} from "lucide-react";
import { api, type Playlist, type Video } from "../lib/api";
import { formatDuration } from "../lib/format";
import { notify } from "../lib/notifications";
import PlayerModal from "./PlayerModal";
import { useConfirm } from "./ConfirmProvider";
function Row({
video,
index,
readOnly,
onPlay,
onRemove,
}: {
video: Video;
index: number;
readOnly?: boolean;
onPlay: () => void;
onRemove: () => void;
}) {
const { attributes, listeners, setNodeRef, transform, transition, isDragging } =
useSortable({ id: video.id });
useSortable({ id: video.id, disabled: readOnly });
const style = {
transform: CSS.Transform.toString(transform),
transition,
@ -55,14 +60,18 @@ function Row({
style={style}
className="flex items-center gap-2.5 p-2 rounded-lg border border-border bg-card"
>
<button
{...attributes}
{...listeners}
className="text-muted hover:text-fg cursor-grab active:cursor-grabbing"
aria-label="reorder"
>
<GripVertical className="w-4 h-4" />
</button>
{readOnly ? (
<span className="w-4" />
) : (
<button
{...attributes}
{...listeners}
className="text-muted hover:text-fg cursor-grab active:cursor-grabbing"
aria-label="reorder"
>
<GripVertical className="w-4 h-4" />
</button>
)}
<span className="text-xs text-muted w-4 text-center tabular-nums">{index + 1}</span>
<button
onClick={onPlay}
@ -84,14 +93,16 @@ function Row({
{formatDuration(video.duration_seconds)}
</span>
)}
<button
onClick={onRemove}
title="remove"
className="text-muted hover:text-fg p-1"
aria-label="remove from playlist"
>
<X className="w-4 h-4" />
</button>
{!readOnly && (
<button
onClick={onRemove}
title="remove"
className="text-muted hover:text-fg p-1"
aria-label="remove from playlist"
>
<X className="w-4 h-4" />
</button>
)}
</div>
);
}
@ -149,6 +160,25 @@ export default function Playlists() {
const plName = (p: { kind: string; name: string }) =>
p.kind === "watch_later" ? t("playlists.watchLater") : p.name;
const builtin = detail?.kind === "watch_later";
// YouTube-mirrored playlists are read-only here until the write-back phase.
const mirrored = detail?.source === "youtube";
const editable = !builtin && !mirrored;
const [syncing, setSyncing] = useState(false);
async function syncYoutube() {
if (syncing) return;
setSyncing(true);
try {
const r = await api.syncYoutubePlaylists();
qc.invalidateQueries({ queryKey: ["playlists"] });
qc.invalidateQueries({ queryKey: ["playlist"] });
notify({ message: t("playlists.syncedToast", { count: r.synced }) });
} catch {
notify({ level: "warning", message: t("playlists.syncFailed") });
} finally {
setSyncing(false);
}
}
const createMut = useMutation({
mutationFn: (name: string) => api.createPlaylist(name),
@ -166,7 +196,7 @@ export default function Playlists() {
async function onDragEnd(e: DragEndEvent) {
const { active: a, over } = e;
if (!over || a.id === over.id || selectedId == null) return;
if (!over || a.id === over.id || selectedId == null || mirrored) 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;
@ -222,7 +252,19 @@ export default function Playlists() {
return (
<div className="flex h-full min-h-0">
<aside className="w-64 shrink-0 border-r border-border bg-surface/40 overflow-y-auto p-3">
<div className="text-sm font-semibold mb-2">{t("playlists.title")}</div>
<div className="flex items-center justify-between mb-2">
<span className="text-sm font-semibold">{t("playlists.title")}</span>
<button
onClick={syncYoutube}
disabled={syncing}
title={t("playlists.syncYoutube")}
aria-label={t("playlists.syncYoutube")}
className="inline-flex items-center gap-1 text-[11px] text-muted hover:text-accent disabled:opacity-40 transition"
>
<RefreshCw className={`w-3.5 h-3.5 ${syncing ? "animate-spin" : ""}`} />
<Youtube className="w-3.5 h-3.5" />
</button>
</div>
{playlists.length === 0 && !listQuery.isLoading && (
<div className="text-xs text-muted px-1 py-2">{t("playlists.noneYet")}</div>
)}
@ -243,7 +285,12 @@ export default function Playlists() {
)}
</div>
<div className="min-w-0">
<div className="text-[13px] text-fg truncate">{plName(pl)}</div>
<div className="flex items-center gap-1 text-[13px] text-fg">
<span className="truncate">{plName(pl)}</span>
{pl.source === "youtube" && (
<Youtube className="w-3 h-3 shrink-0 text-muted" />
)}
</div>
<div className="text-[11px] text-muted">
{t("playlists.itemCount", { count: pl.item_count })}
</div>
@ -301,7 +348,7 @@ export default function Playlists() {
) : (
<div className="flex items-center gap-2">
<h2 className="text-lg font-semibold truncate">{plName(detail)}</h2>
{!builtin && (
{editable && (
<button
onClick={() => {
setRenameValue(detail.name);
@ -326,7 +373,7 @@ export default function Playlists() {
>
<Play className="w-3.5 h-3.5 fill-current" /> {t("playlists.playAll")}
</button>
{!builtin && (
{editable && (
<button
onClick={deletePlaylist}
className="inline-flex items-center gap-1.5 text-xs px-3 py-1.5 rounded-lg border border-border text-muted hover:text-fg hover:border-accent transition"
@ -334,6 +381,11 @@ export default function Playlists() {
<Trash2 className="w-3.5 h-3.5" /> {t("playlists.delete")}
</button>
)}
{mirrored && (
<span className="inline-flex items-center gap-1.5 text-[11px] px-2.5 py-1.5 rounded-lg text-muted">
<Youtube className="w-3.5 h-3.5" /> {t("playlists.ytReadonly")}
</span>
)}
</div>
</div>
</div>
@ -361,6 +413,7 @@ export default function Playlists() {
key={v.id}
video={v}
index={i}
readOnly={mirrored}
onPlay={() => setPlayingIndex(i)}
onRemove={() => removeItem(v.id)}
/>