feat: fix sliders & made step prop able to be a function

assets/translations/README.md

@@ -6,15 +6,15 @@ To submit or edit a translation, please follow [this guide](../../contributing.m
 ### Translation progress:
 | Locale | Translated keys | Based on |
 | ------ | --------------- | :------: |
-| [`en_US`](./en_US.json) | 133 (default locale) |  |
-| [`de_DE`](./de_DE.json) | 🚫 `125/133` (94.0%) | ─ |
-| [`en_UK`](./en_UK.json) | ✅ `133/133` (100.0%) | `en_US` |
-| [`es_ES`](./es_ES.json) | 🚫 `125/133` (94.0%) | ─ |
-| [`fr_FR`](./fr_FR.json) | 🚫 `125/133` (94.0%) | ─ |
-| [`hi_IN`](./hi_IN.json) | 🚫 `125/133` (94.0%) | ─ |
-| [`ja_JA`](./ja_JA.json) | 🚫 `125/133` (94.0%) | ─ |
-| [`pt_BR`](./pt_BR.json) | 🚫 `125/133` (94.0%) | ─ |
-| [`zh_CN`](./zh_CN.json) | 🚫 `125/133` (94.0%) | ─ |
+| [`en_US`](./en_US.json) | 137 (default locale) |  |
+| [`de_DE`](./de_DE.json) | 🚫 `125/137` (91.2%) | ─ |
+| [`en_UK`](./en_UK.json) | ✅ `137/137` (100.0%) | `en_US` |
+| [`es_ES`](./es_ES.json) | 🚫 `125/137` (91.2%) | ─ |
+| [`fr_FR`](./fr_FR.json) | 🚫 `125/137` (91.2%) | ─ |
+| [`hi_IN`](./hi_IN.json) | 🚫 `125/137` (91.2%) | ─ |
+| [`ja_JA`](./ja_JA.json) | 🚫 `125/137` (91.2%) | ─ |
+| [`pt_BR`](./pt_BR.json) | 🚫 `125/137` (91.2%) | ─ |
+| [`zh_CN`](./zh_CN.json) | 🚫 `125/137` (91.2%) | ─ |
 
 <br>
 
@@ -25,7 +25,7 @@ This means you need to manually check against the base translations for missing
 
 ### Missing keys:
 
-<details><summary><code>de_DE</code> - 8 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>de_DE</code> - 12 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
@@ -37,10 +37,14 @@ This means you need to manually check against the base translations for missing
 | `close_and_ignore_until_reenabled` | `Close and ignore until re-enabled` |
 | `expand_release_notes` | `Click to expand the latest release notes` |
 | `collapse_release_notes` | `Click to collapse the latest release notes` |
+| `unit_entries-1` | `entry` |
+| `unit_entries-n` | `entries` |
+| `unit_days-1` | `day` |
+| `unit_days-n` | `days` |
 
 <br></details>
 
-<details><summary><code>es_ES</code> - 8 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>es_ES</code> - 12 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
@@ -52,10 +56,14 @@ This means you need to manually check against the base translations for missing
 | `close_and_ignore_until_reenabled` | `Close and ignore until re-enabled` |
 | `expand_release_notes` | `Click to expand the latest release notes` |
 | `collapse_release_notes` | `Click to collapse the latest release notes` |
+| `unit_entries-1` | `entry` |
+| `unit_entries-n` | `entries` |
+| `unit_days-1` | `day` |
+| `unit_days-n` | `days` |
 
 <br></details>
 
-<details><summary><code>fr_FR</code> - 8 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>fr_FR</code> - 12 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
@@ -67,10 +75,14 @@ This means you need to manually check against the base translations for missing
 | `close_and_ignore_until_reenabled` | `Close and ignore until re-enabled` |
 | `expand_release_notes` | `Click to expand the latest release notes` |
 | `collapse_release_notes` | `Click to collapse the latest release notes` |
+| `unit_entries-1` | `entry` |
+| `unit_entries-n` | `entries` |
+| `unit_days-1` | `day` |
+| `unit_days-n` | `days` |
 
 <br></details>
 
-<details><summary><code>hi_IN</code> - 8 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>hi_IN</code> - 12 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
@@ -82,10 +94,14 @@ This means you need to manually check against the base translations for missing
 | `close_and_ignore_until_reenabled` | `Close and ignore until re-enabled` |
 | `expand_release_notes` | `Click to expand the latest release notes` |
 | `collapse_release_notes` | `Click to collapse the latest release notes` |
+| `unit_entries-1` | `entry` |
+| `unit_entries-n` | `entries` |
+| `unit_days-1` | `day` |
+| `unit_days-n` | `days` |
 
 <br></details>
 
-<details><summary><code>ja_JA</code> - 8 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>ja_JA</code> - 12 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
@@ -97,10 +113,14 @@ This means you need to manually check against the base translations for missing
 | `close_and_ignore_until_reenabled` | `Close and ignore until re-enabled` |
 | `expand_release_notes` | `Click to expand the latest release notes` |
 | `collapse_release_notes` | `Click to collapse the latest release notes` |
+| `unit_entries-1` | `entry` |
+| `unit_entries-n` | `entries` |
+| `unit_days-1` | `day` |
+| `unit_days-n` | `days` |
 
 <br></details>
 
-<details><summary><code>pt_BR</code> - 8 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>pt_BR</code> - 12 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
@@ -112,10 +132,14 @@ This means you need to manually check against the base translations for missing
 | `close_and_ignore_until_reenabled` | `Close and ignore until re-enabled` |
 | `expand_release_notes` | `Click to expand the latest release notes` |
 | `collapse_release_notes` | `Click to collapse the latest release notes` |
+| `unit_entries-1` | `entry` |
+| `unit_entries-n` | `entries` |
+| `unit_days-1` | `day` |
+| `unit_days-n` | `days` |
 
 <br></details>
 
-<details><summary><code>zh_CN</code> - 8 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>zh_CN</code> - 12 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
@@ -127,5 +151,9 @@ This means you need to manually check against the base translations for missing
 | `close_and_ignore_until_reenabled` | `Close and ignore until re-enabled` |
 | `expand_release_notes` | `Click to expand the latest release notes` |
 | `collapse_release_notes` | `Click to collapse the latest release notes` |
+| `unit_entries-1` | `entry` |
+| `unit_entries-n` | `entries` |
+| `unit_days-1` | `day` |
+| `unit_days-n` | `days` |
 
 <br></details>

assets/translations/en_US.json

@@ -95,6 +95,11 @@
     "expand_release_notes": "Click to expand the latest release notes",
     "collapse_release_notes": "Click to collapse the latest release notes",
 
+    "unit_entries-1": "entry",
+    "unit_entries-n": "entries",
+    "unit_days-1": "day",
+    "unit_days-n": "days",
+
     "feature_category_layout": "Layout",
     "feature_category_songLists": "Song Lists",
     "feature_category_behavior": "Behavior",

src/components/BytmDialog.css

@@ -261,6 +261,10 @@
   width: 75px;
 }
 
+.bytm-ftconf-input[type=range] {
+  width: 240px;
+}
+
 .bytm-ftconf-input[type=checkbox] {
   margin-left: 5px;
 }

src/config.ts

@@ -6,7 +6,7 @@ import { compressionFormat } from "./constants";
 import type { FeatureConfig } from "./types";
 
 /** If this number is incremented, the features object data will be migrated to the new format */
-export const formatVersion = 4;
+export const formatVersion = 5;
 /** Config data format migration dictionary */
 export const migrations: ConfigMigrationsDict = {
   // 1 -> 2
@@ -48,6 +48,14 @@ export const migrations: ConfigMigrationsDict = {
       versionCheck: getFeatureDefault("versionCheck"),
     };
   },
+  // 4 -> 5
+  5: (oldData: Record<string, unknown>) => {
+    return {
+      ...oldData,
+      lyricsCacheMaxSize: getFeatureDefault("lyricsCacheMaxSize"),
+      lyricsCacheTTL: getFeatureDefault("lyricsCacheTTL"),
+    };
+  },
 };
 
 function getFeatureDefault<TKey extends keyof typeof featInfo>(key: TKey): typeof featInfo[TKey]["default"] {
@@ -81,7 +89,7 @@ export async function initConfig() {
     info("Config data initialized with default values");
   else if(oldFmtVer !== cfgMgr.formatVersion)
     info(`Config data migrated from version ${oldFmtVer} to ${cfgMgr.formatVersion}`);
-  return data;
+  return { ...data };
 }
 
 /** Returns the current feature config from the in-memory cache as a copy */

src/features/index.ts

@@ -252,6 +252,28 @@ export const featInfo = {
     enable: () => void "TODO",
     disable: () => void "TODO",
   },
+  lyricsCacheMaxSize: {
+    type: "slider",
+    category: "lyrics",
+    default: 500,
+    min: 0,
+    max: 2000,
+    step: 50,
+    unit: (val: number) => tp("unit_entries", val),
+    enable: () => void "TODO",
+    change: () => void "TODO",
+  },
+  lyricsCacheTTL: {
+    type: "slider",
+    category: "lyrics",
+    default: 21,
+    min: 1,
+    max: 100,
+    step: 1,
+    unit: (val: number) => tp("unit_days", val),
+    enable: () => void "TODO",
+    change: () => void "TODO",
+  },
 
   //#SECTION general
   locale: {

src/features/lyrics.ts

@@ -4,6 +4,7 @@ import { constructUrlString, error, getResourceUrl, info, log, onSelectorOld, wa
 import { emitInterface } from "../interface";
 import { compressionFormat, mode, scriptInfo } from "../constants";
 import type { LyricsCacheEntry } from "../types";
+import { getFeatures } from "src/config";
 
 /** Base URL of geniURL */
 export const geniUrlBase = "https://api.sv443.net/geniurl";
@@ -14,11 +15,6 @@ const geniUrlRatelimitTimeframe = 30;
 
 //#MARKER new cache
 
-/** How many cache entries can exist at a time - this is used to cap memory usage */
-const maxLyricsCacheSize = 500;
-/** Maximum time before a cache entry is force deleted */
-const cacheTTL = 1000 * 60 * 60 * 24 * 21; // 21 days
-
 export type LyricsCache = {
   cache: LyricsCacheEntry[];
 };
@@ -50,7 +46,7 @@ export async function initLyricsCache() {
 export function getLyricsCacheEntry(artist: string, song: string, refreshEntry = true) {
   const { cache } = lyricsCache.getData();
   const entry = cache.find(e => e.artist === artist && e.song === song);
-  if(entry && Date.now() - entry?.added > cacheTTL) {
+  if(entry && Date.now() - entry?.added > getFeatures().lyricsCacheTTL * 1000 * 60 * 60 * 24) {
     deleteLyricsCacheEntry(artist, song);
     return undefined;
   }
@@ -95,7 +91,7 @@ export function addLyricsCacheEntry(artist: string, song: string, url: string) {
     artist, song, url, viewed: Date.now(), added: Date.now(),
   } satisfies LyricsCacheEntry);
   cache.sort((a, b) => b.viewed - a.viewed);
-  if(cache.length > maxLyricsCacheSize)
+  if(cache.length > getFeatures().lyricsCacheMaxSize)
     cache.pop();
   return lyricsCache.setData({ cache });
 }
@@ -123,7 +119,7 @@ export function addLyricsCacheEntryPenalized(artist: string, song: string, url:
   } satisfies LyricsCacheEntry);
 
   cache.sort((a, b) => b.viewed - a.viewed);
-  if(cache.length > maxLyricsCacheSize)
+  if(cache.length > getFeatures().lyricsCacheMaxSize)
     cache.pop();
 
   return lyricsCache.setData({ cache });

src/menu/menu_old.ts

@@ -35,8 +35,6 @@ async function addCfgMenu() {
   initConfig = JSON.stringify(getFeatures());
 
   const initLangReloadText = t("lang_changed_prompt_reload");
-  const toggled_on = t("toggled_on");
-  const toggled_off = t("toggled_off");
 
   //#SECTION backdrop & menu container
   const backgroundElem = document.createElement("div");
@@ -245,7 +243,6 @@ async function addCfgMenu() {
     );
 
   const fmtVal = (v: unknown) => String(v).trim();
-  const toggleLabelText = (toggled: boolean) => toggled ? toggled_on : toggled_off;
 
   for(const category in featureCfgWithCategories) {
     const featObj = featureCfgWithCategories[category as FeatureCategory];
@@ -369,12 +366,11 @@ async function addCfgMenu() {
             inputElem.type = inputType;
 
           // @ts-ignore
-          if(typeof ftInfo.min !== "undefined" && ftInfo.max !== "undefined") {
-            // @ts-ignore
+          if(typeof ftInfo.min !== "undefined")// @ts-ignore
             inputElem.min = ftInfo.min;
-            // @ts-ignore
+          // @ts-ignore
+          if(ftInfo.max !== "undefined") // @ts-ignore
             inputElem.max = ftInfo.max;
-          }
 
           if(typeof initialVal !== "undefined")
             inputElem.value = String(initialVal);
@@ -386,17 +382,23 @@ async function addCfgMenu() {
             inputElem.checked = Boolean(initialVal);
 
           // @ts-ignore
-          const unitTxt = typeof ftInfo.unit === "string" ? " " + ftInfo.unit : "";
+          const unitTxt = (typeof ftInfo.unit === "string" ? ftInfo.unit : (
+            // @ts-ignore
+            typeof ftInfo.unit === "function" ? ftInfo.unit(Number(inputElem.value)) : ""
+          ));
 
           let labelElem: HTMLLabelElement | undefined;
+          let lastDisplayedVal: string | undefined;
           if(type === "slider") {
             labelElem = document.createElement("label");
             labelElem.classList.add("bytm-ftconf-label", "bytm-slider-label");
-            labelElem.textContent = fmtVal(initialVal) + unitTxt;
+            labelElem.textContent = `${fmtVal(initialVal)} ${unitTxt}`;
 
             inputElem.addEventListener("input", () => {
-              if(labelElem)
-                labelElem.textContent = fmtVal(Number(inputElem.value)) + unitTxt;
+              if(labelElem && lastDisplayedVal !== inputElem.value) {
+                labelElem.textContent = `${fmtVal(inputElem.value)} ${unitTxt}`;
+                lastDisplayedVal = inputElem.value;
+              }
             });
           }
           else if(type === "select") {
@@ -477,13 +479,14 @@ async function addCfgMenu() {
 
       if(!labelElem)
         continue;
-        
+
       // @ts-ignore
-      const unitTxt = typeof ftInfo.unit === "string" ? " " + ftInfo.unit : "";
+      const unitTxt = " " + (typeof ftInfo.unit === "string" ? ftInfo.unit : (
+        // @ts-ignore
+        typeof ftInfo.unit === "function" ? ftInfo.unit(Number(ftElem.value)) : ""
+      ));
       if(ftInfo.type === "slider")
-        labelElem.textContent = fmtVal(Number(value)) + unitTxt;
-      else if(ftInfo.type === "toggle")
-        labelElem.textContent = toggleLabelText(Boolean(value)) + unitTxt;
+        labelElem.textContent = `${fmtVal(Number(value))} ${unitTxt}`;
     }
     info("Rebuilt config menu");
   });

src/types.ts

@@ -130,9 +130,9 @@ type FeatureTypeProps =
     type: "number",
     default: number,
     min: number,
-    max: number,
+    max?: number,
     step?: number,
-    unit?: string,
+    unit?: string | ((val: number) => string),
   }
   | {
     type: "select",
@@ -145,7 +145,7 @@ type FeatureTypeProps =
     min: number,
     max: number,
     step?: number,
-    unit?: string,
+    unit?: string | ((val: number) => string),
   }
   | {
     type: "hotkey",
@@ -247,6 +247,10 @@ export interface FeatureConfig {
   //#SECTION lyrics
   /** Add a button to the media controls to open the current song's lyrics on genius.com in a new tab */
   geniusLyrics: boolean;
+  /** Max size of lyrics cache */
+  lyricsCacheMaxSize: number;
+  /** Max TTL of lyrics cache entries, in ms */
+  lyricsCacheTTL: number;
 
   //#SECTION misc
   /** The locale to use for translations */