feat(housekeeping): cut over administration to ase
This commit is contained in:
Simo committed
1 parent
c9e35cf602
commit
2b8f73a91d
457 files changed
+589
-55936
No files matched your search
@@ -1,243 +0,0 @@
|
||||
import { desc } from "drizzle-orm";
|
||||
import { getTranslations } from "next-intl/server";
|
||||
import {
|
||||
createApiKey,
|
||||
deleteApiKey,
|
||||
toggleApiKey,
|
||||
} from "@/actions/admin-radio-api-keys";
|
||||
import { StatusCard } from "@/components/admin/dashboard";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { db, RadioApiKeys } from "@/lib/db";
|
||||
import { formatDate } from "@/lib/format-date";
|
||||
|
||||
export const metadata = { title: "Radio API Keys" };
|
||||
|
||||
type ApiKey = {
|
||||
id: bigint;
|
||||
name: string;
|
||||
key: string;
|
||||
allowedIps: string | null;
|
||||
rateLimit: number;
|
||||
lastUsedAt: Date | null;
|
||||
expiresAt: Date | null;
|
||||
isActive: boolean;
|
||||
createdAt: Date | null;
|
||||
};
|
||||
|
||||
function maskKey(key: string): string {
|
||||
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;
|
||||
|
||||
try {
|
||||
keys = await db
|
||||
.select({
|
||||
id: RadioApiKeys.id,
|
||||
name: RadioApiKeys.name,
|
||||
key: RadioApiKeys.key,
|
||||
allowedIps: RadioApiKeys.allowedIps,
|
||||
rateLimit: RadioApiKeys.rateLimit,
|
||||
lastUsedAt: RadioApiKeys.lastUsedAt,
|
||||
expiresAt: RadioApiKeys.expiresAt,
|
||||
isActive: RadioApiKeys.isActive,
|
||||
createdAt: RadioApiKeys.createdAt,
|
||||
})
|
||||
.from(RadioApiKeys)
|
||||
.orderBy(desc(RadioApiKeys.isActive), desc(RadioApiKeys.id))
|
||||
.limit(500)
|
||||
.catch(() => {
|
||||
dbError = true;
|
||||
return [];
|
||||
});
|
||||
} catch {
|
||||
dbError = true;
|
||||
keys = [];
|
||||
}
|
||||
|
||||
const total = keys.length;
|
||||
const activeCount = keys.filter((k) => k.isActive).length;
|
||||
const inactiveCount = total - activeCount;
|
||||
|
||||
return (
|
||||
<main>
|
||||
<section className="mt-6">
|
||||
{dbError ? (
|
||||
<div className="admin-card" style={{ marginTop: "1rem" }}>
|
||||
<p className="text-xs theme-text-muted dark:theme-text-muted m-0">
|
||||
{t("apiKeysForm.dbError")}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
|
||||
<StatusCard
|
||||
label={t("apiKeysForm.totalKeys")}
|
||||
value={total}
|
||||
icon="🔑"
|
||||
/>
|
||||
<StatusCard
|
||||
label={t("apiKeysForm.active")}
|
||||
value={activeCount}
|
||||
state={activeCount > 0 ? "ok" : "neutral"}
|
||||
icon="✅"
|
||||
/>
|
||||
<StatusCard
|
||||
label={t("apiKeysForm.inactive")}
|
||||
value={inactiveCount}
|
||||
state={inactiveCount > 0 ? "warn" : "neutral"}
|
||||
icon="🚫"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
<section className="mt-6">
|
||||
<h2>{t("apiKeysForm.generateKey")}</h2>
|
||||
<p className="text-xs theme-text-muted dark:theme-text-muted">
|
||||
{t("apiKeysForm.generateHint")}
|
||||
</p>
|
||||
<form action={createApiKey} className="admin-card">
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||
<div>
|
||||
<label
|
||||
htmlFor="new_name"
|
||||
style={{ display: "block", fontWeight: 700 }}
|
||||
>
|
||||
{t("apiKeysForm.name")}
|
||||
</label>
|
||||
<input
|
||||
id="new_name"
|
||||
name="name"
|
||||
placeholder={t("apiKeysForm.namePlaceholder")}
|
||||
required
|
||||
maxLength={255}
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
htmlFor="new_rateLimit"
|
||||
style={{ display: "block", fontWeight: 700 }}
|
||||
>
|
||||
{t("apiKeysForm.rateLimit")}
|
||||
</label>
|
||||
<input
|
||||
id="new_rateLimit"
|
||||
name="rateLimit"
|
||||
type="number"
|
||||
min={0}
|
||||
defaultValue={300}
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ gridColumn: "1 / -1" }}>
|
||||
<label
|
||||
htmlFor="new_allowedIps"
|
||||
style={{ display: "block", fontWeight: 700 }}
|
||||
>
|
||||
{t("apiKeysForm.allowedIps")}
|
||||
</label>
|
||||
<input
|
||||
id="new_allowedIps"
|
||||
name="allowedIps"
|
||||
placeholder={t("apiKeysForm.allowedIpsPlaceholder")}
|
||||
maxLength={255}
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ marginTop: "0.75rem" }}>
|
||||
<Button type="submit" variant="default">
|
||||
{t("apiKeysForm.generate")}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section className="mt-6">
|
||||
<h2 className="admin-section-title">
|
||||
{t("apiKeysForm.existingKeys", { count: total })}
|
||||
</h2>
|
||||
{total === 0 ? (
|
||||
<div className="admin-empty">{t("apiKeysForm.noKeys")}</div>
|
||||
) : (
|
||||
<div className="overflow-x-auto">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</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>
|
||||
{keys.map((k) => (
|
||||
<tr key={String(k.id)}>
|
||||
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
|
||||
{String(k.id)}
|
||||
</td>
|
||||
<td>{k.name}</td>
|
||||
<td>
|
||||
<code title={t("apiKeysForm.maskedHint")}>
|
||||
{maskKey(k.key)}
|
||||
</code>
|
||||
</td>
|
||||
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
|
||||
{k.allowedIps || t("apiKeysForm.any")}
|
||||
</td>
|
||||
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
|
||||
{k.rateLimit}/min
|
||||
</td>
|
||||
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
|
||||
{formatDate(k.lastUsedAt, "datetime", "\u2014")}
|
||||
</td>
|
||||
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
|
||||
{formatDate(k.expiresAt, "datetime", "\u2014")}
|
||||
</td>
|
||||
<td>
|
||||
<span
|
||||
className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${k.isActive ? "bg-[var(--admin-success-subtle)] text-[var(--admin-text)]" : "bg-[var(--admin-error-subtle)] text-[var(--admin-text)]"}`}
|
||||
>
|
||||
{k.isActive
|
||||
? t("apiKeysForm.activeLabel")
|
||||
: t("apiKeysForm.inactiveLabel")}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<div style={{ display: "inline-flex", gap: "0.4rem" }}>
|
||||
<form action={toggleApiKey}>
|
||||
<input type="hidden" name="id" value={String(k.id)} />
|
||||
<Button type="submit" variant="outline">
|
||||
{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" variant="destructive">
|
||||
{t("apiKeysForm.delete")}
|
||||
</Button>
|
||||
</form>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -1,326 +0,0 @@
|
||||
import { asc } from "drizzle-orm";
|
||||
import Image from "next/image";
|
||||
import { getTranslations } from "next-intl/server";
|
||||
import {
|
||||
createTrack,
|
||||
deleteTrack,
|
||||
toggleTrack,
|
||||
} from "@/actions/admin-radio-autodj";
|
||||
import { StatusCard } from "@/components/admin/dashboard";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { db, RadioAutoDjPlaylist } from "@/lib/db";
|
||||
import { formatDate } from "@/lib/format-date";
|
||||
|
||||
export const metadata = { title: "Radio AutoDJ" };
|
||||
|
||||
type Track = {
|
||||
id: bigint;
|
||||
title: string;
|
||||
artist: string | null;
|
||||
album: string | null;
|
||||
artworkUrl: string | null;
|
||||
duration: number | null;
|
||||
playCount: number;
|
||||
lastPlayedAt: Date | null;
|
||||
isActive: boolean;
|
||||
sortOrder: number;
|
||||
};
|
||||
|
||||
function formatDuration(seconds: number | null): string {
|
||||
if (seconds == null || seconds < 0) return "\u2014";
|
||||
const m = Math.floor(seconds / 60);
|
||||
const s = seconds % 60;
|
||||
return `${m}:${String(s).padStart(2, "0")}`;
|
||||
}
|
||||
|
||||
export default async function AdminRadioAutoDjPage() {
|
||||
const t = await getTranslations("pages.admin.radio");
|
||||
|
||||
let tracks: Track[] = [];
|
||||
let dbError = false;
|
||||
|
||||
try {
|
||||
tracks = await db
|
||||
.select({
|
||||
id: RadioAutoDjPlaylist.id,
|
||||
title: RadioAutoDjPlaylist.title,
|
||||
artist: RadioAutoDjPlaylist.artist,
|
||||
album: RadioAutoDjPlaylist.album,
|
||||
artworkUrl: RadioAutoDjPlaylist.artworkUrl,
|
||||
duration: RadioAutoDjPlaylist.duration,
|
||||
playCount: RadioAutoDjPlaylist.playCount,
|
||||
lastPlayedAt: RadioAutoDjPlaylist.lastPlayedAt,
|
||||
isActive: RadioAutoDjPlaylist.isActive,
|
||||
sortOrder: RadioAutoDjPlaylist.sortOrder,
|
||||
})
|
||||
.from(RadioAutoDjPlaylist)
|
||||
.orderBy(
|
||||
asc(RadioAutoDjPlaylist.sortOrder),
|
||||
asc(RadioAutoDjPlaylist.title),
|
||||
)
|
||||
.catch(() => {
|
||||
dbError = true;
|
||||
return [];
|
||||
});
|
||||
} catch {
|
||||
dbError = true;
|
||||
tracks = [];
|
||||
}
|
||||
|
||||
const activeCount = tracks.filter((t) => t.isActive).length;
|
||||
const inactiveCount = tracks.length - activeCount;
|
||||
|
||||
return (
|
||||
<main>
|
||||
<section className="mt-6">
|
||||
{dbError ? (
|
||||
<div className="admin-card mb-6">
|
||||
<p className="text-xs theme-text-muted dark:theme-text-muted m-0">
|
||||
{t("autoDjForm.dbError")}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
|
||||
<StatusCard
|
||||
label={t("autoDjForm.tracks")}
|
||||
value={tracks.length}
|
||||
icon="🎵"
|
||||
/>
|
||||
<StatusCard
|
||||
label={t("autoDjForm.active")}
|
||||
value={activeCount}
|
||||
state={activeCount > 0 ? "ok" : "neutral"}
|
||||
icon="▶️"
|
||||
/>
|
||||
<StatusCard
|
||||
label={t("autoDjForm.inactive")}
|
||||
value={inactiveCount}
|
||||
state={inactiveCount > 0 ? "warn" : "neutral"}
|
||||
icon="⏸️"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
<section className="mt-6">
|
||||
<h2 className="admin-section-title">{t("autoDjForm.addTrack")}</h2>
|
||||
<form action={createTrack} className="admin-card">
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||
<div>
|
||||
<label
|
||||
htmlFor="new_title"
|
||||
style={{ display: "block", fontWeight: 700 }}
|
||||
>
|
||||
{t("autoDjForm.trackTitle")}
|
||||
</label>
|
||||
<input
|
||||
id="new_title"
|
||||
name="title"
|
||||
placeholder={t("autoDjForm.titlePlaceholder")}
|
||||
required
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
htmlFor="new_artist"
|
||||
style={{ display: "block", fontWeight: 700 }}
|
||||
>
|
||||
{t("autoDjForm.artist")}
|
||||
</label>
|
||||
<input id="new_artist" name="artist" style={{ width: "100%" }} />
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
htmlFor="new_album"
|
||||
style={{ display: "block", fontWeight: 700 }}
|
||||
>
|
||||
{t("autoDjForm.album")}
|
||||
</label>
|
||||
<input id="new_album" name="album" style={{ width: "100%" }} />
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
htmlFor="new_artworkUrl"
|
||||
style={{ display: "block", fontWeight: 700 }}
|
||||
>
|
||||
{t("autoDjForm.artworkUrl")}
|
||||
</label>
|
||||
<input
|
||||
id="new_artworkUrl"
|
||||
name="artworkUrl"
|
||||
placeholder={t("autoDjForm.artworkUrlPlaceholder")}
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
htmlFor="new_duration"
|
||||
style={{ display: "block", fontWeight: 700 }}
|
||||
>
|
||||
{t("autoDjForm.duration")}
|
||||
</label>
|
||||
<input
|
||||
id="new_duration"
|
||||
name="duration"
|
||||
type="number"
|
||||
min={0}
|
||||
placeholder={t("autoDjForm.durationPlaceholder")}
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
htmlFor="new_sortOrder"
|
||||
style={{ display: "block", fontWeight: 700 }}
|
||||
>
|
||||
{t("autoDjForm.sortOrder")}
|
||||
</label>
|
||||
<input
|
||||
id="new_sortOrder"
|
||||
name="sortOrder"
|
||||
type="number"
|
||||
defaultValue={0}
|
||||
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
|
||||
/>{" "}
|
||||
{t("autoDjForm.active")}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ marginTop: "0.75rem" }}>
|
||||
<Button type="submit" variant="default">
|
||||
{t("autoDjForm.addTrack")}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section className="mt-6">
|
||||
<h2 className="admin-section-title">
|
||||
{t("autoDjForm.playlist", { count: tracks.length })}
|
||||
</h2>
|
||||
{tracks.length === 0 ? (
|
||||
<div className="admin-empty">{t("autoDjForm.noTracks")}</div>
|
||||
) : (
|
||||
<div className="overflow-x-auto">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<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((track) => (
|
||||
<tr key={String(track.id)}>
|
||||
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
|
||||
{track.sortOrder}
|
||||
</td>
|
||||
<td>
|
||||
<span className="inline-flex gap-2 items-center">
|
||||
{track.artworkUrl ? (
|
||||
<Image
|
||||
src={track.artworkUrl}
|
||||
alt=""
|
||||
width={32}
|
||||
height={32}
|
||||
style={{ borderRadius: 4, objectFit: "cover" }}
|
||||
unoptimized
|
||||
/>
|
||||
) : null}
|
||||
<strong>{track.title}</strong>
|
||||
</span>
|
||||
</td>
|
||||
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
|
||||
{track.artist ?? "\u2014"}
|
||||
</td>
|
||||
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
|
||||
{track.album ?? "\u2014"}
|
||||
</td>
|
||||
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
|
||||
{formatDuration(track.duration)}
|
||||
</td>
|
||||
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
|
||||
{track.playCount}
|
||||
</td>
|
||||
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
|
||||
{formatDate(track.lastPlayedAt, "datetime", "\u2014")}
|
||||
</td>
|
||||
<td>
|
||||
<span
|
||||
className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${track.isActive ? "bg-[var(--admin-success-subtle)] text-[var(--admin-text)]" : "bg-[var(--admin-error-subtle)] text-[var(--admin-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(track.id)}
|
||||
/>
|
||||
<input
|
||||
type="hidden"
|
||||
name="isActive"
|
||||
value={track.isActive ? "0" : "1"}
|
||||
/>
|
||||
<Button type="submit" variant="outline">
|
||||
{track.isActive
|
||||
? t("autoDjForm.deactivate")
|
||||
: t("autoDjForm.activate")}
|
||||
</Button>
|
||||
</form>
|
||||
<form action={deleteTrack}>
|
||||
<input
|
||||
type="hidden"
|
||||
name="id"
|
||||
value={String(track.id)}
|
||||
/>
|
||||
<Button type="submit" variant="destructive">
|
||||
{t("autoDjForm.delete")}
|
||||
</Button>
|
||||
</form>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -1,303 +0,0 @@
|
||||
import { asc } from "drizzle-orm";
|
||||
import NextImage from "next/image";
|
||||
import { getTranslations } from "next-intl/server";
|
||||
import {
|
||||
createRadioBanner,
|
||||
deleteRadioBanner,
|
||||
updateRadioBanner,
|
||||
} from "@/actions/admin-radio-extra";
|
||||
import { StatusCard } from "@/components/admin/dashboard";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { db, RadioBanners } from "@/lib/db";
|
||||
import { formatDate } from "@/lib/format-date";
|
||||
|
||||
type Banner = {
|
||||
id: bigint;
|
||||
userId: bigint;
|
||||
imagePath: string;
|
||||
title: string | null;
|
||||
description: string | null;
|
||||
sortOrder: number;
|
||||
isActive: boolean;
|
||||
createdAt: Date | null;
|
||||
};
|
||||
|
||||
export default async function AdminRadioBannersPage() {
|
||||
const t = await getTranslations("pages.admin.radio");
|
||||
|
||||
let banners: Banner[] = [];
|
||||
let dbError = false;
|
||||
|
||||
try {
|
||||
banners = await db
|
||||
.select({
|
||||
id: RadioBanners.id,
|
||||
userId: RadioBanners.userId,
|
||||
imagePath: RadioBanners.imagePath,
|
||||
title: RadioBanners.title,
|
||||
description: RadioBanners.description,
|
||||
sortOrder: RadioBanners.sortOrder,
|
||||
isActive: RadioBanners.isActive,
|
||||
createdAt: RadioBanners.createdAt,
|
||||
})
|
||||
.from(RadioBanners)
|
||||
.orderBy(asc(RadioBanners.sortOrder), asc(RadioBanners.id));
|
||||
} catch {
|
||||
dbError = true;
|
||||
banners = [];
|
||||
}
|
||||
|
||||
const activeCount = banners.filter((b) => b.isActive).length;
|
||||
const hiddenCount = banners.length - activeCount;
|
||||
|
||||
return (
|
||||
<main>
|
||||
{dbError ? (
|
||||
<div className="admin-card mb-6">
|
||||
<p className="text-xs theme-text-muted dark:theme-text-muted m-0">
|
||||
{t("banners.dbError")}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
|
||||
<StatusCard
|
||||
label={t("banners.title")}
|
||||
value={banners.length}
|
||||
icon="🖼️"
|
||||
/>
|
||||
<StatusCard
|
||||
label={t("banners.statusActive")}
|
||||
value={activeCount}
|
||||
state={activeCount > 0 ? "ok" : "neutral"}
|
||||
icon="✅"
|
||||
/>
|
||||
<StatusCard
|
||||
label={t("banners.statusHidden")}
|
||||
value={hiddenCount}
|
||||
state={hiddenCount > 0 ? "warn" : "neutral"}
|
||||
icon="🚫"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<section className="mt-6">
|
||||
<h2 className="admin-section-title">{t("banners.addBanner")}</h2>
|
||||
<form action={createRadioBanner} className="admin-card">
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||
<div>
|
||||
<label
|
||||
htmlFor="new_imagePath"
|
||||
style={{ display: "block", fontWeight: 700 }}
|
||||
>
|
||||
{t("banners.form.imagePath")}
|
||||
</label>
|
||||
<input
|
||||
id="new_imagePath"
|
||||
name="imagePath"
|
||||
placeholder={t("banners.form.imagePathPlaceholder")}
|
||||
required
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
htmlFor="new_title"
|
||||
style={{ display: "block", fontWeight: 700 }}
|
||||
>
|
||||
{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 }}
|
||||
>
|
||||
{t("banners.form.description")}
|
||||
</label>
|
||||
<textarea
|
||||
id="new_description"
|
||||
name="description"
|
||||
rows={2}
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
htmlFor="new_sortOrder"
|
||||
style={{ display: "block", fontWeight: 700 }}
|
||||
>
|
||||
{t("banners.form.sortOrder")}
|
||||
</label>
|
||||
<input
|
||||
id="new_sortOrder"
|
||||
name="sortOrder"
|
||||
type="number"
|
||||
defaultValue={0}
|
||||
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
|
||||
/>{" "}
|
||||
{t("banners.form.active")}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ marginTop: "0.75rem" }}>
|
||||
<Button type="submit" variant="default">
|
||||
{t("banners.createBanner")}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section className="mt-6">
|
||||
<h2 className="admin-section-title">
|
||||
{t("banners.existing", { count: banners.length })}
|
||||
</h2>
|
||||
{banners.length === 0 ? (
|
||||
<div className="admin-empty">{t("banners.noBanners")}</div>
|
||||
) : (
|
||||
<div className="grid">
|
||||
{banners.map((b) => (
|
||||
<div key={String(b.id)} className="admin-card">
|
||||
<div className="flex justify-between items-baseline gap-3">
|
||||
<strong>#{String(b.id)}</strong>
|
||||
<span className="text-sm theme-text-muted dark:theme-text-muted inline-flex gap-2 items-center">
|
||||
{t("banners.byUser", { id: String(b.userId) })} ·{" "}
|
||||
{formatDate(b.createdAt, "datetime", "\u2014")} ·{" "}
|
||||
<span
|
||||
className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${b.isActive ? "bg-[var(--admin-success-subtle)] text-[var(--admin-text)]" : "bg-[var(--admin-error-subtle)] text-[var(--admin-text)]"}`}
|
||||
>
|
||||
{b.isActive ? t("banners.active") : t("banners.hidden")}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{b.imagePath ? (
|
||||
<NextImage
|
||||
src={b.imagePath}
|
||||
alt={b.title ?? t("banners.bannerAlt")}
|
||||
width={800}
|
||||
height={200}
|
||||
className="article-img my-2"
|
||||
unoptimized
|
||||
/>
|
||||
) : null}
|
||||
|
||||
<form action={updateRadioBanner}>
|
||||
<input type="hidden" name="id" value={String(b.id)} />
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||
<div>
|
||||
<label
|
||||
htmlFor={`img_${b.id}`}
|
||||
style={{ display: "block", fontWeight: 700 }}
|
||||
>
|
||||
{t("banners.form.imagePath")}
|
||||
</label>
|
||||
<input
|
||||
id={`img_${b.id}`}
|
||||
name="imagePath"
|
||||
defaultValue={b.imagePath}
|
||||
required
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
htmlFor={`title_${b.id}`}
|
||||
style={{ display: "block", fontWeight: 700 }}
|
||||
>
|
||||
{t("banners.form.title")}
|
||||
</label>
|
||||
<input
|
||||
id={`title_${b.id}`}
|
||||
name="title"
|
||||
defaultValue={b.title ?? ""}
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ gridColumn: "1 / -1" }}>
|
||||
<label
|
||||
htmlFor={`desc_${b.id}`}
|
||||
style={{ display: "block", fontWeight: 700 }}
|
||||
>
|
||||
{t("banners.form.description")}
|
||||
</label>
|
||||
<textarea
|
||||
id={`desc_${b.id}`}
|
||||
name="description"
|
||||
rows={2}
|
||||
defaultValue={b.description ?? ""}
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
htmlFor={`sort_${b.id}`}
|
||||
style={{ display: "block", fontWeight: 700 }}
|
||||
>
|
||||
{t("banners.form.sortOrder")}
|
||||
</label>
|
||||
<input
|
||||
id={`sort_${b.id}`}
|
||||
name="sortOrder"
|
||||
type="number"
|
||||
defaultValue={b.sortOrder}
|
||||
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={b.isActive}
|
||||
/>{" "}
|
||||
{t("banners.form.active")}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ marginTop: "0.6rem" }}>
|
||||
<Button type="submit" variant="default">
|
||||
{t("banners.save")}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<form
|
||||
action={deleteRadioBanner}
|
||||
style={{ marginTop: "0.5rem" }}
|
||||
>
|
||||
<input type="hidden" name="id" value={String(b.id)} />
|
||||
<Button type="submit" variant="destructive">
|
||||
{t("banners.delete")}
|
||||
</Button>
|
||||
</form>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -1,66 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
/**
|
||||
* Read-only copy box for an embed snippet. Renders the code inside a
|
||||
* <textarea readOnly> so staff can select/copy it, plus a one-click copy
|
||||
* button (with clipboard fallback to selecting the text).
|
||||
*/
|
||||
export function EmbedSnippet({
|
||||
title,
|
||||
description,
|
||||
snippet,
|
||||
}: {
|
||||
title: string;
|
||||
description?: string;
|
||||
snippet: string;
|
||||
}) {
|
||||
const [copied, setCopied] = useState(false);
|
||||
|
||||
async function copy() {
|
||||
try {
|
||||
await navigator.clipboard.writeText(snippet);
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 1500);
|
||||
} catch {
|
||||
// Clipboard API unavailable (e.g. insecure context) — fall back to
|
||||
// selecting the textarea so the user can copy manually.
|
||||
const el = document.getElementById(
|
||||
`snippet-${title.replace(/\s+/g, "-").toLowerCase()}`,
|
||||
) as HTMLTextAreaElement | null;
|
||||
el?.select();
|
||||
}
|
||||
}
|
||||
|
||||
const id = `snippet-${title.replace(/\s+/g, "-").toLowerCase()}`;
|
||||
const lines = snippet.split("\n").length;
|
||||
|
||||
return (
|
||||
<section className="mt-6">
|
||||
<div className="flex items-center justify-between gap-4 mb-1">
|
||||
<h2 className="m-0 text-base font-bold text-[var(--admin-text)]">
|
||||
{title}
|
||||
</h2>
|
||||
<Button type="button" variant="default" onClick={copy}>
|
||||
{copied ? "Copied!" : "Copy"}
|
||||
</Button>
|
||||
</div>
|
||||
{description ? (
|
||||
<p className="text-xs theme-text-muted dark:theme-text-muted mb-3">
|
||||
{description}
|
||||
</p>
|
||||
) : null}
|
||||
<textarea
|
||||
id={id}
|
||||
readOnly
|
||||
value={snippet}
|
||||
rows={Math.min(Math.max(lines + 1, 3), 14)}
|
||||
onFocus={(e) => e.currentTarget.select()}
|
||||
spellCheck={false}
|
||||
className="w-full font-mono text-sm resize-vertical"
|
||||
/>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -1,126 +0,0 @@
|
||||
import { getTranslations } from "next-intl/server";
|
||||
import { StatusCard } from "@/components/admin/dashboard";
|
||||
import Link from "@/components/link";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { resolveHotelName } from "@/lib/hotel-name";
|
||||
import { siteSettings } from "@/lib/services/site-settings";
|
||||
import { EmbedSnippet } from "./embed-snippet";
|
||||
|
||||
export const metadata = { title: "Radio Embed" };
|
||||
|
||||
export default async function AdminRadioEmbedPage() {
|
||||
const t = await getTranslations("pages.admin.radio");
|
||||
|
||||
let streamUrl = "";
|
||||
let radioName = "Radio";
|
||||
let nowPlayingApiUrl = "";
|
||||
try {
|
||||
streamUrl = (await siteSettings.get("radio_stream_url", "")) ?? "";
|
||||
radioName =
|
||||
(await siteSettings.get("radio_name", null)) ??
|
||||
(await resolveHotelName());
|
||||
nowPlayingApiUrl =
|
||||
(await siteSettings.get("radio_now_playing_api_url", "")) ?? "";
|
||||
} catch {
|
||||
streamUrl = "";
|
||||
}
|
||||
|
||||
streamUrl = streamUrl.trim();
|
||||
nowPlayingApiUrl = nowPlayingApiUrl.trim();
|
||||
const hasStream = streamUrl !== "";
|
||||
|
||||
const audioSnippet = hasStream
|
||||
? `<audio controls preload="none" src="${streamUrl}">\n ${t("embedPage.audioUnsupported")}\n</audio>`
|
||||
: "";
|
||||
|
||||
const iframeSnippet = hasStream
|
||||
? `<iframe\n src="/radio/embed"\n title="${radioName}"\n width="320"\n height="120"\n frameborder="0"\n allow="autoplay"\n style="border:0;border-radius:8px;overflow:hidden"\n></iframe>`
|
||||
: "";
|
||||
|
||||
return (
|
||||
<main>
|
||||
<section className="mt-6">
|
||||
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
|
||||
<StatusCard
|
||||
label={t("embedPage.streamUrl")}
|
||||
value={
|
||||
hasStream ? t("embedPage.configured") : t("embedPage.missing")
|
||||
}
|
||||
state={hasStream ? "ok" : "danger"}
|
||||
icon="💻"
|
||||
/>
|
||||
<StatusCard
|
||||
label={t("embedPage.radioName")}
|
||||
value={radioName}
|
||||
icon="🎙️"
|
||||
/>
|
||||
<StatusCard
|
||||
label={t("embedPage.nowPlayingApi")}
|
||||
value={
|
||||
nowPlayingApiUrl ? t("embedPage.set") : t("embedPage.notSet")
|
||||
}
|
||||
state={nowPlayingApiUrl ? "ok" : "neutral"}
|
||||
icon="🎵"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{!hasStream ? (
|
||||
<section className="mt-6">
|
||||
<h2 className="admin-section-title">{t("embedPage.noStreamUrl")}</h2>
|
||||
<p className="text-xs theme-text-muted dark:theme-text-muted">
|
||||
{t("embedPage.noStreamUrlText")}
|
||||
</p>
|
||||
<p>
|
||||
<Button variant="default" asChild>
|
||||
<Link href="/admin/radio/settings">
|
||||
{t("embedPage.goToSettings")}
|
||||
</Link>
|
||||
</Button>
|
||||
</p>
|
||||
</section>
|
||||
) : (
|
||||
<>
|
||||
<section className="mt-6">
|
||||
<h2 className="admin-section-title">
|
||||
{t("embedPage.livePreview")}
|
||||
</h2>
|
||||
<p className="text-xs theme-text-muted dark:theme-text-muted">
|
||||
{t("embedPage.livePreviewText")}
|
||||
</p>
|
||||
<div className="admin-card">
|
||||
{}
|
||||
<audio
|
||||
controls
|
||||
preload="none"
|
||||
src={streamUrl}
|
||||
style={{ width: "100%" }}
|
||||
>
|
||||
<track kind="captions" />
|
||||
{t("embedPage.audioUnsupported")}
|
||||
</audio>
|
||||
<p
|
||||
className="text-xs theme-text-muted dark:theme-text-muted"
|
||||
style={{ margin: "0.5rem 0 0", wordBreak: "break-all" }}
|
||||
>
|
||||
{t("embedPage.source")}: <code>{streamUrl}</code>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<EmbedSnippet
|
||||
title={t("embedPage.audioSnippet")}
|
||||
description={t("embedPage.audioSnippetDesc")}
|
||||
snippet={audioSnippet}
|
||||
/>
|
||||
|
||||
<EmbedSnippet
|
||||
title={t("embedPage.iframeSnippet")}
|
||||
description={t("embedPage.iframeSnippetDesc")}
|
||||
snippet={iframeSnippet}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -1,164 +0,0 @@
|
||||
import { desc, inArray } from "drizzle-orm";
|
||||
import { getTranslations } from "next-intl/server";
|
||||
import { StatusCard } from "@/components/admin/dashboard";
|
||||
import { db, RadioHistory, User } from "@/lib/db";
|
||||
import { formatDate } from "@/lib/format-date";
|
||||
|
||||
type History = {
|
||||
id: bigint;
|
||||
userId: bigint;
|
||||
showName: string | null;
|
||||
startedAt: Date;
|
||||
endedAt: Date | null;
|
||||
listenersCount: number;
|
||||
notes: string | null;
|
||||
};
|
||||
|
||||
function formatDuration(start: Date, end: Date | null): string {
|
||||
if (!end) return "\u2014";
|
||||
const ms = end.getTime() - start.getTime();
|
||||
if (ms <= 0) return "\u2014";
|
||||
const mins = Math.round(ms / 60000);
|
||||
const h = Math.floor(mins / 60);
|
||||
const m = mins % 60;
|
||||
return h > 0 ? `${h}h ${m}m` : `${m}m`;
|
||||
}
|
||||
|
||||
export default async function AdminRadioHistoryPage() {
|
||||
const t = await getTranslations("pages.admin.radio");
|
||||
|
||||
let history: History[] = [];
|
||||
let names = new Map<string, string>();
|
||||
let dbError = false;
|
||||
|
||||
try {
|
||||
history = await db
|
||||
.select({
|
||||
id: RadioHistory.id,
|
||||
userId: RadioHistory.userId,
|
||||
showName: RadioHistory.showName,
|
||||
startedAt: RadioHistory.startedAt,
|
||||
endedAt: RadioHistory.endedAt,
|
||||
listenersCount: RadioHistory.listenersCount,
|
||||
notes: RadioHistory.notes,
|
||||
})
|
||||
.from(RadioHistory)
|
||||
.orderBy(desc(RadioHistory.startedAt))
|
||||
.limit(100);
|
||||
|
||||
const ids = Array.from(
|
||||
new Set(history.map((h) => Number(h.userId))),
|
||||
).filter((n) => Number.isFinite(n) && n > 0);
|
||||
if (ids.length > 0) {
|
||||
const users = await db
|
||||
.select({ id: User.id, username: User.username })
|
||||
.from(User)
|
||||
.where(inArray(User.id, ids));
|
||||
names = new Map(users.map((u) => [String(u.id), u.username]));
|
||||
}
|
||||
} catch {
|
||||
dbError = true;
|
||||
history = [];
|
||||
}
|
||||
|
||||
const liveCount = history.filter((h) => !h.endedAt).length;
|
||||
const peakListeners = history.reduce(
|
||||
(max, h) => (h.listenersCount > max ? h.listenersCount : max),
|
||||
0,
|
||||
);
|
||||
const uniqueDjs = new Set(history.map((h) => String(h.userId))).size;
|
||||
|
||||
return (
|
||||
<main>
|
||||
{dbError ? (
|
||||
<div className="admin-card mb-6">
|
||||
<p className="text-xs theme-text-muted dark:theme-text-muted m-0">
|
||||
{t("historyPage.dbError")}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
|
||||
<StatusCard
|
||||
label={t("historyPage.showsLogged")}
|
||||
value={history.length}
|
||||
icon="🎙️"
|
||||
/>
|
||||
<StatusCard
|
||||
label={t("historyPage.onAirNow")}
|
||||
value={liveCount}
|
||||
state={liveCount > 0 ? "ok" : "neutral"}
|
||||
icon="🔴"
|
||||
/>
|
||||
<StatusCard
|
||||
label={t("historyPage.uniqueDjs")}
|
||||
value={uniqueDjs}
|
||||
icon="🧑🎤"
|
||||
/>
|
||||
<StatusCard
|
||||
label={t("historyPage.peakListeners")}
|
||||
value={peakListeners}
|
||||
icon="👥"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!dbError && history.length === 0 ? (
|
||||
<div className="admin-empty">{t("historyPage.empty")}</div>
|
||||
) : null}
|
||||
|
||||
{history.length > 0 ? (
|
||||
<section className="mt-6">
|
||||
<h2 className="admin-section-title">
|
||||
{t("historyPage.showLog", { count: history.length })}
|
||||
</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</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>
|
||||
{history.map((h) => (
|
||||
<tr key={String(h.id)}>
|
||||
<td>{String(h.id)}</td>
|
||||
<td>
|
||||
{names.get(String(h.userId)) ?? `#${String(h.userId)}`}
|
||||
</td>
|
||||
<td>{h.showName ?? "\u2014"}</td>
|
||||
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
|
||||
{formatDate(h.startedAt, "datetime", "\u2014")}
|
||||
</td>
|
||||
<td>
|
||||
{h.endedAt ? (
|
||||
<span className="text-sm theme-text-muted dark:theme-text-muted">
|
||||
{formatDate(h.endedAt, "datetime", "\u2014")}
|
||||
</span>
|
||||
) : (
|
||||
<span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-[var(--admin-success-subtle)] text-[var(--admin-text)]">
|
||||
{t("historyPage.onAir")}
|
||||
</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
|
||||
{formatDuration(h.startedAt, h.endedAt)}
|
||||
</td>
|
||||
<td>{h.listenersCount}</td>
|
||||
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
|
||||
{h.notes ?? "\u2014"}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
) : null}
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -1,15 +0,0 @@
|
||||
import { redirect } from "next/navigation";
|
||||
import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
|
||||
|
||||
export default async function RadioAdminLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
const { session, permissions } = await getAdminContext();
|
||||
if (!canAccess(permissions, PERMS.RADIO_VIEW, session.user.rank)) {
|
||||
redirect("/admin");
|
||||
}
|
||||
|
||||
return children;
|
||||
}
|
||||
@@ -1,85 +0,0 @@
|
||||
import { desc } from "drizzle-orm";
|
||||
import { getTranslations } from "next-intl/server";
|
||||
import { deleteShout } from "@/actions/admin-radio-moderation";
|
||||
import { StatusCard } from "@/components/admin/dashboard";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { db, RadioShouts } from "@/lib/db";
|
||||
import { formatDate } from "@/lib/format-date";
|
||||
|
||||
type Shout = {
|
||||
id: bigint;
|
||||
userId: bigint;
|
||||
message: string;
|
||||
createdAt: Date | null;
|
||||
updatedAt: Date | null;
|
||||
};
|
||||
|
||||
export default async function AdminRadioModerationPage() {
|
||||
const t = await getTranslations("pages.admin.radio");
|
||||
|
||||
let shouts: Shout[] = [];
|
||||
try {
|
||||
shouts = await db
|
||||
.select({
|
||||
id: RadioShouts.id,
|
||||
userId: RadioShouts.userId,
|
||||
message: RadioShouts.message,
|
||||
createdAt: RadioShouts.createdAt,
|
||||
updatedAt: RadioShouts.updatedAt,
|
||||
})
|
||||
.from(RadioShouts)
|
||||
.orderBy(desc(RadioShouts.id))
|
||||
.limit(50);
|
||||
} catch {
|
||||
shouts = [];
|
||||
}
|
||||
|
||||
return (
|
||||
<main>
|
||||
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
|
||||
<StatusCard label={t("shouts")} value={shouts.length} icon="📣" />
|
||||
</div>
|
||||
|
||||
<section className="mt-6">
|
||||
<h2 className="admin-section-title">
|
||||
{t("moderationPage.recentShouts", { count: shouts.length })}
|
||||
</h2>
|
||||
{shouts.length === 0 ? (
|
||||
<div className="admin-empty">{t("noShouts")}</div>
|
||||
) : (
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>{t("user")}</th>
|
||||
<th>{t("message")}</th>
|
||||
<th>{t("posted")}</th>
|
||||
<th />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{shouts.map((s) => (
|
||||
<tr key={String(s.id)}>
|
||||
<td>{String(s.id)}</td>
|
||||
<td>{String(s.userId)}</td>
|
||||
<td>{s.message}</td>
|
||||
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
|
||||
{formatDate(s.createdAt, "datetime", "\u2014")}
|
||||
</td>
|
||||
<td>
|
||||
<form action={deleteShout}>
|
||||
<input type="hidden" name="id" value={String(s.id)} />
|
||||
<Button type="submit" variant="destructive">
|
||||
{t("deleteShout")}
|
||||
</Button>
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -1,291 +0,0 @@
|
||||
import { getTranslations } from "next-intl/server";
|
||||
import { DiagnosticRow, StatusCard } from "@/components/admin/dashboard";
|
||||
import { siteSettings } from "@/lib/services/site-settings";
|
||||
|
||||
export const metadata = { title: "Radio Monitoring" };
|
||||
|
||||
const FETCH_TIMEOUT_MS = 4000;
|
||||
|
||||
type ProbeResult = {
|
||||
reachable: boolean;
|
||||
status: number | null;
|
||||
json: unknown;
|
||||
text: string | null;
|
||||
error: string | null;
|
||||
};
|
||||
|
||||
async function probe(url: string): Promise<ProbeResult> {
|
||||
const controller = new AbortController();
|
||||
const timer = setTimeout(() => controller.abort(), FETCH_TIMEOUT_MS);
|
||||
try {
|
||||
const res = await fetch(url, {
|
||||
signal: controller.signal,
|
||||
cache: "no-store",
|
||||
headers: { accept: "application/json, text/plain, */*" },
|
||||
});
|
||||
const raw = await res.text();
|
||||
let json: unknown = null;
|
||||
let text: string | null = null;
|
||||
const trimmed = raw.trim();
|
||||
if (trimmed !== "") {
|
||||
try {
|
||||
json = JSON.parse(trimmed);
|
||||
} catch {
|
||||
text = trimmed.slice(0, 2000);
|
||||
}
|
||||
}
|
||||
return {
|
||||
reachable: res.ok,
|
||||
status: res.status,
|
||||
json,
|
||||
text,
|
||||
error: res.ok ? null : `HTTP ${res.status}`,
|
||||
};
|
||||
} catch (e) {
|
||||
const aborted = e instanceof Error && e.name === "AbortError";
|
||||
return {
|
||||
reachable: false,
|
||||
status: null,
|
||||
json: null,
|
||||
text: null,
|
||||
error: aborted
|
||||
? `Timed out after ${FETCH_TIMEOUT_MS / 1000}s`
|
||||
: "Fetch failed",
|
||||
};
|
||||
} finally {
|
||||
clearTimeout(timer);
|
||||
}
|
||||
}
|
||||
|
||||
function isRecord(v: unknown): v is Record<string, unknown> {
|
||||
return typeof v === "object" && v !== null && !Array.isArray(v);
|
||||
}
|
||||
|
||||
function pickString(obj: Record<string, unknown>, key: string): string | null {
|
||||
// eslint-disable-next-line security/detect-object-injection -- only called with hardcoded keys
|
||||
const v = obj[key];
|
||||
return typeof v === "string" && v.trim() !== "" ? v.trim() : null;
|
||||
}
|
||||
|
||||
function parseNowPlaying(result: ProbeResult): string | null {
|
||||
if (result.json == null) {
|
||||
return result.text && result.text.length <= 200 ? result.text : null;
|
||||
}
|
||||
const data = result.json;
|
||||
if (typeof data === "string") return data.trim() || null;
|
||||
if (!isRecord(data)) return null;
|
||||
|
||||
const np = data.now_playing;
|
||||
if (typeof np === "string" && np.trim() !== "") return np.trim();
|
||||
if (isRecord(np)) {
|
||||
const song = np.song;
|
||||
if (isRecord(song)) {
|
||||
const title = pickString(song, "title");
|
||||
const artist = pickString(song, "artist");
|
||||
if (title || artist) {
|
||||
return [artist, title].filter(Boolean).join(" - ");
|
||||
}
|
||||
const txt = pickString(song, "text");
|
||||
if (txt) return txt;
|
||||
}
|
||||
}
|
||||
|
||||
const song = data.song;
|
||||
if (isRecord(song)) {
|
||||
const title = pickString(song, "title");
|
||||
const artist = pickString(song, "artist");
|
||||
if (title || artist) return [artist, title].filter(Boolean).join(" - ");
|
||||
}
|
||||
const title = pickString(data, "title");
|
||||
const artist = pickString(data, "artist");
|
||||
if (title || artist) return [artist, title].filter(Boolean).join(" - ");
|
||||
|
||||
return pickString(data, "text") ?? pickString(data, "song") ?? null;
|
||||
}
|
||||
|
||||
function findNumberDeep(
|
||||
value: unknown,
|
||||
keys: string[],
|
||||
depth = 0,
|
||||
): number | null {
|
||||
if (depth > 4) return null;
|
||||
if (typeof value === "number" && Number.isFinite(value)) return value;
|
||||
if (!isRecord(value)) return null;
|
||||
for (const key of keys) {
|
||||
// eslint-disable-next-line security/detect-object-injection -- keys from hardcoded array
|
||||
const v = value[key];
|
||||
if (typeof v === "number" && Number.isFinite(v)) return v;
|
||||
if (
|
||||
typeof v === "string" &&
|
||||
v.trim() !== "" &&
|
||||
Number.isFinite(Number(v))
|
||||
) {
|
||||
return Number(v);
|
||||
}
|
||||
}
|
||||
for (const v of Object.values(value)) {
|
||||
if (isRecord(v)) {
|
||||
const found = findNumberDeep(v, keys, depth + 1);
|
||||
if (found !== null) return found;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function parseListeners(result: ProbeResult): number | null {
|
||||
if (result.json == null) {
|
||||
if (result.text && Number.isFinite(Number(result.text.trim()))) {
|
||||
return Number(result.text.trim());
|
||||
}
|
||||
return null;
|
||||
}
|
||||
const data = result.json;
|
||||
if (typeof data === "number" && Number.isFinite(data)) return data;
|
||||
return findNumberDeep(data, [
|
||||
"current",
|
||||
"total",
|
||||
"num_listeners",
|
||||
"listeners",
|
||||
"unique_listeners",
|
||||
"count",
|
||||
]);
|
||||
}
|
||||
|
||||
function shortUrl(url: string): string {
|
||||
try {
|
||||
const u = new URL(url);
|
||||
return u.host + (u.pathname === "/" ? "" : u.pathname);
|
||||
} catch {
|
||||
return url.length > 60 ? `${url.slice(0, 57)}\u2026` : url;
|
||||
}
|
||||
}
|
||||
|
||||
export default async function AdminRadioMonitoringPage() {
|
||||
const t = await getTranslations("pages.admin.radio");
|
||||
|
||||
let nowPlayingUrl: string | null = null;
|
||||
let listenersUrl: string | null = null;
|
||||
let streamUrl: string | null = null;
|
||||
try {
|
||||
nowPlayingUrl =
|
||||
(await siteSettings.get("radio_now_playing_api_url", "")) || null;
|
||||
listenersUrl =
|
||||
(await siteSettings.get("radio_listeners_api_url", "")) || null;
|
||||
streamUrl = (await siteSettings.get("radio_stream_url", "")) || null;
|
||||
} catch {
|
||||
nowPlayingUrl = null;
|
||||
listenersUrl = null;
|
||||
streamUrl = null;
|
||||
}
|
||||
|
||||
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;
|
||||
|
||||
const streamProbe = nowPlayingResult ?? listenersResult;
|
||||
const streamOnline = streamProbe?.reachable ?? false;
|
||||
const streamConfigured = Boolean(nowPlayingUrl || listenersUrl);
|
||||
|
||||
const endpoints: {
|
||||
label: string;
|
||||
url: string | null;
|
||||
result: ProbeResult | null;
|
||||
}[] = [
|
||||
{
|
||||
label: t("monitoring.nowPlayingApi"),
|
||||
url: nowPlayingUrl,
|
||||
result: nowPlayingResult,
|
||||
},
|
||||
{
|
||||
label: t("monitoring.listenersApi"),
|
||||
url: listenersUrl,
|
||||
result: listenersResult,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<main>
|
||||
<section className="mt-6">
|
||||
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
|
||||
<StatusCard
|
||||
label={t("monitoring.stream")}
|
||||
value={
|
||||
!streamConfigured
|
||||
? t("monitoring.notConfigured")
|
||||
: streamOnline
|
||||
? t("monitoring.online")
|
||||
: t("monitoring.offline")
|
||||
}
|
||||
state={
|
||||
!streamConfigured ? "neutral" : streamOnline ? "ok" : "danger"
|
||||
}
|
||||
hint={streamUrl ? shortUrl(streamUrl) : undefined}
|
||||
icon="📡"
|
||||
/>
|
||||
<StatusCard
|
||||
label={t("monitoring.nowPlaying")}
|
||||
value={nowPlaying ?? "\u2014"}
|
||||
state={nowPlaying ? "ok" : "neutral"}
|
||||
hint={!nowPlayingUrl ? t("monitoring.noNowPlayingHint") : undefined}
|
||||
icon="🎵"
|
||||
/>
|
||||
<StatusCard
|
||||
label={t("monitoring.listeners")}
|
||||
value={listeners ?? "\u2014"}
|
||||
state={listeners != null ? "ok" : "neutral"}
|
||||
hint={!listenersUrl ? t("monitoring.noListenersHint") : undefined}
|
||||
icon="🎧"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="mt-6">
|
||||
<h2 className="admin-section-title">
|
||||
{t("monitoring.endpointDiagnostics")}
|
||||
</h2>
|
||||
<p className="text-xs theme-text-muted dark:theme-text-muted">
|
||||
{t("monitoring.diagnosticsLegend")}
|
||||
</p>
|
||||
<div className="flex flex-col">
|
||||
{endpoints.map((ep) => {
|
||||
let state: "ok" | "warn" | "danger";
|
||||
let detail: string;
|
||||
if (!ep.url) {
|
||||
state = "warn";
|
||||
detail = t("monitoring.notConfigured");
|
||||
} else if (ep.result?.reachable) {
|
||||
state = "ok";
|
||||
detail = `${shortUrl(ep.url)}${
|
||||
ep.result.status != null
|
||||
? ` \u00B7 HTTP ${ep.result.status}`
|
||||
: ""
|
||||
}`;
|
||||
} else {
|
||||
state = "danger";
|
||||
detail = `${shortUrl(ep.url)} \u00B7 ${ep.result?.error ?? t("monitoring.unreachable")}`;
|
||||
}
|
||||
return (
|
||||
<DiagnosticRow
|
||||
key={ep.label}
|
||||
label={ep.label}
|
||||
detail={detail}
|
||||
state={state}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
<DiagnosticRow
|
||||
label={t("monitoring.streamUrl")}
|
||||
detail={
|
||||
streamUrl ? shortUrl(streamUrl) : t("monitoring.notConfigured")
|
||||
}
|
||||
state={streamUrl ? "ok" : "warn"}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -1,275 +0,0 @@
|
||||
import { desc } from "drizzle-orm";
|
||||
import { getTranslations } from "next-intl/server";
|
||||
import { deleteShout } from "@/actions/admin-radio-moderation";
|
||||
import { StatusCard } from "@/components/admin/dashboard";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { db, RadioApplications, RadioSchedules, RadioShouts } from "@/lib/db";
|
||||
import { formatDate } from "@/lib/format-date";
|
||||
|
||||
type Shout = {
|
||||
id: bigint;
|
||||
userId: bigint;
|
||||
message: string;
|
||||
createdAt: Date | null;
|
||||
};
|
||||
|
||||
type Application = {
|
||||
id: bigint;
|
||||
userId: bigint;
|
||||
realName: string;
|
||||
age: number;
|
||||
status: string;
|
||||
musicStyle: string | null;
|
||||
discordUsername: string | null;
|
||||
createdAt: Date | null;
|
||||
};
|
||||
|
||||
type Schedule = {
|
||||
id: bigint;
|
||||
userId: bigint;
|
||||
day: string;
|
||||
startTime: Date;
|
||||
endTime: Date;
|
||||
showName: string | null;
|
||||
isActive: boolean;
|
||||
};
|
||||
|
||||
function formatTime(d: Date | null): string {
|
||||
return d ? d.toISOString().slice(11, 16) : "\u2014";
|
||||
}
|
||||
|
||||
function statusBadgeClass(status: string): string {
|
||||
const s = status.toLowerCase();
|
||||
if (s === "approved" || s === "accepted") return "ok";
|
||||
if (s === "rejected" || s === "denied") return "danger";
|
||||
return "";
|
||||
}
|
||||
|
||||
export default async function AdminRadioPage() {
|
||||
const t = await getTranslations("pages.admin.radio");
|
||||
|
||||
let shouts: Shout[] = [];
|
||||
let applications: Application[] = [];
|
||||
let schedules: Schedule[] = [];
|
||||
|
||||
try {
|
||||
shouts = await db
|
||||
.select({
|
||||
id: RadioShouts.id,
|
||||
userId: RadioShouts.userId,
|
||||
message: RadioShouts.message,
|
||||
createdAt: RadioShouts.createdAt,
|
||||
})
|
||||
.from(RadioShouts)
|
||||
.orderBy(desc(RadioShouts.id))
|
||||
.limit(25);
|
||||
} catch {
|
||||
shouts = [];
|
||||
}
|
||||
|
||||
try {
|
||||
applications = await db
|
||||
.select({
|
||||
id: RadioApplications.id,
|
||||
userId: RadioApplications.userId,
|
||||
realName: RadioApplications.realName,
|
||||
age: RadioApplications.age,
|
||||
status: RadioApplications.status,
|
||||
musicStyle: RadioApplications.musicStyle,
|
||||
discordUsername: RadioApplications.discordUsername,
|
||||
createdAt: RadioApplications.createdAt,
|
||||
})
|
||||
.from(RadioApplications)
|
||||
.orderBy(desc(RadioApplications.id))
|
||||
.limit(25);
|
||||
} catch {
|
||||
applications = [];
|
||||
}
|
||||
|
||||
try {
|
||||
schedules = await db
|
||||
.select({
|
||||
id: RadioSchedules.id,
|
||||
userId: RadioSchedules.userId,
|
||||
day: RadioSchedules.day,
|
||||
startTime: RadioSchedules.startTime,
|
||||
endTime: RadioSchedules.endTime,
|
||||
showName: RadioSchedules.showName,
|
||||
isActive: RadioSchedules.isActive,
|
||||
})
|
||||
.from(RadioSchedules)
|
||||
.orderBy(desc(RadioSchedules.id))
|
||||
.limit(25);
|
||||
} catch {
|
||||
schedules = [];
|
||||
}
|
||||
|
||||
const pendingApps = applications.filter(
|
||||
(a) => a.status.toLowerCase() === "pending",
|
||||
).length;
|
||||
const activeSchedules = schedules.filter((sc) => sc.isActive).length;
|
||||
|
||||
return (
|
||||
<main>
|
||||
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
|
||||
<StatusCard label={t("shouts")} value={shouts.length} icon="📣" />
|
||||
<StatusCard
|
||||
label={t("pendingApplications")}
|
||||
value={pendingApps}
|
||||
state={pendingApps > 0 ? "warn" : "ok"}
|
||||
icon="📝"
|
||||
/>
|
||||
<StatusCard label={t("schedules")} value={schedules.length} icon="🗓️" />
|
||||
<StatusCard
|
||||
label={t("activeSchedules")}
|
||||
value={activeSchedules}
|
||||
state={activeSchedules > 0 ? "ok" : "neutral"}
|
||||
icon="🎙️"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<section className="mt-6">
|
||||
<h2>
|
||||
{t("shouts")} ({shouts.length})
|
||||
</h2>
|
||||
{shouts.length === 0 ? (
|
||||
<p className="text-xs theme-text-muted dark:theme-text-muted">
|
||||
{t("noShouts")}
|
||||
</p>
|
||||
) : (
|
||||
<div className="overflow-x-auto">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>{t("user")}</th>
|
||||
<th>{t("message")}</th>
|
||||
<th>{t("posted")}</th>
|
||||
<th />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{shouts.map((s) => (
|
||||
<tr key={String(s.id)}>
|
||||
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
|
||||
{String(s.id)}
|
||||
</td>
|
||||
<td>{String(s.userId)}</td>
|
||||
<td>{s.message}</td>
|
||||
<td className="text-sm theme-text-muted dark:theme-text-muted">
|
||||
{formatDate(s.createdAt, "datetime", "\u2014")}
|
||||
</td>
|
||||
<td>
|
||||
<form action={deleteShout}>
|
||||
<input type="hidden" name="id" value={String(s.id)} />
|
||||
<Button type="submit" variant="destructive">
|
||||
{t("deleteShout")}
|
||||
</Button>
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
<section className="mt-6">
|
||||
<h2>
|
||||
{t("applications")} ({applications.length})
|
||||
</h2>
|
||||
{applications.length === 0 ? (
|
||||
<p className="text-xs theme-text-muted dark:theme-text-muted">
|
||||
{t("noApplications")}
|
||||
</p>
|
||||
) : (
|
||||
<div className="overflow-x-auto">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>{t("user")}</th>
|
||||
<th>{t("realName")}</th>
|
||||
<th>{t("age")}</th>
|
||||
<th>{t("style")}</th>
|
||||
<th>Discord</th>
|
||||
<th>{t("status")}</th>
|
||||
<th>{t("applied")}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{applications.map((a) => (
|
||||
<tr key={String(a.id)}>
|
||||
<td>{String(a.id)}</td>
|
||||
<td>{String(a.userId)}</td>
|
||||
<td>{a.realName}</td>
|
||||
<td>{a.age}</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-[var(--admin-success-subtle)] text-[var(--admin-text)]" : statusBadgeClass(a.status) === "danger" ? "bg-[var(--admin-error-subtle)] text-[var(--admin-text)]" : "bg-[var(--admin-accent)]/18 text-[var(--admin-text)]"}`}
|
||||
>
|
||||
{a.status}
|
||||
</span>
|
||||
</td>
|
||||
<td className="text-sm theme-text-muted dark:theme-text-muted">
|
||||
{formatDate(a.createdAt, "datetime", "\u2014")}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
<section className="mt-6">
|
||||
<h2>
|
||||
{t("schedules")} ({schedules.length})
|
||||
</h2>
|
||||
{schedules.length === 0 ? (
|
||||
<p className="text-xs theme-text-muted dark:theme-text-muted">
|
||||
{t("noSchedules")}
|
||||
</p>
|
||||
) : (
|
||||
<div className="overflow-x-auto">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</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>
|
||||
{schedules.map((sc) => (
|
||||
<tr key={String(sc.id)}>
|
||||
<td>{String(sc.id)}</td>
|
||||
<td>{String(sc.userId)}</td>
|
||||
<td>{sc.day}</td>
|
||||
<td>{formatTime(sc.startTime)}</td>
|
||||
<td>{formatTime(sc.endTime)}</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-[var(--admin-success-subtle)] text-[var(--admin-text)]" : "bg-[var(--admin-error-subtle)] text-[var(--admin-text)]"}`}
|
||||
>
|
||||
{sc.isActive ? t("active") : t("inactive")}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -1,235 +0,0 @@
|
||||
import { getTranslations } from "next-intl/server";
|
||||
import { savePoints } from "@/actions/admin-radio-points";
|
||||
import { StatusCard } from "@/components/admin/dashboard";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { siteSettings } from "@/lib/services/site-settings";
|
||||
|
||||
export const metadata = { title: "Radio Points" };
|
||||
|
||||
const DEFAULTS = {
|
||||
radio_points_enabled: "0",
|
||||
radio_points_per_minute: "1",
|
||||
radio_points_currency: "credits",
|
||||
radio_points_max_per_day: "0",
|
||||
radio_points_min_listeners: "0",
|
||||
} as const;
|
||||
|
||||
const CURRENCIES = ["credits", "duckets", "diamonds", "points"] as const;
|
||||
|
||||
export default async function AdminRadioPointsPage({
|
||||
searchParams,
|
||||
}: {
|
||||
searchParams: Promise<{ saved?: string }>;
|
||||
}) {
|
||||
const t = await getTranslations("pages.admin.radio");
|
||||
|
||||
const { saved } = await searchParams;
|
||||
|
||||
const values = {
|
||||
radio_points_enabled: await siteSettings
|
||||
.get("radio_points_enabled", DEFAULTS.radio_points_enabled)
|
||||
.catch(() => DEFAULTS.radio_points_enabled),
|
||||
radio_points_per_minute: await siteSettings
|
||||
.get("radio_points_per_minute", DEFAULTS.radio_points_per_minute)
|
||||
.catch(() => DEFAULTS.radio_points_per_minute),
|
||||
radio_points_currency: await siteSettings
|
||||
.get("radio_points_currency", DEFAULTS.radio_points_currency)
|
||||
.catch(() => DEFAULTS.radio_points_currency),
|
||||
radio_points_max_per_day: await siteSettings
|
||||
.get("radio_points_max_per_day", DEFAULTS.radio_points_max_per_day)
|
||||
.catch(() => DEFAULTS.radio_points_max_per_day),
|
||||
radio_points_min_listeners: await siteSettings
|
||||
.get("radio_points_min_listeners", DEFAULTS.radio_points_min_listeners)
|
||||
.catch(() => DEFAULTS.radio_points_min_listeners),
|
||||
};
|
||||
|
||||
const enabled = (values.radio_points_enabled ?? "0") === "1";
|
||||
const perMinute =
|
||||
values.radio_points_per_minute ?? DEFAULTS.radio_points_per_minute;
|
||||
const currency = (values.radio_points_currency ??
|
||||
DEFAULTS.radio_points_currency) as string;
|
||||
const maxPerDay =
|
||||
values.radio_points_max_per_day ?? DEFAULTS.radio_points_max_per_day;
|
||||
const minListeners =
|
||||
values.radio_points_min_listeners ?? DEFAULTS.radio_points_min_listeners;
|
||||
const selectedCurrency = CURRENCIES.includes(
|
||||
currency as (typeof CURRENCIES)[number],
|
||||
)
|
||||
? currency
|
||||
: "credits";
|
||||
|
||||
return (
|
||||
<main>
|
||||
<section className="mt-6">
|
||||
{saved === "1" ? (
|
||||
<p>
|
||||
<span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-[var(--admin-success-subtle)] text-[var(--admin-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={t("pointsForm.points")}
|
||||
value={enabled ? t("pointsForm.enabled") : t("pointsForm.disabled")}
|
||||
state={enabled ? "ok" : "danger"}
|
||||
icon="🎧"
|
||||
/>
|
||||
<StatusCard
|
||||
label={t("pointsForm.perMinute")}
|
||||
value={perMinute}
|
||||
hint={t("pointsForm.paidIn", { currency: selectedCurrency })}
|
||||
icon="⏱️"
|
||||
/>
|
||||
<StatusCard
|
||||
label={t("pointsForm.maxPerDay")}
|
||||
value={maxPerDay === "0" ? t("pointsForm.unlimited") : maxPerDay}
|
||||
icon="📈"
|
||||
/>
|
||||
<StatusCard
|
||||
label={t("pointsForm.minListeners")}
|
||||
value={minListeners}
|
||||
icon="👥"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="mt-6">
|
||||
<h2 className="admin-section-title">{t("pointsForm.settings")}</h2>
|
||||
<form action={savePoints}>
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||
<div>
|
||||
<label
|
||||
htmlFor="radio_points_enabled"
|
||||
style={{ display: "block", fontWeight: 700 }}
|
||||
>
|
||||
{t("pointsForm.pointsEnabled")}
|
||||
</label>
|
||||
<select
|
||||
id="radio_points_enabled"
|
||||
name="radio_points_enabled"
|
||||
defaultValue={enabled ? "1" : "0"}
|
||||
style={{ width: "100%" }}
|
||||
>
|
||||
<option value="1">{t("pointsForm.enabled")}</option>
|
||||
<option value="0">{t("pointsForm.disabled")}</option>
|
||||
</select>
|
||||
<p
|
||||
className="text-xs theme-text-muted dark:theme-text-muted"
|
||||
style={{ margin: "0.2rem 0 0" }}
|
||||
>
|
||||
{t("pointsForm.pointsEnabledHint")}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
htmlFor="radio_points_currency"
|
||||
style={{ display: "block", fontWeight: 700 }}
|
||||
>
|
||||
{t("pointsForm.currency")}
|
||||
</label>
|
||||
<select
|
||||
id="radio_points_currency"
|
||||
name="radio_points_currency"
|
||||
defaultValue={selectedCurrency}
|
||||
style={{ width: "100%" }}
|
||||
>
|
||||
{CURRENCIES.map((c) => (
|
||||
<option key={c} value={c}>
|
||||
{c.charAt(0).toUpperCase() + c.slice(1)}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<p
|
||||
className="text-xs theme-text-muted dark:theme-text-muted"
|
||||
style={{ margin: "0.2rem 0 0" }}
|
||||
>
|
||||
{t("pointsForm.currencyHint")}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
htmlFor="radio_points_per_minute"
|
||||
style={{ display: "block", fontWeight: 700 }}
|
||||
>
|
||||
{t("pointsForm.pointsPerMinute")}
|
||||
</label>
|
||||
<input
|
||||
id="radio_points_per_minute"
|
||||
name="radio_points_per_minute"
|
||||
type="number"
|
||||
min={0}
|
||||
step={1}
|
||||
defaultValue={perMinute}
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
<p
|
||||
className="text-xs theme-text-muted dark:theme-text-muted"
|
||||
style={{ margin: "0.2rem 0 0" }}
|
||||
>
|
||||
{t("pointsForm.pointsPerMinuteHint")}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
htmlFor="radio_points_max_per_day"
|
||||
style={{ display: "block", fontWeight: 700 }}
|
||||
>
|
||||
{t("pointsForm.maxPerDay")}
|
||||
</label>
|
||||
<input
|
||||
id="radio_points_max_per_day"
|
||||
name="radio_points_max_per_day"
|
||||
type="number"
|
||||
min={0}
|
||||
step={1}
|
||||
defaultValue={maxPerDay}
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
<p
|
||||
className="text-xs theme-text-muted dark:theme-text-muted"
|
||||
style={{ margin: "0.2rem 0 0" }}
|
||||
>
|
||||
{t("pointsForm.maxPerDayHint")}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
htmlFor="radio_points_min_listeners"
|
||||
style={{ display: "block", fontWeight: 700 }}
|
||||
>
|
||||
{t("pointsForm.minListeners")}
|
||||
</label>
|
||||
<input
|
||||
id="radio_points_min_listeners"
|
||||
name="radio_points_min_listeners"
|
||||
type="number"
|
||||
min={0}
|
||||
step={1}
|
||||
defaultValue={minListeners}
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
<p
|
||||
className="text-xs theme-text-muted dark:theme-text-muted"
|
||||
style={{ margin: "0.2rem 0 0" }}
|
||||
>
|
||||
{t("pointsForm.minListenersHint")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end mt-4">
|
||||
<Button type="submit" variant="default">
|
||||
{t("pointsForm.save")}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -1,212 +0,0 @@
|
||||
import { asc } from "drizzle-orm";
|
||||
import { getTranslations } from "next-intl/server";
|
||||
import {
|
||||
createRadioRank,
|
||||
deleteRadioRank,
|
||||
updateRadioRank,
|
||||
} from "@/actions/admin-radio-extra";
|
||||
import { StatusCard } from "@/components/admin/dashboard";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { db, RadioRanks } from "@/lib/db";
|
||||
|
||||
type Rank = {
|
||||
id: bigint;
|
||||
name: string;
|
||||
description: string | null;
|
||||
badgeCode: string | null;
|
||||
isActive: boolean;
|
||||
};
|
||||
|
||||
export default async function AdminRadioRanksPage() {
|
||||
const t = await getTranslations("pages.admin.radio");
|
||||
|
||||
let ranks: Rank[] = [];
|
||||
let dbError = false;
|
||||
|
||||
try {
|
||||
ranks = await db
|
||||
.select({
|
||||
id: RadioRanks.id,
|
||||
name: RadioRanks.name,
|
||||
description: RadioRanks.description,
|
||||
badgeCode: RadioRanks.badgeCode,
|
||||
isActive: RadioRanks.isActive,
|
||||
})
|
||||
.from(RadioRanks)
|
||||
.orderBy(asc(RadioRanks.id));
|
||||
} catch {
|
||||
dbError = true;
|
||||
ranks = [];
|
||||
}
|
||||
|
||||
const activeCount = ranks.filter((r) => r.isActive).length;
|
||||
|
||||
return (
|
||||
<main>
|
||||
{dbError ? (
|
||||
<div className="admin-card mb-6">
|
||||
<p className="text-xs theme-text-muted dark:theme-text-muted m-0">
|
||||
{t("ranksForm.dbError")}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
|
||||
<StatusCard label={t("ranks")} value={ranks.length} icon="🎖️" />
|
||||
<StatusCard
|
||||
label={t("ranksForm.active")}
|
||||
value={activeCount}
|
||||
state={activeCount > 0 ? "ok" : "neutral"}
|
||||
icon="✅"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<section className="mt-6">
|
||||
<h2 className="admin-section-title">{t("ranksForm.addRank")}</h2>
|
||||
<form action={createRadioRank} className="admin-card">
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-3">
|
||||
<div>
|
||||
<label
|
||||
htmlFor="new_name"
|
||||
style={{ display: "block", fontWeight: 700 }}
|
||||
>
|
||||
{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 }}
|
||||
>
|
||||
{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
|
||||
/>{" "}
|
||||
{t("ranksForm.active")}
|
||||
</label>
|
||||
</div>
|
||||
<div style={{ gridColumn: "1 / -1" }}>
|
||||
<label
|
||||
htmlFor="new_desc"
|
||||
style={{ display: "block", fontWeight: 700 }}
|
||||
>
|
||||
{t("ranksForm.description")}
|
||||
</label>
|
||||
<input
|
||||
id="new_desc"
|
||||
name="description"
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ marginTop: "0.75rem" }}>
|
||||
<Button type="submit" variant="default">
|
||||
{t("ranksForm.createRank")}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section className="mt-6">
|
||||
<h2 className="admin-section-title">
|
||||
{t("ranksForm.existing", { count: ranks.length })}
|
||||
</h2>
|
||||
{ranks.length === 0 ? (
|
||||
<div className="admin-empty">{t("ranksForm.noRanks")}</div>
|
||||
) : (
|
||||
<div className="grid">
|
||||
{ranks.map((r) => (
|
||||
<div key={String(r.id)} className="admin-card">
|
||||
<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-[var(--admin-success-subtle)] text-[var(--admin-text)]" : "bg-[var(--admin-error-subtle)] text-[var(--admin-text)]"}`}
|
||||
>
|
||||
{r.isActive
|
||||
? t("ranksForm.activeLabel")
|
||||
: t("ranksForm.inactiveLabel")}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<form
|
||||
action={updateRadioRank}
|
||||
className="flex items-center gap-2 flex-wrap"
|
||||
>
|
||||
<input type="hidden" name="id" value={String(r.id)} />
|
||||
<input
|
||||
name="name"
|
||||
defaultValue={r.name}
|
||||
required
|
||||
placeholder={t("ranksForm.name")}
|
||||
style={{ minWidth: 140 }}
|
||||
/>
|
||||
<input
|
||||
name="badgeCode"
|
||||
defaultValue={r.badgeCode ?? ""}
|
||||
placeholder={t("ranksForm.badgeCode")}
|
||||
style={{ minWidth: 100 }}
|
||||
/>
|
||||
<input
|
||||
name="description"
|
||||
defaultValue={r.description ?? ""}
|
||||
placeholder={t("ranksForm.description")}
|
||||
className="flex-1 min-w-[160px]"
|
||||
/>
|
||||
<label
|
||||
style={{
|
||||
display: "inline-flex",
|
||||
gap: "0.3rem",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
name="isActive"
|
||||
value="1"
|
||||
defaultChecked={r.isActive}
|
||||
/>{" "}
|
||||
{t("ranksForm.active")}
|
||||
</label>
|
||||
<Button type="submit" variant="default">
|
||||
{t("ranksForm.save")}
|
||||
</Button>
|
||||
</form>
|
||||
|
||||
<form action={deleteRadioRank} style={{ marginTop: "0.5rem" }}>
|
||||
<input type="hidden" name="id" value={String(r.id)} />
|
||||
<Button type="submit" variant="destructive">
|
||||
{t("ranksForm.deleteRank", { id: String(r.id) })}
|
||||
</Button>
|
||||
</form>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -1,518 +0,0 @@
|
||||
import { getTranslations } from "next-intl/server";
|
||||
import {
|
||||
saveRadioSetting,
|
||||
saveRadioSettings,
|
||||
} from "@/actions/admin-radio-extra";
|
||||
import { StatusCard } from "@/components/admin/dashboard";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { db, WebsiteSetting } from "@/lib/db";
|
||||
|
||||
type Field = { key: string; comment: string };
|
||||
type Group = { title: string; fields: Field[] };
|
||||
|
||||
const GROUPS: Group[] = [
|
||||
{
|
||||
title: "AzureCast & Stream",
|
||||
fields: [
|
||||
{ key: "radio_enabled", comment: "Radio enabled (0=no, 1=yes)" },
|
||||
{ key: "radio_stream_url", comment: "Main stream URL" },
|
||||
{ key: "radio_stream_backup_url", comment: "Backup stream URL" },
|
||||
{ key: "radio_azurecast_base_url", comment: "AzureCast base URL" },
|
||||
{ key: "radio_azurecast_station_id", comment: "AzureCast station ID" },
|
||||
{ key: "radio_azurecast_api_key", comment: "AzureCast API key" },
|
||||
{ key: "radio_azurecast_port", comment: "AzureCast stream port" },
|
||||
{
|
||||
key: "radio_azurecast_protocol",
|
||||
comment: "AzureCast protocol (http/https)",
|
||||
},
|
||||
{
|
||||
key: "radio_azurecast_use_proxy",
|
||||
comment: "Use AzureCast proxy (0=no, 1=yes)",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "External sources",
|
||||
fields: [
|
||||
{
|
||||
key: "radio_sambroadcaster_api_url",
|
||||
comment: "Sambroadcaster API URL",
|
||||
},
|
||||
{
|
||||
key: "radio_sambroadcaster_password",
|
||||
comment: "Sambroadcaster password",
|
||||
},
|
||||
{ key: "radio_virtual_dj_url", comment: "Virtual DJ URL" },
|
||||
{ key: "radio_virtual_dj_password", comment: "Virtual DJ password" },
|
||||
{ key: "radio_djs_api_url", comment: "DJs API URL" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Player",
|
||||
fields: [
|
||||
{
|
||||
key: "radio_style",
|
||||
comment: "Player style (dark/light/blue/purple/pink/gold)",
|
||||
},
|
||||
{
|
||||
key: "radio_player_type",
|
||||
comment: "Player type (default/minimal/embedded)",
|
||||
},
|
||||
{
|
||||
key: "radio_auto_play",
|
||||
comment: "Auto-play on page load (0=no, 1=yes)",
|
||||
},
|
||||
{ key: "radio_auto_play_delay", comment: "Auto-play delay in seconds" },
|
||||
{ key: "radio_mute_on_start", comment: "Muted on start (0=no, 1=yes)" },
|
||||
{ key: "radio_volume", comment: "Default volume (0-100)" },
|
||||
{
|
||||
key: "radio_language",
|
||||
comment: "Default language (nl/en/de/fr/es/pt/it/br)",
|
||||
},
|
||||
{
|
||||
key: "radio_multi_language_enabled",
|
||||
comment: "Multi-language support (0=no, 1=yes)",
|
||||
},
|
||||
{ key: "radio_player_color_primary", comment: "Player primary color" },
|
||||
{
|
||||
key: "radio_player_color_secondary",
|
||||
comment: "Player secondary color",
|
||||
},
|
||||
{ key: "radio_player_color_text", comment: "Player text color" },
|
||||
{ key: "radio_player_color_accent", comment: "Player accent color" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Now playing & history",
|
||||
fields: [
|
||||
{
|
||||
key: "radio_now_playing_enabled",
|
||||
comment: "Show now playing info (0=no, 1=yes)",
|
||||
},
|
||||
{ key: "radio_now_playing_api_url", comment: "Now playing API URL" },
|
||||
{
|
||||
key: "radio_now_playing_cache_duration",
|
||||
comment: "Now playing cache duration in seconds",
|
||||
},
|
||||
{
|
||||
key: "radio_show_song_history",
|
||||
comment: "Show song history (0=no, 1=yes)",
|
||||
},
|
||||
{
|
||||
key: "radio_song_history_count",
|
||||
comment: "Number of songs in history",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Listeners",
|
||||
fields: [
|
||||
{
|
||||
key: "radio_listeners_enabled",
|
||||
comment: "Show listeners count (0=no, 1=yes)",
|
||||
},
|
||||
{ key: "radio_listeners_api_url", comment: "Listeners API URL" },
|
||||
{
|
||||
key: "radio_listeners_update_interval",
|
||||
comment: "Listeners update interval in seconds",
|
||||
},
|
||||
{
|
||||
key: "radio_show_listener_peak",
|
||||
comment: "Show listener peak (0=no, 1=yes)",
|
||||
},
|
||||
{ key: "radio_peak_reset_time", comment: "Peak reset time (HH:MM)" },
|
||||
{
|
||||
key: "radio_store_listener_stats",
|
||||
comment: "Store listener statistics (0=no, 1=yes)",
|
||||
},
|
||||
{
|
||||
key: "radio_stats_retention_days",
|
||||
comment: "Statistics retention in days",
|
||||
},
|
||||
{
|
||||
key: "radio_show_listener_graph",
|
||||
comment: "Show listener graph (0=no, 1=yes)",
|
||||
},
|
||||
{
|
||||
key: "radio_listener_graph_period",
|
||||
comment: "Listener graph period (1h/6h/12h/24h/7d)",
|
||||
},
|
||||
{
|
||||
key: "radio_show_average_listeners",
|
||||
comment: "Show average listeners (0=no, 1=yes)",
|
||||
},
|
||||
{
|
||||
key: "radio_show_unique_listeners",
|
||||
comment: "Show unique listeners (0=no, 1=yes)",
|
||||
},
|
||||
{
|
||||
key: "radio_listener_alerts_enabled",
|
||||
comment: "Enable listener alerts (0=no, 1=yes)",
|
||||
},
|
||||
{
|
||||
key: "radio_min_listeners_threshold",
|
||||
comment: "Minimum listeners threshold",
|
||||
},
|
||||
{
|
||||
key: "radio_listener_alert_threshold_high",
|
||||
comment: "High listener alert threshold",
|
||||
},
|
||||
{
|
||||
key: "radio_listener_alert_threshold_low",
|
||||
comment: "Low listener alert threshold",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "DJ",
|
||||
fields: [
|
||||
{
|
||||
key: "radio_show_current_dj",
|
||||
comment: "Show current DJ (0=no, 1=yes)",
|
||||
},
|
||||
{ key: "radio_current_dj_id", comment: "Manual DJ user ID" },
|
||||
{ key: "radio_dj_avatar_size", comment: "DJ avatar size in pixels" },
|
||||
{
|
||||
key: "radio_show_dj_schedule",
|
||||
comment: "Show DJ schedule (0=no, 1=yes)",
|
||||
},
|
||||
{
|
||||
key: "radio_auto_dj_detection",
|
||||
comment: "Enable auto DJ detection (0=no, 1=yes)",
|
||||
},
|
||||
{
|
||||
key: "radio_dj_detection_interval",
|
||||
comment: "DJ detection interval in seconds",
|
||||
},
|
||||
{
|
||||
key: "auto_dj_detected_action",
|
||||
comment: "Action on DJ detection (set_dj/notify/both)",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Shouts & chat",
|
||||
fields: [
|
||||
{ key: "radio_shouts_enabled", comment: "Enable shouts (0=no, 1=yes)" },
|
||||
{
|
||||
key: "radio_shouts_max_length",
|
||||
comment: "Maximum shout length in characters",
|
||||
},
|
||||
{ key: "radio_shouts_cooldown", comment: "Shout cooldown in seconds" },
|
||||
{
|
||||
key: "radio_shouts_require_moderation",
|
||||
comment: "Require shout moderation (0=no, 1=yes)",
|
||||
},
|
||||
{ key: "radio_chat_enabled", comment: "Enable live chat (0=no, 1=yes)" },
|
||||
{
|
||||
key: "radio_chat_position",
|
||||
comment: "Chat position (left/right/bottom)",
|
||||
},
|
||||
{ key: "radio_chat_width", comment: "Chat width in pixels" },
|
||||
{ key: "radio_chat_height", comment: "Chat height in pixels" },
|
||||
{
|
||||
key: "radio_chat_messages_count",
|
||||
comment: "Number of chat messages to show",
|
||||
},
|
||||
{
|
||||
key: "radio_chat_show_timestamps",
|
||||
comment: "Show chat timestamps (0=no, 1=yes)",
|
||||
},
|
||||
{
|
||||
key: "radio_chat_allow_links",
|
||||
comment: "Allow links in chat (0=no, 1=yes)",
|
||||
},
|
||||
{
|
||||
key: "radio_chat_allow_emojis",
|
||||
comment: "Allow emojis in chat (0=no, 1=yes)",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Requests & widget",
|
||||
fields: [
|
||||
{
|
||||
key: "radio_request_form_enabled",
|
||||
comment: "Enable song requests (0=no, 1=yes)",
|
||||
},
|
||||
{
|
||||
key: "radio_request_max_per_user",
|
||||
comment: "Maximum requests per user",
|
||||
},
|
||||
{ key: "radio_request_cooldown", comment: "Request cooldown in seconds" },
|
||||
{
|
||||
key: "radio_voting_enabled",
|
||||
comment: "Enable request voting (0=no, 1=yes)",
|
||||
},
|
||||
{
|
||||
key: "radio_voting_show_song_requests",
|
||||
comment: "Show requests with votes (0=no, 1=yes)",
|
||||
},
|
||||
{
|
||||
key: "radio_widget_enabled",
|
||||
comment: "Enable radio widget (0=no, 1=yes)",
|
||||
},
|
||||
{
|
||||
key: "radio_widget_show_globally",
|
||||
comment: "Show widget globally (0=no, 1=yes)",
|
||||
},
|
||||
{ key: "radio_widget_position", comment: "Widget position" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Offline & branding",
|
||||
fields: [
|
||||
{
|
||||
key: "radio_show_offline_message",
|
||||
comment: "Show offline message (0=no, 1=yes)",
|
||||
},
|
||||
{ key: "radio_offline_message", comment: "Offline message text" },
|
||||
{ key: "radio_offline_image", comment: "Offline page image URL" },
|
||||
{ key: "radio_background_image", comment: "Background image URL" },
|
||||
{ key: "radio_logo_url", comment: "Radio logo URL" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Applications",
|
||||
fields: [
|
||||
{
|
||||
key: "radio_applications_enabled",
|
||||
comment: "Enable DJ applications (0=no, 1=yes)",
|
||||
},
|
||||
{
|
||||
key: "radio_applications_max_per_day",
|
||||
comment: "Maximum applications per day",
|
||||
},
|
||||
{
|
||||
key: "radio_applications_require_approval",
|
||||
comment: "Require application approval (0=no, 1=yes)",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Stats display",
|
||||
fields: [
|
||||
{
|
||||
key: "radio_stats_show_daily",
|
||||
comment: "Show daily statistics (0=no, 1=yes)",
|
||||
},
|
||||
{
|
||||
key: "radio_stats_show_weekly",
|
||||
comment: "Show weekly statistics (0=no, 1=yes)",
|
||||
},
|
||||
{
|
||||
key: "radio_stats_show_monthly",
|
||||
comment: "Show monthly statistics (0=no, 1=yes)",
|
||||
},
|
||||
{
|
||||
key: "radio_stats_show_top_djs",
|
||||
comment: "Show top DJs (0=no, 1=yes)",
|
||||
},
|
||||
{
|
||||
key: "radio_stats_show_top_songs",
|
||||
comment: "Show top songs (0=no, 1=yes)",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Social & contact",
|
||||
fields: [
|
||||
{ key: "radio_social_facebook", comment: "Facebook URL" },
|
||||
{ key: "radio_social_twitter", comment: "Twitter URL" },
|
||||
{ key: "radio_social_instagram", comment: "Instagram URL" },
|
||||
{ key: "radio_social_discord", comment: "Discord URL" },
|
||||
{ key: "radio_social_youtube", comment: "YouTube URL" },
|
||||
{ key: "radio_social_twitch", comment: "Twitch URL" },
|
||||
{ key: "radio_contact_email", comment: "Contact email" },
|
||||
{ key: "radio_contact_phone", comment: "Contact phone" },
|
||||
{ key: "radio_about_text", comment: "About radio text" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Discord webhook & custom code",
|
||||
fields: [
|
||||
{ key: "radio_discord_webhook_url", comment: "Discord webhook URL" },
|
||||
{
|
||||
key: "radio_discord_enabled",
|
||||
comment: "Enable Discord notifications (0=no, 1=yes)",
|
||||
},
|
||||
{
|
||||
key: "radio_discord_dj_live",
|
||||
comment: "Discord DJ live notification (0=no, 1=yes)",
|
||||
},
|
||||
{
|
||||
key: "radio_discord_song_changes",
|
||||
comment: "Discord song change notification (0=no, 1=yes)",
|
||||
},
|
||||
{
|
||||
key: "radio_discord_custom_message",
|
||||
comment: "Custom Discord message template",
|
||||
},
|
||||
{ key: "radio_custom_css", comment: "Custom CSS code" },
|
||||
{ key: "radio_custom_js", comment: "Custom JavaScript code" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
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[] = [];
|
||||
|
||||
try {
|
||||
const rows = await db
|
||||
.select({
|
||||
key: WebsiteSetting.key,
|
||||
value: WebsiteSetting.value,
|
||||
comment: WebsiteSetting.comment,
|
||||
})
|
||||
.from(WebsiteSetting);
|
||||
values = new Map(rows.map((r) => [r.key, r.value]));
|
||||
extra = rows
|
||||
.filter(
|
||||
(r) =>
|
||||
(r.key.startsWith("radio_") || r.key.startsWith("auto_dj_")) &&
|
||||
!CURATED_KEYS.has(r.key),
|
||||
)
|
||||
.map((r) => ({ key: r.key, comment: r.comment ?? "" }));
|
||||
} catch {
|
||||
dbError = true;
|
||||
}
|
||||
|
||||
const groups: Group[] = extra.length
|
||||
? [...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;
|
||||
const configuredKeys = [...CURATED_KEYS].filter((k) => {
|
||||
const v = values.get(k);
|
||||
return v != null && v !== "";
|
||||
}).length;
|
||||
const radioEnabled = (values.get("radio_enabled") ?? "") === "1";
|
||||
|
||||
return (
|
||||
<main>
|
||||
{dbError ? (
|
||||
<div className="admin-card mb-6">
|
||||
<p className="text-xs theme-text-muted dark:theme-text-muted m-0">
|
||||
{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
|
||||
? t("settingsForm.enabled")
|
||||
: t("settingsForm.disabled")
|
||||
}
|
||||
state={radioEnabled ? "ok" : "danger"}
|
||||
icon="💻"
|
||||
/>
|
||||
<StatusCard
|
||||
label={t("settingsForm.totalKeys")}
|
||||
value={totalKeys}
|
||||
icon="🔑"
|
||||
/>
|
||||
<StatusCard
|
||||
label={t("settingsForm.configured")}
|
||||
value={`${configuredKeys}/${CURATED_KEYS.size}`}
|
||||
hint={t("settingsForm.curatedHint")}
|
||||
icon="⚙️"
|
||||
/>
|
||||
<StatusCard
|
||||
label={t("settingsForm.customKeys")}
|
||||
value={extra.length}
|
||||
state={extra.length > 0 ? "warn" : "neutral"}
|
||||
icon="➕"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form action={saveRadioSettings}>
|
||||
<input type="hidden" name="__keys" value={allKeys} />
|
||||
<div className="flex justify-end mb-4">
|
||||
<Button type="submit" variant="default">
|
||||
{t("settingsForm.saveAll")}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{groups.map((group) => (
|
||||
<section
|
||||
key={group.title}
|
||||
className="admin-card"
|
||||
style={{ marginBottom: "1.25rem" }}
|
||||
>
|
||||
<h2 style={{ marginTop: 0 }}>{group.title}</h2>
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||
{group.fields.map((field) => (
|
||||
<div key={field.key}>
|
||||
<label
|
||||
htmlFor={`f_${field.key}`}
|
||||
style={{
|
||||
display: "block",
|
||||
fontWeight: 700,
|
||||
fontSize: "0.85rem",
|
||||
}}
|
||||
>
|
||||
{field.key}
|
||||
</label>
|
||||
<input
|
||||
id={`f_${field.key}`}
|
||||
name={field.key}
|
||||
defaultValue={values.get(field.key) ?? ""}
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
{field.comment ? (
|
||||
<p
|
||||
className="text-xs theme-text-muted dark:theme-text-muted"
|
||||
style={{ margin: "0.2rem 0 0" }}
|
||||
>
|
||||
{field.comment}
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
))}
|
||||
|
||||
<div className="flex justify-end">
|
||||
<Button type="submit" variant="default">
|
||||
{t("settingsForm.saveAll")}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<section className="admin-card" style={{ marginTop: "1.5rem" }}>
|
||||
<h3 style={{ marginTop: 0 }}>{t("settingsForm.singleKey")}</h3>
|
||||
<form action={saveRadioSetting} className="flex gap-2 flex-wrap">
|
||||
<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" variant="default">
|
||||
{t("settingsForm.saveSingle")}
|
||||
</Button>
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user