klevze/RadioPlayerWeb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add Radio Browser station importer

Browse Source
This commit is contained in:
Gregor Klevže
2026-04-26 14:33:55 +02:00
parent 7e256a669e
commit 972164bba7
14 changed files with 36414 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
src/App.jsx
View File

@@ -115,7 +115,6 @@ function HeaderControls() {
</button>
<button id="cast-btn" className="icon-btn cast-btn" title="Cast to device" aria-label="Cast to device" type="button">
<CastIcon />
<span>Cast</span>
</button>
</div>
<div className="header-close" />
@@ -325,20 +324,74 @@ function EditorOverlay() {
);
}
function StationLibrary() {
return (
<aside id="station-library" className="station-library" aria-label="Station library">
<div className="library-top">
<div>
<p className="library-eyebrow">Browse</p>
<h2>Stations</h2>
</div>
<button id="station-library-close" className="icon-btn library-close" aria-label="Close station library" type="button">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"
strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
<path d="M18 6 6 18" />
<path d="m6 6 12 12" />
</svg>
</button>
</div>
<div className="library-filter-grid">
<label className="library-search" htmlFor="station-search-input">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"
strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
<circle cx="11" cy="11" r="8" />
<path d="m21 21-4.3-4.3" />
</svg>
<input id="station-search-input" type="search" placeholder="Search stations" autoComplete="off" />
</label>
<label className="library-select" htmlFor="station-country-filter">
<span className="library-select-label">Country</span>
<select id="station-country-filter" defaultValue="all">
<option value="all">All countries</option>
</select>
</label>
</div>
<div className="library-tabs" role="tablist" aria-label="Station filters">
<button className="library-tab active" data-station-tab="all" type="button">All</button>
<button className="library-tab" data-station-tab="favourites" type="button">Favourites</button>
<button className="library-tab" data-station-tab="recent" type="button">Recent</button>
<button className="library-tab" data-station-tab="categories" type="button">Categories</button>
</div>
<div id="station-category-list" className="category-list" aria-label="Categories" />
<div id="station-library-summary" className="library-summary" aria-live="polite">Loading stations...</div>
<ul id="station-library-list" className="library-list" />
</aside>
);
}
export default function App() {
return (
<div className="app-container">
<main className="glass-card">
<RetroStarfield />
<HeaderControls />
<ArtworkPanel />
<TrackInfo />
<ProgressBar />
<PlayerControls />
<VolumeControl />
<StationsOverlay />
<EditorOverlay />
</main>
<div className="player-layout">
<div className="sidebar-wrap">
<StationLibrary />
</div>
<main className="glass-card">
<RetroStarfield />
<HeaderControls />
<ArtworkPanel />
<TrackInfo />
<ProgressBar />
<PlayerControls />
<VolumeControl />
<StationsOverlay />
<EditorOverlay />
</main>
</div>
</div>
);
}