feat: disable text selection

src/features/index.ts

@@ -57,8 +57,8 @@ export const featInfo = {
     desc: "The width of the volume slider in pixels",
     type: "number",
     category: "layout",
-    min: 10,
-    max: 1000,
+    min: 50,
+    max: 500,
     step: 5,
     default: 160,
     unit: "px",

src/features/layout.css

@@ -79,6 +79,13 @@ ytmusic-logo a.bytm-logo-exchanged .bytm-mod-logo-img {
   }
 }
 
+.bytm-no-select {
+  user-select: none;
+  -ms-user-select: none;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+}
+
 /* #MARKER menu */
 
 .bytm-cfg-menu-option {
@@ -124,7 +131,7 @@ yt-multi-page-menu-section-renderer.ytd-multi-page-menu-renderer {
 
 /* #MARKER watermark */
 
-#betterytm-watermark {
+#bytm-watermark {
   font-size: 10px;
   display: inline-block;
   position: absolute;
@@ -136,7 +143,7 @@ yt-multi-page-menu-section-renderer.ytd-multi-page-menu-renderer {
   cursor: pointer;
 }
 
-#betterytm-watermark:hover {
+#bytm-watermark:hover {
   text-decoration: underline;
 }
 

src/features/layout.ts

@@ -22,8 +22,8 @@ let clicksAmt = 0, logoExchanged = false;
 export function addWatermark() {
   const watermark = document.createElement("a");
   watermark.role = "button";
-  watermark.id = "betterytm-watermark";
-  watermark.className = "style-scope ytmusic-nav-bar";
+  watermark.id = "bytm-watermark";
+  watermark.className = "style-scope ytmusic-nav-bar bytm-no-select";
   watermark.innerText = scriptInfo.name;
   watermark.title = "Open menu";
   watermark.tabIndex = 1000;
@@ -61,7 +61,7 @@ async function improveLogo() {
     const svg = await res.text();
     
     onSelectorExists("ytmusic-logo a", (logoElem) => {
-      logoElem.classList.add("bytm-mod-logo");
+      logoElem.classList.add("bytm-mod-logo", "bytm-no-select");
       logoElem.innerHTML = svg;
 
       logoElem.querySelectorAll("ellipse").forEach((e) => {
@@ -442,7 +442,7 @@ const sidebarPaths = [
 function improveSidebarAnchors(sidebarItems: NodeListOf<HTMLElement>) {
   sidebarItems.forEach((item, i) => {
     const anchorElem = document.createElement("a");
-    anchorElem.className = "bytm-anchor";
+    anchorElem.classList.add("bytm-anchor", "bytm-no-select");
     anchorElem.role = "button";
     anchorElem.target = "_self";
     anchorElem.href = sidebarPaths[i] ?? "#";

tsconfig.json

@@ -20,6 +20,7 @@
     "sourceMap": true,
     "strict": true,
     "useDefineForClassFields": true,
+    "noImplicitThis": false,
   },
   "ts-node": {
     "esm": true,