Web UI: sticky save bar; drop the Force source dropdown

Save/Revert/Reboot and the status message stay at the bottom of the window
while the settings form is in view. The runtime source override stays in
the API (listed in the page's API box) but is no longer on the page, where
it duplicated the saved source mode.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
2026-09-25 23:20:41 +10:00
parent e5c3c0ad8a
commit faf427c897
+6 -6
View File
@@ -20,13 +20,14 @@ input:not([type=checkbox]),select{width:14em;max-width:100%}
textarea{width:100%;height:14em;font:12px monospace}
table td:first-child{padding-right:1em;opacity:.7}
pre{overflow-x:auto}
#msg{min-height:1.4em}
#msg{margin-left:1em}
/* Save bar: stays at the bottom of the window while the settings form is in view */
.bar{position:sticky;bottom:0;background:Canvas;padding:8px 0;border-top:1px solid color-mix(in srgb,CanvasText 20%,transparent)}
.ok{color:#2a2}.warn{color:#d80}.bad{color:#e33}
</style>
</head>
<body>
<h2 id="title">AES67 device</h2>
<p id="msg"></p>
<fieldset><legend>Status</legend><table id="status"></table></fieldset>
<fieldset><legend>PTP status</legend><table id="ptpstat"></table>
@@ -44,9 +45,6 @@ pre{overflow-x:auto}
<small id="postime"></small></label>
<label><span>Volume</span><input id="vol" type="range" min="0" max="100"
onchange="ctl('volume',{value:+this.value})"></label>
<label><span>Force source</span><select id="force" onchange="ctl('source',{source:this.value})">
<option value="config">As configured</option><option value="spotify">Spotify</option>
<option value="hls">HLS</option><option value="off">Off</option></select></label>
<details><summary>API</summary><pre>
GET /api/player state, track, position, volume
POST /api/player/play|pause|toggle|stop|next|prev
@@ -188,9 +186,12 @@ e.g. curl -X POST http://p4-aes67.local/api/player/next
<button type="button" onclick="api('POST','/api/log/test').then(()=>msg.textContent='Test message sent.',()=>{})">Send test message</button>
</fieldset>
<div class="bar">
<button>Save</button>
<button type="button" onclick="load()">Revert</button>
<button type="button" onclick="confirm('Reboot device?')&&api('POST','/api/reboot')">Reboot</button>
<span id="msg"></span>
</div>
</form>
<fieldset><legend>SDP</legend>
@@ -261,7 +262,6 @@ function showPlayer(p) {
`[${p.source}] ${p.state}: ${[p.artist, p.title].filter(Boolean).join(' – ') || '–'}`;
const v = document.getElementById('vol');
if (document.activeElement !== v) v.value = p.volume;
document.getElementById('force').value = p.forced || 'config';
}
/* ===== PROJECT END ===== */