+ Dry run is on, so the changes are recorded as planned in Activity. No files change. }
+
+ )}
+
+ {folder} · {songs.length} songs{blocked.length > 0 && `, ${blocked.length} not editable`}
+
+
+
+
+
+ {picking && !art && (
+
+ {art ? setArt(null)} /> :
+
+
+ )}
+ OGG/Opus songs can't hold embedded art; they use the folder's cover.jpg.
+ )} +
+ {ALBUM_FIELDS.map((f) => {
+ const changed = albumChanged.includes(f.id);
+ return (
+
+ );
+ })}
+
+
+
+ )}
+
+
+
+
+ {shared > 0 && (
+
+ Tracks
+
+
+
+
+ {rowChanges.length > 0 && (
+
+ )}
+
+
+
+
+
+
+ | Disc | +# | +Title | +Artist | +File | +
|---|---|---|---|---|
| + setRow(s.rel, id, e.target.value)} + /> + | + ); + })} +
+ {s.links > 1 && |
+
+ {shared} of these songs are hardlinked to the {side === "slave" ? "master" : "slave"} library, so edits show up in both
+ libraries and the files stay linked.
+
+
+
+ )}
+ + Only tags and art change; the audio is verified to be identical. Previous versions go to quarantine, and every change can be undone + from History. +
+ {dry &&
+ {hasChanges && (
+
+ {[
+ albumChanged.length && `${albumChanged.length} album field${albumChanged.length > 1 ? "s" : ""}`,
+ rowChanges.length && `${rowChanges.length} song${rowChanges.length > 1 ? "s" : ""} changed`,
+ art && "new cover",
+ ]
+ .filter(Boolean)
+ .join(" · ")}
+
+ )}
+
+
+
+
+
+ );
+ return
+
+
+ {Object.entries(search.data.errors).map(([s, e]) => (
+
+ )}
+ {search.isPending && {(prepare.error || upload.error)!.message} }
+
+ );
+}
+
+/** A chosen cover waiting to be saved. */
+export function ChosenArt({ art, onClear }: { art: PreparedArt; onClear: () => void }) {
+ return (
+
+
+ {enabled.map((s) => {
+ const disabled = s === "google" && !googleReady;
+ const on = active.includes(s) && !disabled;
+ return (
+
+ );
+ })}
+ · square images only
+
+
+ {search.data && Object.keys(search.data.errors).length > 0 && (
+
+ {SOURCE_LABEL[s] ?? s}: {e}
+
+ ))}
+ No square covers found. Try other words.
}
+ {search.data && search.data.results.length > 0 && (
+
+ {search.data.results.filter((r) => !broken.has(r.url)).map((r) => (
+
+ ))}
+
+ )}
+
+
+
+ {busy && (
+
+
+
+ {
+ const f = e.target.files?.[0];
+ if (f) upload.mutate(f);
+ e.target.value = "";
+ }}
+ />
+
+
+
+ )}
+ {(prepare.error || upload.error) &&
+
+ );
+}
diff --git a/web/src/pages/ArtSettings.tsx b/web/src/pages/ArtSettings.tsx
new file mode 100644
index 0000000..f539eee
--- /dev/null
+++ b/web/src/pages/ArtSettings.tsx
@@ -0,0 +1,97 @@
+import { useEffect, useState } from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { Image as ImageIcon } from "lucide-react";
+import { api, type ArtSettings } from "../api";
+import { Button, Card, Field, cx, inputCls } from "../ui";
+import { useToast } from "../toast";
+
+const SOURCES: { id: string; label: string; hint: string }[] = [
+ { id: "itunes", label: "iTunes", hint: "Album covers, 1000 px, no key needed" },
+ { id: "deezer", label: "Deezer", hint: "Album covers, 1000 px, no key needed" },
+ { id: "musicbrainz", label: "MusicBrainz", hint: "Cover Art Archive, no key needed" },
+ { id: "duckduckgo", label: "DuckDuckGo", hint: "Web images; unofficial, may stop working" },
+ { id: "google", label: "Google", hint: "Web images; needs an API key and search engine id" },
+];
+
+export function ArtSettingsCard() {
+ const qc = useQueryClient();
+ const toast = useToast();
+ const data = useQuery({ queryKey: ["art-settings"], queryFn: () => api.get<{ settings: ArtSettings }>("/art/settings") });
+ const [s, setS] = useState
+ not square }
+
+
+ New cover
+
+ {art.width}×{art.height} · {formatBytes(art.size)} JPEG
+
+ {!art.square &&
+
+
+
+
+
+ {dirty && (
+
+ )}
+
+
+ Where the tag editor searches for covers. Only square images are shown.
+
+ {SOURCES.map((src) => (
+
+ ))}
+
+ {s.sources.includes("google") && (
+
+
+ setS({ ...s, google_key: e.target.value })} />
+
+
+ setS({ ...s, google_cx: e.target.value })} />
+
+
+ )}
+
+
+
+
+
+
+
+
+ + Searching sends the artist and album (or your search text) to the selected services. Images are downloaded by playlink itself, never from + addresses on your local network. +
+
+
+ {songs.length > 0 && (
+
+ )}
+
+
- Click a song to edit its tags, or tick several (for example a whole album) to edit the tags they share. shared marks files that are - hardlinked to the other library. + Click a song to edit its tags, tick several to edit the tags they share, or use Edit album to edit a whole album (album fields, + every track's number and title, and the cover). shared marks files that are hardlinked to the other library.
{editing && (
+
+ )}
+
{shared > 0 && (
+ {art ? (
+ setArt(null)} />
+ ) : (
+ <>
+
+ {picking && !art && (
+
+
+
+ )}
+ Album art{multi && " (first song)"}
+
+
+ {
+ setArt(p);
+ setPicking(false);
+ }}
+ />
+
+ )}
+ {art && editable.some((f) => /\.(ogg|oga|opus)$/i.test(f.rel)) && (
+ OGG/Opus files can't hold embedded art; use Edit album to save a folder cover.jpg for them.
+ )} +
@@ -355,7 +418,7 @@ export function TagEditor({
-
@@ -374,3 +437,113 @@ function commonFolder(rels: string[]) {
}
return first.slice(0, n).join("/") || "the library root";
}
+
+// ---- automatic art matching ----
+
+function AutoMatchDialog({ pairId, side, folder, onClose }: { pairId: number; side: Side; folder: string; onClose: () => void }) {
+ const qc = useQueryClient();
+ const dry = useInfo().data?.dry_run ?? true;
+ const [onlyMissing, setOnlyMissing] = useState(true);
+ const [embed, setEmbed] = useState(true);
+ const [folderFile, setFolderFile] = useState(true);
+ const [job, setJob] = useState
+ Dry run is on, so matches are recorded as planned in Activity. No files change. }
+ {error && {error} }
+
+ )}
+ {job && (
+
+ Finds covers for every album in {folder || `the ${side} library`} from iTunes, Deezer and MusicBrainz,
+ using each album's artist and album tags. A cover is only applied when both clearly match, and only square covers are used.
+
+
+ + The album names are sent to those services to search. Every change goes through History and can be undone. +
+ {dry &&
+ {running ? (
+
+ {job.state === "done"
+ ? Object.entries(job.results)
+ .map(([k, v]) => `${v} ${k}`)
+ .join(" · ") || "Nothing to do"
+ : job.error}
+
+ )}
+ {(job.notes?.length ?? 0) > 0 && (
+
+ )}
+
+
+ ) : (
+
+
+ {job.total > 0 && (
+
+
+
+ )}
+
+
+ )}
+ {job.skipped.length > 0 && (
+ Matched
+ -
+ {job.notes!.map((n, i) => (
+
- {n} + ))} +
+
+ )}
+ Not matched
+ -
+ {job.skipped.map((n, i) => (
+
- {n} + ))} +
Use Edit album → Change art… to search those by hand.
+
+
+ {!job && (
+
+ )}
+
+