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

feat(downloads): editable details with clickable channel and extra links

Browse source 
The edit (pencil) action now edits a download's full display metadata — title,
channel name, channel link and any number of extra reference URLs — instead of
just the name. The channel and links render as clickable links on the library
card, and the channel link is auto-filled from the source (yt-dlp channel_url)
when available. Shared watch pages resolve the same per-download overrides, so a
rename/channel/link edit is reflected on the public /watch page too, with every
link clickable.

Adds migration 0049 (media_assets.uploader_url; download_jobs.display_uploader,
display_uploader_url, extra_links) and generalizes the rename endpoint into a
metadata update with URL validation. EN/HU/DE strings included.
This commit is contained in:
npeter83 2026-07-07 20:19:18 +02:00
parent 04d35375ed
commit 8c86c6b4a8
12 changed files with 327 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

128
frontend/src/components/DownloadCenter.tsx
View file

@ -78,6 +78,15 @@ function jobTitle(job: DownloadJob): string {
return job.display_name || job.asset?.title || job.source_ref;
}
// The channel to show under the title: a user override wins over the auto-extracted asset value.
// `url` is null for sources without a channel link (e.g. reddit) — then it renders as plain text.
function jobChannel(job: DownloadJob): { name: string; url: string | null } {
return {
name: job.display_uploader || job.asset?.uploader || job.source_ref,
url: job.display_uploader_url || job.asset?.uploader_url || null,
};
}
function IconBtn({
onClick,
title,
@ -148,6 +157,27 @@ function SourceRef({ url }: { url: string }) {
);
}
// Channel under the title — a clickable link when a channel URL is known, plain text otherwise.
function ChannelLine({ job }: { job: DownloadJob }) {
const { name, url } = jobChannel(job);
if (url) {
return (
<div className="text-xs mt-0.5 truncate">
<a
href={url}
target="_blank"
rel="noopener noreferrer"
title={url}
className="text-muted hover:text-accent hover:underline"
>
{name}
</a>
</div>
);
}
return <div className="text-xs text-muted truncate mt-0.5">{name}</div>;
}
function DownloadRow({
job,
children,
@ -169,9 +199,7 @@ function DownloadRow({
)}
<span className="truncate">{jobTitle(job)}</span>
</div>
<div className="text-xs text-muted truncate mt-0.5">
{job.asset?.uploader || job.source_ref}
</div>
<ChannelLine job={job} />
<div className="flex items-center gap-2 mt-1 text-xs">
<StatusPill job={job} />
{job.asset?.size_bytes ? <span className="text-muted">· {formatBytes(job.asset.size_bytes)}</span> : null}
@ -179,6 +207,7 @@ function DownloadRow({
{job.error ? <span className="text-red-400 truncate">· {job.error}</span> : null}
</div>
{job.source_url && <SourceRef url={job.source_url} />}
{job.extra_links?.map((url) => <SourceRef key={url} url={url} />)}
{running && (
<div className="mt-1.5">
{job.phase && !DOWNLOAD_PHASES.includes(job.phase) ? (
@ -208,30 +237,89 @@ function DownloadRow({
// --- Rename + Share small modals ------------------------------------------------------------
function RenameModal({ job, onClose }: { job: DownloadJob; onClose: () => void }) {
// Edit a download's display metadata: title, channel (name + link), and extra reference links.
// All are display-only overrides — the on-disk file is never renamed.
function MetaEditModal({ job, onClose }: { job: DownloadJob; onClose: () => void }) {
const { t } = useTranslation();
const qc = useQueryClient();
const [name, setName] = useState(jobTitle(job));
const [name, setName] = useState(job.display_name || job.asset?.title || "");
const [channel, setChannel] = useState(job.display_uploader || job.asset?.uploader || "");
const [channelUrl, setChannelUrl] = useState(job.display_uploader_url || job.asset?.uploader_url || "");
// Editable extra-link rows; keep one blank row so there's always somewhere to type.
const [links, setLinks] = useState<string[]>(() => [...(job.extra_links ?? []), ""]);
const setLink = (i: number, v: string) => setLinks((ls) => ls.map((l, j) => (j === i ? v : l)));
const addLink = () => setLinks((ls) => [...ls, ""]);
const removeLink = (i: number) => setLinks((ls) => ls.filter((_, j) => j !== i));
const save = useMutation({
mutationFn: () => api.renameDownload(job.id, name.trim()),
mutationFn: () =>
api.updateDownloadMeta(job.id, {
display_name: name.trim(),
display_uploader: channel.trim(),
display_uploader_url: channelUrl.trim(),
extra_links: links.map((l) => l.trim()).filter(Boolean),
}),
onSuccess: () => {
qc.invalidateQueries({ queryKey: ["downloads"] });
onClose();
},
});
return (
<Modal title={t("downloads.rename.title")} onClose={onClose}>
<label className="block text-sm font-medium mb-1">{t("downloads.rename.label")}</label>
<input value={name} onChange={(e) => setName(e.target.value)} className={inputCls} autoFocus />
<p className="text-xs text-muted mt-2 mb-4">{t("downloads.rename.hint")}</p>
<div className="flex justify-end">
<button
onClick={() => save.mutate()}
disabled={!name.trim() || save.isPending}
className="px-3 py-1.5 rounded-lg text-sm font-medium bg-accent text-accent-fg hover:opacity-90 disabled:opacity-50 transition"
>
{t("downloads.rename.save")}
</button>
<Modal title={t("downloads.edit.title")} onClose={onClose}>
<div className="space-y-3">
<label className="block">
<span className="block text-sm font-medium mb-1">{t("downloads.edit.name")}</span>
<input value={name} onChange={(e) => setName(e.target.value)} className={inputCls} autoFocus />
</label>
<label className="block">
<span className="block text-sm font-medium mb-1">{t("downloads.edit.channel")}</span>
<input value={channel} onChange={(e) => setChannel(e.target.value)} className={inputCls} />
</label>
<label className="block">
<span className="block text-sm font-medium mb-1">{t("downloads.edit.channelUrl")}</span>
<input
value={channelUrl}
onChange={(e) => setChannelUrl(e.target.value)}
placeholder="https://…"
className={inputCls}
/>
</label>
<div>
<span className="block text-sm font-medium mb-1">{t("downloads.edit.extraLinks")}</span>
<div className="space-y-2">
{links.map((l, i) => (
<div key={i} className="flex gap-2">
<input
value={l}
onChange={(e) => setLink(i, e.target.value)}
placeholder="https://…"
className={inputCls}
/>
<IconBtn onClick={() => removeLink(i)} title={t("downloads.edit.removeLink")} danger>
<Trash2 className="w-4 h-4" />
</IconBtn>
</div>
))}
</div>
<button
onClick={addLink}
className="mt-2 inline-flex items-center gap-1.5 text-sm text-muted hover:text-fg transition"
>
<Plus className="w-4 h-4" /> {t("downloads.edit.addLink")}
</button>
</div>
<p className="text-xs text-muted">{t("downloads.edit.hint")}</p>
<div className="flex justify-end">
<button
onClick={() => save.mutate()}
disabled={!name.trim() || save.isPending}
className="px-3 py-1.5 rounded-lg text-sm font-medium bg-accent text-accent-fg hover:opacity-90 disabled:opacity-50 transition"
>
{t("downloads.edit.save")}
</button>
</div>
</div>
</Modal>
);
@ -579,7 +667,7 @@ export default function DownloadCenter({ me }: { me: Me }) {
<Scissors className="w-4 h-4" />
</IconBtn>
)}
<IconBtn onClick={() => setRenameJob(job)} title={t("downloads.actions.rename")}>
<IconBtn onClick={() => setRenameJob(job)} title={t("downloads.actions.editDetails")}>
<Pencil className="w-4 h-4" />
</IconBtn>
<IconBtn onClick={() => setShareJob(job)} title={t("downloads.actions.share")}>
@ -643,7 +731,7 @@ export default function DownloadCenter({ me }: { me: Me }) {
/>
)}
{manage && <ProfileEditor onClose={() => setManage(false)} />}
{renameJob && <RenameModal job={renameJob} onClose={() => setRenameJob(null)} />}
{renameJob && <MetaEditModal job={renameJob} onClose={() => setRenameJob(null)} />}
{shareJob && <ShareDialog job={shareJob} onClose={() => setShareJob(null)} />}
{editJob && <VideoEditor job={editJob} onClose={() => setEditJob(null)} />}
</Suspense>

51
frontend/src/components/WatchPage.tsx
View file

@ -1,5 +1,5 @@
import { useEffect, useState } from "react";
import { Download, Lock, PlayCircle } from "lucide-react";
import { Download, Link2, Lock, PlayCircle } from "lucide-react";
// Standalone, login-free video page for a shared /watch/<token> link. Rendered OUTSIDE the app
// tree (no auth, no providers) — like the /privacy and /terms pages. Uses plain fetch and a tiny
@ -9,11 +9,24 @@ type Meta = {
needs_password: boolean;
title?: string | null;
uploader?: string | null;
uploader_url?: string | null;
source_url?: string | null;
extra_links?: string[];
duration_s?: number | null;
allow_download?: boolean;
file_url?: string;
};
// Compact display of a URL: drop the protocol + trailing slash so it fits on one line.
function displayUrl(url: string): string {
try {
const u = new URL(url);
return (u.host + u.pathname + u.search).replace(/\/$/, "");
} catch {
return url;
}
}
const STR = {
en: {
loading: "Loading…",
@ -24,6 +37,7 @@ const STR = {
watch: "Watch",
wrong: "Wrong password.",
download: "Download",
links: "Links",
brand: "Shared via Siftlode",
},
hu: {
@ -35,6 +49,7 @@ const STR = {
watch: "Megnézem",
wrong: "Hibás jelszó.",
download: "Letöltés",
links: "Linkek",
brand: "Megosztva a Siftlode-dal",
},
de: {
@ -46,6 +61,7 @@ const STR = {
watch: "Ansehen",
wrong: "Falsches Passwort.",
download: "Herunterladen",
links: "Links",
brand: "Geteilt über Siftlode",
},
} as const;
@ -165,7 +181,19 @@ export default function WatchPage() {
<div className="mt-3 flex items-start gap-3">
<div className="min-w-0 flex-1">
<h1 className="text-lg font-semibold leading-snug">{meta.title || "Video"}</h1>
{meta.uploader && <div className="text-sm text-slate-400">{meta.uploader}</div>}
{meta.uploader &&
(meta.uploader_url ? (
<a
href={meta.uploader_url}
target="_blank"
rel="noopener noreferrer"
className="text-sm text-slate-400 hover:text-teal-400 hover:underline"
>
{meta.uploader}
</a>
) : (
<div className="text-sm text-slate-400">{meta.uploader}</div>
))}
</div>
{meta.allow_download && (
<a
@ -176,6 +204,25 @@ export default function WatchPage() {
</a>
)}
</div>
{(meta.source_url || (meta.extra_links && meta.extra_links.length > 0)) && (
<div className="mt-3 flex flex-col gap-1.5">
{[meta.source_url, ...(meta.extra_links ?? [])]
.filter((u): u is string => !!u)
.map((url) => (
<a
key={url}
href={url}
target="_blank"
rel="noopener noreferrer"
title={url}
className="inline-flex items-center gap-1.5 text-sm text-slate-400 hover:text-teal-400 hover:underline min-w-0"
>
<Link2 className="w-3.5 h-3.5 shrink-0" />
<span className="truncate">{displayUrl(url)}</span>
</a>
))}
</div>
)}
</div>
)}
</div>

12
frontend/src/i18n/locales/de/downloads.json
View file

@ -56,6 +56,7 @@
"retry": "Erneut",
"download": "Auf mein Gerät speichern",
"rename": "Umbenennen",
"editDetails": "Details bearbeiten",
"share": "Teilen",
"edit": "Bearbeiten / schneiden",
"removeShared": "Aus meiner Liste entfernen"
@ -83,6 +84,17 @@
"hint": "Ändert nur den angezeigten und beim Speichern verwendeten Namen — die gespeicherte Datei behält ihren Namen.",
"save": "Speichern"
},
"edit": {
"title": "Details bearbeiten",
"name": "Titel",
"channel": "Kanal",
"channelUrl": "Kanal-Link",
"extraLinks": "Weitere Links",
"addLink": "Link hinzufügen",
"removeLink": "Link entfernen",
"hint": "Nur Anzeige — die gespeicherte Datei behält ihren Namen. Kanal und Links erscheinen auch auf der Karte und auf geteilten Wiedergabeseiten.",
"save": "Speichern"
},
"share": {
"title": "Download teilen",
"label": "E-Mail des Empfängers",

12
frontend/src/i18n/locales/en/downloads.json
View file

@ -56,6 +56,7 @@
"retry": "Retry",
"download": "Save to my device",
"rename": "Rename",
"editDetails": "Edit details",
"share": "Share",
"edit": "Edit / trim",
"removeShared": "Remove from my list"
@ -83,6 +84,17 @@
"hint": "Only changes the name you see and download with — the stored file keeps its own name.",
"save": "Save"
},
"edit": {
"title": "Edit details",
"name": "Title",
"channel": "Channel",
"channelUrl": "Channel link",
"extraLinks": "Extra links",
"addLink": "Add link",
"removeLink": "Remove link",
"hint": "Display only — the stored file keeps its own name. The channel and links also show on the card and on shared watch pages.",
"save": "Save"
},
"share": {
"title": "Share download",
"label": "Recipient email",

12
frontend/src/i18n/locales/hu/downloads.json
View file

@ -56,6 +56,7 @@
"retry": "Újra",
"download": "Mentés a gépemre",
"rename": "Átnevezés",
"editDetails": "Adatok szerkesztése",
"share": "Megosztás",
"edit": "Szerkesztés / vágás",
"removeShared": "Eltávolítás a listámból"
@ -83,6 +84,17 @@
"hint": "Csak a megjelenített és letöltéskor használt nevet módosítja — a tárolt fájl neve nem változik.",
"save": "Mentés"
},
"edit": {
"title": "Adatok szerkesztése",
"name": "Cím",
"channel": "Csatorna",
"channelUrl": "Csatorna link",
"extraLinks": "További linkek",
"addLink": "Link hozzáadása",
"removeLink": "Link eltávolítása",
"hint": "Csak megjelenítés — a tárolt fájl neve nem változik. A csatorna és a linkek a kártyán és a megosztott lejátszó oldalon is megjelennek.",
"save": "Mentés"
},
"share": {
"title": "Letöltés megosztása",
"label": "Címzett e-mail címe",

17
frontend/src/lib/api.ts
View file

@ -851,6 +851,7 @@ export interface DownloadAsset {
status: string;
title: string | null;
uploader: string | null;
uploader_url: string | null; // yt-dlp channel/uploader page URL (auto; null for e.g. reddit)
upload_date: string | null;
duration_s: number | null;
size_bytes: number | null;
@ -903,6 +904,9 @@ export interface DownloadJob {
profile_id: number | null;
spec: DownloadSpec;
display_name: string | null;
display_uploader: string | null; // user override of the channel name
display_uploader_url: string | null; // user override of the channel link
extra_links: string[]; // extra reference URLs (beyond source_url)
job_kind?: string; // "download" (default) | "edit"
source_job_id?: number | null; // parent download an edit was cut from
edit_spec?: EditSpec | null;
@ -1410,8 +1414,17 @@ export const api = {
cancelDownload: (id: number): Promise<DownloadJob> =>
req(`/api/downloads/${id}/cancel`, { method: "POST" }, { idempotent: true }),
deleteDownload: (id: number) => req(`/api/downloads/${id}`, { method: "DELETE" }),
renameDownload: (id: number, display_name: string): Promise<DownloadJob> =>
req(`/api/downloads/${id}`, { method: "PATCH", body: JSON.stringify({ display_name }) }),
// Update a download's display metadata (title / channel name+link / extra reference URLs).
updateDownloadMeta: (
id: number,
meta: {
display_name?: string;
display_uploader?: string;
display_uploader_url?: string;
extra_links?: string[];
}
): Promise<DownloadJob> =>
req(`/api/downloads/${id}`, { method: "PATCH", body: JSON.stringify(meta) }),
shareDownload: (id: number, email: string): Promise<{ shared_with: string }> =>
req(`/api/downloads/${id}/share`, { method: "POST", body: JSON.stringify({ email }) }),
unshareDownload: (id: number, email: string) =>