diff --git a/popup.css b/popup.css index 5ff046e..d9aa803 100644 --- a/popup.css +++ b/popup.css @@ -215,3 +215,18 @@ input[type="range"]::-webkit-slider-thumb:active { transform: scale(1.18); } padding-top: 2px; } .note.error { color: var(--danger); } + +/* ---------- Credits ---------- */ +.credits { + font-family: 'DM Mono', monospace; + font-size: 10px; + color: var(--text-dim); + text-align: center; + letter-spacing: .3px; + padding-top: 2px; + opacity: .85; +} +.credits .heart { + color: var(--danger); + margin-left: 1px; +} diff --git a/popup.html b/popup.html index 792767f..1272bf9 100644 --- a/popup.html +++ b/popup.html @@ -33,7 +33,7 @@
- +
0100300600
@@ -87,6 +87,11 @@

Über 100 % wird der Tab-Ton verstärkt.

+ + +
diff --git a/popup.js b/popup.js index 9e057ec..8d87966 100644 --- a/popup.js +++ b/popup.js @@ -13,8 +13,9 @@ const btnDown = document.getElementById("btnDown"); const btnMute = document.getElementById("btnMute"); const presets = document.querySelectorAll(".preset"); -const STEP = 10; // Schrittweite in % +const STEP = 10; // Standard-Schrittweite in % const MAX = 600; +const FINE_LIMIT = 10; // Unterhalb dieses Werts wird in 1er-Schritten gesteuert let currentTab = null; let lastBeforeMute = 100; // Wert vor dem Stummschalten @@ -63,9 +64,26 @@ function applyUI(value) { }); } +// ---- Wert an adaptives Raster anpassen ---- +// Oberhalb von FINE_LIMIT in 10er-Schritten, darunter in 1er-Schritten. +function snapStep(value) { + value = Math.max(0, Math.min(MAX, Math.round(value))); + return value > FINE_LIMIT ? Math.round(value / STEP) * STEP : value; +} + +// Adaptive Schrittweite für +/- Buttons und Pfeiltasten. +// Im Feinbereich (<= FINE_LIMIT) wird in 1er-Schritten gearbeitet, +// sodass die Steuerung auch am Übergang bei 10 % sanft verläuft. +function stepUpFrom(value) { + return value < FINE_LIMIT ? 1 : STEP; +} +function stepDownFrom(value) { + return value <= FINE_LIMIT ? 1 : STEP; +} + // ---- Lautstärke setzen + an Worker senden ---- function setVolume(value) { - value = Math.max(0, Math.min(MAX, value)); + value = snapStep(Math.max(0, Math.min(MAX, value))); applyUI(value); if (!currentTab) return; @@ -107,17 +125,20 @@ function setVolume(value) { // ---- Events ---- slider.addEventListener("input", () => { - applyUI(Number(slider.value)); + const raw = Number(slider.value); + const snapped = snapStep(raw); + if (snapped !== raw) slider.value = snapped; // Raster im Slider sichtbar halten + applyUI(snapped); }); slider.addEventListener("change", () => { setVolume(Number(slider.value)); }); btnUp.addEventListener("click", () => - setVolume(Number(slider.value) + STEP) + setVolume(Number(slider.value) + stepUpFrom(Number(slider.value))) ); btnDown.addEventListener("click", () => - setVolume(Number(slider.value) - STEP) + setVolume(Number(slider.value) - stepDownFrom(Number(slider.value))) ); btnMute.addEventListener("click", () => { @@ -136,8 +157,9 @@ presets.forEach((p) => { // Tastatur: Pfeile hoch/runter document.addEventListener("keydown", (e) => { - if (e.key === "ArrowUp") { e.preventDefault(); setVolume(Number(slider.value) + STEP); } - if (e.key === "ArrowDown") { e.preventDefault(); setVolume(Number(slider.value) - STEP); } + const v = Number(slider.value); + if (e.key === "ArrowUp") { e.preventDefault(); setVolume(v + stepUpFrom(v)); } + if (e.key === "ArrowDown") { e.preventDefault(); setVolume(v - stepDownFrom(v)); } }); init();