Add Accounts menu and mobile card layouts; reorganize admin IA.
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Jos Vooges | STH
parent
2489e9b1fc
commit
756b2adda8
6 changed files with 1155 additions and 818 deletions
575
apps/admin-ui/src/app/accounts/page.tsx
Normal file
575
apps/admin-ui/src/app/accounts/page.tsx
Normal file
|
|
@ -0,0 +1,575 @@
|
|||
"use client";
|
||||
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { Nav, useAuth } from "@/components/Nav";
|
||||
|
||||
interface AddonTokenRow {
|
||||
id: string;
|
||||
label: string | null;
|
||||
revoked: boolean;
|
||||
createdAt: string;
|
||||
hasIptv?: boolean;
|
||||
iptvOk?: boolean;
|
||||
}
|
||||
|
||||
interface IptvForm {
|
||||
label: string;
|
||||
baseUrl: string;
|
||||
username: string;
|
||||
password: string;
|
||||
enableLive: boolean;
|
||||
enableVod: boolean;
|
||||
enableSeries: boolean;
|
||||
lastOkAt?: string | null;
|
||||
lastError?: string | null;
|
||||
hasPassword?: boolean;
|
||||
}
|
||||
|
||||
const emptyIptv = (): IptvForm => ({
|
||||
label: "",
|
||||
baseUrl: "",
|
||||
username: "",
|
||||
password: "",
|
||||
enableLive: true,
|
||||
enableVod: true,
|
||||
enableSeries: true,
|
||||
});
|
||||
|
||||
const MASTER_URL = "https://master.vonas.nl";
|
||||
|
||||
export default function AccountsPage() {
|
||||
useAuth();
|
||||
const [tokens, setTokens] = useState<AddonTokenRow[]>([]);
|
||||
const [addonToken, setAddonToken] = useState("");
|
||||
const [installUrl, setInstallUrl] = useState("");
|
||||
const [label, setLabel] = useState("Stremio");
|
||||
const [iptvTokenId, setIptvTokenId] = useState<string | null>(null);
|
||||
const [iptv, setIptv] = useState<IptvForm>(emptyIptv());
|
||||
const [iptvBusy, setIptvBusy] = useState(false);
|
||||
const [iptvMsg, setIptvMsg] = useState<string | null>(null);
|
||||
const [iptvErr, setIptvErr] = useState<string | null>(null);
|
||||
const [adminEmail, setAdminEmail] = useState("");
|
||||
const [currentPassword, setCurrentPassword] = useState("");
|
||||
const [newPassword, setNewPassword] = useState("");
|
||||
const [confirmPassword, setConfirmPassword] = useState("");
|
||||
const [pwBusy, setPwBusy] = useState(false);
|
||||
const [pwMsg, setPwMsg] = useState<string | null>(null);
|
||||
const [pwErr, setPwErr] = useState<string | null>(null);
|
||||
|
||||
const loadTokens = useCallback(() => {
|
||||
fetch("/api/v1/admin/addon-tokens", { credentials: "include" })
|
||||
.then((r) => r.json())
|
||||
.then((d) => setTokens(d.tokens ?? []));
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
loadTokens();
|
||||
fetch("/api/v1/auth/me", { credentials: "include" })
|
||||
.then((r) => r.json())
|
||||
.then((d) => setAdminEmail(d.user?.email ?? ""))
|
||||
.catch(() => undefined);
|
||||
}, [loadTokens]);
|
||||
|
||||
async function changePassword() {
|
||||
setPwMsg(null);
|
||||
setPwErr(null);
|
||||
if (!currentPassword || !newPassword) {
|
||||
setPwErr("Vul huidig en nieuw wachtwoord in");
|
||||
return;
|
||||
}
|
||||
if (newPassword.length < 8) {
|
||||
setPwErr("Nieuw wachtwoord moet minstens 8 tekens zijn");
|
||||
return;
|
||||
}
|
||||
if (newPassword !== confirmPassword) {
|
||||
setPwErr("Nieuwe wachtwoorden komen niet overeen");
|
||||
return;
|
||||
}
|
||||
setPwBusy(true);
|
||||
try {
|
||||
const res = await fetch("/api/v1/auth/change-password", {
|
||||
method: "POST",
|
||||
credentials: "include",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ currentPassword, newPassword, confirmPassword }),
|
||||
});
|
||||
const data = await res.json().catch(() => ({}));
|
||||
if (!res.ok) {
|
||||
setPwErr(data.error?.message ?? "Wachtwoord wijzigen mislukt");
|
||||
return;
|
||||
}
|
||||
setCurrentPassword("");
|
||||
setNewPassword("");
|
||||
setConfirmPassword("");
|
||||
setPwMsg("Wachtwoord gewijzigd. Andere sessies zijn uitgelogd.");
|
||||
} finally {
|
||||
setPwBusy(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function createAddonToken() {
|
||||
const res = await fetch("/api/v1/admin/addon-tokens", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
credentials: "include",
|
||||
body: JSON.stringify({ label }),
|
||||
});
|
||||
const data = await res.json();
|
||||
if (!res.ok) {
|
||||
alert(data.error?.message ?? "Aanmaken mislukt");
|
||||
return;
|
||||
}
|
||||
setAddonToken(data.token);
|
||||
setInstallUrl(`${MASTER_URL}/stremio/${data.token}/manifest.json`);
|
||||
loadTokens();
|
||||
}
|
||||
|
||||
async function revokeToken(id: string) {
|
||||
if (!confirm("Addon deactiveren? Bestaande Stremio-installaties stoppen met werken.")) return;
|
||||
await fetch(`/api/v1/admin/addon-tokens/${id}/revoke`, {
|
||||
method: "POST",
|
||||
credentials: "include",
|
||||
});
|
||||
loadTokens();
|
||||
}
|
||||
|
||||
async function activateToken(id: string) {
|
||||
await fetch(`/api/v1/admin/addon-tokens/${id}/activate`, {
|
||||
method: "POST",
|
||||
credentials: "include",
|
||||
});
|
||||
loadTokens();
|
||||
}
|
||||
|
||||
async function deleteToken(id: string) {
|
||||
if (!confirm("Addon definitief verwijderen? Dit kan niet ongedaan worden gemaakt.")) return;
|
||||
await fetch(`/api/v1/admin/addon-tokens/${id}`, {
|
||||
method: "DELETE",
|
||||
credentials: "include",
|
||||
});
|
||||
if (iptvTokenId === id) {
|
||||
setIptvTokenId(null);
|
||||
setIptv(emptyIptv());
|
||||
}
|
||||
loadTokens();
|
||||
}
|
||||
|
||||
async function openIptv(tokenId: string) {
|
||||
setIptvTokenId(tokenId);
|
||||
setIptvMsg(null);
|
||||
setIptvErr(null);
|
||||
setIptvBusy(true);
|
||||
try {
|
||||
const res = await fetch(`/api/v1/admin/addon-tokens/${tokenId}/iptv`, {
|
||||
credentials: "include",
|
||||
});
|
||||
const data = await res.json();
|
||||
if (!res.ok) {
|
||||
setIptvErr(data.error?.message ?? "Laden mislukt");
|
||||
setIptv(emptyIptv());
|
||||
return;
|
||||
}
|
||||
if (data.iptv) {
|
||||
setIptv({
|
||||
label: data.iptv.label ?? "",
|
||||
baseUrl: data.iptv.baseUrl ?? "",
|
||||
username: data.iptv.username ?? "",
|
||||
password: "",
|
||||
enableLive: data.iptv.enableLive ?? true,
|
||||
enableVod: data.iptv.enableVod ?? true,
|
||||
enableSeries: data.iptv.enableSeries ?? true,
|
||||
lastOkAt: data.iptv.lastOkAt,
|
||||
lastError: data.iptv.lastError,
|
||||
hasPassword: data.iptv.hasPassword,
|
||||
});
|
||||
} else {
|
||||
setIptv(emptyIptv());
|
||||
}
|
||||
} finally {
|
||||
setIptvBusy(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function saveIptv() {
|
||||
if (!iptvTokenId) return;
|
||||
setIptvBusy(true);
|
||||
setIptvMsg(null);
|
||||
setIptvErr(null);
|
||||
try {
|
||||
const res = await fetch(`/api/v1/admin/addon-tokens/${iptvTokenId}/iptv`, {
|
||||
method: "PUT",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
credentials: "include",
|
||||
body: JSON.stringify({
|
||||
label: iptv.label || undefined,
|
||||
baseUrl: iptv.baseUrl,
|
||||
username: iptv.username,
|
||||
password: iptv.password || undefined,
|
||||
enableLive: iptv.enableLive,
|
||||
enableVod: iptv.enableVod,
|
||||
enableSeries: iptv.enableSeries,
|
||||
}),
|
||||
});
|
||||
const data = await res.json();
|
||||
if (!res.ok) {
|
||||
setIptvErr(data.error?.message ?? "Opslaan mislukt");
|
||||
return;
|
||||
}
|
||||
setIptvMsg(
|
||||
`Verbonden · ${data.iptv?.liveCategories ?? 0} live-bouquets. Herlaad de Stremio-addon om Live TV te zien.`
|
||||
);
|
||||
setIptv((s) => ({ ...s, password: "", hasPassword: true, lastError: null }));
|
||||
loadTokens();
|
||||
await openIptv(iptvTokenId);
|
||||
} finally {
|
||||
setIptvBusy(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function testIptv() {
|
||||
if (!iptvTokenId) return;
|
||||
setIptvBusy(true);
|
||||
setIptvMsg(null);
|
||||
setIptvErr(null);
|
||||
try {
|
||||
const res = await fetch(`/api/v1/admin/addon-tokens/${iptvTokenId}/iptv/test`, {
|
||||
method: "POST",
|
||||
credentials: "include",
|
||||
});
|
||||
const data = await res.json();
|
||||
if (!res.ok) {
|
||||
setIptvErr(data.error?.message ?? "Test mislukt");
|
||||
return;
|
||||
}
|
||||
setIptvMsg(
|
||||
`OK · status ${data.status}` +
|
||||
(data.expDate ? ` · exp ${data.expDate}` : "") +
|
||||
` · live ${data.liveCategories} · films ${data.vodCategories} · series ${data.seriesCategories}`
|
||||
);
|
||||
loadTokens();
|
||||
} finally {
|
||||
setIptvBusy(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteIptv() {
|
||||
if (!iptvTokenId) return;
|
||||
if (!confirm("IPTV-userline ontkoppelen van deze addon?")) return;
|
||||
setIptvBusy(true);
|
||||
setIptvErr(null);
|
||||
try {
|
||||
await fetch(`/api/v1/admin/addon-tokens/${iptvTokenId}/iptv`, {
|
||||
method: "DELETE",
|
||||
credentials: "include",
|
||||
});
|
||||
setIptv(emptyIptv());
|
||||
setIptvMsg("IPTV ontkoppeld");
|
||||
loadTokens();
|
||||
} finally {
|
||||
setIptvBusy(false);
|
||||
}
|
||||
}
|
||||
|
||||
const activeToken = tokens.find((t) => t.id === iptvTokenId);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Nav />
|
||||
<div className="container">
|
||||
<div className="page-header">
|
||||
<div>
|
||||
<div className="page-kicker">Access</div>
|
||||
<h1>Accounts</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section className="stack-section">
|
||||
<div className="section-head">
|
||||
<h2 className="section-title">Admin-login</h2>
|
||||
<p className="muted">Ingelogd als {adminEmail || "…"}</p>
|
||||
</div>
|
||||
<div className="card">
|
||||
{pwErr && <div className="error">{pwErr}</div>}
|
||||
{pwMsg && (
|
||||
<p className="muted" style={{ color: "var(--ok)", marginBottom: "0.75rem" }}>
|
||||
{pwMsg}
|
||||
</p>
|
||||
)}
|
||||
<div className="form-group">
|
||||
<label>Huidig wachtwoord</label>
|
||||
<input
|
||||
type="password"
|
||||
value={currentPassword}
|
||||
onChange={(e) => setCurrentPassword(e.target.value)}
|
||||
autoComplete="current-password"
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Nieuw wachtwoord</label>
|
||||
<input
|
||||
type="password"
|
||||
value={newPassword}
|
||||
onChange={(e) => setNewPassword(e.target.value)}
|
||||
autoComplete="new-password"
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Bevestig nieuw wachtwoord</label>
|
||||
<input
|
||||
type="password"
|
||||
value={confirmPassword}
|
||||
onChange={(e) => setConfirmPassword(e.target.value)}
|
||||
autoComplete="new-password"
|
||||
/>
|
||||
</div>
|
||||
<button type="button" onClick={changePassword} disabled={pwBusy}>
|
||||
{pwBusy ? "Bezig…" : "Wachtwoord wijzigen"}
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="stack-section">
|
||||
<div className="section-head">
|
||||
<h2 className="section-title">Stremio-addons</h2>
|
||||
<p className="muted">Eén addon = één kijker-label in Streams (Live).</p>
|
||||
</div>
|
||||
|
||||
<div className="card">
|
||||
<h3 className="card-subtitle">Nieuwe addon</h3>
|
||||
<div className="form-group">
|
||||
<label>Label</label>
|
||||
<input
|
||||
value={label}
|
||||
onChange={(e) => setLabel(e.target.value)}
|
||||
placeholder="bijv. Jos / Thuis / TV"
|
||||
/>
|
||||
</div>
|
||||
<button onClick={createAddonToken}>Addon aanmaken</button>
|
||||
{addonToken && (
|
||||
<>
|
||||
<p className="muted" style={{ marginTop: "1rem" }}>
|
||||
Installatie-URL (nu kopiëren — wordt maar één keer getoond):
|
||||
</p>
|
||||
<div className="token-display">{installUrl}</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="card">
|
||||
<h3 className="card-subtitle">Bestaande addons</h3>
|
||||
|
||||
<div className="desktop-table">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Label</th>
|
||||
<th>Status</th>
|
||||
<th>IPTV</th>
|
||||
<th>Aangemaakt</th>
|
||||
<th>Acties</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{tokens.map((t) => (
|
||||
<tr key={t.id} className={iptvTokenId === t.id ? "row-selected" : undefined}>
|
||||
<td>{t.label || "—"}</td>
|
||||
<td>
|
||||
<span className={`status ${t.revoked ? "revoked" : "online"}`}>
|
||||
{t.revoked ? "Inactief" : "Actief"}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
{t.hasIptv ? (
|
||||
<span className={`status ${t.iptvOk ? "online" : "revoked"}`}>
|
||||
{t.iptvOk ? "Live TV" : "Fout"}
|
||||
</span>
|
||||
) : (
|
||||
<span className="status offline">Geen</span>
|
||||
)}
|
||||
</td>
|
||||
<td>{new Date(t.createdAt).toLocaleString()}</td>
|
||||
<td>
|
||||
<div className="action-row">
|
||||
<button type="button" className="btn-cyan" onClick={() => openIptv(t.id)}>
|
||||
IPTV
|
||||
</button>
|
||||
{t.revoked ? (
|
||||
<button type="button" className="btn-ok" onClick={() => activateToken(t.id)}>
|
||||
Activeren
|
||||
</button>
|
||||
) : (
|
||||
<button type="button" className="btn-warn" onClick={() => revokeToken(t.id)}>
|
||||
Deactiveren
|
||||
</button>
|
||||
)}
|
||||
<button type="button" className="danger" onClick={() => deleteToken(t.id)}>
|
||||
Verwijderen
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
{tokens.length === 0 && (
|
||||
<tr>
|
||||
<td colSpan={5} className="muted" style={{ textAlign: "center" }}>
|
||||
Nog geen addons
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div className="list-cards">
|
||||
{tokens.map((t) => (
|
||||
<article key={t.id} className={`list-card${iptvTokenId === t.id ? " selected" : ""}`}>
|
||||
<div className="list-card-top">
|
||||
<strong>{t.label || "Zonder label"}</strong>
|
||||
<span className={`status ${t.revoked ? "revoked" : "online"}`}>
|
||||
{t.revoked ? "Inactief" : "Actief"}
|
||||
</span>
|
||||
</div>
|
||||
<div className="list-card-meta">
|
||||
<span>
|
||||
IPTV:{" "}
|
||||
{t.hasIptv ? (t.iptvOk ? "OK" : "Fout") : "geen"}
|
||||
</span>
|
||||
<span>{new Date(t.createdAt).toLocaleDateString()}</span>
|
||||
</div>
|
||||
<div className="action-row">
|
||||
<button type="button" className="btn-cyan" onClick={() => openIptv(t.id)}>
|
||||
IPTV
|
||||
</button>
|
||||
{t.revoked ? (
|
||||
<button type="button" className="btn-ok" onClick={() => activateToken(t.id)}>
|
||||
Activeren
|
||||
</button>
|
||||
) : (
|
||||
<button type="button" className="btn-warn" onClick={() => revokeToken(t.id)}>
|
||||
Deactiveren
|
||||
</button>
|
||||
)}
|
||||
<button type="button" className="danger" onClick={() => deleteToken(t.id)}>
|
||||
Verwijderen
|
||||
</button>
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
{tokens.length === 0 && <p className="muted">Nog geen addons</p>}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{iptvTokenId && (
|
||||
<section className="stack-section">
|
||||
<div className="card iptv-card">
|
||||
<div className="section-head row">
|
||||
<div>
|
||||
<h2 className="section-title">IPTV · Xtream / XUI</h2>
|
||||
<p className="muted">
|
||||
Userline voor{" "}
|
||||
<strong style={{ color: "var(--text-bright)" }}>
|
||||
{activeToken?.label || iptvTokenId.slice(0, 8)}
|
||||
</strong>
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="ghost"
|
||||
onClick={() => {
|
||||
setIptvTokenId(null);
|
||||
setIptv(emptyIptv());
|
||||
setIptvMsg(null);
|
||||
setIptvErr(null);
|
||||
}}
|
||||
>
|
||||
Sluiten
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="form-grid">
|
||||
<div className="form-group" style={{ marginBottom: 0 }}>
|
||||
<label>Label</label>
|
||||
<input
|
||||
value={iptv.label}
|
||||
onChange={(e) => setIptv({ ...iptv, label: e.target.value })}
|
||||
placeholder="bijv. Thuis XUI"
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group form-span" style={{ marginBottom: 0 }}>
|
||||
<label>Server-URL</label>
|
||||
<input
|
||||
value={iptv.baseUrl}
|
||||
onChange={(e) => setIptv({ ...iptv, baseUrl: e.target.value })}
|
||||
placeholder="http://host:port"
|
||||
autoComplete="off"
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group" style={{ marginBottom: 0 }}>
|
||||
<label>Gebruikersnaam</label>
|
||||
<input
|
||||
value={iptv.username}
|
||||
onChange={(e) => setIptv({ ...iptv, username: e.target.value })}
|
||||
autoComplete="off"
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group" style={{ marginBottom: 0 }}>
|
||||
<label>Wachtwoord {iptv.hasPassword ? "(leeg = behouden)" : ""}</label>
|
||||
<input
|
||||
type="password"
|
||||
value={iptv.password}
|
||||
onChange={(e) => setIptv({ ...iptv, password: e.target.value })}
|
||||
placeholder={iptv.hasPassword ? "••••••••" : ""}
|
||||
autoComplete="new-password"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="check-row">
|
||||
{(
|
||||
[
|
||||
["enableLive", "Live TV + EPG"],
|
||||
["enableVod", "IPTV Films"],
|
||||
["enableSeries", "IPTV Series"],
|
||||
] as const
|
||||
).map(([key, text]) => (
|
||||
<label key={key} className="check-label">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={iptv[key]}
|
||||
onChange={(e) => setIptv({ ...iptv, [key]: e.target.checked })}
|
||||
style={{ width: "auto", margin: 0 }}
|
||||
/>
|
||||
{text}
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{iptvMsg && <p style={{ color: "var(--ok)", fontSize: "0.875rem" }}>{iptvMsg}</p>}
|
||||
{iptvErr && <div className="error">{iptvErr}</div>}
|
||||
|
||||
<div className="action-row">
|
||||
<button type="button" onClick={saveIptv} disabled={iptvBusy}>
|
||||
{iptvBusy ? "Bezig…" : "Opslaan & verbinden"}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="btn-ok"
|
||||
onClick={testIptv}
|
||||
disabled={iptvBusy || !iptv.hasPassword}
|
||||
>
|
||||
Testen
|
||||
</button>
|
||||
{iptv.hasPassword && (
|
||||
<button type="button" className="danger" onClick={deleteIptv} disabled={iptvBusy}>
|
||||
Ontkoppelen
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -158,121 +158,109 @@ export default function DashboardPage() {
|
|||
{error && <div className="error">{error}</div>}
|
||||
{data && (
|
||||
<>
|
||||
<section className="stack-section">
|
||||
<div className="section-head">
|
||||
<h2 className="section-title">Cluster</h2>
|
||||
</div>
|
||||
<div className="grid">
|
||||
<div className="card">
|
||||
<h2>Nodes Online</h2>
|
||||
<h2>Nodes online</h2>
|
||||
<div className="value">{data.nodesOnline ?? 0}</div>
|
||||
</div>
|
||||
<div className="card">
|
||||
<h2>Nodes Offline</h2>
|
||||
<h2>Nodes offline</h2>
|
||||
<div className="value">{data.nodesOffline ?? 0}</div>
|
||||
</div>
|
||||
<div className="card">
|
||||
<h2>Films (uniek)</h2>
|
||||
<h2>Live streams</h2>
|
||||
<div className="value">{data.activeStreams ?? 0}</div>
|
||||
</div>
|
||||
<div className="card">
|
||||
<h2>Total storage</h2>
|
||||
<div className="value" style={{ fontSize: "1.35rem" }}>
|
||||
{formatBytes(data.totalStorage)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="card">
|
||||
<h2>Free storage</h2>
|
||||
<div className="value" style={{ fontSize: "1.35rem" }}>
|
||||
{formatBytes(data.freeStorage)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="stack-section">
|
||||
<div className="section-head">
|
||||
<h2 className="section-title">Bibliotheek</h2>
|
||||
</div>
|
||||
<div className="grid">
|
||||
<div className="card">
|
||||
<h2>Films</h2>
|
||||
<div className="value">{data.availableMovies ?? data.movies ?? 0}</div>
|
||||
<p className="muted" style={{ marginTop: "0.5rem", fontSize: "0.75rem" }}>
|
||||
<p className="muted tiny" style={{ marginTop: "0.5rem" }}>
|
||||
{data.movies ?? 0} rijen totaal
|
||||
</p>
|
||||
</div>
|
||||
<div className="card">
|
||||
<h2>Series (uniek)</h2>
|
||||
<h2>Series</h2>
|
||||
<div className="value">{data.availableSeries ?? data.series ?? 0}</div>
|
||||
<p className="muted" style={{ marginTop: "0.5rem", fontSize: "0.75rem" }}>
|
||||
<p className="muted tiny" style={{ marginTop: "0.5rem" }}>
|
||||
{data.series ?? 0} rijen totaal
|
||||
</p>
|
||||
</div>
|
||||
<div className="card">
|
||||
<h2>Bestanden</h2>
|
||||
<div className="value">{data.availableFiles ?? 0}</div>
|
||||
<p className="muted" style={{ marginTop: "0.5rem", fontSize: "0.75rem" }}>
|
||||
{data.scannedFiles ?? 0} gescand op nodes
|
||||
<p className="muted tiny" style={{ marginTop: "0.5rem" }}>
|
||||
{data.scannedFiles ?? 0} gescand
|
||||
</p>
|
||||
</div>
|
||||
<div className="card">
|
||||
<h2>Episodes</h2>
|
||||
<div className="value">{data.episodes ?? 0}</div>
|
||||
</div>
|
||||
<div className="card">
|
||||
<h2>Active Streams</h2>
|
||||
<div className="value">{data.activeStreams ?? 0}</div>
|
||||
</div>
|
||||
<div className="card">
|
||||
<h2>Total Storage</h2>
|
||||
<div className="value" style={{ fontSize: "1.35rem" }}>
|
||||
{formatBytes(data.totalStorage)}
|
||||
</section>
|
||||
|
||||
<section className="stack-section">
|
||||
<div className="section-head">
|
||||
<h2 className="section-title">Onderhoud</h2>
|
||||
<p className="muted">Alleen gebruiken bij migratie of catalogusproblemen.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card">
|
||||
<h2>Free Storage</h2>
|
||||
<div className="value" style={{ fontSize: "1.35rem" }}>
|
||||
{formatBytes(data.freeStorage)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card" style={{ marginTop: "0.5rem" }}>
|
||||
<div className="page-kicker">Maintenance</div>
|
||||
<h2 style={{ fontSize: "1.05rem", color: "var(--text-bright)", textTransform: "none", letterSpacing: 0, fontFamily: "var(--font-ui)" }}>
|
||||
Herstel na pad-wijziging
|
||||
</h2>
|
||||
<p className="muted" style={{ margin: "0.75rem 0" }}>
|
||||
Gebruik dit als Cinemeta geen streams meer toont na een Unraid pad-wijziging
|
||||
(oude /media/movies-bestanden + dubbele titels zonder IMDb).
|
||||
<div className="card tools-card">
|
||||
<div className="tool-block">
|
||||
<h3 className="card-subtitle">Herstel na pad-wijziging</h3>
|
||||
<p className="muted">
|
||||
Duplicaten + dode files + IMDb-backfill na Unraid pad-migratie.
|
||||
</p>
|
||||
<button onClick={repairLibrary}>Bibliotheek herstellen</button>
|
||||
{repairMsg && (
|
||||
<p className="muted" style={{ marginTop: "0.75rem" }}>
|
||||
{repairMsg}
|
||||
</p>
|
||||
)}
|
||||
<h2
|
||||
style={{
|
||||
fontSize: "1.05rem",
|
||||
color: "var(--text-bright)",
|
||||
textTransform: "none",
|
||||
letterSpacing: 0,
|
||||
fontFamily: "var(--font-ui)",
|
||||
marginTop: "1.5rem",
|
||||
}}
|
||||
>
|
||||
Bibliotheek opruimen
|
||||
</h2>
|
||||
<p className="muted" style={{ margin: "0.75rem 0" }}>
|
||||
Dubbele film-/serie-rijen samenvoegen. Daarna in Stremio de addon verversen
|
||||
(of herinstalleren) zodat de volledige catalogus met paginatie geladen wordt.
|
||||
</p>
|
||||
<button onClick={dedupe}>Duplicaten samenvoegen</button>
|
||||
{dedupeMsg && (
|
||||
<p className="muted" style={{ marginTop: "0.75rem" }}>
|
||||
{dedupeMsg}
|
||||
</p>
|
||||
)}
|
||||
<h2
|
||||
style={{
|
||||
fontSize: "1.05rem",
|
||||
color: "var(--text-bright)",
|
||||
textTransform: "none",
|
||||
letterSpacing: 0,
|
||||
fontFamily: "var(--font-ui)",
|
||||
marginTop: "1.5rem",
|
||||
}}
|
||||
>
|
||||
Cinemeta-koppeling (IMDb)
|
||||
</h2>
|
||||
<p className="muted" style={{ margin: "0.75rem 0" }}>
|
||||
Films met IMDb: {data.moviesWithImdbStreams ?? "?"} · zonder:{" "}
|
||||
{data.moviesMissingImdb ?? "?"}
|
||||
<br />
|
||||
Series met IMDb: {data.seriesWithImdb ?? "?"} · zonder:{" "}
|
||||
{data.seriesMissingImdb ?? "?"}. Zonder IMDb tonen Cinemeta-pagina's geen
|
||||
lokale bronnen. Onze eigen series-catalogus blijft op privé-IDs.
|
||||
</p>
|
||||
<button onClick={backfillImdb}>IMDb-IDs backfillen</button>
|
||||
{imdbMsg && (
|
||||
<p className="muted" style={{ marginTop: "0.75rem" }}>
|
||||
{imdbMsg}
|
||||
</p>
|
||||
)}
|
||||
<button type="button" onClick={repairLibrary}>
|
||||
Bibliotheek herstellen
|
||||
</button>
|
||||
{repairMsg && <p className="muted tiny">{repairMsg}</p>}
|
||||
</div>
|
||||
<div className="tool-block">
|
||||
<h3 className="card-subtitle">Duplicaten</h3>
|
||||
<p className="muted">Zelfde titel samenvoegen (TMDB wint).</p>
|
||||
<button type="button" onClick={dedupe}>
|
||||
Duplicaten samenvoegen
|
||||
</button>
|
||||
{dedupeMsg && <p className="muted tiny">{dedupeMsg}</p>}
|
||||
</div>
|
||||
<div className="tool-block">
|
||||
<h3 className="card-subtitle">IMDb-backfill</h3>
|
||||
<p className="muted">
|
||||
Films IMDb: {data.moviesWithImdbStreams ?? "?"} · zonder:{" "}
|
||||
{data.moviesMissingImdb ?? "?"} · Series: {data.seriesWithImdb ?? "?"} / zonder{" "}
|
||||
{data.seriesMissingImdb ?? "?"}
|
||||
</p>
|
||||
<button type="button" onClick={backfillImdb}>
|
||||
IMDb-IDs backfillen
|
||||
</button>
|
||||
{imdbMsg && <p className="muted tiny">{imdbMsg}</p>}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
)}
|
||||
{!data && !error && <p className="muted">Laden...</p>}
|
||||
|
|
|
|||
|
|
@ -686,6 +686,254 @@ pre.token-display {
|
|||
box-shadow: 0 0 10px rgba(34, 211, 238, 0.35);
|
||||
}
|
||||
|
||||
/* ——— Layout sections & mobile cards ——— */
|
||||
.stack-section {
|
||||
margin-bottom: 1.75rem;
|
||||
}
|
||||
|
||||
.section-head {
|
||||
margin-bottom: 0.85rem;
|
||||
}
|
||||
|
||||
.section-head.row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 1.05rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-bright);
|
||||
letter-spacing: -0.01em;
|
||||
margin: 0 0 0.25rem;
|
||||
}
|
||||
|
||||
.card-subtitle {
|
||||
font-size: 0.92rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-bright);
|
||||
margin: 0 0 0.85rem;
|
||||
text-transform: none;
|
||||
letter-spacing: 0;
|
||||
font-family: var(--font-ui);
|
||||
}
|
||||
|
||||
.page-lead {
|
||||
margin: -0.5rem 0 1.25rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.tiny {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.mono {
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
.viewer-name {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.live-badge {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.75rem;
|
||||
color: var(--accent);
|
||||
border: 1px solid var(--border);
|
||||
background: var(--accent-dim);
|
||||
padding: 0.35rem 0.7rem;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.desktop-table {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.list-cards {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.list-card {
|
||||
background: var(--bg-panel);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.65rem;
|
||||
}
|
||||
|
||||
.list-card.selected,
|
||||
tr.row-selected {
|
||||
border-color: var(--border-strong);
|
||||
background: rgba(34, 211, 238, 0.05);
|
||||
}
|
||||
|
||||
.list-card-top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.list-card-meta {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 0.75rem;
|
||||
flex-wrap: wrap;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.stream-title {
|
||||
font-weight: 600;
|
||||
color: var(--text-bright);
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.action-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.action-row button {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.inline-form {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.65rem;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.inline-form input,
|
||||
.inline-form select {
|
||||
flex: 1 1 160px;
|
||||
margin-bottom: 0;
|
||||
min-height: 44px;
|
||||
background: var(--bg-deep);
|
||||
border: 1px solid var(--border-dim);
|
||||
color: var(--text-bright);
|
||||
border-radius: 7px;
|
||||
padding: 0.55rem 0.75rem;
|
||||
font-family: var(--font-ui);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.form-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 0.85rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.form-span {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.check-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.85rem 1.25rem;
|
||||
margin: 0 0 1rem;
|
||||
padding: 0.85rem 1rem;
|
||||
background: var(--bg-deep);
|
||||
border: 1px solid var(--border-dim);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.check-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.45rem;
|
||||
font-size: 0.875rem;
|
||||
color: var(--text);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.path-cell {
|
||||
font-size: 0.8rem;
|
||||
max-width: 360px;
|
||||
}
|
||||
|
||||
.path-line {
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 0.2rem;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.path-block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
.path-block code {
|
||||
display: block;
|
||||
margin-top: 0.15rem;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.warn-hint {
|
||||
color: var(--accent-hot);
|
||||
font-size: 0.75rem;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.btn-cyan {
|
||||
background: linear-gradient(180deg, rgba(14, 116, 144, 0.55), rgba(14, 116, 144, 0.25)) !important;
|
||||
border-color: rgba(34, 211, 238, 0.4) !important;
|
||||
}
|
||||
|
||||
.btn-ok {
|
||||
background: linear-gradient(180deg, rgba(22, 101, 52, 0.55), rgba(22, 101, 52, 0.25)) !important;
|
||||
border-color: rgba(52, 211, 153, 0.4) !important;
|
||||
}
|
||||
|
||||
.btn-warn {
|
||||
background: linear-gradient(180deg, rgba(180, 83, 9, 0.5), rgba(180, 83, 9, 0.2)) !important;
|
||||
border-color: rgba(251, 191, 36, 0.35) !important;
|
||||
}
|
||||
|
||||
.iptv-card {
|
||||
border-color: rgba(34, 211, 238, 0.28);
|
||||
}
|
||||
|
||||
.tools-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.tool-block {
|
||||
padding: 1rem 0;
|
||||
border-bottom: 1px solid var(--border-dim);
|
||||
}
|
||||
|
||||
.tool-block:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.tool-block:last-child {
|
||||
padding-bottom: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.tool-block .muted {
|
||||
margin: 0.35rem 0 0.75rem;
|
||||
}
|
||||
|
||||
.tool-block .tiny {
|
||||
margin-top: 0.65rem;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
:root {
|
||||
--bottomnav-h: calc(64px + var(--safe-bottom));
|
||||
|
|
@ -864,21 +1112,7 @@ pre.token-display {
|
|||
|
||||
.card {
|
||||
padding: 1rem;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
/* Tables scroll horizontally on small screens */
|
||||
.card > table,
|
||||
.table-wrap {
|
||||
display: block;
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
table {
|
||||
min-width: 640px;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
th,
|
||||
|
|
@ -912,6 +1146,38 @@ pre.token-display {
|
|||
.token-display {
|
||||
font-size: 0.72rem;
|
||||
}
|
||||
|
||||
.desktop-table {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.list-cards {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.card > .desktop-table {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Geen horizontale tabel-scroll meer op mobiel */
|
||||
.card > table,
|
||||
table {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.section-head.row {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.inline-form button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.page-lead {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
|
|
|
|||
|
|
@ -3,40 +3,6 @@
|
|||
import { useCallback, useEffect, useState } from "react";
|
||||
import { Nav, useAuth } from "@/components/Nav";
|
||||
|
||||
interface AddonTokenRow {
|
||||
id: string;
|
||||
label: string | null;
|
||||
revoked: boolean;
|
||||
createdAt: string;
|
||||
hasIptv?: boolean;
|
||||
iptvOk?: boolean;
|
||||
}
|
||||
|
||||
interface IptvForm {
|
||||
label: string;
|
||||
baseUrl: string;
|
||||
username: string;
|
||||
password: string;
|
||||
enableLive: boolean;
|
||||
enableVod: boolean;
|
||||
enableSeries: boolean;
|
||||
lastOkAt?: string | null;
|
||||
lastError?: string | null;
|
||||
hasPassword?: boolean;
|
||||
}
|
||||
|
||||
const emptyIptv = (): IptvForm => ({
|
||||
label: "",
|
||||
baseUrl: "",
|
||||
username: "",
|
||||
password: "",
|
||||
enableLive: true,
|
||||
enableVod: true,
|
||||
enableSeries: true,
|
||||
});
|
||||
|
||||
const MASTER_URL = "https://master.vonas.nl";
|
||||
|
||||
interface ShelfRow {
|
||||
id: string;
|
||||
name: string;
|
||||
|
|
@ -51,31 +17,9 @@ interface ShelfRow {
|
|||
|
||||
export default function SettingsPage() {
|
||||
useAuth();
|
||||
const [tokens, setTokens] = useState<AddonTokenRow[]>([]);
|
||||
const [addonToken, setAddonToken] = useState("");
|
||||
const [installUrl, setInstallUrl] = useState("");
|
||||
const [label, setLabel] = useState("Stremio");
|
||||
const [iptvTokenId, setIptvTokenId] = useState<string | null>(null);
|
||||
const [iptv, setIptv] = useState<IptvForm>(emptyIptv());
|
||||
const [iptvBusy, setIptvBusy] = useState(false);
|
||||
const [iptvMsg, setIptvMsg] = useState<string | null>(null);
|
||||
const [iptvErr, setIptvErr] = useState<string | null>(null);
|
||||
const [shelves, setShelves] = useState<ShelfRow[]>([]);
|
||||
const [newShelfName, setNewShelfName] = useState("");
|
||||
const [newShelfKind, setNewShelfKind] = useState<"MOVIE" | "SERIES">("MOVIE");
|
||||
const [adminEmail, setAdminEmail] = useState("");
|
||||
const [currentPassword, setCurrentPassword] = useState("");
|
||||
const [newPassword, setNewPassword] = useState("");
|
||||
const [confirmPassword, setConfirmPassword] = useState("");
|
||||
const [pwBusy, setPwBusy] = useState(false);
|
||||
const [pwMsg, setPwMsg] = useState<string | null>(null);
|
||||
const [pwErr, setPwErr] = useState<string | null>(null);
|
||||
|
||||
const loadTokens = useCallback(() => {
|
||||
fetch("/api/v1/admin/addon-tokens", { credentials: "include" })
|
||||
.then((r) => r.json())
|
||||
.then((d) => setTokens(d.tokens ?? []));
|
||||
}, []);
|
||||
|
||||
const loadShelves = useCallback(() => {
|
||||
fetch("/api/v1/admin/library/shelves", { credentials: "include" })
|
||||
|
|
@ -84,50 +28,8 @@ export default function SettingsPage() {
|
|||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
loadTokens();
|
||||
loadShelves();
|
||||
fetch("/api/v1/auth/me", { credentials: "include" })
|
||||
.then((r) => r.json())
|
||||
.then((d) => setAdminEmail(d.user?.email ?? ""))
|
||||
.catch(() => undefined);
|
||||
}, [loadTokens, loadShelves]);
|
||||
|
||||
async function changePassword() {
|
||||
setPwMsg(null);
|
||||
setPwErr(null);
|
||||
if (!currentPassword || !newPassword) {
|
||||
setPwErr("Vul huidig en nieuw wachtwoord in");
|
||||
return;
|
||||
}
|
||||
if (newPassword.length < 8) {
|
||||
setPwErr("Nieuw wachtwoord moet minstens 8 tekens zijn");
|
||||
return;
|
||||
}
|
||||
if (newPassword !== confirmPassword) {
|
||||
setPwErr("Nieuwe wachtwoorden komen niet overeen");
|
||||
return;
|
||||
}
|
||||
setPwBusy(true);
|
||||
try {
|
||||
const res = await fetch("/api/v1/auth/change-password", {
|
||||
method: "POST",
|
||||
credentials: "include",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ currentPassword, newPassword, confirmPassword }),
|
||||
});
|
||||
const data = await res.json().catch(() => ({}));
|
||||
if (!res.ok) {
|
||||
setPwErr(data.error?.message ?? "Wachtwoord wijzigen mislukt");
|
||||
return;
|
||||
}
|
||||
setCurrentPassword("");
|
||||
setNewPassword("");
|
||||
setConfirmPassword("");
|
||||
setPwMsg("Wachtwoord gewijzigd. Andere sessies zijn uitgelogd.");
|
||||
} finally {
|
||||
setPwBusy(false);
|
||||
}
|
||||
}
|
||||
}, [loadShelves]);
|
||||
|
||||
async function createShelf() {
|
||||
if (!newShelfName.trim()) return;
|
||||
|
|
@ -160,255 +62,51 @@ export default function SettingsPage() {
|
|||
loadShelves();
|
||||
}
|
||||
|
||||
async function createAddonToken() {
|
||||
const res = await fetch("/api/v1/admin/addon-tokens", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
credentials: "include",
|
||||
body: JSON.stringify({ label }),
|
||||
});
|
||||
const data = await res.json();
|
||||
if (!res.ok) {
|
||||
alert(data.error?.message ?? "Aanmaken mislukt");
|
||||
return;
|
||||
}
|
||||
setAddonToken(data.token);
|
||||
setInstallUrl(`${MASTER_URL}/stremio/${data.token}/manifest.json`);
|
||||
loadTokens();
|
||||
}
|
||||
|
||||
async function revokeToken(id: string) {
|
||||
if (!confirm("Addon deactiveren? Bestaande Stremio-installaties stoppen met werken.")) return;
|
||||
await fetch(`/api/v1/admin/addon-tokens/${id}/revoke`, {
|
||||
method: "POST",
|
||||
credentials: "include",
|
||||
});
|
||||
loadTokens();
|
||||
}
|
||||
|
||||
async function activateToken(id: string) {
|
||||
await fetch(`/api/v1/admin/addon-tokens/${id}/activate`, {
|
||||
method: "POST",
|
||||
credentials: "include",
|
||||
});
|
||||
loadTokens();
|
||||
}
|
||||
|
||||
async function deleteToken(id: string) {
|
||||
if (!confirm("Addon definitief verwijderen? Dit kan niet ongedaan worden gemaakt.")) return;
|
||||
await fetch(`/api/v1/admin/addon-tokens/${id}`, {
|
||||
method: "DELETE",
|
||||
credentials: "include",
|
||||
});
|
||||
if (iptvTokenId === id) {
|
||||
setIptvTokenId(null);
|
||||
setIptv(emptyIptv());
|
||||
}
|
||||
loadTokens();
|
||||
}
|
||||
|
||||
async function openIptv(tokenId: string) {
|
||||
setIptvTokenId(tokenId);
|
||||
setIptvMsg(null);
|
||||
setIptvErr(null);
|
||||
setIptvBusy(true);
|
||||
try {
|
||||
const res = await fetch(`/api/v1/admin/addon-tokens/${tokenId}/iptv`, {
|
||||
credentials: "include",
|
||||
});
|
||||
const data = await res.json();
|
||||
if (!res.ok) {
|
||||
setIptvErr(data.error?.message ?? "Laden mislukt");
|
||||
setIptv(emptyIptv());
|
||||
return;
|
||||
}
|
||||
if (data.iptv) {
|
||||
setIptv({
|
||||
label: data.iptv.label ?? "",
|
||||
baseUrl: data.iptv.baseUrl ?? "",
|
||||
username: data.iptv.username ?? "",
|
||||
password: "",
|
||||
enableLive: data.iptv.enableLive ?? true,
|
||||
enableVod: data.iptv.enableVod ?? true,
|
||||
enableSeries: data.iptv.enableSeries ?? true,
|
||||
lastOkAt: data.iptv.lastOkAt,
|
||||
lastError: data.iptv.lastError,
|
||||
hasPassword: data.iptv.hasPassword,
|
||||
});
|
||||
} else {
|
||||
setIptv(emptyIptv());
|
||||
}
|
||||
} finally {
|
||||
setIptvBusy(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function saveIptv() {
|
||||
if (!iptvTokenId) return;
|
||||
setIptvBusy(true);
|
||||
setIptvMsg(null);
|
||||
setIptvErr(null);
|
||||
try {
|
||||
const res = await fetch(`/api/v1/admin/addon-tokens/${iptvTokenId}/iptv`, {
|
||||
method: "PUT",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
credentials: "include",
|
||||
body: JSON.stringify({
|
||||
label: iptv.label || undefined,
|
||||
baseUrl: iptv.baseUrl,
|
||||
username: iptv.username,
|
||||
password: iptv.password || undefined,
|
||||
enableLive: iptv.enableLive,
|
||||
enableVod: iptv.enableVod,
|
||||
enableSeries: iptv.enableSeries,
|
||||
}),
|
||||
});
|
||||
const data = await res.json();
|
||||
if (!res.ok) {
|
||||
setIptvErr(data.error?.message ?? "Opslaan mislukt");
|
||||
return;
|
||||
}
|
||||
setIptvMsg(
|
||||
`Verbonden · ${data.iptv?.liveCategories ?? 0} live-bouquets. Herlaad de Stremio-addon om Live TV te zien.`
|
||||
);
|
||||
setIptv((s) => ({ ...s, password: "", hasPassword: true, lastError: null }));
|
||||
loadTokens();
|
||||
await openIptv(iptvTokenId);
|
||||
} finally {
|
||||
setIptvBusy(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function testIptv() {
|
||||
if (!iptvTokenId) return;
|
||||
setIptvBusy(true);
|
||||
setIptvMsg(null);
|
||||
setIptvErr(null);
|
||||
try {
|
||||
const res = await fetch(`/api/v1/admin/addon-tokens/${iptvTokenId}/iptv/test`, {
|
||||
method: "POST",
|
||||
credentials: "include",
|
||||
});
|
||||
const data = await res.json();
|
||||
if (!res.ok) {
|
||||
setIptvErr(data.error?.message ?? "Test mislukt");
|
||||
return;
|
||||
}
|
||||
setIptvMsg(
|
||||
`OK · status ${data.status}` +
|
||||
(data.expDate ? ` · exp ${data.expDate}` : "") +
|
||||
` · live ${data.liveCategories} · films ${data.vodCategories} · series ${data.seriesCategories}`
|
||||
);
|
||||
loadTokens();
|
||||
} finally {
|
||||
setIptvBusy(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteIptv() {
|
||||
if (!iptvTokenId) return;
|
||||
if (!confirm("IPTV-userline ontkoppelen van deze addon?")) return;
|
||||
setIptvBusy(true);
|
||||
setIptvErr(null);
|
||||
try {
|
||||
await fetch(`/api/v1/admin/addon-tokens/${iptvTokenId}/iptv`, {
|
||||
method: "DELETE",
|
||||
credentials: "include",
|
||||
});
|
||||
setIptv(emptyIptv());
|
||||
setIptvMsg("IPTV ontkoppeld");
|
||||
loadTokens();
|
||||
} finally {
|
||||
setIptvBusy(false);
|
||||
}
|
||||
}
|
||||
|
||||
const activeToken = tokens.find((t) => t.id === iptvTokenId);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Nav />
|
||||
<div className="container">
|
||||
<div className="page-header">
|
||||
<div>
|
||||
<div className="page-kicker">System</div>
|
||||
<div className="page-kicker">Library structure</div>
|
||||
<h1>Instellingen</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card" style={{ marginBottom: "2rem" }}>
|
||||
<h2 style={{ fontSize: "1rem", color: "#fafafa", textTransform: "none", marginBottom: "0.5rem" }}>
|
||||
Account
|
||||
</h2>
|
||||
<p className="muted" style={{ marginBottom: "1rem" }}>
|
||||
Ingelogd als <strong style={{ color: "var(--text-bright)" }}>{adminEmail || "…"}</strong>.
|
||||
Wijzig hier je admin-wachtwoord (min. 8 tekens).
|
||||
<section className="stack-section">
|
||||
<div className="section-head">
|
||||
<h2 className="section-title">Bibliotheek-planken</h2>
|
||||
<p className="muted">
|
||||
Namen zoals Kids Films of NL Series. Op Nodes koppel je scanpaden aan een plank —
|
||||
zelfde plank op meerdere nodes = één Stremio-lijst.
|
||||
</p>
|
||||
{pwErr && <div className="error">{pwErr}</div>}
|
||||
{pwMsg && <p className="muted" style={{ color: "var(--ok)", marginBottom: "0.75rem" }}>{pwMsg}</p>}
|
||||
<div className="form-group">
|
||||
<label>Huidig wachtwoord</label>
|
||||
<input
|
||||
type="password"
|
||||
value={currentPassword}
|
||||
onChange={(e) => setCurrentPassword(e.target.value)}
|
||||
autoComplete="current-password"
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Nieuw wachtwoord</label>
|
||||
<input
|
||||
type="password"
|
||||
value={newPassword}
|
||||
onChange={(e) => setNewPassword(e.target.value)}
|
||||
autoComplete="new-password"
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Bevestig nieuw wachtwoord</label>
|
||||
<input
|
||||
type="password"
|
||||
value={confirmPassword}
|
||||
onChange={(e) => setConfirmPassword(e.target.value)}
|
||||
autoComplete="new-password"
|
||||
/>
|
||||
</div>
|
||||
<button type="button" onClick={changePassword} disabled={pwBusy}>
|
||||
{pwBusy ? "Bezig…" : "Wachtwoord wijzigen"}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="card" style={{ marginBottom: "2rem" }}>
|
||||
<h2 style={{ fontSize: "1rem", color: "#fafafa", textTransform: "none", marginBottom: "0.5rem" }}>
|
||||
Bibliotheek-planken (Stremio)
|
||||
</h2>
|
||||
<p style={{ color: "#a1a1aa", marginBottom: "1rem", fontSize: "0.875rem" }}>
|
||||
Maak namen zoals <strong>Kids Films</strong> of <strong>NL Series</strong>. Op Nodes koppel je
|
||||
scanpaden aan een plank — content van alle nodes met dezelfde plank komt in één Stremio-lijst.
|
||||
</p>
|
||||
<div style={{ display: "flex", gap: "0.75rem", flexWrap: "wrap", marginBottom: "1rem" }}>
|
||||
<div className="card">
|
||||
<h3 className="card-subtitle">Plank toevoegen</h3>
|
||||
<div className="inline-form">
|
||||
<input
|
||||
value={newShelfName}
|
||||
onChange={(e) => setNewShelfName(e.target.value)}
|
||||
placeholder="bijv. Kids Films"
|
||||
style={{ flex: "1 1 200px", marginBottom: 0 }}
|
||||
/>
|
||||
<select
|
||||
value={newShelfKind}
|
||||
onChange={(e) => setNewShelfKind(e.target.value as "MOVIE" | "SERIES")}
|
||||
style={{
|
||||
background: "#0f1117",
|
||||
border: "1px solid #2a2d3a",
|
||||
color: "#fafafa",
|
||||
borderRadius: 8,
|
||||
padding: "0.5rem 0.75rem",
|
||||
}}
|
||||
>
|
||||
<option value="MOVIE">Films</option>
|
||||
<option value="SERIES">Series</option>
|
||||
</select>
|
||||
<button onClick={createShelf}>Plank toevoegen</button>
|
||||
<button type="button" onClick={createShelf}>
|
||||
Toevoegen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card">
|
||||
<h3 className="card-subtitle">Bestaande planken</h3>
|
||||
|
||||
<div className="desktop-table">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
@ -424,28 +122,30 @@ export default function SettingsPage() {
|
|||
<tr key={s.id}>
|
||||
<td>{s.name}</td>
|
||||
<td>{s.kind === "MOVIE" ? "Films" : "Series"}</td>
|
||||
<td style={{ fontSize: "0.8rem", maxWidth: 360 }}>
|
||||
{s.paths?.length
|
||||
? s.paths.map((p) => (
|
||||
<div key={`${p.nodeName}:${p.path}`} style={{ color: "#a1a1aa", marginBottom: 2 }}>
|
||||
<span style={{ color: "#71717a" }}>{p.nodeName}:</span> {p.path}
|
||||
<td className="path-cell">
|
||||
{s.paths?.length ? (
|
||||
s.paths.map((p) => (
|
||||
<div key={`${p.nodeName}:${p.path}`} className="path-line">
|
||||
<span className="muted">{p.nodeName}:</span> {p.path}
|
||||
</div>
|
||||
))
|
||||
: (
|
||||
<span style={{ color: "#71717a" }}>{s.scanRootCount} pad(en)</span>
|
||||
) : (
|
||||
<span className="muted">{s.scanRootCount} pad(en)</span>
|
||||
)}
|
||||
</td>
|
||||
<td>
|
||||
{s.mediaFileCount}
|
||||
{s.scanRootCount > 0 && s.mediaFileCount === 0 && (
|
||||
<div style={{ color: "#f59e0b", fontSize: "0.75rem" }}>
|
||||
Pad gekoppeld, nog geen scan/shelf-match
|
||||
</div>
|
||||
<div className="warn-hint">Pad gekoppeld, nog geen scan</div>
|
||||
)}
|
||||
</td>
|
||||
<td>
|
||||
{s.slug !== "films" && s.slug !== "series" && (
|
||||
<button className="danger" onClick={() => deleteShelf(s.id, s.name)}>
|
||||
<button
|
||||
type="button"
|
||||
className="danger"
|
||||
onClick={() => deleteShelf(s.id, s.name)}
|
||||
>
|
||||
Verwijderen
|
||||
</button>
|
||||
)}
|
||||
|
|
@ -454,7 +154,7 @@ export default function SettingsPage() {
|
|||
))}
|
||||
{shelves.length === 0 && (
|
||||
<tr>
|
||||
<td colSpan={5} style={{ color: "#71717a", textAlign: "center" }}>
|
||||
<td colSpan={5} className="muted" style={{ textAlign: "center" }}>
|
||||
Laden…
|
||||
</td>
|
||||
</tr>
|
||||
|
|
@ -463,278 +163,49 @@ export default function SettingsPage() {
|
|||
</table>
|
||||
</div>
|
||||
|
||||
<div className="card" style={{ marginBottom: "2rem" }}>
|
||||
<h2 style={{ fontSize: "1rem", color: "#fafafa", textTransform: "none", marginBottom: "1rem" }}>
|
||||
Nieuwe Stremio-addon
|
||||
</h2>
|
||||
<p style={{ color: "#a1a1aa", marginBottom: "1rem", fontSize: "0.875rem" }}>
|
||||
Genereer een addon-token om de bibliotheek in Stremio te installeren. Bewaar de URL —
|
||||
die wordt maar één keer getoond. Koppel daarna optioneel een Xtream-userline voor Live TV + EPG.
|
||||
</p>
|
||||
<div className="form-group">
|
||||
<label>Label</label>
|
||||
<input value={label} onChange={(e) => setLabel(e.target.value)} placeholder="bijv. Thuis / TV" />
|
||||
</div>
|
||||
<button onClick={createAddonToken}>Addon aanmaken</button>
|
||||
{addonToken && (
|
||||
<>
|
||||
<p style={{ fontSize: "0.875rem", color: "#a1a1aa", marginTop: "1rem" }}>
|
||||
Installatie-URL (nu kopiëren):
|
||||
</p>
|
||||
<div className="token-display">{installUrl}</div>
|
||||
<p style={{ fontSize: "0.875rem", color: "#71717a", marginTop: "0.5rem" }}>
|
||||
Stremio → Addons → Community Addons → URL invoeren
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="card" style={{ marginBottom: "2rem" }}>
|
||||
<h2 style={{ fontSize: "1rem", color: "#fafafa", textTransform: "none", marginBottom: "1rem" }}>
|
||||
Bestaande addons
|
||||
</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Label</th>
|
||||
<th>Status</th>
|
||||
<th>IPTV</th>
|
||||
<th>Aangemaakt</th>
|
||||
<th>Acties</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{tokens.map((t) => (
|
||||
<tr key={t.id} style={iptvTokenId === t.id ? { background: "#14161f" } : undefined}>
|
||||
<td>{t.label || "—"}</td>
|
||||
<td>
|
||||
<span className={`status ${t.revoked ? "revoked" : "online"}`}>
|
||||
{t.revoked ? "Inactief" : "Actief"}
|
||||
<div className="list-cards">
|
||||
{shelves.map((s) => (
|
||||
<article key={s.id} className="list-card">
|
||||
<div className="list-card-top">
|
||||
<strong>{s.name}</strong>
|
||||
<span className="status offline">
|
||||
{s.kind === "MOVIE" ? "Films" : "Series"}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
{t.hasIptv ? (
|
||||
<span className={`status ${t.iptvOk ? "online" : "revoked"}`}>
|
||||
{t.iptvOk ? "Live TV" : "Fout"}
|
||||
</span>
|
||||
) : (
|
||||
<span className="status offline">Geen</span>
|
||||
)}
|
||||
</td>
|
||||
<td>{new Date(t.createdAt).toLocaleString()}</td>
|
||||
<td style={{ display: "flex", gap: "0.5rem", flexWrap: "wrap" }}>
|
||||
<button
|
||||
onClick={() => openIptv(t.id)}
|
||||
style={{ background: "#0e7490" }}
|
||||
title="Xtream / XUI userline"
|
||||
>
|
||||
IPTV
|
||||
</button>
|
||||
{t.revoked ? (
|
||||
<button onClick={() => activateToken(t.id)} style={{ background: "#166534" }}>
|
||||
Activeren
|
||||
</button>
|
||||
) : (
|
||||
<button onClick={() => revokeToken(t.id)} style={{ background: "#b45309" }}>
|
||||
Deactiveren
|
||||
</button>
|
||||
)}
|
||||
<button className="danger" onClick={() => deleteToken(t.id)}>
|
||||
Verwijderen
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</div>
|
||||
<div className="list-card-meta">
|
||||
<span>{s.mediaFileCount} bestanden</span>
|
||||
<span>{s.scanRootCount} pad(en)</span>
|
||||
</div>
|
||||
{s.paths?.length ? (
|
||||
<div className="path-block">
|
||||
{s.paths.map((p) => (
|
||||
<div key={`${p.nodeName}:${p.path}`} className="path-line">
|
||||
<span className="muted">{p.nodeName}</span>
|
||||
<code>{p.path}</code>
|
||||
</div>
|
||||
))}
|
||||
{tokens.length === 0 && (
|
||||
<tr>
|
||||
<td colSpan={5} style={{ textAlign: "center", color: "#71717a" }}>
|
||||
Nog geen addons aangemaakt
|
||||
</td>
|
||||
</tr>
|
||||
</div>
|
||||
) : null}
|
||||
{s.scanRootCount > 0 && s.mediaFileCount === 0 && (
|
||||
<div className="warn-hint">Pad gekoppeld, nog geen scan</div>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
<p style={{ fontSize: "0.8rem", color: "#71717a", marginTop: "1rem" }}>
|
||||
Deactiveren of verwijderen zorgt dat de bijbehorende Stremio-addon niet meer werkt.
|
||||
De installatie-URL zelf wordt om veiligheidsredenen niet opnieuw getoond.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{iptvTokenId && (
|
||||
<div
|
||||
className="card"
|
||||
style={{
|
||||
marginBottom: "2rem",
|
||||
borderColor: "#155e75",
|
||||
background:
|
||||
"linear-gradient(145deg, #12151c 0%, #152028 55%, #1a1d27 100%)",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "flex-start",
|
||||
gap: "1rem",
|
||||
marginBottom: "1.25rem",
|
||||
flexWrap: "wrap",
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<h2
|
||||
style={{
|
||||
fontSize: "1.125rem",
|
||||
color: "#fafafa",
|
||||
textTransform: "none",
|
||||
marginBottom: "0.35rem",
|
||||
letterSpacing: 0,
|
||||
}}
|
||||
>
|
||||
IPTV · Xtream / XUI
|
||||
</h2>
|
||||
<p style={{ color: "#94a3b8", fontSize: "0.875rem", maxWidth: "40rem" }}>
|
||||
Userline voor addon{" "}
|
||||
<strong style={{ color: "#e2e8f0" }}>{activeToken?.label || iptvTokenId.slice(0, 8)}</strong>
|
||||
. Live-zenders met icoon + EPG, plus optioneel IPTV-films en -series. Alleen deze
|
||||
Stremio-installatie ziet deze line.
|
||||
</p>
|
||||
</div>
|
||||
{s.slug !== "films" && s.slug !== "series" && (
|
||||
<div className="action-row">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setIptvTokenId(null);
|
||||
setIptv(emptyIptv());
|
||||
setIptvMsg(null);
|
||||
setIptvErr(null);
|
||||
}}
|
||||
style={{ background: "#374151" }}
|
||||
className="danger"
|
||||
onClick={() => deleteShelf(s.id, s.name)}
|
||||
>
|
||||
Sluiten
|
||||
Verwijderen
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))",
|
||||
gap: "1rem",
|
||||
}}
|
||||
>
|
||||
<div className="form-group" style={{ marginBottom: 0 }}>
|
||||
<label>Label (optioneel)</label>
|
||||
<input
|
||||
value={iptv.label}
|
||||
onChange={(e) => setIptv({ ...iptv, label: e.target.value })}
|
||||
placeholder="bijv. Thuis XUI"
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group" style={{ marginBottom: 0, gridColumn: "1 / -1" }}>
|
||||
<label>Server-URL</label>
|
||||
<input
|
||||
value={iptv.baseUrl}
|
||||
onChange={(e) => setIptv({ ...iptv, baseUrl: e.target.value })}
|
||||
placeholder="http://host:port of https://iptv.example.com"
|
||||
autoComplete="off"
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group" style={{ marginBottom: 0 }}>
|
||||
<label>Gebruikersnaam</label>
|
||||
<input
|
||||
value={iptv.username}
|
||||
onChange={(e) => setIptv({ ...iptv, username: e.target.value })}
|
||||
autoComplete="off"
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group" style={{ marginBottom: 0 }}>
|
||||
<label>Wachtwoord {iptv.hasPassword ? "(leeg = behouden)" : ""}</label>
|
||||
<input
|
||||
type="password"
|
||||
value={iptv.password}
|
||||
onChange={(e) => setIptv({ ...iptv, password: e.target.value })}
|
||||
placeholder={iptv.hasPassword ? "••••••••" : ""}
|
||||
autoComplete="new-password"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
gap: "1.25rem",
|
||||
flexWrap: "wrap",
|
||||
margin: "1.25rem 0",
|
||||
padding: "0.85rem 1rem",
|
||||
background: "#0f1117",
|
||||
borderRadius: 10,
|
||||
border: "1px solid #2a2d3a",
|
||||
}}
|
||||
>
|
||||
{(
|
||||
[
|
||||
["enableLive", "Live TV + EPG"],
|
||||
["enableVod", "IPTV Films"],
|
||||
["enableSeries", "IPTV Series"],
|
||||
] as const
|
||||
).map(([key, text]) => (
|
||||
<label
|
||||
key={key}
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "0.5rem",
|
||||
fontSize: "0.875rem",
|
||||
color: "#e4e4e7",
|
||||
cursor: "pointer",
|
||||
}}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={iptv[key]}
|
||||
onChange={(e) => setIptv({ ...iptv, [key]: e.target.checked })}
|
||||
style={{ width: "auto", margin: 0 }}
|
||||
/>
|
||||
{text}
|
||||
</label>
|
||||
)}
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{(iptv.lastOkAt || iptv.lastError) && (
|
||||
<p style={{ fontSize: "0.8rem", color: "#71717a", marginBottom: "1rem" }}>
|
||||
{iptv.lastOkAt && <>Laatst OK: {new Date(iptv.lastOkAt).toLocaleString()} </>}
|
||||
{iptv.lastError && (
|
||||
<span style={{ color: "#f87171" }}>· Fout: {iptv.lastError}</span>
|
||||
)}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{iptvMsg && (
|
||||
<p style={{ color: "#6ee7b7", fontSize: "0.875rem", marginBottom: "0.75rem" }}>{iptvMsg}</p>
|
||||
)}
|
||||
{iptvErr && (
|
||||
<p className="error" style={{ marginBottom: "0.75rem" }}>
|
||||
{iptvErr}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div style={{ display: "flex", gap: "0.5rem", flexWrap: "wrap" }}>
|
||||
<button onClick={saveIptv} disabled={iptvBusy}>
|
||||
{iptvBusy ? "Bezig…" : "Opslaan & verbinden"}
|
||||
</button>
|
||||
<button
|
||||
onClick={testIptv}
|
||||
disabled={iptvBusy || !iptv.hasPassword}
|
||||
style={{ background: "#166534" }}
|
||||
>
|
||||
Testen
|
||||
</button>
|
||||
{iptv.hasPassword && (
|
||||
<button className="danger" onClick={deleteIptv} disabled={iptvBusy}>
|
||||
Ontkoppelen
|
||||
</button>
|
||||
)}
|
||||
{shelves.length === 0 && <p className="muted">Laden…</p>}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -74,22 +74,17 @@ export default function StreamsPage() {
|
|||
<div className="container">
|
||||
<div className="page-header">
|
||||
<div>
|
||||
<div className="page-kicker">Realtime · Plex-style</div>
|
||||
<div className="page-kicker">Realtime</div>
|
||||
<h1>Actieve streams</h1>
|
||||
</div>
|
||||
<div className="muted" style={{ fontFamily: "var(--font-mono)", fontSize: "0.8rem" }}>
|
||||
{streams.length} live
|
||||
</div>
|
||||
<div className="live-badge">{streams.length} live</div>
|
||||
</div>
|
||||
|
||||
<div className="card" style={{ marginBottom: "1rem" }}>
|
||||
<p className="muted" style={{ margin: 0 }}>
|
||||
Eén rij per kijker + titel. Alleen echte streams (>512 KB). Stopt iemand → verdwijnt
|
||||
binnen ~3 minuten. Voortgang ≈ gestreamde bytes / bestandsgrootte.
|
||||
<p className="muted page-lead">
|
||||
Eén rij per kijker. Stopt iemand → verdwijnt binnen ~3 min. Voortgang ≈ bytes / bestand.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="card">
|
||||
<div className="desktop-table card">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
@ -99,7 +94,7 @@ export default function StreamsPage() {
|
|||
<th>Node</th>
|
||||
<th>Kwaliteit</th>
|
||||
<th>Activiteit</th>
|
||||
<th>Acties</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
|
@ -108,36 +103,25 @@ export default function StreamsPage() {
|
|||
return (
|
||||
<tr key={s.id}>
|
||||
<td>
|
||||
<strong style={{ color: "var(--accent)" }}>{s.viewer}</strong>
|
||||
<strong className="viewer-name">{s.viewer}</strong>
|
||||
</td>
|
||||
<td>
|
||||
<div>{s.title}</div>
|
||||
<div className="muted" style={{ fontSize: "0.75rem", marginTop: "0.2rem" }}>
|
||||
{formatBytes(s.bytesSent)} gestreamd
|
||||
</div>
|
||||
<div className="muted tiny">{formatBytes(s.bytesSent)} gestreamd</div>
|
||||
</td>
|
||||
<td style={{ minWidth: 140 }}>
|
||||
<div className="progress-track" title={`${pct.toFixed(0)}%`}>
|
||||
<div className="progress-fill" style={{ width: `${pct}%` }} />
|
||||
</div>
|
||||
<div
|
||||
className="muted"
|
||||
style={{
|
||||
fontFamily: "var(--font-mono)",
|
||||
fontSize: "0.7rem",
|
||||
marginTop: "0.35rem",
|
||||
}}
|
||||
>
|
||||
<div className="muted mono tiny">
|
||||
{s.progressPercent != null ? `${pct.toFixed(0)}%` : "—"}
|
||||
</div>
|
||||
</td>
|
||||
<td>{s.node}</td>
|
||||
<td>{s.resolution ?? "-"}</td>
|
||||
<td style={{ fontFamily: "var(--font-mono)", fontSize: "0.75rem" }}>
|
||||
{relativeTime(s.lastActivity)}
|
||||
</td>
|
||||
<td className="mono tiny">{relativeTime(s.lastActivity)}</td>
|
||||
<td>
|
||||
<button className="danger" onClick={() => revoke(s.id)}>
|
||||
<button type="button" className="danger" onClick={() => revoke(s.id)}>
|
||||
Intrekken
|
||||
</button>
|
||||
</td>
|
||||
|
|
@ -146,7 +130,7 @@ export default function StreamsPage() {
|
|||
})}
|
||||
{streams.length === 0 && (
|
||||
<tr>
|
||||
<td colSpan={7} style={{ textAlign: "center" }} className="muted">
|
||||
<td colSpan={7} className="muted" style={{ textAlign: "center" }}>
|
||||
Niemand aan het kijken
|
||||
</td>
|
||||
</tr>
|
||||
|
|
@ -154,6 +138,45 @@ export default function StreamsPage() {
|
|||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div className="list-cards">
|
||||
{streams.map((s) => {
|
||||
const pct = s.progressPercent ?? 0;
|
||||
return (
|
||||
<article key={s.id} className="list-card stream-card">
|
||||
<div className="list-card-top">
|
||||
<strong className="viewer-name">{s.viewer}</strong>
|
||||
<span className="mono tiny">{relativeTime(s.lastActivity)}</span>
|
||||
</div>
|
||||
<div className="stream-title">{s.title}</div>
|
||||
<div className="progress-track" title={`${pct.toFixed(0)}%`}>
|
||||
<div className="progress-fill" style={{ width: `${pct}%` }} />
|
||||
</div>
|
||||
<div className="list-card-meta">
|
||||
<span className="mono">
|
||||
{s.progressPercent != null ? `${pct.toFixed(0)}%` : "—"} ·{" "}
|
||||
{formatBytes(s.bytesSent)}
|
||||
</span>
|
||||
<span>
|
||||
{s.resolution ?? "?"} · {s.node}
|
||||
</span>
|
||||
</div>
|
||||
<div className="action-row">
|
||||
<button type="button" className="danger" onClick={() => revoke(s.id)}>
|
||||
Intrekken
|
||||
</button>
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
})}
|
||||
{streams.length === 0 && (
|
||||
<div className="card">
|
||||
<p className="muted" style={{ margin: 0, textAlign: "center" }}>
|
||||
Niemand aan het kijken
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -4,13 +4,25 @@ import Link from "next/link";
|
|||
import { useEffect, useState } from "react";
|
||||
import { usePathname, useRouter } from "next/navigation";
|
||||
|
||||
const links = [
|
||||
/** Volledige desktop-navigatie — logische groepen: overzicht → infra → bibliotheek → live → mensen → systeem */
|
||||
const desktopLinks = [
|
||||
{ href: "/dashboard", label: "Dashboard" },
|
||||
{ href: "/nodes", label: "Nodes" },
|
||||
{ href: "/movies", label: "Movies" },
|
||||
{ href: "/series", label: "Series" },
|
||||
{ href: "/streams", label: "Streams" },
|
||||
{ href: "/accounts", label: "Accounts" },
|
||||
{ href: "/settings", label: "Instellingen" },
|
||||
];
|
||||
|
||||
/** Bottom-nav (max 6): Series via drawer/desktop */
|
||||
const mobileLinks = [
|
||||
{ href: "/dashboard", label: "Home", short: "Home" },
|
||||
{ href: "/nodes", label: "Nodes", short: "Nodes" },
|
||||
{ href: "/movies", label: "Movies", short: "Films" },
|
||||
{ href: "/series", label: "Series", short: "Series" },
|
||||
{ href: "/streams", label: "Streams", short: "Live" },
|
||||
{ href: "/settings", label: "Instellingen", short: "Inst." },
|
||||
{ href: "/accounts", label: "Accounts", short: "Acc." },
|
||||
{ href: "/settings", label: "Instellingen", short: "Set." },
|
||||
];
|
||||
|
||||
export function Nav() {
|
||||
|
|
@ -36,6 +48,8 @@ export function Nav() {
|
|||
router.push("/");
|
||||
}
|
||||
|
||||
const isActive = (href: string) => pathname === href || pathname.startsWith(`${href}/`);
|
||||
|
||||
return (
|
||||
<>
|
||||
<nav className="topnav">
|
||||
|
|
@ -48,8 +62,8 @@ export function Nav() {
|
|||
</Link>
|
||||
|
||||
<div className="topnav-links topnav-links-desktop">
|
||||
{links.map((l) => (
|
||||
<Link key={l.href} href={l.href} className={pathname === l.href ? "active" : ""}>
|
||||
{desktopLinks.map((l) => (
|
||||
<Link key={l.href} href={l.href} className={isActive(l.href) ? "active" : ""}>
|
||||
{l.label}
|
||||
</Link>
|
||||
))}
|
||||
|
|
@ -83,11 +97,11 @@ export function Nav() {
|
|||
</button>
|
||||
</div>
|
||||
<div className="nav-drawer-links">
|
||||
{links.map((l) => (
|
||||
{desktopLinks.map((l) => (
|
||||
<Link
|
||||
key={l.href}
|
||||
href={l.href}
|
||||
className={pathname === l.href ? "active" : ""}
|
||||
className={isActive(l.href) ? "active" : ""}
|
||||
onClick={() => setMenuOpen(false)}
|
||||
>
|
||||
{l.label}
|
||||
|
|
@ -100,8 +114,8 @@ export function Nav() {
|
|||
</aside>
|
||||
|
||||
<nav className="bottomnav" aria-label="Hoofdnavigatie">
|
||||
{links.map((l) => (
|
||||
<Link key={l.href} href={l.href} className={pathname === l.href ? "active" : ""}>
|
||||
{mobileLinks.map((l) => (
|
||||
<Link key={l.href} href={l.href} className={isActive(l.href) ? "active" : ""}>
|
||||
<span className="bottomnav-dot" aria-hidden />
|
||||
<span>{l.short}</span>
|
||||
</Link>
|
||||
|
|
|
|||
Loading…
Reference in a new issue