Implement Tray Icon

assets/userscript.js

@@ -75,6 +75,52 @@ const clonedElements = [];
 const hiddenElements = [];
 let wasStreamActive = false;
 
+function createButton(text, onClick) {
+  const button = document.createElement("button");
+  button.style.marginBottom = "20px";
+  button.classList =
+    "button-f2h6uQ lookFilled-yCfaCM colorBrand-I6CyqQ sizeSmall-wU2dO- grow-2sR_-F";
+  button.innerText = text;
+  button.addEventListener("click", onClick);
+  return button;
+}
+
+function createSwitch(text, enabled, onClick) {
+  const container = document.createElement("div");
+  container.style.marginBottom = "20px";
+  container.className = "labelRow-2jl9gK";
+
+  const label = document.createElement("label");
+  label.innerText = text;
+  label.className = "title-2dsDLn";
+  container.appendChild(label);
+
+  const svg = document.createElement("div");
+  container.appendChild(svg);
+
+  function setSvgDisabled() {
+    svg.innerHTML = `<div class="container-2nx-BQ default-colors" style="opacity: 1; background-color: rgb(114, 118, 125);"><svg class="slider-32CRPX" viewBox="0 0 28 20" preserveAspectRatio="xMinYMid meet" aria-hidden="true" style="left: -3px;"><rect fill="white" x="4" y="0" height="20" width="20" rx="10"></rect><svg viewBox="0 0 20 20" fill="none"><path fill="rgba(114, 118, 125, 1)" d="M5.13231 6.72963L6.7233 5.13864L14.855 13.2704L13.264 14.8614L5.13231 6.72963Z"></path><path fill="rgba(114, 118, 125, 1)" d="M13.2704 5.13864L14.8614 6.72963L6.72963 14.8614L5.13864 13.2704L13.2704 5.13864Z"></path></svg></svg></div>`;
+  }
+
+  function setSvgEnabled() {
+    svg.innerHTML = `<div class="container-2nx-BQ default-colors checked-25WXMf" style="opacity: 1; background-color: rgb(59, 165, 92);"><svg class="slider-32CRPX" viewBox="0 0 28 20" preserveAspectRatio="xMinYMid meet" aria-hidden="true" style="left: 12px;"><rect fill="white" x="4" y="0" height="20" width="20" rx="10"></rect><svg viewBox="0 0 20 20" fill="none"><path fill="rgba(59, 165, 92, 1)" d="M7.89561 14.8538L6.30462 13.2629L14.3099 5.25755L15.9009 6.84854L7.89561 14.8538Z"></path><path fill="rgba(59, 165, 92, 1)" d="M4.08643 11.0903L5.67742 9.49929L9.4485 13.2704L7.85751 14.8614L4.08643 11.0903Z"></path></svg></svg></div>`;
+  }
+
+  function updateSvg() {
+    if (enabled) setSvgEnabled();
+    else setSvgDisabled();
+  }
+
+  container.addEventListener("click", () => {
+    enabled = !enabled;
+    updateSvg();
+    onClick(enabled);
+  });
+  updateSvg();
+
+  return container;
+}
+
 setInterval(() => {
   const streamActive =
     document.getElementsByClassName("panel-2ZFCRb activityPanel-9icbyU")
@@ -179,14 +225,11 @@ setInterval(() => {
       .getElementsByClassName("children-1xdcWE")[0];
     const div = document.createElement("div");
     div.style.marginBottom = "50px";
-    const button = document.createElement("button");
-    button.classList =
-      "button-f2h6uQ lookFilled-yCfaCM colorBrand-I6CyqQ sizeSmall-wU2dO- grow-2sR_-F";
-    button.innerText = "Edit Global Keybinds";
-    button.addEventListener("click", () => {
-      console.log("!discord-screenaudio-keybinds");
-    });
-    div.appendChild(button);
+    div.appendChild(
+      createButton("Edit Global Keybinds", () => {
+        console.log("!discord-screenaudio-keybinds");
+      })
+    );
     el.innerHTML = "";
     el.appendChild(div);
   }
@@ -221,6 +264,51 @@ setInterval(() => {
       el.innerHTML = window.discordScreenaudioResolutionString;
     }
   }
+
+  const accountTab = document.getElementById("my-account-tab");
+  if (accountTab) {
+    const discordScreenaudioSettings = document.getElementById(
+      "discord-screenaudio-settings"
+    );
+    if (!discordScreenaudioSettings) {
+      const firstDivider = accountTab.getElementsByClassName(
+        "divider-_0um2u marginTop40-Q4o1tS"
+      )[0];
+      if (firstDivider) {
+        const section = document.createElement("div");
+        section.className = "marginTop40-Q4o1tS";
+        section.id = "discord-screenaudio-settings";
+
+        const title = document.createElement("h2");
+        title.className =
+          "h1-34Txb0 title-3hptVQ defaultColor-2cKwKo defaultMarginh1-EURXsm";
+        title.innerText = "discord-screenaudio";
+        section.appendChild(title);
+
+        section.appendChild(
+          createButton("Edit Global Keybinds", () => {
+            console.log("!discord-screenaudio-keybinds");
+          })
+        );
+
+        section.appendChild(
+          createSwitch(
+            "Move discord-screenaudio to the system tray instead of closing",
+            window.discordScreenaudioTrayEnabled,
+            (enabled) => {
+              console.log(`!discord-screenaudio-tray-${enabled}`);
+            }
+          )
+        );
+
+        const divider = document.createElement("div");
+        divider.className = "divider-_0um2u marginTop40-Q4o1tS";
+
+        firstDivider.after(section);
+        section.after(divider);
+      }
+    }
+  }
 }, 500);
 
 // Fix for broken discord notifications after restart