options.js

document.addEventListener("DOMContentLoaded", () => {
  const mute = document.getElementById("mute");
  const maxTime = document.getElementById("maxTime");
  const save = document.getElementById("save");
  const status = document.getElementById("status");
  const mp3Select = document.getElementById("mp3");
  const wavSelect = document.getElementById("wav");
  const quality = document.getElementById("quality");
  const qualityLi = document.getElementById("qualityLi");
  const limitRemoved = document.getElementById("removeLimit");
  let currentFormat;
  //initial settings
  chrome.storage.sync.get(
    {
      muteTab: false,
      maxTime: 1200000,
      format: "mp3",
      quality: 192,
      limitRemoved: false
    },
    options => {
      mute.checked = options.muteTab;
      limitRemoved.checked = options.limitRemoved;
      maxTime.disabled = options.limitRemoved;
      maxTime.value = options.maxTime / 60000;
      currentFormat = options.format;
      if (options.format === "mp3") {
        mp3Select.checked = true;
        qualityLi.style.display = "block";
      } else {
        wavSelect.checked = true;
      }
      if (options.quality === "96") {
        quality.selectedIndex = 0;
      } else if (options.quality === "192") {
        quality.selectedIndex = 1;
      } else {
        quality.selectedIndex = 2;
      }
    }
  );

  mute.onchange = () => {
    status.innerHTML = "";
  };

  maxTime.onchange = () => {
    status.innerHTML = "";
    if (maxTime.value > 20) {
      maxTime.value = 20;
    } else if (maxTime.value < 1) {
      maxTime.value = 1;
    } else if (isNaN(maxTime.value)) {
      maxTime.value = 20;
    }
  };

  mp3Select.onclick = () => {
    currentFormat = "mp3";
    qualityLi.style.display = "block";
    status.innerHTML = "";
  };

  wavSelect.onclick = () => {
    currentFormat = "wav";
    qualityLi.style.display = "none";
    status.innerHTML = "";
  };

  quality.onchange = _e => {
    status.innerHTML = "";
  };

  limitRemoved.onchange = () => {
    if (limitRemoved.checked) {
      maxTime.disabled = true;
      status.innerHTML =
        "WARNING: Recordings that are too long may not save properly!";
    } else {
      maxTime.disabled = false;
      status.innerHTML = "";
    }
  };

  save.onclick = () => {
    chrome.storage.sync.set({
      muteTab: mute.checked,
      maxTime: maxTime.value * 60000,
      format: currentFormat,
      quality: quality.value,
      limitRemoved: limitRemoved.checked
    });
    status.innerHTML = "Settings saved!";
  };
});