Add music bot for self-hosted Stoat with web control panel
Plays audio into Stoat voice channels over LiveKit and exposes the same player through both chat commands and a browser panel, so the two never drift apart: everything routes through a single MusicManager. - core: per-server GuildPlayer (queue, loop, shuffle, seek, volume, idle auto-leave) driving revoice.js/@livekit/rtc-node and ffmpeg - sources: yt-dlp for YouTube/SoundCloud, direct media URLs and internet radio, optional local library with path-traversal guards - bot: 18 chat commands with aliases, plus !panel one-time login links - api: Fastify REST + WebSocket, sessions authenticated against the instance's own /auth/session/login (TOTP supported), permissions re-checked against Stoat membership and roles on every request - web: React panel with search, queue editing, seek and volume - deploy: Dockerfile, compose.override.yml and Caddyfile snippets for dropping the service into an existing /opt/stoat stack Verified with npm run typecheck, both builds, and scripts/smoke-api.mjs (9 API checks). Voice playback itself needs a live instance to test. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Leonid Pershin
co-authored by
Claude Opus 5
Claude Opus 5
parent
d9d0e9f6bf
commit
a9b7ccdd16
@@ -0,0 +1,177 @@
|
||||
import { useEffect, useState, type MouseEvent } from "react";
|
||||
import { formatDuration } from "../api";
|
||||
import type { LoopMode, PlayerState, VoiceChannel } from "../types";
|
||||
|
||||
interface Props {
|
||||
state: PlayerState;
|
||||
position: number;
|
||||
canControl: boolean;
|
||||
voiceChannels: VoiceChannel[];
|
||||
yourVoiceChannel: VoiceChannel | null;
|
||||
onAction(action: string, payload?: Record<string, unknown>): void;
|
||||
onSeek(seconds: number): void;
|
||||
onJoin(channelId: string | null): void;
|
||||
}
|
||||
|
||||
const STATUS_LABEL: Record<PlayerState["status"], string> = {
|
||||
idle: "ожидание",
|
||||
connecting: "подключение",
|
||||
buffering: "буферизация",
|
||||
playing: "играет",
|
||||
paused: "пауза",
|
||||
};
|
||||
|
||||
const LOOP_LABEL: Record<LoopMode, string> = {
|
||||
off: "🔁 выкл",
|
||||
track: "🔂 трек",
|
||||
queue: "🔁 очередь",
|
||||
};
|
||||
|
||||
export function NowPlaying({
|
||||
state,
|
||||
position,
|
||||
canControl,
|
||||
voiceChannels,
|
||||
yourVoiceChannel,
|
||||
onAction,
|
||||
onSeek,
|
||||
onJoin,
|
||||
}: Props) {
|
||||
const [volume, setVolume] = useState(state.volume);
|
||||
const [channelId, setChannelId] = useState<string>(
|
||||
state.voiceChannelId ?? yourVoiceChannel?.id ?? voiceChannels[0]?.id ?? "",
|
||||
);
|
||||
|
||||
useEffect(() => setVolume(state.volume), [state.volume]);
|
||||
useEffect(() => {
|
||||
if (state.voiceChannelId) setChannelId(state.voiceChannelId);
|
||||
}, [state.voiceChannelId]);
|
||||
|
||||
const track = state.current;
|
||||
const duration = track?.duration ?? 0;
|
||||
const ratio = duration > 0 ? Math.min(1, position / duration) : 0;
|
||||
const isPlaying = state.status === "playing" || state.status === "buffering";
|
||||
|
||||
function seekFromClick(event: MouseEvent<HTMLDivElement>) {
|
||||
if (!track || duration <= 0 || !canControl) return;
|
||||
const rect = event.currentTarget.getBoundingClientRect();
|
||||
const fraction = (event.clientX - rect.left) / rect.width;
|
||||
onSeek(Math.max(0, Math.min(duration - 1, fraction * duration)));
|
||||
}
|
||||
|
||||
const nextLoop: LoopMode = state.loop === "off" ? "track" : state.loop === "track" ? "queue" : "off";
|
||||
|
||||
return (
|
||||
<div className="card">
|
||||
<h2>
|
||||
Сейчас играет{" "}
|
||||
<span className={`status-pill ${state.status === "playing" ? "playing" : ""}`}>
|
||||
{STATUS_LABEL[state.status]}
|
||||
</span>
|
||||
</h2>
|
||||
|
||||
<div className="now">
|
||||
{track?.thumbnail ? (
|
||||
<img className="cover" src={track.thumbnail} alt="" />
|
||||
) : (
|
||||
<div className="cover placeholder">🎵</div>
|
||||
)}
|
||||
<div className="now-meta">
|
||||
<div className="now-title">
|
||||
{track ? (
|
||||
/^https?:/.test(track.url) ? (
|
||||
<a href={track.url} target="_blank" rel="noreferrer noopener">
|
||||
{track.title}
|
||||
</a>
|
||||
) : (
|
||||
track.title
|
||||
)
|
||||
) : (
|
||||
"Тишина"
|
||||
)}
|
||||
</div>
|
||||
<div className="now-sub">
|
||||
{track
|
||||
? [track.author, `запросил ${track.requestedBy.username}`].filter(Boolean).join(" · ")
|
||||
: "Очередь пуста — найдите что-нибудь слева"}
|
||||
</div>
|
||||
<div className="progress">
|
||||
<div className="bar" onClick={seekFromClick}>
|
||||
<span style={{ width: `${ratio * 100}%` }} />
|
||||
</div>
|
||||
<div className="times">
|
||||
<span>{track ? formatDuration(position) : "0:00"}</span>
|
||||
<span>{track?.isLive ? "LIVE" : formatDuration(duration)}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="controls">
|
||||
<button
|
||||
className="icon big primary"
|
||||
onClick={() => onAction("toggle")}
|
||||
disabled={!canControl || !track}
|
||||
title={isPlaying ? "Пауза" : "Играть"}
|
||||
>
|
||||
{isPlaying ? "⏸" : "▶"}
|
||||
</button>
|
||||
<button className="icon" onClick={() => onAction("skip")} disabled={!canControl} title="Следующий">
|
||||
⏭
|
||||
</button>
|
||||
<button className="icon" onClick={() => onAction("stop")} disabled={!canControl} title="Стоп">
|
||||
⏹
|
||||
</button>
|
||||
<button
|
||||
className="icon"
|
||||
onClick={() => onAction("shuffle")}
|
||||
disabled={!canControl || state.queue.length < 2}
|
||||
title="Перемешать"
|
||||
>
|
||||
🔀
|
||||
</button>
|
||||
<button
|
||||
className={state.loop === "off" ? "" : "active"}
|
||||
onClick={() => onAction("loop", { mode: nextLoop })}
|
||||
disabled={!canControl}
|
||||
title="Режим повтора"
|
||||
>
|
||||
{LOOP_LABEL[state.loop]}
|
||||
</button>
|
||||
|
||||
<div className="volume">
|
||||
<span title="Громкость">🔊</span>
|
||||
<input
|
||||
type="range"
|
||||
min={0}
|
||||
max={200}
|
||||
value={volume}
|
||||
disabled={!canControl}
|
||||
onChange={(event) => setVolume(Number(event.target.value))}
|
||||
onMouseUp={() => onAction("volume", { volume })}
|
||||
onTouchEnd={() => onAction("volume", { volume })}
|
||||
/>
|
||||
<span className="badge">{volume}%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="voice-row">
|
||||
<select value={channelId} onChange={(event) => setChannelId(event.target.value)} disabled={!canControl}>
|
||||
{voiceChannels.length === 0 && <option value="">Нет голосовых каналов</option>}
|
||||
{voiceChannels.map((channel) => (
|
||||
<option key={channel.id} value={channel.id}>
|
||||
{channel.name}
|
||||
{yourVoiceChannel?.id === channel.id ? " (вы здесь)" : ""}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<button onClick={() => onJoin(channelId || null)} disabled={!canControl || !channelId}>
|
||||
{state.voiceChannelId === channelId ? "Переподключить" : "Зайти"}
|
||||
</button>
|
||||
<button onClick={() => onAction("leave")} disabled={!canControl || !state.voiceChannelId}>
|
||||
Выйти
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user