+ {children}
+ {empty &&
+ );
+}
diff --git a/src/components/nowPlaying/RadioView.tsx b/src/components/nowPlaying/RadioView.tsx
new file mode 100644
index 00000000..3d0fb047
--- /dev/null
+++ b/src/components/nowPlaying/RadioView.tsx
@@ -0,0 +1,102 @@
+import React, { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Cast, Clock, Radio, SkipForward, Users } from 'lucide-react';
+import type { useRadioMetadata } from '../../hooks/useRadioMetadata';
+import { usePlayerStore } from '../../store/playerStore';
+import { formatTime } from '../../utils/nowPlayingHelpers';
+
+type NonNullStoreField{emptyLabel}
}
+
+
+ );
+});
+
+export default RadioView;
diff --git a/src/pages/NowPlaying.tsx b/src/pages/NowPlaying.tsx
index fb0654a4..f63367a3 100644
--- a/src/pages/NowPlaying.tsx
+++ b/src/pages/NowPlaying.tsx
@@ -32,91 +32,15 @@ import {
// ─── Helpers ──────────────────────────────────────────────────────────────────
-function formatTime(s: number): string {
- if (!s || isNaN(s)) return '0:00';
- const m = Math.floor(s / 60);
- return `${m}:${Math.floor(s % 60).toString().padStart(2, '0')}`;
-}
-
-function formatCompact(n: number): string {
- if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(n >= 10_000_000 ? 0 : 1)}M`;
- if (n >= 1_000) return `${(n / 1_000).toFixed(n >= 10_000 ? 0 : 1)}K`;
- return String(n);
-}
-
-function formatTotalDuration(s: number): string {
- if (!s || isNaN(s)) return '—';
- const h = Math.floor(s / 3600);
- const m = Math.floor((s % 3600) / 60);
- const sec = Math.floor(s % 60);
- if (h > 0) return `${h}h ${m}m`;
- if (m > 0) return `${m}m ${sec}s`;
- return `${sec}s`;
-}
-
-function sanitizeHtml(html: string): string {
- const parser = new DOMParser();
- const doc = parser.parseFromString(html, 'text/html');
- doc.querySelectorAll('script, style, iframe, object, embed, form, input, button, select, base, meta, link').forEach(el => el.remove());
- doc.querySelectorAll('*').forEach(el => {
- Array.from(el.attributes).forEach(attr => {
- const name = attr.name.toLowerCase();
- const val = attr.value.toLowerCase().trim();
- if (name.startsWith('on') || (name === 'href' && (val.startsWith('javascript:') || val.startsWith('data:'))) || (name === 'src' && (val.startsWith('javascript:') || val.startsWith('data:')))) {
- el.removeAttribute(attr.name);
- }
- });
- });
- // Strip trailing "Read more on Last.fm" style links for cleaner clamped bios.
- return doc.body.innerHTML.replace(/]*>.*?<\/a>\.?\s*$/i, '').trim();
-}
-
-function isoToParts(iso: string): { month: string; day: string; weekday: string; time: string } | null {
- if (!iso) return null;
- const d = new Date(iso);
- if (Number.isNaN(d.getTime())) return null;
- return {
- month: d.toLocaleString(undefined, { month: 'short' }),
- day: String(d.getDate()),
- weekday: d.toLocaleString(undefined, { weekday: 'short' }),
- time: d.toLocaleString(undefined, { hour: '2-digit', minute: '2-digit' }),
- };
-}
-
-interface ContributorRow { role: string; names: string[]; }
-
-function buildContributorRows(song: SubsonicSong | null | undefined, mainArtistName: string): ContributorRow[] {
- if (!song?.contributors || song.contributors.length === 0) return [];
- const mainLower = mainArtistName.trim().toLowerCase();
- const rows = new Map
+
+
+ {radioMeta.nextSong && (
+
+
+
+
+ {currentRadio.name}
+ {radioMeta.currentTitle && (
+
+ {radioMeta.currentArtist && (<>{radioMeta.currentArtist}·)}
+ {radioMeta.currentTitle}
+ {radioMeta.currentAlbum && (<>·{radioMeta.currentAlbum})}
+
+ )}
+
+
+ {radioMeta.source === 'azuracast' && radioMeta.elapsed != null && radioMeta.duration != null && radioMeta.duration > 0 && (
+
+ {formatTime(radioMeta.elapsed)}
+
+ )}
+
+
+
+ {formatTime(radioMeta.duration)}
+
+ {resolvedCover
+ ? 
+ : radioMeta.currentArt
+ ? 
{ (e.target as HTMLImageElement).style.display = 'none'; }} />
+ :
+
+
+
+ )}
+
+ {radioMeta.history.length > 0 && (
+
+
+
+
+
+ {radioMeta.nextSong.art && (
+ 
{ (e.target as HTMLImageElement).style.display = 'none'; }} />
+ )}
+
+
+ {radioMeta.nextSong.title}
+ {radioMeta.nextSong.artist && {radioMeta.nextSong.artist}}
+
+
+
+ )}
+
+
+
+
+
+ {radioMeta.history.map((item, idx) => (
+
+
+ {item.song.art && (
+ 
{ (e.target as HTMLImageElement).style.display = 'none'; }} />
+ )}
+
+ {item.song.artist ? `${item.song.artist} — ${item.song.title}` : item.song.title}
+
+
+ ))}
+
- {children}
-
- );
-}
-
-// ─── Column (drop target via psy-drop + global mousemove) ────────────────────
-
-interface NpColumnProps {
- col: NpColumn;
- children: React.ReactNode;
- empty: boolean;
- emptyLabel: string;
- isDndActive: boolean;
- draggingCardId: NpCardId | null;
- onHover: (col: NpColumn, idx: number) => void;
- isOverHere: boolean;
-}
-
-function NpColumnEl({ col, children, empty, emptyLabel, isDndActive, draggingCardId, onHover, isOverHere }: NpColumnProps) {
- const ref = useRef
- {children}
- {empty &&
- );
-}
-
-type NonNullStoreField{emptyLabel}
}
-
-
- );
-});
-
// ─── Main Page ────────────────────────────────────────────────────────────────
export default function NowPlaying() {
diff --git a/src/utils/nowPlayingCache.ts b/src/utils/nowPlayingCache.ts
new file mode 100644
index 00000000..68e0f77f
--- /dev/null
+++ b/src/utils/nowPlayingCache.ts
@@ -0,0 +1,20 @@
+// Module-level TTL caches (shared across mounts).
+// Used by NowPlaying subcomponents to avoid hammering Subsonic / Last.fm /
+// Bandsintown on every track / artist change.
+
+export const CACHE_TTL_MS = 5 * 60 * 1000;
+
+interface CacheEntry
-
-
- {radioMeta.nextSong && (
-
-
-
-
- {currentRadio.name}
- {radioMeta.currentTitle && (
-
- {radioMeta.currentArtist && (<>{radioMeta.currentArtist}·)}
- {radioMeta.currentTitle}
- {radioMeta.currentAlbum && (<>·{radioMeta.currentAlbum})}
-
- )}
-
-
- {radioMeta.source === 'azuracast' && radioMeta.elapsed != null && radioMeta.duration != null && radioMeta.duration > 0 && (
-
- {formatTime(radioMeta.elapsed)}
-
- )}
-
-
-
- {formatTime(radioMeta.duration)}
-
- {resolvedCover
- ?
- : radioMeta.currentArt
- ? { (e.target as HTMLImageElement).style.display = 'none'; }} />
- :
-
-
-
- )}
-
- {radioMeta.history.length > 0 && (
-
-
-
-
-
- {radioMeta.nextSong.art && (
- { (e.target as HTMLImageElement).style.display = 'none'; }} />
- )}
-
-
- {radioMeta.nextSong.title}
- {radioMeta.nextSong.artist && {radioMeta.nextSong.artist}}
-
-
-
- )}
-
-
-
-
-
- {radioMeta.history.map((item, idx) => (
-
-
- {item.song.art && (
- { (e.target as HTMLImageElement).style.display = 'none'; }} />
- )}
-
- {item.song.artist ? `${item.song.artist} — ${item.song.title}` : item.song.title}
-
-
- ))}
-