volume-booster/popup.js

// ============================================================
//  Volume Booster — Popup Logic
// ============================================================

const slider      = document.getElementById("slider");
const readout     = document.getElementById("readoutValue");
const readoutBox  = document.querySelector(".readout");
const badge       = document.getElementById("statusBadge");
const siteLabel   = document.getElementById("siteLabel");
const note        = document.getElementById("note");
const btnUp       = document.getElementById("btnUp");
const btnDown     = document.getElementById("btnDown");
const btnMute     = document.getElementById("btnMute");
const presets     = document.querySelectorAll(".preset");

const STEP = 10;          // Schrittweite in %
const MAX  = 600;
let currentTab = null;
let lastBeforeMute = 100; // Wert vor dem Stummschalten

// ---- Tab ermitteln ----
async function init() {
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  currentTab = tab;

  if (tab && tab.url) {
    try {
      siteLabel.textContent = new URL(tab.url).hostname;
    } catch {
      siteLabel.textContent = "aktiver Tab";
    }
  }

  // Gespeicherten Wert für diesen Tab laden
  const key = "vol_" + tab.id;
  const stored = await chrome.storage.session.get(key);
  const value = stored[key] != null ? stored[key] : 100;

  applyUI(value);
  // Falls vorher schon ein Boost lief: Zustand vom Worker holen
  chrome.runtime.sendMessage({ type: "GET_STATE", tabId: tab.id }, (res) => {
    if (res && res.ok && res.boosting) {
      applyUI(Math.round(res.value * 100));
    }
  });
}

// ---- UI aktualisieren ----
function applyUI(value) {
  value = Math.max(0, Math.min(MAX, value));
  slider.value = value;
  readout.textContent = value;
  badge.textContent = value + "%";

  const boosting = value > 100;
  readoutBox.classList.toggle("boosting", boosting);
  badge.classList.toggle("boosting", boosting);

  btnMute.classList.toggle("active", value === 0);

  presets.forEach((p) => {
    p.classList.toggle("active", Number(p.dataset.v) === value);
  });
}

// ---- Lautstärke setzen + an Worker senden ----
function setVolume(value) {
  value = Math.max(0, Math.min(MAX, value));
  applyUI(value);

  if (!currentTab) return;
  const key = "vol_" + currentTab.id;
  chrome.storage.session.set({ [key]: value });

  chrome.runtime.sendMessage(
    { type: "SET_VOLUME", tabId: currentTab.id, value: value / 100 },
    (res) => {
      if (res && res.ok) {
        note.classList.remove("error");
        note.textContent =
          value > 100
            ? "Ton wird verstärkt — bei Verzerrung etwas zurückdrehen."
            : value === 0
            ? "Tab ist stummgeschaltet."
            : "Normale Lautstärke (kein Boost aktiv).";
      } else {
        note.classList.add("error");
        const err = ((res && res.error) || "").toLowerCase();
        if (err.includes("cannot be captured") || err.includes("invalid tab")) {
          note.textContent =
            "Dieser Tab kann nicht verstärkt werden (z. B. chrome:// oder Web Store).";
        } else if (err.includes("activetab") || err.includes("permission")) {
          note.textContent =
            "Keine Berechtigung — Popup einmal schließen und neu öffnen.";
        } else if (!res) {
          note.textContent =
            "Keine Antwort — Extension auf chrome://extensions neu laden.";
        } else {
          note.textContent = "Fehler beim Aktivieren — Seite ggf. neu laden.";
        }
        // Slider auf 100 zurück, da kein Boost aktiv ist
        applyUI(100);
      }
    }
  );
}

// ---- Events ----
slider.addEventListener("input", () => {
  applyUI(Number(slider.value));
});
slider.addEventListener("change", () => {
  setVolume(Number(slider.value));
});

btnUp.addEventListener("click", () =>
  setVolume(Number(slider.value) + STEP)
);
btnDown.addEventListener("click", () =>
  setVolume(Number(slider.value) - STEP)
);

btnMute.addEventListener("click", () => {
  const v = Number(slider.value);
  if (v === 0) {
    setVolume(lastBeforeMute || 100);
  } else {
    lastBeforeMute = v;
    setVolume(0);
  }
});

presets.forEach((p) => {
  p.addEventListener("click", () => setVolume(Number(p.dataset.v)));
});

// 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); }
});

init();