First Commit

extension/twitchnotes.js

@@ -0,0 +1,200 @@
+let mousePosition = { x: 0, y: 0 };
+let lastMousePosition = { x: 0, y: 0 };
+let openContainers = {};
+let isMouseDown = false;
+let activeContainer = null;
+
+document.addEventListener("mousemove", handleMouseMove);
+document.addEventListener("mouseup", handleMouseUp);
+
+function saveNote(username, note) {
+  let userList = JSON.parse(
+    localStorage.getItem("twitch-note-all-users-list") || "[]"
+  );
+
+  if (!userList.includes(username)) {
+    userList.push(username);
+    localStorage.setItem(
+      "twitch-note-all-users-list",
+      JSON.stringify(userList)
+    );
+  }
+
+  localStorage.setItem("twitch-note-" + username, note);
+}
+function getNote(username) {
+  return localStorage.getItem("twitch-note-" + username) || "";
+}
+
+function handleMouseMove(event) {
+  event = event || window.event;
+  if (isMouseDown) {
+    if (activeContainer) {
+      const dx = mousePosition.x - lastMousePosition.x;
+      const dy = mousePosition.y - lastMousePosition.y;
+      openContainers[activeContainer].style.top =
+        parseInt(openContainers[activeContainer].style.top) + dy + "px";
+      openContainers[activeContainer].style.left =
+        parseInt(openContainers[activeContainer].style.left) + dx + "px";
+    }
+  }
+  updateMousePosition(event.clientX, event.clientY);
+}
+
+function handleMouseUp(event) {
+  activeContainer = null;
+  isMouseDown = false;
+}
+
+function updateMousePosition(x, y) {
+  lastMousePosition = { ...mousePosition };
+  mousePosition.x = x;
+  mousePosition.y = y;
+}
+
+function removeContainer(username) {
+  if (!openContainers[username]) return;
+  openContainers[username].remove();
+  delete openContainers[username];
+}
+
+function addContainer(username, container) {
+  if (openContainers[username]) return;
+  openContainers[username] = container;
+  document.body.appendChild(container);
+}
+
+function openTwitchNote(username) {
+  // CONTAINER
+  const container = document.createElement("div");
+  container.style.left = mousePosition.x + "px";
+  container.style.top = mousePosition.y + 10 + "px";
+  container.classList.add("twitch-note-container");
+
+  // HEADER
+  const header = document.createElement("div");
+  header.classList.add("twitch-note-header");
+  header.addEventListener("mousedown", function close() {
+    activeContainer = username;
+    isMouseDown = true;
+  });
+  const closeButton = document.createElement("span");
+  closeButton.classList.add("twitch-note-close-button");
+  closeButton.innerText = "X";
+  closeButton.addEventListener("click", function close() {
+    removeContainer(username);
+  });
+  header.appendChild(closeButton);
+  const title = document.createElement("span");
+  title.classList.add("twitch-note-title");
+  title.innerHTML = username;
+  header.appendChild(title);
+  container.appendChild(header);
+
+  // BODY
+  const content = document.createElement("div");
+  content.classList.add("twitch-note-content");
+  content.setAttribute("contentEditable", true);
+  content.innerHTML = getNote(username);
+
+  container.appendChild(content);
+
+  const saveButton = document.createElement("div");
+  saveButton.classList.add("twitch-note-save-button");
+  saveButton.innerText = "SAVE";
+  saveButton.addEventListener("click", function () {
+    saveNote(username, content.innerHTML);
+    removeContainer(username);
+  });
+
+  container.appendChild(saveButton);
+
+  addContainer(username, container);
+}
+
+(function runTwitchNotes() {
+  // Select the node that will be observed for mutations
+
+  let giveUpAt = Date.now() + 20000;
+
+  let changeInProgress = false;
+
+  let targetNode;
+  let buttonContainer;
+
+  do {
+    targetNode = document.getElementsByClassName(
+      "chat-scrollable-area__message-container"
+    )[0];
+  } while (!targetNode || giveUpAt < Date.now());
+
+  do {
+    buttonContainer = document.getElementsByClassName(
+      "chat-input__buttons-container"
+    )[0];
+  } while (!buttonContainer || giveUpAt < Date.now());
+
+  const settingsButton = document.createElement("div");
+  settingsButton.innerHTML = "<b>Notes</b>";
+
+  buttonContainer.lastChild.insertBefore(
+    settingsButton,
+    buttonContainer.lastChild.firstChild
+  );
+
+  // Options for the observer (which mutations to observe)
+  const config = { attributes: true, childList: true, subtree: true };
+
+  // Callback function to execute when mutations are observed
+  const callback = (mutationList, observer) => {
+    if (!changeInProgress) {
+      for (const mutation of mutationList) {
+        if (mutation.type === "childList") {
+          changeInProgress = true;
+          let nodes = document.getElementsByClassName("chat-line__message");
+          let users = [];
+          for (let node of nodes) {
+            const n = node.querySelector(".chat-author__display-name");
+            if (!n) continue;
+            const usernameContainer = node.querySelector(
+              ".chat-line__username-container"
+            );
+
+            const username = n.attributes["data-a-user"].value;
+            if (username) {
+              let noteButton = usernameContainer.querySelector(".twitchnote");
+              if (!noteButton) {
+                const twitchNote = document.createElement("span");
+                twitchNote.classList.add("twitchnote");
+                twitchNote.style.cursor = "pointer";
+                twitchNote.addEventListener("click", () => {
+                  openTwitchNote(username);
+                });
+
+                const img = document.createElement("img");
+                img.src = "https://cdn.rdarius.lt/icons/32-id-card.png";
+                twitchNote.appendChild(img);
+
+                usernameContainer.insertBefore(
+                  twitchNote,
+                  usernameContainer.firstChild
+                );
+              }
+              if (!users[username]) {
+                users[username] = 0;
+              }
+              users[username]++;
+            }
+          }
+          changeInProgress = false;
+        }
+      }
+    }
+  };
+
+  // Create an observer instance linked to the callback function
+  const observer = new MutationObserver(callback);
+
+  // Start observing the target node for configured mutations
+  observer.observe(targetNode, config);
+})();