git_admin/CoRE.Vision
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

settings: restore color-coding for quality presets, pin them right

Browse Source 
The SOFT/MEDIUM/HARD selector lost its color coding when it became a
dropdown. Re-apply colors (SOFT red, MEDIUM yellow, HARD white) to the
options and to the select's shown value, and right-align the "Готовый
профиль" label (margin-left:auto) so it clearly sits on the right.

VERSION -> 0.0.122.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
core
2026-06-01 17:36:21 +05:00
parent 650a531f21
commit 90e216e30b
3 changed files with 9 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
VERSION
+1 -1
View File
@@ -1 +1 @@
0.0.121
0.0.122
frontend/static/app.js
+7 -3
View File
@@ -20,6 +20,7 @@ const TR_PRESETS = {
MEDIUM: { codec: "h264", profile: "baseline", bitrate: "8000k", keyint: 2, preset: "ultrafast" },
HARD: { codec: "h264", profile: "main", bitrate: "16000k", keyint: 1, preset: "superfast" },
};
const TR_PRESET_COLORS = { SOFT: "#e03131", MEDIUM: "#e9c46a", HARD: "#ffffff" }; // цветомаркировка профилей
function matchPreset(pr) { // имя пресета, совпадающего с параметрами
return Object.keys(TR_PRESETS).find((k) => {
const p = TR_PRESETS[k];
@@ -1479,9 +1480,10 @@ const Settings = {
`<option value="${v}"${String(pr[f]) === String(v) ? " selected" : ""}>${t}</option>`).join("") + `</select>`;
// «Готовый профиль» SOFT/MEDIUM/HARD — выпадающее меню; выставляет все параметры разом
const qmatch = matchPreset(pr);
const qpresetSel = `<select class="qpreset">` +
const qcol = (v) => TR_PRESET_COLORS[v] ? ` style="color:${TR_PRESET_COLORS[v]}"` : "";
const qpresetSel = `<select class="qpreset"${qcol(qmatch)}>` +
[["", "— свой —"]].concat(Object.keys(TR_PRESETS).map((k) => [k, k])).map(([v, t]) =>
`<option value="${v}"${v === qmatch ? " selected" : ""}>${t}</option>`).join("") + `</select>`;
`<option value="${v}"${v === qmatch ? " selected" : ""}${qcol(v)}>${t}</option>`).join("") + `</select>`;
return (
`<label>Кодек${sel("codec", [["h264", "H.264"], ["vp9", "VP9"]])}</label>` +
`<label>Профиль H.264${sel("profile", [["baseline", "baseline"], ["main", "main"], ["high", "high"]])}</label>` +
@@ -1490,7 +1492,7 @@ const Settings = {
`<label>QP (квантизатор)<input type="number" data-f="qp" min="0" max="51" value="${pr.qp}"></label>` +
`<label>Интервал ключевых кадров${sel("keyint", [[1, "1 секунда"], [2, "2 секунды"], [5, "5 секунд"]])}</label>` +
`<label>Пресет (Preset)${sel("preset", [["ultrafast", "Ultrafast"], ["superfast", "Superfast"], ["veryfast", "Veryfast"], ["faster", "Faster"], ["fast", "Fast"], ["medium", "Medium"]])}</label>` +
`<label>Готовый профиль${qpresetSel}</label>`
`<label class="qpreset-lbl">Готовый профиль${qpresetSel}</label>`
);
},
@@ -1528,8 +1530,10 @@ const Settings = {
const syncQuality = () => {
qpreset.value = matchPreset({ codec: codec.value, profile: prof.value, bitrate: brSel.value,
keyint: row.querySelector('[data-f="keyint"]').value, preset: row.querySelector('[data-f="preset"]').value });
qpreset.style.color = TR_PRESET_COLORS[qpreset.value] || "";
};
qpreset.onchange = () => {
qpreset.style.color = TR_PRESET_COLORS[qpreset.value] || "";
const p = TR_PRESETS[qpreset.value];
if (!p) return;
const put = (f, v) => { const s = row.querySelector(`[data-f="${f}"]`); if (s) s.value = String(v); };
frontend/static/style.css
+1
View File
@@ -345,6 +345,7 @@ input[type="date"], input[type="number"], select {
.tr-row select { display: block; }
.tr-row input[type="number"] { display: block; width: 80px; }
.tr-row select:disabled, .tr-row input:disabled { opacity: .4; cursor: not-allowed; }
.tr-row label.qpreset-lbl { margin-left: auto; } /* «Готовый профиль» — прижат к правому краю */
/* общие пресеты перекодирования (SOFT / MEDIUM / HARD) */
.tr-presets { flex-basis: 100%; display: flex; align-items: center; gap: 8px; padding-left: 28px; }
.tr-preset {