Version 2.2.1

.github/security.md

@@ -0,0 +1,3 @@
+## Reporting a Vulnerability
+If you are positive you found a vulnerability, please contact me through a direct message by [joining my Discord server](https://dc.sv443.net/) or via E-Mail ([address is on my homepage](https://sv443.net)).  
+Please don't open a GitHub issue or discussion thread.

.github/workflows/codeql.yml

@@ -19,8 +19,8 @@ jobs:
 
     strategy:
       matrix:
-        language: ["javascript"]
-        # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python' ]
+        language: ["javascript-typescript"]
+        # CodeQL supports "c-cpp", "csharp", "go", "java-kotlin", "javascript-typescript", "python", "ruby", "swift"
         # Learn more:
         # https://docs.github.com/en/free-pro-team@latest/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#changing-the-languages-that-are-analyzed
 

README-summary.md

@@ -3,12 +3,13 @@
 <h1><img src="https://raw.githubusercontent.com/Sv443/BetterYTM/main/assets/images/logo/logo_128.png" width="96" height="96" /><br>BetterYTM</h1>
 
 ### Lots of configurable layout and user experience improvements for YouTube Music™ and YouTube™
-🇨🇳&nbsp;Chinese (simpl.), 🇬🇧&nbsp;English (GB), 🇺🇸&nbsp;English (US), 🇫🇷&nbsp;French, 🇩🇪&nbsp;German, 🇮🇳&nbsp;Hindi, 🇯🇵&nbsp;Japanese, 🇧🇷&nbsp;Portuguese, 🇪🇸&nbsp;Spanish
+
+#### [**Features**](#features) • [**Installation**](#installation) • [**Integrations**](#integrations) • [**Plugins**](#plugins) • [**Support**](#support) • [**Development**](#development) • [**Attributions**](#attributions) • [**Disclaimers**](#disclaimers)
+---
+
+Available in 🇨🇳&nbsp;Chinese (simpl.), 🇬🇧&nbsp;English (GB), 🇺🇸&nbsp;English (US), 🇫🇷&nbsp;French (FR), 🇩🇪&nbsp;German (DE), 🇮🇳&nbsp;Hindi (IN), 🇯🇵&nbsp;Japanese (JP), 🇧🇷&nbsp;Portuguese (BR), 🇪🇸&nbsp;Spanish (ES)
 <!-- END OF GENERATED CONTENT -->
 <!-- </{{HEADER}}> -->
-[**Features**](#features) • [**Installation**](#installation) • [**Integrations**](#integrations) • [**Plugins**](#plugins) • [**Support**](#support) • [**Development**](#development) • [**Attributions**](#attributions) • [**Disclaimers**](#disclaimers)
-
----
 
 <br>
 
@@ -24,7 +25,7 @@ All of these can be toggled and configured in the configuration menu.
   - Improve clickability of song titles and thumbnails when wanting to open them in a new tab
   - Remove the tracking parameter from URLs in the share menu
   - Automatically close permanent notifications
-- Input / Interaction:
+- Input & Interaction:
   - Auto-like songs and videos of your favorite creators on both YouTube and YouTube Music
   - Use arrow keys to skip forward or backward by a configurable amount of time
   - Press number keys to skip to a percentage of the currently playing song
@@ -64,7 +65,8 @@ Note: the `unsafeWindow` grant is required due to limitations in some browsers,
 <br>
 <sup>
 
-To install the latest development build [click here](https://github.com/Sv443/BetterYTM/raw/develop/dist/BetterYTM.user.js) (make sure to fully reinstall the userscript once the next release is out)
+If you want to install the latest (potentially unstable) development build, [look for the latest pull request](https://github.com/Sv443/BetterYTM/pulls?q=sort%3Aupdated-desc+is%3Apr+is%3Aopen) and click the install button there.  
+Please make sure to fully reinstall the userscript once the next release is out to avoid any issues.
 
 </sup>
 

README.md

@@ -4,12 +4,13 @@
 <h1><img src="https://raw.githubusercontent.com/Sv443/BetterYTM/main/assets/images/logo/logo_128.png" width="96" height="96" /><br>BetterYTM</h1>
 
 ### Lots of configurable layout and user experience improvements for YouTube Music™ and YouTube™
-🇨🇳&nbsp;Chinese (simpl.), 🇬🇧&nbsp;English (GB), 🇺🇸&nbsp;English (US), 🇫🇷&nbsp;French, 🇩🇪&nbsp;German, 🇮🇳&nbsp;Hindi, 🇯🇵&nbsp;Japanese, 🇧🇷&nbsp;Portuguese, 🇪🇸&nbsp;Spanish
+
+#### [**Features**](#features) • [**Installation**](#installation) • [**Integrations**](#integrations) • [**Plugins**](#plugins) • [**Support**](#support) • [**Development**](#development) • [**Attributions**](#attributions) • [**Disclaimers**](#disclaimers)
+---
+
+Available in 🇨🇳&nbsp;Chinese (simpl.), 🇬🇧&nbsp;English (GB), 🇺🇸&nbsp;English (US), 🇫🇷&nbsp;French (FR), 🇩🇪&nbsp;German (DE), 🇮🇳&nbsp;Hindi (IN), 🇯🇵&nbsp;Japanese (JP), 🇧🇷&nbsp;Portuguese (BR), 🇪🇸&nbsp;Spanish (ES)
 <!-- END OF GENERATED CONTENT -->
 <!-- </{{HEADER}}> -->
-[**Features**](#features) • [**Installation**](#installation) • [**Integrations**](#integrations) • [**Plugins**](#plugins) • [**Support**](#support) • [**Development**](#development) • [**Attributions**](#attributions) • [**Disclaimers**](#disclaimers)
-
----
 
 </div>
 <br>
@@ -26,7 +27,7 @@ All of these can be toggled and configured in the configuration menu.
   - Improve clickability of song titles and thumbnails when wanting to open them in a new tab
   - Remove the tracking parameter from URLs in the share menu
   - Automatically close permanent notifications
-- Input / Interaction:
+- Input & Interaction:
   - Auto-like songs and videos of your favorite creators on both YouTube and YouTube Music
   - Use arrow keys to skip forward or backward by a configurable amount of time
   - Press number keys to skip to a percentage of the currently playing song
@@ -67,7 +68,8 @@ Note: the `unsafeWindow` grant is required due to limitations in some browsers,
 </sup>
 <sup>
 
-To install the latest development build [click here](https://github.com/Sv443/BetterYTM/raw/develop/dist/BetterYTM.user.js) (make sure to fully reinstall the userscript once the next release is out)
+If you want to install the latest (potentially unstable) development build, [look for the latest pull request](https://github.com/Sv443/BetterYTM/pulls?q=sort%3Aupdated-desc+is%3Apr+is%3Aopen) and click the install button there.  
+Please make sure to fully reinstall the userscript once the next release is out to avoid any issues.
 
 </sup>
 

assets/README.md

@@ -3,16 +3,18 @@
 <br>
 
 ### Images:
-- PNG images and external assets are stored in `assets/images`
-- SVG images are stored in `assets/icons`
-- CSS files in `assets/style`
-- Translations are in `assets/translations`
+- Own PNG/JPG/GIF images are stored in [`assets/images`](./images)
+- External images are stored in [`assets/images/external`](./images/external)
+- The BYTM logo files are in [`assets/images/logo`](./images/logo)
+- SVG icons are stored in [`assets/icons`](./icons)
+- CSS stylesheets are in [`assets/style`](./style)
+- Translations are in [`assets/translations`](./translations)
 
 <br>
 
 ## JSON file formats:
 > [!NOTE]  
-> Note: If a property is wrapped with square brackets (`[name]`), it means that the property is optional
+> Note: If a property is followed by a question mark, that means it is optional
 
 <br>
 
@@ -31,29 +33,51 @@ The keys of the object are the locale codes, and the values are the locale objec
 <br>
 
 ### [`plugins.json`](plugins.json)
-(Not fully implemented yet, but should still be filled out when a plugin is added)  
+(Not implemented yet. As soon as a plugin is added, this needs to be fleshed out)  
 
-For the structure of this array of objects, see `type PluginObj` in [`src/types.ts`](../src/types.ts)
+<!-- TODO: For the structure of this array of objects, see `type PluginObj` in [`src/types.ts`](../src/types.ts) -->
+
+<br>
+
+### [`resources.json`](resources.json)
+This file contains the resources that are loaded into the runtime through the `@resource` userscript directive.  
+That includes all icons, images, CSS files, fonts, translations and other assets.  
+
+Inside the file is an object, whose keys are the resource names and the values are the path to the resource or a configuration object.  
+The path to the resource can be relative, in which case it's resolved relative to the `assets` directory.  
+If it starts with a slash, it will be resolved relative to the project root (where `package.json` is).  
+
+All values will be run through the function `resolveResourceVal()` in [`src/tools/post-build.ts`](./src/tools/post-build.ts) to replace placeholders with dynamic values.  
+For example, `$BRANCH` will be replaced with the branch name. Find all possible replacements in that function's declaration.  
+
+The configuration object can have the following properties:
+| Property | Type     | Description              |
+| :------- | :------- | :----------------------- |
+| `path`   | `string` | The path to the resource |
+| `ref?`   | `string` | The GitHub ref to use for the resource, e.g. `main`, a Git tag like `v2.0.0` or a commit hash - defaults to the branch resolved in [`src/tools/post-build.ts`](./src/tools/post-build.ts) |
 
 <br>
 
 ### [`require.json`](require.json)
 This file contains the npm libraries that are loaded into the runtime through the `@require` userscript directive.  
-It's an array of objects, which each have one of the following sets of properties:  
+This is done to massively reduce the bundle size and make use of the userscript extension's caching.  
+Each library will be set as an external in the [Rollup configuration](../rollup.config.js) to prevent it from including it in the bundle.  
+The version of each package will be inferred from [`package.json`](../package.json) to ensure consistent versions across the project.  
 
-Using npm and a CDN:
-| Property    | Type      | Description                                                                           |
-| :---------- | :-------- | :------------------------------------------------------------------------------------ |
-| `pkgName`   | `string`  | The name of the npm package, as in `npm i <pkgName>`                                  |
-| `path`      | `string`  | The path to the file that should be loaded, relative to the library root dir          |
-| `global`    | `string`  | The name of the global variable that the library exports                              |
-| `[baseUrl]` | `string`  | Base URL of the CDN to use - `https://cdn.jsdelivr.net/npm/` by default               |
-| `[link]`    | `boolean` | Whether `npm link` is active and the library should instead be included in the bundle |
-
+Inside the file is an array of objects, which each have one of the following properties:  
+
+Using npm packages through a CDN:
+| Property   | Type      | Description                                                                         |
+| :--------- | :-------- | :---------------------------------------------------------------------------------- |
+| `pkgName`  | `string`  | The name of the npm package, as in `npm i <pkgName>`                                |
+| `path`     | `string`  | The path to the file that should be loaded, relative to the library root dir        |
+| `global`   | `string`  | The name of the global variable that the library exports                            |
+| `baseUrl?` | `string`  | Base URL of the CDN to use - `https://cdn.jsdelivr.net/npm/` by default - package will be appended as `pkgName@versionFromPkgJson` |
+| `link?`    | `boolean` | Whether `npm link` is active and the library should be force-included in the bundle |
 
 Using a direct URL:
-| Property | Type      | Description                                                                           |
-| :------- | :-------- | :------------------------------------------------------------------------------------ |
-| `url`    | `string`  | URL to the file to include                                                            |
-| `global` | `string`  | The name of the global variable that the library exports                              |
-| `[link]` | `boolean` | Whether `npm link` is active and the library should instead be included in the bundle |
+| Property | Type      | Description                                                                         |
+| :------- | :-------- | :---------------------------------------------------------------------------------- |
+| `url`    | `string`  | URL to the file to include                                                          |
+| `global` | `string`  | The name of the global variable that the library exports                            |
+| `link?`  | `boolean` | Whether `npm link` is active and the library should be force-included in the bundle |

assets/locales.json

@@ -1,62 +1,63 @@
 {
   "de-DE": {
     "name": "Deutsch (Deutschland)",
-    "nameEnglish": "German",
+    "nameEnglish": "German (DE)",
     "emoji": "🇩🇪",
     "userscriptDesc": "Konfigurierbare Layout- und Benutzererfahrungs-Verbesserungen für YouTube Music™ und YouTube™",
     "authors": ["Sv443"],
-    "altLocales": ["de", "de-AT", "de-CH"]
+    "altLocales": ["de", "de-AT", "de-CH", "de-LI", "de-LU"]
   },
   "en-US": {
     "name": "English (United States)",
     "nameEnglish": "English (US)",
     "emoji": "🇺🇸",
     "userscriptDesc": "Configurable layout and user experience improvements for YouTube Music™ and YouTube™",
     "authors": ["Sv443"],
-    "altLocales": ["en", "en-CA", "en-AU"]
+    "altLocales": ["en", "en-CA"]
   },
   "en-GB": {
     "name": "English (Great Britain)",
     "nameEnglish": "English (GB)",
     "emoji": "🇬🇧",
     "userscriptDesc": "Configurable layout and user experience improvements for YouTube Music™ and YouTube™",
-    "authors": ["Sv443"]
+    "authors": ["Sv443"],
+    "altLocales": ["en-AU", "en-IE", "en-NZ", "en-ZA"]
   },
   "es-ES": {
     "name": "Español (España)",
-    "nameEnglish": "Spanish",
+    "nameEnglish": "Spanish (ES)",
     "emoji": "🇪🇸",
     "userscriptDesc": "Mejoras de diseño y experiencia de usuario configurables para YouTube Music™ y YouTube™",
     "authors": ["Sv443"],
     "altLocales": ["es", "es-MX"]
   },
   "fr-FR": {
     "name": "Français (France)",
-    "nameEnglish": "French",
+    "nameEnglish": "French (FR)",
     "emoji": "🇫🇷",
     "userscriptDesc": "Améliorations de la mise en page et de l'expérience utilisateur configurables pour YouTube Music™ et YouTube™",
     "authors": ["Sv443"],
     "altLocales": ["fr", "fr-CA", "fr-BE", "fr-CH", "fr-LU"]
   },
   "hi-IN": {
     "name": "हिंदी (भारत)",
-    "nameEnglish": "Hindi",
+    "nameEnglish": "Hindi (IN)",
     "emoji": "🇮🇳",
     "userscriptDesc": "YouTube Music™ और YouTube™ के लिए कॉन्फ़िगर करने योग्य लेआउट और उपयोगकर्ता अनुभव में सुधार",
     "authors": ["Sv443"],
     "altLocales": ["hi", "hi-NP"]
   },
   "ja-JP": {
     "name": "日本語 (日本)",
-    "nameEnglish": "Japanese",
+    "nameEnglish": "Japanese (JP)",
     "emoji": "🇯🇵",
     "userscriptDesc": "YouTube Music™ と YouTube™ の構成可能なレイアウトとユーザー エクスペリエンスの向上",
     "authors": ["Sv443"],
-    "altLocales": ["ja", "ja-JP"]
+    "altLocales": ["ja"]
   },
   "pt-BR": {
     "name": "Português (Brasil)",
-    "nameEnglish": "Portuguese",
+    "nameEnglish": "Portuguese (BR)",
     "emoji": "🇧🇷",
     "userscriptDesc": "Melhorias configuráveis no layout e na experiência do usuário para o YouTube Music™ e o YouTube™",
     "authors": ["Sv443"],
@@ -68,6 +69,6 @@
     "emoji": "🇨🇳",
     "userscriptDesc": "YouTube Music™ 和 YouTube™ 的可配置布局和用户体验改进",
     "authors": ["Sv443"],
-    "altLocales": ["zh", "zh-TW", "zh-HK"]
+    "altLocales": ["zh", "zh-TW", "zh-HK", "zh-SG"]
   }
 }

assets/resources.json

@@ -1,5 +1,6 @@
 {
   "css-above_queue_btns": "style/aboveQueueBtns.css",
+  "css-above_queue_btns_sticky": "style/aboveQueueBtnsSticky.css",
   "css-anchor_improvements": "style/anchorImprovements.css",
   "css-auto_like": "style/autoLike.css",
   "css-fix_hdr": "style/fixHDR.css",

assets/style/aboveQueueBtns.css

@@ -1,5 +1,4 @@
 #side-panel ytmusic-tab-renderer ytmusic-queue-header-renderer {
-  position: sticky;
   align-items: center;
   top: 0;
   z-index: 2;

assets/style/aboveQueueBtnsSticky.css

@@ -0,0 +1,3 @@
+#side-panel ytmusic-tab-renderer ytmusic-queue-header-renderer {
+  position: sticky;
+}