☰

VoidVerified

Social enhancements for AniList.

当前为 2024-03-06 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name          VoidVerified
  3. // @version       1.10.0
  4. // @namespace     http://tampermonkey.net/
  5. // @author        voidnyan
  6. // @description   Social enhancements for AniList.
  7. // @homepageURL   https://github.com/voidnyan/void-verified#voidverified
  8. // @supportURL    https://github.com/voidnyan/void-verified/issues
  9. // @grant         GM_xmlhttpRequest
  10. // @match         https://anilist.co/*
  11. // @license MIT
  12. // ==/UserScript==
  13.  
  14. (function () {
  15. 	'use strict';
  16.  
  17. 	const categories = {
  18. 		users: "users",
  19. 		paste: "paste",
  20. 		css: "css",
  21. 		misc: "misc",
  22. 	};
  23.  
  24. 	const defaultSettings = {
  25. 		copyColorFromProfile: {
  26. 			defaultValue: true,
  27. 			description: "Copy user color from their profile.",
  28. 			category: categories.users,
  29. 		},
  30. 		moveSubscribeButtons: {
  31. 			defaultValue: false,
  32. 			description:
  33. 				"Move activity subscribe button next to comments and likes.",
  34. 			category: categories.misc,
  35. 		},
  36. 		hideLikeCount: {
  37. 			defaultValue: false,
  38. 			description: "Hide activity and reply like counts.",
  39. 			category: categories.misc,
  40. 		},
  41. 		enabledForUsername: {
  42. 			defaultValue: true,
  43. 			description: "Display a verified sign next to usernames.",
  44. 			category: categories.users,
  45. 		},
  46. 		enabledForProfileName: {
  47. 			defaultValue: false,
  48. 			description: "Display a verified sign next to a profile name.",
  49. 			category: categories.users,
  50. 		},
  51. 		defaultSign: {
  52. 			defaultValue: "✔",
  53. 			description: "The default sign displayed next to a username.",
  54. 			category: categories.users,
  55. 		},
  56. 		highlightEnabled: {
  57. 			defaultValue: true,
  58. 			description: "Highlight user activity with a border.",
  59. 			category: categories.users,
  60. 		},
  61. 		highlightEnabledForReplies: {
  62. 			defaultValue: true,
  63. 			description: "Highlight replies with a border.",
  64. 			category: categories.users,
  65. 		},
  66. 		highlightSize: {
  67. 			defaultValue: "5px",
  68. 			description: "Width of the highlight border.",
  69. 			category: categories.users,
  70. 		},
  71. 		colorUserActivity: {
  72. 			defaultValue: false,
  73. 			description: "Color user activity links with user color.",
  74. 			category: categories.users,
  75. 		},
  76. 		colorUserReplies: {
  77. 			defaultValue: false,
  78. 			description: "Color user reply links with user color.",
  79. 			category: categories.users,
  80. 		},
  81. 		useDefaultHighlightColor: {
  82. 			defaultValue: false,
  83. 			description:
  84. 				"Use fallback highlight color when user color is not specified.",
  85. 			category: categories.users,
  86. 		},
  87. 		defaultHighlightColor: {
  88. 			defaultValue: "#FFFFFF",
  89. 			description: "Fallback highlight color.",
  90. 			category: categories.users,
  91. 		},
  92. 		globalCssEnabled: {
  93. 			defaultValue: false,
  94. 			description: "Enable custom global CSS.",
  95. 			category: categories.css,
  96. 		},
  97. 		globalCssAutoDisable: {
  98. 			defaultValue: true,
  99. 			description: "Disable global CSS when a profile has custom CSS.",
  100. 			category: categories.css,
  101. 		},
  102. 		profileCssEnabled: {
  103. 			defaultValue: false,
  104. 			description: "Load user's custom CSS when viewing their profile.",
  105. 			category: categories.css,
  106. 			authRequired: true,
  107. 		},
  108. 		activityCssEnabled: {
  109. 			defaultValue: false,
  110. 			description:
  111. 				"Load user's custom CSS when viewing their activity (direct link).",
  112. 			category: categories.css,
  113. 			authRequired: true,
  114. 		},
  115. 		onlyLoadCssFromVerifiedUser: {
  116. 			defaultValue: false,
  117. 			description: "Only load custom CSS from verified users.",
  118. 			category: categories.css,
  119. 		},
  120. 		layoutDesignerEnabled: {
  121. 			defaultValue: false,
  122. 			description: "Enable Layout Designer in the settings tab.",
  123. 			category: categories.misc,
  124. 			authRequired: true,
  125. 		},
  126. 		quickAccessEnabled: {
  127. 			defaultValue: false,
  128. 			description: "Display quick access of users in home page.",
  129. 			category: categories.users,
  130. 		},
  131. 		quickAccessBadge: {
  132. 			defaultValue: false,
  133. 			description:
  134. 				"Display a badge on quick access when changes are detected on user's layout.",
  135. 			category: categories.users,
  136. 		},
  137. 		quickAccessTimer: {
  138. 			defaultValue: true,
  139. 			description: "Display a timer until next update of Quick Access.",
  140. 			category: categories.users,
  141. 		},
  142. 		pasteEnabled: {
  143. 			defaultValue: false,
  144. 			description:
  145. 				"Automatically wrap pasted links and images with link and image tags.",
  146. 			category: categories.paste,
  147. 		},
  148. 		pasteWrapImagesWithLink: {
  149. 			defaultValue: false,
  150. 			description: "Wrap images with a link tag.",
  151. 			category: categories.paste,
  152. 		},
  153. 		pasteImageWidth: {
  154. 			defaultValue: "420",
  155. 			description: "Width used when pasting images.",
  156. 			category: categories.paste,
  157. 		},
  158. 		pasteImagesToHostService: {
  159. 			defaultValue: false,
  160. 			description:
  161. 				"Upload image from the clipboard to image host (configure below).",
  162. 			category: categories.paste,
  163. 		},
  164. 		toasterEnabled: {
  165. 			defaultValue: true,
  166. 			description: "Enable toast notifications.",
  167. 			category: categories.misc,
  168. 		},
  169. 		useElevatedFetch: {
  170. 			defaultValue: false,
  171. 			description:
  172. 				"Query AniList API with elevated browser access (this might solve some API issues).",
  173. 			category: categories.misc,
  174. 		},
  175. 		removeAnilistBlanks: {
  176. 			defaultValue: false,
  177. 			description: "Open AniList links in the same tab.",
  178. 			category: categories.misc,
  179. 		},
  180. 		gifKeyboardEnabled: {
  181. 			defaultValue: false,
  182. 			description: "Add a GIF keyboard to activity editor.",
  183. 			category: categories.paste,
  184. 		},
  185. 		gifKeyboardLikeButtonsEnabled: {
  186. 			defaultValue: true,
  187. 			description: "Add like buttons to add media to GIF keyboard.",
  188. 			category: categories.paste,
  189. 		},
  190. 		changeLogEnabled: {
  191. 			defaultValue: true,
  192. 			description: "Display a changelog when a new version is detected.",
  193. 			category: categories.misc,
  194. 		},
  195. 		selfMessageEnabled: {
  196. 			defaultValue: false,
  197. 			description:
  198. 				"Enable a self-message button on your profile (requires authentication).",
  199. 			category: categories.misc,
  200. 			authRequired: true,
  201. 		},
  202. 	};
  203.  
  204. 	class ColorFunctions {
  205. 		static hexToRgb(hex) {
  206. 			const r = parseInt(hex.slice(1, 3), 16);
  207. 			const g = parseInt(hex.slice(3, 5), 16);
  208. 			const b = parseInt(hex.slice(5, 7), 16);
  209.  
  210. 			return `${r}, ${g}, ${b}`;
  211. 		}
  212.  
  213. 		static rgbToHex(rgb) {
  214. 			const [r, g, b] = rgb.split(",");
  215. 			const hex = this.generateHex(r, g, b);
  216. 			return hex;
  217. 		}
  218.  
  219. 		static generateHex(r, g, b) {
  220. 			return (
  221. 				"#" +
  222. 				[r, g, b]
  223. 					.map((x) => {
  224. 						const hex = Number(x).toString(16);
  225. 						return hex.length === 1 ? "0" + hex : hex;
  226. 					})
  227. 					.join("")
  228. 			);
  229. 		}
  230.  
  231. 		static defaultColors = [
  232. 			"blue",
  233. 			"purple",
  234. 			"green",
  235. 			"orange",
  236. 			"red",
  237. 			"pink",
  238. 			"gray",
  239. 		];
  240.  
  241. 		static defaultColorRgb = {
  242. 			gray: "103, 123, 148",
  243. 			blue: "61, 180, 242",
  244. 			purple: "192, 99, 255",
  245. 			green: "76, 202, 81",
  246. 			orange: "239, 136, 26",
  247. 			red: "225, 51, 51",
  248. 			pink: "252, 157, 214",
  249. 		};
  250.  
  251. 		static handleAnilistColor(color) {
  252. 			if (this.defaultColors.includes(color)) {
  253. 				return this.defaultColorRgb[color];
  254. 			}
  255.  
  256. 			return this.hexToRgb(color);
  257. 		}
  258. 	}
  259.  
  260. 	class DOM {
  261. 		static create(element, classes = null, children = null) {
  262. 			const el = document.createElement(element);
  263. 			if (classes !== null) {
  264. 				for (const className of classes?.split(" ")) {
  265. 					if (className.startsWith("#")) {
  266. 						el.setAttribute("id", `void-${className.slice(1)}`);
  267. 						continue;
  268. 					}
  269. 					el.classList.add(`void-${className}`);
  270. 				}
  271. 			}
  272.  
  273. 			if (children) {
  274. 				if (Array.isArray(children)) {
  275. 					el.append(...children);
  276. 				} else {
  277. 					el.append(children);
  278. 				}
  279. 			}
  280.  
  281. 			return el;
  282. 		}
  283.  
  284. 		static getOrCreate(element, classes) {
  285. 			const id = classes
  286. 				.split(" ")
  287. 				.find((className) => className.startsWith("#"));
  288. 			return this.get(id) ?? this.create(element, classes);
  289. 		}
  290.  
  291. 		static get(selector) {
  292. 			const convertedSelector = this.#convertSelector(selector);
  293. 			return document.querySelector(convertedSelector);
  294. 		}
  295.  
  296. 		static getAll(selector) {
  297. 			const convertedSelector = this.#convertSelector(selector);
  298. 			return document.querySelectorAll(convertedSelector);
  299. 		}
  300.  
  301. 		static #convertSelector(selector) {
  302. 			let results = [];
  303. 			for (const className of selector?.split(" ")) {
  304. 				if (className.startsWith("#")) {
  305. 					results.push(`#void-${className.slice(1)}`);
  306. 					continue;
  307. 				}
  308. 				results.push(`.void-${className}`);
  309. 			}
  310. 			return results.join(" ");
  311. 		}
  312. 	}
  313.  
  314. 	// MIT License
  315.  
  316. 	// Copyright (c) 2020 Refactoring UI Inc.
  317.  
  318. 	// Permission is hereby granted, free of charge, to any person obtaining a copy
  319. 	// of this software and associated documentation files (the "Software"), to deal
  320. 	// in the Software without restriction, including without limitation the rights
  321. 	// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  322. 	// copies of the Software, and to permit persons to whom the Software is
  323. 	// furnished to do so, subject to the following conditions:
  324.  
  325. 	// The above copyright notice and this permission notice shall be included in all
  326. 	// copies or substantial portions of the Software.
  327.  
  328. 	// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  329. 	// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  330. 	// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  331. 	// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  332. 	// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  333. 	// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  334. 	// SOFTWARE.
  335.  
  336. 	const RefreshIcon = () => {
  337. 		const icon = new DOMParser().parseFromString(
  338. 			`<svg
  339.             xmlns="http://www.w3.org/2000/svg"
  340.             fill="none"
  341.             viewBox="0 0 24 24"
  342.             stroke-width="1.5"
  343.             stroke="currentColor"
  344.             class="w-6 h-6"
  345.         >
  346.             <path
  347.                 stroke-linecap="round"
  348.                 stroke-linejoin="round"
  349.                 d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"
  350.             />
  351.         </svg>`,
  352. 			"text/html"
  353. 		).body.childNodes[0];
  354. 		return icon;
  355. 	};
  356.  
  357. 	const EyeIcon = () => {
  358. 		const icon = new DOMParser().parseFromString(
  359. 			`	<svg
  360.                 xmlns="http://www.w3.org/2000/svg"
  361.                 fill="none"
  362.                 viewBox="0 0 24 24"
  363.                 stroke-width="1.5"
  364.                 stroke="currentColor"
  365.                 class="w-6 h-6"
  366.             >
  367.                 <path
  368.                     stroke-linecap="round"
  369.                     stroke-linejoin="round"
  370.                     d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z"
  371.                 />
  372.                 <path
  373.                     stroke-linecap="round"
  374.                     stroke-linejoin="round"
  375.                     d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
  376.                 />
  377.             </svg>;
  378.       `,
  379. 			"text/html"
  380. 		).body.childNodes[0];
  381. 		return icon;
  382. 	};
  383.  
  384. 	const EyeClosedIcon = () => {
  385. 		const icon = new DOMParser().parseFromString(
  386. 			`<svg
  387.             xmlns="http://www.w3.org/2000/svg"
  388.             fill="none"
  389.             viewBox="0 0 24 24"
  390.             stroke-width="1.5"
  391.             stroke="currentColor"
  392.             class="w-6 h-6"
  393.         >
  394.             <path
  395.                 stroke-linecap="round"
  396.                 stroke-linejoin="round"
  397.                 d="M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88"
  398.             />
  399.         </svg>;
  400.       `,
  401. 			"text/html"
  402. 		).body.childNodes[0];
  403. 		return icon;
  404. 	};
  405.  
  406. 	const TrashcanIcon = () => {
  407. 		const icon = new DOMParser().parseFromString(
  408. 			`<svg
  409.             xmlns="http://www.w3.org/2000/svg"
  410.             fill="none"
  411.             viewBox="0 0 24 24"
  412.             stroke-width="1.5"
  413.             stroke="currentColor"
  414.             class="w-6 h-6"
  415.         >
  416.             <path
  417.                 stroke-linecap="round"
  418.                 stroke-linejoin="round"
  419.                 d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"
  420.             />
  421.         </svg>;
  422.       `,
  423. 			"text/html"
  424. 		).body.childNodes[0];
  425. 		return icon;
  426. 	};
  427.  
  428. 	const AddIcon = () => {
  429. 		const icon = new DOMParser().parseFromString(
  430. 			`<svg
  431.             xmlns="http://www.w3.org/2000/svg"
  432.             fill="none"
  433.             viewBox="0 0 24 24"
  434.             stroke-width="1.5"
  435.             stroke="currentColor"
  436.             class="w-6 h-6"
  437.         >
  438.             <path
  439.                 stroke-linecap="round"
  440.                 stroke-linejoin="round"
  441.                 d="M12 9v6m3-3H9m12 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
  442.             />
  443.         </svg>;
  444.       `,
  445. 			"text/html"
  446. 		).body.childNodes[0];
  447. 		return icon;
  448. 	};
  449. 	const GifIcon = () => {
  450. 		const icon = new DOMParser().parseFromString(
  451. 			`<svg
  452.             xmlns="http://www.w3.org/2000/svg"
  453.             fill="none"
  454.             viewBox="0 0 24 24"
  455.             stroke-width="1.5"
  456.             stroke="currentColor"
  457.             class="w-6 h-6"
  458.         >
  459.             <path
  460.                 stroke-linecap="round"
  461.                 stroke-linejoin="round"
  462.                 d="M12.75 8.25v7.5m6-7.5h-3V12m0 0v3.75m0-3.75H18M9.75 9.348c-1.03-1.464-2.698-1.464-3.728 0-1.03 1.465-1.03 3.84 0 5.304 1.03 1.464 2.699 1.464 3.728 0V12h-1.5M4.5 19.5h15a2.25 2.25 0 0 0 2.25-2.25V6.75A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25v10.5A2.25 2.25 0 0 0 4.5 19.5Z"
  463.             />
  464.         </svg>;
  465.       `,
  466. 			"text/html"
  467. 		).body.childNodes[0];
  468. 		return icon;
  469. 	};
  470. 	const HeartIcon = () => {
  471. 		const icon = new DOMParser().parseFromString(
  472. 			`<svg
  473.                 xmlns="http://www.w3.org/2000/svg"
  474.                 viewBox="0 0 24 24"
  475.                 fill="currentColor"
  476.                 class="w-6 h-6"
  477.             >
  478.                 <path d="m11.645 20.91-.007-.003-.022-.012a15.247 15.247 0 0 1-.383-.218 25.18 25.18 0 0 1-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0 1 12 5.052 5.5 5.5 0 0 1 16.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 0 1-4.244 3.17 15.247 15.247 0 0 1-.383.219l-.022.012-.007.004-.003.001a.752.752 0 0 1-.704 0l-.003-.001Z" />
  479.             </svg>;
  480.       `,
  481. 			"text/html"
  482. 		).body.childNodes[0];
  483. 		return icon;
  484. 	};
  485. 	const DoubleChevronLeftIcon = () => {
  486. 		const icon = new DOMParser().parseFromString(
  487. 			`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
  488.         <path stroke-linecap="round" stroke-linejoin="round" d="m18.75 4.5-7.5 7.5 7.5 7.5m-6-15L5.25 12l7.5 7.5" />
  489.       </svg>
  490.       `,
  491. 			"text/html"
  492. 		).body.childNodes[0];
  493. 		return icon;
  494. 	};
  495. 	const DoubleChevronRightIcon = () => {
  496. 		const icon = new DOMParser().parseFromString(
  497. 			`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
  498.         <path stroke-linecap="round" stroke-linejoin="round" d="m5.25 4.5 7.5 7.5-7.5 7.5m6-15 7.5 7.5-7.5 7.5" />
  499.       </svg>
  500.       `,
  501. 			"text/html"
  502. 		).body.childNodes[0];
  503. 		return icon;
  504. 	};
  505.  
  506. 	const CloseIcon = () => {
  507. 		const icon = new DOMParser().parseFromString(
  508. 			`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
  509.         <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
  510.       </svg>
  511.  
  512.       `,
  513. 			"text/html"
  514. 		).body.childNodes[0];
  515. 		return icon;
  516. 	};
  517.  
  518. 	const ColorPicker = (value, onChange) => {
  519. 		const container = DOM.create("div", "color-picker-container");
  520. 		const colorPicker = DOM.create("input", "color-picker");
  521. 		colorPicker.setAttribute("type", "color");
  522. 		colorPicker.value = value;
  523. 		colorPicker.addEventListener("change", (event) => {
  524. 			onChange(event);
  525. 		});
  526.  
  527. 		container.append(colorPicker);
  528. 		const inputField = DOM.create("input", "color-picker-input");
  529. 		inputField.value = value ?? "#";
  530. 		inputField.setAttribute("type", "text");
  531. 		inputField.addEventListener("change", (event) => {
  532. 			onChange(event);
  533. 		});
  534. 		container.append(inputField);
  535. 		return container;
  536. 	};
  537.  
  538. 	const InputField = (value, onChange, classes) => {
  539. 		const inputField = DOM.create("input", transformClasses("input", classes));
  540. 		inputField.value = value;
  541. 		inputField.addEventListener("change", (event) => {
  542. 			onChange(event);
  543. 		});
  544. 		return inputField;
  545. 	};
  546.  
  547. 	const SecretField = (value, onChange) => {
  548. 		const secret = InputField(value, onChange);
  549. 		secret.setAttribute("type", "password");
  550. 		const eyeIcon = EyeIcon();
  551. 		const closedEyeIcon = EyeClosedIcon();
  552.  
  553. 		const container = DOM.create("div", "action-container", secret);
  554. 		const iconButton = IconButton(eyeIcon, (event) => {
  555. 			if (event.target.firstChild === eyeIcon) {
  556. 				event.target.replaceChildren(closedEyeIcon);
  557. 				secret.setAttribute("type", "text");
  558. 				return;
  559. 			}
  560. 			event.target.replaceChildren(eyeIcon);
  561. 			secret.setAttribute("type", "password");
  562. 		});
  563. 		container.append(iconButton);
  564. 		return container;
  565. 	};
  566.  
  567. 	const ActionInputField = (value, onClick, icon) => {
  568. 		const inputField = InputField(value, () => {});
  569.  
  570. 		const container = DOM.create("div", "action-container", inputField);
  571. 		const iconButton = IconButton(icon, (event) => {
  572. 			onClick(event, inputField);
  573. 		});
  574. 		container.append(iconButton);
  575. 		return container;
  576. 	};
  577.  
  578. 	const RangeField = (value, onChange, max, step = 1, min = 0, unit) => {
  579. 		const container = DOM.create("div", "range-container");
  580. 		const range = DOM.create("input", "range");
  581. 		const display = DOM.create("div", "range-display", `${value}${unit ?? ""}`);
  582. 		range.setAttribute("type", "range");
  583. 		range.addEventListener("change", (event) => {
  584. 			onChange(event);
  585. 		});
  586. 		range.addEventListener("input", (event) => {
  587. 			display.replaceChildren(`${event.target.value}${unit ?? ""}`);
  588. 		});
  589. 		range.setAttribute("max", max);
  590. 		range.setAttribute("min", min);
  591. 		range.setAttribute("step", step);
  592. 		range.setAttribute("value", value);
  593. 		container.append(range, display);
  594. 		return container;
  595. 	};
  596.  
  597. 	const Button = (text, onClick, classes) => {
  598. 		const button = DOM.create(
  599. 			"button",
  600. 			transformClasses("button", classes),
  601. 			text
  602. 		);
  603. 		button.addEventListener("click", (event) => {
  604. 			onClick(event);
  605. 		});
  606. 		return button;
  607. 	};
  608.  
  609. 	const IconButton = (text, onClick, classes) => {
  610. 		const button = DOM.create(
  611. 			"div",
  612. 			transformClasses("icon-button", classes),
  613. 			text
  614. 		);
  615. 		button.addEventListener("click", (event) => {
  616. 			onClick(event);
  617. 		});
  618. 		return button;
  619. 	};
  620.  
  621. 	const Note = (text) => {
  622. 		const note = DOM.create("div", "notice", text);
  623. 		return note;
  624. 	};
  625.  
  626. 	const Link = (text, href, target = "_blank", classes) => {
  627. 		const link = DOM.create("a", transformClasses("link", classes), text);
  628. 		link.setAttribute("href", href);
  629. 		link.setAttribute("target", target);
  630. 		return link;
  631. 	};
  632.  
  633. 	const TextArea = (text, onChange, classes) => {
  634. 		const textArea = DOM.create(
  635. 			"textarea",
  636. 			transformClasses("textarea", classes),
  637. 			text
  638. 		);
  639. 		textArea.addEventListener("change", (event) => {
  640. 			onChange(event);
  641. 		});
  642.  
  643. 		return textArea;
  644. 	};
  645.  
  646. 	const Toast = (message, type) => {
  647. 		const toast = DOM.create("div", transformClasses("toast", type), message);
  648. 		return toast;
  649. 	};
  650.  
  651. 	const Select = (options) => {
  652. 		const container = DOM.create("div", "select");
  653. 		for (const option of options) {
  654. 			container.append(option);
  655. 		}
  656. 		return container;
  657. 	};
  658.  
  659. 	const Option$1 = (value, selected, onClick) => {
  660. 		const option = DOM.create("div", "option", value);
  661. 		if (selected) {
  662. 			option.classList.add("active");
  663. 		}
  664. 		option.addEventListener("click", onClick);
  665. 		return option;
  666. 	};
  667.  
  668. 	const Label = (text, element) => {
  669. 		const container = DOM.create("div", "label-container");
  670. 		const label = DOM.create("label", "label-span", text);
  671. 		const id = Math.random();
  672. 		label.setAttribute("for", id);
  673. 		element.setAttribute("id", id);
  674. 		container.append(label, element);
  675. 		return container;
  676. 	};
  677.  
  678. 	const Table = (head, body) => {
  679. 		const table = DOM.create("table", "table", [head, body]);
  680. 		return table;
  681. 	};
  682.  
  683. 	const TableHead = (...headers) => {
  684. 		const headerCells = headers.map((header) => DOM.create("th", null, header));
  685. 		const headerRow = DOM.create("tr", null, headerCells);
  686. 		const head = DOM.create("thead", null, headerRow);
  687. 		return head;
  688. 	};
  689.  
  690. 	const TableBody = (rows) => {
  691. 		const tableBody = DOM.create("tbody", null, rows);
  692. 		return tableBody;
  693. 	};
  694.  
  695. 	const Checkbox = (checked, onChange, disabled = false) => {
  696. 		const checkbox = DOM.create("input", "checkbox");
  697. 		checkbox.setAttribute("type", "checkbox");
  698. 		checkbox.checked = checked;
  699.  
  700. 		if (disabled) {
  701. 			checkbox.setAttribute("disabled", "");
  702. 		}
  703.  
  704. 		checkbox.addEventListener("change", onChange);
  705. 		return checkbox;
  706. 	};
  707.  
  708. 	const SettingLabel = (text, input) => {
  709. 		const container = DOM.create("div", "setting-label-container", input);
  710. 		const label = DOM.create("label", "setting-label", text);
  711. 		const id = Math.random();
  712. 		label.setAttribute("for", id);
  713. 		input.setAttribute("id", id);
  714. 		container.append(label);
  715. 		return container;
  716. 	};
  717.  
  718. 	const GifKeyboard = (header) => {
  719. 		const container = DOM.create("div", "gif-keyboard-container");
  720. 		container.append(header);
  721. 		const gifList = DOM.create("div", "gif-keyboard-list");
  722. 		const controls = DOM.create("div", "gif-keyboard-control-container");
  723. 		container.append(
  724. 			DOM.create("div", "gif-keyboard-list-container", [controls, gifList])
  725. 		);
  726.  
  727. 		return container;
  728. 	};
  729.  
  730. 	const GifItem = (url, onClick, onLike, gifs) => {
  731. 		const container = DOM.create("div", "gif-keyboard-item");
  732. 		container.addEventListener("click", () => {
  733. 			onClick();
  734. 		});
  735. 		const img = DOM.create("img");
  736. 		img.setAttribute("src", url);
  737. 		container.append(GifContainer(img, onLike, gifs));
  738. 		return container;
  739. 	};
  740.  
  741. 	const GifContainer = (imgElement, onLike, gifs) => {
  742. 		const container = DOM.create("div", "gif-like-container");
  743. 		container.append(
  744. 			imgElement,
  745. 			IconButton(
  746. 				HeartIcon(),
  747. 				(event) => {
  748. 					event.stopPropagation();
  749. 					event.preventDefault();
  750. 					onLike(event);
  751. 					if (event.target.classList.contains("void-liked")) {
  752. 						event.target.classList.remove("void-liked");
  753. 					} else {
  754. 						event.target.classList.add("void-liked");
  755. 					}
  756. 				},
  757. 				transformClasses(
  758. 					"gif-like",
  759. 					gifs.includes(imgElement.src) && "liked"
  760. 				)
  761. 			)
  762. 		);
  763. 		return container;
  764. 	};
  765.  
  766. 	const Pagination = (currentPage, maxPage, onClick) => {
  767. 		const container = DOM.create("div", "pagination-container");
  768.  
  769. 		if (maxPage < 1) {
  770. 			return container;
  771. 		}
  772.  
  773. 		let displayedPages = [];
  774. 		if (maxPage >= 3) {
  775. 			container.append(
  776. 				IconButton(
  777. 					DoubleChevronLeftIcon(),
  778. 					() => {
  779. 						onClick(0);
  780. 					},
  781. 					`pagination-skip ${currentPage === 0 && "active"}`
  782. 				)
  783. 			);
  784. 			if (currentPage >= maxPage - 1) {
  785. 				displayedPages.push(maxPage - 2, maxPage - 1, maxPage);
  786. 			} else if (currentPage === 0) {
  787. 				displayedPages.push(currentPage, currentPage + 1, currentPage + 2);
  788. 			} else {
  789. 				displayedPages.push(currentPage - 1, currentPage, currentPage + 1);
  790. 			}
  791. 		} else {
  792. 			for (let i = 0; i <= maxPage; i++) {
  793. 				displayedPages.push(i);
  794. 			}
  795. 		}
  796.  
  797. 		for (const page of displayedPages) {
  798. 			container.append(
  799. 				IconButton(
  800. 					page + 1,
  801. 					() => {
  802. 						onClick(page);
  803. 					},
  804. 					currentPage === page && "active"
  805. 				)
  806. 			);
  807. 		}
  808.  
  809. 		if (maxPage >= 3) {
  810. 			container.append(
  811. 				IconButton(
  812. 					DoubleChevronRightIcon(),
  813. 					() => {
  814. 						onClick(maxPage);
  815. 					},
  816. 					`pagination-skip ${currentPage === maxPage && "active"}`
  817. 				)
  818. 			);
  819. 		}
  820.  
  821. 		return container;
  822. 	};
  823.  
  824. 	const Modal = (content, onClose) => {
  825. 		const background = DOM.create("dialog", "modal-background");
  826. 		const container = DOM.create("div", "modal");
  827.  
  828. 		const closeButton = IconButton(CloseIcon(), (event) => {
  829. 			background.close();
  830. 			onClose(event);
  831. 		});
  832.  
  833. 		const header = DOM.create("div", "modal-header", "VoidVerified");
  834. 		header.append(closeButton);
  835. 		container.append(header);
  836.  
  837. 		const contentContainer = DOM.create("div", "modal-content", content);
  838. 		container.append(contentContainer);
  839. 		background.append(container);
  840.  
  841. 		background.setAttribute("open", true);
  842. 		return background;
  843. 	};
  844.  
  845. 	const Tooltip = (text, child) => {
  846. 		const tooltipContainer = DOM.create("div", "tooltip-container");
  847. 		const tooltip = DOM.create("div", "tooltip", text);
  848. 		tooltipContainer.append(tooltip);
  849. 		tooltipContainer.append(child);
  850. 		return tooltipContainer;
  851. 	};
  852.  
  853. 	const transformClasses = (base, additional) => {
  854. 		let classes = base;
  855. 		if (additional && additional !== "") {
  856. 			classes += ` ${additional}`;
  857. 		}
  858. 		return classes;
  859. 	};
  860.  
  861. 	const toastTypes = {
  862. 		info: "info",
  863. 		success: "success",
  864. 		warning: "warning",
  865. 		error: "error",
  866. 	};
  867.  
  868. 	const toastLevels = {
  869. 		info: 0,
  870. 		success: 1,
  871. 		warning: 2,
  872. 		error: 3,
  873. 	};
  874.  
  875. 	const toastDurations = [1, 3, 5, 10];
  876.  
  877. 	const toastLocations = ["top-left", "top-right", "bottom-left", "bottom-right"];
  878.  
  879. 	class ToasterConfig {
  880. 		toastLevel;
  881. 		duration;
  882. 		location;
  883. 		constructor(config) {
  884. 			this.toastLevel = config?.toastLevel ?? 2;
  885. 			this.duration = config?.duration ?? 5;
  886. 			this.location = config?.location ?? "bottom-left";
  887. 		}
  888. 	}
  889.  
  890. 	class ToastInstance {
  891. 		type;
  892. 		message;
  893. 		duration;
  894. 		// durationLeft;
  895. 		// interval;
  896. 		constructor(message, type, duration) {
  897. 			this.type = type;
  898. 			this.message = message;
  899. 			this.duration = duration * 1000;
  900. 		}
  901.  
  902. 		toast() {
  903. 			const toast = Toast(this.message, this.type);
  904. 			this.durationLeft = this.duration;
  905. 			// This code can be used for a visual indicator
  906.  
  907. 			// this.interval = setInterval(
  908. 			// 	(toast) => {
  909. 			// 		if (this.durationLeft <= 0) {
  910. 			// 			this.delete(toast);
  911. 			// 			clearInterval(this.interval);
  912. 			// 			return;
  913. 			// 		}
  914. 			// 		this.durationLeft -= 100;
  915. 			// 	},
  916. 			// 	100,
  917. 			// 	toast
  918. 			// );
  919.  
  920. 			setTimeout(() => {
  921. 				this.delete(toast);
  922. 			}, this.duration);
  923. 			return toast;
  924. 		}
  925.  
  926. 		delete(toast) {
  927. 			toast.remove();
  928. 		}
  929. 	}
  930.  
  931. 	class Toaster {
  932. 		static #config;
  933. 		static #configInLocalStorage = "void-verified-toaster-config";
  934. 		static #settings;
  935. 		static initializeToaster(settings) {
  936. 			this.#settings = settings;
  937. 			const config = JSON.parse(
  938. 				localStorage.getItem(this.#configInLocalStorage)
  939. 			);
  940. 			this.#config = new ToasterConfig(config);
  941. 			const toastContainer = DOM.create(
  942. 				"div",
  943. 				`#toast-container ${this.#config.location}`
  944. 			);
  945. 			document.body.append(toastContainer);
  946. 		}
  947.  
  948. 		static debug(message) {
  949. 			if (!this.#shouldToast(toastTypes.info)) {
  950. 				return;
  951. 			}
  952. 			DOM.get("#toast-container").append(
  953. 				new ToastInstance(
  954. 					message,
  955. 					toastTypes.info,
  956. 					this.#config.duration
  957. 				).toast()
  958. 			);
  959. 		}
  960.  
  961. 		static success(message) {
  962. 			if (!this.#shouldToast(toastTypes.success)) {
  963. 				return;
  964. 			}
  965.  
  966. 			DOM.get("#toast-container").append(
  967. 				new ToastInstance(
  968. 					message,
  969. 					toastTypes.success,
  970. 					this.#config.duration
  971. 				).toast()
  972. 			);
  973. 		}
  974.  
  975. 		static warning(message) {
  976. 			if (!this.#shouldToast(toastTypes.warning)) {
  977. 				return;
  978. 			}
  979.  
  980. 			DOM.get("#toast-container").append(
  981. 				new ToastInstance(
  982. 					message,
  983. 					toastTypes.warning,
  984. 					this.#config.duration
  985. 				).toast()
  986. 			);
  987. 		}
  988.  
  989. 		static error(message) {
  990. 			if (!this.#shouldToast(toastTypes.error)) {
  991. 				return;
  992. 			}
  993.  
  994. 			DOM.get("#toast-container").append(
  995. 				new ToastInstance(
  996. 					message,
  997. 					toastTypes.error,
  998. 					this.#config.duration
  999. 				).toast()
  1000. 			);
  1001. 		}
  1002.  
  1003. 		static critical(message) {
  1004. 			DOM.get("#toast-container").append(
  1005. 				new ToastInstance(message, toastTypes.error, 8).toast()
  1006. 			);
  1007. 		}
  1008.  
  1009. 		static #shouldToast(type) {
  1010. 			return (
  1011. 				this.#settings.options.toasterEnabled.getValue() &&
  1012. 				this.#config.toastLevel <= toastLevels[type]
  1013. 			);
  1014. 		}
  1015.  
  1016. 		static renderSettings(settingsUi) {
  1017. 			const container = DOM.create("div");
  1018.  
  1019. 			container.append(DOM.create("h3", null, "Configure Toasts"));
  1020.  
  1021. 			container.append(
  1022. 				DOM.create(
  1023. 					"p",
  1024. 					null,
  1025. 					"Toasts are notifications that pop up in the corner of your screen when things are happening."
  1026. 				)
  1027. 			);
  1028.  
  1029. 			const options = Object.values(toastTypes).map((type) =>
  1030. 				Option$1(type, this.#config.toastLevel === toastLevels[type], () => {
  1031. 					this.#handleLevelChange(type);
  1032. 					settingsUi.renderSettingsUiContent();
  1033. 				})
  1034. 			);
  1035. 			container.append(Label("Toast level", Select(options)));
  1036.  
  1037. 			const locationOptions = toastLocations.map((location) =>
  1038. 				Option$1(location, this.#config.location === location, () => {
  1039. 					this.#handleLocationChange(location);
  1040. 					settingsUi.renderSettingsUiContent();
  1041. 				})
  1042. 			);
  1043.  
  1044. 			container.append(Label("Toast location", Select(locationOptions)));
  1045.  
  1046. 			const durationOptions = toastDurations.map((duration) =>
  1047. 				Option$1(`${duration}s`, duration === this.#config.duration, () => {
  1048. 					this.#handleDurationChange(duration);
  1049. 					settingsUi.renderSettingsUiContent();
  1050. 				})
  1051. 			);
  1052.  
  1053. 			container.append(Label("Toast duration", Select(durationOptions)));
  1054.  
  1055. 			container.append(
  1056. 				Button("Test Toasts", () => {
  1057. 					Toaster.debug("This is a debug toast.");
  1058. 					Toaster.success("This is a success toast.");
  1059. 					Toaster.warning("This is a warning toast.");
  1060. 					Toaster.error("This is an error toast.");
  1061. 				})
  1062. 			);
  1063.  
  1064. 			return container;
  1065. 		}
  1066.  
  1067. 		static #handleLevelChange(type) {
  1068. 			this.#config.toastLevel = toastLevels[type];
  1069. 			this.#saveConfig();
  1070. 		}
  1071.  
  1072. 		static #handleLocationChange(location) {
  1073. 			this.#config.location = location;
  1074. 			this.#saveConfig();
  1075.  
  1076. 			const container = DOM.get("#toast-container");
  1077. 			for (const className of container.classList) {
  1078. 				container.classList.remove(className);
  1079. 			}
  1080. 			container.classList.add(`void-${location}`);
  1081. 		}
  1082.  
  1083. 		static #handleDurationChange(duration) {
  1084. 			this.#config.duration = duration;
  1085. 			this.#saveConfig();
  1086. 		}
  1087.  
  1088. 		static #saveConfig() {
  1089. 			localStorage.setItem(
  1090. 				this.#configInLocalStorage,
  1091. 				JSON.stringify(this.#config)
  1092. 			);
  1093. 		}
  1094. 	}
  1095.  
  1096. 	class AnilistAPI {
  1097. 		settings;
  1098. 		#userId;
  1099. 		#url = "https://graphql.anilist.co";
  1100. 		constructor(settings) {
  1101. 			this.settings = settings;
  1102. 			this.#userId = Number(JSON.parse(localStorage.getItem("auth")).id);
  1103. 		}
  1104.  
  1105. 		async getActivityCss(activityId) {
  1106. 			const query = `query ($activityId: Int) {
  1107.             Activity(id: $activityId) {
  1108.                 ... on ListActivity {
  1109.                     user {
  1110.                         name
  1111.                         about
  1112.                         options {
  1113.                             profileColor
  1114.                         }
  1115.                 }}
  1116.                 ... on TextActivity {
  1117.                     user {
  1118.                         name
  1119.                         about
  1120.                         options {
  1121.                             profileColor
  1122.                         }
  1123.                     }
  1124.                 }
  1125.                 ... on MessageActivity {
  1126.                     recipient {
  1127.                         name
  1128.                         about
  1129.                         options {
  1130.                             profileColor
  1131.                         }
  1132.                     }
  1133.                 }
  1134.             }
  1135.         }`;
  1136.  
  1137. 			const variables = { activityId };
  1138. 			const options = this.#getQueryOptions(query, variables);
  1139. 			try {
  1140. 				const data = await this.#elevatedFetch(options);
  1141. 				return data.Activity;
  1142. 			} catch (error) {
  1143. 				throw new Error("Error querying activity.", error);
  1144. 			}
  1145. 		}
  1146.  
  1147. 		async getUserAbout(username) {
  1148. 			const query = `query ($username: String) {
  1149.             User(name: $username) {
  1150.                 about
  1151.             }
  1152.         }`;
  1153.  
  1154. 			const variables = { username };
  1155. 			const options = this.#getQueryOptions(query, variables);
  1156. 			try {
  1157. 				const data = await this.#elevatedFetch(options);
  1158. 				return data.User.about;
  1159. 			} catch (error) {
  1160. 				throw new Error("Error querying user about.", error);
  1161. 			}
  1162. 		}
  1163.  
  1164. 		async saveUserAbout(about) {
  1165. 			const query = `mutation ($about: String) {
  1166.             UpdateUser(about: $about) {
  1167.                 about
  1168.             }
  1169.         }`;
  1170. 			const variables = { about };
  1171. 			const options = this.#getMutationOptions(query, variables);
  1172. 			try {
  1173. 				const data = await this.#elevatedFetch(options);
  1174. 				return data;
  1175. 			} catch (error) {
  1176. 				throw new Error("failed to save user about.", error);
  1177. 			}
  1178. 		}
  1179.  
  1180. 		async saveUserColor(color) {
  1181. 			const query = `mutation ($color: String) {
  1182.             UpdateUser(profileColor: $color) {
  1183.                 options {
  1184.                     profileColor
  1185.                 }
  1186.             }
  1187.         }`;
  1188.  
  1189. 			const variables = { color };
  1190. 			const options = this.#getMutationOptions(query, variables);
  1191. 			try {
  1192. 				const data = await this.#elevatedFetch(options);
  1193. 				return data;
  1194. 			} catch (error) {
  1195. 				throw new Error("Failed to publish profile color", error);
  1196. 			}
  1197. 		}
  1198.  
  1199. 		async saveDonatorBadge(text) {
  1200. 			const query = `mutation ($text: String) {
  1201.             UpdateUser(donatorBadge: $text) {
  1202.                 donatorBadge
  1203.             }
  1204.         }`;
  1205.  
  1206. 			const variables = { text };
  1207. 			const options = this.#getMutationOptions(query, variables);
  1208. 			try {
  1209. 				const data = await this.#elevatedFetch(options);
  1210. 				return data;
  1211. 			} catch (error) {
  1212. 				throw new Error("Failed to publish donator badge", error);
  1213. 			}
  1214. 		}
  1215.  
  1216. 		async queryVerifiedUsers() {
  1217. 			const accountUser = await this.queryUser(this.settings.anilistUser);
  1218. 			this.settings.updateUserFromApi(accountUser);
  1219. 			await this.#queryUsers(1);
  1220. 		}
  1221.  
  1222. 		async queryUser(username) {
  1223. 			const variables = { username };
  1224. 			const query = `query ($username: String!) {
  1225.                 User(name: $username) {
  1226.                   name
  1227.                   id
  1228.                   avatar {
  1229.                     large
  1230.                   }
  1231.                   bannerImage
  1232.                   options {
  1233.                     profileColor
  1234.                   }
  1235.               }
  1236.             }
  1237.         `;
  1238.  
  1239. 			const options = this.#getQueryOptions(query, variables);
  1240.  
  1241. 			try {
  1242. 				const data = await this.#elevatedFetch(options);
  1243. 				return data.User;
  1244. 			} catch (error) {
  1245. 				throw new Error("Failed to query user from Anilist API", error);
  1246. 			}
  1247. 		}
  1248.  
  1249. 		async selfMessage(message) {
  1250. 			const variables = { message, recipientId: this.#userId };
  1251. 			const query = `
  1252.             mutation($recipientId: Int, $message: String) {
  1253.                 SaveMessageActivity(message: $message, private: true, recipientId: $recipientId) {
  1254.                     id
  1255.                 }
  1256.             }
  1257.         `;
  1258.  
  1259. 			const options = this.#getMutationOptions(query, variables);
  1260.  
  1261. 			try {
  1262. 				const data = await this.#elevatedFetch(options);
  1263. 				return data.SaveMessageActivity;
  1264. 			} catch (error) {
  1265. 				throw new Error("Failed to publish a self-message");
  1266. 			}
  1267. 		}
  1268.  
  1269. 		async #elevatedFetch(options) {
  1270. 			const runElevated = this.settings.options.useElevatedFetch.getValue();
  1271. 			if (runElevated && GM.xmlHttpRequest) {
  1272. 				try {
  1273. 					const response = await GM.xmlHttpRequest({
  1274. 						method: "POST",
  1275. 						url: this.#url,
  1276. 						data: options.body,
  1277. 						headers: options.headers,
  1278. 					});
  1279. 					const data = JSON.parse(response.response);
  1280. 					return data.data;
  1281. 				} catch (error) {
  1282. 					if (error.error.includes("Request was blocked by the user")) {
  1283. 						Toaster.warning(
  1284. 							"Elevated access has been enabled in the userscript settings but user has refused permissions to run it. Using regular fetch."
  1285. 						);
  1286. 					} else {
  1287. 						Toaster.debug(
  1288. 							"Could not query AniList API with elevated access. Using regular fetch."
  1289. 						);
  1290. 					}
  1291. 					console.error(error);
  1292. 				}
  1293. 			}
  1294.  
  1295. 			const response = await fetch(this.#url, options);
  1296. 			const data = await response.json();
  1297. 			return data.data;
  1298. 		}
  1299.  
  1300. 		async #queryUsers(page) {
  1301. 			const variables = { page, userId: this.#userId };
  1302. 			const query = `query ($page: Int, $userId: Int!) {
  1303.             Page(page: $page) {
  1304.                 following(userId: $userId) {
  1305.                   name
  1306.                   id
  1307.                   avatar {
  1308.                     large
  1309.                   }
  1310.                   bannerImage
  1311.                   options {
  1312.                     profileColor
  1313.                   }
  1314.                 },
  1315.                 pageInfo {
  1316.                   total
  1317.                   perPage
  1318.                   currentPage
  1319.                   lastPage
  1320.                   hasNextPage
  1321.                 }
  1322.               }
  1323.             }
  1324.         `;
  1325.  
  1326. 			const options = this.#getQueryOptions(query, variables);
  1327.  
  1328. 			try {
  1329. 				const data = await this.#elevatedFetch(options);
  1330. 				this.#handleQueriedUsers(data.Page.following);
  1331. 				const pageInfo = data.Page.pageInfo;
  1332. 				if (pageInfo.hasNextPage) {
  1333. 					await this.#queryUsers(pageInfo.currentPage + 1);
  1334. 				}
  1335. 			} catch (error) {
  1336. 				throw new Error("Failed to query followed users.", error);
  1337. 			}
  1338. 		}
  1339.  
  1340. 		#handleQueriedUsers(users) {
  1341. 			for (const user of users) {
  1342. 				this.settings.updateUserFromApi(user);
  1343. 			}
  1344. 		}
  1345.  
  1346. 		#getQueryOptions(query, variables) {
  1347. 			const options = {
  1348. 				method: "POST",
  1349. 				headers: {
  1350. 					"Content-Type": "application/json",
  1351. 					Accept: "application/json",
  1352. 				},
  1353. 				body: JSON.stringify({
  1354. 					query,
  1355. 					variables,
  1356. 				}),
  1357. 			};
  1358.  
  1359. 			if (this.settings.auth?.token) {
  1360. 				options.headers.Authorization = `Bearer ${this.settings.auth.token}`;
  1361. 			}
  1362.  
  1363. 			return options;
  1364. 		}
  1365.  
  1366. 		#getMutationOptions(query, variables) {
  1367. 			if (!this.settings.auth?.token) {
  1368. 				Toaster.error(
  1369. 					"Tried to make API query without authorizing VoidVerified. You can do so in the settings."
  1370. 				);
  1371. 				throw new Error("VoidVerified is missing auth token.");
  1372. 			}
  1373. 			let queryOptions = this.#getQueryOptions(query, variables);
  1374. 			return queryOptions;
  1375. 		}
  1376. 	}
  1377.  
  1378. 	class Option {
  1379. 		value;
  1380. 		defaultValue;
  1381. 		description;
  1382. 		category;
  1383. 		authRequired;
  1384. 		constructor(option) {
  1385. 			this.defaultValue = option.defaultValue;
  1386. 			this.description = option.description;
  1387. 			this.category = option.category ?? categories.misc;
  1388. 			this.authRequired = option.authRequired;
  1389. 		}
  1390.  
  1391. 		getValue() {
  1392. 			if (this.value === "") {
  1393. 				return this.defaultValue;
  1394. 			}
  1395. 			return this.value ?? this.defaultValue;
  1396. 		}
  1397. 	}
  1398.  
  1399. 	class Settings {
  1400. 		localStorageUsers = "void-verified-users";
  1401. 		localStorageSettings = "void-verified-settings";
  1402. 		localStorageAuth = "void-verified-auth";
  1403. 		version;
  1404. 		auth = null;
  1405. 		anilistUser;
  1406.  
  1407. 		verifiedUsers = [];
  1408.  
  1409. 		options = {};
  1410.  
  1411. 		constructor() {
  1412. 			this.version = GM_info.script.version;
  1413. 			this.verifiedUsers =
  1414. 				JSON.parse(localStorage.getItem(this.localStorageUsers)) ?? [];
  1415.  
  1416. 			const settingsInLocalStorage =
  1417. 				JSON.parse(localStorage.getItem(this.localStorageSettings)) ?? {};
  1418.  
  1419. 			for (const [key, value] of Object.entries(defaultSettings)) {
  1420. 				this.options[key] = new Option(value);
  1421. 			}
  1422.  
  1423. 			for (const [key, value] of Object.entries(settingsInLocalStorage)) {
  1424. 				if (!this.options[key]) {
  1425. 					continue;
  1426. 				}
  1427. 				this.options[key].value = value.value;
  1428. 			}
  1429.  
  1430. 			this.auth =
  1431. 				JSON.parse(localStorage.getItem(this.localStorageAuth)) ?? null;
  1432.  
  1433. 			const auth = JSON.parse(localStorage.getItem("auth"));
  1434. 			this.anilistUser = auth?.name;
  1435. 		}
  1436.  
  1437. 		async verifyUser(username) {
  1438. 			if (
  1439. 				this.verifiedUsers.find(
  1440. 					(user) => user.username.toLowerCase() === username.toLowerCase()
  1441. 				)
  1442. 			) {
  1443. 				return;
  1444. 			}
  1445.  
  1446. 			this.verifiedUsers.push({ username });
  1447. 			localStorage.setItem(
  1448. 				this.localStorageUsers,
  1449. 				JSON.stringify(this.verifiedUsers)
  1450. 			);
  1451.  
  1452. 			try {
  1453. 				Toaster.debug(`Querying ${username}.`);
  1454. 				const anilistAPI = new AnilistAPI(this);
  1455. 				const user = await anilistAPI.queryUser(username);
  1456. 				this.updateUserFromApi(user);
  1457. 			} catch (error) {
  1458. 				Toaster.error("Failed to query new user.");
  1459. 				console.error(error);
  1460. 			}
  1461. 		}
  1462.  
  1463. 		getUser(username) {
  1464. 			return this.verifiedUsers.find((user) => user.username === username);
  1465. 		}
  1466.  
  1467. 		isVerified(username) {
  1468. 			return this.verifiedUsers.some((user) => user.username === username);
  1469. 		}
  1470.  
  1471. 		updateUserOption(username, key, value) {
  1472. 			this.verifiedUsers = this.verifiedUsers.map((u) =>
  1473. 				u.username === username
  1474. 					? {
  1475. 							...u,
  1476. 							[key]: value,
  1477. 					  }
  1478. 					: u
  1479. 			);
  1480. 			localStorage.setItem(
  1481. 				this.localStorageUsers,
  1482. 				JSON.stringify(this.verifiedUsers)
  1483. 			);
  1484. 		}
  1485.  
  1486. 		updateUserFromApi(apiUser) {
  1487. 			let user = this.#findVerifiedUser(apiUser);
  1488.  
  1489. 			if (!user) {
  1490. 				return;
  1491. 			}
  1492.  
  1493. 			const newUser = this.#mapApiUser(user, apiUser);
  1494. 			this.#mapVerifiedUsers(newUser);
  1495.  
  1496. 			localStorage.setItem(
  1497. 				this.localStorageUsers,
  1498. 				JSON.stringify(this.verifiedUsers)
  1499. 			);
  1500. 		}
  1501.  
  1502. 		#findVerifiedUser(apiUser) {
  1503. 			let user = this.verifiedUsers.find((u) => u.id && u.id === apiUser.id);
  1504.  
  1505. 			if (user) {
  1506. 				return user;
  1507. 			}
  1508.  
  1509. 			return this.verifiedUsers.find(
  1510. 				(u) => u.username.toLowerCase() === apiUser.name.toLowerCase()
  1511. 			);
  1512. 		}
  1513.  
  1514. 		#mapVerifiedUsers(newUser) {
  1515. 			if (this.verifiedUsers.find((u) => u.id && u.id === newUser.id)) {
  1516. 				this.verifiedUsers = this.verifiedUsers.map((u) =>
  1517. 					u.id === newUser.id ? newUser : u
  1518. 				);
  1519. 				return;
  1520. 			}
  1521. 			this.verifiedUsers = this.verifiedUsers.map((u) =>
  1522. 				u.username.toLowerCase() === newUser.username.toLowerCase()
  1523. 					? newUser
  1524. 					: u
  1525. 			);
  1526. 		}
  1527.  
  1528. 		#mapApiUser(user, apiUser) {
  1529. 			let userObject = { ...user };
  1530.  
  1531. 			userObject.color = ColorFunctions.handleAnilistColor(
  1532. 				apiUser.options.profileColor
  1533. 			);
  1534.  
  1535. 			userObject.username = apiUser.name;
  1536. 			userObject.avatar = apiUser.avatar.large;
  1537. 			userObject.banner = apiUser.bannerImage;
  1538. 			userObject.id = apiUser.id;
  1539. 			userObject.lastFetch = new Date();
  1540.  
  1541. 			if (this.options.quickAccessBadge.getValue() || user.quickAccessBadge) {
  1542. 				if (
  1543. 					(user.avatar && user.avatar !== userObject.avatar) ||
  1544. 					(user.color && user.color !== userObject.color) ||
  1545. 					(user.banner && user.banner !== userObject.banner) ||
  1546. 					(user.username &&
  1547. 						user.username.toLowerCase() !==
  1548. 							userObject.username.toLowerCase())
  1549. 				) {
  1550. 					userObject.quickAccessBadgeDisplay = true;
  1551. 				}
  1552. 			}
  1553.  
  1554. 			return userObject;
  1555. 		}
  1556.  
  1557. 		saveAuthToken(tokenObject) {
  1558. 			this.auth = tokenObject;
  1559. 			localStorage.setItem(
  1560. 				this.localStorageAuth,
  1561. 				JSON.stringify(tokenObject)
  1562. 			);
  1563. 		}
  1564.  
  1565. 		removeAuthToken() {
  1566. 			this.auth = null;
  1567. 			localStorage.removeItem(this.localStorageAuth);
  1568. 		}
  1569.  
  1570. 		removeUser(username) {
  1571. 			this.verifiedUsers = this.verifiedUsers.filter(
  1572. 				(user) => user.username !== username
  1573. 			);
  1574. 			localStorage.setItem(
  1575. 				this.localStorageUsers,
  1576. 				JSON.stringify(this.verifiedUsers)
  1577. 			);
  1578. 		}
  1579.  
  1580. 		saveSettingToLocalStorage(key, value) {
  1581. 			let localSettings = JSON.parse(
  1582. 				localStorage.getItem(this.localStorageSettings)
  1583. 			);
  1584.  
  1585. 			this.options[key].value = value;
  1586.  
  1587. 			if (localSettings === null) {
  1588. 				const settings = {
  1589. 					[key]: value,
  1590. 				};
  1591. 				localStorage.setItem(
  1592. 					this.localStorageSettings,
  1593. 					JSON.stringify(settings)
  1594. 				);
  1595. 				return;
  1596. 			}
  1597.  
  1598. 			localSettings[key] = { value };
  1599. 			localStorage.setItem(
  1600. 				this.localStorageSettings,
  1601. 				JSON.stringify(localSettings)
  1602. 			);
  1603. 		}
  1604. 	}
  1605.  
  1606. 	class StyleHandler {
  1607. 		settings;
  1608. 		usernameStyles = "";
  1609. 		highlightStyles = "";
  1610. 		otherStyles = "";
  1611.  
  1612. 		constructor(settings) {
  1613. 			this.settings = settings;
  1614. 		}
  1615.  
  1616. 		refreshStyles() {
  1617. 			this.createStyles();
  1618. 			this.createStyleLink(this.usernameStyles, "username");
  1619. 			this.createStyleLink(this.highlightStyles, "highlight");
  1620. 			this.createStyleLink(this.otherStyles, "other");
  1621. 		}
  1622.  
  1623. 		createStyles() {
  1624. 			this.usernameStyles = "";
  1625. 			this.otherStyles = "";
  1626.  
  1627. 			for (const user of this.settings.verifiedUsers) {
  1628. 				if (
  1629. 					this.settings.options.enabledForUsername.getValue() ||
  1630. 					user.enabledForUsername
  1631. 				) {
  1632. 					this.createUsernameCSS(user);
  1633. 				}
  1634. 			}
  1635.  
  1636. 			if (this.settings.options.moveSubscribeButtons.getValue()) {
  1637. 				this.otherStyles += `
  1638.                 .has-label::before {
  1639.                 top: -30px !important;
  1640.                 left: unset !important;
  1641.                 right: -10px;
  1642.                 }
  1643.  
  1644.                 .has-label[label="Unsubscribe"],
  1645.                 .has-label[label="Subscribe"] {
  1646.                 font-size: 0.875em !important;
  1647.                 }
  1648.  
  1649.                 .has-label[label="Unsubscribe"] {
  1650.                 color: rgba(var(--color-green),.8);
  1651.                 }
  1652.                 `;
  1653. 			}
  1654.  
  1655. 			this.createHighlightStyles();
  1656.  
  1657. 			if (this.settings.options.hideLikeCount.getValue()) {
  1658. 				this.otherStyles += `
  1659.                     .like-wrap .count {
  1660.                         display: none;
  1661.                     }
  1662.                 `;
  1663. 			}
  1664. 		}
  1665.  
  1666. 		createHighlightStyles() {
  1667. 			this.highlightStyles = "";
  1668. 			for (const user of this.settings.verifiedUsers) {
  1669. 				if (
  1670. 					this.settings.options.highlightEnabled.getValue() ||
  1671. 					user.highlightEnabled
  1672. 				) {
  1673. 					this.createHighlightCSS(
  1674. 						user,
  1675. 						`div.wrap:has( div.header > a.name[href*="/${user.username}/" i] )`
  1676. 					);
  1677. 					this.createHighlightCSS(
  1678. 						user,
  1679. 						`div.wrap:has( div.details > a.name[href*="/${user.username}/" i] )`
  1680. 					);
  1681. 				}
  1682.  
  1683. 				if (
  1684. 					this.settings.options.highlightEnabledForReplies.getValue() ||
  1685. 					user.highlightEnabledForReplies
  1686. 				) {
  1687. 					this.createHighlightCSS(
  1688. 						user,
  1689. 						`div.reply:has( a.name[href*="/${user.username}/" i] )`
  1690. 					);
  1691. 				}
  1692.  
  1693. 				this.#createActivityCss(user);
  1694. 			}
  1695.  
  1696. 			this.disableHighlightOnSmallCards();
  1697. 		}
  1698.  
  1699. 		#createActivityCss(user) {
  1700. 			const colorUserActivity =
  1701. 				this.settings.options.colorUserActivity.getValue() ??
  1702. 				user.colorUserActivity;
  1703. 			const colorUserReplies =
  1704. 				this.settings.options.colorUserReplies.getValue() ??
  1705. 				user.colorUserReplies;
  1706.  
  1707. 			if (colorUserActivity) {
  1708. 				this.highlightStyles += `
  1709.                 div.wrap:has( div.header > a.name[href*="/${
  1710. 					user.username
  1711. 				}/"]) a,
  1712.                 div.wrap:has( div.details > a.name[href*="/${
  1713. 					user.username
  1714. 				}/"]) a
  1715.                 {
  1716.                     color: ${this.getUserColor(user)};
  1717.                 }
  1718.             `;
  1719. 			}
  1720. 			if (colorUserReplies) {
  1721. 				this.highlightStyles += `
  1722.                 .reply:has(a.name[href*="/${user.username}/"]) a,
  1723.                 .reply:has(a.name[href*="/${
  1724. 					user.username
  1725. 				}/"]) .markdown-spoiler::before
  1726.                 {
  1727.                     color: ${this.getUserColor(user)};
  1728.                 }
  1729.             `;
  1730. 			}
  1731. 		}
  1732.  
  1733. 		createUsernameCSS(user) {
  1734. 			this.usernameStyles += `
  1735.             a.name[href*="/${user.username}/" i]::after {
  1736.                 content: "${
  1737. 					this.stringIsEmpty(user.sign) ??
  1738. 					this.settings.options.defaultSign.getValue()
  1739. 				}";
  1740.                 color: ${this.getUserColor(user) ?? "rgb(var(--color-blue))"}
  1741.             }
  1742.         `;
  1743. 		}
  1744.  
  1745. 		createHighlightCSS(user, selector) {
  1746. 			this.highlightStyles += `
  1747.                 ${selector} {
  1748.                     margin-right: -${this.settings.options.highlightSize.getValue()};
  1749.                     border-right: ${this.settings.options.highlightSize.getValue()} solid ${
  1750. 			this.getUserColor(user) ?? this.getDefaultHighlightColor()
  1751. 		};
  1752.                     border-radius: 5px;
  1753.                 }
  1754.                 `;
  1755. 		}
  1756.  
  1757. 		disableHighlightOnSmallCards() {
  1758. 			this.highlightStyles += `
  1759.                 div.wrap:has(div.small) {
  1760.                 margin-right: 0px !important;
  1761.                 border-right: 0px solid black !important;
  1762.                 }
  1763.                 `;
  1764. 		}
  1765.  
  1766. 		refreshHomePage() {
  1767. 			if (!this.settings.options.highlightEnabled.getValue()) {
  1768. 				return;
  1769. 			}
  1770. 			this.createHighlightStyles();
  1771. 			this.createStyleLink(this.highlightStyles, "highlight");
  1772. 		}
  1773.  
  1774. 		clearStyles(id) {
  1775. 			const styles = document.getElementById(`void-verified-${id}-styles`);
  1776. 			styles?.remove();
  1777. 		}
  1778.  
  1779. 		verifyProfile() {
  1780. 			if (!this.settings.options.enabledForProfileName.getValue()) {
  1781. 				return;
  1782. 			}
  1783.  
  1784. 			const username =
  1785. 				window.location.pathname.match(/^\/user\/([^/]*)\/?/)[1];
  1786.  
  1787. 			const user = this.settings.verifiedUsers.find(
  1788. 				(u) => u.username.toLowerCase() === username.toLowerCase()
  1789. 			);
  1790.  
  1791. 			if (!user) {
  1792. 				this.clearStyles("profile");
  1793. 				return;
  1794. 			}
  1795.  
  1796. 			const profileStyle = `
  1797.                     .name-wrapper h1.name::after {
  1798.                     content: "${
  1799. 						this.stringIsEmpty(user.sign) ??
  1800. 						this.settings.options.defaultSign.getValue()
  1801. 					}"
  1802.                     }
  1803.                 `;
  1804. 			this.createStyleLink(profileStyle, "profile");
  1805. 		}
  1806.  
  1807. 		getStyleLink(id) {
  1808. 			return document.getElementById(`void-verified-${id}-styles`);
  1809. 		}
  1810.  
  1811. 		copyUserColor() {
  1812. 			const usernameHeader = document.querySelector("h1.name");
  1813. 			const username = usernameHeader.innerHTML.trim();
  1814. 			const user = this.settings.verifiedUsers.find(
  1815. 				(u) => u.username === username
  1816. 			);
  1817.  
  1818. 			if (!user) {
  1819. 				return;
  1820. 			}
  1821.  
  1822. 			if (
  1823. 				!(
  1824. 					user.copyColorFromProfile ||
  1825. 					this.settings.options.copyColorFromProfile.getValue()
  1826. 				)
  1827. 			) {
  1828. 				return;
  1829. 			}
  1830.  
  1831. 			const color =
  1832. 				getComputedStyle(usernameHeader).getPropertyValue("--color-blue");
  1833.  
  1834. 			this.settings.updateUserOption(user.username, "color", color);
  1835. 		}
  1836.  
  1837. 		getUserColor(user) {
  1838. 			return (
  1839. 				user.colorOverride ??
  1840. 				(user.color &&
  1841. 				(user.copyColorFromProfile ||
  1842. 					this.settings.options.copyColorFromProfile.getValue())
  1843. 					? `rgb(${user.color})`
  1844. 					: undefined)
  1845. 			);
  1846. 		}
  1847.  
  1848. 		getDefaultHighlightColor() {
  1849. 			if (this.settings.options.useDefaultHighlightColor.getValue()) {
  1850. 				return this.settings.options.defaultHighlightColor.getValue();
  1851. 			}
  1852. 			return "rgb(var(--color-blue))";
  1853. 		}
  1854.  
  1855. 		createStyleLink(styles, id) {
  1856. 			const oldLink = document.getElementById(`void-verified-${id}-styles`);
  1857. 			const link = document.createElement("link");
  1858. 			link.setAttribute("id", `void-verified-${id}-styles`);
  1859. 			link.setAttribute("rel", "stylesheet");
  1860. 			link.setAttribute("type", "text/css");
  1861. 			link.setAttribute(
  1862. 				"href",
  1863. 				"data:text/css;charset=UTF-8," + encodeURIComponent(styles)
  1864. 			);
  1865. 			document.head?.append(link);
  1866. 			oldLink?.remove();
  1867. 			return link;
  1868. 		}
  1869.  
  1870. 		stringIsEmpty(string) {
  1871. 			if (!string || string.length === 0) {
  1872. 				return undefined;
  1873. 			}
  1874. 			return string;
  1875. 		}
  1876. 	}
  1877.  
  1878. 	class GlobalCSS {
  1879. 		settings;
  1880. 		styleHandler;
  1881.  
  1882. 		styleId = "global-css";
  1883. 		isCleared = false;
  1884.  
  1885. 		cssInLocalStorage = "void-verified-global-css";
  1886. 		constructor(settings) {
  1887. 			this.settings = settings;
  1888. 			this.styleHandler = new StyleHandler(settings);
  1889.  
  1890. 			this.css = localStorage.getItem(this.cssInLocalStorage) ?? "";
  1891. 		}
  1892.  
  1893. 		createCss() {
  1894. 			if (!this.settings.options.globalCssEnabled.getValue()) {
  1895. 				this.styleHandler.clearStyles(this.styleId);
  1896. 				return;
  1897. 			}
  1898.  
  1899. 			if (!this.shouldRender()) {
  1900. 				return;
  1901. 			}
  1902.  
  1903. 			this.isCleared = false;
  1904. 			this.styleHandler.createStyleLink(this.css, this.styleId);
  1905. 		}
  1906.  
  1907. 		updateCss(css) {
  1908. 			this.css = css;
  1909. 			this.createCss();
  1910. 			localStorage.setItem(this.cssInLocalStorage, css);
  1911. 		}
  1912.  
  1913. 		clearCssForProfile() {
  1914. 			if (this.isCleared) {
  1915. 				return;
  1916. 			}
  1917. 			if (!this.shouldRender()) {
  1918. 				this.styleHandler.clearStyles(this.styleId);
  1919. 				this.isCleared = true;
  1920. 			}
  1921. 		}
  1922.  
  1923. 		shouldRender() {
  1924. 			if (window.location.pathname.startsWith("/settings")) {
  1925. 				return false;
  1926. 			}
  1927.  
  1928. 			if (!this.settings.options.globalCssAutoDisable.getValue()) {
  1929. 				return true;
  1930. 			}
  1931.  
  1932. 			if (
  1933. 				!window.location.pathname.startsWith("/user/") &&
  1934. 				!window.location.pathname.startsWith("/activity/")
  1935. 			) {
  1936. 				return true;
  1937. 			}
  1938.  
  1939. 			const profileCustomCss = document.getElementById(
  1940. 				"customCSS-automail-styles"
  1941. 			);
  1942.  
  1943. 			const styleHandler = new StyleHandler(this.settings);
  1944. 			const voidActivityStyles = styleHandler.getStyleLink("activity-css");
  1945. 			const voidUserStyles = styleHandler.getStyleLink("user-css");
  1946.  
  1947. 			if (voidActivityStyles || voidUserStyles) {
  1948. 				return false;
  1949. 			}
  1950.  
  1951. 			if (!profileCustomCss) {
  1952. 				return true;
  1953. 			}
  1954.  
  1955. 			const shouldRender = profileCustomCss.innerHTML.trim().length === 0;
  1956. 			return shouldRender;
  1957. 		}
  1958. 	}
  1959.  
  1960. 	class ActivityHandler {
  1961. 		settings;
  1962. 		constructor(settings) {
  1963. 			this.settings = settings;
  1964. 		}
  1965.  
  1966. 		moveAndDisplaySubscribeButton() {
  1967. 			if (!this.settings.options.moveSubscribeButtons.getValue()) {
  1968. 				return;
  1969. 			}
  1970.  
  1971. 			const subscribeButtons = document.querySelectorAll(
  1972. 				"span[label='Unsubscribe'], span[label='Subscribe']"
  1973. 			);
  1974. 			for (const subscribeButton of subscribeButtons) {
  1975. 				if (subscribeButton.parentNode.classList.contains("actions")) {
  1976. 					continue;
  1977. 				}
  1978.  
  1979. 				const container = subscribeButton.parentNode.parentNode;
  1980. 				const actions = container.querySelector(".actions");
  1981. 				actions.append(subscribeButton);
  1982. 			}
  1983. 		}
  1984.  
  1985. 		addSelfMessageButton() {
  1986. 			if (!this.settings.options.selfMessageEnabled.getValue()) {
  1987. 				return;
  1988. 			}
  1989.  
  1990. 			if (
  1991. 				!window.location.pathname.startsWith(
  1992. 					`/user/${this.settings.anilistUser}`
  1993. 				)
  1994. 			) {
  1995. 				return;
  1996. 			}
  1997.  
  1998. 			const activityEditActions = document.querySelector(
  1999. 				".activity-feed-wrap > .activity-edit > .actions"
  2000. 			);
  2001. 			if (
  2002. 				!activityEditActions ||
  2003. 				activityEditActions?.querySelector(".void-self-message")
  2004. 			) {
  2005. 				return;
  2006. 			}
  2007.  
  2008. 			activityEditActions.append(
  2009. 				Button(
  2010. 					"Message Self",
  2011. 					() => {
  2012. 						this.#handleSelfMessage(this.settings);
  2013. 					},
  2014. 					"self-message"
  2015. 				)
  2016. 			);
  2017. 		}
  2018.  
  2019. 		async #handleSelfMessage(settings) {
  2020. 			const anilistAPI = new AnilistAPI(settings);
  2021. 			const message = document.querySelector(
  2022. 				".activity-feed-wrap > .activity-edit textarea"
  2023. 			).value;
  2024. 			try {
  2025. 				Toaster.debug("Self-publishing a message.");
  2026. 				const response = await anilistAPI.selfMessage(message);
  2027. 				Toaster.success("Message self-published.");
  2028. 				window.location.replace(
  2029. 					`https://anilist.co/activity/${response.id}`
  2030. 				);
  2031. 			} catch (err) {
  2032. 				console.error(err);
  2033. 				Toaster.error("There was an error self-publishing a message.");
  2034. 			}
  2035. 		}
  2036.  
  2037. 		removeBlankFromAnilistLinks() {
  2038. 			if (!this.settings.options.removeAnilistBlanks.getValue()) {
  2039. 				return;
  2040. 			}
  2041.  
  2042. 			const anilistLinks = document.querySelectorAll(
  2043. 				"a:not(.void-link)[href^='https://anilist.co'][target='_blank']"
  2044. 			);
  2045.  
  2046. 			for (const link of anilistLinks) {
  2047. 				link.removeAttribute("target");
  2048. 			}
  2049. 		}
  2050. 	}
  2051.  
  2052. 	class ImageHostBase {
  2053. 		conventToBase64(image) {
  2054. 			return new Promise(function (resolve, reject) {
  2055. 				var reader = new FileReader();
  2056. 				reader.onloadend = function (e) {
  2057. 					resolve({
  2058. 						fileName: this.name,
  2059. 						result: e.target.result,
  2060. 						error: e.target.error,
  2061. 					});
  2062. 				};
  2063. 				reader.readAsDataURL(image);
  2064. 			});
  2065. 		}
  2066. 	}
  2067.  
  2068. 	const imageHosts = {
  2069. 		imgbb: "imgbb",
  2070. 		imgur: "imgur",
  2071. 		catbox: "catbox",
  2072. 	};
  2073.  
  2074. 	const imageHostConfiguration = {
  2075. 		selectedHost: imageHosts.catbox,
  2076. 		configurations: {
  2077. 			imgbb: {
  2078. 				name: "imgbb",
  2079. 				apiKey: "",
  2080. 			},
  2081. 			imgur: {
  2082. 				name: "imgur",
  2083. 				clientId: "",
  2084. 				clientSecret: "",
  2085. 				expires: null,
  2086. 				refreshToken: null,
  2087. 				authToken: null,
  2088. 			},
  2089. 			catbox: {
  2090. 				name: "catbox",
  2091. 				userHash: "",
  2092. 			},
  2093. 		},
  2094. 	};
  2095.  
  2096. 	class ImageHostService {
  2097. 		#configuration;
  2098. 		#localStorage = "void-verified-image-host-config";
  2099. 		constructor() {
  2100. 			const config = JSON.parse(localStorage.getItem(this.#localStorage));
  2101. 			if (!config) {
  2102. 				localStorage.setItem(
  2103. 					this.#localStorage,
  2104. 					JSON.stringify(imageHostConfiguration)
  2105. 				);
  2106. 			} else {
  2107. 				for (const key of Object.keys(
  2108. 					imageHostConfiguration.configurations
  2109. 				)) {
  2110. 					if (config.configurations[key]) {
  2111. 						continue;
  2112. 					}
  2113. 					config.configurations[key] =
  2114. 						imageHostConfiguration.configurations[key];
  2115. 				}
  2116. 				localStorage.setItem(this.#localStorage, JSON.stringify(config));
  2117. 			}
  2118.  
  2119. 			this.#configuration = config ?? imageHostConfiguration;
  2120. 		}
  2121.  
  2122. 		getImageHostConfiguration(host) {
  2123. 			return this.#configuration.configurations[host];
  2124. 		}
  2125.  
  2126. 		getSelectedHost() {
  2127. 			return this.#configuration.selectedHost;
  2128. 		}
  2129.  
  2130. 		setSelectedHost(host) {
  2131. 			this.#configuration.selectedHost = host;
  2132. 			localStorage.setItem(
  2133. 				this.#localStorage,
  2134. 				JSON.stringify(this.#configuration)
  2135. 			);
  2136. 		}
  2137.  
  2138. 		setImageHostConfiguration(host, config) {
  2139. 			this.#configuration.configurations[host] = config;
  2140. 			localStorage.setItem(
  2141. 				this.#localStorage,
  2142. 				JSON.stringify(this.#configuration)
  2143. 			);
  2144. 		}
  2145. 	}
  2146.  
  2147. 	class CatboxConfig {
  2148. 		userHash;
  2149. 		name = "catbox";
  2150. 		constructor(config) {
  2151. 			this.userHash = config?.userHash ?? "";
  2152. 		}
  2153. 	}
  2154.  
  2155. 	class CatboxAPI extends ImageHostBase {
  2156. 		#url = "https://catbox.moe/user/api.php";
  2157. 		#configuration;
  2158. 		constructor(configuration) {
  2159. 			super();
  2160. 			this.#configuration = new CatboxConfig(configuration);
  2161. 		}
  2162.  
  2163. 		async uploadImage(image) {
  2164. 			if (!image) {
  2165. 				return;
  2166. 			}
  2167.  
  2168. 			const form = new FormData();
  2169. 			form.append("reqtype", "fileupload");
  2170. 			form.append("fileToUpload", image);
  2171.  
  2172. 			if (this.#configuration.userHash !== "") {
  2173. 				form.append("userhash", this.#configuration.userHash);
  2174. 			}
  2175.  
  2176. 			try {
  2177. 				if (GM.xmlHttpRequest) {
  2178. 					Toaster.debug("Uploading image to catbox.");
  2179. 					const response = await GM.xmlHttpRequest({
  2180. 						method: "POST",
  2181. 						url: this.#url,
  2182. 						data: form,
  2183. 					});
  2184.  
  2185. 					if (response.status !== 200) {
  2186. 						console.error(response.response);
  2187. 						throw new Error("Image upload to catbox failed.");
  2188. 					}
  2189.  
  2190. 					return response.response;
  2191. 				}
  2192. 			} catch (error) {
  2193. 				Toaster.error("Failed to upload image to catbox.");
  2194. 				return null;
  2195. 			}
  2196. 		}
  2197.  
  2198. 		renderSettings() {
  2199. 			const container = DOM.create("div");
  2200.  
  2201. 			container.append(
  2202. 				Label(
  2203. 					"Userhash",
  2204. 					SecretField(this.#configuration.userHash, (event) => {
  2205. 						this.#updateUserhash(event, this.#configuration);
  2206. 					})
  2207. 				)
  2208. 			);
  2209.  
  2210. 			const p = Note(
  2211. 				"Catbox.moe works out of the box, but you can provide your userhash to upload images to your account. Your userscript manager should promt you to allow xmlHttpRequest. This is required to upload images to Catbox on AniList."
  2212. 			);
  2213. 			container.append(p);
  2214. 			return container;
  2215. 		}
  2216.  
  2217. 		#updateUserhash(event, configuration) {
  2218. 			const userHash = event.target.value;
  2219. 			const config = {
  2220. 				...configuration,
  2221. 				userHash,
  2222. 			};
  2223. 			new ImageHostService().setImageHostConfiguration(config.name, config);
  2224. 		}
  2225. 	}
  2226.  
  2227. 	class ImgbbAPI extends ImageHostBase {
  2228. 		#url = "https://api.imgbb.com/1/upload";
  2229. 		#configuration;
  2230. 		constructor(configuration) {
  2231. 			super();
  2232. 			this.#configuration = configuration;
  2233. 		}
  2234.  
  2235. 		async uploadImage(image) {
  2236. 			const file = await this.conventToBase64(image);
  2237. 			if (!file.result) {
  2238. 				return;
  2239. 			}
  2240.  
  2241. 			if (!this.#configuration.apiKey) {
  2242. 				return;
  2243. 			}
  2244.  
  2245. 			const base64 = file.result.split("base64,")[1];
  2246.  
  2247. 			const settings = {
  2248. 				method: "POST",
  2249. 				headers: {
  2250. 					Accept: "application/json",
  2251. 					"Content-Type": "application/x-www-form-urlencoded",
  2252. 				},
  2253. 				body:
  2254. 					"image=" +
  2255. 					encodeURIComponent(base64) +
  2256. 					"&name=" +
  2257. 					image.name.split(".")[0],
  2258. 			};
  2259.  
  2260. 			try {
  2261. 				Toaster.debug("Uploading image to imgbb.");
  2262. 				const response = await fetch(
  2263. 					`${this.#url}?key=${this.#configuration.apiKey}`,
  2264. 					settings
  2265. 				);
  2266. 				const data = await response.json();
  2267. 				Toaster.success("Uploaded image to imgbb.");
  2268. 				return data.data.url;
  2269. 			} catch (error) {
  2270. 				Toaster.error("Failed to upload image to imgbb.");
  2271. 				console.error(error);
  2272. 				return null;
  2273. 			}
  2274. 		}
  2275.  
  2276. 		renderSettings() {
  2277. 			const container = document.createElement("div");
  2278.  
  2279. 			const apiKey = Label(
  2280. 				"API key",
  2281. 				SecretField(this.#configuration.apiKey, (event) => {
  2282. 					this.#updateApiKey(event, this.#configuration);
  2283. 				})
  2284. 			);
  2285.  
  2286. 			const note = Note(
  2287. 				"You need to get the API key from the following link: "
  2288. 			);
  2289. 			note.append(Link("api.imgbb.com", "https://api.imgbb.com/", "_blank"));
  2290. 			container.append(apiKey, note);
  2291.  
  2292. 			return container;
  2293. 		}
  2294.  
  2295. 		#updateApiKey(event, configuration) {
  2296. 			const apiKey = event.target.value;
  2297. 			const config = {
  2298. 				...configuration,
  2299. 				apiKey,
  2300. 			};
  2301. 			new ImageHostService().setImageHostConfiguration(config.name, config);
  2302. 		}
  2303. 	}
  2304.  
  2305. 	class ImgurAPI extends ImageHostBase {
  2306. 		#url = "https://api.imgur.com/3/image";
  2307. 		#configuration;
  2308. 		constructor(configuration) {
  2309. 			super();
  2310. 			this.#configuration = configuration;
  2311. 		}
  2312.  
  2313. 		async uploadImage(image) {
  2314. 			const file = await this.conventToBase64(image);
  2315. 			if (!file.result) {
  2316. 				return;
  2317. 			}
  2318.  
  2319. 			if (!this.#configuration.clientId) {
  2320. 				return;
  2321. 			}
  2322.  
  2323. 			const base64 = file.result.split("base64,")[1];
  2324.  
  2325. 			const formData = new FormData();
  2326. 			formData.append("image", base64);
  2327. 			formData.append("title", image.name.split(".")[0]);
  2328.  
  2329. 			const settings = {
  2330. 				method: "POST",
  2331. 				headers: {
  2332. 					Authorization: this.#configuration.authToken
  2333. 						? `Bearer ${this.#configuration.authToken}`
  2334. 						: `Client-ID ${this.#configuration.clientId}`,
  2335. 				},
  2336. 				body: formData,
  2337. 			};
  2338.  
  2339. 			try {
  2340. 				Toaster.debug("Uploading image to imgur.");
  2341. 				const response = await fetch(this.#url, settings);
  2342. 				const data = await response.json();
  2343. 				Toaster.success("Uploaded image to imgur.");
  2344. 				return data.data.link;
  2345. 			} catch (error) {
  2346. 				Toaster.error("Failed to upload image to imgur.");
  2347. 				console.error("Failed to upload image to imgur.", error);
  2348. 				return null;
  2349. 			}
  2350. 		}
  2351.  
  2352. 		renderSettings(settingsUi) {
  2353. 			const container = DOM.create("div");
  2354.  
  2355. 			const clientId = Label(
  2356. 				"Client ID",
  2357. 				SecretField(this.#configuration?.clientId ?? "", (event) => {
  2358. 					this.#updateConfig(event, "clientId", this.#configuration);
  2359. 					settingsUi.renderSettingsUiContent();
  2360. 				})
  2361. 			);
  2362.  
  2363. 			const clientSecret = Label(
  2364. 				"Client Secret",
  2365. 				SecretField(this.#configuration?.clientSecret ?? "", (event) => {
  2366. 					this.#updateConfig(event, "clientSecret", this.#configuration);
  2367. 					settingsUi.renderSettingsUiContent();
  2368. 				})
  2369. 			);
  2370.  
  2371. 			container.append(clientId, clientSecret);
  2372.  
  2373. 			if (
  2374. 				this.#configuration.clientId &&
  2375. 				this.#configuration.clientSecret &&
  2376. 				!this.#configuration.authToken
  2377. 			) {
  2378. 				const authLink = DOM.create("a", null, "Authorize Imgur");
  2379. 				authLink.classList.add("button");
  2380. 				authLink.setAttribute(
  2381. 					"href",
  2382. 					`https://api.imgur.com/oauth2/authorize?client_id=${
  2383. 					this.#configuration.clientId
  2384. 				}&response_type=token`
  2385. 				);
  2386. 				container.append(authLink);
  2387. 			}
  2388.  
  2389. 			if (this.#configuration.authToken) {
  2390. 				const revokeAuthButton = DOM.create(
  2391. 					"button",
  2392. 					null,
  2393. 					"Clear Authorization"
  2394. 				);
  2395. 				revokeAuthButton.classList.add("button");
  2396. 				revokeAuthButton.addEventListener("click", () => {
  2397. 					this.#revokeAuth();
  2398. 					settingsUi.renderSettingsUiContent();
  2399. 				});
  2400. 				container.append(revokeAuthButton);
  2401. 			}
  2402.  
  2403. 			this.#renderNote(container);
  2404. 			return container;
  2405. 		}
  2406.  
  2407. 		handleAuth() {
  2408. 			const hash = window.location.hash.substring(1);
  2409. 			if (!hash) {
  2410. 				return;
  2411. 			}
  2412.  
  2413. 			const [path, token, expires, _, refreshToken] = hash.split("&");
  2414.  
  2415. 			if (path !== "void_imgur") {
  2416. 				return;
  2417. 			}
  2418.  
  2419. 			let config = { ...this.#configuration };
  2420. 			config.authToken = token.split("=")[1];
  2421. 			config.refreshToken = refreshToken.split("=")[1];
  2422.  
  2423. 			config.expires = new Date(
  2424. 				new Date().getTime() + Number(expires.split("=")[1])
  2425. 			);
  2426.  
  2427. 			new ImageHostService().setImageHostConfiguration(
  2428. 				imageHosts.imgur,
  2429. 				config
  2430. 			);
  2431.  
  2432. 			window.history.replaceState(
  2433. 				null,
  2434. 				"",
  2435. 				"https://anilist.co/settings/developer"
  2436. 			);
  2437. 		}
  2438.  
  2439. 		async refreshAuthToken() {
  2440. 			if (
  2441. 				!this.#configuration.refreshToken ||
  2442. 				!this.#configuration.clientSecret ||
  2443. 				!this.#configuration.clientId
  2444. 			) {
  2445. 				return;
  2446. 			}
  2447.  
  2448. 			if (new Date() < new Date(this.#configuration.expires)) {
  2449. 				return;
  2450. 			}
  2451.  
  2452. 			const formData = new FormData();
  2453. 			formData.append("refresh_token", this.#configuration.refreshToken);
  2454. 			formData.append("client_id", this.#configuration.clientId);
  2455. 			formData.append("client_secret", this.#configuration.clientSecret);
  2456. 			formData.append("grant_type", "refresh_token");
  2457.  
  2458. 			try {
  2459. 				Toaster.debug("Refreshing imgur token.");
  2460. 				const response = await fetch("https://api.imgur.com/oauth2/token", {
  2461. 					method: "POST",
  2462. 					body: formData,
  2463. 				});
  2464. 				if (!response.status === 200) {
  2465. 					console.error("Failed to reauthorize Imgur");
  2466. 					return;
  2467. 				}
  2468. 				const data = await response.json();
  2469. 				const config = {
  2470. 					...this.#configuration,
  2471. 					authToken: data.access_token,
  2472. 					expires: new Date(new Date().getTime() + data.expires_in),
  2473. 				};
  2474. 				new ImageHostService().setImageHostConfiguration(
  2475. 					imageHosts.imgur,
  2476. 					config
  2477. 				);
  2478. 				Toaster.success("Refreshed imgur access token.");
  2479. 			} catch (error) {
  2480. 				Toaster.error("Error while refreshing imgur token.");
  2481. 				console.error(error);
  2482. 			}
  2483. 		}
  2484.  
  2485. 		#renderNote(container) {
  2486. 			const note = Note("How to setup Imgur integration");
  2487.  
  2488. 			const registerLink = Link(
  2489. 				"api.imgur.com",
  2490. 				"https://api.imgur.com/oauth2/addclient",
  2491. 				"_blank"
  2492. 			);
  2493. 			const stepList = DOM.create("ol", null, [
  2494. 				DOM.create("li", null, [
  2495. 					"Register your application: ",
  2496. 					registerLink,
  2497. 					". Use 'https://anilist.co/settings/developer#void_imgur' as callback URL.",
  2498. 				]),
  2499. 				DOM.create(
  2500. 					"li",
  2501. 					null,
  2502. 					"Fill the client id and secret fields with the value Imgur provided."
  2503. 				),
  2504. 				DOM.create(
  2505. 					"li",
  2506. 					null,
  2507. 					"Click on authorize (you can skip this step if you don't want images tied to your account)."
  2508. 				),
  2509. 			]);
  2510. 			note.append(stepList);
  2511. 			note.append(
  2512. 				"Hitting Imgur API limits might get your API access blocked."
  2513. 			);
  2514.  
  2515. 			container.append(note);
  2516. 		}
  2517.  
  2518. 		#revokeAuth() {
  2519. 			const config = {
  2520. 				...this.#configuration,
  2521. 				authToken: null,
  2522. 				refreshToken: null,
  2523. 			};
  2524.  
  2525. 			new ImageHostService().setImageHostConfiguration(
  2526. 				imageHosts.imgur,
  2527. 				config
  2528. 			);
  2529. 		}
  2530.  
  2531. 		#updateConfig(event, key, configuration) {
  2532. 			const value = event.target.value;
  2533. 			const config = {
  2534. 				...configuration,
  2535. 				[key]: value,
  2536. 			};
  2537. 			new ImageHostService().setImageHostConfiguration(
  2538. 				imageHosts.imgur,
  2539. 				config
  2540. 			);
  2541. 		}
  2542. 	}
  2543.  
  2544. 	class ImageApiFactory {
  2545. 		getImageHostInstance() {
  2546. 			const imageHostService = new ImageHostService();
  2547. 			switch (imageHostService.getSelectedHost()) {
  2548. 				case imageHosts.imgbb:
  2549. 					return new ImgbbAPI(
  2550. 						imageHostService.getImageHostConfiguration(imageHosts.imgbb)
  2551. 					);
  2552. 				case imageHosts.imgur:
  2553. 					return new ImgurAPI(
  2554. 						imageHostService.getImageHostConfiguration(imageHosts.imgur)
  2555. 					);
  2556. 				case imageHosts.catbox:
  2557. 					return new CatboxAPI(
  2558. 						imageHostService.getImageHostConfiguration(
  2559. 							imageHosts.catbox
  2560. 						)
  2561. 					);
  2562. 			}
  2563. 		}
  2564. 	}
  2565.  
  2566. 	class Version {
  2567. 		versionNumber;
  2568. 		featureList;
  2569. 		constructor(versionNumber, featureList) {
  2570. 			this.versionNumber = versionNumber ?? "";
  2571. 			this.featureList = featureList ?? [];
  2572. 		}
  2573. 	}
  2574.  
  2575. 	class Feature {
  2576. 		description;
  2577. 		option;
  2578. 		constructor(description, option) {
  2579. 			this.description = description ?? "";
  2580. 			this.option = option ?? undefined;
  2581. 		}
  2582. 	}
  2583.  
  2584. 	const changeLog = [
  2585. 		new Version("1.10", [
  2586. 			new Feature(
  2587. 				"added a change log to introduce new features",
  2588. 				"changeLogEnabled"
  2589. 			),
  2590. 			new Feature(
  2591. 				"added a self-message button to user's own profile",
  2592. 				"selfMessageEnabled"
  2593. 			),
  2594. 			new Feature("color coded Layout Designer and CSS action buttons"),
  2595. 			new Feature(
  2596. 				"fixed a bug where an API error when publishing CSS could lead to user's about being removed"
  2597. 			),
  2598. 		]),
  2599. 		new Version("1.9", [
  2600. 			new Feature(
  2601. 				"added gif keyboard to save gifs/images for later use",
  2602. 				"gifKeyboardEnabled"
  2603. 			),
  2604. 			new Feature(
  2605. 				"open AniList links in the same tab",
  2606. 				"removeAnilistBlanks"
  2607. 			),
  2608. 			new Feature("have multiple layouts in storage"),
  2609. 			new Feature("secret field to hide API keys"),
  2610. 		]),
  2611. 		new Version("1.8", [
  2612. 			new Feature("added toast notifications", "toasterEnabled"),
  2613. 			new Feature(
  2614. 				"added a timer until next refresh to Quick Access",
  2615. 				"quickAccessTimer"
  2616. 			),
  2617. 			new Feature("added a refresh button to Quick Access"),
  2618. 			new Feature("added Catbox.moe integration"),
  2619. 			new Feature("fixed an error when publishing custom CSS or about"),
  2620. 		]),
  2621. 		new Version("1.7", [
  2622. 			new Feature("added a Layout Designer", "layoutDesignerEnabled"),
  2623. 		]),
  2624. 	];
  2625.  
  2626. 	class ChangeLog {
  2627. 		#lastVersion;
  2628. 		#settings;
  2629. 		#lastVersionInLocalStorage = "void-verified-changelog-last-version";
  2630.  
  2631. 		constructor(settings) {
  2632. 			this.#settings = settings;
  2633. 			this.#lastVersion = localStorage.getItem(
  2634. 				this.#lastVersionInLocalStorage
  2635. 			);
  2636. 		}
  2637.  
  2638. 		renderChangeLog(forceDisplay = false) {
  2639. 			if (
  2640. 				!this.#settings.options.changeLogEnabled.getValue() &&
  2641. 				!forceDisplay
  2642. 			) {
  2643. 				return;
  2644. 			}
  2645.  
  2646. 			if (!this.#newVersionExists() && !forceDisplay) {
  2647. 				return;
  2648. 			}
  2649.  
  2650. 			const modalBody = [
  2651. 				DOM.create(
  2652. 					"div",
  2653. 					"change-log-note",
  2654. 					Note(
  2655. 						"Here are some changes included in recent releases. You can enable new features here or later from settings. You can view this popup again or disable it from settings."
  2656. 					)
  2657. 				),
  2658. 			];
  2659. 			modalBody.push(
  2660. 				...changeLog.map((version) => {
  2661. 					return this.#createModalContent(version);
  2662. 				})
  2663. 			);
  2664.  
  2665. 			document.body.append(
  2666. 				Modal(modalBody, () => {
  2667. 					this.#handleClose(this);
  2668. 				})
  2669. 			);
  2670. 		}
  2671.  
  2672. 		#newVersionExists() {
  2673. 			if (!this.#lastVersion) {
  2674. 				return true;
  2675. 			}
  2676. 			const versions = changeLog.map((version) =>
  2677. 				version.versionNumber.split(".")
  2678. 			);
  2679. 			const [lastMajorVersion, lastMinorVersion] =
  2680. 				this.#lastVersion.split(".");
  2681.  
  2682. 			for (const [majorVersion, minorVersion] of versions) {
  2683. 				if (
  2684. 					Number(majorVersion) > Number(lastMajorVersion) ||
  2685. 					Number(minorVersion) > Number(lastMinorVersion)
  2686. 				) {
  2687. 					return true;
  2688. 				}
  2689. 			}
  2690.  
  2691. 			return false;
  2692. 		}
  2693.  
  2694. 		#createModalContent(version) {
  2695. 			const container = DOM.create("div");
  2696. 			const header = DOM.create(
  2697. 				"h3",
  2698. 				"change-log-header",
  2699. 				`Version ${version.versionNumber}`
  2700. 			);
  2701. 			container.append(header);
  2702. 			const list = DOM.create("ul", "change-log-list");
  2703. 			const listItems = version.featureList.map((feature) => {
  2704. 				return this.#createFeatureListItem(feature);
  2705. 			});
  2706. 			list.append(...listItems);
  2707. 			container.append(list);
  2708. 			return container;
  2709. 		}
  2710.  
  2711. 		#createFeatureListItem(feature) {
  2712. 			const container = DOM.create("li");
  2713. 			if (feature.option) {
  2714. 				const value = this.#settings.options[feature.option].getValue();
  2715. 				container.append(
  2716. 					SettingLabel(
  2717. 						feature.description,
  2718. 						Checkbox(value, (event) => {
  2719. 							this.#handleOptionChange(event, feature.option);
  2720. 						})
  2721. 					)
  2722. 				);
  2723. 				return container;
  2724. 			}
  2725. 			container.append(
  2726. 				DOM.create("span", "change-log-list-item", [
  2727. 					DOM.create("span", null, "-"),
  2728. 					DOM.create("span", null, feature.description),
  2729. 				])
  2730. 			);
  2731. 			return container;
  2732. 		}
  2733.  
  2734. 		#handleOptionChange(event, option) {
  2735. 			const value = event.target.checked;
  2736. 			this.#settings.saveSettingToLocalStorage(option, value);
  2737. 		}
  2738.  
  2739. 		#handleClose(_changeLog) {
  2740. 			const version = changeLog[0].versionNumber;
  2741. 			_changeLog.#lastVersion = version;
  2742. 			localStorage.setItem(_changeLog.#lastVersionInLocalStorage, version);
  2743. 		}
  2744. 	}
  2745.  
  2746. 	const subCategories = {
  2747. 		users: "users",
  2748. 		authorization: "authorization",
  2749. 		imageHost: "image host",
  2750. 		layout: "layout & CSS",
  2751. 		globalCss: "global CSS",
  2752. 		toasts: "toasts",
  2753. 	};
  2754.  
  2755. 	class SettingsUserInterface {
  2756. 		settings;
  2757. 		styleHandler;
  2758. 		globalCSS;
  2759. 		userCSS;
  2760. 		layoutDesigner;
  2761. 		AnilistBlue = "120, 180, 255";
  2762. 		#activeCategory = "all";
  2763. 		#activeSubCategory = subCategories.users;
  2764.  
  2765. 		constructor(settings, styleHandler, globalCSS, userCSS, layoutDesigner) {
  2766. 			this.settings = settings;
  2767. 			this.styleHandler = styleHandler;
  2768. 			this.globalCSS = globalCSS;
  2769. 			this.userCSS = userCSS;
  2770. 			this.layoutDesigner = layoutDesigner;
  2771. 		}
  2772.  
  2773. 		renderSettingsUi() {
  2774. 			this.#checkAuthFromUrl();
  2775. 			const container = document.querySelector(
  2776. 				".settings.container > .content"
  2777. 			);
  2778. 			const settingsContainerExists = DOM.get("#verified-settings") !== null;
  2779. 			if (!settingsContainerExists) {
  2780. 				const settingsContainer = DOM.create(
  2781. 					"div",
  2782. 					"#verified-settings settings"
  2783. 				);
  2784. 				container.append(settingsContainer);
  2785. 			}
  2786.  
  2787. 			this.renderSettingsUiContent();
  2788. 		}
  2789.  
  2790. 		renderSettingsUiContent() {
  2791. 			const settingsContainer = DOM.create("div");
  2792.  
  2793. 			this.#renderSettingsHeader(settingsContainer);
  2794. 			this.#renderCategories(settingsContainer);
  2795. 			this.#renderOptions(settingsContainer);
  2796. 			this.#handleSubcategories(settingsContainer);
  2797.  
  2798. 			DOM.get("#verified-settings").replaceChildren(settingsContainer);
  2799. 		}
  2800.  
  2801. 		#handleSubcategories(settingsContainer) {
  2802. 			this.#renderSubCategoriesNavigation(settingsContainer);
  2803. 			switch (this.#activeSubCategory) {
  2804. 				case subCategories.users:
  2805. 					this.#renderUserTable(settingsContainer);
  2806. 					break;
  2807. 				case subCategories.authorization:
  2808. 					this.#creatAuthenticationSection(settingsContainer);
  2809. 					break;
  2810. 				case subCategories.imageHost:
  2811. 					this.#renderImageHostSettings(settingsContainer);
  2812. 					break;
  2813. 				case subCategories.layout:
  2814. 					settingsContainer.append(
  2815. 						this.layoutDesigner.renderSettings(this)
  2816. 					);
  2817. 					if (
  2818. 						this.settings.auth?.token &&
  2819. 						(this.settings.options.profileCssEnabled.getValue() ||
  2820. 							this.settings.options.activityCssEnabled.getValue())
  2821. 					) {
  2822. 						this.#renderCustomCssEditor(
  2823. 							settingsContainer,
  2824. 							this.userCSS
  2825. 						);
  2826. 					}
  2827. 					break;
  2828. 				case subCategories.globalCss:
  2829. 					if (this.settings.options.globalCssEnabled.getValue()) {
  2830. 						this.#renderCustomCssEditor(
  2831. 							settingsContainer,
  2832. 							this.globalCSS
  2833. 						);
  2834. 					}
  2835. 					break;
  2836. 				case subCategories.toasts:
  2837. 					settingsContainer.append(Toaster.renderSettings(this));
  2838. 			}
  2839. 		}
  2840.  
  2841. 		#renderOptions(settingsContainer) {
  2842. 			const settingsListContainer = DOM.create("div", "settings-list");
  2843. 			for (const [key, setting] of Object.entries(this.settings.options)) {
  2844. 				if (
  2845. 					setting.category !== this.#activeCategory &&
  2846. 					this.#activeCategory !== "all"
  2847. 				) {
  2848. 					continue;
  2849. 				}
  2850. 				this.#renderSetting(setting, settingsListContainer, key);
  2851. 			}
  2852.  
  2853. 			settingsContainer.append(settingsListContainer);
  2854. 		}
  2855.  
  2856. 		removeSettingsUi() {
  2857. 			const settings = document.querySelector("#void-verified-settings");
  2858. 			settings?.remove();
  2859. 		}
  2860.  
  2861. 		#renderSettingsHeader(settingsContainer) {
  2862. 			const headerContainer = DOM.create("div", "settings-header");
  2863. 			const header = DOM.create("h1", null, "VoidVerified Settings");
  2864.  
  2865. 			const versionInfo = DOM.create("p", null, [
  2866. 				"Version: ",
  2867. 				DOM.create("span", null, this.settings.version),
  2868. 			]);
  2869.  
  2870. 			headerContainer.append(header);
  2871. 			headerContainer.append(versionInfo);
  2872. 			const author = DOM.create("p", null, [
  2873. 				"Author: ",
  2874. 				Link("voidnyan", "https://anilist.co/user/voidnyan/"),
  2875. 			]);
  2876.  
  2877. 			const changeLogButton = Button("View Changelog", () => {
  2878. 				new ChangeLog(this.settings).renderChangeLog(true);
  2879. 			});
  2880.  
  2881. 			headerContainer.append(header, versionInfo, author, changeLogButton);
  2882.  
  2883. 			settingsContainer.append(headerContainer);
  2884. 		}
  2885.  
  2886. 		#renderCategories(settingsContainer) {
  2887. 			const nav = DOM.create("nav", "nav");
  2888. 			const list = DOM.create("ol");
  2889.  
  2890. 			const onClick = (_category) => {
  2891. 				this.#activeCategory = _category;
  2892. 				this.renderSettingsUiContent();
  2893. 			};
  2894.  
  2895. 			list.append(
  2896. 				this.#createNavBtn("all", "all" === this.#activeCategory, () => {
  2897. 					onClick("all");
  2898. 				})
  2899. 			);
  2900.  
  2901. 			for (const category of Object.values(categories)) {
  2902. 				list.append(
  2903. 					this.#createNavBtn(
  2904. 						category,
  2905. 						category === this.#activeCategory,
  2906. 						() => {
  2907. 							onClick(category);
  2908. 						}
  2909. 					)
  2910. 				);
  2911. 			}
  2912.  
  2913. 			nav.append(list);
  2914. 			settingsContainer.append(nav);
  2915. 		}
  2916.  
  2917. 		#renderSubCategoriesNavigation(settingsContainer) {
  2918. 			const nav = DOM.create("nav", "nav");
  2919. 			const list = DOM.create("ol");
  2920.  
  2921. 			for (const subCategory of Object.values(subCategories)) {
  2922. 				if (!this.#shouldDisplaySubCategory(subCategory)) {
  2923. 					continue;
  2924. 				}
  2925. 				list.append(
  2926. 					this.#createNavBtn(
  2927. 						subCategory,
  2928. 						this.#activeSubCategory === subCategory,
  2929. 						() => {
  2930. 							this.#activeSubCategory = subCategory;
  2931. 							this.renderSettingsUiContent();
  2932. 						}
  2933. 					)
  2934. 				);
  2935. 			}
  2936.  
  2937. 			nav.append(list);
  2938. 			settingsContainer.append(nav);
  2939. 		}
  2940.  
  2941. 		#shouldDisplaySubCategory(subCategory) {
  2942. 			switch (subCategory) {
  2943. 				case subCategories.users:
  2944. 					return true;
  2945. 				case subCategories.authorization:
  2946. 					return true;
  2947. 				case subCategories.imageHost:
  2948. 					return this.settings.options.pasteImagesToHostService.getValue();
  2949. 				case subCategories.layout:
  2950. 					return (
  2951. 						this.settings.auth?.token &&
  2952. 						(this.settings.options.profileCssEnabled.getValue() ||
  2953. 							this.settings.options.activityCssEnabled.getValue() ||
  2954. 							this.settings.options.layoutDesignerEnabled.getValue())
  2955. 					);
  2956. 				case subCategories.globalCss:
  2957. 					return this.settings.options.globalCssEnabled.getValue();
  2958. 				case subCategories.toasts:
  2959. 					return this.settings.options.toasterEnabled.getValue();
  2960. 			}
  2961. 		}
  2962.  
  2963. 		#createNavBtn(category, isActive, onClick) {
  2964. 			const className = isActive ? "active" : null;
  2965. 			const li = DOM.create("li", className, category);
  2966.  
  2967. 			li.addEventListener("click", () => {
  2968. 				onClick();
  2969. 			});
  2970.  
  2971. 			return li;
  2972. 		}
  2973.  
  2974. 		#renderUserTable(settingsContainer) {
  2975. 			const tableContainer = DOM.create("div", "table #verified-user-table");
  2976.  
  2977. 			tableContainer.style = `
  2978.             margin-top: 25px;
  2979.         `;
  2980. 			const head = TableHead("Username", "Sign", "Color", "Other");
  2981.  
  2982. 			const rows = this.settings.verifiedUsers.map((user) =>
  2983. 				this.#createUserRow(user)
  2984. 			);
  2985. 			const body = TableBody(rows);
  2986.  
  2987. 			const table = Table(head, body);
  2988. 			tableContainer.append(table);
  2989.  
  2990. 			const inputForm = DOM.create("form");
  2991.  
  2992. 			inputForm.addEventListener("submit", (event) => {
  2993. 				this.#handleVerifyUserForm(event, this.settings);
  2994. 			});
  2995.  
  2996. 			const inputFormLabel = DOM.create("label", null, "Add user");
  2997. 			inputFormLabel.setAttribute("for", "void-verified-add-user");
  2998.  
  2999. 			inputForm.append(inputFormLabel);
  3000. 			inputForm.append(InputField("", () => {}, "#verified-add-user"));
  3001. 			tableContainer.append(inputForm);
  3002.  
  3003. 			settingsContainer.append(tableContainer);
  3004.  
  3005. 			const fallbackColorOption = this.settings.options.defaultHighlightColor;
  3006. 			settingsContainer.append(
  3007. 				DOM.create("h5", null, "Fallback color"),
  3008. 				ColorPicker(fallbackColorOption.getValue(), (event) => {
  3009. 					this.#handleOption(event, "fallbackColor");
  3010. 				})
  3011. 			);
  3012. 		}
  3013.  
  3014. 		#createUserRow(user) {
  3015. 			const row = DOM.create("tr");
  3016. 			const userLink = DOM.create("a", null, user.username);
  3017. 			userLink.setAttribute(
  3018. 				"href",
  3019. 				`https://anilist.co/user/${user.username}/`
  3020. 			);
  3021. 			userLink.setAttribute("target", "_blank");
  3022. 			row.append(DOM.create("td", null, userLink));
  3023.  
  3024. 			const signInput = InputField(
  3025. 				user.sign ?? "",
  3026. 				(event) => {
  3027. 					this.#updateUserOption(
  3028. 						user.username,
  3029. 						"sign",
  3030. 						event.target.value
  3031. 					);
  3032. 				},
  3033. 				"sign"
  3034. 			);
  3035.  
  3036. 			const signCell = DOM.create("td", null, signInput);
  3037. 			signCell.append(
  3038. 				this.#createUserCheckbox(
  3039. 					user.enabledForUsername,
  3040. 					user.username,
  3041. 					"enabledForUsername",
  3042. 					this.settings.options.enabledForUsername.getValue()
  3043. 				)
  3044. 			);
  3045.  
  3046. 			row.append(DOM.create("th", null, signCell));
  3047.  
  3048. 			const colorInputContainer = DOM.create("div");
  3049.  
  3050. 			const colorInput = DOM.create("input");
  3051. 			colorInput.setAttribute("type", "color");
  3052. 			colorInput.value = this.#getUserColorPickerColor(user);
  3053. 			colorInput.addEventListener(
  3054. 				"change",
  3055. 				(event) => this.#handleUserColorChange(event, user.username),
  3056. 				false
  3057. 			);
  3058.  
  3059. 			colorInputContainer.append(colorInput);
  3060.  
  3061. 			colorInputContainer.append(
  3062. 				IconButton(RefreshIcon(), () => {
  3063. 					this.#handleUserColorReset(user.username);
  3064. 				})
  3065. 			);
  3066.  
  3067. 			colorInputContainer.append(
  3068. 				this.#createUserCheckbox(
  3069. 					user.copyColorFromProfile,
  3070. 					user.username,
  3071. 					"copyColorFromProfile",
  3072. 					this.settings.options.copyColorFromProfile.getValue()
  3073. 				)
  3074. 			);
  3075.  
  3076. 			colorInputContainer.append(
  3077. 				this.#createUserCheckbox(
  3078. 					user.highlightEnabled,
  3079. 					user.username,
  3080. 					"highlightEnabled",
  3081. 					this.settings.options.highlightEnabled.getValue()
  3082. 				)
  3083. 			);
  3084.  
  3085. 			colorInputContainer.append(
  3086. 				this.#createUserCheckbox(
  3087. 					user.highlightEnabledForReplies,
  3088. 					user.username,
  3089. 					"highlightEnabledForReplies",
  3090. 					this.settings.options.highlightEnabledForReplies.getValue()
  3091. 				)
  3092. 			);
  3093.  
  3094. 			colorInputContainer.append(
  3095. 				this.#createUserCheckbox(
  3096. 					user.colorUserActivity,
  3097. 					user.username,
  3098. 					"colorUserActivity",
  3099. 					this.settings.options.colorUserActivity.getValue()
  3100. 				)
  3101. 			);
  3102.  
  3103. 			colorInputContainer.append(
  3104. 				this.#createUserCheckbox(
  3105. 					user.colorUserReplies,
  3106. 					user.username,
  3107. 					"colorUserReplies",
  3108. 					this.settings.options.colorUserReplies.getValue()
  3109. 				)
  3110. 			);
  3111.  
  3112. 			const colorCell = DOM.create("td", null, colorInputContainer);
  3113. 			row.append(colorCell);
  3114.  
  3115. 			const quickAccessCheckbox = this.#createUserCheckbox(
  3116. 				user.quickAccessEnabled,
  3117. 				user.username,
  3118. 				"quickAccessEnabled",
  3119. 				this.settings.options.quickAccessEnabled.getValue()
  3120. 			);
  3121.  
  3122. 			const otherCell = DOM.create("td", null, quickAccessCheckbox);
  3123.  
  3124. 			const cssEnabledCheckbox = this.#createUserCheckbox(
  3125. 				user.onlyLoadCssFromVerifiedUser,
  3126. 				user.username,
  3127. 				"onlyLoadCssFromVerifiedUser",
  3128. 				this.settings.options.onlyLoadCssFromVerifiedUser.getValue()
  3129. 			);
  3130.  
  3131. 			otherCell.append(cssEnabledCheckbox);
  3132.  
  3133. 			row.append(otherCell);
  3134.  
  3135. 			const deleteButton = DOM.create("button", null, "❌");
  3136. 			deleteButton.addEventListener("click", () =>
  3137. 				this.#removeUser(user.username)
  3138. 			);
  3139. 			row.append(DOM.create("th", null, deleteButton));
  3140. 			return row;
  3141. 		}
  3142.  
  3143. 		#getUserColorPickerColor(user) {
  3144. 			if (user.colorOverride) {
  3145. 				return user.colorOverride;
  3146. 			}
  3147.  
  3148. 			if (
  3149. 				user.color &&
  3150. 				(user.copyColorFromProfile ||
  3151. 					this.settings.options.copyColorFromProfile.getValue())
  3152. 			) {
  3153. 				return ColorFunctions.rgbToHex(user.color);
  3154. 			}
  3155.  
  3156. 			if (this.settings.options.useDefaultHighlightColor.getValue()) {
  3157. 				return this.settings.options.defaultHighlightColor.getValue();
  3158. 			}
  3159.  
  3160. 			return ColorFunctions.rgbToHex(this.AnilistBlue);
  3161. 		}
  3162.  
  3163. 		#createUserCheckbox(isChecked, username, settingKey, disabled) {
  3164. 			const onChange = (event) => {
  3165. 				this.#updateUserOption(username, settingKey, event.target.checked);
  3166. 				this.renderSettingsUiContent();
  3167. 			};
  3168. 			const description = this.settings.options[settingKey].description;
  3169. 			const checkbox = Checkbox(isChecked, onChange, disabled);
  3170. 			return Tooltip(description, checkbox);
  3171. 		}
  3172.  
  3173. 		#handleUserColorReset(username) {
  3174. 			this.#updateUserOption(username, "colorOverride", undefined);
  3175. 			this.renderSettingsUiContent();
  3176. 		}
  3177.  
  3178. 		#handleUserColorChange(event, username) {
  3179. 			const color = event.target.value;
  3180. 			this.#updateUserOption(username, "colorOverride", color);
  3181. 		}
  3182.  
  3183. 		async #handleVerifyUserForm(event, settings) {
  3184. 			event.preventDefault();
  3185.  
  3186. 			const usernameInput = DOM.get("#verified-add-user");
  3187. 			const username = usernameInput.value;
  3188. 			await settings.verifyUser(username);
  3189. 			usernameInput.value = "";
  3190. 			this.renderSettingsUiContent();
  3191. 		}
  3192.  
  3193. 		#updateUserOption(username, key, value) {
  3194. 			this.settings.updateUserOption(username, key, value);
  3195. 			this.styleHandler.refreshStyles();
  3196. 		}
  3197.  
  3198. 		#removeUser(username) {
  3199. 			this.settings.removeUser(username);
  3200. 			this.renderSettingsUiContent();
  3201. 			this.styleHandler.refreshStyles();
  3202. 		}
  3203.  
  3204. 		#renderSetting(setting, settingsContainer, settingKey) {
  3205. 			if (setting.category === categories.hidden) {
  3206. 				return;
  3207. 			}
  3208. 			const value = setting.getValue();
  3209. 			const type = typeof value;
  3210.  
  3211. 			let input;
  3212.  
  3213. 			const onChange = (event) => {
  3214. 				this.#handleOption(event, settingKey, type);
  3215. 			};
  3216.  
  3217. 			if (type === "boolean") {
  3218. 				input = Checkbox(value, onChange);
  3219. 			} else if (settingKey == "defaultHighlightColor") {
  3220. 				return;
  3221. 			} else if (type === "string") {
  3222. 				input = InputField(value, onChange);
  3223. 			}
  3224. 			input.setAttribute("id", settingKey);
  3225.  
  3226. 			settingsContainer.append(SettingLabel(setting.description, input));
  3227. 		}
  3228.  
  3229. 		#handleOption(event, settingKey, type) {
  3230. 			const value =
  3231. 				type === "boolean" ? event.target.checked : event.target.value;
  3232. 			this.settings.saveSettingToLocalStorage(settingKey, value);
  3233. 			this.styleHandler.refreshStyles();
  3234.  
  3235. 			if (!this.#shouldDisplaySubCategory(this.#activeSubCategory)) {
  3236. 				this.#activeSubCategory = subCategories.users;
  3237. 			}
  3238.  
  3239. 			this.renderSettingsUiContent();
  3240. 		}
  3241.  
  3242. 		// TODO: separate userCSS
  3243. 		#renderCustomCssEditor(settingsContainer, cssHandler) {
  3244. 			const cssName = cssHandler instanceof GlobalCSS ? "global" : "user";
  3245. 			const container = DOM.create("div", "css-editor");
  3246. 			const label = DOM.create("label", null, `Custom ${cssName} CSS`);
  3247. 			label.setAttribute("for", `void-verified-${cssName}-css-editor`);
  3248. 			container.append(label);
  3249.  
  3250. 			const textarea = TextArea(cssHandler.css, (event) => {
  3251. 				this.#handleCustomCssEditor(event, cssHandler);
  3252. 			});
  3253. 			container.append(textarea);
  3254.  
  3255. 			if (cssName === "global") {
  3256. 				const notice = DOM.create("div");
  3257. 				notice.innerText =
  3258. 					"Please note that Custom CSS is disabled in the settings. \nIn the event that you accidentally disable rendering of critical parts of AniList, navigate to the settings by URL";
  3259. 				notice.style.fontSize = "11px";
  3260. 				container.append(notice);
  3261. 			} else {
  3262. 				const resetButton = Button(
  3263. 					"Reset CSS",
  3264. 					() => {
  3265. 						if (window.confirm("Your changes will be lost.")) {
  3266. 							cssHandler.getAuthUserCss().then(() => {
  3267. 								textarea.value = cssHandler.css;
  3268. 							});
  3269. 						}
  3270. 					},
  3271. 					"error"
  3272. 				);
  3273.  
  3274. 				const publishButton = Button(
  3275. 					"Publish CSS",
  3276. 					(event) => {
  3277. 						this.#handlePublishCss(event, cssHandler);
  3278. 					},
  3279. 					"success"
  3280. 				);
  3281.  
  3282. 				const previewButton = Button(
  3283. 					cssHandler.preview ? "Disable Preview" : "Enable Preview",
  3284. 					() => {
  3285. 						cssHandler.togglePreview();
  3286. 						previewButton.innerText = cssHandler.preview
  3287. 							? "Disable Preview"
  3288. 							: "Enable Preview";
  3289. 					}
  3290. 				);
  3291.  
  3292. 				container.append(resetButton);
  3293. 				container.append(publishButton);
  3294. 				container.append(previewButton);
  3295. 			}
  3296.  
  3297. 			settingsContainer.append(container);
  3298. 		}
  3299.  
  3300. 		// TODO: separate userCSS
  3301. 		#handlePublishCss(event, cssHandler) {
  3302. 			const btn = event.target;
  3303. 			btn.innerText = "Publishing...";
  3304. 			cssHandler.publishUserCss().then(() => {
  3305. 				btn.innerText = "Publish";
  3306. 			});
  3307. 		}
  3308.  
  3309. 		// TODO: separate userCSS
  3310. 		#handleCustomCssEditor(event, cssHandler) {
  3311. 			const value = event.target.value;
  3312. 			cssHandler.updateCss(value);
  3313. 		}
  3314.  
  3315. 		// TODO: separate to imageHostService?
  3316. 		#renderImageHostSettings(settingsContainer) {
  3317. 			const container = DOM.create("div");
  3318.  
  3319. 			const imageHostService = new ImageHostService();
  3320. 			const imageApiFactory = new ImageApiFactory();
  3321.  
  3322. 			const imageHostOptions = Object.values(imageHosts).map((imageHost) =>
  3323. 				Option$1(
  3324. 					imageHost,
  3325. 					imageHost === imageHostService.getSelectedHost(),
  3326. 					() => {
  3327. 						imageHostService.setSelectedHost(imageHost);
  3328. 						this.renderSettingsUiContent();
  3329. 					}
  3330. 				)
  3331. 			);
  3332.  
  3333. 			const select = Select(imageHostOptions);
  3334. 			container.append(Label("Image host", select));
  3335.  
  3336. 			const hostSpecificSettings = DOM.create("div");
  3337. 			const imageHostApi = imageApiFactory.getImageHostInstance();
  3338. 			hostSpecificSettings.append(imageHostApi.renderSettings(this));
  3339.  
  3340. 			container.append(hostSpecificSettings);
  3341. 			settingsContainer.append(container);
  3342. 		}
  3343.  
  3344. 		#creatAuthenticationSection(settingsContainer) {
  3345. 			const isAuthenticated =
  3346. 				this.settings.auth !== null &&
  3347. 				new Date(this.settings.auth?.expires) > new Date();
  3348.  
  3349. 			const clientId = 15519;
  3350.  
  3351. 			const authenticationContainer = DOM.create("div");
  3352.  
  3353. 			const header = DOM.create("h3", null, "Authorize VoidVerified");
  3354. 			const description = DOM.create(
  3355. 				"p",
  3356. 				null,
  3357. 				"Some features of VoidVerified might need your access token to work correctly or fully. Below is a list of features using your access token. If you do not wish to use any of these features, you do not need to authenticate. If revoking authentication, be sure to revoke VoidVerified from Anilist Apps as well."
  3358. 			);
  3359.  
  3360. 			const list = DOM.create("ul");
  3361. 			for (const option of Object.values(this.settings.options).filter(
  3362. 				(o) => o.authRequired
  3363. 			)) {
  3364. 				list.append(DOM.create("li", null, option.description));
  3365. 			}
  3366.  
  3367. 			const authLink = DOM.create("a", "button", "Authenticate VoidVerified");
  3368. 			authLink.setAttribute(
  3369. 				"href",
  3370. 				`https://anilist.co/api/v2/oauth/authorize?client_id=${clientId}&response_type=token`
  3371. 			);
  3372.  
  3373. 			const removeAuthButton = DOM.create(
  3374. 				"button",
  3375. 				null,
  3376. 				"Revoke auth token"
  3377. 			);
  3378. 			removeAuthButton.classList.add("button");
  3379. 			removeAuthButton.addEventListener("click", () => {
  3380. 				this.settings.removeAuthToken();
  3381. 				this.renderSettingsUiContent();
  3382. 			});
  3383.  
  3384. 			authenticationContainer.append(header);
  3385. 			authenticationContainer.append(description);
  3386. 			authenticationContainer.append(list);
  3387. 			authenticationContainer.append(
  3388. 				!isAuthenticated ? authLink : removeAuthButton
  3389. 			);
  3390.  
  3391. 			settingsContainer.append(authenticationContainer);
  3392. 		}
  3393.  
  3394. 		#checkAuthFromUrl() {
  3395. 			const hash = window.location.hash.substring(1);
  3396. 			if (!hash) {
  3397. 				return;
  3398. 			}
  3399.  
  3400. 			const [path, token, type, expiress] = hash.split("&");
  3401.  
  3402. 			if (path === "void_imgur") {
  3403. 				const imgurConfig =
  3404. 					new ImageHostService().getImageHostConfiguration(
  3405. 						imageHosts.imgur
  3406. 					);
  3407. 				new ImgurAPI(imgurConfig).handleAuth();
  3408. 			}
  3409. 			if (path !== "void_auth") {
  3410. 				return;
  3411. 			}
  3412.  
  3413. 			const expiresDate = new Date(
  3414. 				new Date().getTime() + Number(expiress.split("=")[1]) * 1000
  3415. 			);
  3416.  
  3417. 			this.settings.saveAuthToken({
  3418. 				token: token.split("=")[1],
  3419. 				expires: expiresDate,
  3420. 			});
  3421.  
  3422. 			window.history.replaceState(
  3423. 				null,
  3424. 				"",
  3425. 				"https://anilist.co/settings/developer"
  3426. 			);
  3427. 		}
  3428. 	}
  3429.  
  3430. 	class QuickAccess {
  3431. 		settings;
  3432. 		#quickAccessId = "void-quick-access";
  3433. 		#lastFetchedLocalStorage = "void-verified-last-fetched";
  3434. 		#lastFetched;
  3435. 		#queryInProgress = false;
  3436.  
  3437. 		#apiQueryTimeoutInMinutes = 15;
  3438. 		#apiQueryTimeout = this.#apiQueryTimeoutInMinutes * 60 * 1000;
  3439. 		constructor(settings) {
  3440. 			this.settings = settings;
  3441. 			const fetched = localStorage.getItem(this.#lastFetchedLocalStorage);
  3442. 			if (fetched) {
  3443. 				this.#lastFetched = new Date(fetched);
  3444. 			}
  3445. 		}
  3446.  
  3447. 		async renderQuickAccess() {
  3448. 			if (this.#queryInProgress) {
  3449. 				return;
  3450. 			}
  3451.  
  3452. 			const queried = await this.#queryUsers();
  3453.  
  3454. 			if (!queried && this.#quickAccessRendered()) {
  3455. 				this.#updateTimer();
  3456. 				return;
  3457. 			}
  3458.  
  3459. 			if (
  3460. 				!this.settings.options.quickAccessEnabled.getValue() &&
  3461. 				!this.settings.verifiedUsers.some((user) => user.quickAccessEnabled)
  3462. 			) {
  3463. 				return;
  3464. 			}
  3465.  
  3466. 			const quickAccessContainer = DOM.getOrCreate(
  3467. 				"div",
  3468. 				"#quick-access quick-access"
  3469. 			);
  3470.  
  3471. 			const sectionHeader = document.createElement("div");
  3472. 			sectionHeader.setAttribute("class", "section-header");
  3473. 			const title = document.createElement("h2");
  3474. 			title.append("Quick Access");
  3475. 			title.setAttribute(
  3476. 				"title",
  3477. 				`Last updated at ${this.#lastFetched.toLocaleTimeString()}`
  3478. 			);
  3479. 			sectionHeader.append(title);
  3480.  
  3481. 			const timer = DOM.create("span", "quick-access-timer", "");
  3482.  
  3483. 			const refreshButton = IconButton(RefreshIcon(), () => {
  3484. 				this.#queryUsers(true);
  3485. 			});
  3486.  
  3487. 			sectionHeader.append(DOM.create("div", null, [timer, refreshButton]));
  3488.  
  3489. 			const quickAccessBody = document.createElement("div");
  3490. 			quickAccessBody.setAttribute("class", "void-quick-access-wrap");
  3491.  
  3492. 			for (const user of this.#getQuickAccessUsers()) {
  3493. 				quickAccessBody.append(this.#createQuickAccessLink(user));
  3494. 			}
  3495.  
  3496. 			const section = document.querySelector(
  3497. 				".container > .home > div:nth-child(2)"
  3498. 			);
  3499.  
  3500. 			quickAccessContainer.replaceChildren(sectionHeader, quickAccessBody);
  3501.  
  3502. 			if (DOM.get("#quick-access")) {
  3503. 				return;
  3504. 			}
  3505. 			section.insertBefore(quickAccessContainer, section.firstChild);
  3506. 		}
  3507.  
  3508. 		#updateTimer() {
  3509. 			if (!this.settings.options.quickAccessTimer.getValue()) {
  3510. 				return;
  3511. 			}
  3512. 			const timer = DOM.get("quick-access-timer");
  3513. 			const nextQuery = new Date(
  3514. 				this.#lastFetched.getTime() + this.#apiQueryTimeout
  3515. 			);
  3516. 			const timeLeftInSeconds = Math.floor((nextQuery - new Date()) / 1000);
  3517. 			const timeLeftInMinutes = timeLeftInSeconds / 60;
  3518.  
  3519. 			if (timeLeftInMinutes > 1) {
  3520. 				timer.replaceChildren(`${Math.floor(timeLeftInSeconds / 60)}m`);
  3521. 				return;
  3522. 			}
  3523.  
  3524. 			timer.replaceChildren(`${timeLeftInSeconds}s`);
  3525. 		}
  3526.  
  3527. 		async #queryUsers(ignoreLastFetched = false) {
  3528. 			const currentTime = new Date();
  3529.  
  3530. 			if (
  3531. 				!this.#lastFetched ||
  3532. 				currentTime - this.#lastFetched > this.#apiQueryTimeout ||
  3533. 				ignoreLastFetched
  3534. 			) {
  3535. 				try {
  3536. 					Toaster.debug("Querying Quick Access users.");
  3537. 					this.#queryInProgress = true;
  3538. 					const anilistAPI = new AnilistAPI(this.settings);
  3539. 					await anilistAPI.queryVerifiedUsers();
  3540. 					Toaster.success("Quick Access users updated.");
  3541. 				} catch (error) {
  3542. 					Toaster.error("Querying Quick Access failed.");
  3543. 					console.error(error);
  3544. 				} finally {
  3545. 					this.#lastFetched = new Date();
  3546. 					localStorage.setItem(
  3547. 						this.#lastFetchedLocalStorage,
  3548. 						this.#lastFetched
  3549. 					);
  3550. 					this.#queryInProgress = false;
  3551. 					return true;
  3552. 				}
  3553. 			} else {
  3554. 				return false;
  3555. 			}
  3556. 		}
  3557.  
  3558. 		clearBadge() {
  3559. 			const username =
  3560. 				window.location.pathname.match(/^\/user\/([^/]*)\/?/)[1];
  3561. 			this.settings.updateUserOption(
  3562. 				username,
  3563. 				"quickAccessBadgeDisplay",
  3564. 				false
  3565. 			);
  3566. 		}
  3567.  
  3568. 		#createQuickAccessLink(user) {
  3569. 			const container = document.createElement("a");
  3570. 			container.setAttribute("class", "void-quick-access-item");
  3571. 			container.setAttribute(
  3572. 				"href",
  3573. 				`https://anilist.co/user/${user.username}/`
  3574. 			);
  3575.  
  3576. 			const image = document.createElement("div");
  3577. 			image.style.backgroundImage = `url(${user.avatar})`;
  3578. 			image.setAttribute("class", "void-quick-access-pfp");
  3579. 			container.append(image);
  3580.  
  3581. 			const username = document.createElement("div");
  3582. 			username.append(user.username);
  3583. 			username.setAttribute("class", "void-quick-access-username");
  3584.  
  3585. 			if (
  3586. 				(this.settings.options.quickAccessBadge.getValue() ||
  3587. 					user.quickAccessBadge) &&
  3588. 				user.quickAccessBadgeDisplay
  3589. 			) {
  3590. 				container.classList.add("void-quick-access-badge");
  3591. 			}
  3592.  
  3593. 			container.append(username);
  3594. 			return container;
  3595. 		}
  3596.  
  3597. 		#quickAccessRendered() {
  3598. 			const quickAccess = document.getElementById(this.#quickAccessId);
  3599. 			return quickAccess !== null;
  3600. 		}
  3601.  
  3602. 		#getQuickAccessUsers() {
  3603. 			if (this.settings.options.quickAccessEnabled.getValue()) {
  3604. 				return this.settings.verifiedUsers;
  3605. 			}
  3606.  
  3607. 			return this.settings.verifiedUsers.filter(
  3608. 				(user) => user.quickAccessEnabled
  3609. 			);
  3610. 		}
  3611. 	}
  3612.  
  3613. 	// Copyright (c) 2013 Pieroxy <pieroxy@pieroxy.net>
  3614. 	// This work is free. You can redistribute it and/or modify it
  3615. 	// under the terms of the WTFPL, Version 2
  3616. 	// For more information see LICENSE.txt or http://www.wtfpl.net/
  3617. 	//
  3618. 	// For more information, the home page:
  3619. 	// http://pieroxy.net/blog/pages/lz-string/testing.html
  3620. 	//
  3621. 	// LZ-based compression algorithm, version 1.4.4
  3622. 	var LZString = (function () {
  3623. 		// private property
  3624. 		var f = String.fromCharCode;
  3625. 		var keyStrBase64 =
  3626. 			"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
  3627. 		var keyStrUriSafe =
  3628. 			"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+-$";
  3629. 		var baseReverseDic = {};
  3630.  
  3631. 		function getBaseValue(alphabet, character) {
  3632. 			if (!baseReverseDic[alphabet]) {
  3633. 				baseReverseDic[alphabet] = {};
  3634. 				for (var i = 0; i < alphabet.length; i++) {
  3635. 					baseReverseDic[alphabet][alphabet.charAt(i)] = i;
  3636. 				}
  3637. 			}
  3638. 			return baseReverseDic[alphabet][character];
  3639. 		}
  3640.  
  3641. 		var LZString = {
  3642. 			compressToBase64: function (input) {
  3643. 				if (input == null) return "";
  3644. 				var res = LZString._compress(input, 6, function (a) {
  3645. 					return keyStrBase64.charAt(a);
  3646. 				});
  3647. 				switch (
  3648. 					res.length % 4 // To produce valid Base64
  3649. 				) {
  3650. 					default: // When could this happen ?
  3651. 					case 0:
  3652. 						return res;
  3653. 					case 1:
  3654. 						return res + "===";
  3655. 					case 2:
  3656. 						return res + "==";
  3657. 					case 3:
  3658. 						return res + "=";
  3659. 				}
  3660. 			},
  3661.  
  3662. 			decompressFromBase64: function (input) {
  3663. 				if (input == null) return "";
  3664. 				if (input == "") return null;
  3665. 				return LZString._decompress(input.length, 32, function (index) {
  3666. 					return getBaseValue(keyStrBase64, input.charAt(index));
  3667. 				});
  3668. 			},
  3669.  
  3670. 			compressToUTF16: function (input) {
  3671. 				if (input == null) return "";
  3672. 				return (
  3673. 					LZString._compress(input, 15, function (a) {
  3674. 						return f(a + 32);
  3675. 					}) + " "
  3676. 				);
  3677. 			},
  3678.  
  3679. 			decompressFromUTF16: function (compressed) {
  3680. 				if (compressed == null) return "";
  3681. 				if (compressed == "") return null;
  3682. 				return LZString._decompress(
  3683. 					compressed.length,
  3684. 					16384,
  3685. 					function (index) {
  3686. 						return compressed.charCodeAt(index) - 32;
  3687. 					}
  3688. 				);
  3689. 			},
  3690.  
  3691. 			//compress into uint8array (UCS-2 big endian format)
  3692. 			compressToUint8Array: function (uncompressed) {
  3693. 				var compressed = LZString.compress(uncompressed);
  3694. 				var buf = new Uint8Array(compressed.length * 2); // 2 bytes per character
  3695.  
  3696. 				for (var i = 0, TotalLen = compressed.length; i < TotalLen; i++) {
  3697. 					var current_value = compressed.charCodeAt(i);
  3698. 					buf[i * 2] = current_value >>> 8;
  3699. 					buf[i * 2 + 1] = current_value % 256;
  3700. 				}
  3701. 				return buf;
  3702. 			},
  3703.  
  3704. 			//decompress from uint8array (UCS-2 big endian format)
  3705. 			decompressFromUint8Array: function (compressed) {
  3706. 				if (compressed === null || compressed === undefined) {
  3707. 					return LZString.decompress(compressed);
  3708. 				} else {
  3709. 					var buf = new Array(compressed.length / 2); // 2 bytes per character
  3710. 					for (var i = 0, TotalLen = buf.length; i < TotalLen; i++) {
  3711. 						buf[i] = compressed[i * 2] * 256 + compressed[i * 2 + 1];
  3712. 					}
  3713.  
  3714. 					var result = [];
  3715. 					buf.forEach(function (c) {
  3716. 						result.push(f(c));
  3717. 					});
  3718. 					return LZString.decompress(result.join(""));
  3719. 				}
  3720. 			},
  3721.  
  3722. 			//compress into a string that is already URI encoded
  3723. 			compressToEncodedURIComponent: function (input) {
  3724. 				if (input == null) return "";
  3725. 				return LZString._compress(input, 6, function (a) {
  3726. 					return keyStrUriSafe.charAt(a);
  3727. 				});
  3728. 			},
  3729.  
  3730. 			//decompress from an output of compressToEncodedURIComponent
  3731. 			decompressFromEncodedURIComponent: function (input) {
  3732. 				if (input == null) return "";
  3733. 				if (input == "") return null;
  3734. 				input = input.replace(/ /g, "+");
  3735. 				return LZString._decompress(input.length, 32, function (index) {
  3736. 					return getBaseValue(keyStrUriSafe, input.charAt(index));
  3737. 				});
  3738. 			},
  3739.  
  3740. 			compress: function (uncompressed) {
  3741. 				return LZString._compress(uncompressed, 16, function (a) {
  3742. 					return f(a);
  3743. 				});
  3744. 			},
  3745. 			_compress: function (uncompressed, bitsPerChar, getCharFromInt) {
  3746. 				if (uncompressed == null) return "";
  3747. 				var i,
  3748. 					value,
  3749. 					context_dictionary = {},
  3750. 					context_dictionaryToCreate = {},
  3751. 					context_c = "",
  3752. 					context_wc = "",
  3753. 					context_w = "",
  3754. 					context_enlargeIn = 2, // Compensate for the first entry which should not count
  3755. 					context_dictSize = 3,
  3756. 					context_numBits = 2,
  3757. 					context_data = [],
  3758. 					context_data_val = 0,
  3759. 					context_data_position = 0,
  3760. 					ii;
  3761.  
  3762. 				for (ii = 0; ii < uncompressed.length; ii += 1) {
  3763. 					context_c = uncompressed.charAt(ii);
  3764. 					if (
  3765. 						!Object.prototype.hasOwnProperty.call(
  3766. 							context_dictionary,
  3767. 							context_c
  3768. 						)
  3769. 					) {
  3770. 						context_dictionary[context_c] = context_dictSize++;
  3771. 						context_dictionaryToCreate[context_c] = true;
  3772. 					}
  3773.  
  3774. 					context_wc = context_w + context_c;
  3775. 					if (
  3776. 						Object.prototype.hasOwnProperty.call(
  3777. 							context_dictionary,
  3778. 							context_wc
  3779. 						)
  3780. 					) {
  3781. 						context_w = context_wc;
  3782. 					} else {
  3783. 						if (
  3784. 							Object.prototype.hasOwnProperty.call(
  3785. 								context_dictionaryToCreate,
  3786. 								context_w
  3787. 							)
  3788. 						) {
  3789. 							if (context_w.charCodeAt(0) < 256) {
  3790. 								for (i = 0; i < context_numBits; i++) {
  3791. 									context_data_val = context_data_val << 1;
  3792. 									if (context_data_position == bitsPerChar - 1) {
  3793. 										context_data_position = 0;
  3794. 										context_data.push(
  3795. 											getCharFromInt(context_data_val)
  3796. 										);
  3797. 										context_data_val = 0;
  3798. 									} else {
  3799. 										context_data_position++;
  3800. 									}
  3801. 								}
  3802. 								value = context_w.charCodeAt(0);
  3803. 								for (i = 0; i < 8; i++) {
  3804. 									context_data_val =
  3805. 										(context_data_val << 1) | (value & 1);
  3806. 									if (context_data_position == bitsPerChar - 1) {
  3807. 										context_data_position = 0;
  3808. 										context_data.push(
  3809. 											getCharFromInt(context_data_val)
  3810. 										);
  3811. 										context_data_val = 0;
  3812. 									} else {
  3813. 										context_data_position++;
  3814. 									}
  3815. 									value = value >> 1;
  3816. 								}
  3817. 							} else {
  3818. 								value = 1;
  3819. 								for (i = 0; i < context_numBits; i++) {
  3820. 									context_data_val =
  3821. 										(context_data_val << 1) | value;
  3822. 									if (context_data_position == bitsPerChar - 1) {
  3823. 										context_data_position = 0;
  3824. 										context_data.push(
  3825. 											getCharFromInt(context_data_val)
  3826. 										);
  3827. 										context_data_val = 0;
  3828. 									} else {
  3829. 										context_data_position++;
  3830. 									}
  3831. 									value = 0;
  3832. 								}
  3833. 								value = context_w.charCodeAt(0);
  3834. 								for (i = 0; i < 16; i++) {
  3835. 									context_data_val =
  3836. 										(context_data_val << 1) | (value & 1);
  3837. 									if (context_data_position == bitsPerChar - 1) {
  3838. 										context_data_position = 0;
  3839. 										context_data.push(
  3840. 											getCharFromInt(context_data_val)
  3841. 										);
  3842. 										context_data_val = 0;
  3843. 									} else {
  3844. 										context_data_position++;
  3845. 									}
  3846. 									value = value >> 1;
  3847. 								}
  3848. 							}
  3849. 							context_enlargeIn--;
  3850. 							if (context_enlargeIn == 0) {
  3851. 								context_enlargeIn = Math.pow(2, context_numBits);
  3852. 								context_numBits++;
  3853. 							}
  3854. 							delete context_dictionaryToCreate[context_w];
  3855. 						} else {
  3856. 							value = context_dictionary[context_w];
  3857. 							for (i = 0; i < context_numBits; i++) {
  3858. 								context_data_val =
  3859. 									(context_data_val << 1) | (value & 1);
  3860. 								if (context_data_position == bitsPerChar - 1) {
  3861. 									context_data_position = 0;
  3862. 									context_data.push(
  3863. 										getCharFromInt(context_data_val)
  3864. 									);
  3865. 									context_data_val = 0;
  3866. 								} else {
  3867. 									context_data_position++;
  3868. 								}
  3869. 								value = value >> 1;
  3870. 							}
  3871. 						}
  3872. 						context_enlargeIn--;
  3873. 						if (context_enlargeIn == 0) {
  3874. 							context_enlargeIn = Math.pow(2, context_numBits);
  3875. 							context_numBits++;
  3876. 						}
  3877. 						// Add wc to the dictionary.
  3878. 						context_dictionary[context_wc] = context_dictSize++;
  3879. 						context_w = String(context_c);
  3880. 					}
  3881. 				}
  3882.  
  3883. 				// Output the code for w.
  3884. 				if (context_w !== "") {
  3885. 					if (
  3886. 						Object.prototype.hasOwnProperty.call(
  3887. 							context_dictionaryToCreate,
  3888. 							context_w
  3889. 						)
  3890. 					) {
  3891. 						if (context_w.charCodeAt(0) < 256) {
  3892. 							for (i = 0; i < context_numBits; i++) {
  3893. 								context_data_val = context_data_val << 1;
  3894. 								if (context_data_position == bitsPerChar - 1) {
  3895. 									context_data_position = 0;
  3896. 									context_data.push(
  3897. 										getCharFromInt(context_data_val)
  3898. 									);
  3899. 									context_data_val = 0;
  3900. 								} else {
  3901. 									context_data_position++;
  3902. 								}
  3903. 							}
  3904. 							value = context_w.charCodeAt(0);
  3905. 							for (i = 0; i < 8; i++) {
  3906. 								context_data_val =
  3907. 									(context_data_val << 1) | (value & 1);
  3908. 								if (context_data_position == bitsPerChar - 1) {
  3909. 									context_data_position = 0;
  3910. 									context_data.push(
  3911. 										getCharFromInt(context_data_val)
  3912. 									);
  3913. 									context_data_val = 0;
  3914. 								} else {
  3915. 									context_data_position++;
  3916. 								}
  3917. 								value = value >> 1;
  3918. 							}
  3919. 						} else {
  3920. 							value = 1;
  3921. 							for (i = 0; i < context_numBits; i++) {
  3922. 								context_data_val = (context_data_val << 1) | value;
  3923. 								if (context_data_position == bitsPerChar - 1) {
  3924. 									context_data_position = 0;
  3925. 									context_data.push(
  3926. 										getCharFromInt(context_data_val)
  3927. 									);
  3928. 									context_data_val = 0;
  3929. 								} else {
  3930. 									context_data_position++;
  3931. 								}
  3932. 								value = 0;
  3933. 							}
  3934. 							value = context_w.charCodeAt(0);
  3935. 							for (i = 0; i < 16; i++) {
  3936. 								context_data_val =
  3937. 									(context_data_val << 1) | (value & 1);
  3938. 								if (context_data_position == bitsPerChar - 1) {
  3939. 									context_data_position = 0;
  3940. 									context_data.push(
  3941. 										getCharFromInt(context_data_val)
  3942. 									);
  3943. 									context_data_val = 0;
  3944. 								} else {
  3945. 									context_data_position++;
  3946. 								}
  3947. 								value = value >> 1;
  3948. 							}
  3949. 						}
  3950. 						context_enlargeIn--;
  3951. 						if (context_enlargeIn == 0) {
  3952. 							context_enlargeIn = Math.pow(2, context_numBits);
  3953. 							context_numBits++;
  3954. 						}
  3955. 						delete context_dictionaryToCreate[context_w];
  3956. 					} else {
  3957. 						value = context_dictionary[context_w];
  3958. 						for (i = 0; i < context_numBits; i++) {
  3959. 							context_data_val =
  3960. 								(context_data_val << 1) | (value & 1);
  3961. 							if (context_data_position == bitsPerChar - 1) {
  3962. 								context_data_position = 0;
  3963. 								context_data.push(getCharFromInt(context_data_val));
  3964. 								context_data_val = 0;
  3965. 							} else {
  3966. 								context_data_position++;
  3967. 							}
  3968. 							value = value >> 1;
  3969. 						}
  3970. 					}
  3971. 					context_enlargeIn--;
  3972. 					if (context_enlargeIn == 0) {
  3973. 						context_enlargeIn = Math.pow(2, context_numBits);
  3974. 						context_numBits++;
  3975. 					}
  3976. 				}
  3977.  
  3978. 				// Mark the end of the stream
  3979. 				value = 2;
  3980. 				for (i = 0; i < context_numBits; i++) {
  3981. 					context_data_val = (context_data_val << 1) | (value & 1);
  3982. 					if (context_data_position == bitsPerChar - 1) {
  3983. 						context_data_position = 0;
  3984. 						context_data.push(getCharFromInt(context_data_val));
  3985. 						context_data_val = 0;
  3986. 					} else {
  3987. 						context_data_position++;
  3988. 					}
  3989. 					value = value >> 1;
  3990. 				}
  3991.  
  3992. 				// Flush the last char
  3993. 				while (true) {
  3994. 					context_data_val = context_data_val << 1;
  3995. 					if (context_data_position == bitsPerChar - 1) {
  3996. 						context_data.push(getCharFromInt(context_data_val));
  3997. 						break;
  3998. 					} else context_data_position++;
  3999. 				}
  4000. 				return context_data.join("");
  4001. 			},
  4002.  
  4003. 			decompress: function (compressed) {
  4004. 				if (compressed == null) return "";
  4005. 				if (compressed == "") return null;
  4006. 				return LZString._decompress(
  4007. 					compressed.length,
  4008. 					32768,
  4009. 					function (index) {
  4010. 						return compressed.charCodeAt(index);
  4011. 					}
  4012. 				);
  4013. 			},
  4014.  
  4015. 			_decompress: function (length, resetValue, getNextValue) {
  4016. 				var dictionary = [],
  4017. 					enlargeIn = 4,
  4018. 					dictSize = 4,
  4019. 					numBits = 3,
  4020. 					entry = "",
  4021. 					result = [],
  4022. 					i,
  4023. 					w,
  4024. 					bits,
  4025. 					resb,
  4026. 					maxpower,
  4027. 					power,
  4028. 					c,
  4029. 					data = { val: getNextValue(0), position: resetValue, index: 1 };
  4030.  
  4031. 				for (i = 0; i < 3; i += 1) {
  4032. 					dictionary[i] = i;
  4033. 				}
  4034.  
  4035. 				bits = 0;
  4036. 				maxpower = Math.pow(2, 2);
  4037. 				power = 1;
  4038. 				while (power != maxpower) {
  4039. 					resb = data.val & data.position;
  4040. 					data.position >>= 1;
  4041. 					if (data.position == 0) {
  4042. 						data.position = resetValue;
  4043. 						data.val = getNextValue(data.index++);
  4044. 					}
  4045. 					bits |= (resb > 0 ? 1 : 0) * power;
  4046. 					power <<= 1;
  4047. 				}
  4048.  
  4049. 				switch ((bits)) {
  4050. 					case 0:
  4051. 						bits = 0;
  4052. 						maxpower = Math.pow(2, 8);
  4053. 						power = 1;
  4054. 						while (power != maxpower) {
  4055. 							resb = data.val & data.position;
  4056. 							data.position >>= 1;
  4057. 							if (data.position == 0) {
  4058. 								data.position = resetValue;
  4059. 								data.val = getNextValue(data.index++);
  4060. 							}
  4061. 							bits |= (resb > 0 ? 1 : 0) * power;
  4062. 							power <<= 1;
  4063. 						}
  4064. 						c = f(bits);
  4065. 						break;
  4066. 					case 1:
  4067. 						bits = 0;
  4068. 						maxpower = Math.pow(2, 16);
  4069. 						power = 1;
  4070. 						while (power != maxpower) {
  4071. 							resb = data.val & data.position;
  4072. 							data.position >>= 1;
  4073. 							if (data.position == 0) {
  4074. 								data.position = resetValue;
  4075. 								data.val = getNextValue(data.index++);
  4076. 							}
  4077. 							bits |= (resb > 0 ? 1 : 0) * power;
  4078. 							power <<= 1;
  4079. 						}
  4080. 						c = f(bits);
  4081. 						break;
  4082. 					case 2:
  4083. 						return "";
  4084. 				}
  4085. 				dictionary[3] = c;
  4086. 				w = c;
  4087. 				result.push(c);
  4088. 				while (true) {
  4089. 					if (data.index > length) {
  4090. 						return "";
  4091. 					}
  4092.  
  4093. 					bits = 0;
  4094. 					maxpower = Math.pow(2, numBits);
  4095. 					power = 1;
  4096. 					while (power != maxpower) {
  4097. 						resb = data.val & data.position;
  4098. 						data.position >>= 1;
  4099. 						if (data.position == 0) {
  4100. 							data.position = resetValue;
  4101. 							data.val = getNextValue(data.index++);
  4102. 						}
  4103. 						bits |= (resb > 0 ? 1 : 0) * power;
  4104. 						power <<= 1;
  4105. 					}
  4106.  
  4107. 					switch ((c = bits)) {
  4108. 						case 0:
  4109. 							bits = 0;
  4110. 							maxpower = Math.pow(2, 8);
  4111. 							power = 1;
  4112. 							while (power != maxpower) {
  4113. 								resb = data.val & data.position;
  4114. 								data.position >>= 1;
  4115. 								if (data.position == 0) {
  4116. 									data.position = resetValue;
  4117. 									data.val = getNextValue(data.index++);
  4118. 								}
  4119. 								bits |= (resb > 0 ? 1 : 0) * power;
  4120. 								power <<= 1;
  4121. 							}
  4122.  
  4123. 							dictionary[dictSize++] = f(bits);
  4124. 							c = dictSize - 1;
  4125. 							enlargeIn--;
  4126. 							break;
  4127. 						case 1:
  4128. 							bits = 0;
  4129. 							maxpower = Math.pow(2, 16);
  4130. 							power = 1;
  4131. 							while (power != maxpower) {
  4132. 								resb = data.val & data.position;
  4133. 								data.position >>= 1;
  4134. 								if (data.position == 0) {
  4135. 									data.position = resetValue;
  4136. 									data.val = getNextValue(data.index++);
  4137. 								}
  4138. 								bits |= (resb > 0 ? 1 : 0) * power;
  4139. 								power <<= 1;
  4140. 							}
  4141. 							dictionary[dictSize++] = f(bits);
  4142. 							c = dictSize - 1;
  4143. 							enlargeIn--;
  4144. 							break;
  4145. 						case 2:
  4146. 							return result.join("");
  4147. 					}
  4148.  
  4149. 					if (enlargeIn == 0) {
  4150. 						enlargeIn = Math.pow(2, numBits);
  4151. 						numBits++;
  4152. 					}
  4153.  
  4154. 					if (dictionary[c]) {
  4155. 						entry = dictionary[c];
  4156. 					} else {
  4157. 						if (c === dictSize) {
  4158. 							entry = w + w.charAt(0);
  4159. 						} else {
  4160. 							return null;
  4161. 						}
  4162. 					}
  4163. 					result.push(entry);
  4164.  
  4165. 					// Add w+entry[0] to the dictionary.
  4166. 					dictionary[dictSize++] = w + entry.charAt(0);
  4167. 					enlargeIn--;
  4168.  
  4169. 					w = entry;
  4170.  
  4171. 					if (enlargeIn == 0) {
  4172. 						enlargeIn = Math.pow(2, numBits);
  4173. 						numBits++;
  4174. 					}
  4175. 				}
  4176. 			},
  4177. 		};
  4178. 		return LZString;
  4179. 	})();
  4180.  
  4181. 	var LZString$1 = LZString;
  4182.  
  4183. 	class UserCSS {
  4184. 		#settings;
  4185. 		#currentActivity;
  4186. 		#currentUser;
  4187. 		css = "";
  4188. 		preview = false;
  4189. 		cssInLocalStorage = "void-verified-user-css";
  4190. 		broadcastChannel;
  4191.  
  4192. 		constructor(settings) {
  4193. 			this.#settings = settings;
  4194. 			if (
  4195. 				this.#settings.auth?.token &&
  4196. 				this.#settings.options.profileCssEnabled.getValue()
  4197. 			) {
  4198. 				const cssInLocalStorage = JSON.parse(
  4199. 					localStorage.getItem(this.cssInLocalStorage)
  4200. 				);
  4201. 				if (cssInLocalStorage) {
  4202. 					this.css = cssInLocalStorage.css;
  4203. 					this.preview = cssInLocalStorage.preview;
  4204. 				} else {
  4205. 					this.getAuthUserCss();
  4206. 				}
  4207. 			}
  4208.  
  4209. 			this.broadcastChannel = new BroadcastChannel("user-css");
  4210. 			this.broadcastChannel.addEventListener("message", (event) =>
  4211. 				this.#handleBroadcastMessage(event, this.#settings)
  4212. 			);
  4213. 		}
  4214.  
  4215. 		async checkActivityCss() {
  4216. 			if (
  4217. 				!this.#settings.options.activityCssEnabled.getValue() ||
  4218. 				!window.location.pathname.startsWith("/activity/")
  4219. 			) {
  4220. 				return;
  4221. 			}
  4222.  
  4223. 			const activityId = window.location.pathname.match(
  4224. 				/^\/activity\/([^/]*)\/?/
  4225. 			)[1];
  4226.  
  4227. 			if (this.#currentActivity === activityId) {
  4228. 				return;
  4229. 			}
  4230.  
  4231. 			this.#currentActivity = activityId;
  4232. 			let activity;
  4233. 			try {
  4234. 				Toaster.debug("Querying user activity.");
  4235. 				const anilistAPI = new AnilistAPI(this.#settings);
  4236. 				activity = await anilistAPI.getActivityCss(activityId);
  4237. 			} catch {
  4238. 				Toaster.error("Failed to get activity CSS.");
  4239. 				return;
  4240. 			}
  4241.  
  4242. 			const username = activity.user?.name ?? activity.recipient?.name;
  4243.  
  4244. 			const userColor =
  4245. 				activity.user?.options.profileColor ??
  4246. 				activity.recipient?.options.profileColor;
  4247. 			const rgb = ColorFunctions.handleAnilistColor(userColor);
  4248.  
  4249. 			const activityEntry = document.querySelector(
  4250. 				".container > .activity-entry"
  4251. 			);
  4252.  
  4253. 			activityEntry.style.setProperty("--color-blue", rgb);
  4254. 			activityEntry.style.setProperty("--color-blue-dim", rgb);
  4255.  
  4256. 			if (username === this.#settings.anilistUser && this.preview) {
  4257. 				this.#renderCss(this.css, "user-css");
  4258. 				return;
  4259. 			}
  4260.  
  4261. 			if (username === this.#currentUser) {
  4262. 				this.#clearGlobalCss();
  4263. 				return;
  4264. 			}
  4265. 			new StyleHandler(this.#settings).clearStyles("user-css");
  4266.  
  4267. 			if (!this.#shouldRenderCss(username)) {
  4268. 				return;
  4269. 			}
  4270.  
  4271. 			const about = activity.user?.about ?? activity.recipient?.about;
  4272.  
  4273. 			const css = this.#decodeAbout(about)?.customCSS;
  4274. 			if (css) {
  4275. 				this.#renderCss(css, "user-css");
  4276. 			} else {
  4277. 				Toaster.debug("User has no custom CSS.");
  4278. 			}
  4279.  
  4280. 			this.#currentUser = username;
  4281. 		}
  4282.  
  4283. 		resetCurrentActivity() {
  4284. 			this.#currentActivity = null;
  4285. 		}
  4286.  
  4287. 		async checkUserCss() {
  4288. 			if (
  4289. 				!this.#settings.options.profileCssEnabled.getValue() ||
  4290. 				!window.location.pathname.startsWith("/user/")
  4291. 			) {
  4292. 				return;
  4293. 			}
  4294.  
  4295. 			const username =
  4296. 				window.location.pathname.match(/^\/user\/([^/]*)\/?/)[1];
  4297.  
  4298. 			if (username === this.#currentUser) {
  4299. 				return;
  4300. 			}
  4301.  
  4302. 			if (username === this.#settings.anilistUser && this.preview) {
  4303. 				this.#renderCss(this.css, "user-css");
  4304. 				return;
  4305. 			}
  4306.  
  4307. 			if (!this.#shouldRenderCss(username)) {
  4308. 				new StyleHandler(this.#settings).clearStyles("user-css");
  4309. 				return;
  4310. 			}
  4311.  
  4312. 			this.#currentUser = username;
  4313.  
  4314. 			let about;
  4315. 			try {
  4316. 				Toaster.debug("Querying user CSS.");
  4317. 				const anilistAPI = new AnilistAPI(this.#settings);
  4318. 				about = await anilistAPI.getUserAbout(username);
  4319. 			} catch (error) {
  4320. 				Toaster.error("Failed to load user's CSS.");
  4321. 				return;
  4322. 			}
  4323.  
  4324. 			const css = this.#decodeAbout(about)?.customCSS;
  4325. 			if (!css) {
  4326. 				Toaster.debug("User has no custom CSS.");
  4327. 				new StyleHandler(this.#settings).clearStyles("user-css");
  4328. 			}
  4329. 			this.#renderCss(css, "user-css");
  4330. 		}
  4331.  
  4332. 		resetCurrentUser() {
  4333. 			this.#currentUser = null;
  4334. 		}
  4335.  
  4336. 		updateCss(css) {
  4337. 			this.css = css;
  4338. 			if (this.preview) {
  4339. 				this.broadcastChannel.postMessage({ type: "css", css });
  4340. 			}
  4341. 			this.#saveToLocalStorage();
  4342. 		}
  4343.  
  4344. 		async publishUserCss() {
  4345. 			const username = this.#settings.anilistUser;
  4346. 			if (!username) {
  4347. 				return;
  4348. 			}
  4349.  
  4350. 			const anilistAPI = new AnilistAPI(this.#settings);
  4351. 			let about;
  4352. 			try {
  4353. 				Toaster.debug("Querying account user about to merge changes into.");
  4354. 				about = await anilistAPI.getUserAbout(username);
  4355. 			} catch (error) {
  4356. 				Toaster.error("Failed to get current about for merging new CSS.");
  4357. 				return;
  4358. 			}
  4359. 			if (!about) {
  4360. 				about = "";
  4361. 			}
  4362. 			let aboutJson = this.#decodeAbout(about);
  4363. 			aboutJson.customCSS = this.css;
  4364. 			const compressedAbout = LZString$1.compressToBase64(
  4365. 				JSON.stringify(aboutJson)
  4366. 			);
  4367.  
  4368. 			const target = about.match(/^\[\]\(json([A-Za-z0-9+/=]+)\)/)?.[1];
  4369.  
  4370. 			if (target) {
  4371. 				about = about.replace(target, compressedAbout);
  4372. 			} else {
  4373. 				about = `[](json${compressedAbout})\n\n` + about;
  4374. 			}
  4375. 			try {
  4376. 				Toaster.debug("Publishing CSS.");
  4377. 				await anilistAPI.saveUserAbout(about);
  4378. 				Toaster.success("CSS published.");
  4379. 			} catch (error) {
  4380. 				Toaster.error("Failed to publish CSS changes.");
  4381. 			}
  4382. 		}
  4383.  
  4384. 		togglePreview() {
  4385. 			this.preview = !this.preview;
  4386. 			this.broadcastChannel.postMessage({
  4387. 				type: "preview",
  4388. 				preview: this.preview,
  4389. 			});
  4390. 			this.#saveToLocalStorage();
  4391. 		}
  4392.  
  4393. 		async getAuthUserCss() {
  4394. 			const anilistAPI = new AnilistAPI(this.#settings);
  4395. 			const username = this.#settings.anilistUser;
  4396. 			if (!username) {
  4397. 				return;
  4398. 			}
  4399. 			try {
  4400. 				Toaster.debug("Querying account user CSS.");
  4401. 				const about = await anilistAPI.getUserAbout(username);
  4402. 				const css = this.#decodeAbout(about).customCSS;
  4403. 				this.css = css;
  4404. 				this.#saveToLocalStorage();
  4405. 				return css;
  4406. 			} catch (error) {
  4407. 				Toaster.error("Failed to query account user CSS.");
  4408. 			}
  4409. 		}
  4410.  
  4411. 		#handleBroadcastMessage(event, settings) {
  4412. 			switch (event.data.type) {
  4413. 				case "css":
  4414. 					this.#handlePreviewCssMessage(event.data.css, settings);
  4415. 					break;
  4416. 				case "preview":
  4417. 					this.#handlePreviewToggleMessage(event.data.preview);
  4418. 					break;
  4419. 			}
  4420. 		}
  4421.  
  4422. 		#handlePreviewCssMessage(css, settings) {
  4423. 			this.css = css;
  4424. 			const hasUserCss = document.getElementById(
  4425. 				"void-verified-user-css-styles"
  4426. 			);
  4427. 			if (hasUserCss) {
  4428. 				new StyleHandler(settings).createStyleLink(css, "user-css");
  4429. 			}
  4430. 		}
  4431.  
  4432. 		#handlePreviewToggleMessage(preview) {
  4433. 			this.preview = preview;
  4434. 			const hasUserCss = document.getElementById(
  4435. 				"void-verified-user-css-styles"
  4436. 			);
  4437. 			if (!hasUserCss) {
  4438. 				return;
  4439. 			}
  4440.  
  4441. 			this.resetCurrentUser();
  4442. 			this.resetCurrentActivity();
  4443.  
  4444. 			this.checkUserCss();
  4445. 			this.checkActivityCss();
  4446. 		}
  4447.  
  4448. 		#saveToLocalStorage() {
  4449. 			localStorage.setItem(
  4450. 				this.cssInLocalStorage,
  4451. 				JSON.stringify({
  4452. 					css: this.css,
  4453. 					preview: this.preview,
  4454. 				})
  4455. 			);
  4456. 		}
  4457.  
  4458. 		#shouldRenderCss(username) {
  4459. 			const user = this.#settings.getUser(username);
  4460. 			if (
  4461. 				this.#settings.options.onlyLoadCssFromVerifiedUser.getValue() &&
  4462. 				!this.#settings.isVerified(username)
  4463. 			) {
  4464. 				return false;
  4465. 			}
  4466. 			if (user?.onlyLoadCssFromVerifiedUser) {
  4467. 				return true;
  4468. 			}
  4469. 			return !this.#userSpecificRenderingExists();
  4470. 		}
  4471.  
  4472. 		#userSpecificRenderingExists() {
  4473. 			return this.#settings.verifiedUsers.some(
  4474. 				(user) => user.onlyLoadCssFromVerifiedUser
  4475. 			);
  4476. 		}
  4477.  
  4478. 		#renderCss(css, id) {
  4479. 			if (!css) {
  4480. 				return;
  4481. 			}
  4482.  
  4483. 			const styleHandler = new StyleHandler(this.#settings);
  4484. 			styleHandler.createStyleLink(css, id);
  4485. 			this.#clearGlobalCss();
  4486. 		}
  4487.  
  4488. 		#clearGlobalCss() {
  4489. 			if (this.#settings.options.globalCssAutoDisable.getValue()) {
  4490. 				new StyleHandler(this.#settings).clearStyles("global-css");
  4491. 			}
  4492. 		}
  4493.  
  4494. 		#decodeAbout(about) {
  4495. 			let json = (about || "").match(/^\[\]\(json([A-Za-z0-9+/=]+)\)/);
  4496. 			if (!json) {
  4497. 				return {
  4498. 					customCss: "",
  4499. 				};
  4500. 			}
  4501.  
  4502. 			let jsonData;
  4503. 			try {
  4504. 				jsonData = JSON.parse(atob(json[1]));
  4505. 			} catch (e) {
  4506. 				jsonData = JSON.parse(LZString$1.decompressFromBase64(json[1]));
  4507. 			}
  4508. 			return jsonData;
  4509. 		}
  4510. 	}
  4511.  
  4512. 	const markdownRegex = [
  4513. 		{
  4514. 			regex: /^##### (.*$)/gim,
  4515. 			format: "<h5>$1</h5>",
  4516. 		},
  4517. 		{
  4518. 			regex: /^#### (.*$)/gim,
  4519. 			format: "<h4>$1</h4>",
  4520. 		},
  4521. 		{
  4522. 			regex: /^### (.*$)/gim,
  4523. 			format: "<h3>$1</h3>",
  4524. 		},
  4525. 		{
  4526. 			regex: /^## (.*$)/gim,
  4527. 			format: "<h2>$1</h2>",
  4528. 		},
  4529. 		{
  4530. 			regex: /^# (.*$)/gim,
  4531. 			format: "<h1>$1</h1>",
  4532. 		},
  4533. 		{
  4534. 			regex: /\_\_(.*)\_\_/gim,
  4535. 			format: "<strong>$1</strong>",
  4536. 		},
  4537. 		{
  4538. 			regex: /\_(.*)\_/gim,
  4539. 			format: "<em>$1</em>",
  4540. 		},
  4541. 		{
  4542. 			regex: /(?:\r\n|\r|\n)/g,
  4543. 			format: "<br>",
  4544. 		},
  4545. 		{
  4546. 			regex: /\~~~(.*)\~~~/gim,
  4547. 			format: "<center>$1</center>",
  4548. 		},
  4549. 		{
  4550. 			regex: /\[([^\]]*)\]\(([^\)]+)\)/gi,
  4551. 			format: "<a href='$2' target='_blank'>$1</a>",
  4552. 		},
  4553. 		{
  4554. 			regex: /\~\!(.*)\!\~/gi,
  4555. 			format: "<span class='markdown-spoiler'><span>$1</span></span>",
  4556. 		},
  4557. 		{
  4558. 			regex: /img([0-9]+%?)\(([^\)]+)\)/g,
  4559. 			format: "<img src='$2' width='$1' >",
  4560. 		},
  4561. 	];
  4562.  
  4563. 	class Markdown {
  4564. 		static parse(markdown) {
  4565. 			let html = markdown;
  4566. 			for (const parser of markdownRegex) {
  4567. 				html = html.replace(parser.regex, parser.format);
  4568. 			}
  4569.  
  4570. 			return html;
  4571. 		}
  4572. 	}
  4573.  
  4574. 	class Layout {
  4575. 		avatar;
  4576. 		banner;
  4577. 		bio;
  4578. 		color;
  4579. 		donatorBadge;
  4580. 		name;
  4581.  
  4582. 		constructor(layout) {
  4583. 			this.avatar = layout?.avatar ?? "";
  4584. 			this.banner = layout?.banner ?? "";
  4585. 			this.bio = layout?.bio ?? "";
  4586. 			this.color = layout?.color ?? "";
  4587. 			this.donatorBadge = layout?.donatorBadge ?? "";
  4588. 			this.name = layout?.name ?? "New Layout";
  4589. 		}
  4590. 	}
  4591.  
  4592. 	class LayoutDesigner {
  4593. 		#settings;
  4594. 		#layoutsInLocalStorage = "void-verified-layouts";
  4595. 		#originalHtml;
  4596. 		#broadcastChannel;
  4597. 		#donatorTier = 0;
  4598. 		#anilistSettings;
  4599. 		#layout;
  4600. 		#layouts = {
  4601. 			selectedLayout: 0,
  4602. 			preview: false,
  4603. 			disableCss: false,
  4604. 			layoutsList: [new Layout()],
  4605. 		};
  4606.  
  4607. 		constructor(settings) {
  4608. 			this.#settings = settings;
  4609.  
  4610. 			this.#broadcastChannel = new BroadcastChannel("void-layouts");
  4611. 			this.#broadcastChannel.addEventListener("message", (event) =>
  4612. 				this.#handleBroadcastMessage(event)
  4613. 			);
  4614.  
  4615. 			const layouts = JSON.parse(
  4616. 				localStorage.getItem(this.#layoutsInLocalStorage)
  4617. 			);
  4618. 			if (layouts) {
  4619. 				this.#layouts = layouts;
  4620. 				this.#layouts.layoutsList = layouts.layoutsList.map(
  4621. 					(layout) => new Layout(layout)
  4622. 				);
  4623. 			}
  4624.  
  4625. 			this.#anilistSettings = JSON.parse(localStorage.getItem("auth"));
  4626.  
  4627. 			this.#donatorTier = this.#anilistSettings?.donatorTier;
  4628. 			this.#layout = this.#getSelectedLayout();
  4629. 		}
  4630.  
  4631. 		renderLayoutPreview() {
  4632. 			if (!this.#settings.options.layoutDesignerEnabled.getValue()) {
  4633. 				return;
  4634. 			}
  4635.  
  4636. 			if (!window.location.pathname.startsWith("/user/")) {
  4637. 				return;
  4638. 			}
  4639. 			const username =
  4640. 				window.location.pathname.match(/^\/user\/([^/]*)\/?/)[1];
  4641.  
  4642. 			if (username !== this.#settings.anilistUser || !this.#layouts.preview) {
  4643. 				return;
  4644. 			}
  4645.  
  4646. 			this.#handleAvatar(this.#layout.avatar);
  4647. 			this.#handleBanner(this.#layout.banner);
  4648. 			this.#handleColor(this.#layout.color);
  4649. 			this.#handleDonatorBadge(this.#layout.donatorBadge);
  4650. 			this.#handleCss();
  4651. 			this.#handleAbout(Markdown.parse(this.#layout.bio ?? ""));
  4652. 		}
  4653.  
  4654. 		#handleBroadcastMessage(event) {
  4655. 			switch (event.data.type) {
  4656. 				case "preview":
  4657. 					this.#handlePreviewToggleMessage(event.data.preview);
  4658. 					break;
  4659. 				case "layout":
  4660. 					this.#handleLayoutMessage(event.data.layout);
  4661. 					break;
  4662. 				case "css":
  4663. 					this.#handleCssMessage(event.data.disableCss);
  4664. 					break;
  4665. 			}
  4666. 		}
  4667.  
  4668. 		#handlePreviewToggleMessage(preview) {
  4669. 			this.#layouts.preview = preview;
  4670. 			if (preview) {
  4671. 				return;
  4672. 			}
  4673.  
  4674. 			this.#handleAvatar(this.#anilistSettings?.avatar?.large);
  4675. 			this.#handleBanner(this.#anilistSettings?.bannerImage);
  4676. 			this.#handleColor(this.#anilistSettings.options.profileColor);
  4677. 			this.#handleDonatorBadge(this.#anilistSettings.donatorBadge);
  4678. 			this.#layouts.disableCss = false;
  4679. 			this.#handleCss();
  4680. 			this.#handleAbout(this.#originalHtml);
  4681. 		}
  4682.  
  4683. 		#handleLayoutMessage(layout) {
  4684. 			this.#layout = layout;
  4685. 		}
  4686.  
  4687. 		#handleCssMessage(disableCss) {
  4688. 			this.#layouts.disableCss = disableCss;
  4689. 		}
  4690.  
  4691. 		#handleAvatar(avatar) {
  4692. 			if (avatar === "") {
  4693. 				return;
  4694. 			}
  4695.  
  4696. 			const avatarElement = document.querySelector("img.avatar");
  4697. 			avatarElement.src = avatar;
  4698.  
  4699. 			const avatarLinks = document.querySelectorAll(
  4700. 				`a.avatar[href*="${this.#settings.anilistUser}"]`
  4701. 			);
  4702. 			for (const avatarLink of avatarLinks) {
  4703. 				avatarLink.style = `background-image: url(${avatar})`;
  4704. 			}
  4705. 		}
  4706.  
  4707. 		#handleBanner(banner) {
  4708. 			if (banner === "") {
  4709. 				return;
  4710. 			}
  4711.  
  4712. 			const bannerElement = document.querySelector(".banner");
  4713. 			bannerElement.style = `background-image: url(${banner})`;
  4714. 		}
  4715.  
  4716. 		#handleColor(value) {
  4717. 			let color;
  4718. 			try {
  4719. 				color = ColorFunctions.handleAnilistColor(value);
  4720. 			} catch (err) {
  4721. 				return;
  4722. 			}
  4723.  
  4724. 			const pageContent = document.querySelector(".page-content > .user");
  4725. 			pageContent.style.setProperty("--color-blue", color);
  4726. 			pageContent.style.setProperty("--color-blue-dim", color);
  4727. 		}
  4728.  
  4729. 		#handleDonatorBadge(donatorText) {
  4730. 			if (this.#donatorTier < 3 || donatorText === "") {
  4731. 				return;
  4732. 			}
  4733.  
  4734. 			const donatorBadge = document.querySelector(".donator-badge");
  4735. 			donatorBadge.innerText = donatorText;
  4736. 		}
  4737.  
  4738. 		#handleCss() {
  4739. 			if (this.#layouts.disableCss) {
  4740. 				DOM.get("#verified-user-css-styles")?.setAttribute(
  4741. 					"disabled",
  4742. 					true
  4743. 				);
  4744. 			} else {
  4745. 				DOM.get("#verified-user-css-styles")?.removeAttribute("disabled");
  4746. 			}
  4747. 		}
  4748.  
  4749. 		#handleAbout(about) {
  4750. 			const aboutContainer = document.querySelector(".about .markdown");
  4751.  
  4752. 			if (!this.#originalHtml) {
  4753. 				this.#originalHtml = aboutContainer.innerHTML;
  4754. 			}
  4755.  
  4756. 			aboutContainer.innerHTML = about !== "" ? about : this.#originalHtml;
  4757. 		}
  4758.  
  4759. 		renderSettings(settingsUi) {
  4760. 			if (!this.#settings.options.layoutDesignerEnabled.getValue()) {
  4761. 				return "";
  4762. 			}
  4763. 			const container = DOM.create("div", "layout-designer-container");
  4764.  
  4765. 			const header = DOM.create("h3", null, "Layout Designer");
  4766.  
  4767. 			const layoutSelector = this.#createLayoutSelector(settingsUi);
  4768. 			const layoutInfoSection = this.#layoutInfoSection(settingsUi);
  4769.  
  4770. 			const imageSection = DOM.create("div");
  4771.  
  4772. 			imageSection.append(
  4773. 				this.#createImageField("avatar", this.#layout.avatar, settingsUi)
  4774. 			);
  4775.  
  4776. 			imageSection.append(
  4777. 				this.#createImageField("banner", this.#layout.banner, settingsUi)
  4778. 			);
  4779.  
  4780. 			const imageUploadNote = Note(
  4781. 				"You can preview avatar & banner by providing a link to an image. If you have configured a image host, you can upload images by pasting them to the fields. "
  4782. 			);
  4783.  
  4784. 			imageUploadNote.append(
  4785. 				DOM.create("br"),
  4786. 				"Unfortunately AniList API does not support third parties uploading new avatars or banners. You have to upload them separately."
  4787. 			);
  4788.  
  4789. 			const colorSelection = this.#createColorSelection(settingsUi);
  4790.  
  4791. 			const previewButton = Button(
  4792. 				this.#layouts.preview ? "Disable Preview" : "Enable Preview",
  4793. 				() => {
  4794. 					this.#togglePreview(settingsUi);
  4795. 				}
  4796. 			);
  4797.  
  4798. 			const cssButton = Button(
  4799. 				this.#layouts.disableCss ? "Enable Css" : "Disable Css",
  4800. 				() => {
  4801. 					this.#toggleCss();
  4802. 					cssButton.innerText = this.#layouts.disableCss
  4803. 						? "Enable Css"
  4804. 						: "Disable Css";
  4805. 				}
  4806. 			);
  4807.  
  4808. 			const getAboutButton = Button(
  4809. 				"Reset About",
  4810. 				() => {
  4811. 					this.#getUserAbout(settingsUi);
  4812. 				},
  4813. 				"error"
  4814. 			);
  4815.  
  4816. 			container.append(
  4817. 				header,
  4818. 				layoutSelector,
  4819. 				layoutInfoSection,
  4820. 				imageSection,
  4821. 				imageUploadNote,
  4822. 				colorSelection
  4823. 			);
  4824.  
  4825. 			if (this.#donatorTier >= 3) {
  4826. 				container.append(this.#createDonatorBadgeField(settingsUi));
  4827. 			}
  4828.  
  4829. 			container.append(this.#createAboutSection(settingsUi), getAboutButton);
  4830.  
  4831. 			if (this.#settings.auth?.token) {
  4832. 				const saveAboutButton = Button(
  4833. 					"Publish About",
  4834. 					(event) => {
  4835. 						this.#publishAbout(event, settingsUi);
  4836. 					},
  4837. 					"success"
  4838. 				);
  4839. 				container.append(saveAboutButton);
  4840. 			}
  4841.  
  4842. 			container.append(previewButton);
  4843.  
  4844. 			if (this.#layouts.preview) {
  4845. 				container.append(cssButton);
  4846. 			}
  4847. 			return container;
  4848. 		}
  4849.  
  4850. 		#createLayoutSelector(settingsUi) {
  4851. 			const container = DOM.create("div");
  4852. 			container.append(
  4853. 				IconButton(AddIcon(), () => {
  4854. 					this.#addLayout();
  4855. 					settingsUi.renderSettingsUiContent();
  4856. 				})
  4857. 			);
  4858. 			const options = this.#layouts.layoutsList.map((layout, index) =>
  4859. 				Option$1(
  4860. 					`${layout.name} #${index + 1}`,
  4861. 					index === this.#layouts.selectedLayout,
  4862. 					() => {
  4863. 						this.#switchLayout(index);
  4864. 						settingsUi.renderSettingsUiContent();
  4865. 					}
  4866. 				)
  4867. 			);
  4868.  
  4869. 			container.append(Select(options));
  4870. 			return container;
  4871. 		}
  4872.  
  4873. 		#switchLayout(index) {
  4874. 			this.#layout = this.#layouts.layoutsList[index];
  4875. 			this.#layouts.selectedLayout = index;
  4876. 			this.#saveToLocalStorage();
  4877. 			this.#broadcastLayoutChange();
  4878. 		}
  4879.  
  4880. 		#addLayout() {
  4881. 			const layout = new Layout();
  4882. 			this.#layout = layout;
  4883. 			this.#layouts.layoutsList.push(layout);
  4884. 			this.#layouts.selectedLayout = Math.max(
  4885. 				this.#layouts.layoutsList.length - 1,
  4886. 				0
  4887. 			);
  4888. 			this.#saveToLocalStorage();
  4889. 			this.#broadcastLayoutChange();
  4890. 		}
  4891.  
  4892. 		#deleteLayout() {
  4893. 			if (!window.confirm("Are you sure you want to delete this layout?")) {
  4894. 				return;
  4895. 			}
  4896. 			this.#layouts.layoutsList.splice(this.#layouts.selectedLayout, 1);
  4897. 			this.#layouts.selectedLayout = Math.max(
  4898. 				this.#layouts.selectedLayout - 1,
  4899. 				0
  4900. 			);
  4901.  
  4902. 			if (this.#layouts.layoutsList.length === 0) {
  4903. 				this.#layouts.layoutsList.push(new Layout());
  4904. 			}
  4905.  
  4906. 			this.#layout = this.#layouts.layoutsList[this.#layouts.selectedLayout];
  4907. 			this.#saveToLocalStorage();
  4908. 			this.#broadcastLayoutChange();
  4909. 		}
  4910.  
  4911. 		#layoutInfoSection(settingsUi) {
  4912. 			const container = Label(
  4913. 				"Layout name",
  4914. 				InputField(this.#layout?.name, (event) => {
  4915. 					this.#updateOption("name", event.target.value, settingsUi);
  4916. 				})
  4917. 			);
  4918.  
  4919. 			container.append(
  4920. 				IconButton(TrashcanIcon(), () => {
  4921. 					this.#deleteLayout();
  4922. 					settingsUi.renderSettingsUiContent();
  4923. 				})
  4924. 			);
  4925. 			return container;
  4926. 		}
  4927.  
  4928. 		#createInputField(field, value, settingsUi) {
  4929. 			const input = InputField(value, (event) => {
  4930. 				this.#updateOption(field, event.target.value, settingsUi);
  4931. 			});
  4932. 			return input;
  4933. 		}
  4934.  
  4935. 		#createImageField(field, value, settingsUi) {
  4936. 			const container = DOM.create("div", "layout-image-container");
  4937. 			const header = DOM.create("h5", "layout-header", field);
  4938. 			const display = DOM.create("div", `layout-image-display ${field}`);
  4939. 			display.style.backgroundImage = `url(${value})`;
  4940. 			const input = this.#createInputField(field, value, settingsUi);
  4941.  
  4942. 			container.append(header, display, input);
  4943. 			return container;
  4944. 		}
  4945.  
  4946. 		#createDonatorBadgeField(settingsUi) {
  4947. 			const container = DOM.create("div", "layout-donator-badge-container");
  4948. 			const donatorHeader = DOM.create(
  4949. 				"h5",
  4950. 				"layout-header",
  4951. 				"Donator Badge"
  4952. 			);
  4953. 			const donatorInput = InputField(this.#layout.donatorBadge, (event) => {
  4954. 				this.#updateOption("donatorBadge", event.target.value, settingsUi);
  4955. 			});
  4956. 			donatorInput.setAttribute("maxlength", 24);
  4957.  
  4958. 			container.append(donatorHeader, donatorInput);
  4959.  
  4960. 			if (
  4961. 				this.#layout.donatorBadge !== this.#anilistSettings.donatorBadge &&
  4962. 				this.#layout.donatorBadge !== "" &&
  4963. 				this.#settings.auth?.token
  4964. 			) {
  4965. 				const publishButton = Button("Publish Donator Badge", (event) => {
  4966. 					this.#publishDonatorText(event, settingsUi);
  4967. 				});
  4968. 				container.append(DOM.create("div", null, publishButton));
  4969. 			}
  4970.  
  4971. 			return container;
  4972. 		}
  4973.  
  4974. 		#createColorSelection(settingsUi) {
  4975. 			const container = DOM.create("div", "layout-color-selection");
  4976.  
  4977. 			const header = DOM.create("h5", "layout-header", "Color");
  4978. 			container.append(header);
  4979.  
  4980. 			for (const anilistColor of ColorFunctions.defaultColors) {
  4981. 				container.append(this.#createColorButton(anilistColor, settingsUi));
  4982. 			}
  4983.  
  4984. 			if (this.#donatorTier >= 2) {
  4985. 				const isDefaultColor = ColorFunctions.defaultColors.some(
  4986. 					(color) => color === this.#layout.color
  4987. 				);
  4988.  
  4989. 				const colorInput = ColorPicker(
  4990. 					isDefaultColor ? "" : this.#layout.color,
  4991. 					(event) => {
  4992. 						this.#updateOption("color", event.target.value, settingsUi);
  4993. 					}
  4994. 				);
  4995. 				if (!isDefaultColor && this.#layout.color !== "") {
  4996. 					colorInput.classList.add("active");
  4997. 				}
  4998. 				container.append(colorInput);
  4999. 			}
  5000.  
  5001. 			if (
  5002. 				this.#settings.auth?.token &&
  5003. 				this.#layout.color.toLocaleLowerCase() !==
  5004. 					this.#anilistSettings?.options?.profileColor?.toLocaleLowerCase() &&
  5005. 				this.#layout.color !== ""
  5006. 			) {
  5007. 				const publishButton = Button("Publish Color", (event) => {
  5008. 					this.#publishColor(event, settingsUi);
  5009. 				});
  5010. 				container.append(DOM.create("div", null, publishButton));
  5011. 			}
  5012.  
  5013. 			return container;
  5014. 		}
  5015.  
  5016. 		#createAboutSection(settingsUi) {
  5017. 			const container = DOM.create("div");
  5018. 			const aboutHeader = DOM.create("h5", "layout-header", "About");
  5019. 			const aboutInput = TextArea(this.#layout.bio, (event) => {
  5020. 				this.#updateOption("bio", event.target.value, settingsUi);
  5021. 			});
  5022. 			const note = Note(
  5023. 				"Please note that VoidVerified does not have access to AniList's markdown parser. AniList specific features might not be available while previewing. Recommended to be used for smaller changes like previewing a different image for a layout."
  5024. 			);
  5025.  
  5026. 			container.append(aboutHeader, aboutInput, note);
  5027. 			return container;
  5028. 		}
  5029.  
  5030. 		async #publishAbout(event, settingsUi) {
  5031. 			const button = event.target;
  5032. 			button.innerText = "Publishing...";
  5033.  
  5034. 			try {
  5035. 				const anilistAPI = new AnilistAPI(this.#settings);
  5036. 				let currentAbout = await anilistAPI.getUserAbout(
  5037. 					this.#settings.anilistUser
  5038. 				);
  5039. 				if (!currentAbout) {
  5040. 					currentAbout = "";
  5041. 				}
  5042. 				const about = this.#transformAbout(currentAbout, this.#layout.bio);
  5043.  
  5044. 				await anilistAPI.saveUserAbout(about);
  5045. 				Toaster.success("About published.");
  5046. 				settingsUi.renderSettingsUiContent();
  5047. 			} catch (error) {
  5048. 				console.error(error);
  5049. 				Toaster.error("Failed to publish about.");
  5050. 			}
  5051. 		}
  5052.  
  5053. 		#transformAbout(currentAbout, newAbout) {
  5054. 			const json = currentAbout.match(/^\[\]\(json([A-Za-z0-9+/=]+)\)/)?.[1];
  5055.  
  5056. 			if (!json) {
  5057. 				return newAbout;
  5058. 			}
  5059.  
  5060. 			const about = `[](json${json})` + newAbout;
  5061. 			return about;
  5062. 		}
  5063.  
  5064. 		async #publishColor(event, settingsUi) {
  5065. 			const button = event.target;
  5066. 			const color = this.#layout.color;
  5067. 			button.innerText = "Publishing...";
  5068.  
  5069. 			try {
  5070. 				const anilistAPI = new AnilistAPI(this.#settings);
  5071. 				const result = await anilistAPI.saveUserColor(color);
  5072. 				const profileColor = result.UpdateUser?.options?.profileColor;
  5073. 				this.#anilistSettings.options.profileColor = profileColor;
  5074. 				Toaster.success("Color published.");
  5075. 			} catch (error) {
  5076. 				Toaster.error("Failed to publish color.");
  5077. 				console.error("Failed to publish color.", error);
  5078. 			} finally {
  5079. 				settingsUi.renderSettingsUiContent();
  5080. 			}
  5081. 		}
  5082.  
  5083. 		async #publishDonatorText(event, settingsUi) {
  5084. 			const button = event.target;
  5085. 			const donatorText = this.#layout.donatorBadge;
  5086. 			button.innerText = "Publishing...";
  5087.  
  5088. 			try {
  5089. 				const anilistAPI = new AnilistAPI(this.#settings);
  5090. 				const result = await anilistAPI.saveDonatorBadge(donatorText);
  5091. 				const donatorBadge = result.UpdateUser?.donatorBadge;
  5092. 				this.#anilistSettings.donatorBadge = donatorBadge;
  5093. 				Toaster.success("Donator badge published.");
  5094. 			} catch (error) {
  5095. 				Toaster.error("Failed to publish donator badge.");
  5096. 				console.error("Failed to publish donator badge.", error);
  5097. 			} finally {
  5098. 				settingsUi.renderSettingsUiContent();
  5099. 			}
  5100. 		}
  5101.  
  5102. 		async #getUserAbout(settingsUi) {
  5103. 			if (
  5104. 				this.#layout.bio !== "" &&
  5105. 				!window.confirm(
  5106. 					"Are you sure you want to reset about? Any changes will be lost."
  5107. 				)
  5108. 			) {
  5109. 				return;
  5110. 			}
  5111.  
  5112. 			try {
  5113. 				Toaster.debug("Querying user about.");
  5114. 				const anilistAPI = new AnilistAPI(this.#settings);
  5115. 				const about = await anilistAPI.getUserAbout(
  5116. 					this.#settings.anilistUser
  5117. 				);
  5118. 				const clearedAbout = this.#removeJson(about);
  5119.  
  5120. 				this.#updateOption("bio", clearedAbout, settingsUi);
  5121. 				Toaster.success("About reset.");
  5122. 			} catch (error) {
  5123. 				Toaster.error("Failed to query current about from AniList API.");
  5124. 			}
  5125. 		}
  5126.  
  5127. 		#removeJson(about) {
  5128. 			return about.replace(/^\[\]\(json([A-Za-z0-9+/=]+)\)/, "");
  5129. 		}
  5130.  
  5131. 		#createColorButton(anilistColor, settingsUi) {
  5132. 			const button = DOM.create("div", "color-button");
  5133. 			button.style.backgroundColor = `rgb(${ColorFunctions.handleAnilistColor(
  5134. 			anilistColor
  5135. 		)})`;
  5136.  
  5137. 			button.addEventListener("click", () => {
  5138. 				this.#updateOption("color", anilistColor, settingsUi);
  5139. 			});
  5140.  
  5141. 			if (this.#layout.color === anilistColor) {
  5142. 				button.classList.add("active");
  5143. 			}
  5144.  
  5145. 			return button;
  5146. 		}
  5147.  
  5148. 		#updateOption(field, value, settingsUi) {
  5149. 			this.#layout[field] = value;
  5150. 			this.#updateLayout(this.#layout);
  5151. 			settingsUi.renderSettingsUiContent();
  5152. 		}
  5153.  
  5154. 		#togglePreview(settingsUi) {
  5155. 			this.#layouts.preview = !this.#layouts.preview;
  5156. 			if (!this.#layouts.preview) {
  5157. 				this.#layouts.disableCss = false;
  5158. 			}
  5159. 			this.#broadcastChannel.postMessage({
  5160. 				type: "preview",
  5161. 				preview: this.#layouts.preview,
  5162. 			});
  5163. 			this.#saveToLocalStorage();
  5164. 			settingsUi.renderSettingsUiContent();
  5165. 		}
  5166.  
  5167. 		#toggleCss() {
  5168. 			this.#layouts.disableCss = !this.#layouts.disableCss;
  5169. 			this.#broadcastChannel.postMessage({
  5170. 				type: "css",
  5171. 				disableCss: this.#layouts.disableCss,
  5172. 			});
  5173. 			this.#saveToLocalStorage();
  5174. 		}
  5175.  
  5176. 		#getSelectedLayout() {
  5177. 			return this.#layouts.layoutsList[this.#layouts.selectedLayout];
  5178. 		}
  5179.  
  5180. 		#updateLayout(layout) {
  5181. 			this.#layouts.layoutsList[this.#layouts.selectedLayout] = layout;
  5182. 			this.#saveToLocalStorage();
  5183. 			this.#broadcastLayoutChange();
  5184. 		}
  5185.  
  5186. 		#broadcastLayoutChange() {
  5187. 			this.#broadcastChannel.postMessage({
  5188. 				type: "layout",
  5189. 				layout: this.#layout,
  5190. 			});
  5191. 		}
  5192.  
  5193. 		#saveToLocalStorage() {
  5194. 			localStorage.setItem(
  5195. 				this.#layoutsInLocalStorage,
  5196. 				JSON.stringify(this.#layouts)
  5197. 			);
  5198. 		}
  5199. 	}
  5200.  
  5201. 	const ImageFormats = [
  5202. 		"jpg",
  5203. 		"png",
  5204. 		"gif",
  5205. 		"webp",
  5206. 		"apng",
  5207. 		"avif",
  5208. 		"jpeg",
  5209. 		"svg",
  5210. 	];
  5211.  
  5212. 	const keyboardTabs = {
  5213. 		gifs: "GIFS",
  5214. 		images: "Images",
  5215. 	};
  5216.  
  5217. 	class GifKeyboardConfig {
  5218. 		gifs;
  5219. 		gifSize;
  5220. 		images;
  5221. 		#configInLocalStorage = "void-verified-gif-keyboard";
  5222. 		constructor() {
  5223. 			const config = JSON.parse(
  5224. 				localStorage.getItem(this.#configInLocalStorage)
  5225. 			);
  5226. 			this.gifs = config?.gifs ?? [];
  5227. 			this.images = config?.images ?? [];
  5228. 			this.gifSize = config?.gifSize ?? 260;
  5229. 		}
  5230.  
  5231. 		save() {
  5232. 			localStorage.setItem(
  5233. 				"void-verified-gif-keyboard",
  5234. 				JSON.stringify(this)
  5235. 			);
  5236. 		}
  5237. 	}
  5238.  
  5239. 	class GifKeyboardHandler {
  5240. 		#settings;
  5241. 		#activeTab = keyboardTabs.gifs;
  5242. 		#paginationPage = 0;
  5243. 		#pageSize = 30;
  5244. 		config;
  5245. 		constructor(settings) {
  5246. 			this.#settings = settings;
  5247. 			this.config = new GifKeyboardConfig();
  5248. 		}
  5249.  
  5250. 		handleGifKeyboard() {
  5251. 			this.#addGifKeyboards();
  5252. 			this.#addMediaLikeButtons();
  5253. 		}
  5254.  
  5255. 		#addMediaLikeButtons() {
  5256. 			if (!this.#settings.options.gifKeyboardEnabled.getValue()) {
  5257. 				return;
  5258. 			}
  5259.  
  5260. 			if (!this.#settings.options.gifKeyboardLikeButtonsEnabled.getValue()) {
  5261. 				return;
  5262. 			}
  5263.  
  5264. 			const gifs = document.querySelectorAll(
  5265. 				":is(.activity-markdown, .reply-markdown) .markdown img[src$='.gif']"
  5266. 			);
  5267. 			for (const gif of gifs) {
  5268. 				this.#addMediaLikeButton(gif, keyboardTabs.gifs, this.config.gifs);
  5269. 			}
  5270.  
  5271. 			const images = ImageFormats.map((format) => {
  5272. 				return [
  5273. 					...document.querySelectorAll(
  5274. 						`:is(.activity-markdown, .reply-markdown) .markdown img[src$='.${format}']`
  5275. 					),
  5276. 				];
  5277. 			}).flat(1);
  5278. 			for (const image of images) {
  5279. 				this.#addMediaLikeButton(
  5280. 					image,
  5281. 					keyboardTabs.images,
  5282. 					this.config.images
  5283. 				);
  5284. 			}
  5285. 		}
  5286.  
  5287. 		#addMediaLikeButton(media, mediaType, mediaList) {
  5288. 			if (media.parentElement.classList.contains("void-gif-like-container")) {
  5289. 				return;
  5290. 			}
  5291.  
  5292. 			const img = media.cloneNode();
  5293. 			img.removeAttribute("width");
  5294.  
  5295. 			const gifContainer = GifContainer(
  5296. 				img,
  5297. 				() => {
  5298. 					this.#addOrRemoveMedia(media.src, mediaType);
  5299. 					this.config.save();
  5300. 					this.#refreshKeyboards();
  5301. 				},
  5302. 				mediaList
  5303. 			);
  5304.  
  5305. 			const width = media.getAttribute("width");
  5306. 			if (width) {
  5307. 				gifContainer.style.maxWidth = width?.endsWith("%")
  5308. 					? width
  5309. 					: `${width}px`;
  5310. 			} else {
  5311. 				gifContainer.style.maxWidth = `${img.width}px`;
  5312. 			}
  5313.  
  5314. 			media.replaceWith(gifContainer);
  5315. 		}
  5316.  
  5317. 		#addGifKeyboards() {
  5318. 			if (!this.#settings.options.gifKeyboardEnabled.getValue()) {
  5319. 				return;
  5320. 			}
  5321.  
  5322. 			const markdownEditors = document.querySelectorAll(".markdown-editor");
  5323. 			for (const markdownEditor of markdownEditors) {
  5324. 				if (markdownEditor.querySelector(".void-gif-button")) {
  5325. 					continue;
  5326. 				}
  5327.  
  5328. 				const gifKeyboard = GifKeyboard(this.#createKeyboardHeader());
  5329.  
  5330. 				gifKeyboard.classList.add("void-hidden");
  5331. 				this.#renderMediaList(gifKeyboard, markdownEditor);
  5332. 				this.#renderControls(gifKeyboard, markdownEditor);
  5333.  
  5334. 				markdownEditor.append(
  5335. 					IconButton(
  5336. 						GifIcon(),
  5337. 						() => {
  5338. 							this.#toggleKeyboardVisibility(
  5339. 								gifKeyboard,
  5340. 								markdownEditor
  5341. 							);
  5342. 						},
  5343. 						"gif-button"
  5344. 					)
  5345. 				);
  5346.  
  5347. 				markdownEditor.parentNode.insertBefore(
  5348. 					gifKeyboard,
  5349. 					markdownEditor.nextSibling
  5350. 				);
  5351. 			}
  5352. 		}
  5353.  
  5354. 		#refreshKeyboards() {
  5355. 			const keyboards = DOM.getAll("gif-keyboard-container");
  5356. 			for (const keyboard of keyboards) {
  5357. 				this.#refreshKeyboard(keyboard);
  5358. 			}
  5359. 		}
  5360.  
  5361. 		#refreshKeyboard(keyboard) {
  5362. 			const markdownEditor =
  5363. 				keyboard.parentElement.querySelector(".markdown-editor");
  5364. 			this.#renderControls(keyboard, markdownEditor);
  5365. 			this.#renderMediaList(keyboard, markdownEditor);
  5366. 		}
  5367.  
  5368. 		#createKeyboardHeader = () => {
  5369. 			const header = DOM.create("div", "gif-keyboard-header");
  5370.  
  5371. 			const options = Object.values(keyboardTabs).map((option) =>
  5372. 				Option$1(option, option === this.#activeTab, (event) => {
  5373. 					this.#activeTab = option;
  5374. 					const keyboard =
  5375. 						event.target.parentElement.parentElement.parentElement; // oh god
  5376. 					this.#refreshKeyboard(keyboard);
  5377. 					event.target.parentElement.parentElement.replaceWith(
  5378. 						this.#createKeyboardHeader()
  5379. 					);
  5380. 				})
  5381. 			);
  5382. 			header.append(Select(options));
  5383.  
  5384. 			header.append(
  5385. 				RangeField(
  5386. 					this.config.gifSize,
  5387. 					(event) => {
  5388. 						this.config.gifSize = event.target.value;
  5389. 						this.config.save();
  5390. 					},
  5391. 					600,
  5392. 					10,
  5393. 					10
  5394. 				)
  5395. 			);
  5396. 			return header;
  5397. 		};
  5398.  
  5399. 		#addOrRemoveMedia(url, mediaType) {
  5400. 			let mediaList =
  5401. 				mediaType === keyboardTabs.gifs
  5402. 					? this.config.gifs
  5403. 					: this.config.images;
  5404. 			if (mediaList.includes(url)) {
  5405. 				mediaList = mediaList.filter((media) => media !== url);
  5406. 			} else {
  5407. 				mediaList.push(url);
  5408. 			}
  5409. 			switch (mediaType) {
  5410. 				case keyboardTabs.gifs:
  5411. 					this.config.gifs = mediaList;
  5412. 					break;
  5413. 				case keyboardTabs.images:
  5414. 					this.config.images = mediaList;
  5415. 					break;
  5416. 			}
  5417. 		}
  5418.  
  5419. 		#toggleKeyboardVisibility(keyboard) {
  5420. 			if (keyboard.classList.contains("void-hidden")) {
  5421. 				this.#refreshKeyboard(keyboard);
  5422. 				keyboard.classList.remove("void-hidden");
  5423. 			} else {
  5424. 				keyboard.classList.add("void-hidden");
  5425. 			}
  5426. 		}
  5427.  
  5428. 		#renderMediaList(keyboard, markdownEditor) {
  5429. 			if (!keyboard || !markdownEditor) {
  5430. 				return;
  5431. 			}
  5432. 			const mediaItems = keyboard.querySelector(".void-gif-keyboard-list");
  5433. 			const columns = [1, 2, 3].map(() => {
  5434. 				return DOM.create("div", "gif-keyboard-list-column");
  5435. 			});
  5436. 			mediaItems.replaceChildren(...columns);
  5437. 			const textarea = markdownEditor.parentElement.querySelector("textarea");
  5438. 			const mediaList =
  5439. 				this.#activeTab === keyboardTabs.gifs
  5440. 					? this.config.gifs
  5441. 					: this.config.images;
  5442. 			if (mediaList.length === 0) {
  5443. 				mediaItems.replaceChildren(
  5444. 					DOM.create(
  5445. 						"div",
  5446. 						"gif-keyboard-list-placeholder",
  5447. 						this.#activeTab === keyboardTabs.gifs
  5448. 							? "It's pronounced GIF."
  5449. 							: "You have no funny memes :c"
  5450. 					)
  5451. 				);
  5452. 			}
  5453. 			for (const [index, media] of mediaList
  5454. 				.slice(
  5455. 					this.#paginationPage * this.#pageSize,
  5456. 					this.#paginationPage * this.#pageSize + this.#pageSize
  5457. 				)
  5458. 				.entries()) {
  5459. 				mediaItems.children.item(index % 3).append(
  5460. 					GifItem(
  5461. 						media,
  5462. 						() => {
  5463. 							textarea.setRangeText(
  5464. 								`img${this.config.gifSize}(${media})`
  5465. 							);
  5466. 						},
  5467. 						() => {
  5468. 							this.#addOrRemoveMedia(media, this.#activeTab);
  5469. 							this.config.save();
  5470. 						},
  5471. 						mediaList
  5472. 					)
  5473. 				);
  5474. 			}
  5475. 		}
  5476.  
  5477. 		#renderControls(keyboard, markdownEditor) {
  5478. 			const container = keyboard.querySelector(
  5479. 				".void-gif-keyboard-control-container"
  5480. 			);
  5481. 			const mediaField = this.#createMediaAddField(keyboard, markdownEditor);
  5482. 			const pagination = this.#createPagination(keyboard, markdownEditor);
  5483. 			container.replaceChildren(mediaField, pagination);
  5484. 		}
  5485.  
  5486. 		#createMediaAddField(keyboard, markdownEditor) {
  5487. 			const actionfield = ActionInputField(
  5488. 				"",
  5489. 				(_, inputField) => {
  5490. 					this.#handleAddMediaField(inputField, keyboard, markdownEditor);
  5491. 				},
  5492. 				AddIcon()
  5493. 			);
  5494. 			actionfield
  5495. 				.querySelector("input")
  5496. 				.setAttribute("placeholder", "Add media...");
  5497.  
  5498. 			return actionfield;
  5499. 		}
  5500.  
  5501. 		#handleAddMediaField(inputField, keyboard, markdownEditor) {
  5502. 			const url = inputField.value;
  5503. 			inputField.value = "";
  5504.  
  5505. 			let format;
  5506. 			if (url.toLowerCase().endsWith(".gif")) {
  5507. 				format = keyboardTabs.gifs;
  5508. 			} else if (
  5509. 				ImageFormats.some((imgFormat) =>
  5510. 					url.toLowerCase().endsWith(imgFormat.toLocaleLowerCase())
  5511. 				)
  5512. 			) {
  5513. 				format = keyboardTabs.images;
  5514. 			}
  5515. 			if (!format) {
  5516. 				Toaster.error("Url was not recognized as image or GIF.");
  5517. 				return;
  5518. 			}
  5519.  
  5520. 			Toaster.success(`Added media to ${format}`);
  5521. 			this.#addOrRemoveMedia(url, format);
  5522. 			this.config.save();
  5523. 			this.#refreshKeyboard(keyboard);
  5524. 		}
  5525.  
  5526. 		#createPagination(keyboard, markdownEditor) {
  5527. 			const container = DOM.create(
  5528. 				"div",
  5529. 				"gif-keyboard-pagination-container"
  5530. 			);
  5531. 			const mediaList =
  5532. 				this.#activeTab === keyboardTabs.gifs
  5533. 					? this.config.gifs
  5534. 					: this.config.images;
  5535. 			const maxPages = Math.ceil(mediaList.length / this.#pageSize) - 1;
  5536.  
  5537. 			if (this.#paginationPage > maxPages) {
  5538. 				this.#paginationPage = maxPages;
  5539. 			}
  5540.  
  5541. 			container.append(
  5542. 				Pagination(this.#paginationPage, maxPages, (page) => {
  5543. 					this.#paginationPage = page;
  5544. 					this.#refreshKeyboards(keyboard, markdownEditor);
  5545. 				})
  5546. 			);
  5547. 			return container;
  5548. 		}
  5549. 	}
  5550.  
  5551. 	class IntervalScriptHandler {
  5552. 		styleHandler;
  5553. 		settingsUi;
  5554. 		activityHandler;
  5555. 		settings;
  5556. 		globalCSS;
  5557. 		quickAccess;
  5558. 		userCSS;
  5559. 		layoutDesigner;
  5560. 		gifKeyboard;
  5561. 		constructor(settings) {
  5562. 			this.settings = settings;
  5563.  
  5564. 			this.styleHandler = new StyleHandler(settings);
  5565. 			this.globalCSS = new GlobalCSS(settings);
  5566. 			this.userCSS = new UserCSS(settings);
  5567. 			this.layoutDesigner = new LayoutDesigner(settings);
  5568. 			this.gifKeyboard = new GifKeyboardHandler(settings);
  5569.  
  5570. 			this.settingsUi = new SettingsUserInterface(
  5571. 				settings,
  5572. 				this.styleHandler,
  5573. 				this.globalCSS,
  5574. 				this.userCSS,
  5575. 				this.layoutDesigner
  5576. 			);
  5577. 			this.activityHandler = new ActivityHandler(settings);
  5578. 			this.quickAccess = new QuickAccess(settings);
  5579. 		}
  5580.  
  5581. 		currentPath = "";
  5582. 		evaluationIntervalInSeconds = 1;
  5583. 		hasPathChanged(path) {
  5584. 			if (path === this.currentPath) {
  5585. 				return false;
  5586. 			}
  5587. 			this.currentPath = path;
  5588. 			return true;
  5589. 		}
  5590.  
  5591. 		handleIntervalScripts(intervalScriptHandler) {
  5592. 			const path = window.location.pathname;
  5593.  
  5594. 			intervalScriptHandler.activityHandler.moveAndDisplaySubscribeButton();
  5595. 			intervalScriptHandler.activityHandler.addSelfMessageButton();
  5596. 			intervalScriptHandler.activityHandler.removeBlankFromAnilistLinks();
  5597. 			intervalScriptHandler.gifKeyboard.handleGifKeyboard();
  5598. 			intervalScriptHandler.globalCSS.clearCssForProfile();
  5599. 			intervalScriptHandler.layoutDesigner.renderLayoutPreview();
  5600.  
  5601. 			if (path === "/home") {
  5602. 				intervalScriptHandler.styleHandler.refreshHomePage();
  5603. 				intervalScriptHandler.quickAccess.renderQuickAccess();
  5604. 			}
  5605.  
  5606. 			if (!path.startsWith("/settings/developer")) {
  5607. 				intervalScriptHandler.settingsUi.removeSettingsUi();
  5608. 			}
  5609.  
  5610. 			if (!intervalScriptHandler.hasPathChanged(path)) {
  5611. 				return;
  5612. 			}
  5613.  
  5614. 			if (path.startsWith("/user/")) {
  5615. 				intervalScriptHandler.userCSS.checkUserCss();
  5616. 				intervalScriptHandler.quickAccess.clearBadge();
  5617. 				intervalScriptHandler.styleHandler.verifyProfile();
  5618. 			} else {
  5619. 				intervalScriptHandler.styleHandler.clearStyles("profile");
  5620. 			}
  5621.  
  5622. 			if (path.startsWith("/activity/")) {
  5623. 				intervalScriptHandler.userCSS.checkActivityCss();
  5624. 			}
  5625.  
  5626. 			if (!path.startsWith("/activity/") && !path.startsWith("/user/")) {
  5627. 				intervalScriptHandler.userCSS.resetCurrentActivity();
  5628. 				intervalScriptHandler.userCSS.resetCurrentUser();
  5629. 				intervalScriptHandler.styleHandler.clearStyles("user-css");
  5630. 			}
  5631.  
  5632. 			intervalScriptHandler.globalCSS.createCss();
  5633.  
  5634. 			if (path.startsWith("/settings/developer")) {
  5635. 				intervalScriptHandler.settingsUi.renderSettingsUi();
  5636. 			}
  5637. 		}
  5638.  
  5639. 		enableScriptIntervalHandling() {
  5640. 			const interval = setInterval(() => {
  5641. 				try {
  5642. 					this.handleIntervalScripts(this);
  5643. 				} catch (error) {
  5644. 					Toaster.critical([
  5645. 						"A critical error has occured running interval script loop. VoidVerified is not working correctly. Please check developer console and contact ",
  5646. 						Link(
  5647. 							"voidnyan",
  5648. 							"https://anilist.co/user/voidnyan/",
  5649. 							"_blank"
  5650. 						),
  5651. 						".",
  5652. 					]);
  5653. 					clearInterval(interval);
  5654. 					console.error(error);
  5655. 				}
  5656. 			}, this.evaluationIntervalInSeconds * 1000);
  5657. 		}
  5658. 	}
  5659.  
  5660. 	class PasteHandler {
  5661. 		settings;
  5662. 		#uploadInProgress = false;
  5663. 		constructor(settings) {
  5664. 			this.settings = settings;
  5665. 		}
  5666.  
  5667. 		setup() {
  5668. 			window.addEventListener("paste", (event) => {
  5669. 				this.#handlePaste(event);
  5670. 			});
  5671. 		}
  5672.  
  5673. 		async #handlePaste(event) {
  5674. 			if (
  5675. 				event.target.tagName !== "TEXTAREA" &&
  5676. 				event.target.tagName !== "INPUT"
  5677. 			) {
  5678. 				return;
  5679. 			}
  5680.  
  5681. 			const clipboard = event.clipboardData.getData("text/plain").trim();
  5682. 			let result = [];
  5683.  
  5684. 			const file = event.clipboardData.items[0]?.getAsFile();
  5685. 			if (file && this.settings.options.pasteImagesToHostService.getValue()) {
  5686. 				event.preventDefault();
  5687. 				result = await this.#handleImages(event);
  5688. 			} else if (this.settings.options.pasteEnabled.getValue()) {
  5689. 				event.preventDefault();
  5690. 				const rows = clipboard.split("\n");
  5691.  
  5692. 				for (let row of rows) {
  5693. 					result.push(this.#handleRow(row, event));
  5694. 				}
  5695. 			} else {
  5696. 				return;
  5697. 			}
  5698.  
  5699. 			const transformedClipboard = result.join("\n\n");
  5700. 			window.document.execCommand("insertText", false, transformedClipboard);
  5701. 		}
  5702.  
  5703. 		async #handleImages(event) {
  5704. 			const _files = event.clipboardData.items;
  5705. 			if (this.#uploadInProgress) {
  5706. 				return;
  5707. 			}
  5708. 			this.#uploadInProgress = true;
  5709. 			document.body.classList.add("void-upload-in-progress");
  5710.  
  5711. 			const imageApi = new ImageApiFactory().getImageHostInstance();
  5712.  
  5713. 			const files = Object.values(_files).map((file) => file.getAsFile());
  5714. 			const images = files.filter((file) => file.type.startsWith("image/"));
  5715.  
  5716. 			try {
  5717. 				const results = await Promise.all(
  5718. 					images.map((image) => imageApi.uploadImage(image))
  5719. 				);
  5720. 				return results
  5721. 					.filter((url) => url !== null)
  5722. 					.map((url) => this.#handleRow(url, event));
  5723. 			} catch (error) {
  5724. 				console.error(error);
  5725. 				return [];
  5726. 			} finally {
  5727. 				this.#uploadInProgress = false;
  5728. 				document.body.classList.remove("void-upload-in-progress");
  5729. 			}
  5730. 		}
  5731.  
  5732. 		#handleRow(row, event) {
  5733. 			if (
  5734. 				event.target.parentElement.classList.contains("void-css-editor") ||
  5735. 				event.target.tagName === "INPUT"
  5736. 			) {
  5737. 				return row;
  5738. 			}
  5739.  
  5740. 			row = row.trim();
  5741. 			if (ImageFormats.some((format) => row.toLowerCase().endsWith(format))) {
  5742. 				return this.#handleImg(row);
  5743. 			} else if (row.toLowerCase().startsWith("http")) {
  5744. 				return `[](${row})`;
  5745. 			} else {
  5746. 				return row;
  5747. 			}
  5748. 		}
  5749.  
  5750. 		#handleImg(row) {
  5751. 			const img = `img${this.settings.options.pasteImageWidth.getValue()}(${row})`;
  5752. 			let result = img;
  5753. 			if (this.settings.options.pasteWrapImagesWithLink.getValue()) {
  5754. 				result = `[ ${img} ](${row})`;
  5755. 			}
  5756. 			return result;
  5757. 		}
  5758. 	}
  5759.  
  5760. 	const styles = /* css */ `
  5761.     :root {
  5762.         --void-info: 46, 149, 179;
  5763.         --void-error: 188, 53, 46;
  5764.         --void-success: 80, 162, 80;
  5765.         --void-warning: 232, 180, 2;
  5766.     }
  5767.  
  5768.  
  5769.     a[href="/settings/developer" i]::after{content: " & Void"}
  5770.     .void-settings .void-nav ol {
  5771.         display: flex;
  5772.         margin: 8px 0px;
  5773.         padding: 0;
  5774.     }
  5775.  
  5776.     .void-nav {
  5777.         margin-top: 3rem;
  5778.     }
  5779.  
  5780.     .void-settings .void-nav li {
  5781.         list-style: none;
  5782.         display: block;
  5783.         color: rgb(var(--color-text));
  5784.         padding: 4px 8px;
  5785.         text-transform: capitalize;
  5786.         background: rgb(var(--color-foreground-blue));
  5787.         cursor: pointer;
  5788.         min-width: 50px;
  5789.         text-align: center;
  5790.         font-size: 1.4rem;
  5791.     }
  5792.  
  5793.     .void-settings .void-nav li.void-active,
  5794.     .void-settings .void-nav li:hover {
  5795.         background: rgb(var(--color-blue));
  5796.         color: rgb(var(--color-text-bright));
  5797.     }
  5798.  
  5799.     .void-settings .void-nav li:first-child {
  5800.         border-radius: 4px 0px 0px 4px;
  5801.     }
  5802.  
  5803.     .void-settings .void-nav li:last-child {
  5804.         border-radius: 0px 4px 4px 0px;
  5805.     }
  5806.  
  5807.     .void-settings .void-settings-header {
  5808.         margin-top: 30px;
  5809.     }
  5810.  
  5811.     .void-settings .void-table table {
  5812.         border-collapse: collapse;
  5813.     }
  5814.  
  5815.     .void-settings .void-table :is(th, td) {
  5816.         padding: 2px 6px !important;
  5817.     }
  5818.  
  5819.     .void-settings .void-table :is(th, td):first-child {
  5820.         border-radius: 4px 0px 0px 4px;
  5821.     }
  5822.  
  5823.     .void-settings .void-table :is(th, td):last-child {
  5824.         border-radius: 0px 4px 4px 0px;
  5825.     }
  5826.  
  5827.     .void-settings .void-table tbody tr:hover {
  5828.         background-color: rgba(var(--color-foreground-blue), .7);
  5829.     }
  5830.  
  5831.     .void-settings .void-table input[type="color"] {
  5832.         border: 0;
  5833.         height: 24px;
  5834.         width: 40px;
  5835.         padding: 0;
  5836.         background-color: unset;
  5837.         cursor: pointer;
  5838.     }
  5839.  
  5840.     .void-settings .void-table button {
  5841.         background: unset;
  5842.         border: none;
  5843.         cursor: pointer;
  5844.         padding: 0;
  5845.     }
  5846.  
  5847.     .void-settings .void-table form {
  5848.         padding: 8px;
  5849.         display: flex;
  5850.         align-items: center;
  5851.         gap: 8px;
  5852.     }
  5853.  
  5854.     .void-settings .void-settings-header span {
  5855.         color: rgb(var(--color-blue));
  5856.     }
  5857.  
  5858.     .void-settings .void-settings-list {
  5859.         display: flex;
  5860.         flex-direction: column;
  5861.         gap: 5px;
  5862.     }
  5863.  
  5864.     .void-setting-label {
  5865.         margin-left: 6px;
  5866.         vertical-align: middle;
  5867.         cursor: pointer;
  5868.     }
  5869.  
  5870.     .void-setting-label-container .void-checkbox {
  5871.         vertical-align: middle;
  5872.     }
  5873.  
  5874.     .void-checkbox {
  5875.         cursor: pointer;
  5876.     }
  5877.  
  5878.  
  5879.     .void-settings .void-settings-list input.void-input {
  5880.         width: 50px;
  5881.         text-align: center;
  5882.         height: 20px;
  5883.         font-size: 12px;
  5884.     }
  5885.  
  5886.     .void-settings .void-settings-list label {
  5887.         margin-left: 8px;
  5888.     }
  5889.  
  5890.     .void-settings .void-css-editor label {
  5891.         margin-top: 20px;
  5892.         fontSize: 2rem;
  5893.         display: inline-block;
  5894.     }
  5895.  
  5896.     .void-textarea {
  5897.         width: 100%;
  5898.         height: 300px;
  5899.         min-height: 200px;
  5900.         resize: vertical;
  5901.         background: rgb(var(--color-foreground-blue));
  5902.         color: rgb(var(--color-text));
  5903.         padding: 4px;
  5904.         border-radius: 4px;
  5905.         border: 2px solid transparent;
  5906.         outline: none !important;
  5907.     }
  5908.  
  5909.     .void-textarea:focus {
  5910.         border: 2px solid rgb(var(--color-blue)) !important;
  5911.     }
  5912.  
  5913.     .void-layout-image-container {
  5914.         padding: 4px;
  5915.         display: inline-block;
  5916.     }
  5917.  
  5918.     .void-layout-image-container:first-child {
  5919.         width: 35%;
  5920.     }
  5921.  
  5922.     .void-layout-image-container:last-child {
  5923.         width: 65%;
  5924.     }
  5925.  
  5926.     .void-layout-header {
  5927.         text-transform: uppercase;
  5928.         margin-top: 2.2em;
  5929.         margin-bottom: .8em;
  5930.     }
  5931.  
  5932.     .void-layout-image-display {
  5933.         height: 140px;
  5934.         background-repeat: no-repeat;
  5935.         margin: auto;
  5936.         margin-bottom: 6px;
  5937.         border-radius: 4px;
  5938.     }
  5939.  
  5940.  
  5941.  
  5942.     .void-layout-image-display.void-banner {
  5943.         width: 100%;
  5944.         background-size: cover;
  5945.         background-position: 50% 50%;
  5946.         background-size:
  5947.     }
  5948.  
  5949.     .void-layout-image-display.void-avatar {
  5950.         background-size: contain;
  5951.         width: 140px;
  5952.     }
  5953.  
  5954.     .void-layout-image-container input {
  5955.         width: 100%;
  5956.     }
  5957.  
  5958.     .void-layout-color-selection {
  5959.         margin-top: 10px;
  5960.         margin-bottom: 10px;
  5961.     }
  5962.  
  5963.     .void-layout-color-selection .void-color-button {
  5964.         width: 50px;
  5965.         height: 50px;
  5966.         display: inline-flex;
  5967.         border-radius: 4px;
  5968.         margin-right: 10px;
  5969.     }
  5970.  
  5971.     .void-layout-color-selection .void-color-button.active {
  5972.         border: 4px solid rgb(var(--color-text));
  5973.     }
  5974.  
  5975.     .void-layout-color-selection .void-color-picker-container.active {
  5976.         border: 2px solid rgb(var(--color-text));
  5977.     }
  5978.  
  5979.     .void-color-picker-container {
  5980.         display: inline-block;
  5981.         vertical-align: top;
  5982.         width: 75px;
  5983.         height: 50px;
  5984.         border: 2px solid transparent;
  5985.         border-radius: 4px;
  5986.         box-sizing: border-box;
  5987.     }
  5988.  
  5989.     .void-color-picker-container:has(:focus) {
  5990.         border: 2px solid rgb(var(--color-text));
  5991.     }
  5992.  
  5993.     .void-color-picker-input {
  5994.         width: 100%;
  5995.         height: 20px;
  5996.         background-color: rgba(var(--color-background), .6);
  5997.         padding: 1px;
  5998.         font-size: 11px;
  5999.         color: rgb(var(--color-text));
  6000.         outline: none;
  6001.         appearance: none;
  6002.         -webkit-appearance: none;
  6003.         text-align: center;
  6004.         border: unset;
  6005.         border-radius: 0px 0px 4px 4px;
  6006.     }
  6007.  
  6008.     .void-color-picker {
  6009.         /* width: 100%;;
  6010.         height: 50px; */
  6011.         block-size: 30px;
  6012.         border-width: 0px;
  6013.         padding: 0px;
  6014.         background-color: unset;
  6015.         inline-size: 100%;
  6016.         border-radius: 4px;
  6017.         appearance: none;
  6018.         vertical-align: top;
  6019.         padding-block: 0px;
  6020.         padding-inline: 0px;
  6021.         outline: none;
  6022.     }
  6023.  
  6024.     .void-color-picker::-webkit-color-swatch,
  6025.     .void-color-picker::-moz-color-swatch {
  6026.         border: none;
  6027.         border-radius: 4px;
  6028.     }
  6029.  
  6030.     .void-color-picker::-webkit-color-swatch-wrapper,
  6031.     .void-color-picker::-webkit-color-swatch-wrapper {
  6032.         padding: 0px;
  6033.         border-radius: 4px;
  6034.     }
  6035.  
  6036.     .void-input {
  6037.         background-color: rgba(var(--color-background), .6);
  6038.         padding: 4px 6px;
  6039.         color: rgb(var(--color-text));
  6040.         outline: none;
  6041.         appearance: none;
  6042.         -webkit-appearance: none;
  6043.         border: 2px solid transparent;
  6044.         border-radius: 4px;
  6045.         box-sizing: border-box;
  6046.     }
  6047.  
  6048.     .void-action-container {
  6049.         display: inline-block;
  6050.         width: fit-content;
  6051.     }
  6052.  
  6053.     .void-action-container .void-icon-button {
  6054.         padding: 6px 8px;
  6055.         margin: 0px;
  6056.         background: rgb(var(--color-foreground-blue-dark));
  6057.         color: rgb(var(--color-text));
  6058.         border-radius: 0px 4px 4px 0px;
  6059.         height: 100%;
  6060.         display: inline-flex;
  6061.         flex-direction: column;
  6062.         justify-content: center;
  6063.         border: 2px solid transparent;
  6064.         border-left: 0px !important;
  6065.         line-height: 1.15;
  6066.         box-sizing: border-box;
  6067.         vertical-align: top;
  6068.     }
  6069.  
  6070.     .void-action-container .void-icon-button:hover {
  6071.         color: rgb(var(--color-blue));
  6072.     }
  6073.  
  6074.     .void-action-container .void-icon-button svg {
  6075.         height: 14px;
  6076.     }
  6077.  
  6078.     .void-action-container .void-input {
  6079.         border-radius: 4px 0px 0px 4px;
  6080.     }
  6081.  
  6082.     a.void-link {
  6083.         color: rgb(var(--color-blue)) !important;
  6084.     }
  6085.  
  6086.     .void-input.void-sign {
  6087.         width: 75px;
  6088.         text-align: center;
  6089.         height: 20px;
  6090.         font-size: 14px;
  6091.     }
  6092.  
  6093.     .void-input:focus {
  6094.         border: 2px solid rgb(var(--color-blue));
  6095.     }
  6096.  
  6097.     .void-button {
  6098.         align-items: center;
  6099.         background: rgb(var(--color-blue));
  6100.         border-radius: 4px;
  6101.         color: rgb(var(--color-text-bright));
  6102.         cursor: pointer;
  6103.         display: inline-flex;
  6104.         font-size: 1.3rem;
  6105.         padding: 10px 15px;
  6106.         outline: none;
  6107.         appearance: none;
  6108.         -webkit-appearance: none;
  6109.         border: 0px solid rgb(var(--color-background));
  6110.         vertical-align: top;
  6111.         margin-top: 15px;
  6112.         margin-right: 10px;
  6113.     }
  6114.  
  6115.     .void-icon-button {
  6116.         display: inline-block;
  6117.         cursor: pointer;
  6118.         margin-left: 4px;
  6119.         margin-right: 4px;
  6120.         vertical-align: middle;
  6121.     }
  6122.  
  6123.     .void-icon-button svg {
  6124.         height: 12px;
  6125.         vertical-align: middle;
  6126.         display: inline-block;
  6127.         pointer-events: none;
  6128.     }
  6129.  
  6130.     .void-range-container {
  6131.         display: inline-flex;
  6132.     }
  6133.  
  6134.     .void-range-display {
  6135.         margin-left: 5px;
  6136.         user-select: none;
  6137.         font-size: 14px;
  6138.         font-weight: bold;
  6139.         display: inline-flex;
  6140.         justify-content: center;
  6141.         align-items: center;
  6142.         min-width: 25px;
  6143.     }
  6144.  
  6145.     .void-gif-button svg {
  6146.         height: 18px;
  6147.         vertical-align: top;
  6148.         color: rgb(var(--color-red));
  6149.     }
  6150.  
  6151.     .void-gif-button:hover svg {
  6152.         color: rgb(var(--color-blue));
  6153.     }
  6154.  
  6155.     .void-gif-button {
  6156.         margin: 0px;
  6157.     }
  6158.  
  6159.     .markdown-editor[style*="display: none;"] + .void-gif-keyboard-container {
  6160.         display: none;
  6161.     }
  6162.  
  6163.     .void-gif-keyboard-container {
  6164.         width: 100%;
  6165.         background: rgb(var(--color-foreground));
  6166.         margin-bottom: 12px;
  6167.         border-radius: 4px;
  6168.     }
  6169.  
  6170.     .void-gif-keyboard-header {
  6171.         background: rgb(var(--color-foreground-grey-dark));
  6172.         padding: 12px 20px;
  6173.         border-radius: 4px 4px 0px 0px;
  6174.         display: flex;
  6175.         justify-content: space-between;
  6176.     }
  6177.  
  6178.     .void-gif-keyboard-control-container {
  6179.         display: flex;
  6180.         justify-content: space-between;
  6181.         padding: 12px 12px 0px 12px;
  6182.     }
  6183.  
  6184.     .void-gif-keyboard-list-container {
  6185.         height: 300px;
  6186.         min-height: 200px;
  6187.         max-height: 500px;
  6188.         overflow-y: scroll;
  6189.         resize: vertical;
  6190.         user-select: none;
  6191.     }
  6192.  
  6193.     .void-gif-keyboard-list {
  6194.         padding: 12px 20px;
  6195.         width: 100%;
  6196.         display: flex;
  6197.         justify-content: space-between;
  6198.         align-items: flex-start;
  6199.         gap: 8px;
  6200.     }
  6201.  
  6202.     .void-gif-keyboard-list-column {
  6203.         width: calc(100% / 3);
  6204.         display: flex;
  6205.         flex-direction: column;
  6206.         gap: 8px;
  6207.     }
  6208.  
  6209.     .void-gif-keyboard-list-placeholder {
  6210.         font-size: 20px;
  6211.         color: rgb(var(--color-text));
  6212.         display: flex;
  6213.         height: 220px;
  6214.         width: 100%;
  6215.         justify-content: center;
  6216.         align-items: center;
  6217.         user-select: none;
  6218.     }
  6219.  
  6220.     .void-gif-keyboard-item img {
  6221.         width: 100%;
  6222.         background-size: contain;
  6223.         background-repeat: no-repeat;
  6224.         border-radius: 4px;
  6225.         cursor: pointer;
  6226.         display: block;
  6227.  
  6228.     }
  6229.  
  6230.     .void-gif-like-container {
  6231.         position: relative;
  6232.         width: 100%;
  6233.         display: inline-block;
  6234.     }
  6235.  
  6236.     .void-gif-like-container img {
  6237.         width: 100%;
  6238.     }
  6239.  
  6240.     .void-gif-like-container .void-gif-like {
  6241.         position: absolute;
  6242.         top: 6px;
  6243.         right: 6px;
  6244.         height: 20px;
  6245.         opacity: 0;
  6246.         transition: 0.2s ease-in all;
  6247.         color: rgb(var(--color-text-bright));
  6248.     }
  6249.  
  6250.     .void-gif-like-container:hover .void-gif-like {
  6251.         opacity: 1;
  6252.     }
  6253.  
  6254.     .void-gif-like-container .void-gif-like svg {
  6255.         height: 24px;
  6256.     }
  6257.  
  6258.     .void-gif-like-container .void-gif-like.void-liked,
  6259.     .void-liked {
  6260.         color: rgb(var(--color-red));
  6261.     }
  6262.  
  6263.     .void-hidden {
  6264.         display: none;
  6265.     }
  6266.  
  6267.     .void-pagination-container .void-icon-button.void-active,
  6268.     .void-pagination-container .void-icon-button:hover {
  6269.         color: rgb(var(--color-blue));
  6270.     }
  6271.  
  6272.     .void-pagination-container .void-icon-button.void-pagination-skip {
  6273.         vertical-align: top;
  6274.     }
  6275.  
  6276.     .void-quick-access .void-quick-access-wrap {
  6277.         background: rgb(var(--color-foreground));
  6278.         display: grid;
  6279.         grid-template-columns: repeat(auto-fill, 60px);
  6280.         grid-template-rows: repeat(auto-fill, 80px);
  6281.         gap: 15px;
  6282.         padding: 15px;
  6283.         margin-bottom: 25px;
  6284.     }
  6285.  
  6286.     .void-quick-access .section-header {
  6287.         display: flex;
  6288.         justify-content: space-between;
  6289.     }
  6290.  
  6291.     .void-quick-access-timer {
  6292.         font-size: 12px;
  6293.         color: rgb(var(--color-text));
  6294.     }
  6295.  
  6296.     .void-quick-access-item {
  6297.         display: inline-block;
  6298.     }
  6299.  
  6300.     .void-quick-access-pfp {
  6301.         background-size: contain;
  6302.         background-repeat: no-repeat;
  6303.         height: 60px;
  6304.         width: 60px;
  6305.         border-radius: 4px;
  6306.     }
  6307.  
  6308.     .void-quick-access-username {
  6309.         display: inline-block;
  6310.         text-align: center;
  6311.         bottom: -20px;
  6312.         width: 100%;
  6313.         word-break: break-all;
  6314.         font-size: 1.2rem;
  6315.     }
  6316.  
  6317.     .void-quick-access-badge {
  6318.         position: relative;
  6319.     }
  6320.  
  6321.     .void-quick-access-badge::after {
  6322.         content: "New";
  6323.         background: rgb(var(--color-blue));
  6324.         border-radius: 10px;
  6325.         padding: 2px 4px;
  6326.         font-size: 9px;
  6327.         position: absolute;
  6328.         top: 2px;
  6329.         right: -10px;
  6330.         color: white;
  6331.     }
  6332.  
  6333.     .void-notice {
  6334.         font-size: 11px;
  6335.         margin-top: 5px;
  6336.     }
  6337.  
  6338.     .void-select {
  6339.         display: inline-flex;
  6340.         flex-wrap: wrap;
  6341.     }
  6342.  
  6343.     .void-select .void-option {
  6344.         padding: 3px 8px;
  6345.         background: rgb(var(--color-foreground-blue));
  6346.         font-size: 12px;
  6347.         cursor: pointer;
  6348.         user-select: none;
  6349.     }
  6350.  
  6351.     .void-select .void-option:hover {
  6352.         background: rgb(var(--color-foreground-blue-dark));
  6353.         color: rgb(var(--color-text));
  6354.     }
  6355.  
  6356.     .void-select .void-option:first-child {
  6357.         border-radius: 4px 0px 0px 4px;
  6358.     }
  6359.  
  6360.     .void-select .void-option:last-child {
  6361.         border-radius: 0px 4px 4px 0px;
  6362.     }
  6363.  
  6364.     .void-select .void-option.active {
  6365.         background: rgb(var(--color-blue));
  6366.         color: rgb(var(--color-text-bright));
  6367.     }
  6368.  
  6369.     .void-label-container {
  6370.         margin-top: 6px;
  6371.         margin-bottom: 6px;
  6372.     }
  6373.  
  6374.     .void-label-span {
  6375.         margin-right: 10px;
  6376.         min-width: 200px;
  6377.         display: inline-block;
  6378.     }
  6379.  
  6380.     .void-upload-in-progress {
  6381.         cursor: wait !important;
  6382.     }
  6383.  
  6384.     body:has(.void-modal-background[open]) {
  6385.         overflow: hidden;
  6386.     }
  6387.  
  6388.     .void-modal-background[open] {
  6389.         position: fixed;
  6390.         top: 0;
  6391.         left: 0;
  6392.         width: 100vw;
  6393.         height: 100vh;
  6394.         z-index: 9999;
  6395.         backdrop-filter: brightness(50%);
  6396.         background: transparent;
  6397.         display: flex;
  6398.         justify-content: center;
  6399.         align-items: center;
  6400.     }
  6401.  
  6402.     .void-modal {
  6403.         background: rgb(var(--color-foreground));
  6404.         color: rgb(var(--color-text));
  6405.         border-radius: 4px;
  6406.         min-width: 500px;
  6407.         padding: 0;
  6408.         margin: 0;
  6409.         border-width: 0px;
  6410.     }
  6411.  
  6412.     .void-modal-header {
  6413.         width: 100%;
  6414.         background: rgb(var(--color-background));
  6415.         padding: 12px;
  6416.         border-radius: 4px 4px 0px 0px;
  6417.         display: flex;
  6418.         justify-content: space-between;
  6419.         font-weight: 700;
  6420.     }
  6421.  
  6422.     .void-modal-header .void-icon-button {
  6423.         color: rgb(var(--color-red));
  6424.         height: 20px;
  6425.     }
  6426.  
  6427.     .void-modal-content {
  6428.         padding: 12px;
  6429.         max-height: 500px;
  6430.         overflow-y: scroll;
  6431.     }
  6432.  
  6433.     .void-change-log-header {
  6434.         margin: 4px 0px;
  6435.     }
  6436.  
  6437.     .void-change-log-note {
  6438.         margin-bottom: 16px;
  6439.     }
  6440.  
  6441.     .void-change-log-list {
  6442.         list-style: none;
  6443.         gap: 5px;
  6444.         padding-left: 20px;
  6445.     }
  6446.  
  6447.     .void-change-log-list li:not(:last-child) {
  6448.         margin-bottom: 4px;
  6449.     }
  6450.  
  6451.     .void-change-log-list-item span:first-child {
  6452.         text-align: center;
  6453.         width: 13px;
  6454.         display: inline-block;
  6455.     }
  6456.  
  6457.     .void-change-log-list-item span:last-child {
  6458.         margin-left: 6px;
  6459.     }
  6460.  
  6461.     .void-tooltip-container:has(input) {
  6462.         display: inline-block;
  6463.     }
  6464.  
  6465.     .void-tooltip-container {
  6466.         position: relative;
  6467.     }
  6468.  
  6469.     .void-tooltip {
  6470.         position: absolute;
  6471.         text-align: center;
  6472.         top: -8px;
  6473.         left: 50%;
  6474.         transform: translate(-50%, -100%);
  6475.         font-size: 12px;
  6476.         padding: 4px 6px;
  6477.         background: rgb(var(--color-foreground-blue));
  6478.         border-radius: 4px;
  6479.         width: max-content;
  6480.         max-width: 200px;
  6481.         visibility: hidden;
  6482.         z-index: 3000;
  6483.     }
  6484.  
  6485.     .void-tooltip-container:hover .void-tooltip {
  6486.         visibility: visible;
  6487.     }
  6488.  
  6489.     .void-tooltip-container:hover .void-tooltip:after {
  6490.         content: "";
  6491.         position: absolute;
  6492.         top: 100%;
  6493.         left: 50%;
  6494.         margin-left: -5px;
  6495.         border-width: 5px;
  6496.         border-style: solid;
  6497.         border-color: rgb(var(--color-foreground-blue)) transparent transparent transparent;
  6498.     }
  6499.  
  6500.     .void-button.void-self-message {
  6501.         margin-top: 0;
  6502.         margin-right: 0;
  6503.         margin-left: 18px;
  6504.         font-family: inherit;
  6505.         font-weight: 900;
  6506.     }
  6507.  
  6508.     #void-toast-container {
  6509.         position: fixed;
  6510.         display: flex;
  6511.         flex-direction: column;
  6512.         gap: 10px;
  6513.     }
  6514.  
  6515.     #void-toast-container.void-bottom-left {
  6516.         bottom: 10px;
  6517.         left: 10px;
  6518.         flex-direction: column-reverse;
  6519.     }
  6520.  
  6521.     #void-toast-container.void-bottom-right {
  6522.         bottom: 10px;
  6523.         right: 10px;
  6524.         flex-direction: column-reverse;
  6525.     }
  6526.  
  6527.     #void-toast-container.void-top-left {
  6528.         top: 70px;
  6529.         left: 10px;
  6530.     }
  6531.  
  6532.     #void-toast-container.void-top-right {
  6533.         top: 70px;
  6534.         right: 10px;
  6535.     }
  6536.  
  6537.     .void-toast {
  6538.         font-size: 14px;
  6539.         color: rgb(var(--color-text-bright));
  6540.         min-width: 150px;
  6541.         max-width: 300px;
  6542.         min-heigth: 50px;
  6543.         padding: 10px 8px;
  6544.         border-radius: 4px;
  6545.     }
  6546.  
  6547.     .void-info {
  6548.         background: rgb(var(--void-info));
  6549.     }
  6550.  
  6551.     .void-success {
  6552.         background: rgb(var(--void-success));
  6553.     }
  6554.  
  6555.     .void-error {
  6556.         background: rgb(var(--void-error));
  6557.     }
  6558.  
  6559.     .void-warning {
  6560.         background: rgb(var(--void-warning));
  6561.     }
  6562.     .
  6563. `;
  6564.  
  6565. 	const settings = new Settings();
  6566. 	Toaster.initializeToaster(settings);
  6567. 	const styleHandler = new StyleHandler(settings);
  6568. 	styleHandler.refreshStyles();
  6569.  
  6570. 	try {
  6571. 		const intervalScriptHandler = new IntervalScriptHandler(settings);
  6572. 		intervalScriptHandler.enableScriptIntervalHandling();
  6573. 	} catch (error) {
  6574. 		Toaster.critical(
  6575. 			"A critical error has occured setting up intervalScriptHandler. Please check developer console and contact voidnyan."
  6576. 		);
  6577. 		console.error(error);
  6578. 	}
  6579.  
  6580. 	try {
  6581. 		const pasteHandler = new PasteHandler(settings);
  6582. 		pasteHandler.setup();
  6583. 	} catch (error) {
  6584. 		Toaster.critical(
  6585. 			"A critical error has occured setting up pasteHandler. Please check developer console and contact voidnyan."
  6586. 		);
  6587. 	}
  6588.  
  6589. 	new ChangeLog(settings).renderChangeLog();
  6590.  
  6591. 	styleHandler.createStyleLink(styles, "script");
  6592.  
  6593. 	new ImgurAPI(
  6594. 		new ImageHostService().getImageHostConfiguration(imageHosts.imgur)
  6595. 	).refreshAuthToken();
  6596.  
  6597. 	console.log(`VoidVerified ${settings.version} loaded.`);
  6598.  
  6599. })();

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址