index.ts 27 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806
  1. import { formatNumber, getLocale, getPreferredLocale, getResourceUrl, resourceAsString, t, tp } from "../utils/index.js";
  2. import { clearLyricsCache, getLyricsCache } from "./lyricsCache.js";
  3. import { doVersionCheck } from "./versionCheck.js";
  4. import { getFeature, promptResetConfig } from "../config.js";
  5. import { FeatureInfo, type ColorLightnessPref, type ResourceKey, type SiteSelection, type SiteSelectionOrNone } from "../types.js";
  6. import { emitSiteEvent } from "../siteEvents.js";
  7. import langMapping from "../../assets/locales.json" with { type: "json" };
  8. import { getAutoLikeDialog, getPluginListDialog, showPrompt } from "../dialogs/index.js";
  9. import { showIconToast } from "../components/index.js";
  10. import { mode } from "../constants.js";
  11. import { getStoreSerializer } from "../serializer.js";
  12. //#region re-exports
  13. export * from "./layout.js";
  14. export * from "./behavior.js";
  15. export * from "./input.js";
  16. export * from "./integrations.js";
  17. export * from "./lyrics.js";
  18. export * from "./lyricsCache.js";
  19. export * from "./songLists.js";
  20. export * from "./versionCheck.js";
  21. export * from "./volume.js";
  22. //#region misc
  23. function noop() {
  24. void 0;
  25. }
  26. void [noop];
  27. //#region adornments
  28. type AdornmentFunc =
  29. | ((...args: any[]) => Promise<string | undefined>)
  30. | Promise<string | undefined>;
  31. /** Creates an HTML string for the given adornment properties */
  32. const getAdornHtml = async (className: string, title: string | undefined, resource: ResourceKey, extraAttributes?: string) =>
  33. `<span class="${className} bytm-adorn-icon" ${title ? `title="${title}" aria-label="${title}"` : ""}${extraAttributes ? ` ${extraAttributes}` : ""}>${await resourceAsString(resource) ?? ""}</span>`;
  34. /** Combines multiple async functions or promises that resolve with an adornment HTML string into a single string */
  35. const combineAdornments = (
  36. adornments: Array<AdornmentFunc>
  37. ) => new Promise<string>(
  38. async (resolve) => {
  39. const sortedAdornments = adornments.sort((a, b) => {
  40. const aIndex = adornmentOrder.get(a) ? adornmentOrder.get(a)! : -1;
  41. const bIndex = adornmentOrder.has(b) ? adornmentOrder.get(b)! : -1;
  42. return aIndex - bIndex;
  43. });
  44. const html = [] as string[];
  45. for(const adornment of sortedAdornments) {
  46. const val = typeof adornment === "function"
  47. ? await adornment()
  48. : await adornment;
  49. val && html.push(val);
  50. }
  51. resolve(html.join(""));
  52. }
  53. );
  54. /** Decoration elements that can be added next to the label */
  55. const adornments = {
  56. advanced: async () => getAdornHtml("bytm-advanced-mode-icon", t("advanced_mode"), "icon-advanced_mode"),
  57. experimental: async () => getAdornHtml("bytm-experimental-icon", t("experimental_feature"), "icon-experimental"),
  58. globe: async () => getAdornHtml("bytm-locale-icon", undefined, "icon-globe_small"),
  59. alert: async (title: string) => getAdornHtml("bytm-warning-icon", title, "icon-error", "role=\"alert\""),
  60. reload: async () => getFeature("advancedMode") ? getAdornHtml("bytm-reload-icon", t("feature_requires_reload"), "icon-reload") : undefined,
  61. } satisfies Record<string, AdornmentFunc>;
  62. /** Order of adornment elements in the {@linkcode combineAdornments()} function */
  63. const adornmentOrder = new Map<AdornmentFunc, number>();
  64. adornmentOrder.set(adornments.alert, 0);
  65. adornmentOrder.set(adornments.experimental, 1);
  66. adornmentOrder.set(adornments.globe, 2);
  67. adornmentOrder.set(adornments.reload, 3);
  68. adornmentOrder.set(adornments.advanced, 4);
  69. //#region select options
  70. interface SelectOption<TValue = number | string> {
  71. value: TValue;
  72. label: string;
  73. }
  74. /** Common options for config items of type "select" */
  75. const options = {
  76. siteSelection: (): SelectOption<SiteSelection>[] => [
  77. { value: "all", label: t("site_selection_both_sites") },
  78. { value: "yt", label: t("site_selection_only_yt") },
  79. { value: "ytm", label: t("site_selection_only_ytm") },
  80. ],
  81. siteSelectionOrNone: (): SelectOption<SiteSelectionOrNone>[] => [
  82. { value: "all", label: t("site_selection_both_sites") },
  83. { value: "yt", label: t("site_selection_only_yt") },
  84. { value: "ytm", label: t("site_selection_only_ytm") },
  85. { value: "none", label: t("site_selection_none") },
  86. ],
  87. locale: () => Object.entries(langMapping)
  88. .reduce((a, [locale, { name }]) => {
  89. return [...a, {
  90. value: locale,
  91. label: name,
  92. }];
  93. }, [] as SelectOption[])
  94. .sort((a, b) => a.label.localeCompare(b.label)),
  95. colorLightness: (): SelectOption<ColorLightnessPref>[] => [
  96. { value: "darker", label: t("color_lightness_darker") },
  97. { value: "normal", label: t("color_lightness_normal") },
  98. { value: "lighter", label: t("color_lightness_lighter") },
  99. ],
  100. };
  101. //#region rendering
  102. /** Renders a long number with a thousands separator */
  103. function renderLongNumberValue(val: string, maximumFractionDigits = 0) {
  104. return Number(val).toLocaleString(
  105. getLocale().replace(/_/g, "-"),
  106. {
  107. style: "decimal",
  108. maximumFractionDigits,
  109. }
  110. );
  111. }
  112. //#region features
  113. /**
  114. * Contains all possible features with their default values and other configuration.
  115. *
  116. * **Required props:**
  117. * <!------------------------------------------------------------------------------------------------------------------------------------------------------------------>
  118. * | Property | Description |
  119. * | :----------------------------- | :------------------------------------------------------------------------------------------------------------------------------- |
  120. * | `type: string` | Type of the feature configuration element - use autocomplete or check `FeatureTypeProps` in `src/types.ts` |
  121. * | `category: string` | Category of the feature - use autocomplete or check `FeatureCategory` in `src/types.ts` |
  122. * | `default: unknown` | Default value of the feature - type of the value depends on the given `type` |
  123. * | `enable(value: unknown): void` | (required if reloadRequired = false) - function that will be called when the feature is enabled / initialized for the first time |
  124. * <!------------------------------------------------------------------------------------------------------------------------------------------------------------------>
  125. *
  126. *
  127. * **Optional props:**
  128. * <!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
  129. * | Property | Description |
  130. * | :----------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------|
  131. * | `disable(newValue: unknown): void` | For type `toggle` only - function that will be called when the feature is disabled - can be a synchronous or asynchronous function |
  132. * | `change(key: string, prevValue: unknown, newValue: unknown): void` | For types `number`, `select`, `slider` and `hotkey` only - function that will be called when the value is changed |
  133. * | `click(): void` | For type `button` only - function that will be called when the button is clicked |
  134. * | `helpText: string \| () => string` | Function that returns an HTML string or the literal string itself that will be the help text for this feature - writing as function is useful for pluralizing or inserting values into the translation at runtime - if not set, translation with key `feature_helptext_featureKey` will be used instead, if available |
  135. * | `textAdornment(): string \| Promise<string>` | Function that returns an HTML string that will be appended to the text in the config menu as an adornment element |
  136. * | `unit: string \| (val: number) => string` | For types `number` or `slider` only - The unit text that is displayed next to the input element, i.e. " px" - a leading space need to be added too! |
  137. * | `min: number` | For types `number` or `slider` only - Overwrites the default of the `min` property of the HTML input element |
  138. * | `max: number` | For types `number` or `slider` only - Overwrites the default of the `max` property of the HTML input element |
  139. * | `step: number` | For types `number` or `slider` only - Overwrites the default of the `step` property of the HTML input element |
  140. * | `options: SelectOption[] \| () => SelectOption[]` | For type `select` only - function that returns an array of objects with `value` and `label` properties |
  141. * | `reloadRequired: boolean` | If true (default), the page needs to be reloaded for the changes to take effect - if false, `enable()` needs to be provided |
  142. * | `advanced: boolean` | If true, the feature will only be shown if the advanced mode feature has been turned on |
  143. * | `hidden: boolean` | If true, the feature will not be shown in the settings - default is undefined (false) |
  144. * | `valueHidden: boolean` | If true, the value of the feature will be hidden in the settings and via the plugin interface - default is undefined (false) |
  145. * | `normalize(val: unknown): unknown` | Function that will be called to normalize the value before it is saved - useful for trimming strings or other simple operations |
  146. * | `renderValue(val: string): string` | If provided, is used to render the value's label in the config menu |
  147. * <!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
  148. *
  149. * TODO: go through all features and set as many as possible to reloadRequired = false
  150. */
  151. export const featInfo = {
  152. //#region cat:layout
  153. watermarkEnabled: {
  154. type: "toggle",
  155. category: "layout",
  156. default: true,
  157. textAdornment: adornments.reload,
  158. },
  159. removeShareTrackingParam: {
  160. type: "toggle",
  161. category: "layout",
  162. default: true,
  163. textAdornment: adornments.reload,
  164. },
  165. removeShareTrackingParamSites: {
  166. type: "select",
  167. category: "layout",
  168. options: options.siteSelection,
  169. default: "all",
  170. advanced: true,
  171. textAdornment: () => combineAdornments([adornments.advanced, adornments.reload]),
  172. },
  173. fixSpacing: {
  174. type: "toggle",
  175. category: "layout",
  176. default: true,
  177. advanced: true,
  178. textAdornment: () => combineAdornments([adornments.advanced, adornments.reload]),
  179. },
  180. thumbnailOverlayBehavior: {
  181. type: "select",
  182. category: "layout",
  183. options: () => [
  184. { value: "songsOnly", label: t("thumbnail_overlay_behavior_songs_only") },
  185. { value: "videosOnly", label: t("thumbnail_overlay_behavior_videos_only") },
  186. { value: "always", label: t("thumbnail_overlay_behavior_always") },
  187. { value: "never", label: t("thumbnail_overlay_behavior_never") },
  188. ],
  189. default: "songsOnly",
  190. reloadRequired: false,
  191. enable: noop,
  192. },
  193. thumbnailOverlayToggleBtnShown: {
  194. type: "toggle",
  195. category: "layout",
  196. default: true,
  197. textAdornment: adornments.reload,
  198. },
  199. thumbnailOverlayShowIndicator: {
  200. type: "toggle",
  201. category: "layout",
  202. default: true,
  203. textAdornment: adornments.reload,
  204. },
  205. thumbnailOverlayIndicatorOpacity: {
  206. type: "slider",
  207. category: "layout",
  208. min: 5,
  209. max: 100,
  210. step: 5,
  211. default: 40,
  212. unit: "%",
  213. advanced: true,
  214. textAdornment: () => combineAdornments([adornments.advanced, adornments.reload]),
  215. },
  216. thumbnailOverlayImageFit: {
  217. type: "select",
  218. category: "layout",
  219. options: () => [
  220. { value: "cover", label: t("thumbnail_overlay_image_fit_crop") },
  221. { value: "contain", label: t("thumbnail_overlay_image_fit_full") },
  222. { value: "fill", label: t("thumbnail_overlay_image_fit_stretch") },
  223. ],
  224. default: "cover",
  225. advanced: true,
  226. textAdornment: () => combineAdornments([adornments.advanced, adornments.reload]),
  227. },
  228. hideCursorOnIdle: {
  229. type: "toggle",
  230. category: "layout",
  231. default: true,
  232. reloadRequired: false,
  233. enable: noop,
  234. },
  235. hideCursorOnIdleDelay: {
  236. type: "slider",
  237. category: "layout",
  238. min: 0.5,
  239. max: 10,
  240. step: 0.25,
  241. default: 2,
  242. unit: "s",
  243. advanced: true,
  244. textAdornment: adornments.advanced,
  245. reloadRequired: false,
  246. enable: noop,
  247. },
  248. fixHdrIssues: {
  249. type: "toggle",
  250. category: "layout",
  251. default: true,
  252. advanced: true,
  253. textAdornment: () => combineAdornments([adornments.advanced, adornments.reload]),
  254. },
  255. showVotes: {
  256. type: "toggle",
  257. category: "layout",
  258. default: true,
  259. textAdornment: adornments.reload,
  260. },
  261. // archived idea for future version
  262. // (shows a bar under the like/dislike buttons that shows the ratio of likes to dislikes)
  263. // showVoteRatio: {
  264. // type: "select",
  265. // category: "layout",
  266. // options: () => [
  267. // { value: "disabled", label: t("vote_ratio_disabled") },
  268. // { value: "greenRed", label: t("vote_ratio_green_red") },
  269. // { value: "blueGray", label: t("vote_ratio_blue_gray") },
  270. // ],
  271. // default: "disabled",
  272. // textAdornment: adornments.reload,
  273. // },
  274. //#region cat:volume
  275. volumeSliderLabel: {
  276. type: "toggle",
  277. category: "volume",
  278. default: true,
  279. textAdornment: adornments.reload,
  280. },
  281. volumeSliderSize: {
  282. type: "number",
  283. category: "volume",
  284. min: 50,
  285. max: 500,
  286. step: 5,
  287. default: 150,
  288. unit: "px",
  289. textAdornment: adornments.reload,
  290. },
  291. volumeSliderStep: {
  292. type: "slider",
  293. category: "volume",
  294. min: 1,
  295. max: 25,
  296. default: 2,
  297. unit: "%",
  298. textAdornment: adornments.reload,
  299. },
  300. volumeSliderScrollStep: {
  301. type: "slider",
  302. category: "volume",
  303. min: 1,
  304. max: 25,
  305. default: 4,
  306. unit: "%",
  307. textAdornment: adornments.reload,
  308. },
  309. volumeSharedBetweenTabs: {
  310. type: "toggle",
  311. category: "volume",
  312. default: false,
  313. textAdornment: adornments.reload,
  314. },
  315. setInitialTabVolume: {
  316. type: "toggle",
  317. category: "volume",
  318. default: false,
  319. textAdornment: () => getFeature("volumeSharedBetweenTabs")
  320. ? combineAdornments([adornments.alert(t("feature_warning_setInitialTabVolume_volumeSharedBetweenTabs_incompatible").replace(/"/g, "'")), adornments.reload])
  321. : adornments.reload(),
  322. },
  323. initialTabVolumeLevel: {
  324. type: "slider",
  325. category: "volume",
  326. min: 0,
  327. max: 100,
  328. step: 1,
  329. default: 100,
  330. unit: "%",
  331. textAdornment: () => getFeature("volumeSharedBetweenTabs")
  332. ? combineAdornments([adornments.alert(t("feature_warning_setInitialTabVolume_volumeSharedBetweenTabs_incompatible").replace(/"/g, "'")), adornments.reload])
  333. : adornments.reload(),
  334. reloadRequired: false,
  335. enable: noop,
  336. },
  337. //#region cat:song lists
  338. lyricsQueueButton: {
  339. type: "toggle",
  340. category: "songLists",
  341. default: true,
  342. textAdornment: adornments.reload,
  343. },
  344. deleteFromQueueButton: {
  345. type: "toggle",
  346. category: "songLists",
  347. default: true,
  348. textAdornment: adornments.reload,
  349. },
  350. listButtonsPlacement: {
  351. type: "select",
  352. category: "songLists",
  353. options: () => [
  354. { value: "queueOnly", label: t("list_button_placement_queue_only") },
  355. { value: "everywhere", label: t("list_button_placement_everywhere") },
  356. ],
  357. default: "everywhere",
  358. advanced: true,
  359. textAdornment: () => combineAdornments([adornments.advanced, adornments.reload]),
  360. },
  361. scrollToActiveSongBtn: {
  362. type: "toggle",
  363. category: "songLists",
  364. default: true,
  365. textAdornment: adornments.reload,
  366. },
  367. clearQueueBtn: {
  368. type: "toggle",
  369. category: "songLists",
  370. default: true,
  371. textAdornment: adornments.reload,
  372. },
  373. //#region cat:behavior
  374. disableBeforeUnloadPopup: {
  375. type: "toggle",
  376. category: "behavior",
  377. default: false,
  378. textAdornment: adornments.reload,
  379. },
  380. closeToastsTimeout: {
  381. type: "number",
  382. category: "behavior",
  383. min: 0,
  384. max: 30,
  385. step: 0.5,
  386. default: 3,
  387. unit: "s",
  388. reloadRequired: false,
  389. enable: noop,
  390. },
  391. rememberSongTime: {
  392. type: "toggle",
  393. category: "behavior",
  394. default: true,
  395. helpText: () => tp("feature_helptext_rememberSongTime", getFeature("rememberSongTimeMinPlayTime"), getFeature("rememberSongTimeMinPlayTime")),
  396. textAdornment: adornments.reload,
  397. },
  398. rememberSongTimeSites: {
  399. type: "select",
  400. category: "behavior",
  401. options: options.siteSelection,
  402. default: "all",
  403. textAdornment: adornments.reload,
  404. },
  405. rememberSongTimeDuration: {
  406. type: "number",
  407. category: "behavior",
  408. min: 1,
  409. max: 60 * 60 * 24 * 7,
  410. step: 1,
  411. default: 60,
  412. unit: "s",
  413. advanced: true,
  414. textAdornment: adornments.advanced,
  415. reloadRequired: false,
  416. enable: noop,
  417. },
  418. rememberSongTimeReduction: {
  419. type: "number",
  420. category: "behavior",
  421. min: 0,
  422. max: 30,
  423. step: 0.05,
  424. default: 0.2,
  425. unit: "s",
  426. advanced: true,
  427. textAdornment: adornments.advanced,
  428. reloadRequired: false,
  429. enable: noop,
  430. },
  431. rememberSongTimeMinPlayTime: {
  432. type: "slider",
  433. category: "behavior",
  434. min: 3,
  435. max: 30,
  436. step: 0.5,
  437. default: 10,
  438. unit: "s",
  439. advanced: true,
  440. textAdornment: adornments.advanced,
  441. reloadRequired: false,
  442. enable: noop,
  443. },
  444. //#region cat:input
  445. arrowKeySupport: {
  446. type: "toggle",
  447. category: "input",
  448. default: true,
  449. reloadRequired: false,
  450. enable: noop,
  451. },
  452. arrowKeySkipBy: {
  453. type: "slider",
  454. category: "input",
  455. min: 0.5,
  456. max: 30,
  457. step: 0.5,
  458. default: 5,
  459. unit: "s",
  460. reloadRequired: false,
  461. enable: noop,
  462. },
  463. switchBetweenSites: {
  464. type: "toggle",
  465. category: "input",
  466. default: true,
  467. reloadRequired: false,
  468. enable: noop,
  469. },
  470. switchSitesHotkey: {
  471. type: "hotkey",
  472. category: "input",
  473. default: {
  474. code: "F9",
  475. shift: false,
  476. ctrl: false,
  477. alt: false,
  478. },
  479. reloadRequired: false,
  480. enable: noop,
  481. },
  482. anchorImprovements: {
  483. type: "toggle",
  484. category: "input",
  485. default: true,
  486. textAdornment: adornments.reload,
  487. },
  488. numKeysSkipToTime: {
  489. type: "toggle",
  490. category: "input",
  491. default: true,
  492. reloadRequired: false,
  493. enable: noop,
  494. },
  495. autoLikeChannels: {
  496. type: "toggle",
  497. category: "input",
  498. default: true,
  499. textAdornment: adornments.reload,
  500. },
  501. autoLikeChannelToggleBtn: {
  502. type: "toggle",
  503. category: "input",
  504. default: true,
  505. reloadRequired: false,
  506. enable: noop,
  507. advanced: true,
  508. textAdornment: adornments.advanced,
  509. },
  510. // TODO(v2.2):
  511. // autoLikePlayerBarToggleBtn: {
  512. // type: "toggle",
  513. // category: "input",
  514. // default: false,
  515. // textAdornment: adornments.reload,
  516. // },
  517. autoLikeTimeout: {
  518. type: "slider",
  519. category: "input",
  520. min: 3,
  521. max: 30,
  522. step: 0.5,
  523. default: 5,
  524. unit: "s",
  525. advanced: true,
  526. reloadRequired: false,
  527. enable: noop,
  528. textAdornment: adornments.advanced,
  529. },
  530. autoLikeShowToast: {
  531. type: "toggle",
  532. category: "input",
  533. default: true,
  534. reloadRequired: false,
  535. advanced: true,
  536. enable: noop,
  537. textAdornment: adornments.advanced,
  538. },
  539. autoLikeOpenMgmtDialog: {
  540. type: "button",
  541. category: "input",
  542. click: () => getAutoLikeDialog().then(d => d.open()),
  543. },
  544. //#region cat:lyrics
  545. geniusLyrics: {
  546. type: "toggle",
  547. category: "lyrics",
  548. default: true,
  549. textAdornment: adornments.reload,
  550. },
  551. errorOnLyricsNotFound: {
  552. type: "toggle",
  553. category: "lyrics",
  554. default: false,
  555. reloadRequired: false,
  556. enable: noop,
  557. },
  558. geniUrlBase: {
  559. type: "text",
  560. category: "lyrics",
  561. default: "https://api.sv443.net/geniurl",
  562. normalize: (val: string) => val.trim().replace(/\/+$/, ""),
  563. advanced: true,
  564. textAdornment: adornments.advanced,
  565. reloadRequired: false,
  566. enable: noop,
  567. },
  568. geniUrlToken: {
  569. type: "text",
  570. valueHidden: true,
  571. category: "lyrics",
  572. default: "",
  573. normalize: (val: string) => val.trim(),
  574. advanced: true,
  575. textAdornment: adornments.advanced,
  576. reloadRequired: false,
  577. enable: noop,
  578. },
  579. lyricsCacheMaxSize: {
  580. type: "slider",
  581. category: "lyrics",
  582. default: 2000,
  583. min: 100,
  584. max: 10000,
  585. step: 100,
  586. unit: (val: number) => ` ${tp("unit_entries", val)}`,
  587. renderValue: renderLongNumberValue,
  588. advanced: true,
  589. textAdornment: adornments.advanced,
  590. reloadRequired: false,
  591. enable: noop,
  592. },
  593. lyricsCacheTTL: {
  594. type: "slider",
  595. category: "lyrics",
  596. default: 21,
  597. min: 1,
  598. max: 100,
  599. step: 1,
  600. unit: (val: number) => " " + tp("unit_days", val),
  601. advanced: true,
  602. textAdornment: adornments.advanced,
  603. reloadRequired: false,
  604. enable: noop,
  605. },
  606. clearLyricsCache: {
  607. type: "button",
  608. category: "lyrics",
  609. async click() {
  610. const entries = getLyricsCache().length;
  611. const formattedEntries = entries.toLocaleString(getLocale(), { style: "decimal", maximumFractionDigits: 0 });
  612. if(await showPrompt({ type: "confirm", message: tp("lyrics_clear_cache_confirm_prompt", entries, formattedEntries) })) {
  613. await clearLyricsCache();
  614. await showPrompt({ type: "alert", message: t("lyrics_clear_cache_success") });
  615. }
  616. },
  617. advanced: true,
  618. textAdornment: adornments.advanced,
  619. },
  620. // advancedLyricsFilter: {
  621. // type: "toggle",
  622. // category: "lyrics",
  623. // default: false,
  624. // change: () => setTimeout(async () => await showPrompt({ type: "confirm", message: t("lyrics_cache_changed_clear_confirm") }) && clearLyricsCache(), 200),
  625. // advanced: true,
  626. // textAdornment: adornments.experimental,
  627. // reloadRequired: false,
  628. // enable: noop,
  629. // },
  630. //#region cat:integrations
  631. disableDarkReaderSites: {
  632. type: "select",
  633. category: "integrations",
  634. options: options.siteSelectionOrNone,
  635. default: "all",
  636. advanced: true,
  637. textAdornment: () => combineAdornments([adornments.advanced, adornments.reload]),
  638. },
  639. sponsorBlockIntegration: {
  640. type: "toggle",
  641. category: "integrations",
  642. default: true,
  643. advanced: true,
  644. textAdornment: () => combineAdornments([adornments.advanced, adornments.reload]),
  645. },
  646. themeSongIntegration: {
  647. type: "toggle",
  648. category: "integrations",
  649. default: false,
  650. textAdornment: adornments.reload,
  651. },
  652. themeSongLightness: {
  653. type: "select",
  654. category: "integrations",
  655. options: options.colorLightness,
  656. default: "darker",
  657. textAdornment: adornments.reload,
  658. },
  659. //#region cat:plugins
  660. openPluginList: {
  661. type: "button",
  662. category: "plugins",
  663. default: undefined,
  664. click: () => getPluginListDialog().then(d => d.open()),
  665. },
  666. initTimeout: {
  667. type: "number",
  668. category: "plugins",
  669. min: 3,
  670. max: 30,
  671. default: 8,
  672. step: 0.1,
  673. unit: "s",
  674. advanced: true,
  675. textAdornment: () => combineAdornments([adornments.advanced, adornments.reload]),
  676. },
  677. //#region cat:general
  678. locale: {
  679. type: "select",
  680. category: "general",
  681. options: options.locale,
  682. default: getPreferredLocale(),
  683. textAdornment: () => combineAdornments([adornments.globe, adornments.reload]),
  684. },
  685. localeFallback: {
  686. type: "toggle",
  687. category: "general",
  688. default: true,
  689. advanced: true,
  690. textAdornment: () => combineAdornments([adornments.advanced, adornments.reload]),
  691. },
  692. versionCheck: {
  693. type: "toggle",
  694. category: "general",
  695. default: true,
  696. textAdornment: adornments.reload,
  697. },
  698. checkVersionNow: {
  699. type: "button",
  700. category: "general",
  701. click: () => doVersionCheck(true),
  702. },
  703. numbersFormat: {
  704. type: "select",
  705. category: "general",
  706. options: () => [
  707. { value: "long", label: `${formatNumber(12_345_678, "long")} (${t("votes_format_long")})` },
  708. { value: "short", label: `${formatNumber(12_345_678, "short")} (${t("votes_format_short")})` },
  709. ],
  710. default: "short",
  711. reloadRequired: false,
  712. enable: noop,
  713. },
  714. toastDuration: {
  715. type: "slider",
  716. category: "general",
  717. min: 0,
  718. max: 15,
  719. default: 4,
  720. step: 0.5,
  721. unit: "s",
  722. reloadRequired: false,
  723. advanced: true,
  724. textAdornment: adornments.advanced,
  725. enable: noop,
  726. change: () => showIconToast({
  727. message: t("example_toast"),
  728. iconSrc: getResourceUrl(`img-logo${mode === "development" ? "_dev" : ""}`),
  729. }),
  730. },
  731. showToastOnGenericError: {
  732. type: "toggle",
  733. category: "general",
  734. default: true,
  735. advanced: true,
  736. textAdornment: () => combineAdornments([adornments.advanced, adornments.reload]),
  737. },
  738. resetConfig: {
  739. type: "button",
  740. category: "general",
  741. click: promptResetConfig,
  742. textAdornment: adornments.reload,
  743. },
  744. resetEverything: {
  745. type: "button",
  746. category: "general",
  747. click: async () => {
  748. if(await showPrompt({
  749. type: "confirm",
  750. message: t("reset_everything_confirm"),
  751. })) {
  752. await getStoreSerializer().resetStoresData();
  753. location.reload();
  754. }
  755. },
  756. advanced: true,
  757. textAdornment: () => combineAdornments([adornments.advanced, adornments.reload]),
  758. },
  759. logLevel: {
  760. type: "select",
  761. category: "general",
  762. options: () => [
  763. { value: 0, label: t("log_level_debug") },
  764. { value: 1, label: t("log_level_info") },
  765. ],
  766. default: 1,
  767. textAdornment: adornments.reload,
  768. },
  769. advancedMode: {
  770. type: "toggle",
  771. category: "general",
  772. default: false,
  773. textAdornment: () => getFeature("advancedMode") ? adornments.advanced() : undefined,
  774. change: (_key, prevValue, newValue) =>
  775. prevValue !== newValue &&
  776. emitSiteEvent("recreateCfgMenu"),
  777. },
  778. } as const satisfies FeatureInfo;