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:
+6
-6
@@ -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 ===== */
|
||||
|
||||
|
||||
Reference in New Issue
Block a user