Merge pull request 'Node page Discord picker: org's servers + voice channels, not raw IDs (#213 item 3)' (#220) from feat/213-node-join-picker into main
Reviewed-on: #220
This commit was merged in pull request #220.
This commit is contained in:
@@ -10,6 +10,7 @@ import { StatusBadge } from "@/components/StatusBadge";
|
||||
import { NodeConfigModal } from "@/components/NodeConfigModal";
|
||||
import { SdrSettings } from "@/components/SdrSettings";
|
||||
import { RadioChannels } from "@/components/RadioChannels";
|
||||
import { NodeDiscordRadio } from "@/components/NodeDiscordRadio";
|
||||
import { CallRow } from "@/components/CallRow";
|
||||
import { MachineOutputNotice } from "@/components/ui/MachineOutputNotice";
|
||||
import { useAuth } from "@/components/AuthProvider";
|
||||
@@ -28,96 +29,11 @@ function ApprovalBadge({ status }: { status: string | null }) {
|
||||
);
|
||||
}
|
||||
|
||||
function DiscordJoinModal({
|
||||
nodeId,
|
||||
onClose,
|
||||
}: {
|
||||
nodeId: string;
|
||||
onClose: () => void;
|
||||
}) {
|
||||
const [guildId, setGuildId] = useState("");
|
||||
const [channelId, setChannelId] = useState("");
|
||||
const [sending, setSending] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
async function handleSubmit(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
setSending(true);
|
||||
setError(null);
|
||||
try {
|
||||
await c2api.sendCommand(nodeId, {
|
||||
action: "discord_join",
|
||||
guild_id: guildId,
|
||||
channel_id: channelId,
|
||||
});
|
||||
onClose();
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Failed to send join command.");
|
||||
} finally {
|
||||
setSending(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50 p-4">
|
||||
<form
|
||||
onSubmit={handleSubmit}
|
||||
className="bg-gray-900 border border-gray-700 rounded-xl p-6 space-y-4 font-mono w-full max-w-sm max-h-[90vh] overflow-y-auto"
|
||||
>
|
||||
<h3 className="text-white font-semibold">Join Discord Voice</h3>
|
||||
<div>
|
||||
<label className="text-xs text-gray-400 block mb-1">Server ID (Guild)</label>
|
||||
<input
|
||||
value={guildId}
|
||||
onChange={(e) => setGuildId(e.target.value)}
|
||||
required
|
||||
pattern="[0-9]+"
|
||||
className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm font-mono focus:outline-none focus:border-indigo-500"
|
||||
placeholder="123456789012345678"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs text-gray-400 block mb-1">Voice Channel ID</label>
|
||||
<input
|
||||
value={channelId}
|
||||
onChange={(e) => setChannelId(e.target.value)}
|
||||
required
|
||||
pattern="[0-9]+"
|
||||
className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm font-mono focus:outline-none focus:border-indigo-500"
|
||||
placeholder="123456789012345678"
|
||||
/>
|
||||
</div>
|
||||
<p className="text-xs text-gray-600">
|
||||
A token will be drawn from the pool automatically. Make sure the bot is a member of the server.
|
||||
</p>
|
||||
{error && <p className="text-red-400 text-xs">{error}</p>}
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={sending}
|
||||
className="flex-1 bg-indigo-600 hover:bg-indigo-500 disabled:opacity-50 text-white rounded-lg py-2 text-sm font-semibold transition-colors"
|
||||
>
|
||||
{sending ? "Joining…" : "Join"}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
className="flex-1 bg-gray-800 hover:bg-gray-700 text-gray-300 rounded-lg py-2 text-sm transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function NodeDetailPage() {
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const router = useRouter();
|
||||
const [node, setNode] = useState<NodeRecord | null>(null);
|
||||
const [showConfig, setShowConfig] = useState(false);
|
||||
const [showDiscordJoin, setShowDiscordJoin] = useState(false);
|
||||
const [sending, setSending] = useState(false);
|
||||
const [approving, setApproving] = useState(false);
|
||||
const [deleting, setDeleting] = useState(false);
|
||||
@@ -347,19 +263,6 @@ export default function NodeDetailPage() {
|
||||
Update Node Software
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={() => setShowDiscordJoin(true)}
|
||||
className="px-4 py-2 bg-gray-800 hover:bg-gray-700 text-gray-300 rounded-lg text-sm font-mono transition-colors"
|
||||
>
|
||||
Join Discord
|
||||
</button>
|
||||
<button
|
||||
disabled={sending}
|
||||
onClick={() => sendCommand("discord_leave")}
|
||||
className="px-4 py-2 bg-gray-800 hover:bg-gray-700 text-gray-300 rounded-lg text-sm font-mono transition-colors disabled:opacity-50"
|
||||
>
|
||||
Leave Discord
|
||||
</button>
|
||||
{isAdmin && (
|
||||
<button
|
||||
disabled={deleting}
|
||||
@@ -371,6 +274,9 @@ export default function NodeDetailPage() {
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* server-26#213 item 3: picker over the org's linked servers, not raw IDs. */}
|
||||
<NodeDiscordRadio nodeId={id} />
|
||||
|
||||
<RadioChannels channels={node.radio_channels} />
|
||||
|
||||
<SdrSettings node={node} canEdit={isAdmin} />
|
||||
@@ -413,12 +319,6 @@ export default function NodeDetailPage() {
|
||||
/>
|
||||
)}
|
||||
|
||||
{showDiscordJoin && (
|
||||
<DiscordJoinModal
|
||||
nodeId={id}
|
||||
onClose={() => setShowDiscordJoin(false)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,456 @@
|
||||
"use client";
|
||||
|
||||
// Node page "Discord radio" panel + picker (server-26#213 item 3, #109 item 13).
|
||||
// Replaces the raw Guild ID / Voice Channel ID modal. The picker lists only
|
||||
// the Discord servers linked to this node's org and the voice channels the
|
||||
// DRB bot reported in them; a pick becomes a radio channel pinned to this node
|
||||
// (desired state — the node reconciles and reports back, shown per row).
|
||||
// Layout follows design-canvas/discord-system-mockup.html "Radio channels".
|
||||
|
||||
import { useCallback, useEffect, useMemo, useState } from "react";
|
||||
import { c2api } from "@/lib/c2api";
|
||||
import {
|
||||
parseC2Error,
|
||||
type DiscordGuildOption,
|
||||
type DiscordInvite,
|
||||
type DiscordJoinOptions,
|
||||
type DiscordStreamView,
|
||||
type StreamState,
|
||||
} from "@/lib/discordPicker";
|
||||
|
||||
const POLL_MS = 10_000;
|
||||
|
||||
const STATE: Record<StreamState, { label: string; dot: string }> = {
|
||||
pending: { label: "on → waiting for node", dot: "bg-sev-moderate" },
|
||||
connecting: { label: "on → connecting", dot: "bg-sev-moderate" },
|
||||
connected: { label: "on → connected", dot: "bg-green-500" },
|
||||
error: { label: "on → error", dot: "bg-sev-major" },
|
||||
stopping: { label: "off → stopping", dot: "bg-ink-muted" },
|
||||
stopped: { label: "off", dot: "bg-ink-muted" },
|
||||
node_offline: { label: "on → node offline", dot: "bg-sev-major" },
|
||||
paused_locally: { label: "on → paused on node", dot: "bg-sev-moderate" },
|
||||
};
|
||||
|
||||
function StatePill({ s }: { s: DiscordStreamView }) {
|
||||
const st = STATE[s.actual?.state ?? "pending"] ?? STATE.pending;
|
||||
return (
|
||||
<span className="inline-flex items-center gap-1.5 text-xs font-medium whitespace-nowrap text-ink">
|
||||
<i className={`inline-block w-2 h-2 rounded-full ${st.dot}`} />
|
||||
{st.label}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
function InviteLinks({ invite }: { invite: DiscordInvite[] }) {
|
||||
if (!invite.length) return null;
|
||||
return (
|
||||
<span className="flex flex-wrap gap-x-3 gap-y-1 mt-1">
|
||||
{invite.map((i) => (
|
||||
<a
|
||||
key={i.invite_url}
|
||||
href={i.invite_url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-accent hover:underline"
|
||||
>
|
||||
Invite {i.name}
|
||||
</a>
|
||||
))}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
function modeLabel(mode: DiscordStreamView["mode"]) {
|
||||
return mode === "persistent" ? "persistent" : "ad-hoc";
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Picker
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
function DiscordPicker({
|
||||
nodeId,
|
||||
options,
|
||||
onClose,
|
||||
onStarted,
|
||||
}: {
|
||||
nodeId: string;
|
||||
options: DiscordJoinOptions;
|
||||
onClose: () => void;
|
||||
onStarted: () => void;
|
||||
}) {
|
||||
const usable = options.guilds;
|
||||
const [guildId, setGuildId] = useState<string>(usable.length === 1 ? usable[0].guild_id : "");
|
||||
const [channelId, setChannelId] = useState("");
|
||||
const [mode, setMode] = useState<"adhoc" | "persistent">("adhoc");
|
||||
const [sending, setSending] = useState(false);
|
||||
const [error, setError] = useState<{ message: string; invite: DiscordInvite[] } | null>(null);
|
||||
|
||||
const guild: DiscordGuildOption | undefined = usable.find((g) => g.guild_id === guildId);
|
||||
const channel = guild?.voice_channels.find((c) => c.channel_id === channelId);
|
||||
const atNodeCap = options.limits.node_used >= options.limits.node_max;
|
||||
const channelOnHere = channel?.stream?.node_id === nodeId;
|
||||
|
||||
const grouped = useMemo(() => {
|
||||
const out: { category: string | null; channels: DiscordGuildOption["voice_channels"] }[] = [];
|
||||
for (const c of guild?.voice_channels ?? []) {
|
||||
const last = out[out.length - 1];
|
||||
if (last && last.category === c.category) last.channels.push(c);
|
||||
else out.push({ category: c.category, channels: [c] });
|
||||
}
|
||||
return out;
|
||||
}, [guild]);
|
||||
|
||||
async function start() {
|
||||
if (!guild || !channel) return;
|
||||
setSending(true);
|
||||
setError(null);
|
||||
try {
|
||||
await c2api.startNodeDiscordStream(nodeId, { guild_id: guild.guild_id, channel_id: channel.channel_id, mode });
|
||||
onStarted();
|
||||
onClose();
|
||||
} catch (err) {
|
||||
setError(parseC2Error(err));
|
||||
} finally {
|
||||
setSending(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50 p-4" role="dialog" aria-modal="true" aria-labelledby="discord-picker-title">
|
||||
<div className="bg-surface border border-line rounded-xl w-full max-w-lg max-h-[90vh] flex flex-col text-sm">
|
||||
<div className="px-5 pt-5 pb-3 border-b border-line">
|
||||
<h3 id="discord-picker-title" className="text-ink font-semibold text-base">Add radio channel</h3>
|
||||
<p className="text-ink-muted text-xs mt-1">
|
||||
Source: <span className="text-ink-2">{options.system_name ?? "no system"}</span> ·{" "}
|
||||
<span className="text-ink-2">{options.node_name ?? nodeId}</span>. Audio comes from this node's
|
||||
PulseAudio monitor.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="px-5 py-4 space-y-4 overflow-y-auto">
|
||||
{/* 1 — server */}
|
||||
<fieldset>
|
||||
<legend className="text-xs text-ink-muted mb-2">Discord server</legend>
|
||||
{usable.length === 0 ? (
|
||||
<p className="text-xs text-ink-2 bg-raised border border-line rounded-lg px-3 py-2">
|
||||
No Discord server is linked to your organization yet. Add the DRB bot to your Discord server and
|
||||
link it to your organization; it shows up here once the bot reports its channels.
|
||||
</p>
|
||||
) : (
|
||||
<div className="space-y-1.5">
|
||||
{usable.map((g) => (
|
||||
<label
|
||||
key={g.guild_id}
|
||||
className={`flex items-start gap-3 rounded-lg border px-3 py-2 cursor-pointer ${
|
||||
g.guild_id === guildId ? "border-accent bg-accent/10" : "border-line bg-raised hover:border-line-strong"
|
||||
}`}
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
name="guild"
|
||||
className="mt-1 accent-[var(--accent)]"
|
||||
checked={g.guild_id === guildId}
|
||||
onChange={() => {
|
||||
setGuildId(g.guild_id);
|
||||
setChannelId("");
|
||||
setError(null);
|
||||
}}
|
||||
/>
|
||||
<span className="flex-1 min-w-0">
|
||||
<span className="text-ink font-medium block truncate">{g.name ?? `Server ${g.guild_id}`}</span>
|
||||
<span className="text-xs text-ink-muted block">
|
||||
{g.linked ? "Linked" : "Default organization (not linked yet)"} · {g.streams_on} /{" "}
|
||||
{options.limits.guild_max} radio channels on
|
||||
</span>
|
||||
{!g.bot.ok && (
|
||||
<span className="text-xs text-sev-moderate block mt-1">
|
||||
{g.bot.message}
|
||||
<InviteLinks invite={g.bot.invite} />
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</fieldset>
|
||||
|
||||
{/* 2 — voice channel */}
|
||||
{guild && (
|
||||
<fieldset>
|
||||
<legend className="text-xs text-ink-muted mb-2">Voice channel</legend>
|
||||
{!guild.synced ? (
|
||||
<p className="text-xs text-ink-2 bg-raised border border-line rounded-lg px-3 py-2">
|
||||
The DRB bot has not reported this server's channels yet. It does when it starts and every 15
|
||||
minutes — check back shortly.
|
||||
</p>
|
||||
) : guild.voice_channels.length === 0 ? (
|
||||
<p className="text-xs text-ink-2 bg-raised border border-line rounded-lg px-3 py-2">
|
||||
This server has no voice channels the DRB bot can see.
|
||||
</p>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{grouped.map((grp, gi) => (
|
||||
<div key={`${grp.category ?? ""}-${gi}`}>
|
||||
{grp.category && (
|
||||
<div className="text-[11px] uppercase tracking-wider text-ink-muted mb-1">{grp.category}</div>
|
||||
)}
|
||||
<div className="space-y-1">
|
||||
{grp.channels.map((c) => {
|
||||
const here = c.stream?.node_id === nodeId;
|
||||
return (
|
||||
<label
|
||||
key={c.channel_id}
|
||||
className={`flex items-start gap-3 rounded-lg border px-3 py-1.5 cursor-pointer ${
|
||||
c.channel_id === channelId ? "border-accent bg-accent/10" : "border-line bg-raised hover:border-line-strong"
|
||||
}`}
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
name="channel"
|
||||
className="mt-1 accent-[var(--accent)]"
|
||||
checked={c.channel_id === channelId}
|
||||
onChange={() => {
|
||||
setChannelId(c.channel_id);
|
||||
setError(null);
|
||||
}}
|
||||
/>
|
||||
<span className="flex-1 min-w-0">
|
||||
<span className="text-ink block truncate">🔊 {c.name}</span>
|
||||
{c.stream && (
|
||||
<span className="text-xs text-ink-muted block">
|
||||
{here
|
||||
? "Already on this node"
|
||||
: `Carried by ${c.stream.node_name ?? "another node"} — picking it moves it to this node`}
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
</label>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</fieldset>
|
||||
)}
|
||||
|
||||
{/* 3 — mode */}
|
||||
{channel && (
|
||||
<fieldset>
|
||||
<legend className="text-xs text-ink-muted mb-2">Mode</legend>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
{(
|
||||
[
|
||||
["adhoc", "Ad-hoc", "Stops if this node goes offline or switches system."],
|
||||
["persistent", "Persistent", `Stays up: if this node drops, DRB moves it to another node on ${options.system_name ?? "this system"}.`],
|
||||
] as const
|
||||
).map(([value, label, hint]) => (
|
||||
<label
|
||||
key={value}
|
||||
className={`rounded-lg border px-3 py-2 cursor-pointer ${
|
||||
mode === value ? "border-accent bg-accent/10" : "border-line bg-raised hover:border-line-strong"
|
||||
}`}
|
||||
>
|
||||
<span className="flex items-center gap-2">
|
||||
<input
|
||||
type="radio"
|
||||
name="mode"
|
||||
className="accent-[var(--accent)]"
|
||||
checked={mode === value}
|
||||
onChange={() => setMode(value)}
|
||||
/>
|
||||
<span className="text-ink font-medium">{label}</span>
|
||||
</span>
|
||||
<span className="text-xs text-ink-muted block mt-1">{hint}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</fieldset>
|
||||
)}
|
||||
|
||||
{!options.system_id && (
|
||||
<p className="text-xs text-sev-moderate">
|
||||
This node is not listening to a system yet. Assign it one before adding a radio channel.
|
||||
</p>
|
||||
)}
|
||||
{atNodeCap && !channelOnHere && (
|
||||
<p className="text-xs text-sev-moderate">
|
||||
This node already carries {options.limits.node_used} of {options.limits.node_max} radio channels. Stop one
|
||||
first.
|
||||
</p>
|
||||
)}
|
||||
{error && (
|
||||
<p role="alert" className="text-xs text-sev-major">
|
||||
{error.message}
|
||||
<InviteLinks invite={error.invite} />
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3 px-5 py-4 border-t border-line">
|
||||
<button
|
||||
type="button"
|
||||
onClick={start}
|
||||
disabled={sending || !channel || !options.system_id || (atNodeCap && !channelOnHere)}
|
||||
className="flex-1 bg-accent hover:brightness-110 disabled:opacity-50 disabled:cursor-not-allowed text-white rounded-lg py-2 text-sm font-semibold"
|
||||
>
|
||||
{sending ? "Starting…" : channelOnHere ? "Update" : "Start radio"}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
className="flex-1 bg-raised border border-line hover:brightness-110 text-ink-2 rounded-lg py-2 text-sm"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Panel
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
export function NodeDiscordRadio({ nodeId }: { nodeId: string }) {
|
||||
const [options, setOptions] = useState<DiscordJoinOptions | null>(null);
|
||||
const [loadError, setLoadError] = useState<string | null>(null);
|
||||
const [picking, setPicking] = useState(false);
|
||||
const [busy, setBusy] = useState<string | null>(null);
|
||||
const [actionError, setActionError] = useState<string | null>(null);
|
||||
|
||||
const load = useCallback(async () => {
|
||||
try {
|
||||
setOptions(await c2api.getNodeDiscordOptions(nodeId));
|
||||
setLoadError(null);
|
||||
} catch (err) {
|
||||
setLoadError(parseC2Error(err).message);
|
||||
}
|
||||
}, [nodeId]);
|
||||
|
||||
useEffect(() => {
|
||||
load();
|
||||
const t = setInterval(() => {
|
||||
if (document.visibilityState === "visible") load();
|
||||
}, POLL_MS);
|
||||
return () => clearInterval(t);
|
||||
}, [load]);
|
||||
|
||||
async function stop(streamId?: string) {
|
||||
if (!streamId && !confirm("Stop every Discord radio channel this node carries?")) return;
|
||||
setBusy(streamId ?? "all");
|
||||
setActionError(null);
|
||||
try {
|
||||
await c2api.stopNodeDiscordStreams(nodeId, streamId);
|
||||
await load();
|
||||
} catch (err) {
|
||||
setActionError(parseC2Error(err).message);
|
||||
} finally {
|
||||
setBusy(null);
|
||||
}
|
||||
}
|
||||
|
||||
const streams = options?.streams ?? [];
|
||||
const canControl = options?.can_control ?? false;
|
||||
|
||||
return (
|
||||
<section className="bg-surface border border-line rounded-lg overflow-hidden">
|
||||
<div className="flex flex-wrap items-center gap-x-3 gap-y-1 px-4 py-3 border-b border-line">
|
||||
<h2 className="text-sm font-semibold text-ink">Discord radio</h2>
|
||||
<span className="text-xs text-ink-muted">
|
||||
Voice channels this node streams into. They reconnect by themselves; state is reported by the node.
|
||||
</span>
|
||||
{canControl && (
|
||||
<span className="ml-auto flex gap-2">
|
||||
{streams.length > 1 && (
|
||||
<button
|
||||
type="button"
|
||||
disabled={busy !== null}
|
||||
onClick={() => stop()}
|
||||
className="bg-raised border border-line hover:brightness-110 disabled:opacity-50 text-ink-2 rounded-md px-2.5 py-1 text-xs"
|
||||
>
|
||||
{busy === "all" ? "Stopping…" : "Stop all"}
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
disabled={!options}
|
||||
onClick={() => setPicking(true)}
|
||||
className="bg-accent hover:brightness-110 disabled:opacity-50 text-white rounded-md px-2.5 py-1 text-xs font-semibold"
|
||||
>
|
||||
+ Add radio channel
|
||||
</button>
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{loadError ? (
|
||||
<p role="alert" className="px-4 py-3 text-xs text-sev-major">Couldn't load Discord radio: {loadError}</p>
|
||||
) : !options ? (
|
||||
<p className="px-4 py-3 text-xs text-ink-muted">Loading…</p>
|
||||
) : streams.length === 0 ? (
|
||||
<p className="px-4 py-3 text-xs text-ink-muted">
|
||||
Not streaming into any Discord voice channel.
|
||||
{!canControl && " The organization owner or this node's operator can add one."}
|
||||
</p>
|
||||
) : (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="text-xs text-ink-muted border-b border-line">
|
||||
<th className="px-4 py-2 text-left font-medium">Server · channel</th>
|
||||
<th className="px-4 py-2 text-left font-medium">Mode</th>
|
||||
<th className="px-4 py-2 text-left font-medium">Desired → actual</th>
|
||||
{canControl && <th className="px-4 py-2" />}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{streams.map((s) => (
|
||||
<tr key={s.stream_id} className="border-b border-line last:border-0 align-top">
|
||||
<td className="px-4 py-2.5">
|
||||
<div className="text-ink font-medium">🔊 {s.channel_name ?? s.channel_id}</div>
|
||||
<div className="text-xs text-ink-muted">{s.guild_name ?? s.guild_id}</div>
|
||||
</td>
|
||||
<td className="px-4 py-2.5 text-ink-2">{modeLabel(s.mode)}</td>
|
||||
<td className="px-4 py-2.5">
|
||||
<StatePill s={s} />
|
||||
{s.actual?.error && (
|
||||
<div className="text-xs text-ink-muted mt-1 max-w-xs">{s.actual.error}</div>
|
||||
)}
|
||||
</td>
|
||||
{canControl && (
|
||||
<td className="px-4 py-2.5 text-right">
|
||||
<button
|
||||
type="button"
|
||||
disabled={busy !== null}
|
||||
onClick={() => stop(s.stream_id)}
|
||||
className="bg-raised border border-line hover:brightness-110 disabled:opacity-50 text-ink-2 rounded-md px-2 py-0.5 text-xs"
|
||||
>
|
||||
{busy === s.stream_id ? "Stopping…" : "Stop"}
|
||||
</button>
|
||||
</td>
|
||||
)}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{actionError && <p role="alert" className="px-4 py-2 text-xs text-sev-major border-t border-line">{actionError}</p>}
|
||||
{options && !options.node_online && streams.length > 0 && (
|
||||
<p className="px-4 py-2 text-xs text-ink-muted bg-raised border-t border-line">
|
||||
This node is offline — its channels resume if it reconnects shortly. If it stays down, ad-hoc ones stop and persistent ones move to another node on the same system.
|
||||
</p>
|
||||
)}
|
||||
|
||||
{picking && options && (
|
||||
<DiscordPicker nodeId={nodeId} options={options} onClose={() => setPicking(false)} onStarted={load} />
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -101,6 +101,21 @@ export const c2api = {
|
||||
),
|
||||
rejectNode: (id: string) =>
|
||||
request(`/nodes/${id}/reject`, { method: "POST" }),
|
||||
|
||||
// Node-page Discord picker (server-26#213 item 3) — org-scoped server side.
|
||||
getNodeDiscordOptions: (nodeId: string) =>
|
||||
request<import("@/lib/discordPicker").DiscordJoinOptions>(`/discord/nodes/${nodeId}/join-options`),
|
||||
startNodeDiscordStream: (nodeId: string, body: { guild_id: string; channel_id: string; mode: "adhoc" | "persistent" }) =>
|
||||
request<import("@/lib/discordPicker").DiscordStartResult>(`/discord/nodes/${nodeId}/streams`, {
|
||||
method: "POST",
|
||||
body: JSON.stringify(body),
|
||||
}),
|
||||
/** Omit streamId to stop every radio channel this node carries. */
|
||||
stopNodeDiscordStreams: (nodeId: string, streamId?: string) =>
|
||||
request<{ ok: boolean; stopped: string[] }>(`/discord/nodes/${nodeId}/streams/stop`, {
|
||||
method: "POST",
|
||||
body: JSON.stringify(streamId ? { stream_id: streamId } : {}),
|
||||
}),
|
||||
deleteNode: (id: string) =>
|
||||
request(`/nodes/${id}`, { method: "DELETE" }),
|
||||
|
||||
|
||||
@@ -0,0 +1,90 @@
|
||||
// Node-page Discord picker (server-26#213 item 3, #109 item 13).
|
||||
// Shapes returned by c2-core app/routers/discord_web.py. No token strings —
|
||||
// the server never sends them to the browser.
|
||||
|
||||
export type StreamState =
|
||||
| "pending"
|
||||
| "connecting"
|
||||
| "connected"
|
||||
| "error"
|
||||
| "stopping"
|
||||
| "stopped"
|
||||
| "node_offline"
|
||||
| "paused_locally";
|
||||
|
||||
export interface DiscordStreamView {
|
||||
stream_id: string;
|
||||
guild_id: string;
|
||||
channel_id: string;
|
||||
guild_name: string | null;
|
||||
channel_name: string | null;
|
||||
system_name: string | null;
|
||||
mode: "persistent" | "adhoc" | null;
|
||||
node_id: string | null;
|
||||
node_name: string | null;
|
||||
actual: { state: StreamState; error: string | null; since?: string; at?: string } | null;
|
||||
updated_at: string | null;
|
||||
}
|
||||
|
||||
export interface DiscordInvite {
|
||||
name: string;
|
||||
invite_url: string;
|
||||
}
|
||||
|
||||
export interface DiscordVoiceChannel {
|
||||
channel_id: string;
|
||||
name: string;
|
||||
category: string | null;
|
||||
stream: DiscordStreamView | null;
|
||||
}
|
||||
|
||||
export interface DiscordGuildOption {
|
||||
guild_id: string;
|
||||
name: string | null;
|
||||
linked: boolean;
|
||||
synced: boolean;
|
||||
synced_at: string | null;
|
||||
voice_channels: DiscordVoiceChannel[];
|
||||
streams_on: number;
|
||||
bot: { ok: boolean; code: string | null; message: string | null; invite: DiscordInvite[] };
|
||||
}
|
||||
|
||||
export interface DiscordJoinOptions {
|
||||
node_id: string;
|
||||
node_name: string | null;
|
||||
node_online: boolean;
|
||||
system_id: string | null;
|
||||
system_name: string | null;
|
||||
can_control: boolean;
|
||||
limits: { node_max: number; node_used: number; guild_max: number };
|
||||
guilds: DiscordGuildOption[];
|
||||
streams: DiscordStreamView[];
|
||||
}
|
||||
|
||||
export interface DiscordStartResult {
|
||||
ok: boolean;
|
||||
stream_id: string;
|
||||
token_id: string | null;
|
||||
delivered: boolean | null;
|
||||
reused: boolean | null;
|
||||
}
|
||||
|
||||
/** c2api's request() throws `C2 API error <status>: <body>`. Pull the
|
||||
* detail + invite links back out of a JSON body when there is one. */
|
||||
export function parseC2Error(err: unknown): { message: string; invite: DiscordInvite[] } {
|
||||
const raw = err instanceof Error ? err.message : String(err);
|
||||
const idx = raw.indexOf(": ");
|
||||
if (idx >= 0) {
|
||||
try {
|
||||
const body = JSON.parse(raw.slice(idx + 2));
|
||||
const detail = typeof body?.detail === "string" ? body.detail : null;
|
||||
const invite = Array.isArray(body?.invite)
|
||||
? (body.invite as DiscordInvite[]).filter((i) => i && typeof i.invite_url === "string")
|
||||
: [];
|
||||
if (detail) return { message: detail, invite };
|
||||
} catch {
|
||||
/* not JSON — fall through */
|
||||
}
|
||||
}
|
||||
return { message: raw, invite: [] };
|
||||
}
|
||||
Reference in New Issue
Block a user