fix: preserve Radio tab play state across tab switches
All tab components are now always mounted and hidden via CSS (display: none/contents) instead of conditionally rendered. This prevents React state from being destroyed on tab switch, so nowPlaying, SSE handlers, and stop buttons keep working. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
09396dafce
commit
056024d753
1 changed files with 14 additions and 8 deletions
|
|
@ -74,7 +74,6 @@ export default function App() {
|
||||||
return () => { es?.close(); clearTimeout(retryTimer); };
|
return () => { es?.close(); clearTimeout(retryTimer); };
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const TabComponent = activeTab ? tabComponents[activeTab] : null;
|
|
||||||
const version = (import.meta as any).env?.VITE_APP_VERSION ?? '1.0.0';
|
const version = (import.meta as any).env?.VITE_APP_VERSION ?? '1.0.0';
|
||||||
|
|
||||||
// Tab icon mapping
|
// Tab icon mapping
|
||||||
|
|
@ -123,14 +122,21 @@ export default function App() {
|
||||||
<h2>Keine Plugins geladen</h2>
|
<h2>Keine Plugins geladen</h2>
|
||||||
<p>Plugins werden im Server konfiguriert.</p>
|
<p>Plugins werden im Server konfiguriert.</p>
|
||||||
</div>
|
</div>
|
||||||
) : TabComponent ? (
|
|
||||||
<TabComponent data={pluginData[activeTab] || {}} />
|
|
||||||
) : (
|
) : (
|
||||||
<div className="hub-empty">
|
/* Render ALL tabs, hide inactive ones with CSS to preserve state */
|
||||||
<span className="hub-empty-icon">{tabIcons[activeTab] ?? '\u{1F4E6}'}</span>
|
plugins.map(p => {
|
||||||
<h2>{activeTab}</h2>
|
const Comp = tabComponents[p.name];
|
||||||
<p>Plugin-UI wird geladen...</p>
|
if (!Comp) return null;
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={p.name}
|
||||||
|
className="hub-tab-panel"
|
||||||
|
style={{ display: activeTab === p.name ? 'contents' : 'none' }}
|
||||||
|
>
|
||||||
|
<Comp data={pluginData[p.name] || {}} />
|
||||||
</div>
|
</div>
|
||||||
|
);
|
||||||
|
})
|
||||||
)}
|
)}
|
||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue