remco/EpicNext-Cms
1
1 Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Translate admin panel to all 6 languages

Browse Source
This commit is contained in:
openhands committed 2026-07-04 21:21:15 +02:00
1 parent f381aa987f
commit befa4ec282
63 files changed
+9353 -1443
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/app/admin/radio/api-keys/page.tsx
+43 -42
View File
@@ -3,6 +3,7 @@ import { createApiKey, deleteApiKey, toggleApiKey } from "@/actions/admin-radio-
import { StatusCard } from "@/components/admin/dashboard";
import { prisma } from "@/lib/prisma";
import { Key } from "lucide-react";
import { getTranslations } from "next-intl/server";
export const dynamic = "force-dynamic";
@@ -21,15 +22,16 @@ type ApiKey = {
};
function formatDate(d: Date | null): string {
return d ? d.toISOString().slice(0, 16).replace("T", " ") : "—";
return d ? d.toISOString().slice(0, 16).replace("T", " ") : "\u2014";
}
/** Show only the first 8 chars of the secret; the rest stays masked. */
function maskKey(key: string): string {
return key.length > 8 ? `${key.slice(0, 8)}…` : key;
return key.length > 8 ? `${key.slice(0, 8)}\u2026` : key;
}
export default async function AdminRadioApiKeysPage() {
const t = await getTranslations("pages.admin.radio");
let keys: ApiKey[] = [];
let dbError = false;
@@ -66,13 +68,13 @@ export default async function AdminRadioApiKeysPage() {
return (
<main>
<nav className="text-xs text-gray-500 dark:text-gray-400 mb-2">
<Link href="/admin/radio">Radio</Link> ·{" "}
<Link href="/admin/radio/settings">Settings</Link> ·{" "}
<Link href="/admin/radio/api-keys">API Keys</Link> ·{" "}
<Link href="/admin/radio/autodj">AutoDJ</Link> ·{" "}
<Link href="/admin/radio/embed">Embed</Link> ·{" "}
<Link href="/admin/radio/points">Points</Link> ·{" "}
<Link href="/admin/radio/monitoring">Monitoring</Link>
<Link href="/admin/radio">{t("title")}</Link> ·{" "}
<Link href="/admin/radio/settings">{t("settings")}</Link> ·{" "}
<Link href="/admin/radio/api-keys">{t("apiKeys")}</Link> ·{" "}
<Link href="/admin/radio/autodj">{t("autoDj")}</Link> ·{" "}
<Link href="/admin/radio/embed">{t("embed")}</Link> ·{" "}
<Link href="/admin/radio/points">{t("points")}</Link> ·{" "}
<Link href="/admin/radio/monitoring">{t("monitoring")}</Link>
</nav>
<section className="mt-6">
@@ -81,52 +83,51 @@ export default async function AdminRadioApiKeysPage() {
<Key size={20} className="text-[var(--color-primary)]" />
</div>
<div>
<h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">Radio API Keys</h1>
<p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">API keys for external radio integrations (<code>radio_api_keys</code>). Keys are generated server-side and shown masked — copy the full value from the database when first issued.</p>
<h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">{t("apiKeysForm.title")}</h1>
<p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">{t("apiKeysForm.subtitle")}</p>
</div>
</div>
{dbError ? (
<div className="admin-card" style={{ marginTop: "1rem" }}>
<p className="text-xs text-gray-500 dark:text-gray-400 m-0">
Could not load API keys (database unavailable).
{t("apiKeysForm.dbError")}
</p>
</div>
) : (
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
<StatusCard label="Total keys" value={total} icon="🔑" />
<StatusCard label={t("apiKeysForm.totalKeys")} value={total} icon="\u{1F511}" />
<StatusCard
label="Active"
label={t("apiKeysForm.active")}
value={activeCount}
state={activeCount > 0 ? "ok" : "neutral"}
icon="✅"
icon="\u{2705}"
/>
<StatusCard
label="Inactive"
label={t("apiKeysForm.inactive")}
value={inactiveCount}
state={inactiveCount > 0 ? "warn" : "neutral"}
icon="🚫"
icon="\u{1F6AB}"
/>
</div>
)}
</section>
<section className="mt-6">
<h2>Generate key</h2>
<h2>{t("apiKeysForm.generateKey")}</h2>
<p className="text-xs text-gray-500 dark:text-gray-400">
The secret key is generated automatically with cryptographic randomness — you do not enter
it.
{t("apiKeysForm.generateHint")}
</p>
<form action={createApiKey} className="admin-card">
<div className="grid cols-2">
<div>
<label htmlFor="new_name" style={{ display: "block", fontWeight: 700 }}>
Name
{t("apiKeysForm.name")}
</label>
<input
id="new_name"
name="name"
placeholder="AzureCast bridge"
placeholder={t("apiKeysForm.namePlaceholder")}
required
maxLength={255}
style={{ width: "100%" }}
@@ -134,7 +135,7 @@ export default async function AdminRadioApiKeysPage() {
</div>
<div>
<label htmlFor="new_rateLimit" style={{ display: "block", fontWeight: 700 }}>
Rate limit (requests/min)
{t("apiKeysForm.rateLimit")}
</label>
<input
id="new_rateLimit"
@@ -147,12 +148,12 @@ export default async function AdminRadioApiKeysPage() {
</div>
<div style={{ gridColumn: "1 / -1" }}>
<label htmlFor="new_allowedIps" style={{ display: "block", fontWeight: 700 }}>
Allowed IPs (optional)
{t("apiKeysForm.allowedIps")}
</label>
<input
id="new_allowedIps"
name="allowedIps"
placeholder="comma-separated, blank = any"
placeholder={t("apiKeysForm.allowedIpsPlaceholder")}
maxLength={255}
style={{ width: "100%" }}
/>
@@ -160,30 +161,30 @@ export default async function AdminRadioApiKeysPage() {
</div>
<div style={{ marginTop: "0.75rem" }}>
<button type="submit" className="btn btn-primary">
Generate key
{t("apiKeysForm.generate")}
</button>
</div>
</form>
</section>
<section className="mt-6">
<h2 className="admin-section-title">Existing keys ({total})</h2>
<h2 className="admin-section-title">{t("apiKeysForm.existingKeys", { count: total })}</h2>
{total === 0 ? (
<div className="admin-empty">No API keys yet — generate one above.</div>
<div className="admin-empty">{t("apiKeysForm.noKeys")}</div>
) : (
<div className="overflow-x-auto">
<table>
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Key</th>
<th>Allowed IPs</th>
<th>Rate limit</th>
<th>Last used</th>
<th>Expires</th>
<th>Status</th>
<th>Actions</th>
<th>{t("apiKeysForm.colName")}</th>
<th>{t("apiKeysForm.colKey")}</th>
<th>{t("apiKeysForm.colAllowedIps")}</th>
<th>{t("apiKeysForm.colRateLimit")}</th>
<th>{t("apiKeysForm.colLastUsed")}</th>
<th>{t("apiKeysForm.colExpires")}</th>
<th>{t("apiKeysForm.colStatus")}</th>
<th>{t("apiKeysForm.colActions")}</th>
</tr>
</thead>
<tbody>
@@ -192,15 +193,15 @@ export default async function AdminRadioApiKeysPage() {
<td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">{String(k.id)}</td>
<td>{k.name}</td>
<td>
<code title="Only the first 8 characters are shown">{maskKey(k.key)}</code>
<code title={t("apiKeysForm.maskedHint")}>{maskKey(k.key)}</code>
</td>
<td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">{k.allowedIps || "any"}</td>
<td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">{k.allowedIps || t("apiKeysForm.any")}</td>
<td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">{k.rateLimit}/min</td>
<td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">{formatDate(k.lastUsedAt)}</td>
<td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">{formatDate(k.expiresAt)}</td>
<td>
<span className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${k.isActive ? "bg-green-600/20 text-[var(--color-text)]" : "bg-red-500/22 text-[var(--color-text)]"}`}>
{k.isActive ? "active" : "inactive"}
{k.isActive ? t("apiKeysForm.activeLabel") : t("apiKeysForm.inactiveLabel")}
</span>
</td>
<td>
@@ -208,13 +209,13 @@ export default async function AdminRadioApiKeysPage() {
<form action={toggleApiKey}>
<input type="hidden" name="id" value={String(k.id)} />
<button type="submit" className="btn">
{k.isActive ? "Deactivate" : "Activate"}
{k.isActive ? t("apiKeysForm.deactivate") : t("apiKeysForm.activate")}
</button>
</form>
<form action={deleteApiKey}>
<input type="hidden" name="id" value={String(k.id)} />
<button type="submit" className="btn btn-danger">
Delete
{t("apiKeysForm.delete")}
</button>
</form>
</div>
src/app/admin/radio/autodj/page.tsx
+60 -58
View File
@@ -3,6 +3,7 @@ import { createTrack, deleteTrack, toggleTrack } from '@/actions/admin-radio-aut
import { StatusCard } from '@/components/admin/dashboard';
import { prisma } from '@/lib/prisma';
import { Disc3 } from 'lucide-react';
import { getTranslations } from "next-intl/server";
export const dynamic = 'force-dynamic';
@@ -21,19 +22,20 @@ type Track = {
sortOrder: number;
};
/** Render an integer second count as m:ss, or an em dash when unset. */
function formatDuration(seconds: number | null): string {
if (seconds == null || seconds < 0) return '—';
if (seconds == null || seconds < 0) return '\u2014';
const m = Math.floor(seconds / 60);
const s = seconds % 60;
return `${m}:${String(s).padStart(2, '0')}`;
}
function formatDate(d: Date | null): string {
return d ? d.toISOString().slice(0, 16).replace('T', ' ') : '—';
return d ? d.toISOString().slice(0, 16).replace('T', ' ') : '\u2014';
}
export default async function AdminRadioAutoDjPage() {
const t = await getTranslations("pages.admin.radio");
let tracks: Track[] = [];
let dbError = false;
@@ -69,12 +71,12 @@ export default async function AdminRadioAutoDjPage() {
return (
<main>
<nav className="text-xs text-gray-500 dark:text-gray-400 mb-2">
<Link href="/admin/radio">Radio</Link> ·{' '}
<Link href="/admin/radio/settings">Settings</Link> ·{' '}
<Link href="/admin/radio/banners">Banners</Link> ·{' '}
<Link href="/admin/radio/ranks">Ranks</Link> ·{' '}
<Link href="/admin/radio/history">History</Link> ·{' '}
<Link href="/admin/radio/autodj">AutoDJ</Link>
<Link href="/admin/radio">{t("title")}</Link> ·{' '}
<Link href="/admin/radio/settings">{t("settings")}</Link> ·{' '}
<Link href="/admin/radio/banners">{t("banners.title")}</Link> ·{' '}
<Link href="/admin/radio/ranks">{t("ranks")}</Link> ·{' '}
<Link href="/admin/radio/history">{t("history")}</Link> ·{' '}
<Link href="/admin/radio/autodj">{t("autoDj")}</Link>
</nav>
<section className="mt-6">
@@ -83,91 +85,91 @@ export default async function AdminRadioAutoDjPage() {
<Disc3 size={20} className="text-[var(--color-primary)]" />
</div>
<div>
<h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">Radio AutoDJ</h1>
<p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">Fallback playlist (<code>radio_auto_dj_playlist</code>) the radio rotates through when no live DJ is streaming. Ordered by sort order then title.</p>
<h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">{t("autoDjForm.title")}</h1>
<p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">{t("autoDjForm.subtitle")}</p>
</div>
</div>
{dbError ? (
<div className="admin-card mb-6">
<p className="text-xs text-gray-500 dark:text-gray-400 m-0">
Could not load the AutoDJ playlist (database unavailable).
{t("autoDjForm.dbError")}
</p>
</div>
) : (
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
<StatusCard label="Tracks" value={tracks.length} icon="🎵" />
<StatusCard label={t("autoDjForm.tracks")} value={tracks.length} icon="\u{1F3B5}" />
<StatusCard
label="Active"
label={t("autoDjForm.active")}
value={activeCount}
state={activeCount > 0 ? 'ok' : 'neutral'}
icon="▶️"
icon="\u{25B6}\uFE0F"
/>
<StatusCard
label="Inactive"
label={t("autoDjForm.inactive")}
value={inactiveCount}
state={inactiveCount > 0 ? 'warn' : 'neutral'}
icon="⏸️"
icon="\u{23F8}\uFE0F"
/>
</div>
)}
</section>
<section className="mt-6">
<h2 className="admin-section-title">Add track</h2>
<h2 className="admin-section-title">{t("autoDjForm.addTrack")}</h2>
<form action={createTrack} className="admin-card">
<div className="grid cols-2">
<div>
<label htmlFor="new_title" style={{ display: 'block', fontWeight: 700 }}>
Title
{t("autoDjForm.title")}
</label>
<input
id="new_title"
name="title"
placeholder="Track title"
placeholder={t("autoDjForm.titlePlaceholder")}
required
style={{ width: '100%' }}
/>
</div>
<div>
<label htmlFor="new_artist" style={{ display: 'block', fontWeight: 700 }}>
Artist
{t("autoDjForm.artist")}
</label>
<input id="new_artist" name="artist" style={{ width: '100%' }} />
</div>
<div>
<label htmlFor="new_album" style={{ display: 'block', fontWeight: 700 }}>
Album
{t("autoDjForm.album")}
</label>
<input id="new_album" name="album" style={{ width: '100%' }} />
</div>
<div>
<label htmlFor="new_artworkUrl" style={{ display: 'block', fontWeight: 700 }}>
Artwork URL
{t("autoDjForm.artworkUrl")}
</label>
<input
id="new_artworkUrl"
name="artworkUrl"
placeholder="https://…/cover.png"
placeholder={t("autoDjForm.artworkUrlPlaceholder")}
style={{ width: '100%' }}
/>
</div>
<div>
<label htmlFor="new_duration" style={{ display: 'block', fontWeight: 700 }}>
Duration (seconds)
{t("autoDjForm.duration")}
</label>
<input
id="new_duration"
name="duration"
type="number"
min={0}
placeholder="e.g. 215"
placeholder={t("autoDjForm.durationPlaceholder")}
style={{ width: '100%' }}
/>
</div>
<div>
<label htmlFor="new_sortOrder" style={{ display: 'block', fontWeight: 700 }}>
Sort order
{t("autoDjForm.sortOrder")}
</label>
<input
id="new_sortOrder"
@@ -179,79 +181,79 @@ export default async function AdminRadioAutoDjPage() {
</div>
<div style={{ display: 'flex', alignItems: 'flex-end' }}>
<label style={{ display: 'inline-flex', gap: '0.4rem', alignItems: 'center' }}>
<input type="checkbox" name="isActive" value="1" defaultChecked /> Active
<input type="checkbox" name="isActive" value="1" defaultChecked /> {t("autoDjForm.active")}
</label>
</div>
</div>
<div style={{ marginTop: '0.75rem' }}>
<button type="submit" className="btn btn-primary">
Add track
{t("autoDjForm.addTrack")}
</button>
</div>
</form>
</section>
<section className="mt-6">
<h2 className="admin-section-title">Playlist ({tracks.length})</h2>
<h2 className="admin-section-title">{t("autoDjForm.playlist", { count: tracks.length })}</h2>
{tracks.length === 0 ? (
<div className="admin-empty">No AutoDJ tracks yet — add one above.</div>
<div className="admin-empty">{t("autoDjForm.noTracks")}</div>
) : (
<div className="overflow-x-auto">
<table>
<thead>
<tr>
<th>Order</th>
<th>Title</th>
<th>Artist</th>
<th>Album</th>
<th>Duration</th>
<th>Plays</th>
<th>Last played</th>
<th>Status</th>
<th>Actions</th>
<th>{t("autoDjForm.colOrder")}</th>
<th>{t("autoDjForm.colTitle")}</th>
<th>{t("autoDjForm.colArtist")}</th>
<th>{t("autoDjForm.colAlbum")}</th>
<th>{t("autoDjForm.colDuration")}</th>
<th>{t("autoDjForm.colPlays")}</th>
<th>{t("autoDjForm.colLastPlayed")}</th>
<th>{t("autoDjForm.colStatus")}</th>
<th>{t("autoDjForm.colActions")}</th>
</tr>
</thead>
<tbody>
{tracks.map((t) => (
<tr key={String(t.id)}>
<td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">{t.sortOrder}</td>
{tracks.map((track) => (
<tr key={String(track.id)}>
<td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">{track.sortOrder}</td>
<td>
<span className="inline-flex gap-2 items-center">
{t.artworkUrl ? (
{track.artworkUrl ? (
<img
src={t.artworkUrl}
src={track.artworkUrl}
alt=""
width={32}
height={32}
style={{ borderRadius: 4, objectFit: 'cover' }}
/>
) : null}
<strong>{t.title}</strong>
<strong>{track.title}</strong>
</span>
</td>
<td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">{t.artist ?? '—'}</td>
<td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">{t.album ?? '—'}</td>
<td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">{formatDuration(t.duration)}</td>
<td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">{t.playCount}</td>
<td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">{formatDate(t.lastPlayedAt)}</td>
<td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">{track.artist ?? '\u2014'}</td>
<td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">{track.album ?? '\u2014'}</td>
<td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">{formatDuration(track.duration)}</td>
<td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">{track.playCount}</td>
<td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">{formatDate(track.lastPlayedAt)}</td>
<td>
<span className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${t.isActive ? 'bg-green-600/20 text-[var(--color-text)]' : 'bg-red-500/22 text-[var(--color-text)]'}`}>
{t.isActive ? 'active' : 'inactive'}
<span className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${track.isActive ? 'bg-green-600/20 text-[var(--color-text)]' : 'bg-red-500/22 text-[var(--color-text)]'}`}>
{track.isActive ? t("autoDjForm.activeLabel") : t("autoDjForm.inactiveLabel")}
</span>
</td>
<td>
<div style={{ display: 'flex', gap: '0.4rem', flexWrap: 'wrap' }}>
<form action={toggleTrack}>
<input type="hidden" name="id" value={String(t.id)} />
<input type="hidden" name="isActive" value={t.isActive ? '0' : '1'} />
<input type="hidden" name="id" value={String(track.id)} />
<input type="hidden" name="isActive" value={track.isActive ? '0' : '1'} />
<button type="submit" className="btn">
{t.isActive ? 'Deactivate' : 'Activate'}
{track.isActive ? t("autoDjForm.deactivate") : t("autoDjForm.activate")}
</button>
</form>
<form action={deleteTrack}>
<input type="hidden" name="id" value={String(t.id)} />
<input type="hidden" name="id" value={String(track.id)} />
<button type="submit" className="btn btn-danger">
Delete
{t("autoDjForm.delete")}
</button>
</form>
</div>
src/app/admin/radio/banners/page.tsx
+37 -34
View File
@@ -7,6 +7,7 @@ import {
import { prisma } from '@/lib/prisma';
import { StatusCard } from '@/components/admin/dashboard';
import { Image } from 'lucide-react';
import { getTranslations } from "next-intl/server";
export const dynamic = 'force-dynamic';
@@ -22,10 +23,12 @@ type Banner = {
};
function formatDate(d: Date | null): string {
return d ? d.toISOString().slice(0, 16).replace('T', ' ') : '—';
return d ? d.toISOString().slice(0, 16).replace('T', ' ') : '\u2014';
}
export default async function AdminRadioBannersPage() {
const t = await getTranslations("pages.admin.radio");
let banners: Banner[] = [];
let dbError = false;
@@ -54,11 +57,11 @@ export default async function AdminRadioBannersPage() {
return (
<main>
<nav className="text-xs text-gray-500 dark:text-gray-400 mb-2">
<Link href="/admin/radio">Radio</Link> ·{' '}
<Link href="/admin/radio/settings">Settings</Link> ·{' '}
<Link href="/admin/radio/banners">Banners</Link> ·{' '}
<Link href="/admin/radio/ranks">Ranks</Link> ·{' '}
<Link href="/admin/radio/history">History</Link>
<Link href="/admin/radio">{t("title")}</Link> ·{' '}
<Link href="/admin/radio/settings">{t("settings")}</Link> ·{' '}
<Link href="/admin/radio/banners">{t("banners.title")}</Link> ·{' '}
<Link href="/admin/radio/ranks">{t("ranks")}</Link> ·{' '}
<Link href="/admin/radio/history">{t("history")}</Link>
</nav>
<div className="flex items-center gap-3 mb-6">
@@ -66,60 +69,60 @@ export default async function AdminRadioBannersPage() {
<Image size={20} className="text-[var(--color-primary)]" />
</div>
<div>
<h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">Radio Banners</h1>
<p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">Promotional banners shown on the radio page, ordered by sort order.</p>
<h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">{t("banners.heading")}</h1>
<p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">{t("banners.description")}</p>
</div>
</div>
{dbError ? (
<div className="admin-card mb-6">
<p className="text-xs text-gray-500 dark:text-gray-400 m-0">
Could not load banners (database unavailable).
{t("banners.dbError")}
</p>
</div>
) : (
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
<StatusCard label="Banners" value={banners.length} icon="🖼️" />
<StatusCard label={t("banners.title")} value={banners.length} icon="\u{1F5BC}\uFE0F" />
<StatusCard
label="Active"
label={t("banners.statusActive")}
value={activeCount}
state={activeCount > 0 ? 'ok' : 'neutral'}
icon="✅"
icon="\u{2705}"
/>
<StatusCard
label="Hidden"
label={t("banners.statusHidden")}
value={hiddenCount}
state={hiddenCount > 0 ? 'warn' : 'neutral'}
icon="🚫"
icon="\u{1F6AB}"
/>
</div>
)}
<section className="mt-6">
<h2 className="admin-section-title">Add banner</h2>
<h2 className="admin-section-title">{t("banners.addBanner")}</h2>
<form action={createRadioBanner} className="admin-card">
<div className="grid cols-2">
<div>
<label htmlFor="new_imagePath" style={{ display: 'block', fontWeight: 700 }}>
Image path / URL
{t("banners.form.imagePath")}
</label>
<input
id="new_imagePath"
name="imagePath"
placeholder="/storage/radio/banner.png"
placeholder={t("banners.form.imagePathPlaceholder")}
required
style={{ width: '100%' }}
/>
</div>
<div>
<label htmlFor="new_title" style={{ display: 'block', fontWeight: 700 }}>
Title
{t("banners.form.title")}
</label>
<input id="new_title" name="title" style={{ width: '100%' }} />
</div>
<div style={{ gridColumn: '1 / -1' }}>
<label htmlFor="new_description" style={{ display: 'block', fontWeight: 700 }}>
Description
{t("banners.form.description")}
</label>
<textarea
id="new_description"
@@ -130,7 +133,7 @@ export default async function AdminRadioBannersPage() {
</div>
<div>
<label htmlFor="new_sortOrder" style={{ display: 'block', fontWeight: 700 }}>
Sort order
{t("banners.form.sortOrder")}
</label>
<input
id="new_sortOrder"
@@ -142,22 +145,22 @@ export default async function AdminRadioBannersPage() {
</div>
<div style={{ display: 'flex', alignItems: 'flex-end' }}>
<label style={{ display: 'inline-flex', gap: '0.4rem', alignItems: 'center' }}>
<input type="checkbox" name="isActive" value="1" defaultChecked /> Active
<input type="checkbox" name="isActive" value="1" defaultChecked /> {t("banners.form.active")}
</label>
</div>
</div>
<div style={{ marginTop: '0.75rem' }}>
<button type="submit" className="btn btn-primary">
Create banner
{t("banners.createBanner")}
</button>
</div>
</form>
</section>
<section className="mt-6">
<h2 className="admin-section-title">Existing banners ({banners.length})</h2>
<h2 className="admin-section-title">{t("banners.existing", { count: banners.length })}</h2>
{banners.length === 0 ? (
<div className="admin-empty">No banners yet — add one above.</div>
<div className="admin-empty">{t("banners.noBanners")}</div>
) : (
<div className="grid">
{banners.map((b) => (
@@ -165,9 +168,9 @@ export default async function AdminRadioBannersPage() {
<div className="flex justify-between items-baseline gap-3">
<strong>#{String(b.id)}</strong>
<span className="text-sm text-gray-500 dark:text-gray-400 inline-flex gap-2 items-center">
by user {String(b.userId)} · {formatDate(b.createdAt)} ·{' '}
{t("banners.byUser", { id: String(b.userId) })} · {formatDate(b.createdAt)} ·{' '}
<span className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${b.isActive ? 'bg-green-600/20 text-[var(--color-text)]' : 'bg-red-500/22 text-[var(--color-text)]'}`}>
{b.isActive ? 'active' : 'hidden'}
{b.isActive ? t("banners.active") : t("banners.hidden")}
</span>
</span>
</div>
@@ -175,7 +178,7 @@ export default async function AdminRadioBannersPage() {
{b.imagePath ? (
<img
src={b.imagePath}
alt={b.title ?? 'Radio banner'}
alt={b.title ?? t("banners.bannerAlt")}
className="article-img my-2"
/>
) : null}
@@ -188,7 +191,7 @@ export default async function AdminRadioBannersPage() {
htmlFor={`img_${b.id}`}
style={{ display: 'block', fontWeight: 700 }}
>
Image path / URL
{t("banners.form.imagePath")}
</label>
<input
id={`img_${b.id}`}
@@ -203,7 +206,7 @@ export default async function AdminRadioBannersPage() {
htmlFor={`title_${b.id}`}
style={{ display: 'block', fontWeight: 700 }}
>
Title
{t("banners.form.title")}
</label>
<input
id={`title_${b.id}`}
@@ -217,7 +220,7 @@ export default async function AdminRadioBannersPage() {
htmlFor={`desc_${b.id}`}
style={{ display: 'block', fontWeight: 700 }}
>
Description
{t("banners.form.description")}
</label>
<textarea
id={`desc_${b.id}`}
@@ -232,7 +235,7 @@ export default async function AdminRadioBannersPage() {
htmlFor={`sort_${b.id}`}
style={{ display: 'block', fontWeight: 700 }}
>
Sort order
{t("banners.form.sortOrder")}
</label>
<input
id={`sort_${b.id}`}
@@ -252,13 +255,13 @@ export default async function AdminRadioBannersPage() {
value="1"
defaultChecked={b.isActive}
/>{' '}
Active
{t("banners.form.active")}
</label>
</div>
</div>
<div style={{ marginTop: '0.6rem' }}>
<button type="submit" className="btn btn-primary">
Save
{t("banners.save")}
</button>
</div>
</form>
@@ -266,7 +269,7 @@ export default async function AdminRadioBannersPage() {
<form action={deleteRadioBanner} style={{ marginTop: '0.5rem' }}>
<input type="hidden" name="id" value={String(b.id)} />
<button type="submit" className="btn btn-danger">
Delete
{t("banners.delete")}
</button>
</form>
</div>
src/app/admin/radio/embed/page.tsx
+30 -38
View File
@@ -4,6 +4,7 @@ import { siteSettings } from '@/lib/services/site-settings';
import { requireStaff } from '@/lib/admin/guard';
import { EmbedSnippet } from './embed-snippet';
import { Code } from 'lucide-react';
import { getTranslations } from "next-intl/server";
export const dynamic = 'force-dynamic';
@@ -12,9 +13,8 @@ export const metadata = { title: 'Radio Embed' };
export default async function AdminRadioEmbedPage() {
await requireStaff();
// Read radio embed-related website_settings. siteSettings.get() already
// swallows DB errors and serves fallbacks, but wrap defensively anyway so a
// throw never blanks the page.
const t = await getTranslations("pages.admin.radio");
let streamUrl = '';
let radioName = 'Radio';
let nowPlayingApiUrl = '';
@@ -33,10 +33,8 @@ export default async function AdminRadioEmbedPage() {
nowPlayingApiUrl = nowPlayingApiUrl.trim();
const hasStream = streamUrl !== '';
// Copy-ready embed snippets. Built server-side from the configured stream URL
// so what staff copy matches what the preview renders.
const audioSnippet = hasStream
? `<audio controls preload="none" src="${streamUrl}">\n Your browser does not support the audio element.\n</audio>`
? `<audio controls preload="none" src="${streamUrl}">\n ${t("embedPage.audioUnsupported")}\n</audio>`
: '';
const iframeSnippet = hasStream
@@ -46,12 +44,12 @@ export default async function AdminRadioEmbedPage() {
return (
<main>
<nav className="text-xs text-gray-500 dark:text-gray-400 mb-2">
<Link href="/admin/radio">Radio</Link> ·{' '}
<Link href="/admin/radio/settings">Settings</Link> ·{' '}
<Link href="/admin/radio/embed">Embed</Link> ·{' '}
<Link href="/admin/radio/banners">Banners</Link> ·{' '}
<Link href="/admin/radio/ranks">Ranks</Link> ·{' '}
<Link href="/admin/radio/history">History</Link>
<Link href="/admin/radio">{t("title")}</Link> ·{' '}
<Link href="/admin/radio/settings">{t("settings")}</Link> ·{' '}
<Link href="/admin/radio/embed">{t("embed")}</Link> ·{' '}
<Link href="/admin/radio/banners">{t("banners.title")}</Link> ·{' '}
<Link href="/admin/radio/ranks">{t("ranks")}</Link> ·{' '}
<Link href="/admin/radio/history">{t("history")}</Link>
</nav>
<section className="mt-6">
@@ -60,73 +58,67 @@ export default async function AdminRadioEmbedPage() {
<Code size={20} className="text-[var(--color-primary)]" />
</div>
<div>
<h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">Radio Embed</h1>
<p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">Copy-ready embed code for the live stream. Read-only — nothing here writes to the database. Configure the stream URL in <Link href="/admin/radio/settings">Radio Settings</Link> (<code>radio_stream_url</code>).</p>
<h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">{t("embedPage.title")}</h1>
<p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">{t("embedPage.subtitle")}</p>
</div>
</div>
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
<StatusCard
label="Stream URL"
value={hasStream ? 'Configured' : 'Missing'}
label={t("embedPage.streamUrl")}
value={hasStream ? t("embedPage.configured") : t("embedPage.missing")}
state={hasStream ? 'ok' : 'danger'}
icon="📻"
icon="\u{1F4BB}"
/>
<StatusCard label="Radio name" value={radioName} icon="🎙️" />
<StatusCard label={t("embedPage.radioName")} value={radioName} icon="\u{1F399}\uFE0F" />
<StatusCard
label="Now-playing API"
value={nowPlayingApiUrl ? 'Set' : 'Not set'}
label={t("embedPage.nowPlayingApi")}
value={nowPlayingApiUrl ? t("embedPage.set") : t("embedPage.notSet")}
state={nowPlayingApiUrl ? 'ok' : 'neutral'}
icon="🎵"
icon="\u{1F3B5}"
/>
</div>
</section>
{!hasStream ? (
<section className="mt-6">
<h2 className="admin-section-title">No stream URL configured</h2>
<h2 className="admin-section-title">{t("embedPage.noStreamUrl")}</h2>
<p className="text-xs text-gray-500 dark:text-gray-400">
There is no <code>radio_stream_url</code> set, so there is nothing to
embed yet. Open{' '}
<Link href="/admin/radio/settings">Radio Settings</Link> and fill in
the <strong>Main stream URL</strong> field under{' '}
<em>AzureCast &amp; Stream</em>. Once saved, return here to copy the
embed snippet and preview the player.
{t("embedPage.noStreamUrlText")}
</p>
<p>
<Link href="/admin/radio/settings" className="btn btn-primary">
Go to Radio Settings
{t("embedPage.goToSettings")}
</Link>
</p>
</section>
) : (
<>
<section className="mt-6">
<h2 className="admin-section-title">Live preview</h2>
<h2 className="admin-section-title">{t("embedPage.livePreview")}</h2>
<p className="text-xs text-gray-500 dark:text-gray-400">
This is the bare <code>&lt;audio&gt;</code> player as visitors will
see it. Press play to confirm the stream is reachable.
{t("embedPage.livePreviewText")}
</p>
<div className="admin-card">
{/* eslint-disable-next-line jsx-a11y/media-has-caption */}
<audio controls preload="none" src={streamUrl} style={{ width: '100%' }}>
Your browser does not support the audio element.
{t("embedPage.audioUnsupported")}
</audio>
<p className="text-xs text-gray-500 dark:text-gray-400" style={{ margin: '0.5rem 0 0', wordBreak: 'break-all' }}>
Source: <code>{streamUrl}</code>
{t("embedPage.source")}: <code>{streamUrl}</code>
</p>
</div>
</section>
<EmbedSnippet
title="Audio player snippet"
description="Drop-in HTML5 audio player pointed straight at the stream. Works anywhere plain HTML is allowed."
title={t("embedPage.audioSnippet")}
description={t("embedPage.audioSnippetDesc")}
snippet={audioSnippet}
/>
<EmbedSnippet
title="Iframe wrapper snippet"
description="Embeds the site's own radio player page in an iframe — keeps your styling and now-playing info. Adjust width/height to taste."
title={t("embedPage.iframeSnippet")}
description={t("embedPage.iframeSnippetDesc")}
snippet={iframeSnippet}
/>
</>
src/app/admin/radio/history/page.tsx
+31 -30
View File
@@ -2,6 +2,7 @@ import Link from 'next/link';
import { prisma } from '@/lib/prisma';
import { StatusCard } from '@/components/admin/dashboard';
import { Clock } from 'lucide-react';
import { getTranslations } from "next-intl/server";
export const dynamic = 'force-dynamic';
@@ -16,14 +17,13 @@ type History = {
};
function formatDate(d: Date | null): string {
return d ? d.toISOString().slice(0, 16).replace('T', ' ') : '—';
return d ? d.toISOString().slice(0, 16).replace('T', ' ') : '\u2014';
}
/** Human-readable airtime between two timestamps (e.g. "1h 23m"). */
function formatDuration(start: Date, end: Date | null): string {
if (!end) return '—';
if (!end) return '\u2014';
const ms = end.getTime() - start.getTime();
if (ms <= 0) return '—';
if (ms <= 0) return '\u2014';
const mins = Math.round(ms / 60000);
const h = Math.floor(mins / 60);
const m = mins % 60;
@@ -31,6 +31,8 @@ function formatDuration(start: Date, end: Date | null): string {
}
export default async function AdminRadioHistoryPage() {
const t = await getTranslations("pages.admin.radio");
let history: History[] = [];
let names = new Map<string, string>();
let dbError = false;
@@ -50,7 +52,6 @@ export default async function AdminRadioHistoryPage() {
take: 100,
});
// Resolve DJ usernames (users.id is Int, radio_history.user_id is BigInt).
const ids = Array.from(new Set(history.map((h) => Number(h.userId)))).filter(
(n) => Number.isFinite(n) && n > 0,
);
@@ -76,11 +77,11 @@ export default async function AdminRadioHistoryPage() {
return (
<main>
<nav className="text-xs text-gray-500 dark:text-gray-400 mb-2">
<Link href="/admin/radio">Radio</Link> ·{' '}
<Link href="/admin/radio/settings">Settings</Link> ·{' '}
<Link href="/admin/radio/banners">Banners</Link> ·{' '}
<Link href="/admin/radio/ranks">Ranks</Link> ·{' '}
<Link href="/admin/radio/history">History</Link>
<Link href="/admin/radio">{t("title")}</Link> ·{' '}
<Link href="/admin/radio/settings">{t("settings")}</Link> ·{' '}
<Link href="/admin/radio/banners">{t("banners.title")}</Link> ·{' '}
<Link href="/admin/radio/ranks">{t("ranks")}</Link> ·{' '}
<Link href="/admin/radio/history">{t("history")}</Link>
</nav>
<div className="flex items-center gap-3 mb-6">
@@ -88,49 +89,49 @@ export default async function AdminRadioHistoryPage() {
<Clock size={20} className="text-[var(--color-primary)]" />
</div>
<div>
<h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">Radio Play History</h1>
<p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">Past DJ shows and airtime (<code>radio_history</code>), most recent first. Read-only log of who was on air, when, and how many listeners tuned in.</p>
<h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">{t("historyPage.title")}</h1>
<p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">{t("historyPage.subtitle")}</p>
</div>
</div>
{dbError ? (
<div className="admin-card mb-6">
<p className="text-xs text-gray-500 dark:text-gray-400 m-0">
Could not load radio history (database unavailable).
{t("historyPage.dbError")}
</p>
</div>
) : (
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
<StatusCard label="Shows logged" value={history.length} icon="🎙️" />
<StatusCard label={t("historyPage.showsLogged")} value={history.length} icon="\u{1F399}\uFE0F" />
<StatusCard
label="On air now"
label={t("historyPage.onAirNow")}
value={liveCount}
state={liveCount > 0 ? 'ok' : 'neutral'}
icon="🔴"
icon="\u{1F534}"
/>
<StatusCard label="Unique DJs" value={uniqueDjs} icon="🧑‍🎤" />
<StatusCard label="Peak listeners" value={peakListeners} icon="👥" />
<StatusCard label={t("historyPage.uniqueDjs")} value={uniqueDjs} icon="\u{1F9D1}\u200D\u{1F3A4}" />
<StatusCard label={t("historyPage.peakListeners")} value={peakListeners} icon="\u{1F465}" />
</div>
)}
{!dbError && history.length === 0 ? (
<div className="admin-empty">No radio history recorded yet.</div>
<div className="admin-empty">{t("historyPage.empty")}</div>
) : null}
{history.length > 0 ? (
<section className="mt-6">
<h2 className="admin-section-title">Show log ({history.length})</h2>
<h2 className="admin-section-title">{t("historyPage.showLog", { count: history.length })}</h2>
<table>
<thead>
<tr>
<th>ID</th>
<th>DJ</th>
<th>Show</th>
<th>Started</th>
<th>Ended</th>
<th>Airtime</th>
<th>Listeners</th>
<th>Notes</th>
<th>{t("historyPage.colDj")}</th>
<th>{t("historyPage.colShow")}</th>
<th>{t("historyPage.colStarted")}</th>
<th>{t("historyPage.colEnded")}</th>
<th>{t("historyPage.colAirtime")}</th>
<th>{t("historyPage.colListeners")}</th>
<th>{t("historyPage.colNotes")}</th>
</tr>
</thead>
<tbody>
@@ -138,18 +139,18 @@ export default async function AdminRadioHistoryPage() {
<tr key={String(h.id)}>
<td>{String(h.id)}</td>
<td>{names.get(String(h.userId)) ?? `#${String(h.userId)}`}</td>
<td>{h.showName ?? '—'}</td>
<td>{h.showName ?? '\u2014'}</td>
<td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">{formatDate(h.startedAt)}</td>
<td>
{h.endedAt ? (
<span className="text-sm text-gray-500 dark:text-gray-400">{formatDate(h.endedAt)}</span>
) : (
<span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-green-600/20 text-[var(--color-text)]">on air</span>
<span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-green-600/20 text-[var(--color-text)]">{t("historyPage.onAir")}</span>
)}
</td>
<td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">{formatDuration(h.startedAt, h.endedAt)}</td>
<td>{h.listenersCount}</td>
<td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">{h.notes ?? '—'}</td>
<td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">{h.notes ?? '\u2014'}</td>
</tr>
))}
</tbody>
src/app/admin/radio/moderation/page.tsx
+19 -16
View File
@@ -3,6 +3,7 @@ import { prisma } from '@/lib/prisma';
import { deleteShout } from '@/actions/admin-radio-moderation';
import { StatusCard } from '@/components/admin/dashboard';
import { Shield } from 'lucide-react';
import { getTranslations } from "next-intl/server";
export const dynamic = 'force-dynamic';
@@ -15,10 +16,12 @@ type Shout = {
};
function formatDate(d: Date | null): string {
return d ? d.toISOString().slice(0, 16).replace('T', ' ') : '—';
return d ? d.toISOString().slice(0, 16).replace('T', ' ') : '\u2014';
}
export default async function AdminRadioModerationPage() {
const t = await getTranslations("pages.admin.radio");
let shouts: Shout[] = [];
try {
shouts = await prisma.radioShouts.findMany({
@@ -39,12 +42,12 @@ export default async function AdminRadioModerationPage() {
return (
<main>
<nav className="text-xs text-gray-500 dark:text-gray-400 mb-2">
<Link href="/admin/radio">Radio</Link> ·{' '}
<Link href="/admin/radio/moderation">Moderation</Link> ·{' '}
<Link href="/admin/radio/settings">Settings</Link> ·{' '}
<Link href="/admin/radio/banners">Banners</Link> ·{' '}
<Link href="/admin/radio/ranks">Ranks</Link> ·{' '}
<Link href="/admin/radio/history">History</Link>
<Link href="/admin/radio">{t("title")}</Link> ·{' '}
<Link href="/admin/radio/moderation">{t("moderation")}</Link> ·{' '}
<Link href="/admin/radio/settings">{t("settings")}</Link> ·{' '}
<Link href="/admin/radio/banners">{t("banners.title")}</Link> ·{' '}
<Link href="/admin/radio/ranks">{t("ranks")}</Link> ·{' '}
<Link href="/admin/radio/history">{t("history")}</Link>
</nav>
<div className="flex items-center gap-3 mb-6">
@@ -52,27 +55,27 @@ export default async function AdminRadioModerationPage() {
<Shield size={20} className="text-[var(--color-primary)]" />
</div>
<div>
<h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">DJ Moderation</h1>
<p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">Review and remove radio shouts (50 most recent).</p>
<h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">{t("moderationPage.title")}</h1>
<p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">{t("moderationPage.subtitle")}</p>
</div>
</div>
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
<StatusCard label="Recent shouts" value={shouts.length} icon="📣" />
<StatusCard label={t("shouts")} value={shouts.length} icon="\u{1F4E3}" />
</div>
<section className="mt-6">
<h2 className="admin-section-title">Recent Shouts ({shouts.length})</h2>
<h2 className="admin-section-title">{t("moderationPage.recentShouts", { count: shouts.length })}</h2>
{shouts.length === 0 ? (
<div className="admin-empty">No shouts to moderate.</div>
<div className="admin-empty">{t("noShouts")}</div>
) : (
<table>
<thead>
<tr>
<th>ID</th>
<th>User</th>
<th>Message</th>
<th>Posted</th>
<th>{t("user")}</th>
<th>{t("message")}</th>
<th>{t("posted")}</th>
<th />
</tr>
</thead>
@@ -87,7 +90,7 @@ export default async function AdminRadioModerationPage() {
<form action={deleteShout}>
<input type="hidden" name="id" value={String(s.id)} />
<button type="submit" className="btn btn-danger">
Delete
{t("deleteShout")}
</button>
</form>
</td>
src/app/admin/radio/monitoring/page.tsx
+32 -58
View File
@@ -3,33 +3,22 @@ import { requireStaff } from '@/lib/admin/guard';
import { siteSettings } from '@/lib/services/site-settings';
import { StatusCard, DiagnosticRow } from '@/components/admin/dashboard';
import { Radio } from 'lucide-react';
import { getTranslations } from "next-intl/server";
export const dynamic = 'force-dynamic';
export const metadata = { title: 'Radio Monitoring' };
// READ-ONLY live probe of the configured radio endpoints. We never write to the
// DB here; we only read the relevant radio_* keys via siteSettings.get and do a
// best-effort, fail-soft server-side fetch of each URL with a short timeout so a
// slow/down stream provider can never hang the admin page.
const FETCH_TIMEOUT_MS = 4000;
type ProbeResult = {
/** true when the endpoint responded with a 2xx/3xx status within the timeout. */
reachable: boolean;
status: number | null;
/** Parsed JSON when the body was JSON, else null. */
json: unknown;
/** Raw text body (trimmed) when not JSON, else null. */
text: string | null;
error: string | null;
};
/**
* Fetch a URL server-side with a hard AbortController timeout. Always resolves
* (never throws) so the page renders even when the provider is unreachable.
*/
async function probe(url: string): Promise<ProbeResult> {
const controller = new AbortController();
const timer = setTimeout(() => controller.abort(), FETCH_TIMEOUT_MS);
@@ -80,11 +69,6 @@ function pickString(obj: Record<string, unknown>, key: string): string | null {
return typeof v === 'string' && v.trim() !== '' ? v.trim() : null;
}
/**
* Best-effort now-playing extraction. Supports the common AzureCast shape
* (now_playing.song.title / .artist), a flat { title, artist }, a bare string,
* or { now_playing: "..." }. Returns a single display string or null.
*/
function parseNowPlaying(result: ProbeResult): string | null {
if (result.json == null) {
return result.text && result.text.length <= 200 ? result.text : null;
@@ -93,7 +77,6 @@ function parseNowPlaying(result: ProbeResult): string | null {
if (typeof data === 'string') return data.trim() || null;
if (!isRecord(data)) return null;
// AzureCast: { now_playing: { song: { title, artist, text } } }
const np = data.now_playing;
if (typeof np === 'string' && np.trim() !== '') return np.trim();
if (isRecord(np)) {
@@ -109,7 +92,6 @@ function parseNowPlaying(result: ProbeResult): string | null {
}
}
// Flat shapes: { song: { title, artist } } or { title, artist } or { text }.
const song = data.song;
if (isRecord(song)) {
const title = pickString(song, 'title');
@@ -143,10 +125,6 @@ function findNumberDeep(value: unknown, keys: string[], depth = 0): number | nul
return null;
}
/**
* Best-effort listener count. Looks for listeners(.current/.total), num_listeners,
* unique_listeners, or a bare numeric body. Returns null when nothing parses.
*/
function parseListeners(result: ProbeResult): number | null {
if (result.json == null) {
if (result.text && Number.isFinite(Number(result.text.trim()))) {
@@ -171,13 +149,15 @@ function shortUrl(url: string): string {
const u = new URL(url);
return u.host + (u.pathname === '/' ? '' : u.pathname);
} catch {
return url.length > 60 ? `${url.slice(0, 57)}…` : url;
return url.length > 60 ? `${url.slice(0, 57)}\u2026` : url;
}
}
export default async function AdminRadioMonitoringPage() {
await requireStaff();
const t = await getTranslations("pages.admin.radio");
let nowPlayingUrl: string | null = null;
let listenersUrl: string | null = null;
let streamUrl: string | null = null;
@@ -191,16 +171,12 @@ export default async function AdminRadioMonitoringPage() {
streamUrl = null;
}
// Probe each configured endpoint (fail-soft). The now-playing endpoint doubles
// as our "stream reachable?" signal since it reflects the live provider.
const nowPlayingResult = nowPlayingUrl ? await probe(nowPlayingUrl) : null;
const listenersResult = listenersUrl ? await probe(listenersUrl) : null;
const nowPlaying = nowPlayingResult ? parseNowPlaying(nowPlayingResult) : null;
const listeners = listenersResult ? parseListeners(listenersResult) : null;
// Stream is "online" when its primary status source (now-playing, else
// listeners) responded successfully.
const streamProbe = nowPlayingResult ?? listenersResult;
const streamOnline = streamProbe?.reachable ?? false;
const streamConfigured = Boolean(nowPlayingUrl || listenersUrl);
@@ -210,19 +186,19 @@ export default async function AdminRadioMonitoringPage() {
url: string | null;
result: ProbeResult | null;
}[] = [
{ label: 'Now-playing API', url: nowPlayingUrl, result: nowPlayingResult },
{ label: 'Listeners API', url: listenersUrl, result: listenersResult },
{ label: t("monitoring.nowPlayingApi"), url: nowPlayingUrl, result: nowPlayingResult },
{ label: t("monitoring.listenersApi"), url: listenersUrl, result: listenersResult },
];
return (
<main>
<nav className="text-xs text-gray-500 dark:text-gray-400 mb-2">
<Link href="/admin/radio">Radio</Link> ·{' '}
<Link href="/admin/radio/settings">Settings</Link> ·{' '}
<Link href="/admin/radio/monitoring">Monitoring</Link> ·{' '}
<Link href="/admin/radio/banners">Banners</Link> ·{' '}
<Link href="/admin/radio/ranks">Ranks</Link> ·{' '}
<Link href="/admin/radio/history">History</Link>
<Link href="/admin/radio">{t("title")}</Link> ·{' '}
<Link href="/admin/radio/settings">{t("settings")}</Link> ·{' '}
<Link href="/admin/radio/monitoring">{t("monitoring.title")}</Link> ·{' '}
<Link href="/admin/radio/banners">{t("banners.title")}</Link> ·{' '}
<Link href="/admin/radio/ranks">{t("ranks")}</Link> ·{' '}
<Link href="/admin/radio/history">{t("history")}</Link>
</nav>
<section className="mt-6">
@@ -231,44 +207,42 @@ export default async function AdminRadioMonitoringPage() {
<Radio size={20} className="text-[var(--color-primary)]" />
</div>
<div>
<h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">Radio Monitoring</h1>
<p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">Read-only live probe of the configured radio endpoints (<code>radio_now_playing_api_url</code>, <code>radio_listeners_api_url</code>). Each request fails soft with a {FETCH_TIMEOUT_MS / 1000}s timeout — no data is written. Configure URLs under <Link href="/admin/radio/settings">Settings</Link>.</p>
<h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">{t("monitoring.title")}</h1>
<p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">{t("monitoring.subtitle", { timeout: FETCH_TIMEOUT_MS / 1000 })}</p>
</div>
</div>
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
<StatusCard
label="Stream"
label={t("monitoring.stream")}
value={
!streamConfigured ? 'Not configured' : streamOnline ? 'Online' : 'Offline'
!streamConfigured ? t("monitoring.notConfigured") : streamOnline ? t("monitoring.online") : t("monitoring.offline")
}
state={!streamConfigured ? 'neutral' : streamOnline ? 'ok' : 'danger'}
hint={streamUrl ? shortUrl(streamUrl) : undefined}
icon="📡"
icon="\u{1F4E1}"
/>
<StatusCard
label="Now playing"
value={nowPlaying ?? '—'}
label={t("monitoring.nowPlaying")}
value={nowPlaying ?? '\u2014'}
state={nowPlaying ? 'ok' : 'neutral'}
hint={!nowPlayingUrl ? 'no now-playing API set' : undefined}
icon="🎵"
hint={!nowPlayingUrl ? t("monitoring.noNowPlayingHint") : undefined}
icon="\u{1F3B5}"
/>
<StatusCard
label="Listeners"
value={listeners ?? '—'}
label={t("monitoring.listeners")}
value={listeners ?? '\u2014'}
state={listeners != null ? 'ok' : 'neutral'}
hint={!listenersUrl ? 'no listeners API set' : undefined}
icon="🎧"
hint={!listenersUrl ? t("monitoring.noListenersHint") : undefined}
icon="\u{1F3A7}"
/>
</div>
</section>
<section className="mt-6">
<h2 className="admin-section-title">Endpoint diagnostics</h2>
<h2 className="admin-section-title">{t("monitoring.endpointDiagnostics")}</h2>
<p className="text-xs text-gray-500 dark:text-gray-400">
<span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-green-600/20 text-[var(--color-text)]">OK</span> reachable ·{' '}
<span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-[var(--color-primary)]/18 text-[var(--color-text)]">WARN</span> not configured ·{' '}
<span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-red-500/22 text-[var(--color-text)]">ERROR</span> fetch failed / timed out.
{t("monitoring.diagnosticsLegend")}
</p>
<div className="flex flex-col">
{endpoints.map((ep) => {
@@ -276,15 +250,15 @@ export default async function AdminRadioMonitoringPage() {
let detail: string;
if (!ep.url) {
state = 'warn';
detail = 'Not configured';
detail = t("monitoring.notConfigured");
} else if (ep.result?.reachable) {
state = 'ok';
detail = `${shortUrl(ep.url)}${
ep.result.status != null ? ` · HTTP ${ep.result.status}` : ''
ep.result.status != null ? ` \u00B7 HTTP ${ep.result.status}` : ''
}`;
} else {
state = 'danger';
detail = `${shortUrl(ep.url)} · ${ep.result?.error ?? 'unreachable'}`;
detail = `${shortUrl(ep.url)} \u00B7 ${ep.result?.error ?? t("monitoring.unreachable")}`;
}
return (
<DiagnosticRow
@@ -296,8 +270,8 @@ export default async function AdminRadioMonitoringPage() {
);
})}
<DiagnosticRow
label="Stream URL"
detail={streamUrl ? shortUrl(streamUrl) : 'Not configured'}
label={t("monitoring.streamUrl")}
detail={streamUrl ? shortUrl(streamUrl) : t("monitoring.notConfigured")}
state={streamUrl ? 'ok' : 'warn'}
/>
</div>
src/app/admin/radio/page.tsx
+44 -42
View File
@@ -2,6 +2,7 @@ import Link from 'next/link';
import { prisma } from '@/lib/prisma';
import { deleteShout } from '@/actions/admin-radio';
import { StatusCard } from '@/components/admin/dashboard';
import { getTranslations } from "next-intl/server";
export const dynamic = 'force-dynamic';
@@ -34,14 +35,13 @@ type Schedule = {
};
function formatDate(d: Date | null): string {
return d ? d.toISOString().slice(0, 16).replace('T', ' ') : '—';
return d ? d.toISOString().slice(0, 16).replace('T', ' ') : '\u2014';
}
function formatTime(d: Date | null): string {
return d ? d.toISOString().slice(11, 16) : '—';
return d ? d.toISOString().slice(11, 16) : '\u2014';
}
// Map an application status to an ok/danger/neutral pill tone.
function statusBadgeClass(status: string): string {
const s = status.toLowerCase();
if (s === 'approved' || s === 'accepted') return 'ok';
@@ -50,6 +50,8 @@ function statusBadgeClass(status: string): string {
}
export default async function AdminRadioPage() {
const t = await getTranslations("pages.admin.radio");
let shouts: Shout[] = [];
let applications: Application[] = [];
let schedules: Schedule[] = [];
@@ -109,47 +111,47 @@ export default async function AdminRadioPage() {
return (
<main>
<nav className="text-xs text-gray-500 dark:text-gray-400 mb-2">
<Link href="/admin/radio">Radio</Link> ·{' '}
<Link href="/admin/radio/settings">Settings</Link> ·{' '}
<Link href="/admin/radio/banners">Banners</Link> ·{' '}
<Link href="/admin/radio/ranks">Ranks</Link> ·{' '}
<Link href="/admin/radio/history">History</Link>
<Link href="/admin/radio">{t("title")}</Link> ·{' '}
<Link href="/admin/radio/settings">{t("settings")}</Link> ·{' '}
<Link href="/admin/radio/banners">{t("banners.title")}</Link> ·{' '}
<Link href="/admin/radio/ranks">{t("ranks")}</Link> ·{' '}
<Link href="/admin/radio/history">{t("history")}</Link>
</nav>
<h1>Radio Moderation</h1>
<h1>{t("title")}</h1>
<p className="text-xs text-gray-500 dark:text-gray-400">
Latest shouts, DJ applications and on-air schedules (25 most recent of each).
{t("subtitle")}
</p>
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
<StatusCard label="Recent shouts" value={shouts.length} icon="📣" />
<StatusCard label={t("shouts")} value={shouts.length} icon="\u{1F4E3}" />
<StatusCard
label="Pending applications"
label={t("pendingApplications")}
value={pendingApps}
state={pendingApps > 0 ? 'warn' : 'ok'}
icon="📝"
icon="\u{1F4DD}"
/>
<StatusCard label="Schedules" value={schedules.length} icon="🗓️" />
<StatusCard label={t("schedules")} value={schedules.length} icon="\u{1F5D3}\uFE0F" />
<StatusCard
label="Active schedules"
label={t("activeSchedules")}
value={activeSchedules}
state={activeSchedules > 0 ? 'ok' : 'neutral'}
icon="🎙️"
icon="\u{1F399}\uFE0F"
/>
</div>
<section className="mt-6">
<h2>Recent Shouts ({shouts.length})</h2>
<h2>{t("shouts")} ({shouts.length})</h2>
{shouts.length === 0 ? (
<p className="text-xs text-gray-500 dark:text-gray-400">No shouts to moderate.</p>
<p className="text-xs text-gray-500 dark:text-gray-400">{t("noShouts")}</p>
) : (
<table>
<thead>
<tr>
<th>ID</th>
<th>User</th>
<th>Message</th>
<th>Posted</th>
<th>{t("user")}</th>
<th>{t("message")}</th>
<th>{t("posted")}</th>
<th />
</tr>
</thead>
@@ -164,7 +166,7 @@ export default async function AdminRadioPage() {
<form action={deleteShout}>
<input type="hidden" name="id" value={String(s.id)} />
<button type="submit" className="btn btn-danger">
Delete
{t("deleteShout")}
</button>
</form>
</td>
@@ -176,21 +178,21 @@ export default async function AdminRadioPage() {
</section>
<section className="mt-6">
<h2>DJ Applications ({applications.length})</h2>
<h2>{t("applications")} ({applications.length})</h2>
{applications.length === 0 ? (
<p className="text-xs text-gray-500 dark:text-gray-400">No applications submitted.</p>
<p className="text-xs text-gray-500 dark:text-gray-400">{t("noApplications")}</p>
) : (
<table>
<thead>
<tr>
<th>ID</th>
<th>User</th>
<th>Real Name</th>
<th>Age</th>
<th>Style</th>
<th>{t("user")}</th>
<th>{t("realName")}</th>
<th>{t("age")}</th>
<th>{t("style")}</th>
<th>Discord</th>
<th>Status</th>
<th>Applied</th>
<th>{t("status")}</th>
<th>{t("applied")}</th>
</tr>
</thead>
<tbody>
@@ -200,8 +202,8 @@ export default async function AdminRadioPage() {
<td>{String(a.userId)}</td>
<td>{a.realName}</td>
<td>{a.age}</td>
<td>{a.musicStyle ?? '—'}</td>
<td>{a.discordUsername ?? '—'}</td>
<td>{a.musicStyle ?? '\u2014'}</td>
<td>{a.discordUsername ?? '\u2014'}</td>
<td>
<span className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${statusBadgeClass(a.status) === 'ok' ? 'bg-green-600/20 text-[var(--color-text)]' : statusBadgeClass(a.status) === 'danger' ? 'bg-red-500/22 text-[var(--color-text)]' : 'bg-[var(--color-primary)]/18 text-[var(--color-text)]'}`}>
{a.status}
@@ -216,20 +218,20 @@ export default async function AdminRadioPage() {
</section>
<section className="mt-6">
<h2>Schedules ({schedules.length})</h2>
<h2>{t("schedules")} ({schedules.length})</h2>
{schedules.length === 0 ? (
<p className="text-xs text-gray-500 dark:text-gray-400">No schedules configured.</p>
<p className="text-xs text-gray-500 dark:text-gray-400">{t("noSchedules")}</p>
) : (
<table>
<thead>
<tr>
<th>ID</th>
<th>User</th>
<th>Day</th>
<th>Start</th>
<th>End</th>
<th>Show</th>
<th>Active</th>
<th>{t("user")}</th>
<th>{t("day")}</th>
<th>{t("start")}</th>
<th>{t("end")}</th>
<th>{t("show")}</th>
<th>{t("active")}</th>
</tr>
</thead>
<tbody>
@@ -240,10 +242,10 @@ export default async function AdminRadioPage() {
<td>{sc.day}</td>
<td>{formatTime(sc.startTime)}</td>
<td>{formatTime(sc.endTime)}</td>
<td>{sc.showName ?? '—'}</td>
<td>{sc.showName ?? '\u2014'}</td>
<td>
<span className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${sc.isActive ? 'bg-green-600/20 text-[var(--color-text)]' : 'bg-red-500/22 text-[var(--color-text)]'}`}>
{sc.isActive ? 'active' : 'inactive'}
{sc.isActive ? t("active") : t("inactive")}
</span>
</td>
</tr>
src/app/admin/radio/points/page.tsx
+36 -37
View File
@@ -3,13 +3,12 @@ import { savePoints } from "@/actions/admin-radio-points";
import { StatusCard } from "@/components/admin/dashboard";
import { siteSettings } from "@/lib/services/site-settings";
import { Star } from "lucide-react";
import { getTranslations } from "next-intl/server";
export const dynamic = "force-dynamic";
export const metadata = { title: "Radio Points" };
// Defaults used when the website_settings rows are missing OR the DB is
// unreachable, so the editor still renders in local dev.
const DEFAULTS = {
radio_points_enabled: "0",
radio_points_per_minute: "1",
@@ -25,10 +24,10 @@ export default async function AdminRadioPointsPage({
}: {
searchParams: Promise<{ saved?: string }>;
}) {
const t = await getTranslations("pages.admin.radio");
const { saved } = await searchParams;
// Read current values with siteSettings.get(defaults); fall back to DEFAULTS
// on any read error so select()-typed values stay strings.
const values = {
radio_points_enabled: await siteSettings
.get("radio_points_enabled", DEFAULTS.radio_points_enabled)
@@ -59,12 +58,12 @@ export default async function AdminRadioPointsPage({
return (
<main>
<nav className="text-xs text-gray-500 dark:text-gray-400 mb-2">
<Link href="/admin/radio">Radio</Link> ·{" "}
<Link href="/admin/radio/settings">Settings</Link> ·{" "}
<Link href="/admin/radio/points">Points</Link> ·{" "}
<Link href="/admin/radio/banners">Banners</Link> ·{" "}
<Link href="/admin/radio/ranks">Ranks</Link> ·{" "}
<Link href="/admin/radio/history">History</Link>
<Link href="/admin/radio">{t("title")}</Link> ·{" "}
<Link href="/admin/radio/settings">{t("settings")}</Link> ·{" "}
<Link href="/admin/radio/points">{t("points")}</Link> ·{" "}
<Link href="/admin/radio/banners">{t("banners.title")}</Link> ·{" "}
<Link href="/admin/radio/ranks">{t("ranks")}</Link> ·{" "}
<Link href="/admin/radio/history">{t("history")}</Link>
</nav>
<section className="mt-6">
@@ -73,46 +72,46 @@ export default async function AdminRadioPointsPage({
<Star size={20} className="text-[var(--color-primary)]" />
</div>
<div>
<h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">Radio Listener Points</h1>
<p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">Reward listeners with currency for time spent on the radio. Edits write to <code>website_settings</code> (<code>radio_points_*</code> keys) and bust the runtime settings cache. Booleans use <code>0</code> / <code>1</code>.</p>
<h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">{t("pointsForm.title")}</h1>
<p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">{t("pointsForm.subtitle")}</p>
</div>
</div>
{saved === "1" ? (
<p>
<span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-green-600/20 text-[var(--color-text)]">Saved</span>
<span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-green-600/20 text-[var(--color-text)]">{t("pointsForm.saved")}</span>
</p>
) : null}
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
<StatusCard
label="Points"
value={enabled ? "Enabled" : "Disabled"}
label={t("pointsForm.points")}
value={enabled ? t("pointsForm.enabled") : t("pointsForm.disabled")}
state={enabled ? "ok" : "danger"}
icon="🎧"
icon="\u{1F3A7}"
/>
<StatusCard
label="Per minute"
label={t("pointsForm.perMinute")}
value={perMinute}
hint={`paid in ${selectedCurrency}`}
icon="⏱️"
hint={t("pointsForm.paidIn", { currency: selectedCurrency })}
icon="\u{23F1}\uFE0F"
/>
<StatusCard
label="Max / day"
value={maxPerDay === "0" ? "Unlimited" : maxPerDay}
icon="📈"
label={t("pointsForm.maxPerDay")}
value={maxPerDay === "0" ? t("pointsForm.unlimited") : maxPerDay}
icon="\u{1F4C8}"
/>
<StatusCard label="Min listeners" value={minListeners} icon="👥" />
<StatusCard label={t("pointsForm.minListeners")} value={minListeners} icon="\u{1F465}" />
</div>
</section>
<section className="mt-6">
<h2 className="admin-section-title">Settings</h2>
<h2 className="admin-section-title">{t("pointsForm.settings")}</h2>
<form action={savePoints}>
<div className="grid cols-2">
<div>
<label htmlFor="radio_points_enabled" style={{ display: "block", fontWeight: 700 }}>
Points enabled
{t("pointsForm.pointsEnabled")}
</label>
<select
id="radio_points_enabled"
@@ -120,17 +119,17 @@ export default async function AdminRadioPointsPage({
defaultValue={enabled ? "1" : "0"}
style={{ width: "100%" }}
>
<option value="1">Enabled</option>
<option value="0">Disabled</option>
<option value="1">{t("pointsForm.enabled")}</option>
<option value="0">{t("pointsForm.disabled")}</option>
</select>
<p className="text-xs text-gray-500 dark:text-gray-400" style={{ margin: "0.2rem 0 0" }}>
Master switch for awarding listener points.
{t("pointsForm.pointsEnabledHint")}
</p>
</div>
<div>
<label htmlFor="radio_points_currency" style={{ display: "block", fontWeight: 700 }}>
Currency
{t("pointsForm.currency")}
</label>
<select
id="radio_points_currency"
@@ -145,7 +144,7 @@ export default async function AdminRadioPointsPage({
))}
</select>
<p className="text-xs text-gray-500 dark:text-gray-400" style={{ margin: "0.2rem 0 0" }}>
Which wallet the points are paid into.
{t("pointsForm.currencyHint")}
</p>
</div>
@@ -154,7 +153,7 @@ export default async function AdminRadioPointsPage({
htmlFor="radio_points_per_minute"
style={{ display: "block", fontWeight: 700 }}
>
Points per minute
{t("pointsForm.pointsPerMinute")}
</label>
<input
id="radio_points_per_minute"
@@ -166,7 +165,7 @@ export default async function AdminRadioPointsPage({
style={{ width: "100%" }}
/>
<p className="text-xs text-gray-500 dark:text-gray-400" style={{ margin: "0.2rem 0 0" }}>
Amount awarded for each full minute of listening.
{t("pointsForm.pointsPerMinuteHint")}
</p>
</div>
@@ -175,7 +174,7 @@ export default async function AdminRadioPointsPage({
htmlFor="radio_points_max_per_day"
style={{ display: "block", fontWeight: 700 }}
>
Max points per day
{t("pointsForm.maxPerDay")}
</label>
<input
id="radio_points_max_per_day"
@@ -187,7 +186,7 @@ export default async function AdminRadioPointsPage({
style={{ width: "100%" }}
/>
<p className="text-xs text-gray-500 dark:text-gray-400" style={{ margin: "0.2rem 0 0" }}>
Daily cap per user. Use <code>0</code> for unlimited.
{t("pointsForm.maxPerDayHint")}
</p>
</div>
@@ -196,7 +195,7 @@ export default async function AdminRadioPointsPage({
htmlFor="radio_points_min_listeners"
style={{ display: "block", fontWeight: 700 }}
>
Minimum listeners
{t("pointsForm.minListeners")}
</label>
<input
id="radio_points_min_listeners"
@@ -208,14 +207,14 @@ export default async function AdminRadioPointsPage({
style={{ width: "100%" }}
/>
<p className="text-xs text-gray-500 dark:text-gray-400" style={{ margin: "0.2rem 0 0" }}>
Points are only awarded when at least this many people are tuned in.
{t("pointsForm.minListenersHint")}
</p>
</div>
</div>
<div className="flex justify-end mt-4">
<button type="submit" className="btn btn-primary">
Save points settings
{t("pointsForm.save")}
</button>
</div>
</form>
src/app/admin/radio/ranks/page.tsx
+29 -26
View File
@@ -7,6 +7,7 @@ import {
import { prisma } from '@/lib/prisma';
import { StatusCard } from '@/components/admin/dashboard';
import { Medal } from 'lucide-react';
import { getTranslations } from "next-intl/server";
export const dynamic = 'force-dynamic';
@@ -19,6 +20,8 @@ type Rank = {
};
export default async function AdminRadioRanksPage() {
const t = await getTranslations("pages.admin.radio");
let ranks: Rank[] = [];
let dbError = false;
@@ -43,11 +46,11 @@ export default async function AdminRadioRanksPage() {
return (
<main>
<nav className="text-xs text-gray-500 dark:text-gray-400 mb-2">
<Link href="/admin/radio">Radio</Link> ·{' '}
<Link href="/admin/radio/settings">Settings</Link> ·{' '}
<Link href="/admin/radio/banners">Banners</Link> ·{' '}
<Link href="/admin/radio/ranks">Ranks</Link> ·{' '}
<Link href="/admin/radio/history">History</Link>
<Link href="/admin/radio">{t("title")}</Link> ·{' '}
<Link href="/admin/radio/settings">{t("settings")}</Link> ·{' '}
<Link href="/admin/radio/banners">{t("banners.title")}</Link> ·{' '}
<Link href="/admin/radio/ranks">{t("ranks")}</Link> ·{' '}
<Link href="/admin/radio/history">{t("history")}</Link>
</nav>
<div className="flex items-center gap-3 mb-6">
@@ -55,69 +58,69 @@ export default async function AdminRadioRanksPage() {
<Medal size={20} className="text-[var(--color-primary)]" />
</div>
<div>
<h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">Radio Ranks</h1>
<p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">DJ / staff ranks assignable on radio applications.</p>
<h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">{t("ranksForm.title")}</h1>
<p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">{t("ranksForm.subtitle")}</p>
</div>
</div>
{dbError ? (
<div className="admin-card mb-6">
<p className="text-xs text-gray-500 dark:text-gray-400 m-0">
Could not load ranks (database unavailable).
{t("ranksForm.dbError")}
</p>
</div>
) : (
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
<StatusCard label="Ranks" value={ranks.length} icon="🎖️" />
<StatusCard label={t("ranks")} value={ranks.length} icon="\u{1F396}\uFE0F" />
<StatusCard
label="Active"
label={t("ranksForm.active")}
value={activeCount}
state={activeCount > 0 ? 'ok' : 'neutral'}
icon="✅"
icon="\u{2705}"
/>
</div>
)}
<section className="mt-6">
<h2 className="admin-section-title">Add rank</h2>
<h2 className="admin-section-title">{t("ranksForm.addRank")}</h2>
<form action={createRadioRank} className="admin-card">
<div className="grid cols-3">
<div>
<label htmlFor="new_name" style={{ display: 'block', fontWeight: 700 }}>
Name
{t("ranksForm.name")}
</label>
<input id="new_name" name="name" required style={{ width: '100%' }} />
</div>
<div>
<label htmlFor="new_badge" style={{ display: 'block', fontWeight: 700 }}>
Badge code
{t("ranksForm.badgeCode")}
</label>
<input id="new_badge" name="badgeCode" style={{ width: '100%' }} />
</div>
<div style={{ display: 'flex', alignItems: 'flex-end' }}>
<label style={{ display: 'inline-flex', gap: '0.4rem', alignItems: 'center' }}>
<input type="checkbox" name="isActive" value="1" defaultChecked /> Active
<input type="checkbox" name="isActive" value="1" defaultChecked /> {t("ranksForm.active")}
</label>
</div>
<div style={{ gridColumn: '1 / -1' }}>
<label htmlFor="new_desc" style={{ display: 'block', fontWeight: 700 }}>
Description
{t("ranksForm.description")}
</label>
<input id="new_desc" name="description" style={{ width: '100%' }} />
</div>
</div>
<div style={{ marginTop: '0.75rem' }}>
<button type="submit" className="btn btn-primary">
Create rank
{t("ranksForm.createRank")}
</button>
</div>
</form>
</section>
<section className="mt-6">
<h2 className="admin-section-title">Existing ranks ({ranks.length})</h2>
<h2 className="admin-section-title">{t("ranksForm.existing", { count: ranks.length })}</h2>
{ranks.length === 0 ? (
<div className="admin-empty">No ranks yet — add one above.</div>
<div className="admin-empty">{t("ranksForm.noRanks")}</div>
) : (
<div className="grid">
{ranks.map((r) => (
@@ -125,7 +128,7 @@ export default async function AdminRadioRanksPage() {
<div className="flex justify-between items-baseline gap-3 mb-2">
<strong>#{String(r.id)}</strong>
<span className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${r.isActive ? 'bg-green-600/20 text-[var(--color-text)]' : 'bg-red-500/22 text-[var(--color-text)]'}`}>
{r.isActive ? 'active' : 'inactive'}
{r.isActive ? t("ranksForm.activeLabel") : t("ranksForm.inactiveLabel")}
</span>
</div>
@@ -135,19 +138,19 @@ export default async function AdminRadioRanksPage() {
name="name"
defaultValue={r.name}
required
placeholder="Name"
placeholder={t("ranksForm.name")}
style={{ minWidth: 140 }}
/>
<input
name="badgeCode"
defaultValue={r.badgeCode ?? ''}
placeholder="Badge"
placeholder={t("ranksForm.badgeCode")}
style={{ minWidth: 100 }}
/>
<input
name="description"
defaultValue={r.description ?? ''}
placeholder="Description"
placeholder={t("ranksForm.description")}
className="flex-1 min-w-[160px]"
/>
<label
@@ -159,17 +162,17 @@ export default async function AdminRadioRanksPage() {
value="1"
defaultChecked={r.isActive}
/>{' '}
Active
{t("ranksForm.active")}
</label>
<button type="submit" className="btn btn-primary">
Save
{t("ranksForm.save")}
</button>
</form>
<form action={deleteRadioRank} style={{ marginTop: '0.5rem' }}>
<input type="hidden" name="id" value={String(r.id)} />
<button type="submit" className="btn btn-danger">
Delete rank #{String(r.id)}
{t("ranksForm.deleteRank", { id: String(r.id) })}
</button>
</form>
</div>
src/app/admin/radio/settings/page.tsx
+27 -28
View File
@@ -3,11 +3,10 @@ import { saveRadioSetting, saveRadioSettings } from '@/actions/admin-radio-extra
import { prisma } from '@/lib/prisma';
import { StatusCard } from '@/components/admin/dashboard';
import { Settings } from 'lucide-react';
import { getTranslations } from "next-intl/server";
export const dynamic = 'force-dynamic';
// Curated radio_* keys (faithful to AtomCMS RadioSettingsSeeder), grouped for
// the editor. Any extra radio_* rows found in the DB are appended under "Other".
type Field = { key: string; comment: string };
type Group = { title: string; fields: Field[] };
@@ -184,6 +183,8 @@ const GROUPS: Group[] = [
const CURATED_KEYS = new Set(GROUPS.flatMap((g) => g.fields.map((f) => f.key)));
export default async function AdminRadioSettingsPage() {
const t = await getTranslations("pages.admin.radio");
let values: Map<string, string> = new Map();
let dbError = false;
let extra: Field[] = [];
@@ -205,13 +206,12 @@ export default async function AdminRadioSettingsPage() {
}
const groups: Group[] = extra.length
? [...GROUPS, { title: 'Other radio settings', fields: extra }]
? [...GROUPS, { title: t("settingsForm.otherSettings"), fields: extra }]
: GROUPS;
const allKeys = [...CURATED_KEYS, ...extra.map((e) => e.key)].join(',');
const totalKeys = CURATED_KEYS.size + extra.length;
// Curated keys that already have a non-empty stored value.
const configuredKeys = [...CURATED_KEYS].filter((k) => {
const v = values.get(k);
return v != null && v !== '';
@@ -221,11 +221,11 @@ export default async function AdminRadioSettingsPage() {
return (
<main>
<nav className="text-xs text-gray-500 dark:text-gray-400 mb-2">
<Link href="/admin/radio">Radio</Link> ·{' '}
<Link href="/admin/radio/settings">Settings</Link> ·{' '}
<Link href="/admin/radio/banners">Banners</Link> ·{' '}
<Link href="/admin/radio/ranks">Ranks</Link> ·{' '}
<Link href="/admin/radio/history">History</Link>
<Link href="/admin/radio">{t("title")}</Link> ·{' '}
<Link href="/admin/radio/settings">{t("settings")}</Link> ·{' '}
<Link href="/admin/radio/banners">{t("banners.title")}</Link> ·{' '}
<Link href="/admin/radio/ranks">{t("ranks")}</Link> ·{' '}
<Link href="/admin/radio/history">{t("history")}</Link>
</nav>
<div className="flex items-center gap-3 mb-6">
@@ -233,38 +233,37 @@ export default async function AdminRadioSettingsPage() {
<Settings size={20} className="text-[var(--color-primary)]" />
</div>
<div>
<h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">Radio Settings</h1>
<p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">Edits write to <code>website_settings</code> (radio_* keys) and bust the runtime settings cache. Booleans use <code>0</code> / <code>1</code>.</p>
<h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">{t("settingsForm.title")}</h1>
<p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">{t("settingsForm.subtitle")}</p>
</div>
</div>
{dbError ? (
<div className="admin-card mb-6">
<p className="text-xs text-gray-500 dark:text-gray-400 m-0">
Could not load settings (database unavailable). Defaults will be
created on save.
{t("settingsForm.dbError")}
</p>
</div>
) : (
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
<StatusCard
label="Radio"
value={radioEnabled ? 'Enabled' : 'Disabled'}
value={radioEnabled ? t("settingsForm.enabled") : t("settingsForm.disabled")}
state={radioEnabled ? 'ok' : 'danger'}
icon="📻"
icon="\u{1F4BB}"
/>
<StatusCard label="Total keys" value={totalKeys} icon="🔑" />
<StatusCard label={t("settingsForm.totalKeys")} value={totalKeys} icon="\u{1F511}" />
<StatusCard
label="Configured"
label={t("settingsForm.configured")}
value={`${configuredKeys}/${CURATED_KEYS.size}`}
hint="curated keys with a value"
icon="⚙️"
hint={t("settingsForm.curatedHint")}
icon="\u{2699}\uFE0F"
/>
<StatusCard
label="Custom keys"
label={t("settingsForm.customKeys")}
value={extra.length}
state={extra.length > 0 ? 'warn' : 'neutral'}
icon="➕"
icon="\u{2795}"
/>
</div>
)}
@@ -273,7 +272,7 @@ export default async function AdminRadioSettingsPage() {
<input type="hidden" name="__keys" value={allKeys} />
<div className="flex justify-end mb-4">
<button type="submit" className="btn btn-primary">
Save all
{t("settingsForm.saveAll")}
</button>
</div>
@@ -308,19 +307,19 @@ export default async function AdminRadioSettingsPage() {
<div className="flex justify-end">
<button type="submit" className="btn btn-primary">
Save all
{t("settingsForm.saveAll")}
</button>
</div>
</form>
<section className="admin-card" style={{ marginTop: '1.5rem' }}>
<h3 style={{ marginTop: 0 }}>Add / overwrite a single key</h3>
<h3 style={{ marginTop: 0 }}>{t("settingsForm.singleKey")}</h3>
<form action={saveRadioSetting} className="flex gap-2 flex-wrap">
<input name="key" placeholder="radio_custom_key" required />
<input name="value" placeholder="value" className="flex-1 min-w-[160px]" />
<input name="comment" placeholder="comment (optional)" />
<input name="key" placeholder={t("settingsForm.keyPlaceholder")} required />
<input name="value" placeholder={t("settingsForm.valuePlaceholder")} className="flex-1 min-w-[160px]" />
<input name="comment" placeholder={t("settingsForm.commentPlaceholder")} />
<button type="submit" className="btn btn-primary">
Save
{t("settingsForm.saveSingle")}
</button>
</form>
</section>