feat: make dark reader fix an actual feature

README.md

@@ -14,6 +14,8 @@ Supported Languages: 🇩🇪 German, 🇺🇸 English (US), 🇬🇧&
 </div>
 <br>
 
+<!-- TODO: -->
+
 ### Features:
 All of these can be toggled and configured in the configuration menu.
 - Layout & User Experience:

assets/translations/README.md

@@ -1,17 +1,13 @@
 <!--
-  !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
-  !!!             THIS IS A GENERATED FILE             !!!
-  !!!    all changes will be overwritten next build    !!!
-  !!! only edit in `src/tools/tr-progress-template.md` !!!
-  !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+  ‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️
+  ‼️‼️‼️             THIS IS A GENERATED FILE             ‼️‼️‼️
+  ‼️‼️‼️ all changes will be overwritten after next build ‼️‼️‼️
+  ‼️‼️‼️ only edit in `src/tools/tr-progress-template.md` ‼️‼️‼️
+  ‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️
 -->
 
 
 
-
-
-
-
 ## BetterYTM - Translations
 To submit or edit a translation, please follow [this guide](../../contributing.md#submitting-translations)
 
@@ -20,15 +16,15 @@ To submit or edit a translation, please follow [this guide](../../contributing.m
 ### Translation progress:
 | &nbsp; | Locale | Translated keys | Based on |
 | :----: | ------ | --------------- | :------: |
-| ─ | [`en_US`](./en_US.json) | 210 (default locale) |  |
-| ✅ | [`de_DE`](./de_DE.json) | `210/210` (100%) | ─ |
-| ─ | [`en_UK`](./en_UK.json) | `210/210` (100%) | `en_US` |
-| ✅ | [`es_ES`](./es_ES.json) | `210/210` (100%) | ─ |
-| ✅ | [`fr_FR`](./fr_FR.json) | `210/210` (100%) | ─ |
-| ✅ | [`hi_IN`](./hi_IN.json) | `210/210` (100%) | ─ |
-| ✅ | [`ja_JA`](./ja_JA.json) | `210/210` (100%) | ─ |
-| ✅ | [`pt_BR`](./pt_BR.json) | `210/210` (100%) | ─ |
-| ✅ | [`zh_CN`](./zh_CN.json) | `210/210` (100%) | ─ |
+| ─ | [`en_US`](./en_US.json) | 213 (default locale) |  |
+| ⚠ | [`de_DE`](./de_DE.json) | `210/213` (98.6%) | ─ |
+| ─ | [`en_UK`](./en_UK.json) | `213/213` (100%) | `en_US` |
+| ⚠ | [`es_ES`](./es_ES.json) | `210/213` (98.6%) | ─ |
+| ⚠ | [`fr_FR`](./fr_FR.json) | `210/213` (98.6%) | ─ |
+| ⚠ | [`hi_IN`](./hi_IN.json) | `210/213` (98.6%) | ─ |
+| ⚠ | [`ja_JA`](./ja_JA.json) | `210/213` (98.6%) | ─ |
+| ⚠ | [`pt_BR`](./pt_BR.json) | `210/213` (98.6%) | ─ |
+| ⚠ | [`zh_CN`](./zh_CN.json) | `210/213` (98.6%) | ─ |
 
 <sub>
 ✅ - Fully translated
@@ -48,4 +44,73 @@ This means to figure out which keys are untranslated, you will need to manually
 <br>
 
 ### Missing keys:
-No missing keys
+
+<details><summary><code>de_DE</code> - 3 missing keys <i>(click to show)</i></summary><br>
+
+| Key | English text |
+| --- | ------------ |
+| `site_selection_none` | `None (disabled)` |
+| `feature_desc_disableDarkReaderSites` | `On which sites should the Dark Reader extension be disabled to fix layout issues?` |
+| `feature_helptext_disableDarkReaderSites` | `The Dark Reader extension can cause issues with the layout of the site.\nThis feature allows you to disable Dark Reader on certain or all sites to prevent those issues.\nIf the extension is not installed, this feature will have no effect and can be left activated.` |
+
+<br></details>
+
+<details><summary><code>es_ES</code> - 3 missing keys <i>(click to show)</i></summary><br>
+
+| Key | English text |
+| --- | ------------ |
+| `site_selection_none` | `None (disabled)` |
+| `feature_desc_disableDarkReaderSites` | `On which sites should the Dark Reader extension be disabled to fix layout issues?` |
+| `feature_helptext_disableDarkReaderSites` | `The Dark Reader extension can cause issues with the layout of the site.\nThis feature allows you to disable Dark Reader on certain or all sites to prevent those issues.\nIf the extension is not installed, this feature will have no effect and can be left activated.` |
+
+<br></details>
+
+<details><summary><code>fr_FR</code> - 3 missing keys <i>(click to show)</i></summary><br>
+
+| Key | English text |
+| --- | ------------ |
+| `site_selection_none` | `None (disabled)` |
+| `feature_desc_disableDarkReaderSites` | `On which sites should the Dark Reader extension be disabled to fix layout issues?` |
+| `feature_helptext_disableDarkReaderSites` | `The Dark Reader extension can cause issues with the layout of the site.\nThis feature allows you to disable Dark Reader on certain or all sites to prevent those issues.\nIf the extension is not installed, this feature will have no effect and can be left activated.` |
+
+<br></details>
+
+<details><summary><code>hi_IN</code> - 3 missing keys <i>(click to show)</i></summary><br>
+
+| Key | English text |
+| --- | ------------ |
+| `site_selection_none` | `None (disabled)` |
+| `feature_desc_disableDarkReaderSites` | `On which sites should the Dark Reader extension be disabled to fix layout issues?` |
+| `feature_helptext_disableDarkReaderSites` | `The Dark Reader extension can cause issues with the layout of the site.\nThis feature allows you to disable Dark Reader on certain or all sites to prevent those issues.\nIf the extension is not installed, this feature will have no effect and can be left activated.` |
+
+<br></details>
+
+<details><summary><code>ja_JA</code> - 3 missing keys <i>(click to show)</i></summary><br>
+
+| Key | English text |
+| --- | ------------ |
+| `site_selection_none` | `None (disabled)` |
+| `feature_desc_disableDarkReaderSites` | `On which sites should the Dark Reader extension be disabled to fix layout issues?` |
+| `feature_helptext_disableDarkReaderSites` | `The Dark Reader extension can cause issues with the layout of the site.\nThis feature allows you to disable Dark Reader on certain or all sites to prevent those issues.\nIf the extension is not installed, this feature will have no effect and can be left activated.` |
+
+<br></details>
+
+<details><summary><code>pt_BR</code> - 3 missing keys <i>(click to show)</i></summary><br>
+
+| Key | English text |
+| --- | ------------ |
+| `site_selection_none` | `None (disabled)` |
+| `feature_desc_disableDarkReaderSites` | `On which sites should the Dark Reader extension be disabled to fix layout issues?` |
+| `feature_helptext_disableDarkReaderSites` | `The Dark Reader extension can cause issues with the layout of the site.\nThis feature allows you to disable Dark Reader on certain or all sites to prevent those issues.\nIf the extension is not installed, this feature will have no effect and can be left activated.` |
+
+<br></details>
+
+<details><summary><code>zh_CN</code> - 3 missing keys <i>(click to show)</i></summary><br>
+
+| Key | English text |
+| --- | ------------ |
+| `site_selection_none` | `None (disabled)` |
+| `feature_desc_disableDarkReaderSites` | `On which sites should the Dark Reader extension be disabled to fix layout issues?` |
+| `feature_helptext_disableDarkReaderSites` | `The Dark Reader extension can cause issues with the layout of the site.\nThis feature allows you to disable Dark Reader on certain or all sites to prevent those issues.\nIf the extension is not installed, this feature will have no effect and can be left activated.` |
+
+<br></details>

assets/translations/en_US.json

@@ -105,6 +105,7 @@
     "site_selection_both_sites": "Both sites",
     "site_selection_only_yt": "Only YouTube",
     "site_selection_only_ytm": "Only YouTube Music",
+    "site_selection_none": "None (disabled)",
 
     "new_version_available": "A new version of %1 is available!\nYou currently have version %2 installed and you can update to version %3",
     "open_update_page_install_manually": "Install on %1",
@@ -170,6 +171,8 @@
     "feature_desc_hideCursorOnIdle": "Hide the cursor after a few seconds of inactivity over the video",
     "feature_desc_hideCursorOnIdleDelay": "How many seconds of inactivity before the cursor should be hidden?",
     "feature_desc_fixHdrIssues": "Prevent some rendering issues when using an HDR-compatible GPU and monitor",
+    "feature_desc_disableDarkReaderSites": "On which sites should the Dark Reader extension be disabled to fix layout issues?",
+    "feature_helptext_disableDarkReaderSites": "The Dark Reader extension can cause issues with the layout of the site.\nThis feature allows you to disable Dark Reader on certain or all sites to prevent those issues.\nIf the extension is not installed, this feature will have no effect and can be left activated.",
 
     "feature_desc_lyricsQueueButton": "Add a button to each song in a queue to quickly open its lyrics page",
     "feature_desc_deleteFromQueueButton": "Add a button to each song in a queue to quickly remove it",

changelog.md

@@ -6,6 +6,8 @@
 	- Show a thumbnail overlay over the video element (or open the thumbnail in a new tab) automatically and/or manually, depending on configuration
 	- `?si` parameter is removed in YT's share menu too now
 	- Added an "above-queue" button to clear the currently playing queue / playlist
+  - Fix rendering issues when using HDR
+  - Disable the Dark Reader extension on both pages (because it messes up the layout)
 - **Changes / Fixes:**
   - Improved the config menu
     - Created new toggle input (because checkboxes don't come close to looking as good)
@@ -15,13 +17,12 @@
     - Made a bunch of features not require a page reload anymore
   - Fixed tooltip that is set on the wrong element
   - Fixed queue buttons not being shown when navigating with tab key
-  - Added a feature to fix rendering issues when using HDR
   - Tons of accessibility improvements for screenreader users (feedback regarding this is strongly welcome!)
 - **Internal Changes:**
   - Improved script performance
     - Implemented new [SelectorObserver](https://github.com/Sv443-Network/UserUtils#selectorobserver) instances to improve overall performance by quite a lot
       - Implemented rising-edge debounce for SelectorObserver instances to massively improve responsiveness
-    - Added a cache to save lyrics in. 1000 of the most listened to songs are saved throughout sessions for 30 days to save time and reduce server load.
+    - Added a cache to save lyrics in. Up to 1000 of the most listened to songs are saved throughout sessions for 30 days to save time and reduce server load.
   - Implemented new class BytmDialog for less duplicate code, better maintainability, the ability to make more menus easier and for them to have better accessibility
   - Expanded plugin interface
     - Added function to register plugins (see [contributing guide](https://github.com/Sv443/BetterYTM/blob/main/contributing.md#registerplugin))

src/features/behavior.ts

@@ -194,8 +194,13 @@ async function delRemSongData(watchID: string) {
 
 /** Disables Dark Reader if it is present */
 export function disableDarkReader() {
+  if(getFeatures().disableDarkReaderSites !== getDomain() && getFeatures().disableDarkReaderSites !== "all")
+    return;
+
   const metaElem = document.createElement("meta");
   metaElem.name = "darkreader-lock";
   metaElem.classList.add("bytm-disable-darkreader");
   document.head.appendChild(metaElem);
+
+  info("Disabled Dark Reader");
 }

src/features/index.ts

@@ -3,7 +3,7 @@ import { clearLyricsCache, getLyricsCache } from "./lyricsCache";
 import { doVersionCheck } from "./versionCheck";
 import { mode } from "../constants";
 import { getFeatures } from "../config";
-import { FeatureInfo, type ResourceKey, type SiteSelection } from "../types";
+import { FeatureInfo, type ResourceKey, type SiteSelection, type SiteSelectionOrNone } from "../types";
 import { volumeSharedBetweenTabsDisabled } from "./volume";
 import { emitSiteEvent } from "../siteEvents";
 import langMapping from "../../assets/locales.json" assert { type: "json" };
@@ -57,6 +57,12 @@ const options = {
     { value: "yt", label: t("site_selection_only_yt") },
     { value: "ytm", label: t("site_selection_only_ytm") },
   ],
+  siteSelectionOrNone: (): { value: SiteSelectionOrNone, label: string }[] => [
+    { value: "all", label: t("site_selection_both_sites") },
+    { value: "yt", label: t("site_selection_only_yt") },
+    { value: "ytm", label: t("site_selection_only_ytm") },
+    { value: "none", label: t("site_selection_none") },
+  ],
   locale: () => Object.entries(langMapping)
     .reduce((a, [locale, { name }]) => {
       return [...a, {
@@ -208,6 +214,13 @@ export const featInfo = {
     default: true,
     textAdornment: adornments.reloadRequired,
   },
+  disableDarkReaderSites: {
+    type: "select",
+    category: "layout",
+    options: options.siteSelectionOrNone,
+    default: "all",
+    textAdornment: adornments.reloadRequired,
+  },
 
   //#region volume
   volumeSliderLabel: {

src/index.ts

@@ -208,7 +208,8 @@ async function onDomLoad() {
     if(["ytm", "yt"].includes(domain)) {
       //#region (ytm+yt) layout
 
-      disableDarkReader();
+      if(features.disableDarkReaderSites !== "none")
+        disableDarkReader();
 
       if(features.removeShareTrackingParamSites && (features.removeShareTrackingParamSites === domain || features.removeShareTrackingParamSites === "all"))
         ftInit.push(["initRemShareTrackParam", initRemShareTrackParam()]);

src/tools/tr-progress.ts

@@ -98,11 +98,11 @@ ${lines.join("\n")}\n
 
   const banner = `\
 <!--
-  !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
-  !!!             THIS IS A GENERATED FILE             !!!
-  !!!    all changes will be overwritten next build    !!!
-  !!! only edit in \`src/tools/tr-progress-template.md\` !!!
-  !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+  ‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️
+  ‼️‼️‼️             THIS IS A GENERATED FILE             ‼️‼️‼️
+  ‼️‼️‼️ all changes will be overwritten after next build ‼️‼️‼️
+  ‼️‼️‼️ only edit in \`src/tools/tr-progress-template.md\` ‼️‼️‼️
+  ‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️
 -->`;
 
   const progTableHeader = `\
@@ -111,7 +111,7 @@ ${lines.join("\n")}\n
 
   let readmeCont = String(await readFile(join(rootDir, "src/tools/tr-progress-template.md"), "utf-8"));
 
-  readmeCont = `${banner}${"\n".repeat(8)}${readmeCont}`
+  readmeCont = `${banner}${"\n".repeat(4)}${readmeCont}`
     .replace(/<!--#{{TR_PROGRESS_TABLE}}-->/m, `${progTableHeader}\n${progTableLines.join("\n")}`)
     .replace(/<!--#{{TR_MISSING_KEYS}}-->/m, missingKeys.length > 0 ? missingKeys.join("\n") : "No missing keys");
   await writeFile(join(trDir, "README.md"), readmeCont);

src/types.ts

@@ -29,6 +29,9 @@ export type Domain = "yt" | "ytm";
 /** A selection option between one of the supported domains, or all of them */
 export type SiteSelection = Domain | "all";
 
+/** A selection option between one of the supported domains, or none of them */
+export type SiteSelectionOrNone = SiteSelection | "none";
+
 /** Key of a resource in `assets/resources.json` and extra keys defined by `tools/post-build.ts` */
 export type ResourceKey = keyof typeof resources | `trans-${keyof typeof locales}` | "changelog" | "css-bundle";
 
@@ -343,6 +346,8 @@ export interface FeatureConfig {
   hideCursorOnIdleDelay: number;
   /** Whether to fix various issues in the layout when HDR is supported and active */
   fixHdrIssues: boolean;
+  /** On which sites to disable Dark Reader - does nothing if the extension is not installed */
+  disableDarkReaderSites: SiteSelectionOrNone;
 
   //#region volume
   /** Add a percentage label to the volume slider */