danvics/soulsync
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

video downloads: quality profile resolution/source rows reuse the hybrid-source-item styling

Browse source 
Consistency — the Resolution order and Preferred-source order lists now use the exact
same .hybrid-source-item markup/CSS (card + arrows + priority number + pill toggle) as
the Download Source hybrid list, instead of the bespoke .vq-row styling. Resolution
keeps its enable toggle; source is order-only (no toggle), no brand icon (they're not
branded sources). Removed the now-dead .vq-row/.vq-arrow/.vq-toggle/.vq-rows CSS.

Pure UI; data-vq-* hooks preserved so the existing delegation/handlers are unchanged.
This commit is contained in:
BoulderBadgeDad 2026-06-19 08:13:24 -07:00
parent 16ba035330
commit 975f81f476
3 changed files with 17 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
webui/index.html
View file

@ -6114,11 +6114,11 @@
</div>
<div class="vq-block">
<div class="vq-label">Resolutions to accept <span class="vq-hint">toggle on what you want · order = preference (best first)</span></div>
<div class="vq-rows" id="vq-resolution-rows"></div>
<div class="hybrid-source-list" id="vq-resolution-rows"></div>
</div>
<div class="vq-block">
<div class="vq-label">Preferred source <span class="vq-hint">tie-breaker when two releases match the same resolution</span></div>
<div class="vq-rows" id="vq-source-rows"></div>
<div class="hybrid-source-list" id="vq-source-rows"></div>
</div>
<div class="vq-grid">
<div class="vq-block" style="margin:0;">

26
webui/static/video/video-settings.js
View file

@ -452,27 +452,27 @@
});
resHost.innerHTML = keys.map(function (k, i) {
var r = p.resolutions[k];
return '<div class="vq-row' + (r.enabled ? '' : ' vq-row--off') + '">' +
'<span class="vq-arrows">' +
'<button type="button" class="vq-arrow" data-vq-res-move="' + k + '" data-dir="-1"' + (i === 0 ? ' disabled' : '') + '>▲</button>' +
'<button type="button" class="vq-arrow" data-vq-res-move="' + k + '" data-dir="1"' + (i === keys.length - 1 ? ' disabled' : '') + '>▼</button>' +
return '<div class="hybrid-source-item' + (r.enabled ? '' : ' disabled') + '">' +
'<span class="hybrid-source-arrows">' +
'<button type="button" class="hybrid-arrow-btn" data-vq-res-move="' + k + '" data-dir="-1"' + (i === 0 ? ' disabled' : '') + ' title="Move up">▲</button>' +
'<button type="button" class="hybrid-arrow-btn" data-vq-res-move="' + k + '" data-dir="1"' + (i === keys.length - 1 ? ' disabled' : '') + ' title="Move down">▼</button>' +
'</span>' +
'<span class="vq-row-name">' + (RES_LABEL[k] || k) + '</span>' +
'<span class="vq-row-prio">' + (i + 1) + '</span>' +
'<label class="vq-toggle"><input type="checkbox" data-vq-res-toggle="' + k + '"' + (r.enabled ? ' checked' : '') + '><span class="vq-toggle-track"></span></label>' +
'<span class="hybrid-source-name">' + (RES_LABEL[k] || k) + '</span>' +
'<span class="hybrid-source-priority">' + (i + 1) + '</span>' +
'<label class="hybrid-source-toggle"><input type="checkbox" data-vq-res-toggle="' + k + '"' + (r.enabled ? ' checked' : '') + '><span class="toggle-track"></span></label>' +
'</div>';
}).join('');
}
var srcHost = document.getElementById('vq-source-rows');
if (srcHost) {
srcHost.innerHTML = p.source_priority.map(function (s, i) {
return '<div class="vq-row">' +
'<span class="vq-arrows">' +
'<button type="button" class="vq-arrow" data-vq-src-move="' + s + '" data-dir="-1"' + (i === 0 ? ' disabled' : '') + '>▲</button>' +
'<button type="button" class="vq-arrow" data-vq-src-move="' + s + '" data-dir="1"' + (i === p.source_priority.length - 1 ? ' disabled' : '') + '>▼</button>' +
return '<div class="hybrid-source-item">' +
'<span class="hybrid-source-arrows">' +
'<button type="button" class="hybrid-arrow-btn" data-vq-src-move="' + s + '" data-dir="-1"' + (i === 0 ? ' disabled' : '') + ' title="Move up">▲</button>' +
'<button type="button" class="hybrid-arrow-btn" data-vq-src-move="' + s + '" data-dir="1"' + (i === p.source_priority.length - 1 ? ' disabled' : '') + ' title="Move down">▼</button>' +
'</span>' +
'<span class="vq-row-name">' + (SRC_LABEL[s] || s) + '</span>' +
'<span class="vq-row-prio">' + (i + 1) + '</span>' +
'<span class="hybrid-source-name">' + (SRC_LABEL[s] || s) + '</span>' +
'<span class="hybrid-source-priority">' + (i + 1) + '</span>' +
'</div>';
}).join('');
}

25
webui/static/video/video-side.css
View file

@ -2969,29 +2969,8 @@ body[data-side="video"] #soulsync-toggle { display: none; }
color: rgba(255,255,255,0.65); margin-bottom: 9px; display: flex; align-items: center; gap: 10px; }
.vq-hint { font-size: 11px; font-weight: 500; text-transform: none; letter-spacing: 0;
color: rgba(255,255,255,0.4); }
.vq-rows { display: flex; flex-direction: column; gap: 7px; }
.vq-row { display: flex; align-items: center; gap: 12px; padding: 9px 13px; border-radius: 11px;
background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.07);
transition: background 0.15s, opacity 0.15s; }
.vq-row--off { opacity: 0.5; }
.vq-arrows { display: inline-flex; flex-direction: column; gap: 1px; }
.vq-arrow { width: 22px; height: 15px; display: grid; place-items: center; cursor: pointer;
background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 4px;
color: rgba(255,255,255,0.6); font-size: 8px; line-height: 1; padding: 0; transition: all 0.12s; }
.vq-arrow:hover:not(:disabled) { background: rgba(var(--accent-rgb),0.25); color: #fff; }
.vq-arrow:disabled { opacity: 0.25; cursor: default; }
.vq-row-name { flex: 1; font-size: 14px; font-weight: 600; color: #fff; }
.vq-row-prio { font: 700 11px/1 'JetBrains Mono', ui-monospace, monospace; color: rgba(255,255,255,0.4);
min-width: 18px; text-align: center; }
/* pill toggle */
.vq-toggle { position: relative; display: inline-block; width: 40px; height: 22px; flex: 0 0 40px; cursor: pointer; }
.vq-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.vq-toggle-track { position: absolute; inset: 0; border-radius: 999px; background: rgba(255,255,255,0.13);
transition: background 0.18s; }
.vq-toggle-track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
border-radius: 50%; background: #fff; transition: transform 0.18s; }
.vq-toggle input:checked + .vq-toggle-track { background: rgb(var(--accent-rgb)); }
.vq-toggle input:checked + .vq-toggle-track::after { transform: translateX(18px); }
/* Resolution + source rows reuse music's .hybrid-source-item styling (set in the
shared style.css) for parity with the Download Source list — no custom row CSS. */
/* codec + hdr row */
.vq-grid { display: flex; align-items: flex-end; gap: 28px; flex-wrap: wrap; margin: 16px 0; }
.vq-seg { display: inline-flex; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);