fix: more interface events

assets/translations/README.md

@@ -20,15 +20,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) | 208 (default locale) |  |
-| ⚠ | [`de_DE`](./de_DE.json) | `205/208` (98.6%) | ─ |
-| ─ | [`en_UK`](./en_UK.json) | `208/208` (100%) | `en_US` |
-| ⚠ | [`es_ES`](./es_ES.json) | `205/208` (98.6%) | ─ |
-| ⚠ | [`fr_FR`](./fr_FR.json) | `205/208` (98.6%) | ─ |
-| ⚠ | [`hi_IN`](./hi_IN.json) | `205/208` (98.6%) | ─ |
-| ⚠ | [`ja_JA`](./ja_JA.json) | `205/208` (98.6%) | ─ |
-| ⚠ | [`pt_BR`](./pt_BR.json) | `205/208` (98.6%) | ─ |
-| ⚠ | [`zh_CN`](./zh_CN.json) | `205/208` (98.6%) | ─ |
+| ─ | [`en_US`](./en_US.json) | 209 (default locale) |  |
+| ⚠ | [`de_DE`](./de_DE.json) | `205/209` (98.1%) | ─ |
+| ─ | [`en_UK`](./en_UK.json) | `209/209` (100%) | `en_US` |
+| ⚠ | [`es_ES`](./es_ES.json) | `205/209` (98.1%) | ─ |
+| ⚠ | [`fr_FR`](./fr_FR.json) | `205/209` (98.1%) | ─ |
+| ⚠ | [`hi_IN`](./hi_IN.json) | `205/209` (98.1%) | ─ |
+| ⚠ | [`ja_JA`](./ja_JA.json) | `205/209` (98.1%) | ─ |
+| ⚠ | [`pt_BR`](./pt_BR.json) | `205/209` (98.1%) | ─ |
+| ⚠ | [`zh_CN`](./zh_CN.json) | `205/209` (98.1%) | ─ |
 
 <sub>
 ✅ - Fully translated
@@ -49,72 +49,79 @@ This means to figure out which keys are untranslated, you will need to manually
 
 ### Missing keys:
 
-<details><summary><code>de_DE</code> - 3 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>de_DE</code> - 4 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
 | `clear_queue` | `Clear the queue` |
 | `clear_queue_confirm` | `Do you really want to clear the queue and leave only the currently playing song?` |
+| `feature_desc_fixHdrIssues` | `Fix rendering issues when using an HDR-compatible GPU and monitor` |
 | `feature_desc_clearQueueBtn` | `Add a button to the currently playing queue (or playlist) to quickly clear it` |
 
 <br></details>
 
-<details><summary><code>es_ES</code> - 3 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>es_ES</code> - 4 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
 | `clear_queue` | `Clear the queue` |
 | `clear_queue_confirm` | `Do you really want to clear the queue and leave only the currently playing song?` |
+| `feature_desc_fixHdrIssues` | `Fix rendering issues when using an HDR-compatible GPU and monitor` |
 | `feature_desc_clearQueueBtn` | `Add a button to the currently playing queue (or playlist) to quickly clear it` |
 
 <br></details>
 
-<details><summary><code>fr_FR</code> - 3 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>fr_FR</code> - 4 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
 | `clear_queue` | `Clear the queue` |
 | `clear_queue_confirm` | `Do you really want to clear the queue and leave only the currently playing song?` |
+| `feature_desc_fixHdrIssues` | `Fix rendering issues when using an HDR-compatible GPU and monitor` |
 | `feature_desc_clearQueueBtn` | `Add a button to the currently playing queue (or playlist) to quickly clear it` |
 
 <br></details>
 
-<details><summary><code>hi_IN</code> - 3 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>hi_IN</code> - 4 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
 | `clear_queue` | `Clear the queue` |
 | `clear_queue_confirm` | `Do you really want to clear the queue and leave only the currently playing song?` |
+| `feature_desc_fixHdrIssues` | `Fix rendering issues when using an HDR-compatible GPU and monitor` |
 | `feature_desc_clearQueueBtn` | `Add a button to the currently playing queue (or playlist) to quickly clear it` |
 
 <br></details>
 
-<details><summary><code>ja_JA</code> - 3 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>ja_JA</code> - 4 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
 | `clear_queue` | `Clear the queue` |
 | `clear_queue_confirm` | `Do you really want to clear the queue and leave only the currently playing song?` |
+| `feature_desc_fixHdrIssues` | `Fix rendering issues when using an HDR-compatible GPU and monitor` |
 | `feature_desc_clearQueueBtn` | `Add a button to the currently playing queue (or playlist) to quickly clear it` |
 
 <br></details>
 
-<details><summary><code>pt_BR</code> - 3 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>pt_BR</code> - 4 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
 | `clear_queue` | `Clear the queue` |
 | `clear_queue_confirm` | `Do you really want to clear the queue and leave only the currently playing song?` |
+| `feature_desc_fixHdrIssues` | `Fix rendering issues when using an HDR-compatible GPU and monitor` |
 | `feature_desc_clearQueueBtn` | `Add a button to the currently playing queue (or playlist) to quickly clear it` |
 
 <br></details>
 
-<details><summary><code>zh_CN</code> - 3 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>zh_CN</code> - 4 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
 | `clear_queue` | `Clear the queue` |
 | `clear_queue_confirm` | `Do you really want to clear the queue and leave only the currently playing song?` |
+| `feature_desc_fixHdrIssues` | `Fix rendering issues when using an HDR-compatible GPU and monitor` |
 | `feature_desc_clearQueueBtn` | `Add a button to the currently playing queue (or playlist) to quickly clear it` |
 
 <br></details>

assets/translations/en_US.json

@@ -168,6 +168,7 @@
     "feature_desc_thumbnailOverlayImageFit": "How to fit the thumbnail image over the video element",
     "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": "Fix rendering issues when using an HDR-compatible GPU and monitor",
 
     "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",

src/components/circularButton.ts

@@ -13,13 +13,13 @@ type CircularBtnOptions = (
     /** Tooltip and aria-label of the button */
     title: string;
   }
-)
-& (
-  {
+) & (
+  | {
     /** URL to navigate to when the button is clicked */
     href: string;
     onClick?: undefined;
-  } | {
+  }
+  | {
     href?: undefined;
     /** Callback function to execute when the button is clicked */
     onClick: (event: MouseEvent | KeyboardEvent) => void;

src/features/index.ts

@@ -1,12 +1,12 @@
-import { getPreferredLocale, hdrEnabled, resourceToHTMLString, t, tp } from "../utils";
-import langMapping from "../../assets/locales.json" assert { type: "json" };
+import { getPreferredLocale, resourceToHTMLString, t, tp } from "../utils";
 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 { volumeSharedBetweenTabsDisabled } from "./volume";
-import { emitSiteEvent } from "src/siteEvents";
+import { emitSiteEvent } from "../siteEvents";
+import langMapping from "../../assets/locales.json" assert { type: "json" };
 
 export * from "./layout";
 export * from "./behavior";
@@ -30,9 +30,11 @@ const localeOptions = Object.entries(langMapping).reduce((a, [locale, { name }])
 }, [] as SelectOption[])
   .sort((a, b) => a.label.localeCompare(b.label));
 
+/** Creates an HTML string for the given adornment properties */
 const getAdornHtml = async (className: string, title: string, resource: ResourceKey, extraParams?: string) =>
   `<span class="${className} bytm-adorn-icon" title="${title}" aria-label="${title}"${extraParams ? " " + extraParams : ""}>${await resourceToHTMLString(resource) ?? ""}</span>`;
 
+/** Combines multiple async functions or promises that resolve with an adornment HTML string into a single string */
 const combineAdornments = (
   adornments: Array<(
     | (() => Promise<string | undefined>)
@@ -216,7 +218,7 @@ export const featInfo = {
   fixHdrIssues: {
     type: "toggle",
     category: "layout",
-    default: hdrEnabled(),
+    default: true,
     textAdornment: adornments.reloadRequired,
   },
 

src/index.ts

@@ -6,6 +6,7 @@ import { error, getDomain, info, getSessionId, log, setLogLevel, initTranslation
 import { initSiteEvents } from "./siteEvents";
 import { emitInterface, initInterface, initPlugins } from "./interface";
 import { initObservers, addSelectorListener, globservers } from "./observers";
+import { getWelcomeDialog } from "./dialogs";
 import {
   // layout
   addWatermark, removeUpgradeTab,
@@ -29,8 +30,7 @@ import {
   addConfigMenuOptionYT, addConfigMenuOptionYTM,
   // other
   initVersionCheck, initLyricsCache,
-} from "./features/index";
-import { getWelcomeDialog } from "./dialogs";
+} from "./features";
 
 {
   // console watermark with sexy gradient
@@ -262,6 +262,7 @@ async function onDomLoad() {
     }
     catch(err) {
       error("Plugin loading error:", err);
+      emitInterface("bytm:fatalError", "Error while loading plugins");
     }
 
     try {
@@ -273,6 +274,7 @@ async function onDomLoad() {
   }
   catch(err) {
     error("Feature error:", err);
+    emitInterface("bytm:fatalError", "Error while initializing features");
   }
 }
 

src/interface.ts

@@ -21,6 +21,8 @@ export type InterfaceEvents = {
   "bytm:pluginsLoaded": undefined;
   /** Emitted when BYTM has finished initializing all features */
   "bytm:ready": undefined;
+  /** Emitted when a fatal error occurs and the script can't continue to run. Returns a short error description (not really meant to be displayed to the user). */
+  "bytm:fatalError": string;
   /**
    * Emitted whenever the SelectorObserver instances have been initialized  
    * Use `unsafeWindow.BYTM.addObserverListener()` to add custom listener functions to the observers

src/types.ts

@@ -29,9 +29,6 @@ export type Domain = "yt" | "ytm";
 /** A selection option between one of the supported domains, or all of them */
 export type SiteSelection = Domain | "all";
 
-/** A URL string that starts with "http://" or "https://" */
-export type HttpUrlString = `http://${string}` | `https://${string}`;
-
 /** 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";