app/static/app.js

@@ -46,7 +46,10 @@ function render() {
   for (const zone of zones) {
     const card = el('article', 'zone');
     const name = el('h2', null, zone.name);
-    const track = el('p', 'track', zone.error || (zone.track.title ? `${zone.track.title}${zone.track.artist ? ' · ' + zone.track.artist : ''}` : 'Kein aktueller Titel'));
+    const trackText = zone.state === 'PLAYING' && zone.track.title
+      ? `${zone.track.title}${zone.track.artist ? ' · ' + zone.track.artist : ''}`
+      : '';
+    const track = el('p', 'track', zone.error || trackText);
     const controls = el('div', 'controls');
     for (const [icon, label, action] of [['▶','Play','play'], ['Ⅱ','Pause','pause'], ['■','Stopp','stop']]) {
       const button = el('button', action === 'play' ? 'stacked-play' : null);

tests/test_app.py

@@ -257,3 +257,5 @@ def test_zone_cards_render_name_directly_without_transport_status():
     assert "zone-head" not in source
     assert ".zone-head" not in styles
     assert "card.append(name, track, controls, volume, eq, zoneActions)" in source
+    assert "Kein aktueller Titel" not in source
+    assert "zone.state === 'PLAYING' && zone.track.title" in source