import { useEffect, useState } from "react"; import { useNowPlaying } from "./shared/useNowPlaying.ts"; import { useSpectrum } from "./shared/useSpectrum.ts"; import { useElapsed } from "./shared/useElapsed.ts"; import { fmtMs, fmtClock, fmtClockSec, fmtJpDate } from "./shared/format.ts"; const KAOMOJI_STREAM = ["(´｡• ᵕ •｡`)", "٩(◕‿◕)۶", "(｡◕‿◕｡)", "(>ω<)", "(✿◠‿◠)"]; interface Cfg { station: string; tz: string; tuneInUrl: string; branding: boolean; } interface Listeners { current: number; peak: number; } interface Props { cfg: Cfg; listeners: Listeners; } export function StreamDenpa({ cfg, listeners }: Props) { const np = useNowPlaying(); const spectrum = useSpectrum(); const [now, setNow] = useState(() => new Date()); useEffect(() => { const id = setInterval(() => setNow(new Date()), 1000); return () => clearInterval(id); }, []); const startedAt = np ? Number(np.started_at) : 0; const duration = np ? Number(np.duration) : 0; const elapsed = useElapsed(startedAt, duration); if (!np) return
; const pct = duration > 0 ? (elapsed / duration) * 100 : 0; const upNext = np.up_next.slice(0, 4); const nameJp = "ラジオ"; const channel = "CH.01"; const bitrate = 192; const codec = "MP3/OPUS"; const genre = "auto"; const uptime = "—"; return (
{cfg.branding && ( <>
電波 TRANSMISSION
denpa.fm
{channel} ←
{nameJp}
{"<3"} block radio
)}
[REC] ON AIR
{fmtJpDate(now)}
{fmtClockSec(now)} JST
{listeners.current} listening · peak {listeners.peak}
>> NOW PLAYING {bitrate}kbps · {codec}
{np.title}
{np.artist} — {np.album}
{fmtMs(elapsed)}
{fmtMs(duration)}
{spectrum.map((v, i) => (
))}
次の曲
// up next
auto-DJ · no ads · no skips · forever
{upNext.map((q, i) => (
0{i + 1} {q.title}
{q.artist} {fmtMs(Number(q.duration))}
))}
放送局情報
// station info
CHANNEL
{channel}
{genre}
UPTIME
{uptime}
since 2024
LISTENING
{listeners.current}
peak {listeners.peak} today
BITRATE
{bitrate}k
{codec}
{/* Sticker bombs */}
// 24/7 ON AIR //
SIDE A · CH.01
{/* Bottom strip */} {cfg.branding && (
>> tune in @ {cfg.tuneInUrl}
※ now broadcasting from a small room in tokyo ※ 24/7 always-on {cfg.station} station ※ stream URL: {cfg.tuneInUrl} ※ requests via @denpa_bot ※ no ads · no algorithms · just blocks ※ {KAOMOJI_STREAM.join(" ※ ")} ※
{fmtClock(now)}
)}
); }