fix: update volume labels on config change

src/features/index.ts

@@ -49,6 +49,7 @@ const localeOptions = Object.entries(langMapping).reduce((a, [locale, { name }])
  * | `click: () => void`                         | for type `button` only - function that will be called when the button is clicked |
  * | `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 |
  * | `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 - TODO: to be replaced in the big menu rework |
+ * | `advanced`                                  | if true, the feature will only be shown if the advanced mode feature has been turned on |
  * | `hidden`                                    | if true, the feature will not be shown in the settings - default is undefined (false) |
  * | `min`                                       | Only if type is `number` or `slider` - Overwrites the default of the `min` property of the HTML input element |
  * | `max`                                       | Only if type is `number` or `slider` - Overwrites the default of the `max` property of the HTML input element |
@@ -339,6 +340,18 @@ export const featInfo = {
     // TODO: to be reworked or removed in the big menu rework
     textAdornment: getAdvancedModeAdornment,
   },
+  lyricsFuzzyFilter: {
+    type: "toggle",
+    category: "lyrics",
+    default: false,
+    enable: noopTODO,
+    disable: noopTODO,
+    // TODO: use dialog here?
+    change: () => confirm(t("lyrics_cache_changed_clear_confirm")) && clearLyricsCache(),
+    advanced: true,
+    // TODO: to be reworked or removed in the big menu rework
+    textAdornment: getAdvancedModeAdornment,
+  },
 
   //#SECTION general
   locale: {

src/features/layout.ts

@@ -2,6 +2,7 @@ import { addGlobalStyle, addParent, autoPlural, fetchAdvanced, insertAfter, paus
 import type { FeatureConfig } from "../types";
 import { scriptInfo } from "../constants";
 import { error, getResourceUrl, log, onSelectorOld, warn, t, resourceToHTMLString } from "../utils";
+import { siteEvents } from "../siteEvents";
 import { openCfgMenu } from "../menu/menu_old";
 import { getFeatures } from "../config";
 import { featInfo } from ".";
@@ -228,7 +229,7 @@ async function addVolumeSliderLabel(sliderElem: HTMLInputElement, sliderContaine
   labelContElem.addEventListener("click", (e) => e.stopPropagation());
 
   const getLabelText = (slider: HTMLInputElement) =>
-    t("volume_tooltip", slider.value, features.volumeSliderStep ?? slider.step);
+    t("volume_tooltip", getFeatures().lockVolume ? getFeatures().lockVolumeLevel : slider.value, features.volumeSliderStep ?? slider.step);
 
   const labelFull = getLabelText(sliderElem);
   sliderContainer.setAttribute("title", labelFull);
@@ -247,8 +248,6 @@ async function addVolumeSliderLabel(sliderElem: HTMLInputElement, sliderContaine
       labelElem2.textContent = getLabel(sliderElem.value);
   };
 
-  sliderElem.addEventListener("change", () => updateLabel());
-
   let lockIconElem: HTMLElement | undefined;
   const lockIconHtml = await resourceToHTMLString("icon-lock");
   if(getFeatures().lockVolume && lockIconHtml) {
@@ -262,6 +261,13 @@ async function addVolumeSliderLabel(sliderElem: HTMLInputElement, sliderContaine
     lockIconElem.style.minWidth = "32px";
   }
 
+  sliderElem.addEventListener("change", () => updateLabel());
+  siteEvents.on("configChanged", () => {
+    updateLabel();
+    if(lockIconElem)
+      lockIconElem.title = lockIconElem.ariaLabel = t("volume_locked", getFeatures().lockVolumeLevel);
+  });
+
   onSelectorOld("#bytm-vol-slider-cont", {
     listener: (volumeCont) => {
       lockIconElem && labelContElem.appendChild(lockIconElem);