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:
@@ -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">−</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>
|
||||
@@ -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" }
|
||||
]
|
||||
}
|
||||
Reference in New Issue
Block a user