Refactor: Radio topbar layout + fix soundboard connection modal
- Radio: Move controls from bottom bar to topbar above globe (guild/channel selectors, now playing, volume, connection, stop) - Radio: Theme selector moved inline into topbar-right - Radio: Globe now fills remaining space below topbar - Soundboard: Fix connection modal not opening when voiceStats is null (modal now renders with '---' values when no voice data available) - Both: Modal condition changed from `showConnModal && voiceStats` to just `showConnModal`, handling null voiceStats gracefully Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Daniel
parent
b821ad9615
commit
f18638ff57
3 changed files with 292 additions and 265 deletions
|
|
@ -431,151 +431,12 @@ export default function RadioTab({ data }: { data: any }) {
|
|||
return (
|
||||
<div className="radio-container" data-theme={theme}>
|
||||
|
||||
{/* ── Globe ── */}
|
||||
<div className="radio-globe" ref={containerRef} />
|
||||
{/* ═══ TOPBAR ═══ */}
|
||||
<header className="radio-topbar">
|
||||
<div className="radio-topbar-left">
|
||||
<span className="radio-topbar-logo">{'\u{1F30D}'}</span>
|
||||
<span className="radio-topbar-title">World Radio</span>
|
||||
|
||||
{/* ── Theme Selector ── */}
|
||||
<div className="radio-theme">
|
||||
{THEMES.map(t => (
|
||||
<div
|
||||
key={t.id}
|
||||
className={`radio-theme-dot ${theme === t.id ? 'active' : ''}`}
|
||||
style={{ background: t.color }}
|
||||
title={t.label}
|
||||
onClick={() => setTheme(t.id)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* ── Search ── */}
|
||||
<div className="radio-search">
|
||||
<div className="radio-search-wrap">
|
||||
<span className="radio-search-icon">{'\u{1F50D}'}</span>
|
||||
<input
|
||||
className="radio-search-input"
|
||||
type="text"
|
||||
placeholder="Sender oder Stadt suchen..."
|
||||
value={searchQuery}
|
||||
onChange={e => handleSearch(e.target.value)}
|
||||
onFocus={() => { if (searchResults.length) setSearchOpen(true); }}
|
||||
/>
|
||||
{searchQuery && (
|
||||
<button className="radio-search-clear" onClick={() => { setSearchQuery(''); setSearchResults([]); setSearchOpen(false); }}>{'\u2715'}</button>
|
||||
)}
|
||||
</div>
|
||||
{searchOpen && searchResults.length > 0 && (
|
||||
<div className="radio-search-results">
|
||||
{searchResults.slice(0, 12).map(hit => (
|
||||
<button key={hit.id + hit.url} className="radio-search-result" onClick={() => handleSearchResultClick(hit)}>
|
||||
<span className="radio-search-result-icon">
|
||||
{hit.type === 'channel' ? '\u{1F4FB}' : hit.type === 'place' ? '\u{1F4CD}' : '\u{1F30D}'}
|
||||
</span>
|
||||
<div className="radio-search-result-text">
|
||||
<span className="radio-search-result-title">{hit.title}</span>
|
||||
<span className="radio-search-result-sub">{hit.subtitle}</span>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* ── Favorites toggle ── */}
|
||||
<button
|
||||
className={`radio-fab ${showFavorites ? 'active' : ''}`}
|
||||
onClick={() => { setShowFavorites(!showFavorites); if (!showFavorites) setSelectedPlace(null); }}
|
||||
title="Favoriten"
|
||||
>
|
||||
{'\u2B50'}{favorites.length > 0 && <span className="radio-fab-badge">{favorites.length}</span>}
|
||||
</button>
|
||||
|
||||
{/* ── Side Panel: Favorites ── */}
|
||||
{showFavorites && (
|
||||
<div className="radio-panel open">
|
||||
<div className="radio-panel-header">
|
||||
<h3>{'\u2B50'} Favoriten</h3>
|
||||
<button className="radio-panel-close" onClick={() => setShowFavorites(false)}>{'\u2715'}</button>
|
||||
</div>
|
||||
<div className="radio-panel-body">
|
||||
{favorites.length === 0 ? (
|
||||
<div className="radio-panel-empty">Noch keine Favoriten</div>
|
||||
) : (
|
||||
favorites.map(fav => (
|
||||
<div key={fav.stationId} className={`radio-station ${currentPlaying?.stationId === fav.stationId ? 'playing' : ''}`}>
|
||||
<div className="radio-station-info">
|
||||
<span className="radio-station-name">{fav.stationName}</span>
|
||||
<span className="radio-station-loc">{fav.placeName}, {fav.country}</span>
|
||||
</div>
|
||||
<div className="radio-station-btns">
|
||||
<button
|
||||
className="radio-btn-play"
|
||||
onClick={() => handlePlay(fav.stationId, fav.stationName, fav.placeName, fav.country)}
|
||||
disabled={!selectedChannel || playingLoading}
|
||||
>{'\u25B6'}</button>
|
||||
<button className="radio-btn-fav active" onClick={() => toggleFavorite(fav.stationId, fav.stationName)}>{'\u2605'}</button>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── Side Panel: Stations at place ── */}
|
||||
{selectedPlace && !showFavorites && (
|
||||
<div className="radio-panel open">
|
||||
<div className="radio-panel-header">
|
||||
<div>
|
||||
<h3>{selectedPlace.title}</h3>
|
||||
<span className="radio-panel-sub">{selectedPlace.country}</span>
|
||||
</div>
|
||||
<button className="radio-panel-close" onClick={() => setSelectedPlace(null)}>{'\u2715'}</button>
|
||||
</div>
|
||||
<div className="radio-panel-body">
|
||||
{stationsLoading ? (
|
||||
<div className="radio-panel-loading">
|
||||
<div className="radio-spinner" />
|
||||
Sender werden geladen...
|
||||
</div>
|
||||
) : stations.length === 0 ? (
|
||||
<div className="radio-panel-empty">Keine Sender gefunden</div>
|
||||
) : (
|
||||
stations.map(s => (
|
||||
<div key={s.id} className={`radio-station ${currentPlaying?.stationId === s.id ? 'playing' : ''}`}>
|
||||
<div className="radio-station-info">
|
||||
<span className="radio-station-name">{s.title}</span>
|
||||
{currentPlaying?.stationId === s.id && (
|
||||
<span className="radio-station-live">
|
||||
<span className="radio-eq"><span /><span /><span /></span>
|
||||
Live
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="radio-station-btns">
|
||||
{currentPlaying?.stationId === s.id ? (
|
||||
<button className="radio-btn-stop" onClick={handleStop}>{'\u23F9'}</button>
|
||||
) : (
|
||||
<button
|
||||
className="radio-btn-play"
|
||||
onClick={() => handlePlay(s.id, s.title)}
|
||||
disabled={!selectedChannel || playingLoading}
|
||||
>{'\u25B6'}</button>
|
||||
)}
|
||||
<button
|
||||
className={`radio-btn-fav ${isFavorite(s.id) ? 'active' : ''}`}
|
||||
onClick={() => toggleFavorite(s.id, s.title)}
|
||||
>{isFavorite(s.id) ? '\u2605' : '\u2606'}</button>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── Bottom Bar ── */}
|
||||
<div className={`radio-bar ${currentPlaying ? 'has-playing' : ''}`}>
|
||||
<div className="radio-bar-channel">
|
||||
{guilds.length > 1 && (
|
||||
<select className="radio-sel" value={selectedGuild} onChange={e => {
|
||||
setSelectedGuild(e.target.value);
|
||||
|
|
@ -595,44 +456,192 @@ export default function RadioTab({ data }: { data: any }) {
|
|||
</div>
|
||||
|
||||
{currentPlaying && (
|
||||
<div className="radio-np">
|
||||
<div className="radio-topbar-np">
|
||||
<div className="radio-eq radio-eq-np"><span /><span /><span /></div>
|
||||
<div className="radio-np-info">
|
||||
<span className="radio-np-name">{currentPlaying.stationName}</span>
|
||||
<span className="radio-np-loc">{currentPlaying.placeName}{currentPlaying.country ? `, ${currentPlaying.country}` : ''}</span>
|
||||
</div>
|
||||
<div className="radio-volume">
|
||||
<span className="radio-volume-icon">{volume === 0 ? '\u{1F507}' : volume < 0.4 ? '\u{1F509}' : '\u{1F50A}'}</span>
|
||||
<input
|
||||
type="range"
|
||||
className="radio-volume-slider"
|
||||
min={0} max={1} step={0.01}
|
||||
value={volume}
|
||||
onChange={e => handleVolume(Number(e.target.value))}
|
||||
/>
|
||||
<span className="radio-volume-val">{Math.round(volume * 100)}%</span>
|
||||
</div>
|
||||
<span className="radio-np-ch">{'\u{1F50A}'} {currentPlaying.channelName}</span>
|
||||
<div className="radio-conn" onClick={() => setShowConnModal(true)} title="Verbindungsdetails">
|
||||
<span className="radio-conn-dot" />
|
||||
Verbunden
|
||||
{voiceStats?.voicePing != null && (
|
||||
<span className="radio-conn-ping">{voiceStats.voicePing}ms</span>
|
||||
)}
|
||||
</div>
|
||||
<button className="radio-btn-stop" onClick={handleStop}>{'\u23F9'} Stop</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* ── Places counter ── */}
|
||||
<div className="radio-counter">
|
||||
{'\u{1F4FB}'} {places.length.toLocaleString('de-DE')} Sender weltweit
|
||||
<div className="radio-topbar-right">
|
||||
{currentPlaying && (
|
||||
<>
|
||||
<div className="radio-volume">
|
||||
<span className="radio-volume-icon">{volume === 0 ? '\u{1F507}' : volume < 0.4 ? '\u{1F509}' : '\u{1F50A}'}</span>
|
||||
<input
|
||||
type="range"
|
||||
className="radio-volume-slider"
|
||||
min={0} max={1} step={0.01}
|
||||
value={volume}
|
||||
onChange={e => handleVolume(Number(e.target.value))}
|
||||
/>
|
||||
<span className="radio-volume-val">{Math.round(volume * 100)}%</span>
|
||||
</div>
|
||||
<div className="radio-conn" onClick={() => setShowConnModal(true)} title="Verbindungsdetails">
|
||||
<span className="radio-conn-dot" />
|
||||
Verbunden
|
||||
{voiceStats?.voicePing != null && (
|
||||
<span className="radio-conn-ping">{voiceStats.voicePing}ms</span>
|
||||
)}
|
||||
</div>
|
||||
<button className="radio-topbar-stop" onClick={handleStop}>{'\u23F9'} Stop</button>
|
||||
</>
|
||||
)}
|
||||
<div className="radio-theme-inline">
|
||||
{THEMES.map(t => (
|
||||
<div
|
||||
key={t.id}
|
||||
className={`radio-theme-dot ${theme === t.id ? 'active' : ''}`}
|
||||
style={{ background: t.color }}
|
||||
title={t.label}
|
||||
onClick={() => setTheme(t.id)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* ═══ GLOBE AREA ═══ */}
|
||||
<div className="radio-globe-wrap">
|
||||
<div className="radio-globe" ref={containerRef} />
|
||||
|
||||
{/* ── Search ── */}
|
||||
<div className="radio-search">
|
||||
<div className="radio-search-wrap">
|
||||
<span className="radio-search-icon">{'\u{1F50D}'}</span>
|
||||
<input
|
||||
className="radio-search-input"
|
||||
type="text"
|
||||
placeholder="Sender oder Stadt suchen..."
|
||||
value={searchQuery}
|
||||
onChange={e => handleSearch(e.target.value)}
|
||||
onFocus={() => { if (searchResults.length) setSearchOpen(true); }}
|
||||
/>
|
||||
{searchQuery && (
|
||||
<button className="radio-search-clear" onClick={() => { setSearchQuery(''); setSearchResults([]); setSearchOpen(false); }}>{'\u2715'}</button>
|
||||
)}
|
||||
</div>
|
||||
{searchOpen && searchResults.length > 0 && (
|
||||
<div className="radio-search-results">
|
||||
{searchResults.slice(0, 12).map(hit => (
|
||||
<button key={hit.id + hit.url} className="radio-search-result" onClick={() => handleSearchResultClick(hit)}>
|
||||
<span className="radio-search-result-icon">
|
||||
{hit.type === 'channel' ? '\u{1F4FB}' : hit.type === 'place' ? '\u{1F4CD}' : '\u{1F30D}'}
|
||||
</span>
|
||||
<div className="radio-search-result-text">
|
||||
<span className="radio-search-result-title">{hit.title}</span>
|
||||
<span className="radio-search-result-sub">{hit.subtitle}</span>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* ── Favorites toggle ── */}
|
||||
<button
|
||||
className={`radio-fab ${showFavorites ? 'active' : ''}`}
|
||||
onClick={() => { setShowFavorites(!showFavorites); if (!showFavorites) setSelectedPlace(null); }}
|
||||
title="Favoriten"
|
||||
>
|
||||
{'\u2B50'}{favorites.length > 0 && <span className="radio-fab-badge">{favorites.length}</span>}
|
||||
</button>
|
||||
|
||||
{/* ── Side Panel: Favorites ── */}
|
||||
{showFavorites && (
|
||||
<div className="radio-panel open">
|
||||
<div className="radio-panel-header">
|
||||
<h3>{'\u2B50'} Favoriten</h3>
|
||||
<button className="radio-panel-close" onClick={() => setShowFavorites(false)}>{'\u2715'}</button>
|
||||
</div>
|
||||
<div className="radio-panel-body">
|
||||
{favorites.length === 0 ? (
|
||||
<div className="radio-panel-empty">Noch keine Favoriten</div>
|
||||
) : (
|
||||
favorites.map(fav => (
|
||||
<div key={fav.stationId} className={`radio-station ${currentPlaying?.stationId === fav.stationId ? 'playing' : ''}`}>
|
||||
<div className="radio-station-info">
|
||||
<span className="radio-station-name">{fav.stationName}</span>
|
||||
<span className="radio-station-loc">{fav.placeName}, {fav.country}</span>
|
||||
</div>
|
||||
<div className="radio-station-btns">
|
||||
<button
|
||||
className="radio-btn-play"
|
||||
onClick={() => handlePlay(fav.stationId, fav.stationName, fav.placeName, fav.country)}
|
||||
disabled={!selectedChannel || playingLoading}
|
||||
>{'\u25B6'}</button>
|
||||
<button className="radio-btn-fav active" onClick={() => toggleFavorite(fav.stationId, fav.stationName)}>{'\u2605'}</button>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── Side Panel: Stations at place ── */}
|
||||
{selectedPlace && !showFavorites && (
|
||||
<div className="radio-panel open">
|
||||
<div className="radio-panel-header">
|
||||
<div>
|
||||
<h3>{selectedPlace.title}</h3>
|
||||
<span className="radio-panel-sub">{selectedPlace.country}</span>
|
||||
</div>
|
||||
<button className="radio-panel-close" onClick={() => setSelectedPlace(null)}>{'\u2715'}</button>
|
||||
</div>
|
||||
<div className="radio-panel-body">
|
||||
{stationsLoading ? (
|
||||
<div className="radio-panel-loading">
|
||||
<div className="radio-spinner" />
|
||||
Sender werden geladen...
|
||||
</div>
|
||||
) : stations.length === 0 ? (
|
||||
<div className="radio-panel-empty">Keine Sender gefunden</div>
|
||||
) : (
|
||||
stations.map(s => (
|
||||
<div key={s.id} className={`radio-station ${currentPlaying?.stationId === s.id ? 'playing' : ''}`}>
|
||||
<div className="radio-station-info">
|
||||
<span className="radio-station-name">{s.title}</span>
|
||||
{currentPlaying?.stationId === s.id && (
|
||||
<span className="radio-station-live">
|
||||
<span className="radio-eq"><span /><span /><span /></span>
|
||||
Live
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="radio-station-btns">
|
||||
{currentPlaying?.stationId === s.id ? (
|
||||
<button className="radio-btn-stop" onClick={handleStop}>{'\u23F9'}</button>
|
||||
) : (
|
||||
<button
|
||||
className="radio-btn-play"
|
||||
onClick={() => handlePlay(s.id, s.title)}
|
||||
disabled={!selectedChannel || playingLoading}
|
||||
>{'\u25B6'}</button>
|
||||
)}
|
||||
<button
|
||||
className={`radio-btn-fav ${isFavorite(s.id) ? 'active' : ''}`}
|
||||
onClick={() => toggleFavorite(s.id, s.title)}
|
||||
>{isFavorite(s.id) ? '\u2605' : '\u2606'}</button>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── Places counter ── */}
|
||||
<div className="radio-counter">
|
||||
{'\u{1F4FB}'} {places.length.toLocaleString('de-DE')} Sender weltweit
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ── Connection Details Modal ── */}
|
||||
{showConnModal && voiceStats && (() => {
|
||||
const uptimeSec = voiceStats.connectedSince
|
||||
{showConnModal && (() => {
|
||||
const uptimeSec = voiceStats?.connectedSince
|
||||
? Math.floor((Date.now() - new Date(voiceStats.connectedSince).getTime()) / 1000)
|
||||
: 0;
|
||||
const h = Math.floor(uptimeSec / 3600);
|
||||
|
|
@ -657,30 +666,30 @@ export default function RadioTab({ data }: { data: any }) {
|
|||
<div className="radio-modal-stat">
|
||||
<span className="radio-modal-label">Voice Ping</span>
|
||||
<span className="radio-modal-value">
|
||||
<span className="radio-modal-dot" style={{ background: pingColor(voiceStats.voicePing) }} />
|
||||
{voiceStats.voicePing != null ? `${voiceStats.voicePing} ms` : '---'}
|
||||
<span className="radio-modal-dot" style={{ background: pingColor(voiceStats?.voicePing ?? null) }} />
|
||||
{voiceStats?.voicePing != null ? `${voiceStats.voicePing} ms` : '---'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="radio-modal-stat">
|
||||
<span className="radio-modal-label">Gateway Ping</span>
|
||||
<span className="radio-modal-value">
|
||||
<span className="radio-modal-dot" style={{ background: pingColor(voiceStats.gatewayPing) }} />
|
||||
{voiceStats.gatewayPing >= 0 ? `${voiceStats.gatewayPing} ms` : '---'}
|
||||
<span className="radio-modal-dot" style={{ background: pingColor(voiceStats?.gatewayPing ?? null) }} />
|
||||
{voiceStats && voiceStats.gatewayPing >= 0 ? `${voiceStats.gatewayPing} ms` : '---'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="radio-modal-stat">
|
||||
<span className="radio-modal-label">Status</span>
|
||||
<span className="radio-modal-value" style={{ color: voiceStats.status === 'ready' ? 'var(--success)' : '#f0a830' }}>
|
||||
{voiceStats.status === 'ready' ? 'Verbunden' : voiceStats.status}
|
||||
<span className="radio-modal-value" style={{ color: voiceStats?.status === 'ready' ? 'var(--success)' : '#f0a830' }}>
|
||||
{voiceStats?.status === 'ready' ? 'Verbunden' : voiceStats?.status ?? 'Warte auf Verbindung'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="radio-modal-stat">
|
||||
<span className="radio-modal-label">Kanal</span>
|
||||
<span className="radio-modal-value">{voiceStats.channelName || '---'}</span>
|
||||
<span className="radio-modal-value">{voiceStats?.channelName || '---'}</span>
|
||||
</div>
|
||||
<div className="radio-modal-stat">
|
||||
<span className="radio-modal-label">Verbunden seit</span>
|
||||
<span className="radio-modal-value">{uptimeStr}</span>
|
||||
<span className="radio-modal-value">{uptimeStr || '---'}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue