feat: Playnite library sync plugin + exporter
A two-part Punktfunk plugin that syncs the Playnite library into the host
game library as the `playnite` provider:
- exporter/ — a minimal C# Playnite GenericPlugin ("Punktfunk Sync") that
writes punktfunk-library.json on every library change. Reading Playnite's
live-locked LiteDB from outside isn't robust, so this adapter runs inside
Playnite. Builds net462 via reference assemblies; packaged as a .pext.
- src/ — the TS plugin (on @punktfunk/host, rom-manager shape): watches the
export, embeds covers as data URLs, reconciles via
PUT /library/provider/playnite, with a console-hosted web UI + standalone
fallback + CLI. Launch = playnite://playnite/start/<id>, run by the host
in the interactive session so Playnite performs the real launch.
Verified locally: backend tsc + 23 tests + biome clean, SPA build, C#
exporter build + .pext pack.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
+424
@@ -0,0 +1,424 @@
|
||||
import {
|
||||
AlertTriangle,
|
||||
CheckCircle2,
|
||||
FolderSearch,
|
||||
Gamepad2,
|
||||
Library,
|
||||
Loader2,
|
||||
RefreshCw,
|
||||
Save,
|
||||
} from "lucide-react";
|
||||
import { type ReactNode, useEffect, useState } from "react";
|
||||
import {
|
||||
type Config,
|
||||
getConfig,
|
||||
putConfig,
|
||||
runSync,
|
||||
type Status,
|
||||
useStatusStream,
|
||||
} from "./api.js";
|
||||
|
||||
const relTime = (ms?: number): string => {
|
||||
if (!ms) return "never";
|
||||
const s = Math.round((Date.now() - ms) / 1000);
|
||||
if (s < 60) return `${s}s ago`;
|
||||
if (s < 3600) return `${Math.round(s / 60)}m ago`;
|
||||
if (s < 86400) return `${Math.round(s / 3600)}h ago`;
|
||||
return `${Math.round(s / 86400)}d ago`;
|
||||
};
|
||||
|
||||
function Card({
|
||||
title,
|
||||
icon,
|
||||
children,
|
||||
right,
|
||||
}: {
|
||||
title: string;
|
||||
icon: ReactNode;
|
||||
children: ReactNode;
|
||||
right?: ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<section className="rounded-[var(--radius)] border border-border bg-card p-5">
|
||||
<header className="mb-4 flex items-center justify-between gap-3">
|
||||
<h2 className="flex items-center gap-2 text-sm font-semibold tracking-wide text-muted uppercase">
|
||||
<span className="text-brand">{icon}</span>
|
||||
{title}
|
||||
</h2>
|
||||
{right}
|
||||
</header>
|
||||
{children}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function Toggle({
|
||||
label,
|
||||
hint,
|
||||
checked,
|
||||
onChange,
|
||||
}: {
|
||||
label: string;
|
||||
hint?: string;
|
||||
checked: boolean;
|
||||
onChange: (v: boolean) => void;
|
||||
}) {
|
||||
return (
|
||||
<label className="flex cursor-pointer items-start justify-between gap-4 py-2">
|
||||
<span>
|
||||
<span className="block text-sm">{label}</span>
|
||||
{hint && <span className="block text-xs text-muted">{hint}</span>}
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onChange(!checked)}
|
||||
className={`mt-0.5 h-6 w-11 shrink-0 rounded-full transition-colors ${checked ? "bg-brand" : "bg-elevated"}`}
|
||||
>
|
||||
<span
|
||||
className={`block h-5 w-5 rounded-full bg-white transition-transform ${checked ? "translate-x-5" : "translate-x-0.5"}`}
|
||||
/>
|
||||
</button>
|
||||
</label>
|
||||
);
|
||||
}
|
||||
|
||||
const inputCls =
|
||||
"w-full rounded-lg border border-border bg-surface px-3 py-2 text-sm outline-none focus:border-brand";
|
||||
|
||||
export function App() {
|
||||
const status = useStatusStream();
|
||||
const [config, setConfig] = useState<Config>();
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [syncing, setSyncing] = useState(false);
|
||||
const [msg, setMsg] = useState<string>();
|
||||
|
||||
useEffect(() => {
|
||||
getConfig()
|
||||
.then(setConfig)
|
||||
.catch((e) => setMsg(String(e)));
|
||||
}, []);
|
||||
|
||||
const patch = (p: Partial<Config>) =>
|
||||
setConfig((c) => (c ? { ...c, ...p } : c));
|
||||
|
||||
const save = async () => {
|
||||
if (!config) return;
|
||||
setSaving(true);
|
||||
setMsg(undefined);
|
||||
try {
|
||||
setConfig(await putConfig(config));
|
||||
setMsg("Saved — re-syncing with the new settings.");
|
||||
} catch (e) {
|
||||
setMsg(String(e));
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const sync = async () => {
|
||||
setSyncing(true);
|
||||
setMsg(undefined);
|
||||
try {
|
||||
await runSync();
|
||||
setMsg("Sync requested.");
|
||||
} catch (e) {
|
||||
setMsg(String(e));
|
||||
} finally {
|
||||
setSyncing(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="mx-auto max-w-3xl px-5 py-8">
|
||||
<header className="mb-6 flex items-center gap-3">
|
||||
<span className="grid h-10 w-10 place-items-center rounded-xl bg-brand text-brand-fg">
|
||||
<Gamepad2 size={22} />
|
||||
</span>
|
||||
<div>
|
||||
<h1 className="text-xl font-semibold">Playnite</h1>
|
||||
<p className="text-xs text-muted">
|
||||
Sync your Playnite library into the Punktfunk game library.
|
||||
</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{status ? (
|
||||
<div className="grid gap-5">
|
||||
<Connection status={status} />
|
||||
<LibrarySummary status={status} onSync={sync} syncing={syncing} />
|
||||
{config && (
|
||||
<Settings
|
||||
config={config}
|
||||
patch={patch}
|
||||
onSave={save}
|
||||
saving={saving}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-sm text-muted">Loading…</p>
|
||||
)}
|
||||
|
||||
{msg && (
|
||||
<p className="mt-5 rounded-lg border border-border bg-surface px-4 py-2 text-sm text-muted">
|
||||
{msg}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Connection({ status }: { status: Status }) {
|
||||
const found = Boolean(status.location.file);
|
||||
return (
|
||||
<Card title="Playnite connection" icon={<FolderSearch size={16} />}>
|
||||
{found ? (
|
||||
<div className="flex items-start gap-3">
|
||||
<CheckCircle2 className="mt-0.5 shrink-0 text-ok" size={18} />
|
||||
<div className="min-w-0 text-sm">
|
||||
<p>
|
||||
Exporter connected — updated{" "}
|
||||
<span className="text-fg">
|
||||
{relTime(status.location.mtime ?? undefined)}
|
||||
</span>
|
||||
.
|
||||
</p>
|
||||
<p className="mt-1 truncate font-mono text-xs text-muted">
|
||||
{status.location.file}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-start gap-3">
|
||||
<AlertTriangle className="mt-0.5 shrink-0 text-warn" size={18} />
|
||||
<div className="text-sm">
|
||||
<p>
|
||||
No exporter output found. Install the{" "}
|
||||
<span className="text-fg">Punktfunk Sync</span> extension in
|
||||
Playnite (then restart Playnite).
|
||||
</p>
|
||||
{status.exportError && (
|
||||
<p className="mt-1 text-xs text-muted">{status.exportError}</p>
|
||||
)}
|
||||
<p className="mt-2 text-xs text-muted">
|
||||
Looked under:{" "}
|
||||
{status.location.dir ?? "no Playnite data dir found"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
function LibrarySummary({
|
||||
status,
|
||||
onSync,
|
||||
syncing,
|
||||
}: {
|
||||
status: Status;
|
||||
onSync: () => void;
|
||||
syncing: boolean;
|
||||
}) {
|
||||
const report = status.lastReport;
|
||||
const busy = syncing || status.syncing;
|
||||
const sources = report
|
||||
? Object.entries(report.perSource).sort((a, b) => b[1] - a[1])
|
||||
: [];
|
||||
return (
|
||||
<Card
|
||||
title="Library"
|
||||
icon={<Library size={16} />}
|
||||
right={
|
||||
<button
|
||||
type="button"
|
||||
onClick={onSync}
|
||||
disabled={busy}
|
||||
className="flex items-center gap-2 rounded-lg bg-brand px-3 py-1.5 text-sm font-medium text-brand-fg hover:bg-brand-hover disabled:opacity-50"
|
||||
>
|
||||
{busy ? (
|
||||
<Loader2 className="animate-spin" size={15} />
|
||||
) : (
|
||||
<RefreshCw size={15} />
|
||||
)}
|
||||
Sync now
|
||||
</button>
|
||||
}
|
||||
>
|
||||
<div className="flex items-baseline gap-2">
|
||||
<span className="text-3xl font-semibold">
|
||||
{status.lastSync?.count ?? 0}
|
||||
</span>
|
||||
<span className="text-sm text-muted">
|
||||
title(s) synced · last {relTime(status.lastSync?.at)}
|
||||
</span>
|
||||
</div>
|
||||
{sources.length > 0 && (
|
||||
<div className="mt-3 flex flex-wrap gap-2">
|
||||
{sources.map(([src, n]) => (
|
||||
<span
|
||||
key={src}
|
||||
className="rounded-full border border-border bg-surface px-2.5 py-1 text-xs"
|
||||
>
|
||||
{src} <span className="text-muted">{n}</span>
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{report && report.skipped.length > 0 && (
|
||||
<p className="mt-3 text-xs text-muted">
|
||||
{report.skipped.length} skipped (e.g. {report.skipped[0]?.title}:{" "}
|
||||
{report.skipped[0]?.reason})
|
||||
</p>
|
||||
)}
|
||||
{report?.warnings.map((w) => (
|
||||
<p key={w} className="mt-2 text-xs text-warn">
|
||||
{w}
|
||||
</p>
|
||||
))}
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
function Settings({
|
||||
config,
|
||||
patch,
|
||||
onSave,
|
||||
saving,
|
||||
}: {
|
||||
config: Config;
|
||||
patch: (p: Partial<Config>) => void;
|
||||
onSave: () => void;
|
||||
saving: boolean;
|
||||
}) {
|
||||
const csv = (a: string[]) => a.join(", ");
|
||||
const parseCsv = (s: string) =>
|
||||
s
|
||||
.split(",")
|
||||
.map((x) => x.trim())
|
||||
.filter(Boolean);
|
||||
|
||||
return (
|
||||
<Card
|
||||
title="Settings"
|
||||
icon={<Gamepad2 size={16} />}
|
||||
right={
|
||||
<button
|
||||
type="button"
|
||||
onClick={onSave}
|
||||
disabled={saving}
|
||||
className="flex items-center gap-2 rounded-lg border border-border bg-surface px-3 py-1.5 text-sm hover:bg-elevated disabled:opacity-50"
|
||||
>
|
||||
{saving ? (
|
||||
<Loader2 className="animate-spin" size={15} />
|
||||
) : (
|
||||
<Save size={15} />
|
||||
)}
|
||||
Save
|
||||
</button>
|
||||
}
|
||||
>
|
||||
<div className="divide-y divide-border">
|
||||
<Toggle
|
||||
label="Installed games only"
|
||||
hint="Uncheck to also sync games Playnite hasn't installed yet."
|
||||
checked={config.filter.installedOnly}
|
||||
onChange={(v) =>
|
||||
patch({ filter: { ...config.filter, installedOnly: v } })
|
||||
}
|
||||
/>
|
||||
<Toggle
|
||||
label="Include hidden games"
|
||||
checked={config.filter.includeHidden}
|
||||
onChange={(v) =>
|
||||
patch({ filter: { ...config.filter, includeHidden: v } })
|
||||
}
|
||||
/>
|
||||
<Toggle
|
||||
label="Embed cover art"
|
||||
hint="Inlines each cover as a data URL. Turn off for a lighter library payload."
|
||||
checked={config.art.mode === "dataurl"}
|
||||
onChange={(v) =>
|
||||
patch({ art: { ...config.art, mode: v ? "dataurl" : "off" } })
|
||||
}
|
||||
/>
|
||||
<Toggle
|
||||
label="Embed background art too"
|
||||
hint="Backgrounds are large — off by default."
|
||||
checked={config.art.includeBackground}
|
||||
onChange={(v) =>
|
||||
patch({ art: { ...config.art, includeBackground: v } })
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 grid gap-3">
|
||||
<label className="block">
|
||||
<span className="mb-1 block text-xs text-muted">
|
||||
Only these sources (comma-separated, blank = all)
|
||||
</span>
|
||||
<input
|
||||
className={inputCls}
|
||||
placeholder="Steam, GOG, Epic"
|
||||
defaultValue={csv(config.filter.sources)}
|
||||
onBlur={(e) =>
|
||||
patch({
|
||||
filter: { ...config.filter, sources: parseCsv(e.target.value) },
|
||||
})
|
||||
}
|
||||
/>
|
||||
</label>
|
||||
<label className="block">
|
||||
<span className="mb-1 block text-xs text-muted">Exclude sources</span>
|
||||
<input
|
||||
className={inputCls}
|
||||
placeholder="Xbox"
|
||||
defaultValue={csv(config.filter.excludeSources)}
|
||||
onBlur={(e) =>
|
||||
patch({
|
||||
filter: {
|
||||
...config.filter,
|
||||
excludeSources: parseCsv(e.target.value),
|
||||
},
|
||||
})
|
||||
}
|
||||
/>
|
||||
</label>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<label className="block">
|
||||
<span className="mb-1 block text-xs text-muted">
|
||||
Poll every (min)
|
||||
</span>
|
||||
<input
|
||||
type="number"
|
||||
min={1}
|
||||
className={inputCls}
|
||||
defaultValue={config.sync.pollMinutes}
|
||||
onBlur={(e) =>
|
||||
patch({
|
||||
sync: {
|
||||
...config.sync,
|
||||
pollMinutes: Math.max(1, Number(e.target.value) || 5),
|
||||
},
|
||||
})
|
||||
}
|
||||
/>
|
||||
</label>
|
||||
<label className="block">
|
||||
<span className="mb-1 block text-xs text-muted">
|
||||
Playnite dir override
|
||||
</span>
|
||||
<input
|
||||
className={inputCls}
|
||||
placeholder="(auto-detect)"
|
||||
defaultValue={config.playniteDir ?? ""}
|
||||
onBlur={(e) =>
|
||||
patch({ playniteDir: e.target.value.trim() || undefined })
|
||||
}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
+108
@@ -0,0 +1,108 @@
|
||||
// Typed client for the plugin-local API. Relative paths — the SPA is mounted under the console proxy
|
||||
// prefix, so `api/...` resolves to `/plugin-ui/playnite/api/...`. Types mirror `src/engine` +
|
||||
// `src/config`.
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
export interface Location {
|
||||
dir: string | null;
|
||||
candidates: string[];
|
||||
file: string | null;
|
||||
mtime: number | null;
|
||||
}
|
||||
export interface Skipped {
|
||||
id: string;
|
||||
title: string;
|
||||
reason: string;
|
||||
}
|
||||
export interface Report {
|
||||
generatedAt: string;
|
||||
considered: number;
|
||||
included: number;
|
||||
skipped: Skipped[];
|
||||
warnings: string[];
|
||||
perSource: Record<string, number>;
|
||||
}
|
||||
export interface LastSync {
|
||||
fingerprint: string;
|
||||
count: number;
|
||||
at: number;
|
||||
}
|
||||
export interface Status {
|
||||
platform: string;
|
||||
location: Location;
|
||||
exportError?: string;
|
||||
lastSync?: LastSync;
|
||||
lastReport?: Report;
|
||||
paths: { dir: string; config: string; cache: string; relConfig: string };
|
||||
syncing: boolean;
|
||||
}
|
||||
export interface Config {
|
||||
playniteDir?: string;
|
||||
sync: { pollMinutes: number; watch: boolean; debounceMs: number };
|
||||
filter: {
|
||||
installedOnly: boolean;
|
||||
includeHidden: boolean;
|
||||
sources: string[];
|
||||
excludeSources: string[];
|
||||
};
|
||||
art: {
|
||||
mode: "dataurl" | "off";
|
||||
maxBytes: number;
|
||||
includeBackground: boolean;
|
||||
};
|
||||
ui: {
|
||||
standalone: boolean;
|
||||
port: number;
|
||||
bind: string;
|
||||
passwordHash?: string;
|
||||
};
|
||||
devEntry: boolean;
|
||||
}
|
||||
export interface Preview {
|
||||
location: Location;
|
||||
report?: Report;
|
||||
error?: string;
|
||||
}
|
||||
|
||||
const api = async <T>(path: string, opts?: RequestInit): Promise<T> => {
|
||||
const res = await fetch(path, {
|
||||
headers: { "content-type": "application/json" },
|
||||
...opts,
|
||||
});
|
||||
if (!res.ok) {
|
||||
const body = (await res.json().catch(() => ({}))) as { error?: string };
|
||||
throw new Error(body.error ?? `HTTP ${res.status}`);
|
||||
}
|
||||
return (await res.json()) as T;
|
||||
};
|
||||
|
||||
export const getStatus = () => api<Status>("api/status");
|
||||
export const getConfig = () => api<Config>("api/config");
|
||||
export const putConfig = (config: Config) =>
|
||||
api<Config>("api/config", { method: "PUT", body: JSON.stringify(config) });
|
||||
export const getPreview = () => api<Preview>("api/preview");
|
||||
export const runSync = () => api<unknown>("api/sync", { method: "POST" });
|
||||
|
||||
/** Live engine status via SSE (falls back to a one-shot fetch if EventSource fails). */
|
||||
export const useStatusStream = (): Status | undefined => {
|
||||
const [status, setStatus] = useState<Status>();
|
||||
useEffect(() => {
|
||||
getStatus()
|
||||
.then(setStatus)
|
||||
.catch(() => {});
|
||||
try {
|
||||
const es = new EventSource("api/events");
|
||||
es.addEventListener("status", (e) => {
|
||||
try {
|
||||
setStatus(JSON.parse((e as MessageEvent).data));
|
||||
} catch {
|
||||
// ignore malformed frame
|
||||
}
|
||||
});
|
||||
return () => es.close();
|
||||
} catch {
|
||||
return;
|
||||
}
|
||||
}, []);
|
||||
return status;
|
||||
};
|
||||
@@ -0,0 +1,10 @@
|
||||
import { StrictMode } from "react";
|
||||
import { createRoot } from "react-dom/client";
|
||||
import { App } from "./App.js";
|
||||
import "./styles.css";
|
||||
|
||||
createRoot(document.getElementById("root")!).render(
|
||||
<StrictMode>
|
||||
<App />
|
||||
</StrictMode>,
|
||||
);
|
||||
@@ -0,0 +1,41 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
/* Punktfunk violet identity — dark only (the SPA is embedded on the console's dark canvas). The token
|
||||
names feed Tailwind v4 utilities directly: `bg-card`, `text-muted`, `bg-brand`, `border-border`… */
|
||||
@theme {
|
||||
--color-bg: #0b0b0f;
|
||||
--color-surface: #131120;
|
||||
--color-card: #1a1726;
|
||||
--color-elevated: #221d33;
|
||||
--color-border: #2a2440;
|
||||
--color-fg: #e9e6f3;
|
||||
--color-muted: #a39fbb;
|
||||
--color-brand: #6c5bf3;
|
||||
--color-brand-hover: #7d6ef5;
|
||||
--color-brand-fg: #ffffff;
|
||||
--color-ok: #34d399;
|
||||
--color-warn: #fbbf24;
|
||||
--color-err: #f87171;
|
||||
--radius: 0.7rem;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
background: var(--color-bg);
|
||||
color: var(--color-fg);
|
||||
font-family:
|
||||
"Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
*::-webkit-scrollbar-thumb {
|
||||
background: var(--color-border);
|
||||
border-radius: 6px;
|
||||
}
|
||||
Reference in New Issue
Block a user