Merge the bridge and a home-screen interface into one app

The HEOS app is unpleasant to use for the four things that actually get
done in this house, so this is those four things on one screen: volume
for the Home 400 and the Living Room pair, joining either to the AVR,
splitting them off again, and picking the AVR's input.

The bridge's logic moves in mostly intact, split into a HEOS client, an
AVR client and a controller, with two grouping bugs fixed on the way:

  * Merging a room into the AVR sent only the pair's leader pid, which
    left the second Home 200 behind. Group targets now expand to every
    member pid, and unmerging re-forms the pair rather than leaving two
    lone speakers. The members are learned while the pair is visible and
    remembered in members.json so a restart can still rebuild it.

  * Volume for the pair used its gid, which stops existing the moment it
    joins the AVR's group. It now falls back to the member players.

Both sockets are kept open rather than reconnecting per command, which
is what made every button press feel slow; the AVR connection doubles as
a listener, so input changes made with the physical remote show up too.

The original query-string endpoints still answer, so anything already
pointed at the bridge keeps working.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
2026-09-14 21:15:43 +02:00
co-authored by Claude Opus 5
parent 86fdf9a4d3
commit 375bcfdd76
20 changed files with 2428 additions and 490 deletions
+80
View File
@@ -0,0 +1,80 @@
<!doctype html>
<html lang="en" data-step="{{ step }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, user-scalable=no">
<title>{{ app_name }}</title>
<!-- Added to the iOS home screen, this opens full-screen with no browser chrome. -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="{{ app_name }}">
<meta name="theme-color" content="#0a0d14">
<link rel="manifest" href="{{ url_for('manifest') }}">
<link rel="apple-touch-icon" href="{{ url_for('static', filename='icon-180.png') }}">
<link rel="icon" href="{{ url_for('static', filename='icon-180.png') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='panel.css') }}">
</head>
<body>
<div class="app">
<header class="top">
<h1>{{ app_name }}</h1>
<button class="icon-button" data-role="refresh" aria-label="Refresh">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20 12a8 8 0 1 1-2.34-5.66M20 4v5h-5"/></svg>
</button>
</header>
<section class="card source">
<div class="card-head">
<h2>{{ host.label }}</h2>
<span class="pill" data-role="avr-status">offline</span>
</div>
<button class="source-button" data-role="input-button">
<span class="eyebrow">Input</span>
<span class="value" data-role="input-name"></span>
<svg class="chevron" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg>
</button>
</section>
{% for room in rooms %}
<section class="card room" data-room="{{ room.key }}">
<div class="card-head">
<h2>{{ room.label }}</h2>
<span class="level"><b data-role="level"></b></span>
</div>
<div class="volume">
<button class="step" data-delta="-1" aria-label="{{ room.label }}: volume down">&minus;</button>
<div class="meter"><i data-role="bar"></i></div>
<button class="step" data-delta="1" aria-label="{{ room.label }}: volume up">+</button>
</div>
<button class="toggle" data-role="group" aria-pressed="false">
<span class="dot" aria-hidden="true"></span>
<span data-role="group-label">Separate</span>
</button>
</section>
{% endfor %}
<button class="wide ghost" data-role="split-all">Separate everything</button>
<p class="foot" data-role="foot"></p>
</div>
<div class="sheet-wrap" data-role="sheet" hidden>
<div class="scrim" data-role="scrim"></div>
<div class="sheet" role="dialog" aria-modal="true" aria-label="{{ host.label }} input">
<div class="grabber" aria-hidden="true"></div>
<h3>{{ host.label }} input</h3>
<div class="options" data-role="options"></div>
<button class="wide ghost" data-role="sheet-close">Cancel</button>
</div>
</div>
<div class="toast" data-role="toast" hidden></div>
<script src="{{ url_for('static', filename='app.js') }}"></script>
</body>
</html>
+12
View File
@@ -0,0 +1,12 @@
{
"name": "{{ app_name }}",
"short_name": "{{ app_name }}",
"start_url": "/",
"display": "standalone",
"background_color": "#0a0d14",
"theme_color": "#0a0d14",
"icons": [
{ "src": "/static/icon-180.png", "sizes": "180x180", "type": "image/png" },
{ "src": "/static/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any maskable" }
]
}