popup.js

const extensionStatusText = document.getElementById("extensionStatus");
const setSpeedButton = document.getElementById("setSpeed");
const resetSpeedButton = document.getElementById("resetSpeed");
const speedInput = document.getElementById("speedInputField");
const incrementButton = document.getElementById("incrementSpeed");
const decrementButton = document.getElementById("decrementSpeed");
const currentSpeedText = document.getElementById("currentSpeed");
const statusIcon = document.getElementById("statusIcon");

chrome.storage.local.get(["speedFlicks"], (result) => {
  const initialSpeed = result.speedFlicks || 1.0;
  speedInput.value = Number.isInteger(initialSpeed) ? initialSpeed.toFixed(1) : initialSpeed.toFixed(2);
  currentSpeedText.innerText = Number.isInteger(initialSpeed) ? initialSpeed.toFixed(1) + "x" : initialSpeed.toFixed(2) + "x";
});

document.addEventListener("DOMContentLoaded", async () => {
  let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  if (tab.url.includes("youtube.com")) {
    activateExtension();
    chrome.scripting.executeScript({
      target: { tabId: tab.id },
      files: ["contentScript.js"],
    });
  } else {
    deactivateExtension();
  }
});

const activateExtension = () => {
  setSpeedButton.disabled = false;
  resetSpeedButton.disabled = false;
  incrementButton.disabled = false;
  decrementButton.disabled = false;
  speedInput.disabled = false;
  statusIcon.style.backgroundColor = "#dc2626";
  statusIcon.style.border = "none";
  extensionStatusText.innerText = "Active on current tab";
};

const deactivateExtension = () => {
  setSpeedButton.disabled = true;
  resetSpeedButton.disabled = true;
  incrementButton.disabled = true;
  decrementButton.disabled = true;
  speedInput.disabled = true;
  statusIcon.style.backgroundColor = "#d1d5db";
  statusIcon.style.border = "1px solid #9ca3af";
  extensionStatusText.innerText = "Inactive on current tab";
};

setSpeedButton.addEventListener("click", async () => {
  let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  const playbackRate = Number.isInteger(speedInput.value)
    ? parseFloat(speedInput.value).toFixed(1)
    : parseFloat(speedInput.value).toFixed(2) || 1.0;

  chrome.scripting.executeScript(
    {
      target: { tabId: tab.id },
      function: setSpeedHandler,
      args: [playbackRate],
    },
    (returnResult) => {
      const [data] = returnResult;
      const speed = data.result;
      chrome.storage.local.set({ speedFlicks: speed });
      speedInput.value = Number.isInteger(speed) ? parseFloat(speed).toFixed(1) : parseFloat(speed).toFixed(2);
      currentSpeedText.innerText = Number.isInteger(speed) ? parseFloat(speed).toFixed(1) + "x" : parseFloat(speed).toFixed(2) + "x";
    }
  );
});

resetSpeedButton.addEventListener("click", async () => {
  let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });

  chrome.scripting.executeScript(
    {
      target: { tabId: tab.id },
      function: resetSpeedHandler,
    },
    (returnResult) => {
      const [data] = returnResult;
      const speed = data.result;
      chrome.storage.local.set({ speedFlicks: speed });
      speedInput.value = Number.isInteger(speed) ? parseFloat(speed).toFixed(1) : parseFloat(speed).toFixed(2);
      currentSpeedText.innerText = Number.isInteger(speed) ? parseFloat(speed).toFixed(1) + "x" : parseFloat(speed).toFixed(2) + "x";
    }
  );
});

incrementButton.addEventListener("click", () => incrementSpeedHandler());
decrementButton.addEventListener("click", () => decrementSpeedHandler());

const formatSpeed = (speed) => {
  return Number.isInteger(speed) ? speed.toFixed(1) : speed.toFixed(2);
};

const updateSpeedDisplay = (speed) => {
  const formattedSpeed = formatSpeed(parseFloat(speed));
  speedInput.value = formattedSpeed;
};

const incrementSpeedHandler = () => {
  let newSpeed = parseFloat(speedInput.value) + 0.25;
  if (newSpeed > 10.0) {
    newSpeed = 10.0;
  }
  updateSpeedDisplay(newSpeed);
};

const decrementSpeedHandler = () => {
  let newSpeed = parseFloat(speedInput.value) - 0.25;
  if (newSpeed < 0.25) {
    newSpeed = 0.25;
  }
  updateSpeedDisplay(newSpeed);
};

const setSpeedHandler = (playbackRate) => {
  const video = document.querySelector("video");
  if (video) {
    if (isNaN(playbackRate) || playbackRate < 0.1 || playbackRate > 10.0) {
      video.playbackRate = 1.0;
    } else {
      video.playbackRate = playbackRate;
    }
  }
  return video ? video.playbackRate : 1.0;
};

const resetSpeedHandler = () => {
  const video = document.querySelector("video");
  if (video) {
    video.playbackRate = 1.0;
  }

  return video ? video.playbackRate : 1.0;
};