Themer - Add theming plugin

lib/css/setStyle.ts

@@ -0,0 +1,13 @@
+export const setStyle = (cssString: string, styleId: string) => {
+	// Check if the style tag already exists
+	let styleTag = document.getElementById(styleId);
+	// If the style tag doesn't exist, create it
+	if (!styleTag) {
+		styleTag = document.createElement("style");
+		styleTag.id = styleId;
+		document.head.appendChild(styleTag);
+	}
+	// Update the content of the style tag
+	styleTag.innerHTML = cssString;
+};
+export const getStyle = (styleId: string) => document.getElementById(styleId);

lib/css/settings.js → lib/css/settings.ts

@@ -1,4 +1,6 @@
-export const settingsCSS = `
+import { setStyle } from "./setStyle";
+
+const settingsStyles = `
 .settings-section {
     color: #ffffff;
     padding: 20px;
@@ -18,3 +20,4 @@ export const settingsCSS = `
     margin-bottom: 15px;
 }
 `;
+setStyle(settingsStyles, "neptune-settings");

plugins/LastFM/src/Settings.ts

@@ -1,6 +1,7 @@
 import { html } from "@neptune/voby";
 // @ts-expect-error Remove this when types are available
 import { storage } from "@plugin";
+import "../../../lib/css/settings";
 
 storage.displaySkippedScrobbles ??= true;
 export const Settings = () => {

plugins/Shazam/src/Settings.ts

@@ -2,6 +2,8 @@ import { html } from "@neptune/voby";
 // @ts-expect-error Remove this when types are available
 import { storage } from "@plugin";
 
+import "../../../lib/css/settings";
+
 storage.exitOnFirstMatch ??= true;
 storage.startInMiddle ??= true;
 export const Settings = () => {

plugins/SongDownloader/src/Settings.ts

@@ -3,6 +3,7 @@ import { html } from "@neptune/voby";
 // @ts-expect-error Remove this when types are available
 import { storage } from "@plugin";
 import { AudioQualityInverse, AudioQuality, validQualitiesSettings } from "../../../lib/AudioQualityTypes";
+import { setStyle } from "../../../lib/css/setStyle";
 
 storage.desiredDownloadQuality ??= AudioQuality.HiRes;
 storage.defaultDownloadPath ??= "";

plugins/SongDownloader/src/styles.ts

@@ -1,8 +1,7 @@
-import { appendStyle } from "@neptune/utils";
-import { settingsCSS } from "../../../lib/css/settings";
+import { setStyle } from "../../../lib/css/setStyle";
+import "../../../lib/css/settings";
 
-appendStyle(`
-${settingsCSS}
+const styles = `
 .download-button {
 	align-items: center;
 	display: flex;
@@ -55,4 +54,6 @@ ${settingsCSS}
     outline: none;
     border-color: #4f4f4f;
 }
-`);
+`;
+
+setStyle(styles, "neptune-downloader");

plugins/Themer/plugin.json

@@ -0,0 +1,6 @@
+{
+  "name": "Themer",
+  "description": "Create your own themes!",
+  "author": "Inrixia",
+  "main": "./src/index.js"
+}

plugins/Themer/src/getDraggable.ts

@@ -0,0 +1,41 @@
+import { getStyle, setStyle } from "../../../lib/css/setStyle";
+
+// @ts-expect-error Remove this when types are available
+import { storage } from "@plugin";
+
+export const draggableId = "__Themer__Draggable";
+export const draggableStyleId = `${draggableId}__Style`;
+export const getDraggable = () => {
+	let draggable = document.getElementById(draggableId);
+	if (!draggable) {
+		draggable = document.createElement("div");
+		draggable.id = draggableId;
+		draggable.style.width = "300px";
+		draggable.style.height = "200px";
+		draggable.style.position = "absolute";
+		draggable.style.top = "100px";
+		draggable.style.left = "100px";
+		draggable.style.border = "1px solid #ccc";
+		draggable.style.backgroundColor = "#f9f9f9";
+		draggable.style.resize = "both";
+		draggable.style.overflow = "auto";
+		draggable.style.padding = "10px";
+		draggable.style.cursor = "move";
+		draggable.style.zIndex = "1000";
+
+		// Create and style the textarea
+		let textarea = document.createElement("textarea");
+		textarea.style.width = "100%";
+		textarea.style.height = "100%";
+		textarea.style.boxSizing = "border-box";
+		textarea.rows = 10;
+		textarea.cols = 50;
+		textarea.placeholder = "Enter css styles here...";
+		textarea.value = storage.css;
+		textarea.addEventListener("keyup", (e) => setStyle((storage.css = (<HTMLTextAreaElement>e.target).value), draggableStyleId));
+
+		draggable.appendChild(textarea);
+		document.body.appendChild(draggable);
+	}
+	return draggable;
+};

plugins/Themer/src/index.ts

@@ -0,0 +1,32 @@
+import { getStyle } from "../../../lib/css/setStyle";
+import { draggableId, draggableStyleId, getDraggable } from "./getDraggable";
+
+const draggable = getDraggable();
+// Make the container draggable
+let isDragging = false;
+let offsetX: number, offsetY: number;
+
+const onMouseDown = (e: MouseEvent) => {
+	isDragging = true;
+	offsetX = e.clientX - draggable.getBoundingClientRect().left;
+	offsetY = e.clientY - draggable.getBoundingClientRect().top;
+};
+const onMouseMove = (e: MouseEvent) => {
+	if (!isDragging) return;
+	draggable.style.left = `${e.clientX - offsetX}px`;
+	draggable.style.top = `${e.clientY - offsetY}px`;
+};
+const onMouseUp = () => {
+	isDragging = false;
+};
+
+draggable.addEventListener("mousedown", onMouseDown);
+document.addEventListener("mousemove", onMouseMove);
+document.addEventListener("mouseup", onMouseUp);
+export const onUnload = () => {
+	draggable.removeEventListener("mousedown", onMouseDown);
+	document.removeEventListener("mousemove", onMouseMove);
+	document.removeEventListener("mouseup", onMouseUp);
+	draggable.remove();
+	getStyle(draggableStyleId)?.remove();
+};

plugins/TidalTags/src/style.ts

@@ -1,8 +1,7 @@
-import { appendStyle } from "@neptune/utils";
-import { settingsCSS } from "../../../lib/css/settings";
+import { setStyle } from "../../../lib/css/setStyle";
+import "../../../lib/css/settings";
 
-appendStyle(`
-${settingsCSS}
+const styles = `
 span[class^="titleText--"] {
 	max-width: 190px;
 }
@@ -68,4 +67,6 @@ input:checked + .slider {
 input:checked + .slider:before {
 	transform: translateX(26px);
 }
-`);
+`;
+
+setStyle(styles, "tidal-tags-styles");