Merge pull request 'Discord: several radio streams per voice channel; adding never overwrites (#213)' (#227) from fix/213-multi-stream-per-channel into main

drb-frontend/components/NodeDiscordRadio.tsx

@@ -5,6 +5,10 @@
 // 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).
+// A voice channel can carry several radio streams, each its own bot playing
+// its own system (server-26#213 follow-up): picking a channel that already
+// plays another system ADDS this node's system beside it; only a stream of
+// this node's own system there is restarted / moved here.
 // Layout follows design-canvas/discord-system-mockup.html "Radio channels".
 
 import { useCallback, useEffect, useMemo, useState } from "react";
@@ -64,6 +68,11 @@ function modeLabel(mode: DiscordStreamView["mode"]) {
   return mode === "persistent" ? "persistent" : "ad-hoc";
 }
 
+function streamLabel(s: DiscordStreamView) {
+  const sys = s.system_name ?? "radio";
+  return s.token_name ? `${sys} (${s.token_name})` : sys;
+}
+
 // ---------------------------------------------------------------------------
 // Picker
 // ---------------------------------------------------------------------------
@@ -199,6 +208,7 @@ function DiscordPicker({
                       <div className="space-y-1">
                         {grp.channels.map((c) => {
                           const here = c.stream?.node_id === nodeId;
+                          const others = (c.streams ?? []).filter((x) => x.stream_id !== c.stream?.stream_id);
                           return (
                             <label
                               key={c.channel_id}
@@ -221,8 +231,14 @@ function DiscordPicker({
                                 {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`}
+                                      ? `${options.system_name ?? "This system"} is already on this node here`
+                                      : `${options.system_name ?? "This system"} is carried by ${c.stream.node_name ?? "another node"} — picking it moves it to this node`}
+                                  </span>
+                                )}
+                                {others.length > 0 && (
+                                  <span className="text-xs text-ink-muted block">
+                                    Also playing: {others.map(streamLabel).join(", ")}
+                                    {!c.stream && ` — this adds ${options.system_name ?? "this node's system"} beside it with another bot`}
                                   </span>
                                 )}
                               </span>
@@ -356,7 +372,7 @@ export function NodeDiscordRadio({ nodeId }: { nodeId: string }) {
 
   async function remove(s: DiscordStreamView) {
     const name = s.channel_name ?? "this channel";
-    if (!confirm(`Remove radio from ${name} permanently? It is stopped first (the node logs its radio bot out), then deleted from DRB.`)) return;
+    if (!confirm(`Remove ${streamLabel(s)} from ${name} permanently? It is stopped first (the node logs its radio bot out), then deleted from DRB. Other streams in that voice channel keep playing.`)) return;
     setBusy(`rm:${s.stream_id}`);
     setActionError(null);
     try {
@@ -429,7 +445,9 @@ export function NodeDiscordRadio({ nodeId }: { nodeId: string }) {
                 <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>
+                    <div className="text-xs text-ink-muted">
+                      {s.guild_name ?? s.guild_id} · {streamLabel(s)}
+                    </div>
                   </td>
                   <td className="px-4 py-2.5 text-ink-2">{modeLabel(s.mode)}</td>
                   <td className="px-4 py-2.5">

drb-frontend/components/discord/StreamsPanel.tsx

@@ -20,6 +20,11 @@ import { DIM, Field, INPUT, InviteLinks, Panel, Status, Table, TD } from "./ui";
 // POST /discord/guilds/{id}/stop), which accept a platform-admin token.
 // Remove is DELETE /discord/streams/{id} (admin): c2-core stops the channel
 // through desired state first, then deletes it.
+//
+// One row per STREAM, not per voice channel: a channel can carry several,
+// each with its own radio bot and system (server-26#213 follow-up). Stop,
+// Start and Remove all act on the row's stream_id, so the other streams in
+// the same channel keep playing. Add never replaces an existing stream.
 
 type Invite = { name: string; invite_url: string | null }[];
 
@@ -48,6 +53,14 @@ function AddChannelForm({
   const org = guilds.find((g) => g.guild_id === guildId)?.acting_org_id ?? null;
   const systems = overview.systems.filter((s) => s.org_id == null || s.org_id === org);
   const usableBots = bots.filter((b) => b.valid !== false && (b.org_id == null || b.org_id === org));
+  // A bot can be in one voice channel per server: name the stream holding it.
+  const busyHere = new Map<string, DiscordStream>();
+  for (const s of overview.streams) {
+    if (s.desired === "on" && s.guild_id === guildId && s.token_id) busyHere.set(s.token_id, s);
+  }
+  const inChannel = overview.streams.filter(
+    (s) => s.desired === "on" && s.guild_id === guildId && s.channel_id === channelId.trim(),
+  );
 
   async function submit(e: React.FormEvent) {
     e.preventDefault();
@@ -58,7 +71,7 @@ function AddChannelForm({
     setSaving(true);
     setError(null);
     try {
-      await c2api.startDiscordStream({
+      const res = await c2api.startDiscordStream({
         guild_id: guildId,
         channel_id: channelId.trim(),
         system_id: systemId,
@@ -66,6 +79,16 @@ function AddChannelForm({
         channel_name: channelName.trim() || undefined,
         preferred_token_id: botId || undefined,
       });
+      if (res?.already_on) {
+        // Same system re-added to a channel that already plays it: c2-core
+        // returns that stream untouched (label, mode and bot kept). Say so
+        // instead of closing as if a stream had been added.
+        setError({
+          message: `${res.system_name || "That system"} is already playing in this voice channel, so nothing was added or changed. Pick another system to add a second stream, or Remove the existing row to change its label or bot.`,
+          invite: [],
+        });
+        return;
+      }
       onDone();
     } catch (err) {
       setError(parseC2Error(err));
@@ -117,11 +140,25 @@ function AddChannelForm({
       <Field label="Radio bot">
         <select value={botId} onChange={(e) => setBotId(e.target.value)} className={INPUT}>
           <option value="">Any free bot in this server</option>
-          {usableBots.map((b) => (
-            <option key={b.token_id} value={b.token_id}>Prefer {b.name}</option>
-          ))}
+          {usableBots.map((b) => {
+            const busy = busyHere.get(b.token_id);
+            return (
+              <option key={b.token_id} value={b.token_id} disabled={!!busy}>
+                {busy
+                  ? `${b.name} — in use here (${busy.system_name || busy.system_id || "radio"}${busy.channel_name ? ` in ${busy.channel_name}` : ""})`
+                  : `Use ${b.name}`}
+              </option>
+            );
+          })}
         </select>
       </Field>
+      {inChannel.length > 0 && (
+        <div className="sm:col-span-3 text-xs text-ink-muted">
+          This voice channel already plays{" "}
+          {inChannel.map((s) => `${s.system_name || s.system_id}${s.token_name ? ` (${s.token_name})` : ""}`).join(", ")}.
+          A new system is added beside it with another bot; nothing that is playing is replaced.
+        </div>
+      )}
       {error && (
         <div className="sm:col-span-3 text-xs text-sev-major">
           {error.message}
@@ -154,6 +191,15 @@ export function StreamsPanel({
   const [busy, setBusy] = useState<string | null>(null);
   const [rowError, setRowError] = useState<{ id: string; message: string; invite: Invite } | null>(null);
   const guildsById = useMemo(() => new Map(overview.guilds.map((g) => [g.guild_id, g])), [overview.guilds]);
+  // Streams sharing a voice channel (c2-core sorts them next to each other).
+  const perChannel = useMemo(() => {
+    const m = new Map<string, number>();
+    for (const s of overview.streams) {
+      const k = `${s.guild_id}:${s.channel_id}`;
+      m.set(k, (m.get(k) ?? 0) + 1);
+    }
+    return m;
+  }, [overview.streams]);
 
   async function act(s: DiscordStream, fn: () => Promise<unknown>) {
     setBusy(s.stream_id);
@@ -171,7 +217,7 @@ export function StreamsPanel({
   return (
     <Panel
       title="Radio channels"
-      description="One row per Discord voice channel. Persistent channels come back by themselves."
+      description="One row per radio stream — a voice channel can carry several, each with its own bot and system. Persistent streams come back by themselves."
       action={
         <Button size="sm" onClick={() => setAdding((v) => !v)}>+ Add radio channel</Button>
       }
@@ -205,11 +251,19 @@ export function StreamsPanel({
             const g = guildsById.get(s.guild_id);
             const err = rowError?.id === s.stream_id ? rowError : null;
             const isOn = s.desired === "on";
+            const shared = (perChannel.get(`${s.guild_id}:${s.channel_id}`) ?? 1) - 1;
+            const name = s.channel_name || "this channel";
+            const what = `${s.system_name || s.system_id || "radio"} in ${name}`;
             return (
               <tr key={s.stream_id}>
                 <td className={TD}>
                   <b>{s.channel_name ? `🔊 ${s.channel_name}` : `channel ${shortId(s.channel_id)}`}</b>
                   <div className={DIM}>{g ? guildLabel(g) : guildLabel({ guild_id: s.guild_id, guild_name: s.guild_name })}</div>
+                  {shared > 0 && (
+                    <div className={DIM}>
+                      + {shared} other stream{shared === 1 ? "" : "s"} in this voice channel
+                    </div>
+                  )}
                 </td>
                 <td className={TD}>{source(s)}</td>
                 <td className={TD}><span className={DIM}>All talkgroups</span></td>
@@ -238,8 +292,8 @@ export function StreamsPanel({
                       variant="secondary"
                       disabled={busy !== null}
                       onClick={() => {
-                        if (!confirm(`Stop radio in ${s.channel_name || "this channel"}?`)) return;
-                        act(s, () => c2api.stopDiscordStream(s.guild_id, s.channel_id));
+                        if (!confirm(`Stop ${what}?`)) return;
+                        act(s, () => c2api.stopDiscordStream(s.guild_id, s.stream_id));
                       }}
                     >
                       {busy === s.stream_id ? "Stopping…" : "Stop"}
@@ -256,6 +310,7 @@ export function StreamsPanel({
                             channel_id: s.channel_id,
                             system_id: s.system_id as string,
                             mode: s.mode ?? "persistent",
+                            stream_id: s.stream_id,
                           }),
                         )
                       }
@@ -269,10 +324,9 @@ export function StreamsPanel({
                     className="ml-1"
                     disabled={busy !== null}
                     onClick={() => {
-                      const name = s.channel_name || "this channel";
                       const msg = isOn
-                        ? `Remove radio from ${name} permanently? It is stopped first (the node logs its radio bot out), then deleted from DRB.`
-                        : `Remove ${name} from DRB permanently?`;
+                        ? `Remove ${what} permanently? It is stopped first (the node logs its radio bot out), then deleted from DRB.${shared > 0 ? " The other streams in this voice channel keep playing." : ""}`
+                        : `Remove ${what} from DRB permanently?`;
                       if (!confirm(msg)) return;
                       act(s, () => c2api.deleteDiscordStream(s.stream_id));
                     }}

drb-frontend/lib/c2api.ts

@@ -76,6 +76,9 @@ export const c2api = {
       method: "PUT",
       body: JSON.stringify(body),
     }),
+  /** Without stream_id: ADD a stream to the voice channel (a channel can carry
+   *  several, each its own bot + system; never replaces one). With stream_id:
+   *  restart / edit that stream. */
   startDiscordStream: (body: {
     guild_id: string;
     channel_id: string;
@@ -83,6 +86,7 @@ export const c2api = {
     mode: "persistent" | "adhoc";
     channel_name?: string;
     preferred_token_id?: string;
+    stream_id?: string;
   }) => request<DiscordStream>("/discord/streams", { method: "POST", body: JSON.stringify(body) }),
   /** Permanently remove a radio channel (stopped through desired state first). Admin only. */
   deleteDiscordStream: (streamId: string) =>
@@ -99,10 +103,11 @@ export const c2api = {
     }>(`/discord/guilds/${encodeURIComponent(guildId)}?leave_radio_bots=${leaveRadioBots ? "true" : "false"}`, {
       method: "DELETE",
     }),
-  stopDiscordStream: (guildId: string, channelId: string) =>
+  /** Stop ONE stream (its voice channel may carry others, which keep playing). */
+  stopDiscordStream: (guildId: string, streamId: string) =>
     request<{ stopped: string[] }>(`/discord/guilds/${encodeURIComponent(guildId)}/stop`, {
       method: "POST",
-      body: JSON.stringify({ channel_id: channelId, reason: "stopped from web admin" }),
+      body: JSON.stringify({ stream_id: streamId, reason: "stopped from web admin" }),
     }),
 
   // Node approval

drb-frontend/lib/discord.ts

@@ -67,6 +67,8 @@ export interface DiscordStream {
   stop_reason?: string | null;
   updated_at?: string | null;
   created_at?: string | null;
+  /** POST /discord/streams: this system was already on in that channel — nothing was replaced. */
+  already_on?: boolean;
 }
 
 export interface DiscordGuild {

drb-frontend/lib/discordPicker.ts

@@ -18,7 +18,10 @@ export interface DiscordStreamView {
   channel_id: string;
   guild_name: string | null;
   channel_name: string | null;
+  system_id?: string | null;
   system_name: string | null;
+  /** The radio bot carrying it — tells apart several streams in one voice channel. */
+  token_name?: string | null;
   mode: "persistent" | "adhoc" | null;
   node_id: string | null;
   node_name: string | null;
@@ -35,7 +38,10 @@ export interface DiscordVoiceChannel {
   channel_id: string;
   name: string;
   category: string | null;
+  /** This node's system's stream in the channel, if any — what a pick restarts or moves. */
   stream: DiscordStreamView | null;
+  /** Every live stream in the channel (several systems can share it, each its own bot). */
+  streams?: DiscordStreamView[];
 }
 
 export interface DiscordGuildOption {