feat: Move delta value below icon and add label

Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>
This commit is contained in:
Chris Frankland-Wright 2025-08-08 01:17:38 +01:00
parent 982aad3ec9
commit 02487bda97
3 changed files with 9 additions and 7 deletions

View file

@ -43,6 +43,7 @@
<span id="jitter-status"></span>
<span id="delta-status"></span>
</div>
<p id="delta-text">Delta Value: -- ms (-- frames)</p>
</div>
<!-- Network Interfaces -->

View file

@ -18,6 +18,7 @@ document.addEventListener('DOMContentLoaded', () => {
syncStatus: document.getElementById('sync-status'),
deltaStatus: document.getElementById('delta-status'),
jitterStatus: document.getElementById('jitter-status'),
deltaText: document.getElementById('delta-text'),
interfaces: document.getElementById('interfaces'),
logs: document.getElementById('logs'),
};
@ -134,8 +135,10 @@ document.addEventListener('DOMContentLoaded', () => {
deltaCategory = 'bad';
}
const deltaIconInfo = iconMap.deltaStatus[deltaCategory];
const deltaText = `${data.timecode_delta_ms} ms (${data.timecode_delta_frames} frames)`;
statusElements.deltaStatus.innerHTML = `<img src="${deltaIconInfo.src}" class="status-icon" alt="" title="${deltaIconInfo.tooltip}"><span>${deltaText}</span>`;
statusElements.deltaStatus.innerHTML = `<img src="${deltaIconInfo.src}" class="status-icon" alt="" title="${deltaIconInfo.tooltip}">`;
const deltaTextValue = `${data.timecode_delta_ms} ms (${data.timecode_delta_frames} frames)`;
statusElements.deltaText.textContent = `Delta Value: ${deltaTextValue}`;
const jitterStatus = data.jitter_status || 'UNKNOWN';
const jitterIconInfo = iconMap.jitterStatus[jitterStatus] || iconMap.jitterStatus.default;

View file

@ -122,13 +122,11 @@ button:hover {
margin: 10px 0;
}
#delta-status {
display: inline-flex;
align-items: center;
gap: 0.5em;
#delta-text {
text-align: center;
}
#ltc-status, #ntp-active, #sync-status, #jitter-status, #frame-rate, #lock-ratio {
#ltc-status, #ntp-active, #sync-status, #jitter-status, #frame-rate, #lock-ratio, #delta-status {
display: flex;
justify-content: center;
align-items: center;