fix: remove snap arm

Currently translated at 100.0% (397 of 397 strings)

Translation: th-ch/youtube-music/i18n
Translate-URL: https://hosted.weblate.org/projects/youtube-music/i18n/es/

.eslintignore

@@ -1 +0,0 @@
-.eslintrc.js

.eslintrc.js

@@ -1,80 +0,0 @@
-module.exports = {
-  extends: [
-    'eslint:recommended',
-    'plugin:import/recommended',
-    'plugin:import/typescript',
-    'plugin:@typescript-eslint/eslint-recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:@typescript-eslint/recommended-requiring-type-checking',
-  ],
-  plugins: ['prettier', '@typescript-eslint', 'import'],
-  parser: '@typescript-eslint/parser',
-  parserOptions: {
-    project: './tsconfig.json',
-    tsconfigRootDir: __dirname,
-    sourceType: 'module',
-    ecmaVersion: 'latest'
-  },
-  rules: {
-    'arrow-parens': ['error', 'always'],
-    'object-curly-spacing': ['error', 'always'],
-    '@typescript-eslint/no-floating-promises': 'off',
-    '@typescript-eslint/no-misused-promises': ['off', { checksVoidReturn: false }],
-    '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
-    "@typescript-eslint/no-non-null-assertion": "off",
-    'import/first': 'error',
-    'import/newline-after-import': 'error',
-    'import/no-default-export': 'off',
-    'import/no-duplicates': 'error',
-    'import/no-unresolved': ['error', { ignore: ['^virtual:', '\\?inline$', '\\?raw$', '\\?asset&asarUnpack'] }],
-    'import/order': [
-      'error',
-      {
-        'groups': ['builtin', 'external', ['internal', 'index', 'sibling'], 'parent', 'type'],
-        'newlines-between': 'always-and-inside-groups',
-        'alphabetize': {order: 'ignore', caseInsensitive: false}
-      }
-    ],
-    'import/prefer-default-export': 'off',
-    'camelcase': ['error', {properties: 'never'}],
-    'class-methods-use-this': 'off',
-    'lines-around-comment': [
-      'error',
-      {
-        beforeBlockComment: false,
-        afterBlockComment: false,
-        beforeLineComment: false,
-        afterLineComment: false,
-      },
-    ],
-    'max-len': 'off',
-    'no-mixed-operators': 'error',
-    'no-multi-spaces': ['error', {ignoreEOLComments: true}],
-    'no-tabs': 'error',
-    'no-void': 'error',
-    'no-empty': 'off',
-    'prefer-promise-reject-errors': 'off',
-    'quotes': ['error', 'single', {
-      avoidEscape: true,
-      allowTemplateLiterals: false,
-    }],
-    'quote-props': ['error', 'consistent'],
-    'semi': ['error', 'always'],
-  },
-  env: {
-    browser: true,
-    node: true,
-    es6: true,
-  },
-  ignorePatterns: ['dist', 'node_modules'],
-  root: true,
-  settings: {
-    'import/parsers': {
-      '@typescript-eslint/parser': ['.ts']
-    },
-    'import/resolver': {
-      typescript: {},
-      exports: {},
-    },
-  },
-};

.github/workflows/build.yml

@@ -21,7 +21,7 @@ jobs:
       - uses: actions/checkout@v4
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v4
         with:
           version: 9
           run_install: false
@@ -62,6 +62,12 @@ jobs:
           GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         run: |
           sudo snap install snapcraft --classic
+          sudo apt update
+          sudo apt install -y flatpak flatpak-builder
+          sudo flatpak remote-add --if-not-exists --system flathub https://flathub.org/repo/flathub.flatpakrepo
+          sudo flatpak install -y flathub org.freedesktop.Platform/x86_64/20.08
+          sudo flatpak install -y flathub org.freedesktop.Sdk/x86_64/20.08
+          sudo flatpak install -y flathub org.electronjs.Electron2.BaseApp/x86_64/20.08
           pnpm release:linux
 
       - name: Build and release on Windows
@@ -90,7 +96,7 @@ jobs:
           fetch-depth: 0
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v4
         with:
           version: 9
           run_install: false

README.md

@@ -4,7 +4,7 @@
 
 [![GitHub release](https://img.shields.io/github/release/th-ch/youtube-music.svg?style=for-the-badge&logo=youtube-music)](https://github.com/th-ch/youtube-music/releases/)
 [![GitHub license](https://img.shields.io/github/license/th-ch/youtube-music.svg?style=for-the-badge)](https://github.com/th-ch/youtube-music/blob/master/LICENSE)
-[![eslint code style](https://img.shields.io/badge/code_style-eslint-5ed9c7.svg?style=for-the-badge)](https://github.com/th-ch/youtube-music/blob/master/.eslintrc.js)
+[![eslint code style](https://img.shields.io/badge/code_style-eslint-5ed9c7.svg?style=for-the-badge)](https://github.com/th-ch/youtube-music/blob/master/eslint.config.mjs)
 [![Build status](https://img.shields.io/github/actions/workflow/status/th-ch/youtube-music/build.yml?branch=master&style=for-the-badge&logo=youtube-music)](https://GitHub.com/th-ch/youtube-music/releases/)
 [![GitHub All Releases](https://img.shields.io/github/downloads/th-ch/youtube-music/total?style=for-the-badge&logo=youtube-music)](https://GitHub.com/th-ch/youtube-music/releases/)
 [![AUR](https://img.shields.io/aur/version/youtube-music-bin?color=blueviolet&style=for-the-badge&logo=youtube-music)](https://aur.archlinux.org/packages/youtube-music-bin)

changelog.md

@@ -2,8 +2,106 @@
 
 All notable changes to this project will be documented in this file. Dates are displayed in UTC.
 
+#### [v3.6.0](https://github.com/th-ch/youtube-music/compare/v3.5.3...v3.6.0)
+
+- feat(api-server): remote control api [`#1909`](https://github.com/th-ch/youtube-music/pull/1909)
+- chore(deps): update playwright monorepo to v1.48.0 [`#2489`](https://github.com/th-ch/youtube-music/pull/2489)
+- fix(`synced-lyrics`): Fix 2 issues [`#2441`](https://github.com/th-ch/youtube-music/pull/2441)
+- chore(deps): update dependency typescript to v5.6.3 [`#2486`](https://github.com/th-ch/youtube-music/pull/2486)
+- chore(deps): update dependency electron to v32.2.0 [`#2487`](https://github.com/th-ch/youtube-music/pull/2487)
+- chore(deps): update dependency del-cli to v6 [`#2475`](https://github.com/th-ch/youtube-music/pull/2475)
+- chore(deps): update dependency typescript-eslint to v8.8.1 [`#2477`](https://github.com/th-ch/youtube-music/pull/2477)
+- fix(deps): update dependency solid-js to v1.9.2 [`#2480`](https://github.com/th-ch/youtube-music/pull/2480)
+- Revert "chore(deps): update dependency electron-builder to v25" [`#2488`](https://github.com/th-ch/youtube-music/pull/2488)
+- chore(deps): update dependency electron-builder to v25 [`#2406`](https://github.com/th-ch/youtube-music/pull/2406)
+- fix(deps): update dependency deepmerge-ts to v7.1.3 [`#2481`](https://github.com/th-ch/youtube-music/pull/2481)
+- fix(deps): update dependency ts-morph to v24 [`#2474`](https://github.com/th-ch/youtube-music/pull/2474)
+- fix(deps): update dependency i18next to v23.15.2 [`#2471`](https://github.com/th-ch/youtube-music/pull/2471)
+- chore(deps): update eslint monorepo to v9.12.0 [`#2470`](https://github.com/th-ch/youtube-music/pull/2470)
+- chore(deps): update dependency @stylistic/eslint-plugin-js to v2.9.0 [`#2469`](https://github.com/th-ch/youtube-music/pull/2469)
+- chore(deps): bump micromatch from 4.0.5 to 4.0.8 [`#2465`](https://github.com/th-ch/youtube-music/pull/2465)
+- chore(deps): bump braces from 3.0.2 to 3.0.3 [`#2466`](https://github.com/th-ch/youtube-music/pull/2466)
+- fix(deps): update dependency electron-updater to v6.3.9 [`#2468`](https://github.com/th-ch/youtube-music/pull/2468)
+- fix(deps): update dependency deepmerge-ts to v7.1.1 [`#2467`](https://github.com/th-ch/youtube-music/pull/2467)
+- chore(deps): update dependency typescript-eslint to v8.8.0 [`#2457`](https://github.com/th-ch/youtube-music/pull/2457)
+- chore(deps): update dependency @babel/runtime to v7.25.7 [`#2462`](https://github.com/th-ch/youtube-music/pull/2462)
+- chore(deps): update dependency rollup to v4.24.0 [`#2458`](https://github.com/th-ch/youtube-music/pull/2458)
+- chore(deps): update dependency eslint-plugin-import to v2.31.0 [`#2464`](https://github.com/th-ch/youtube-music/pull/2464)
+- chore(deps): update dependency rollup to v4.22.5 [`#2448`](https://github.com/th-ch/youtube-music/pull/2448)
+- chore(deps): update dependency typescript-eslint to v8.7.0 [`#2450`](https://github.com/th-ch/youtube-music/pull/2450)
+- fix(deps): update dependency solid-js to v1.9.1 [`#2451`](https://github.com/th-ch/youtube-music/pull/2451)
+- chore(deps): update dependency vite to v5.4.8 [`#2449`](https://github.com/th-ch/youtube-music/pull/2449)
+- chore(deps): update dependency discord-api-types to v0.37.101 [`#2440`](https://github.com/th-ch/youtube-music/pull/2440)
+- chore(deps): update dependency esbuild to v0.24.0 [`#2439`](https://github.com/th-ch/youtube-music/pull/2439)
+- chore(deps): update eslint monorepo to v9.11.1 [`#2442`](https://github.com/th-ch/youtube-music/pull/2442)
+- chore(deps): update dependency @types/howler to v2.2.12 [`#2443`](https://github.com/th-ch/youtube-music/pull/2443)
+- chore(deps): update dependency vite to v5.4.7 [`#2434`](https://github.com/th-ch/youtube-music/pull/2434)
+- chore(deps): update playwright monorepo to v1.47.2 [`#2436`](https://github.com/th-ch/youtube-music/pull/2436)
+- chore(deps): update eslint monorepo to v9.11.0 [`#2437`](https://github.com/th-ch/youtube-music/pull/2437)
+- fix(deps): update dependency youtubei.js to v10.5.0 [`#2431`](https://github.com/th-ch/youtube-music/pull/2431)
+- chore(deps): update dependency rollup to v4.22.4 [`#2430`](https://github.com/th-ch/youtube-music/pull/2430)
+- chore(deps): update dependency electron to v32.1.2 [`#2433`](https://github.com/th-ch/youtube-music/pull/2433)
+- feat: ESLint Flat Config (v9 support #2229) [`#2426`](https://github.com/th-ch/youtube-music/pull/2426)
+- fix(taskbar-mediacontrol): fix icon color [`#2485`](https://github.com/th-ch/youtube-music/issues/2485)
+- chore(eslint): apply eslint-plugin-prettier [`#2438`](https://github.com/th-ch/youtube-music/issues/2438)
+- fix: apply fix from eslint [`cb1381b`](https://github.com/th-ch/youtube-music/commit/cb1381bbb394e2bbb404f44817ef96411dabc8a9)
+- chore(i18n): Translated using Weblate (Portuguese (Brazil)) [`bcff26c`](https://github.com/th-ch/youtube-music/commit/bcff26c85b18258806f3960309776bc860c3a54e)
+- chore(i18n): Translated using Weblate (Persian) [`ead448e`](https://github.com/th-ch/youtube-music/commit/ead448ed98095339557903eb0f84c4a6d0f32058)
+
+#### [v3.5.3](https://github.com/th-ch/youtube-music/compare/v3.5.2...v3.5.3)
+
+> 17 September 2024
+
+- fix: fix `trustedHTML` issue [`#2339`](https://github.com/th-ch/youtube-music/issues/2339)
+- chore(deps): update dependency rollup to v4.21.3 [`6edc84a`](https://github.com/th-ch/youtube-music/commit/6edc84a8bd6c7e009041117ba0d2004783eb3a47)
+- chore(deps): update typescript-eslint monorepo to v8.6.0 [`d4c8a43`](https://github.com/th-ch/youtube-music/commit/d4c8a4320d733f7bddc4dcd1de93644790e71d66)
+- chore(deps): update dependency eslint to v8.57.1 [`02b7a39`](https://github.com/th-ch/youtube-music/commit/02b7a39753528cfd8c0d107d6d2ec6ef78c5afe7)
+
+#### [v3.5.2](https://github.com/th-ch/youtube-music/compare/v3.5.1...v3.5.2)
+
+> 7 September 2024
+
+- chore(deps): update typescript-eslint monorepo to v8.4.0 [`#2401`](https://github.com/th-ch/youtube-music/pull/2401)
+- chore(deps): update dependency @total-typescript/ts-reset to v0.6.1 [`#2396`](https://github.com/th-ch/youtube-music/pull/2396)
+- chore(deps): update dependency electron to v31.5.0 [`#2397`](https://github.com/th-ch/youtube-music/pull/2397)
+- chore(deps): update dependency eslint-import-resolver-typescript to v3.6.3 [`#2376`](https://github.com/th-ch/youtube-music/pull/2376)
+- chore(deps): update dependency discord-api-types to v0.37.100 [`#2394`](https://github.com/th-ch/youtube-music/pull/2394)
+- fix(deps): update dependency electron-updater to v6.3.4 [`#2395`](https://github.com/th-ch/youtube-music/pull/2395)
+- chore(deps): update dependency @babel/runtime to v7.25.6 [`#2388`](https://github.com/th-ch/youtube-music/pull/2388)
+- chore(deps): update dependency vite-plugin-inspect to v0.8.7 [`#2389`](https://github.com/th-ch/youtube-music/pull/2389)
+- chore(deps): update dependency discord-api-types to v0.37.99 [`#2374`](https://github.com/th-ch/youtube-music/pull/2374)
+- chore(deps): update dependency vite to v5.4.3 [`#2377`](https://github.com/th-ch/youtube-music/pull/2377)
+- fix: incorrect regex when splitting artistName [`#2378`](https://github.com/th-ch/youtube-music/pull/2378)
+- chore(deps): update dependency @babel/runtime to v7.25.4 [`#2373`](https://github.com/th-ch/youtube-music/pull/2373)
+- synced-lyrics: make the lyrics search more reliable [`#2343`](https://github.com/th-ch/youtube-music/pull/2343)
+- fix(deps): update dependency solid-js to v1.8.22 [`#2354`](https://github.com/th-ch/youtube-music/pull/2354)
+- chore(deps): update typescript-eslint monorepo to v8.3.0 [`#2350`](https://github.com/th-ch/youtube-music/pull/2350)
+- fix(deps): update dependency electron-debug to v4.0.1 [`#2349`](https://github.com/th-ch/youtube-music/pull/2349)
+- chore(deps): update dependency electron to v31.4.0 [`#2356`](https://github.com/th-ch/youtube-music/pull/2356)
+- fix: hide native-controls on linux when in-app-menu is used [`#2366`](https://github.com/th-ch/youtube-music/pull/2366)
+- fix: detect the upgrade btn using the icon [`#2364`](https://github.com/th-ch/youtube-music/pull/2364)
+- fix: exclude build-id files from rpm [`#2361`](https://github.com/th-ch/youtube-music/pull/2361)
+- fix(deps): update dependency i18next to v23.12.3 [`#2352`](https://github.com/th-ch/youtube-music/pull/2352)
+- fix(deps): update dependency @floating-ui/dom to v1.6.10 [`#2340`](https://github.com/th-ch/youtube-music/pull/2340)
+- fix(deps): update dependency electron-updater to v6.3.3 [`#2347`](https://github.com/th-ch/youtube-music/pull/2347)
+- fix(deps): update dependency solid-js to v1.8.20 [`#2345`](https://github.com/th-ch/youtube-music/pull/2345)
+- chore(deps): update dependency vite to v5.4.0 [`#2342`](https://github.com/th-ch/youtube-music/pull/2342)
+- chore(deps): update typescript-eslint monorepo to v8.0.1 [`#2335`](https://github.com/th-ch/youtube-music/pull/2335)
+- fix(deps): update dependency @floating-ui/dom to v1.6.9 [`#2337`](https://github.com/th-ch/youtube-music/pull/2337)
+- chore(deps): update playwright monorepo to v1.46.0 [`#2336`](https://github.com/th-ch/youtube-music/pull/2336)
+- chore(README): Translation README to Russian and adding Synced Lyrics to main README [`#2338`](https://github.com/th-ch/youtube-music/pull/2338)
+- chore(deps): update dependency rollup to v4.20.0 [`#2326`](https://github.com/th-ch/youtube-music/pull/2326)
+- fix(synced-lyric): fix timestamp [`#2323`](https://github.com/th-ch/youtube-music/issues/2323) [`#2379`](https://github.com/th-ch/youtube-music/issues/2379)
+- Revert "fix(MPRIS): Prevents player to start with invalid MPRIS interface (#1996)" [`#2225`](https://github.com/th-ch/youtube-music/issues/2225)
+- fix(adblocker/inplayer): fix Response.prototype.json [`#2310`](https://github.com/th-ch/youtube-music/issues/2310)
+- chore(deps): update dependency eslint-plugin-import to v2.30.0 [`f48e46d`](https://github.com/th-ch/youtube-music/commit/f48e46d29cf09c76c5172fd56d2d0f705616e4e3)
+- Revert "chore(deps): update dependency electron-builder to v25" [`089eff3`](https://github.com/th-ch/youtube-music/commit/089eff3152903c8b55ad3e5571b944062a647e27)
+- chore(deps): update dependency electron-builder to v25 [`fe4c89c`](https://github.com/th-ch/youtube-music/commit/fe4c89c349bb9f4f54d95c2018943095ccfdab0c)
+
 #### [v3.5.1](https://github.com/th-ch/youtube-music/compare/v3.5.0...v3.5.1)
 
+> 1 August 2024
+
 - fix(deps): update dependency youtubei.js to v10.3.0 [`#2306`](https://github.com/th-ch/youtube-music/pull/2306)
 - fix: Window gets stuck offscreen in some instances [`#2303`](https://github.com/th-ch/youtube-music/pull/2303)
 - fix: Incorrect window size on multi-monitor scaled displays [`#2302`](https://github.com/th-ch/youtube-music/pull/2302)

eslint.config.mjs

@@ -0,0 +1,80 @@
+//@ts-check
+
+import eslint from '@eslint/js';
+import prettier from 'eslint-plugin-prettier/recommended';
+import stylistic from '@stylistic/eslint-plugin-js';
+import tsEslint from 'typescript-eslint';
+
+import * as importPlugin from 'eslint-plugin-import';
+
+export default tsEslint.config(
+  eslint.configs.recommended,
+  tsEslint.configs.eslintRecommended,
+  ...tsEslint.configs.recommendedTypeChecked,
+  prettier,
+  { ignores: ['dist', 'node_modules', '*.config.*js', '*.test.*js'] },
+  {
+    plugins: {
+      stylistic,
+      importPlugin
+    },
+    languageOptions: {
+      parser: tsEslint.parser,
+      parserOptions: {
+        project: true,
+        sourceType: 'module',
+        ecmaVersion: 'latest'
+      }
+    },
+    rules: {
+      'stylistic/arrow-parens': ['error', 'always'],
+      'stylistic/object-curly-spacing': ['error', 'always'],
+      'prettier/prettier': ['error', { singleQuote: true, semi: true, tabWidth: 2, trailingComma: 'all', quoteProps: 'preserve' }],
+      '@typescript-eslint/no-floating-promises': 'off',
+      '@typescript-eslint/no-misused-promises': ['off', { checksVoidReturn: false }],
+      '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
+      '@typescript-eslint/no-non-null-assertion': 'off',
+      'importPlugin/first': 'error',
+      'importPlugin/newline-after-import': 'off',
+      'importPlugin/no-default-export': 'off',
+      'importPlugin/no-duplicates': 'error',
+      'importPlugin/no-unresolved': ['error', { ignore: ['^virtual:', '\\?inline$', '\\?raw$', '\\?asset&asarUnpack'] }],
+      'importPlugin/order': ['error', {
+        'groups': ['builtin', 'external', ['internal', 'index', 'sibling'], 'parent', 'type'],
+        'newlines-between': 'always-and-inside-groups',
+        'alphabetize': { order: 'ignore', caseInsensitive: false }
+      }],
+      'importPlugin/prefer-default-export': 'off',
+      'camelcase': ['error', { properties: 'never' }],
+      'class-methods-use-this': 'off',
+      'stylistic/lines-around-comment': ['error', {
+        beforeBlockComment: false,
+        afterBlockComment: false,
+        beforeLineComment: false,
+        afterLineComment: false,
+      }],
+      'stylistic/max-len': 'off',
+      'stylistic/no-mixed-operators': 'warn', // prettier does not support no-mixed-operators
+      'stylistic/no-multi-spaces': ['error', { ignoreEOLComments: true }],
+      'stylistic/no-tabs': 'error',
+      'no-void': 'error',
+      'no-empty': 'off',
+      'prefer-promise-reject-errors': 'off',
+      'stylistic/quotes': ['error', 'single', {
+        avoidEscape: true,
+        allowTemplateLiterals: false,
+      }],
+      'stylistic/quote-props': ['error', 'consistent'],
+      'stylistic/semi': ['error', 'always'],
+    },
+    settings: {
+      'import/parsers': {
+        '@typescript-eslint/parser': ['.ts']
+      },
+      'import/resolver': {
+        typescript: {},
+        exports: {},
+      },
+    },
+  },
+);

package.json

@@ -1,7 +1,7 @@
 {
   "name": "youtube-music",
   "productName": "YouTube Music",
-  "version": "3.5.2",
+  "version": "3.6.1",
   "description": "YouTube Music Desktop App - including custom plugins",
   "main": "./dist/main/index.js",
   "license": "MIT",
@@ -40,7 +40,8 @@
           ]
         }
       ],
-      "icon": "assets/generated/icons/mac/icon.icns"
+      "icon": "assets/generated/icons/mac/icon.icns",
+      "compression": "maximum"
     },
     "win": {
       "icon": "assets/generated/icons/win/icon.ico",
@@ -61,7 +62,8 @@
             "arm64"
           ]
         }
-      ]
+      ],
+      "compression": "maximum"
     },
     "nsisWeb": {
       "runAfterFinish": false
@@ -70,13 +72,67 @@
       "icon": "assets/generated/icons/png",
       "category": "AudioVideo",
       "target": [
-        "AppImage",
-        "snap",
-        "freebsd",
-        "deb",
-        "rpm"
+        {
+          "target": "AppImage",
+          "arch": [
+            "x64",
+            "arm64",
+            "armv7l"
+          ]
+        },
+        {
+          "target": "flatpak",
+          "arch": [
+            "x64"
+          ]
+        },
+        {
+          "target": "deb",
+          "arch": [
+            "x64",
+            "arm64",
+            "armv7l"
+          ]
+        },
+        {
+          "target": "rpm",
+          "arch": [
+            "x64",
+            "arm64"
+          ]
+        },
+        {
+          "target": "snap",
+          "arch": [
+            "x64"
+          ]
+        },
+        {
+          "target": "freebsd",
+          "arch": [
+            "x64",
+            "arm64",
+            "armv7l"
+          ]
+        },
+        {
+          "target": "tar.gz",
+          "arch": [
+            "x64",
+            "arm64",
+            "armv7l"
+          ]
+        }
       ]
     },
+    "appImage": {
+      "description": "YouTube Music Desktop App bundled with custom plugins (and built-in ad blocker / downloader)",
+      "category": "AudioVideo"
+    },
+    "flatpak": {
+      "description": "YouTube Music Desktop App bundled with custom plugins (and built-in ad blocker / downloader)",
+      "category": "AudioVideo"
+    },
     "deb": {
       "depends": [
         "libgtk-3-0",
@@ -139,7 +195,7 @@
     "typecheck": "tsc -p tsconfig.json --noEmit"
   },
   "engines": {
-    "node": ">=18.0.0",
+    "node": ">=18",
     "pnpm": ">=8"
   },
   "pnpm": {
@@ -149,11 +205,12 @@
       "xml2js": "0.6.2",
       "node-fetch": "3.3.2",
       "@electron/universal": "2.0.1",
-      "@babel/runtime": "7.25.6"
+      "@babel/runtime": "7.25.7"
     },
     "patchedDependencies": {
       "vudio@2.1.1": "patches/vudio@2.1.1.patch",
-      "app-builder-lib@24.13.3": "patches/app-builder-lib@24.13.3.patch"
+      "app-builder-lib@24.13.3": "patches/app-builder-lib@24.13.3.patch",
+      "@malept/flatpak-bundler": "patches/@malept__flatpak-bundler.patch"
     }
   },
   "dependencies": {
@@ -163,11 +220,16 @@
     "@electron/remote": "2.1.2",
     "@ffmpeg.wasm/core-mt": "0.12.0",
     "@ffmpeg.wasm/main": "0.12.0",
-    "@floating-ui/dom": "1.6.10",
+    "@floating-ui/dom": "1.6.11",
     "@foobar404/wave": "2.0.5",
+    "@hono/node-server": "1.13.2",
+    "@hono/swagger-ui": "0.4.1",
+    "@hono/zod-openapi": "0.16.4",
+    "@hono/zod-validator": "0.4.1",
     "@jellybrick/electron-better-web-request": "1.0.4",
     "@jellybrick/mpris-service": "2.1.4",
-    "@skyra/jaro-winkler": "^1.1.1",
+    "@jimp/plugin-invert": "0.22.12",
+    "@skyra/jaro-winkler": "1.1.1",
     "@xhayper/discord-rpc": "1.2.0",
     "async-mutex": "0.5.0",
     "butterchurn": "3.0.0-beta.4",
@@ -176,19 +238,21 @@
     "conf": "13.0.1",
     "custom-electron-prompt": "1.5.8",
     "dbus-next": "0.10.2",
-    "deepmerge-ts": "7.1.0",
-    "electron-debug": "4.0.1",
+    "deepmerge-ts": "7.1.3",
+    "electron-debug": "4.1.0",
     "electron-is": "3.0.0",
     "electron-localshortcut": "3.2.1",
     "electron-store": "10.0.0",
     "electron-unhandled": "4.0.1",
-    "electron-updater": "6.3.4",
+    "electron-updater": "6.3.9",
     "fast-average-color": "9.4.0",
     "fast-equals": "5.0.1",
     "filenamify": "6.0.0",
+    "hono": "4.6.4",
     "howler": "2.2.4",
     "html-to-text": "9.0.5",
-    "i18next": "23.14.0",
+    "i18next": "23.16.0",
+    "jimp": "1.6.0",
     "keyboardevent-from-electron-accelerator": "2.0.0",
     "keyboardevents-areequal": "0.2.2",
     "node-html-parser": "6.1.13",
@@ -198,46 +262,51 @@
     "serve": "14.2.3",
     "simple-youtube-age-restriction-bypass": "github:organization/Simple-YouTube-Age-Restriction-Bypass#v2.5.9",
     "solid-floating-ui": "0.3.1",
-    "solid-js": "1.8.22",
+    "solid-js": "1.9.2",
     "solid-styled-components": "0.28.5",
     "solid-transition-group": "0.2.3",
-    "ts-morph": "23.0.0",
+    "ts-morph": "24.0.0",
     "vudio": "2.1.1",
     "x11": "2.3.0",
-    "youtubei.js": "10.4.0"
+    "youtubei.js": "10.5.0",
+    "zod": "3.23.8"
   },
   "devDependencies": {
-    "@playwright/test": "1.47.0",
+    "@eslint/js": "9.12.0",
+    "@playwright/test": "1.48.0",
+    "@stylistic/eslint-plugin-js": "2.9.0",
     "@total-typescript/ts-reset": "0.6.1",
     "@types/color": "3.0.6",
     "@types/electron-localshortcut": "3.1.3",
-    "@types/howler": "2.2.11",
+    "@types/eslint__js": "8.42.3",
+    "@types/howler": "2.2.12",
     "@types/html-to-text": "9.0.4",
     "@types/semver": "7.5.8",
-    "@typescript-eslint/eslint-plugin": "8.4.0",
-    "@typescript-eslint/parser": "8.4.0",
+    "@types/trusted-types": "2.0.7",
     "bufferutil": "4.0.8",
     "builtin-modules": "4.0.0",
     "cross-env": "7.0.3",
-    "del-cli": "5.1.0",
-    "discord-api-types": "0.37.100",
-    "electron": "32.0.2",
+    "del-cli": "6.0.0",
+    "discord-api-types": "0.37.101",
+    "electron": "32.2.0",
     "electron-builder": "24.13.3",
     "electron-devtools-installer": "3.2.0",
     "electron-vite": "2.3.0",
-    "esbuild": "0.23.1",
-    "eslint": "8.57.0",
+    "esbuild": "0.24.0",
+    "eslint": "9.12.0",
+    "eslint-config-prettier": "9.1.0",
     "eslint-import-resolver-exports": "1.0.0-beta.5",
     "eslint-import-resolver-typescript": "3.6.3",
-    "eslint-plugin-import": "2.30.0",
+    "eslint-plugin-import": "2.31.0",
     "eslint-plugin-prettier": "5.2.1",
     "glob": "11.0.0",
     "node-gyp": "10.2.0",
-    "playwright": "1.47.0",
-    "rollup": "4.21.2",
-    "typescript": "5.5.4",
+    "playwright": "1.48.0",
+    "rollup": "4.24.0",
+    "typescript": "5.6.3",
+    "typescript-eslint": "8.8.1",
     "utf-8-validate": "6.0.4",
-    "vite": "5.4.3",
+    "vite": "5.4.8",
     "vite-plugin-inspect": "0.8.7",
     "vite-plugin-resolve": "2.5.2",
     "vite-plugin-solid": "2.10.2",

patches/@malept__flatpak-bundler.patch

@@ -0,0 +1,29 @@
+diff --git a/index.js b/index.js
+index 5968fcf47b69094993b0f861c03f5560e4a6a9b7..0fe16d4f40612c0abfa57898909ce0083f56944c 100644
+--- a/index.js
++++ b/index.js
+@@ -56,19 +56,23 @@ function getOptionsWithDefaults (options, manifest) {
+ async function spawnWithLogging (options, command, args, allowFail) {
+   return new Promise((resolve, reject) => {
+     logger(`$ ${command} ${args.join(' ')}`)
++    const output = []
+     const child = childProcess.spawn(command, args, { cwd: options['working-dir'] })
+     child.stdout.on('data', (data) => {
++      output.push(data)
+       logger(`1> ${data}`)
+     })
+     child.stderr.on('data', (data) => {
++      output.push(data)
+       logger(`2> ${data}`)
+     })
+     child.on('error', (error) => {
++      logger(`error - ${error.message} ${error.stack}`)
+       reject(error)
+     })
+     child.on('close', (code) => {
+       if (!allowFail && code !== 0) {
+-        reject(new Error(`${command} failed with status code ${code}`))
++        reject(new Error(`${command} ${args.join(' ')} failed with status code ${code} ${output.join(' ')}`))
+       }
+       resolve(code === 0)
+     })

src/custom-electron-prompt.d.ts

@@ -64,29 +64,29 @@ declare module 'custom-electron-prompt' {
   export type PromptOptions<T extends string> = T extends 'input'
     ? InputPromptOptions
     : T extends 'select'
-    ? SelectPromptOptions
-    : T extends 'counter'
-    ? CounterPromptOptions
-    : T extends 'keybind'
-    ? KeybindPromptOptions
-    : T extends 'multiInput'
-    ? MultiInputPromptOptions
-    : never;
+      ? SelectPromptOptions
+      : T extends 'counter'
+        ? CounterPromptOptions
+        : T extends 'keybind'
+          ? KeybindPromptOptions
+          : T extends 'multiInput'
+            ? MultiInputPromptOptions
+            : never;
 
   type PromptResult<T extends string> = T extends 'input'
     ? string
     : T extends 'select'
-    ? string
-    : T extends 'counter'
-    ? number
-    : T extends 'keybind'
-    ? {
-        value: string;
-        accelerator: string;
-      }[]
-    : T extends 'multiInput'
-    ? string[]
-    : never;
+      ? string
+      : T extends 'counter'
+        ? number
+        : T extends 'keybind'
+          ? {
+              value: string;
+              accelerator: string;
+            }[]
+          : T extends 'multiInput'
+            ? string[]
+            : never;
 
   const prompt: <T extends Type>(
     options?: PromptOptions<T> & { type: T },

src/i18n/resources/ar.json

@@ -14,9 +14,9 @@
     }
   },
   "language": {
-    "code": "إنجليزي",
-    "local-name": "الإنجليزي",
-    "name": "الإنجليزية"
+    "code": "ar",
+    "local-name": "العربية",
+    "name": "Arabic"
   },
   "main": {
     "console": {
@@ -194,7 +194,21 @@
       }
     },
     "tray": {
-      "next": "التالي"
+      "next": "التالي",
+      "previous": "السابق",
+      "quit": "خروج",
+      "restart": "إعادة تشغيل التطبيق",
+      "show": "عرض النافدة",
+      "tooltip": {
+        "default": "يوتيوب اغاني",
+        "with-song-info": "يوتيوب أغاني: {{الفنان}}-{{العنوان}}"
+      }
+    }
+  },
+  "plugins": {
+    "adblocker": {
+      "description": "حجب جميع الإعلانات والمسارات خارج الصندوق",
+      "name": "حاجب الإعلانات"
     }
   }
 }

src/i18n/resources/ca.json

@@ -279,6 +279,49 @@
       },
       "name": "Mode ambient"
     },
+    "api-server": {
+      "description": "Afegeix un servidor API per controlar el reproductor",
+      "dialog": {
+        "request": {
+          "buttons": {
+            "allow": "Permet",
+            "deny": "Denegar"
+          },
+          "message": "Permetre que {{ID}} ({{origin}}) accedeixi a l'API?",
+          "title": "Petició d'autorització API"
+        }
+      },
+      "menu": {
+        "auth-strategy": {
+          "label": "Estratègia d'autorització",
+          "submenu": {
+            "auth-at-first": {
+              "label": "Autoritza a la primera petició"
+            },
+            "none": {
+              "label": "Sense autorització"
+            }
+          }
+        },
+        "hostname": {
+          "label": "Nom del host"
+        },
+        "port": {
+          "label": "Port"
+        }
+      },
+      "name": "Servidor API [Beta]",
+      "prompt": {
+        "hostname": {
+          "label": "Introdueix el nom del host (per exemple 0.0.0.0) pel servidor API:",
+          "title": "Nom del host"
+        },
+        "port": {
+          "label": "Introdueix el port pel servidor API:",
+          "title": "Port"
+        }
+      }
+    },
     "audio-compressor": {
       "description": "Aplica compressió a l'àudio (baixa el volum de les parts més sorolloses de la senyal d'àudio i puja el volum de les parts més fluixes)",
       "name": "Compressió d'àudio"

src/i18n/resources/en.json

@@ -158,18 +158,18 @@
               },
               "remove-upgrade-button": "Remove upgrade button",
               "theme": {
+                "dialog": {
+                  "button": {
+                    "cancel": "Cancel",
+                    "remove": "Remove"
+                  },
+                  "remove-theme": "Are you sure you want to remove the custom theme?",
+                  "remove-theme-message": "This will remove the custom theme"
+                },
                 "label": "Theme",
                 "submenu": {
                   "import-css-file": "Import custom CSS file",
                   "no-theme": "No theme"
-                },
-                "dialog": {
-                  "remove-theme": "Are you sure you want to remove the custom theme?",
-                  "remove-theme-message": "This will remove the custom theme",
-                  "button": {
-                    "cancel": "Cancel",
-                    "remove": "Remove"
-                  }
                 }
               }
             }
@@ -207,6 +207,10 @@
     }
   },
   "plugins": {
+    "ad-speedup": {
+      "description": "If an ad play it mutes the audio and sets playback speed to 16x",
+      "name": "Ad Speedup"
+    },
     "adblocker": {
       "description": "Block all ads and tracking out of the box",
       "menu": {
@@ -214,17 +218,12 @@
       },
       "name": "Ad Blocker"
     },
-    "ad-speedup": {
-      "name": "Ad Speedup",
-      "description": "If an ad play it mutes the audio and sets playback speed to 16x"
-    },
     "album-actions": {
       "description": "Adds Undislike, Dislike, Like, and Unlike buttons to apply this to all songs in a playlist or album",
       "name": "Album Actions"
     },
     "album-color-theme": {
       "description": "Applies a dynamic theme and visual effects based on the album color palette",
-      "name": "Album Color Theme",
       "menu": {
         "color-mix-ratio": {
           "label": "Color mix ratio",
@@ -232,7 +231,8 @@
             "percent": "{{ratio}}%"
           }
         }
-      }
+      },
+      "name": "Album Color Theme"
     },
     "ambient-mode": {
       "description": "Applies a lighting effect by casting gentle colors from the video, into your screen’s background",
@@ -279,6 +279,49 @@
       },
       "name": "Ambient Mode"
     },
+    "api-server": {
+      "description": "Adds an API server to control the player",
+      "dialog": {
+        "request": {
+          "buttons": {
+            "allow": "Allow",
+            "deny": "Deny"
+          },
+          "message": "Allow {{ID}} ({{origin}}) to access the API?",
+          "title": "API authorization request"
+        }
+      },
+      "menu": {
+        "auth-strategy": {
+          "label": "Authorization strategy",
+          "submenu": {
+            "auth-at-first": {
+              "label": "Authorize at first request"
+            },
+            "none": {
+              "label": "No authorization"
+            }
+          }
+        },
+        "hostname": {
+          "label": "Hostname"
+        },
+        "port": {
+          "label": "Port"
+        }
+      },
+      "name": "API Server [Beta]",
+      "prompt": {
+        "hostname": {
+          "label": "Enter the hostname (like 0.0.0.0) for the API server:",
+          "title": "Hostname"
+        },
+        "port": {
+          "label": "Enter the port for the API server:",
+          "title": "Port"
+        }
+      }
+    },
     "audio-compressor": {
       "description": "Apply compression to audio (lowers the volume of the loudest parts of the signal and raises the volume of the softest parts)",
       "name": "Audio Compressor"
@@ -414,24 +457,24 @@
       "description": "Downloads MP3 / source audio directly from the interface",
       "menu": {
         "choose-download-folder": "Choose download folder",
-        "download-playlist": "Download playlist",
-        "presets": "Presets",
-        "skip-existing": "Skip existing files",
         "download-finish-settings": {
           "label": "Download on finish",
+          "prompt": {
+            "last-percent": "After x percent",
+            "last-seconds": "Last x seconds",
+            "title": "Configure when to download"
+          },
           "submenu": {
+            "advanced": "Advanced",
             "enabled": "Enabled",
             "mode": "Time mode",
-            "seconds": "Seconds",
             "percent": "Percent",
-            "advanced": "Advanced"
-          },
-          "prompt": {
-            "title": "Configure when to download",
-            "last-seconds": "Last x seconds",
-            "last-percent": "After x percent"
+            "seconds": "Seconds"
           }
-        }
+        },
+        "download-playlist": "Download playlist",
+        "presets": "Presets",
+        "skip-existing": "Skip existing files"
       },
       "name": "Downloader",
       "renderer": {
@@ -609,19 +652,19 @@
       "dialog": {
         "lastfm": {
           "auth-failed": {
-            "title": "Authentication Failed",
-            "message": "Failed to authenticate with Last.fm\nHide the popup until the next restart."
+            "message": "Failed to authenticate with Last.fm\nHide the popup until the next restart.",
+            "title": "Authentication Failed"
           }
         }
       },
       "menu": {
-        "scrobble-other-media": "Scrobble other media",
         "lastfm": {
           "api-settings": "Last.fm API Settings"
         },
         "listenbrainz": {
           "token": "Enter ListenBrainz user token"
-        }
+        },
+        "scrobble-other-media": "Scrobble other media"
       },
       "name": "Scrobbler",
       "prompt": {
@@ -670,55 +713,55 @@
     },
     "synced-lyrics": {
       "description": "Provides synced lyrics to songs, using providers like LRClib.",
-      "name": "Synced Lyrics",
       "errors": {
         "fetch": "⚠️ - An error occurred while fetching the lyrics. Please try again later.",
         "not-found": "⚠️ - No lyrics found for this song."
       },
-      "warnings": {
-        "instrumental": "⚠️ - This is an instrumental song",
-        "inexact": "⚠️ - The lyrics for this song may not be exact",
-        "duration-mismatch": "⚠️ - The lyrics may be out of sync due to a duration mismatch."
-      },
-      "refetch-btn": {
-        "normal": "Refetch lyrics",
-        "fetching": "Fetching..."
-      },
       "menu": {
-        "precise-timing": {
-          "label": "Make the lyrics perfectly synced",
-          "tooltip": "Calculate to the milisecond the display of the next line (can have a small impact on performance)"
+        "default-text-string": {
+          "label": "Default character between lyrics",
+          "tooltip": "Choose the default character to use for the gap between lyrics"
         },
         "line-effect": {
           "label": "Line effect",
-          "tooltip": "Choose the effect to apply to the current line",
           "submenu": {
-            "scale": {
-              "label": "Scale",
-              "tooltip": "Scale the current line"
+            "focus": {
+              "label": "Focus",
+              "tooltip": "Make only the current line white"
             },
             "offset": {
               "label": "Offset",
               "tooltip": "Offset on the right the current line"
             },
-            "focus": {
-              "label": "Focus",
-              "tooltip": "Make only the current line white"
+            "scale": {
+              "label": "Scale",
+              "tooltip": "Scale the current line"
             }
-          }
+          },
+          "tooltip": "Choose the effect to apply to the current line"
         },
-        "default-text-string": {
-          "label": "Default character between lyrics",
-          "tooltip": "Choose the default character to use for the gap between lyrics"
-        },
-        "show-time-codes": {
-          "label": "Show time codes",
-          "tooltip": "Show the time codes next to the lyrics"
+        "precise-timing": {
+          "label": "Make the lyrics perfectly synced",
+          "tooltip": "Calculate to the milisecond the display of the next line (can have a small impact on performance)"
         },
         "show-lyrics-even-if-inexact": {
           "label": "Show lyrics even if inexact",
           "tooltip": "If the song is not found, the plugin tries again with a different search query.\nThe result from the second attempt may not be exact."
+        },
+        "show-time-codes": {
+          "label": "Show time codes",
+          "tooltip": "Show the time codes next to the lyrics"
         }
+      },
+      "name": "Synced Lyrics",
+      "refetch-btn": {
+        "fetching": "Fetching...",
+        "normal": "Refetch lyrics"
+      },
+      "warnings": {
+        "duration-mismatch": "⚠️ - The lyrics may be out of sync due to a duration mismatch.",
+        "inexact": "⚠️ - The lyrics for this song may not be exact",
+        "instrumental": "⚠️ - This is an instrumental song"
       }
     },
     "taskbar-mediacontrol": {

src/i18n/resources/es.json

@@ -279,6 +279,49 @@
       },
       "name": "Modo ambiente"
     },
+    "api-server": {
+      "description": "Añade un servidor API para controlar el reproductor",
+      "dialog": {
+        "request": {
+          "buttons": {
+            "allow": "Permitir",
+            "deny": "Denegar"
+          },
+          "message": "¿Permitir {{ID}} ({{origin}}) acceder a la API?",
+          "title": "Petición de autorización API"
+        }
+      },
+      "menu": {
+        "auth-strategy": {
+          "label": "Estrategia de autorización",
+          "submenu": {
+            "auth-at-first": {
+              "label": "Autorizar la primera solicitud"
+            },
+            "none": {
+              "label": "Sin autorización"
+            }
+          }
+        },
+        "hostname": {
+          "label": "Nombre del host"
+        },
+        "port": {
+          "label": "Puerto"
+        }
+      },
+      "name": "Servidor API [Beta]",
+      "prompt": {
+        "hostname": {
+          "label": "Introduzca el nombre de host (como 0.0.0.0) para el servidor API:",
+          "title": "Nombre de host"
+        },
+        "port": {
+          "label": "Introduzca el puerto para el servidor API:",
+          "title": "Puerto"
+        }
+      }
+    },
     "audio-compressor": {
       "description": "Aplicar compresión al audio (reduce la diferencia entre las partes más fuertes y más suaves de una pista para que tenga un nivel más consistente)",
       "name": "Compresor de audio"

src/i18n/resources/fa.json

@@ -0,0 +1,397 @@
+{
+  "common": {
+    "console": {
+      "plugins": {
+        "execute-failed": "اجرای افزونه {{pluginName}}::{{contextName}} با خطا مواجه شد",
+        "executed-at-ms": "افزونه {{pluginName}}::{{contextName}} در {{ms}} میلی‌ثانیه اجرا شد",
+        "initialize-failed": "افزونه \"{{pluginName}}\" با خطا در حین مقداردهی اولیه مواجه شد",
+        "load-all": "در حال بارگذاری تمامی افزونه‌ها",
+        "load-failed": "افزونه \"{{pluginName}}\" بارگیری نشد",
+        "loaded": "افزونه \"{{pluginName}}\" بارگیری شد",
+        "unload-failed": "افزونه \"{{pluginName}}\" بارگذاری نشد",
+        "unloaded": "افزونه \"{{pluginName}}\" بارگذاری شد"
+      }
+    }
+  },
+  "language": {
+    "code": "fa",
+    "local-name": "فارسی",
+    "name": "Persian"
+  },
+  "main": {
+    "console": {
+      "did-finish-load": {
+        "dev-tools": "بارگذاری کامل شد. DevTools باز شد"
+      },
+      "i18n": {
+        "loaded": "i18n بارگذاری شد"
+      },
+      "second-instance": {
+        "receive-command": "دریافت فرمان از طریق پروتکل: \"{{command}}\""
+      },
+      "theme": {
+        "css-file-not-found": "فایل CSS \"{{cssFile}}\" وجود ندارد، نادیده گرفته شد"
+      },
+      "unresponsive": {
+        "details": "خطای عدم پاسخگویی!\n{{error}}"
+      },
+      "when-ready": {
+        "clearing-cache-after-20s": "پاکسازی حافظه کش برنامه"
+      },
+      "window": {
+        "tried-to-render-offscreen": "پنجره تلاش کرد خارج از صفحه نمایش داده شود، اندازه پنجره={{windowSize}}، اندازه نمایشگر={{displaySize}}، موقعیت={{position}}"
+      }
+    },
+    "dialog": {
+      "hide-menu-enabled": {
+        "detail": "منو مخفی است، از 'Alt' برای نمایش آن استفاده کنید (یا 'Escape' اگر از منوی داخل برنامه استفاده می‌کنید)",
+        "message": "پنهان‌سازی منو فعال است",
+        "title": "پنهان کردن منو فعال شد"
+      },
+      "need-to-restart": {
+        "buttons": {
+          "later": "بعداً",
+          "restart-now": "هم‌اکنون راه‌اندازی مجدد کنید"
+        },
+        "detail": "افزونه \"{{pluginName}}\" برای اعمال تغییرات نیاز به راه‌اندازی مجدد دارد",
+        "message": "\"{{pluginName}}\" نیاز به راه‌اندازی مجدد دارد",
+        "title": "نیاز به راه‌اندازی مجدد"
+      },
+      "unresponsive": {
+        "buttons": {
+          "quit": "خروج",
+          "relaunch": "راه‌اندازی مجدد",
+          "wait": "منتظر بمانید"
+        },
+        "detail": "از بابت این مشکل متأسفیم! لطفاً انتخاب کنید که چه کاری انجام دهید:",
+        "message": "برنامه پاسخی نمی‌دهد",
+        "title": "پنجره بدون پاسخ"
+      },
+      "update-available": {
+        "buttons": {
+          "disable": "غیرفعال کردن به‌روزرسانی‌ها",
+          "download": "دانلود",
+          "ok": "تأیید"
+        },
+        "detail": "نسخه جدیدی در دسترس است و می‌توان آن را از {{downloadLink}} دانلود کرد",
+        "message": "نسخه جدیدی در دسترس است",
+        "title": "به‌روزرسانی موجود است"
+      }
+    },
+    "menu": {
+      "about": "درباره",
+      "navigation": {
+        "label": "ناوبری",
+        "submenu": {
+          "copy-current-url": "کپی کردن URL فعلی",
+          "go-back": "بازگشت",
+          "go-forward": "حرکت به جلو",
+          "quit": "خروجی",
+          "restart": "راه‌اندازی مجدد برنامه"
+        }
+      },
+      "options": {
+        "label": "گزینه‌ها",
+        "submenu": {
+          "advanced-options": {
+            "label": "گزینه‌های پیشرفته",
+            "submenu": {
+              "auto-reset-app-cache": "ریست کردن حافظه کش برنامه هنگام شروع",
+              "disable-hardware-acceleration": "غیرفعال کردن شتاب سخت‌افزاری",
+              "edit-config-json": "ویرایش config.json",
+              "override-user-agent": "تغییر User-Agent",
+              "restart-on-config-changes": "راه‌اندازی مجدد در صورت تغییرات در پیکربندی",
+              "set-proxy": {
+                "label": "تنظیم پراکسی",
+                "prompt": {
+                  "label": "آدرس پراکسی را وارد کنید: (برای غیرفعال کردن، خالی بگذارید)",
+                  "placeholder": "مثال: SOCKS5://127.0.0.1:9999",
+                  "title": "تنظیم پراکسی"
+                }
+              },
+              "toggle-dev-tools": "باز کردن DevTools"
+            }
+          },
+          "always-on-top": "همیشه در بالا",
+          "auto-update": "به‌روزرسانی خودکار",
+          "hide-menu": {
+            "dialog": {
+              "message": "منو در اجرای بعدی مخفی خواهد بود، از [Alt] برای نمایش استفاده کنید (یا [`] اگر از منوی داخل برنامه استفاده می‌کنید)",
+              "title": "پنهان‌سازی منو فعال شد"
+            },
+            "label": "پنهان کردن منو"
+          },
+          "language": {
+            "dialog": {
+              "message": "زبان پس از راه‌اندازی مجدد تغییر خواهد کرد",
+              "title": "زبان تغییر کرد"
+            },
+            "label": "زبان",
+            "submenu": {
+              "to-help-translate": "می‌خواهید به ترجمه کمک کنید؟ اینجا کلیک کنید"
+            }
+          },
+          "resume-on-start": "ادامه آخرین آهنگ هنگام شروع برنامه",
+          "single-instance-lock": "قفل تنها یک نمونه",
+          "start-at-login": "شروع هنگام ورود",
+          "starting-page": {
+            "label": "صفحه شروع",
+            "unset": "لغو تنظیم"
+          },
+          "tray": {
+            "label": "نوار",
+            "submenu": {
+              "disabled": "غیرفعال",
+              "enabled-and-hide-app": "فعال و پنهان کردن برنامه",
+              "enabled-and-show-app": "فعال و نمایش برنامه",
+              "play-pause-on-click": "پخش/توقف با کلیک"
+            }
+          },
+          "visual-tweaks": {
+            "label": "تغییرات ظاهری",
+            "submenu": {
+              "like-buttons": {
+                "default": "پیش‌فرض",
+                "force-show": "اجبار به نمایش",
+                "hide": "پنهان کردن",
+                "label": "دکمه‌های پسندیدن"
+              },
+              "remove-upgrade-button": "حذف دکمه ارتقا",
+              "theme": {
+                "dialog": {
+                  "button": {
+                    "cancel": "لغو",
+                    "remove": "حذف"
+                  },
+                  "remove-theme": "آیا مطمئن هستید که می‌خواهید تم سفارشی را حذف کنید؟",
+                  "remove-theme-message": "این کار تم سفارشی را حذف خواهد کرد"
+                },
+                "label": "تم",
+                "submenu": {
+                  "import-css-file": "وارد کردن فایل CSS سفارشی",
+                  "no-theme": "بدون تم"
+                }
+              }
+            }
+          }
+        }
+      },
+      "plugins": {
+        "enabled": "فعال",
+        "label": "افزونه‌ها",
+        "new": "جدید"
+      },
+      "view": {
+        "label": "مشاهده",
+        "submenu": {
+          "force-reload": "اجبار به بارگذاری مجدد",
+          "reload": "بارگذاری مجدد",
+          "reset-zoom": "اندازه واقعی",
+          "toggle-fullscreen": "تغییر به تمام‌صفحه",
+          "zoom-in": "بزرگنمایی",
+          "zoom-out": "کوچکنمایی"
+        }
+      }
+    },
+    "tray": {
+      "next": "بعدی",
+      "play-pause": "پخش/توقف",
+      "previous": "قبلی",
+      "quit": "خروجی",
+      "restart": "راه‌اندازی مجدد برنامه",
+      "show": "نمایش پنجره",
+      "tooltip": {
+        "default": "یوتیوب موسیقی",
+        "with-song-info": "یوتیوب موسیقی: {{artist}} - {{title}}"
+      }
+    }
+  },
+  "plugins": {
+    "ad-speedup": {
+      "description": "اگر تبلیغ پخش شود، صدا را بی‌صدا کرده و سرعت پخش را به 16 برابر افزایش می‌دهد",
+      "name": "سرعت‌دهی به تبلیغ"
+    },
+    "adblocker": {
+      "description": "مسدود کردن تمامی تبلیغات و ردیابی‌ها از ابتدا",
+      "menu": {
+        "blocker": "مسدودکننده"
+      },
+      "name": "مسدودکننده تبلیغات"
+    },
+    "album-actions": {
+      "description": "افزودن دکمه‌های \"برگرفتن ناپسند\"، \"ناپسند\"، \"پسند\"، و \"حذف پسند\" برای اعمال آنها روی همه آهنگ‌ها در یک فهرست پخش یا آلبوم",
+      "name": "عملیات آلبوم"
+    },
+    "album-color-theme": {
+      "description": "اعمال یک تم پویا و جلوه‌های بصری بر اساس پالت رنگ آلبوم",
+      "menu": {
+        "color-mix-ratio": {
+          "label": "نسبت ترکیب رنگ"
+        }
+      },
+      "name": "تم رنگ آلبوم"
+    },
+    "ambient-mode": {
+      "description": "اعمال یک اثر نوری با پخش رنگ‌های ملایم از ویدئو به پس‌زمینه صفحه نمایش شما",
+      "menu": {
+        "blur-amount": {
+          "label": "میزان تاری",
+          "submenu": {
+            "pixels": "{{blurAmount}} پیکسل"
+          }
+        },
+        "buffer": {
+          "label": "بافر"
+        },
+        "opacity": {
+          "label": "شفافیت"
+        },
+        "quality": {
+          "label": "کیفیت",
+          "submenu": {
+            "pixels": "{{quality}} پیکسل"
+          }
+        },
+        "size": {
+          "label": "اندازه"
+        },
+        "smoothness-transition": {
+          "label": "انتقال نرمی",
+          "submenu": {
+            "during": "در طول {{interpolationTime}} ثانیه"
+          }
+        },
+        "use-fullscreen": {
+          "label": "استفاده از تمام‌صفحه"
+        }
+      },
+      "name": "حالت محیطی"
+    },
+    "audio-compressor": {
+      "description": "اعمال فشرده‌سازی به صدا (کاهش حجم بلندترین بخش‌های سیگنال و افزایش حجم بخش‌های نرم‌تر)",
+      "name": "فشرده‌ساز صدا"
+    },
+    "blur-nav-bar": {
+      "description": "شفاف و محو کردن نوار ناوبری",
+      "name": "محو کردن نوار ناوبری"
+    },
+    "bypass-age-restrictions": {
+      "description": "دور زدن تأیید سن یوتیوب",
+      "name": "دور زدن محدودیت‌های سنی"
+    },
+    "captions-selector": {
+      "description": "انتخاب زیرنویس برای آهنگ‌های یوتیوب موسیقی",
+      "menu": {
+        "autoload": "به طور خودکار انتخاب آخرین زیرنویس استفاده شده",
+        "disable-captions": "بدون زیرنویس به صورت پیش‌فرض"
+      },
+      "name": "انتخاب‌کننده زیرنویس",
+      "prompt": {
+        "selector": {
+          "label": "زبان زیرنویس فعلی: {{language}}",
+          "none": "هیچ‌کدام",
+          "title": "انتخاب زبان زیرنویس"
+        }
+      },
+      "templates": {
+        "title": "باز کردن انتخاب‌کننده زیرنویس"
+      }
+    },
+    "compact-sidebar": {
+      "description": "همیشه نوار کناری را در حالت فشرده تنظیم کن",
+      "name": "نوار کناری فشرده"
+    },
+    "crossfade": {
+      "description": "تداخل بین آهنگ‌ها",
+      "menu": {
+        "advanced": "پیشرفته"
+      },
+      "name": "تداخل [بتا]",
+      "prompt": {
+        "options": {
+          "multi-input": {
+            "fade-in-duration": "مدت زمان ورود تدریجی (میلی‌ثانیه)",
+            "fade-out-duration": "مدت زمان خروج تدریجی (میلی‌ثانیه)",
+            "fade-scaling": {
+              "label": "مقیاس‌بندی ورود تدریجی",
+              "linear": "خطی",
+              "logarithmic": "لگاریتمی"
+            },
+            "seconds-before-end": "تداخل N ثانیه قبل از پایان"
+          },
+          "title": "گزینه‌های تداخل"
+        }
+      }
+    },
+    "disable-autoplay": {
+      "description": "شروع آهنگ در حالت \"توقف\"",
+      "menu": {
+        "apply-once": "فقط در شروع اعمال می‌شود"
+      },
+      "name": "غیرفعال کردن پخش خودکار"
+    },
+    "discord": {
+      "backend": {
+        "already-connected": "تلاش برای اتصال با اتصال فعال",
+        "connected": "متصل به Discord",
+        "disconnected": "قطع اتصال از Discord"
+      },
+      "description": "نمایش آنچه گوش می‌دهید به دوستان با Rich Presence",
+      "menu": {
+        "auto-reconnect": "اتصال خودکار مجدد",
+        "clear-activity": "پاک کردن فعالیت",
+        "clear-activity-after-timeout": "پاک کردن فعالیت پس از تایم‌اوت",
+        "connected": "متصل",
+        "disconnected": "قطع شده",
+        "hide-duration-left": "مخفی کردن مدت زمان باقی‌مانده",
+        "hide-github-button": "مخفی کردن دکمه لینک GitHub",
+        "play-on-youtube-music": "پخش در یوتیوب موسیقی",
+        "set-inactivity-timeout": "تنظیم تایم‌اوت عدم فعالیت"
+      },
+      "name": "Rich Presence در Discord",
+      "prompt": {
+        "set-inactivity-timeout": {
+          "label": "ورود تایم‌اوت عدم فعالیت به ثانیه:",
+          "title": "تنظیم تایم‌اوت عدم فعالیت"
+        }
+      }
+    },
+    "downloader": {
+      "backend": {
+        "dialog": {
+          "error": {
+            "buttons": {
+              "ok": "تأیید"
+            },
+            "message": "اوه! متاسفیم، دانلود شکست خورد…",
+            "title": "خطا در دانلود!"
+          },
+          "start-download-playlist": {
+            "buttons": {
+              "ok": "تأیید"
+            },
+            "detail": "({{playlistSize}} آهنگ)",
+            "message": "دانلود فهرست پخش {{playlistTitle}}",
+            "title": "دانلود شروع شد"
+          }
+        },
+        "feedback": {
+          "conversion-progress": "تبدیل: {{percent}}%",
+          "converting": "در حال تبدیل…",
+          "done": "انجام شد: {{filePath}}",
+          "download-info": "در حال دانلود {{artist}} - {{title}} [{{videoId}}",
+          "download-progress": "دانلود: {{percent}}%",
+          "downloading": "در حال دانلود…",
+          "downloading-counter": "در حال دانلود {{current}}/{{total}}…",
+          "downloading-playlist": "در حال دانلود فهرست پخش \"{{playlistTitle}}\" - {{playlistSize}} آهنگ ({{playlistId}})",
+          "error-while-downloading": "خطا در دانلود \"{{author}} - {{title}}\": {{error}}",
+          "folder-already-exists": "پوشه {{playlistFolder}} از قبل وجود دارد",
+          "getting-playlist-info": "در حال دریافت اطلاعات فهرست پخش…",
+          "loading": "در حال بارگذاری…",
+          "playlist-has-only-one-song": "فهرست پخش فقط یک آیتم دارد، به طور مستقیم دانلود می‌شود",
+          "playlist-id-not-found": "شناسه فهرست پخش یافت نشد"
+        }
+      }
+    }
+  }
+}

src/i18n/resources/fil.json

@@ -201,6 +201,7 @@
       "restart": "I-restart ang App",
       "show": "Ipakita ang window",
       "tooltip": {
+        "default": "YouTube Music",
         "with-song-info": "YouTube Music: {{artist}} - {{title}}"
       }
     }
@@ -212,6 +213,9 @@
     },
     "adblocker": {
       "description": "I-block ang lahat ng ad at tracking",
+      "menu": {
+        "blocker": "Blocker"
+      },
       "name": "Pag-block ng Ad"
     },
     "album-actions": {
@@ -222,7 +226,10 @@
       "description": "Naglalapat ng dynamic na tema at visual effect batay sa color palette ng album",
       "menu": {
         "color-mix-ratio": {
-          "label": "Ratio ng paghahalo ng kulay"
+          "label": "Ratio ng paghahalo ng kulay",
+          "submenu": {
+            "percent": "{{ratio}}%"
+          }
         }
       },
       "name": "Tema ng Kulay ng Album"
@@ -261,6 +268,7 @@
           }
         },
         "smoothness-transition": {
+          "label": "Ayos ng Transisyon",
           "submenu": {
             "during": "Habang {{interpolationTime}} s"
           }
@@ -268,6 +276,50 @@
         "use-fullscreen": {
           "label": "Gumamit ng fullscreen"
         }
+      },
+      "name": "Ambient Mode"
+    },
+    "api-server": {
+      "description": "Nagdadagdag ng API Server upang kontrolin ang player",
+      "dialog": {
+        "request": {
+          "buttons": {
+            "allow": "Payagan",
+            "deny": "Tanggihan"
+          },
+          "message": "Payagan ang {{ID}} ({{origin}}) upang ma-access ang API?",
+          "title": "Awtorisasyon ng API request"
+        }
+      },
+      "menu": {
+        "auth-strategy": {
+          "label": "Estratehiya ng awtorisasyon",
+          "submenu": {
+            "auth-at-first": {
+              "label": "Mag-autorisa sa unang request"
+            },
+            "none": {
+              "label": "Walang awtorisasyon"
+            }
+          }
+        },
+        "hostname": {
+          "label": "Hostname"
+        },
+        "port": {
+          "label": "Port"
+        }
+      },
+      "name": "API Server [Beta]",
+      "prompt": {
+        "hostname": {
+          "label": "Itala ang hostname (tulad ng 0.0.0.0) para sa API server:",
+          "title": "Hostname"
+        },
+        "port": {
+          "label": "Itala ang port para sa API server:",
+          "title": "Port"
+        }
       }
     },
     "audio-compressor": {
@@ -301,7 +353,8 @@
       }
     },
     "compact-sidebar": {
-      "description": "Laging i-set ang sidebar sa compact mode"
+      "description": "Laging i-set ang sidebar sa compact mode",
+      "name": "Pinaliit na Sidebar"
     },
     "crossfade": {
       "description": "I-crossfade kada kanta",
@@ -425,7 +478,8 @@
       }
     },
     "lumiastream": {
-      "description": "Nabibigay suporta sa Lumia Stream"
+      "description": "Nabibigay suporta sa Lumia Stream",
+      "name": "Lumia Stream [Beta]"
     },
     "lyrics-genius": {
       "description": "Nagdaragdag ng suporta sa lyrics para sa karamihan ng kanta",
@@ -498,6 +552,7 @@
           }
         },
         "priority": "Prioridad ng Notification",
+        "toast-style": "Estilo ng toast",
         "unpause-notification": "Ipakita ang notification sa pag-unpause"
       },
       "name": "Mga Abiso"
@@ -581,7 +636,8 @@
         },
         "listenbrainz": {
           "token": {
-            "label": "Ilagay ang ListenBrainz user token:"
+            "label": "Ilagay ang ListenBrainz user token:",
+            "title": "Token ng ListenBrainz"
           }
         }
       }
@@ -695,7 +751,10 @@
       }
     },
     "visualizer": {
-      "description": "Idaragdag ng visualizer sa player"
+      "description": "Idaragdag ng visualizer sa player",
+      "menu": {
+        "visualizer-type": "Uri ng Visualizer"
+      }
     }
   }
 }

src/i18n/resources/he.json

@@ -2,13 +2,14 @@
   "common": {
     "console": {
       "plugins": {
-        "execute-failed": "נכשל ביצוע תוסף {{pluginName}}::{{contextName}}",
+        "execute-failed": "שגיאה בהרצת התוסף {{pluginName}}::{{contextName}}",
         "executed-at-ms": "התוסף {{pluginName}}:{{contextName}} בוצע ב {{ms}}ms",
         "initialize-failed": "טעינת התוסף \"{{pluginName}}\" נכשלה",
         "load-all": "טוען את כל התוספים",
-        "load-failed": "טעינת התוסף \"{{pluginName}}\" נכשלה",
+        "load-failed": "לא ניתן לטעון את התוסף {{pluginName}}",
         "loaded": "התוסף \"{{pluginName}}\" נטען",
-        "unload-failed": "הסרת התוסף \"{{pluginName}} נכשלה"
+        "unload-failed": "הסרת התוסף \"{{pluginName}} נכשלה",
+        "unloaded": "תוסף {{pluginName}} הורד"
       }
     }
   },
@@ -25,14 +26,28 @@
       "i18n": {
         "loaded": "i18n נטען"
       },
+      "second-instance": {
+        "receive-command": "התקבלה פקודה מעבר פרוטוקל: {{command}}"
+      },
       "theme": {
         "css-file-not-found": "קובץ ה-CSS \"{{cssFile}}\" לא קיים. מדלג"
       },
+      "unresponsive": {
+        "details": "שגיאה ללא תגובה\n{{error}}"
+      },
       "when-ready": {
         "clearing-cache-after-20s": "מוחק קבצי מתמון"
+      },
+      "window": {
+        "tried-to-render-offscreen": "ווינדוס ניסה להציג תוכן מחוץ למסך, גודל חלון={{windowSize}}, גודל מסך={{displaySize}}, מיקום={{position}}"
       }
     },
     "dialog": {
+      "hide-menu-enabled": {
+        "detail": "התפריט מוחבא, השתמש \"Alt\" על להציג אותו (או \"Esacpe\" אם משתמשים בתפריט בתוך האפליקציה)",
+        "message": "הסתרת התפריט מופעלת",
+        "title": "הסתרת התפריט הופעלה"
+      },
       "need-to-restart": {
         "buttons": {
           "later": "אחר כך",

src/i18n/resources/hu.json

@@ -372,6 +372,9 @@
       "backend": {
         "dialog": {
           "error": {
+            "buttons": {
+              "ok": "Rendben"
+            },
             "message": "Hoppá! Elnézést, a letöltés sikertelen volt…",
             "title": "A letöltés során hiba történt!"
           },
@@ -412,6 +415,7 @@
       "menu": {
         "choose-download-folder": "Letöltési mappa kiválasztása",
         "download-finish-settings": {
+          "label": "Letöltés befejezéskor",
           "prompt": {
             "last-percent": "x százalék után",
             "last-seconds": "Utolsó x másodperc"
@@ -425,7 +429,7 @@
           }
         },
         "download-playlist": "Lejátszási lista letöltése",
-        "presets": "Előbeállítások",
+        "presets": "Sablonok",
         "skip-existing": "Meglévő fájlok kihagyása"
       },
       "name": "Letöltő",
@@ -666,6 +670,18 @@
         "fetch": "⚠️ - Hiba történt a dalszövegek lekérése közben. Kérlek, próbáld újra később.",
         "not-found": "⚠️ - Nem található dalszöveg ehhez a zenéhez."
       },
+      "menu": {
+        "line-effect": {
+          "submenu": {
+            "scale": {
+              "label": "Mérték"
+            }
+          }
+        },
+        "precise-timing": {
+          "label": "Dalszöveg tökéletes szinkronizálása"
+        }
+      },
       "name": "Szinkronizált dalszövegek",
       "refetch-btn": {
         "fetching": "Lekérés folyamatban...",

src/i18n/resources/is.json

@@ -158,6 +158,14 @@
               },
               "remove-upgrade-button": "Fjarlægja uppgræðartakkan",
               "theme": {
+                "dialog": {
+                  "button": {
+                    "cancel": "Hætta við",
+                    "remove": "Fjarlægja"
+                  },
+                  "remove-theme": "Ertu viss um að þú viljir fjarlægja þetta sérsniðna þema?",
+                  "remove-theme-message": "Þetta mun fjarlægja sérsniðna þema"
+                },
                 "label": "Þema",
                 "submenu": {
                   "import-css-file": "Flytja inn sérsniðna CSS skrá",
@@ -199,6 +207,10 @@
     }
   },
   "plugins": {
+    "ad-speedup": {
+      "description": "Ef auglýsing spilar slökknar hún á hljóðinu og stillir spilunarhraðann á 16x",
+      "name": "Auglýsingahraða"
+    },
     "adblocker": {
       "description": "Lokaðu fyrir allar auglýsingar og rakningar úr kassanum",
       "menu": {
@@ -402,6 +414,21 @@
       "description": "Niðurhalar MP3 / upprunahljóði beint úr viðmótinu",
       "menu": {
         "choose-download-folder": "Veldu niðurhalsmöppu",
+        "download-finish-settings": {
+          "label": "Sækja þegar lokið",
+          "prompt": {
+            "last-percent": "Eftir x sekúndur",
+            "last-seconds": "Síðustu x sekúndur",
+            "title": "Stilla hvenær á að hlaða niður"
+          },
+          "submenu": {
+            "advanced": "Ítarlegri",
+            "enabled": "Virkt",
+            "mode": "Tímastilling",
+            "percent": "Hlutfall",
+            "seconds": "Sekúndur"
+          }
+        },
         "download-playlist": "Sækja spilunarlista",
         "presets": "Forstillingar",
         "skip-existing": "Slepptu núverandi skrám"
@@ -641,6 +668,10 @@
       "description": "Sleppur sjálfkrafa hlutum sem ekki eru tónlist, eins og inngangur/lok eða hlutar af tónlistarmyndböndum þar sem lag er ekki að spila",
       "name": "Styrktarblokk"
     },
+    "synced-lyrics": {
+      "description": "Veitir samstillta texta við lög, með því að nota veitur eins og LRClib.",
+      "name": "Samstilltur texti"
+    },
     "taskbar-mediacontrol": {
       "description": "Stjórnaðu spilun frá Windows verkefnastikunni þinni",
       "name": "Miðlunarstýringarverkefnastikunnar"

src/i18n/resources/it.json

@@ -674,6 +674,42 @@
         "fetch": "⚠️ - Si è verificato un errore nel recuperare il testo. Per favore riprova più tardi.",
         "not-found": "⚠️ - Nessun testo trovato per questa canzone."
       },
+      "menu": {
+        "default-text-string": {
+          "label": "Carattere predefinito tra i testi",
+          "tooltip": "Scegliere il carattere predefinito da utilizzare per l'intervallo tra i testi"
+        },
+        "line-effect": {
+          "label": "Effetto linea",
+          "submenu": {
+            "focus": {
+              "label": "Focus",
+              "tooltip": "Rendi bianca solo la riga corrente"
+            },
+            "offset": {
+              "label": "Offset",
+              "tooltip": "Offset a destra della riga corrente"
+            },
+            "scale": {
+              "label": "Ingrandimento",
+              "tooltip": "Ingrandisci la linea corrente"
+            }
+          },
+          "tooltip": "Scegli l'effetto da applicare alla linea corrente"
+        },
+        "precise-timing": {
+          "label": "Rendi i testi perfettamente sincronizzati",
+          "tooltip": "Calcola al millisecondo la visualizzazione della riga successiva (può avere un piccolo impatto sulle prestazioni)"
+        },
+        "show-lyrics-even-if-inexact": {
+          "label": "Mostra le lyric anche se incorrette",
+          "tooltip": "Se il brano non viene trovato, il plugin riprova con un'altra query di ricerca.\nIl risultato del secondo tentativo potrebbe non essere esatto."
+        },
+        "show-time-codes": {
+          "label": "Mostra time code",
+          "tooltip": "Mostra i codici temporali accanto ai testi"
+        }
+      },
       "name": "Testi sincronizzati",
       "refetch-btn": {
         "fetching": "Sto recuperando...",

src/i18n/resources/ko.json

@@ -279,6 +279,49 @@
       },
       "name": "앰비언트 모드"
     },
+    "api-server": {
+      "description": "플레이어를 제어하기 위한 API 서버를 추가합니다",
+      "dialog": {
+        "request": {
+          "buttons": {
+            "allow": "허용",
+            "deny": "거부"
+          },
+          "message": "{{ID}} ({{origin}})이(가) API에 액세스하도록 허용하시겠습니까?",
+          "title": "API 권한 요청"
+        }
+      },
+      "menu": {
+        "auth-strategy": {
+          "label": "인증 정책",
+          "submenu": {
+            "auth-at-first": {
+              "label": "첫 번째 요청 시 인증"
+            },
+            "none": {
+              "label": "인증 없음"
+            }
+          }
+        },
+        "hostname": {
+          "label": "호스트 명"
+        },
+        "port": {
+          "label": "포트"
+        }
+      },
+      "name": "API 서버 [베타]",
+      "prompt": {
+        "hostname": {
+          "label": "API 서버가 사용할 호스트 명(예: 0.0.0.0)을 입력하세요:",
+          "title": "호스트 명"
+        },
+        "port": {
+          "label": "API 서버가 사용할 포트를 입력하세요:",
+          "title": "포트"
+        }
+      }
+    },
     "audio-compressor": {
       "description": "오디오에 컴프레서를 적용합니다 (신호에서 가장 시끄러운 부분의 음량을 낮추고 가장 조용한 부분의 음량을 높임)",
       "name": "오디오 컴프레서"

src/i18n/resources/pl.json

@@ -668,6 +668,59 @@
       "description": "Automatycznie pomija fragmenty niebędące muzyką, takie jak wstęp/zakończenie lub fragmenty teledysków, w których utwór nie jest odtwarzany",
       "name": "Pomiń nieistotne fragmenty"
     },
+    "synced-lyrics": {
+      "description": "Dodaje zsynchronizowane napisy do utworów używając między innymi LRClib.",
+      "errors": {
+        "fetch": "⚠️ - Wystąpił błąd podczas pobierania tekstu utworu. Spróbuj ponownie później.",
+        "not-found": "⚠️ - Nie znaleziono napisów dla tego utworu."
+      },
+      "menu": {
+        "default-text-string": {
+          "label": "Standardowy znak luki",
+          "tooltip": "Wybierz domyślny znak, który ma być wyświetlany jako pauza między słowami"
+        },
+        "line-effect": {
+          "label": "Efekty linijki",
+          "submenu": {
+            "focus": {
+              "label": "Fokus",
+              "tooltip": "Spraw, aby tylko obecna linijka była biała"
+            },
+            "offset": {
+              "label": "Przesunięcie",
+              "tooltip": "Przesuń w prawo obecną linijkę"
+            },
+            "scale": {
+              "label": "Skala",
+              "tooltip": "Zmień skalę aktualnej linijki"
+            }
+          },
+          "tooltip": "Wybierz efekt, by zastosować go do aktualnej linijki"
+        },
+        "precise-timing": {
+          "label": "Zsynchronizuj tekst utworu do perfekcji",
+          "tooltip": "Wylicz czas wyświetlania następnej linijki co do milisekundy (może mieć mały wpływ na wydajność systemu)"
+        },
+        "show-lyrics-even-if-inexact": {
+          "label": "Pokaż teksty, mimo niezgodności",
+          "tooltip": "Jeżeli nie znaleziono tekstu piosenki z bazy danych, wtyczka spróbuje ponownie przez wyszukanie przybliżonej frazy.\nNależy jednak pamiętać, że następne próby mogą nie być trafne co do oryginału."
+        },
+        "show-time-codes": {
+          "label": "Pokaż znaczniki czasu",
+          "tooltip": "Pokaż znaczniki czasu obok linijek"
+        }
+      },
+      "name": "Napisy zsynchronizowane",
+      "refetch-btn": {
+        "fetching": "Pobieranie napisów...",
+        "normal": "Odśwież napisy"
+      },
+      "warnings": {
+        "duration-mismatch": "⚠️ - Napisy mogą nie być zsynchronizowane z powodu różnicy w czasie trwania utworu.",
+        "inexact": "⚠️ - Tekst utworu może się różnić od oryginału",
+        "instrumental": "⚠️ - To jest utwór instrumentalny"
+      }
+    },
     "taskbar-mediacontrol": {
       "description": "Steruj odtwarzaniem z paska zadań systemu Windows",
       "name": "Kontroler odtwarzania z paska zadań"

src/i18n/resources/pt-BR.json

@@ -0,0 +1,813 @@
+{
+  "common": {
+    "console": {
+      "plugins": {
+        "execute-failed": "Falha ao executar plugin {{pluginName}}::{{contextName}}",
+        "executed-at-ms": "Plugin {{pluginName}}::{{contextName}} executado em {{ms}} ms",
+        "initialize-failed": "Falha ao inicializar o plugin \"{{pluginName}}\"",
+        "load-all": "Carregando todos os plugins",
+        "load-failed": "Falha ao carregar o plugin \"{{pluginName}}\"",
+        "loaded": "Plugin \"{{pluginName}}\" carregado",
+        "unload-failed": "Falha ao descarregar o plugin \"{{pluginName}}\"",
+        "unloaded": "Plugin \"{{pluginName}}\" descarregado"
+      }
+    }
+  },
+  "language": {
+    "code": "pt-BR",
+    "local-name": "Português (Brasil)",
+    "name": "Portuguese (Brazil)"
+  },
+  "main": {
+    "console": {
+      "did-finish-load": {
+        "dev-tools": "Carregamento concluído. DevTools aberto"
+      },
+      "i18n": {
+        "loaded": "i18n carregado"
+      },
+      "second-instance": {
+        "receive-command": "Comando recebido pelo protocolo: \"{{command}}\""
+      },
+      "theme": {
+        "css-file-not-found": "Arquivo CSS \"{{cssFile}}\" não existe, ignorando"
+      },
+      "unresponsive": {
+        "details": "Erro de falta de resposta!\n{{error}}"
+      },
+      "when-ready": {
+        "clearing-cache-after-20s": "Limpando cache do aplicativo"
+      },
+      "window": {
+        "tried-to-render-offscreen": "A janela tentou renderizar fora da tela, tamanho da janela={{windowSize}}, tamanho da tela={{displaySize}}, posição={{position}}"
+      }
+    },
+    "dialog": {
+      "hide-menu-enabled": {
+        "detail": "O menu está oculto, use 'Alt' para mostrá-lo (ou 'Esc' ao usar o menu dentro do aplicativo)",
+        "message": "Ocultar menu está ativado",
+        "title": "Ocultar menu ativado"
+      },
+      "need-to-restart": {
+        "buttons": {
+          "later": "Depois",
+          "restart-now": "Reiniciar agora"
+        },
+        "detail": "O plugin \"{{pluginName}}\" requer uma reinicialização para entrar em vigor",
+        "message": "\"{{pluginName}}\" precisa reiniciar",
+        "title": "Necessário reiniciar"
+      },
+      "unresponsive": {
+        "buttons": {
+          "quit": "Fechar",
+          "relaunch": "Reiniciar",
+          "wait": "Aguardar"
+        },
+        "detail": "Lamentamos o inconveniente! Por favor, escolha o que fazer:",
+        "message": "O aplicativo não está respondendo",
+        "title": "Janela não responde"
+      },
+      "update-available": {
+        "buttons": {
+          "disable": "Desativar atualizações",
+          "download": "Baixar",
+          "ok": "OK"
+        },
+        "detail": "Uma versão mais recente está disponível em {{downloadLink}}",
+        "message": "Nova versão disponível",
+        "title": "Atualização disponível"
+      }
+    },
+    "menu": {
+      "about": "Sobre",
+      "navigation": {
+        "label": "Navegação",
+        "submenu": {
+          "copy-current-url": "Copiar URL atual",
+          "go-back": "Voltar",
+          "go-forward": "Avançar",
+          "quit": "Sair",
+          "restart": "Reiniciar aplicativo"
+        }
+      },
+      "options": {
+        "label": "Opções",
+        "submenu": {
+          "advanced-options": {
+            "label": "Opções avançadas",
+            "submenu": {
+              "auto-reset-app-cache": "Limpar cache ao iniciar aplicativo",
+              "disable-hardware-acceleration": "Desativar aceleração de hardware",
+              "edit-config-json": "Editar config.json",
+              "override-user-agent": "Substituir User-Agent",
+              "restart-on-config-changes": "Reiniciar ao alterar configurações",
+              "set-proxy": {
+                "label": "Definir proxy",
+                "prompt": {
+                  "label": "Digite o endereço do proxy: (deixe em branco para desativar)",
+                  "placeholder": "Exemplo: SOCKS5://127.0.0.1:9999",
+                  "title": "Definir proxy"
+                }
+              },
+              "toggle-dev-tools": "Alternar DevTools"
+            }
+          },
+          "always-on-top": "Sempre no topo",
+          "auto-update": "Atualização automática",
+          "hide-menu": {
+            "dialog": {
+              "message": "O menu ficará oculto na próxima inicialização, use [Alt] para exibi-lo (ou a tecla de crase [`] se estiver usando o menu do aplicativo)",
+              "title": "Ocultar menu ativado"
+            },
+            "label": "Ocultar menu"
+          },
+          "language": {
+            "dialog": {
+              "message": "O idioma será alterado depois de reiniciar",
+              "title": "Idioma alterado"
+            },
+            "label": "Idioma",
+            "submenu": {
+              "to-help-translate": "Quer ajudar a traduzir? Clique aqui"
+            }
+          },
+          "resume-on-start": "Continuar última música ao iniciar o aplicativo",
+          "single-instance-lock": "Bloqueio de instância única",
+          "start-at-login": "Iniciar com o sistema",
+          "starting-page": {
+            "label": "Página inicial",
+            "unset": "Limpar"
+          },
+          "tray": {
+            "label": "Área de Notificação",
+            "submenu": {
+              "disabled": "Desativado",
+              "enabled-and-hide-app": "Ativado e aplicativo oculto",
+              "enabled-and-show-app": "Ativado e mostrar aplicativo",
+              "play-pause-on-click": "Reproduzir/Pausar ao clicar"
+            }
+          },
+          "visual-tweaks": {
+            "label": "Ajustes visuais",
+            "submenu": {
+              "like-buttons": {
+                "default": "Padrão",
+                "force-show": "Forçar exibir",
+                "hide": "Ocultar",
+                "label": "Botões de 'Curtir'"
+              },
+              "remove-upgrade-button": "Remover botão de atualização",
+              "theme": {
+                "dialog": {
+                  "button": {
+                    "cancel": "Cancelar",
+                    "remove": "Remover"
+                  },
+                  "remove-theme": "Deseja realmente remover o tema personalizado?",
+                  "remove-theme-message": "Isto removerá o tema personalizado"
+                },
+                "label": "Tema",
+                "submenu": {
+                  "import-css-file": "Importar arquivo CSS personalizado",
+                  "no-theme": "Sem tema"
+                }
+              }
+            }
+          }
+        }
+      },
+      "plugins": {
+        "enabled": "Ativado",
+        "label": "Plugins",
+        "new": "NOVO"
+      },
+      "view": {
+        "label": "Visualização",
+        "submenu": {
+          "force-reload": "Forçar recarregar",
+          "reload": "Recarregar",
+          "reset-zoom": "Tamanho atual",
+          "toggle-fullscreen": "Alternar tela cheia",
+          "zoom-in": "Ampliar",
+          "zoom-out": "Reduzir"
+        }
+      }
+    },
+    "tray": {
+      "next": "Próximo",
+      "play-pause": "Reproduzir/Pausar",
+      "previous": "Anterior",
+      "quit": "Sair",
+      "restart": "Reiniciar aplicativo",
+      "show": "Mostrar janela",
+      "tooltip": {
+        "default": "YouTube Music",
+        "with-song-info": "YouTube Music: {{artist}} - {{title}}"
+      }
+    }
+  },
+  "plugins": {
+    "ad-speedup": {
+      "description": "Se um anúncio for reproduzido, ele silencia o áudio e define a velocidade de reprodução para 16x",
+      "name": "Acelerador de Anúncios"
+    },
+    "adblocker": {
+      "description": "Bloqueio de todos os anúncios e rastreamentos imediatamente",
+      "menu": {
+        "blocker": "Bloqueador"
+      },
+      "name": "Bloqueador de Anúncios"
+    },
+    "album-actions": {
+      "description": "Adiciona botões Remover Não curtir, Não curtir, Curtir e Remover Curtir para aplicar em todas as músicas em uma lista ou álbum",
+      "name": "Ações do álbum"
+    },
+    "album-color-theme": {
+      "description": "Aplica um tema dinâmico e efeitos visuais com base na paleta de cores do álbum",
+      "menu": {
+        "color-mix-ratio": {
+          "label": "Proporção de mistura de cores",
+          "submenu": {
+            "percent": "{{ratio}}%"
+          }
+        }
+      },
+      "name": "Tema da cor do álbum"
+    },
+    "ambient-mode": {
+      "description": "Aplica um efeito de iluminação projetando cores suaves do vídeo no fundo da tela",
+      "menu": {
+        "blur-amount": {
+          "label": "Quantidade de desfoque",
+          "submenu": {
+            "pixels": "{{blurAmount}} pixels"
+          }
+        },
+        "buffer": {
+          "label": "Buffer",
+          "submenu": {
+            "buffer": "{{buffer}}"
+          }
+        },
+        "opacity": {
+          "label": "Opacidade",
+          "submenu": {
+            "percent": "{{opacity}}%"
+          }
+        },
+        "quality": {
+          "label": "Qualidade",
+          "submenu": {
+            "pixels": "{{quality}} pixels"
+          }
+        },
+        "size": {
+          "label": "Tamanho",
+          "submenu": {
+            "percent": "{{size}}%"
+          }
+        },
+        "smoothness-transition": {
+          "label": "Transição suave",
+          "submenu": {
+            "during": "Durante {{interpolationTime}} s"
+          }
+        },
+        "use-fullscreen": {
+          "label": "Usando tela cheia"
+        }
+      },
+      "name": "Modo ambiente"
+    },
+    "api-server": {
+      "description": "Adiciona um servidor API para controlar o player",
+      "dialog": {
+        "request": {
+          "buttons": {
+            "allow": "Permitir",
+            "deny": "Negar"
+          },
+          "message": "Permitir que {{ID}} {{origin}} acesse o API?",
+          "title": "Pedido de autorização API"
+        }
+      },
+      "menu": {
+        "auth-strategy": {
+          "label": "Estratégia de autorização",
+          "submenu": {
+            "auth-at-first": {
+              "label": "Autorizar na primeira solicitação"
+            },
+            "none": {
+              "label": "Não autorizar"
+            }
+          }
+        },
+        "hostname": {
+          "label": "Nome do anfitrião"
+        },
+        "port": {
+          "label": "Porta"
+        }
+      },
+      "name": "Servidor API [Beta]",
+      "prompt": {
+        "hostname": {
+          "label": "Entre o nome do host (como 0.0.0.0) para o servidor API:",
+          "title": "Nome do anfitrião"
+        },
+        "port": {
+          "label": "Entre a porta do servidor API:",
+          "title": "Porta"
+        }
+      }
+    },
+    "audio-compressor": {
+      "description": "Aplicar compressão ao áudio (reduz o volume das partes mais altas e aumenta o volume das partes mais baixas)",
+      "name": "Compressor de áudio"
+    },
+    "blur-nav-bar": {
+      "description": "Torna a barra de navegação transparente e desfocada",
+      "name": "Desfocar barra de navegação"
+    },
+    "bypass-age-restrictions": {
+      "description": "Pular a verificação de idade do YouTube",
+      "name": "Ignorar restrições de idade"
+    },
+    "captions-selector": {
+      "description": "Seletor de legendas para faixas de áudio do YouTube Music",
+      "menu": {
+        "autoload": "Selecionar automaticamente a última legenda usada",
+        "disable-captions": "Sem legendas por padrão"
+      },
+      "name": "Seletor de legendas",
+      "prompt": {
+        "selector": {
+          "label": "Idioma atual da legenda: {{language}}",
+          "none": "Nenhum",
+          "title": "Selecionar idioma da legenda"
+        }
+      },
+      "templates": {
+        "title": "Abrir seletor de legendas"
+      }
+    },
+    "compact-sidebar": {
+      "description": "Sempre definir a barra lateral no modo compacto",
+      "name": "Barra lateral compacta"
+    },
+    "crossfade": {
+      "description": "Crossfade entre músicas",
+      "menu": {
+        "advanced": "Avançado"
+      },
+      "name": "Crossfade [Beta]",
+      "prompt": {
+        "options": {
+          "multi-input": {
+            "fade-in-duration": "Duração do fade (ms)",
+            "fade-out-duration": "Duração do fade out (ms)",
+            "fade-scaling": {
+              "label": "Escala do fade",
+              "linear": "Linear",
+              "logarithmic": "Logarítmico"
+            },
+            "seconds-before-end": "Crossfade N segundos antes do fim"
+          },
+          "title": "Opções de crossfade"
+        }
+      }
+    },
+    "disable-autoplay": {
+      "description": "Faz a música começar no modo \"pausado\"",
+      "menu": {
+        "apply-once": "Aplicar somente ao iniciar"
+      },
+      "name": "Desativar reprodução automática"
+    },
+    "discord": {
+      "backend": {
+        "already-connected": "Tentativa de conectar-se com conexão ativa",
+        "connected": "Conectado no Discord",
+        "disconnected": "Desconectado do Discord"
+      },
+      "description": "Mostre aos seus amigos o que você ouve com Rich Presence",
+      "menu": {
+        "auto-reconnect": "Reconexão automática",
+        "clear-activity": "Limpar atividades",
+        "clear-activity-after-timeout": "Limpar atividades após tempo limite",
+        "connected": "Conectado",
+        "disconnected": "Desconectado",
+        "hide-duration-left": "Ocultar duração restante",
+        "hide-github-button": "Ocultar botão do GitHub",
+        "play-on-youtube-music": "Reproduzir no YouTube Music",
+        "set-inactivity-timeout": "Definir tempo limite de inatividade"
+      },
+      "name": "Rich Presence do Discord",
+      "prompt": {
+        "set-inactivity-timeout": {
+          "label": "Digite o tempo de inatividade em segundos:",
+          "title": "Definir tempo limite de inatividade"
+        }
+      }
+    },
+    "downloader": {
+      "backend": {
+        "dialog": {
+          "error": {
+            "buttons": {
+              "ok": "OK"
+            },
+            "message": "Ah! Desculpe, o download falhou…",
+            "title": "Erro no download!"
+          },
+          "start-download-playlist": {
+            "buttons": {
+              "ok": "OK"
+            },
+            "detail": "({{playlistSize}} músicas)",
+            "message": "Baixando lista de reprodução {{playlistTitle}}",
+            "title": "Download iniciado"
+          }
+        },
+        "feedback": {
+          "conversion-progress": "Convertendo: {{percent}}%",
+          "converting": "Convertendo…",
+          "done": "Concluído: {{filePath}}",
+          "download-info": "Baixando {{artist}} - {{title}} [{{videoId}}",
+          "download-progress": "Download: {{percent}}%",
+          "downloading": "Baixando…",
+          "downloading-counter": "Baixando {{current}}/{{total}}…",
+          "downloading-playlist": "Baixando lista de reprodução \"{{playlistTitle}}\" - {{playlistSize}} músicas ({{playlistId}})",
+          "error-while-downloading": "Erro ao baixar \"{{author}} - {{title}}\": {{error}}",
+          "folder-already-exists": "A pasta {{playlistFolder}} já existe",
+          "getting-playlist-info": "Obtendo informações da playlist…",
+          "loading": "Carregando…",
+          "playlist-has-only-one-song": "Playlist possui apenas um item, baixando diretamente",
+          "playlist-id-not-found": "Nenhum playlist ID encontrado",
+          "playlist-is-empty": "Playlist está vazia",
+          "playlist-is-mix-or-private": "Erro ao obter informações da playlist: verifique se não é uma playlist privada ou “”Mixada para você”\n\n{{error}}",
+          "preparing-file": "Preparando arquivo…",
+          "saving": "Salvando…",
+          "trying-to-get-playlist-id": "Tentando obter playlist ID: {{playlistId}}",
+          "video-id-not-found": "Vídeo não encontrado",
+          "writing-id3": "Salvando tags ID3…"
+        }
+      },
+      "description": "Faça download do MP3 / fonte de áudio diretamente da interface",
+      "menu": {
+        "choose-download-folder": "Escolha a pasta de download",
+        "download-finish-settings": {
+          "label": "Baixar ao finalizar",
+          "prompt": {
+            "last-percent": "Após x %",
+            "last-seconds": "Últimos x segundos",
+            "title": "Configurar quando baixar"
+          },
+          "submenu": {
+            "advanced": "Avançado",
+            "enabled": "Ativado",
+            "mode": "Modo de tempo",
+            "percent": "Porcento",
+            "seconds": "Segundos"
+          }
+        },
+        "download-playlist": "Baixar playlist",
+        "presets": "Predefinições",
+        "skip-existing": "Pular arquivos existentes"
+      },
+      "name": "Downloader",
+      "renderer": {
+        "can-not-update-progress": "Não é possível atualizar o progresso"
+      },
+      "templates": {
+        "button": "Baixar"
+      }
+    },
+    "exponential-volume": {
+      "description": "Torna o controle deslizante de volume exponencial para que seja mais fácil selecionar volumes mais baixos.",
+      "name": "Volume Exponencial"
+    },
+    "in-app-menu": {
+      "description": "Dá às barras de menu uma aparência elegante, escura ou com a cor do álbum",
+      "menu": {
+        "hide-dom-window-controls": "Ocultar controles da janela DOM"
+      },
+      "name": "Menu no aplicativo"
+    },
+    "lumiastream": {
+      "description": "Adiciona suporte ao Lumia Stream",
+      "name": "Lumia Stream [Beta]"
+    },
+    "lyrics-genius": {
+      "description": "Adiciona suporte a letras para a maioria das músicas",
+      "menu": {
+        "romanized-lyrics": "Letras Romanizadas"
+      },
+      "name": "Letras Genius",
+      "renderer": {
+        "fetched-lyrics": "Letras buscadas por Genius"
+      }
+    },
+    "music-together": {
+      "description": "Compartilhe uma playlist com outras pessoas. Quando o anfitrião toca uma música, todos os outros ouvirão",
+      "dialog": {
+        "enter-host": "Insira o ID do host"
+      },
+      "internal": {
+        "save": "Salvar",
+        "track-source": "Fonte da Faixa",
+        "unknown-user": "Usuário Desconhecido"
+      },
+      "menu": {
+        "click-to-copy-id": "Copiar ID do host",
+        "close": "Fechar Music Together",
+        "connected-users": "Usuários Conectados",
+        "disconnect": "Desconectar Music Together",
+        "empty-user": "Nenhum usuário conectado",
+        "host": "Anfitrião do Music Together",
+        "join": "Entrar no Music Together",
+        "permission": {
+          "all": "Permitir que os convidados controlem a lista de reprodução e o player",
+          "host-only": "Somente o host pode controlar a lista de reprodução e o player",
+          "playlist": "Permitir que os convidados controlem a lista de reprodução"
+        },
+        "set-permission": "Mudar Permissões de Controle",
+        "status": {
+          "disconnected": "Desconectado",
+          "guest": "Conectado como convidado",
+          "host": "Conectado como Anfitrião"
+        }
+      },
+      "name": "Music Together [Beta]",
+      "toast": {
+        "add-song-failed": "Falha ao adicionar música",
+        "closed": "Music Together fechado",
+        "disconnected": "Music Together desconectado",
+        "host-failed": "Falha ao hospedar o Music Together",
+        "id-copied": "ID do anfitrião copiado para a área de transferência",
+        "id-copy-failed": "Falha ao copiar o ID do anfitrião para a área de transferência",
+        "join-failed": "Falha ao ingressar no Music Together",
+        "joined": "Entrou no Music Together",
+        "permission-changed": "A permissão do Music Together foi alterada para \"{{permission}}\"",
+        "remove-song-failed": "Falha ao remover música",
+        "user-connected": "{{name}} juntou-se ao Music Together",
+        "user-disconnected": "{{name}} saiu do Music Together"
+      }
+    },
+    "navigation": {
+      "description": "Setas de navegação para avançar/retornar diretamente integradas na interface, como no seu navegador favorito",
+      "name": "Navegação"
+    },
+    "no-google-login": {
+      "description": "Remova os botões e links de login do Google da interface",
+      "name": "Sem login do Google"
+    },
+    "notifications": {
+      "description": "Exibir uma notificação quando uma música começar a tocar (notificações interativas estão disponíveis no Windows)",
+      "menu": {
+        "interactive": "Notificações interativas",
+        "interactive-settings": {
+          "label": "Configurações interativas",
+          "submenu": {
+            "hide-button-text": "Ocultar texto do botão",
+            "refresh-on-play-pause": "Atualizar ao Reproduzir/Pausar",
+            "tray-controls": "Abrir/Fechar ao clicar na área de notificação"
+          }
+        },
+        "priority": "Prioridade da notificação",
+        "toast-style": "Estilo de alerta",
+        "unpause-notification": "Mostrar notificação ao despausar"
+      },
+      "name": "Notificações"
+    },
+    "picture-in-picture": {
+      "description": "Permite alternar o aplicativo para o modo picture-in-picture",
+      "menu": {
+        "always-on-top": "Sempre no topo",
+        "hotkey": {
+          "label": "Tecla de atalho",
+          "prompt": {
+            "keybind-options": {
+              "hotkey": "Tecla de atalho"
+            },
+            "label": "Escolha uma tecla de atalho para alternar entre picture-in-picture",
+            "title": "Atalho do picture-in-picture"
+          }
+        },
+        "save-window-position": "Salvar posição da janela",
+        "save-window-size": "Salvar tamanho da janela",
+        "use-native-pip": "Usar PiP nativo do navegador"
+      },
+      "name": "Picture-in-picture",
+      "templates": {
+        "button": "Picture-in-picture"
+      }
+    },
+    "playback-speed": {
+      "description": "Ouça rápido, ouça devagar! Adiciona um controle deslizante que controla a velocidade da música",
+      "name": "Velocidade de reprodução",
+      "templates": {
+        "button": "Velocidade"
+      }
+    },
+    "precise-volume": {
+      "description": "Controle o volume com precisão usando a roda do mouse/teclas de atalho, com um HUD personalizado e etapas de volume personalizáveis",
+      "menu": {
+        "arrows-shortcuts": "Controles de teclas de seta locais",
+        "custom-volume-steps": "Definir etapas de volume personalizadas",
+        "global-shortcuts": "Teclas de atalho globais"
+      },
+      "name": "Volume preciso",
+      "prompt": {
+        "global-shortcuts": {
+          "keybind-options": {
+            "decrease": "Diminuir volume",
+            "increase": "Aumentar volume"
+          },
+          "label": "Selecione as teclas de atalho global do volume:",
+          "title": "Teclas de atalho global de volume"
+        },
+        "volume-steps": {
+          "label": "Escolha as etapas de aumento/diminuição do volume",
+          "title": "Fases de volume"
+        }
+      }
+    },
+    "quality-changer": {
+      "backend": {
+        "dialog": {
+          "quality-changer": {
+            "detail": "Qualidade atual: {{quality}}",
+            "message": "Escolher qualidade do vídeo:",
+            "title": "Escolher qualidade do vídeo"
+          }
+        }
+      },
+      "description": "Permite alterar a qualidade do vídeo com um botão na sobreposição de vídeo",
+      "name": "Alterador de qualidade do vídeo"
+    },
+    "scrobbler": {
+      "description": "Adicionar suporte para scrobbling (last.fm, Listenbrainz, etc.)",
+      "dialog": {
+        "lastfm": {
+          "auth-failed": {
+            "message": "Falha ao autenticar com Last.fm\nOcultar o pop-up até a próxima reinicialização.",
+            "title": "Falha na autenticação"
+          }
+        }
+      },
+      "menu": {
+        "lastfm": {
+          "api-settings": "Configurações da API do Last.fm"
+        },
+        "listenbrainz": {
+          "token": "Insira o token de usuário ListenBrainz"
+        },
+        "scrobble-other-media": "Scrobble outras mídias"
+      },
+      "name": "Scrobbler",
+      "prompt": {
+        "lastfm": {
+          "api-key": "Chave de API do Last.fm",
+          "api-secret": "Chave secreta da API do Last.fm"
+        },
+        "listenbrainz": {
+          "token": {
+            "label": "Insira seu token de usuário do ListenBrainz:",
+            "title": "ListenBrainz token"
+          }
+        }
+      }
+    },
+    "shortcuts": {
+      "description": "Permite definir teclas de atalho globais para reprodução (reproduzir/pausar/próximo/anterior) e desativar o OSD de mídia substituindo as teclas de mídia, ativando Ctrl/CMD + F para pesquisar, ativando o suporte Linux MPRIS para teclas de mídia e teclas de atalho personalizadas para usuários avançados",
+      "menu": {
+        "override-media-keys": "Substituir chaves de multimédia",
+        "set-keybinds": "Definir controles globais de música"
+      },
+      "name": "Atalhos (& MPRIS)",
+      "prompt": {
+        "keybind": {
+          "keybind-options": {
+            "next": "Próximo",
+            "play-pause": "Reproduzir / Pausar",
+            "previous": "Anterior"
+          },
+          "label": "Escolha atalhos de teclado globais para controle de músicas:",
+          "title": "Atalhos de teclado global"
+        }
+      }
+    },
+    "skip-disliked-songs": {
+      "description": "Ignora músicas marcadas com \"não gostei\"",
+      "name": "Pular músicas marcadas com \"não gostei\""
+    },
+    "skip-silences": {
+      "description": "Pular automaticamente seções de silêncio em músicas",
+      "name": "Pular silêncios"
+    },
+    "sponsorblock": {
+      "description": "Pula automaticamente partes não musicais, como introdução/finalização ou partes de videoclipes onde a música não está tocando",
+      "name": "SponsorBlock [Bloquear patrocínios]"
+    },
+    "synced-lyrics": {
+      "description": "Fornece letras sincronizadas para músicas, usando provedores como LRClib.",
+      "errors": {
+        "fetch": "⚠️ - Ocorreu um erro ao buscar a letra. Tente novamente mais tarde.",
+        "not-found": "⚠️ - Nenhuma letra encontrada para esta música."
+      },
+      "menu": {
+        "default-text-string": {
+          "label": "Caractere padrão entre letras",
+          "tooltip": "Escolha o caractere padrão a ser usado para o intervalo entre as letras"
+        },
+        "line-effect": {
+          "label": "Efeito de linha",
+          "submenu": {
+            "focus": {
+              "label": "Foco",
+              "tooltip": "Deixe apenas a linha atual branca"
+            },
+            "offset": {
+              "label": "Deslocar",
+              "tooltip": "Deslocamento à direita da linha atual"
+            },
+            "scale": {
+              "label": "Aumentar",
+              "tooltip": "Aumentar a linha atual"
+            }
+          },
+          "tooltip": "Escolha o efeito a ser aplicado à linha atual"
+        },
+        "precise-timing": {
+          "label": "Deixa as letras perfeitamente sincronizadas",
+          "tooltip": "Calcular até o milissegundo a exibição da próxima linha (pode ter um pequeno impacto no desempenho)"
+        },
+        "show-lyrics-even-if-inexact": {
+          "label": "Mostrar letras mesmo que não sejam exatas",
+          "tooltip": "Se a música não for encontrada, o plugin tenta novamente com uma consulta de pesquisa diferente.\nO resultado da segunda tentativa pode não ser exato."
+        },
+        "show-time-codes": {
+          "label": "Mostrar códigos de tempo",
+          "tooltip": "Mostrar os códigos de tempo ao lado das letras"
+        }
+      },
+      "name": "Letras sincronizadas",
+      "refetch-btn": {
+        "fetching": "Buscando...",
+        "normal": "Buscar letras novamente"
+      },
+      "warnings": {
+        "duration-mismatch": "⚠️ - A letra pode estar dessincronizada devido a uma incompatibilidade de duração.",
+        "inexact": "⚠️ - A letra desta música pode não ser exata",
+        "instrumental": "⚠️ - Esta é uma música instrumental"
+      }
+    },
+    "taskbar-mediacontrol": {
+      "description": "Controle a reprodução na barra de tarefas do Windows",
+      "name": "Controle de mídia da barra de tarefas"
+    },
+    "touchbar": {
+      "description": "Adiciona um widget TouchBar para usuários do macOS",
+      "name": "TouchBar"
+    },
+    "tuna-obs": {
+      "description": "Integração com o plugin Tuna do OBS",
+      "name": "Tuna OBS"
+    },
+    "video-toggle": {
+      "description": "Adiciona um botão para alternar entre o modo Vídeo/Música. Também é possível remover opcionalmente toda a aba de vídeo",
+      "menu": {
+        "align": {
+          "label": "Alinhamento",
+          "submenu": {
+            "left": "Esquerda",
+            "middle": "Meio",
+            "right": "Direita"
+          }
+        },
+        "force-hide": "Forçar remoção da aba de vídeo",
+        "mode": {
+          "label": "Modo",
+          "submenu": {
+            "custom": "Alternância personalizada",
+            "disabled": "Desativado",
+            "native": "Alternância nativa"
+          }
+        }
+      },
+      "name": "Alternar vídeo",
+      "templates": {
+        "button": "Música"
+      }
+    },
+    "visualizer": {
+      "description": "Adiciona um visualizador ao player",
+      "menu": {
+        "visualizer-type": "Tipo de visualizador"
+      },
+      "name": "Visualizador"
+    }
+  }
+}

src/i18n/resources/uk.json

@@ -410,6 +410,17 @@
       "description": "Завантажує MP3 / джерело аудіо безпосередньо з інтерфейсу",
       "menu": {
         "choose-download-folder": "Оберіть папку для завантаження",
+        "download-finish-settings": {
+          "prompt": {
+            "last-percent": "Після Х відсотків",
+            "last-seconds": "Останні Х секунд"
+          },
+          "submenu": {
+            "enabled": "Увімкнено",
+            "percent": "Відсотків",
+            "seconds": "Секунди"
+          }
+        },
         "download-playlist": "Завантажити плейлист",
         "presets": "Попередні налаштування",
         "skip-existing": "Пропустити наявні файли"
@@ -649,6 +660,53 @@
       "description": "Автоматично пропускати немузичні частини, такі як вступ/закінчення або частини музичних відеороликів, де не відтворюється музика",
       "name": "SponsorBlock"
     },
+    "synced-lyrics": {
+      "errors": {
+        "fetch": "⚠️ - При завантаженні тексту сталась помилка. Спробуйте ще раз пізніше.",
+        "not-found": "⚠️ - До цієї пісні текст не знайдено."
+      },
+      "menu": {
+        "default-text-string": {
+          "label": "Символ за замовчуванням між текстами пісень",
+          "tooltip": "Виберіть символ за замовчуванням, який буде використовуватися для проміжку між текстами пісень"
+        },
+        "line-effect": {
+          "label": "Лінійний ефект",
+          "submenu": {
+            "focus": {
+              "label": "Зосереджитись",
+              "tooltip": "Зробити білим лише поточний рядок"
+            },
+            "scale": {
+              "label": "Масштабувати",
+              "tooltip": "Масштабуваты поточну лінію"
+            }
+          },
+          "tooltip": "Виберіть ефект, який потрібно застосувати до поточної лінії"
+        },
+        "precise-timing": {
+          "label": "Зробити текст пісні ідеально синхронізованим"
+        },
+        "show-lyrics-even-if-inexact": {
+          "label": "Показувати текст пісні, навіть якщо він неточний",
+          "tooltip": "Якщо пісня не знайдена, плагін повторює спробу з іншим пошуковим запитом.\nРезультат з другої спроби може бути не точним."
+        },
+        "show-time-codes": {
+          "label": "Показувати часові марки",
+          "tooltip": "Показує часові маркы поруч із текстом пісні"
+        }
+      },
+      "name": "Синхронізовані тексти",
+      "refetch-btn": {
+        "fetching": "Отримання...",
+        "normal": "Перезавантажити текст"
+      },
+      "warnings": {
+        "duration-mismatch": "⚠️ - Тексти цієї пісні можуть бути не синхронізовані через не співпадіння довжини пісні.",
+        "inexact": "⚠️ - Текст цієї пісні може не співпадати",
+        "instrumental": "⚠️ - Це інструментал"
+      }
+    },
     "taskbar-mediacontrol": {
       "description": "Керування відтворенням з панелі завдань Windows",
       "name": "Керування медіа на панелі завдань"

src/index.ts

@@ -11,6 +11,8 @@ import {
   shell,
   dialog,
   ipcMain,
+  protocol,
+  type BrowserWindowConstructorOptions,
 } from 'electron';
 import enhanceWebRequest, {
   BetterSession,
@@ -56,7 +58,6 @@ import { loadI18n, setLanguage, t } from '@/i18n';
 import ErrorHtmlAsset from '@assets/error.html?asset';
 
 import type { PluginConfig } from '@/types/plugins';
-import BrowserWindowConstructorOptions = Electron.BrowserWindowConstructorOptions;
 
 if (!is.macOS()) {
   delete allPlugins['touchbar'];
@@ -83,6 +84,34 @@ if (!gotTheLock) {
   app.exit();
 }
 
+protocol.registerSchemesAsPrivileged([
+  {
+    scheme: 'http',
+    privileges: {
+      standard: true,
+      bypassCSP: true,
+      allowServiceWorkers: true,
+      supportFetchAPI: true,
+      corsEnabled: true,
+      stream: true,
+      codeCache: true,
+    },
+  },
+  {
+    scheme: 'https',
+    privileges: {
+      standard: true,
+      bypassCSP: true,
+      allowServiceWorkers: true,
+      supportFetchAPI: true,
+      corsEnabled: true,
+      stream: true,
+      codeCache: true,
+    },
+  },
+  { scheme: 'mailto', privileges: { standard: true } },
+]);
+
 // Ozone platform hint: Required for Wayland support
 app.commandLine.appendSwitch('ozone-platform-hint', 'auto');
 // SharedArrayBuffer: Required for downloader (@ffmpeg/core-mt)
@@ -334,7 +363,9 @@ async function createMainWindow() {
     const display = screen.getDisplayNearestPoint(windowPosition);
     const primaryDisplay = screen.getPrimaryDisplay();
 
-    const scaleFactor = is.windows() ? primaryDisplay.scaleFactor / display.scaleFactor : 1;
+    const scaleFactor = is.windows()
+      ? primaryDisplay.scaleFactor / display.scaleFactor
+      : 1;
     const scaledWidth = Math.floor(windowSize.width * scaleFactor);
     const scaledHeight = Math.floor(windowSize.height * scaleFactor);
 
@@ -342,10 +373,10 @@ async function createMainWindow() {
     const scaledY = windowY;
 
     if (
-      scaledX + (scaledWidth / 2) < display.bounds.x - 8 || // Left
-      scaledX + (scaledWidth / 2) > display.bounds.x + display.bounds.width || // Right
+      scaledX + scaledWidth / 2 < display.bounds.x - 8 || // Left
+      scaledX + scaledWidth / 2 > display.bounds.x + display.bounds.width || // Right
       scaledY < display.bounds.y - 8 || // Top
-      scaledY + (scaledHeight / 2) > display.bounds.y + display.bounds.height // Bottom
+      scaledY + scaledHeight / 2 > display.bounds.y + display.bounds.height // Bottom
     ) {
       // Window is offscreen
       if (is.dev()) {
@@ -442,7 +473,7 @@ async function createMainWindow() {
         ...defaultTitleBarOverlayOptions,
         height: Math.floor(
           defaultTitleBarOverlayOptions.height! *
-          win.webContents.getZoomFactor(),
+            win.webContents.getZoomFactor(),
         ),
       });
     }
@@ -455,7 +486,7 @@ async function createMainWindow() {
       event.preventDefault();
 
       win.webContents.loadURL(
-        'https://accounts.google.com/ServiceLogin?ltmpl=music&service=youtube&continue=https%3A%2F%2Fwww.youtube.com%2Fsignin%3Faction_handle_signin%3Dtrue%26next%3Dhttps%253A%252F%252Fmusic.youtube.com%252F'
+        'https://accounts.google.com/ServiceLogin?ltmpl=music&service=youtube&continue=https%3A%2F%2Fwww.youtube.com%2Fsignin%3Faction_handle_signin%3Dtrue%26next%3Dhttps%253A%252F%252Fmusic.youtube.com%252F',
       );
     }
   });
@@ -479,8 +510,8 @@ app.once('browser-window-created', (_event, win) => {
     const updatedUserAgent = is.macOS()
       ? userAgents.mac
       : is.windows()
-      ? userAgents.windows
-      : userAgents.linux;
+        ? userAgents.windows
+        : userAgents.linux;
 
     win.webContents.userAgent = updatedUserAgent;
     app.userAgentFallback = updatedUserAgent;
@@ -529,7 +560,11 @@ app.once('browser-window-created', (_event, win) => {
         console.log(log);
       }
 
-      if (errorCode !== -3) {
+      if (
+        errorCode !== -3 &&
+        // Workaround for #2435
+        !new URL(validatedURL).hostname.includes('doubleclick.net')
+      ) {
         // -3 is a false positive
         win.webContents.send('log', log);
         win.webContents.loadFile(ErrorHtmlAsset);
@@ -618,6 +653,7 @@ app.whenReady().then(async () => {
           shortcutDetails.target !== appLocation ||
           shortcutDetails.appUserModelId !== appID
         ) {
+          // eslint-disable-next-line @typescript-eslint/only-throw-error
           throw 'needUpdate';
         }
       } catch (error) {
@@ -641,7 +677,9 @@ app.whenReady().then(async () => {
     // In dev mode, get string from process.env.VITE_DEV_SERVER_URL, else use fs.readFileSync
     if (is.dev() && process.env.ELECTRON_RENDERER_URL) {
       // HACK: to make vite work with electron renderer (supports hot reload)
-      event.returnValue = [null, `
+      event.returnValue = [
+        null,
+        `
         console.log('${LoggerPrefix}', 'Loading vite from dev server');
         (async () => {
           await new Promise((resolve) => {
@@ -662,7 +700,8 @@ app.whenReady().then(async () => {
           document.body.appendChild(rendererScript);
         })();
         0
-      `];
+      `,
+      ];
     } else {
       const rendererPath = path.join(__dirname, '..', 'renderer');
       const indexHTML = parse(
@@ -674,7 +713,10 @@ app.whenReady().then(async () => {
         scriptSrc.getAttribute('src')!,
       );
       const scriptString = fs.readFileSync(scriptPath, 'utf-8');
-      event.returnValue = [url.pathToFileURL(scriptPath).toString(), scriptString + ';0'];
+      event.returnValue = [
+        url.pathToFileURL(scriptPath).toString(),
+        scriptString + ';0',
+      ];
     }
   });
 

src/loader/main.ts

@@ -34,11 +34,12 @@ const createContext = (
       win.webContents.send(event, ...args);
     },
     handle: (event: string, listener: CallableFunction) => {
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-return,@typescript-eslint/no-unsafe-call
       ipcMain.handle(event, (_, ...args: unknown[]) => listener(...args));
     },
     on: (event: string, listener: CallableFunction) => {
       ipcMain.on(event, (_, ...args: unknown[]) => {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-call
         listener(...args);
       });
     },
@@ -75,11 +76,11 @@ export const forceUnloadMainPlugin = async (
       );
       return;
     } else {
-      console.log(
-        LoggerPrefix,
-        t('common.console.plugins.unload-failed', { pluginName: id }),
-      );
-      return Promise.reject();
+      const message = t('common.console.plugins.unload-failed', {
+        pluginName: id,
+      });
+      console.log(LoggerPrefix, message);
+      return Promise.reject(new Error(message));
     }
   } catch (err) {
     console.error(
@@ -87,7 +88,7 @@ export const forceUnloadMainPlugin = async (
       t('common.console.plugins.unload-failed', { pluginName: id }),
     );
     console.trace(err);
-    return Promise.reject(err);
+    return Promise.reject(err as Error);
   }
 };
 
@@ -111,11 +112,11 @@ export const forceLoadMainPlugin = async (
     ) {
       loadedPluginMap[id] = plugin;
     } else {
-      console.log(
-        LoggerPrefix,
-        t('common.console.plugins.load-failed', { pluginName: id }),
-      );
-      return Promise.reject();
+      const message = t('common.console.plugins.load-failed', {
+        pluginName: id,
+      });
+      console.log(LoggerPrefix, message);
+      return Promise.reject(new Error(message));
     }
   } catch (err) {
     console.error(
@@ -123,7 +124,7 @@ export const forceLoadMainPlugin = async (
       t('common.console.plugins.initialize-failed', { pluginName: id }),
     );
     console.trace(err);
-    return Promise.reject(err);
+    return Promise.reject(err as Error);
   }
 };
 

src/loader/renderer.ts

@@ -18,7 +18,8 @@ const loadedPluginMap: Record<
 export const createContext = <Config extends PluginConfig>(
   id: string,
 ): RendererContext<Config> => ({
-  getConfig: async () => window.ipcRenderer.invoke('ytmd:get-config', id),
+  getConfig: async () =>
+    window.ipcRenderer.invoke('ytmd:get-config', id) as Promise<Config>,
   setConfig: async (newConfig) => {
     await window.ipcRenderer.invoke('ytmd:set-config', id, newConfig);
   },
@@ -30,6 +31,7 @@ export const createContext = <Config extends PluginConfig>(
       window.ipcRenderer.invoke(event, ...args),
     on: (event: string, listener: CallableFunction) => {
       window.ipcRenderer.on(event, (_, ...args: unknown[]) => {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-call
         listener(...args);
       });
     },

src/menu.ts

@@ -1,5 +1,13 @@
 import is from 'electron-is';
-import { app, BrowserWindow, clipboard, dialog, Menu, MenuItem, shell, } from 'electron';
+import {
+  app,
+  BrowserWindow,
+  clipboard,
+  dialog,
+  Menu,
+  MenuItem,
+  shell,
+} from 'electron';
 import prompt from 'custom-electron-prompt';
 import { satisfies } from 'semver';
 
@@ -68,12 +76,21 @@ export const mainMenuTemplate = async (
       const plugin = allPlugins[id];
       const pluginLabel = plugin?.name?.() ?? id;
       const pluginDescription = plugin?.description?.() ?? undefined;
-      const isNew = plugin?.addedVersion ? satisfies(packageJson.version, plugin.addedVersion) : false;
+      const isNew = plugin?.addedVersion
+        ? satisfies(packageJson.version, plugin.addedVersion)
+        : false;
 
       if (!config.plugins.isEnabled(id)) {
         return [
           id,
-          pluginEnabledMenu(id, pluginLabel, pluginDescription, isNew, true, innerRefreshMenu),
+          pluginEnabledMenu(
+            id,
+            pluginLabel,
+            pluginDescription,
+            isNew,
+            true,
+            innerRefreshMenu,
+          ),
         ] as const;
       }
 
@@ -115,9 +132,18 @@ export const mainMenuTemplate = async (
       const plugin = allPlugins[id];
       const pluginLabel = plugin?.name?.() ?? id;
       const pluginDescription = plugin?.description?.() ?? undefined;
-      const isNew = plugin?.addedVersion ? satisfies(packageJson.version, plugin.addedVersion) : false;
+      const isNew = plugin?.addedVersion
+        ? satisfies(packageJson.version, plugin.addedVersion)
+        : false;
 
-      return pluginEnabledMenu(id, pluginLabel, pluginDescription, isNew, true, innerRefreshMenu);
+      return pluginEnabledMenu(
+        id,
+        pluginLabel,
+        pluginDescription,
+        isNew,
+        true,
+        innerRefreshMenu,
+      );
     });
 
   const availableLanguages = Object.keys(languageResources);
@@ -229,12 +255,12 @@ export const mainMenuTemplate = async (
               submenu: [
                 ...((config.get('options.themes')?.length ?? 0) === 0
                   ? [
-                    {
-                      label: t(
-                        'main.menu.options.submenu.visual-tweaks.submenu.theme.submenu.no-theme',
-                      ),
-                    }
-                  ]
+                      {
+                        label: t(
+                          'main.menu.options.submenu.visual-tweaks.submenu.theme.submenu.no-theme',
+                        ),
+                      },
+                    ]
                   : []),
                 ...(config.get('options.themes')?.map((theme: string) => ({
                   type: 'normal' as const,
@@ -251,16 +277,25 @@ export const mainMenuTemplate = async (
                         { theme },
                       ),
                       buttons: [
-                        t('main.menu.options.submenu.visual-tweaks.submenu.theme.dialog.button.cancel'),
-                        t('main.menu.options.submenu.visual-tweaks.submenu.theme.dialog.button.remove'),
+                        t(
+                          'main.menu.options.submenu.visual-tweaks.submenu.theme.dialog.button.cancel',
+                        ),
+                        t(
+                          'main.menu.options.submenu.visual-tweaks.submenu.theme.dialog.button.remove',
+                        ),
                       ],
                     });
 
                     if (response === 1) {
-                      config.set('options.themes', config.get('options.themes')?.filter((t) => t !== theme) ?? []);
+                      config.set(
+                        'options.themes',
+                        config
+                          .get('options.themes')
+                          ?.filter((t) => t !== theme) ?? [],
+                      );
                       innerRefreshMenu();
                     }
-                  }
+                  },
                 })) ?? []),
                 { type: 'separator' },
                 {
@@ -306,40 +341,40 @@ export const mainMenuTemplate = async (
         },
         ...((is.windows() || is.linux()
           ? [
-            {
-              label: t('main.menu.options.submenu.hide-menu.label'),
-              type: 'checkbox',
-              checked: config.get('options.hideMenu'),
-              click(item) {
-                config.setMenuOption('options.hideMenu', item.checked);
-                if (item.checked && !config.get('options.hideMenuWarned')) {
-                  dialog.showMessageBox(win, {
-                    type: 'info',
-                    title: t(
-                      'main.menu.options.submenu.hide-menu.dialog.title',
-                    ),
-                    message: t(
-                      'main.menu.options.submenu.hide-menu.dialog.message',
-                    ),
-                  });
-                }
+              {
+                label: t('main.menu.options.submenu.hide-menu.label'),
+                type: 'checkbox',
+                checked: config.get('options.hideMenu'),
+                click(item) {
+                  config.setMenuOption('options.hideMenu', item.checked);
+                  if (item.checked && !config.get('options.hideMenuWarned')) {
+                    dialog.showMessageBox(win, {
+                      type: 'info',
+                      title: t(
+                        'main.menu.options.submenu.hide-menu.dialog.title',
+                      ),
+                      message: t(
+                        'main.menu.options.submenu.hide-menu.dialog.message',
+                      ),
+                    });
+                  }
+                },
               },
-            },
-          ]
+            ]
           : []) satisfies Electron.MenuItemConstructorOptions[]),
         ...((is.windows() || is.macOS()
           ? // Only works on Win/Mac
             // https://www.electronjs.org/docs/api/app#appsetloginitemsettingssettings-macos-windows
-          [
-            {
-              label: t('main.menu.options.submenu.start-at-login'),
-              type: 'checkbox',
-              checked: config.get('options.startAtLogin'),
-              click(item) {
-                config.setMenuOption('options.startAtLogin', item.checked);
+            [
+              {
+                label: t('main.menu.options.submenu.start-at-login'),
+                type: 'checkbox',
+                checked: config.get('options.startAtLogin'),
+                click(item) {
+                  config.setMenuOption('options.startAtLogin', item.checked);
+                },
               },
-            },
-          ]
+            ]
           : []) satisfies Electron.MenuItemConstructorOptions[]),
         {
           label: t('main.menu.options.submenu.tray.label'),
@@ -493,25 +528,25 @@ export const mainMenuTemplate = async (
             { type: 'separator' },
             is.macOS()
               ? {
-                label: t(
-                  'main.menu.options.submenu.advanced-options.submenu.toggle-dev-tools',
-                ),
-                // Cannot use "toggleDevTools" role in macOS
-                click() {
-                  const { webContents } = win;
-                  if (webContents.isDevToolsOpened()) {
-                    webContents.closeDevTools();
-                  } else {
-                    webContents.openDevTools();
-                  }
-                },
-              }
+                  label: t(
+                    'main.menu.options.submenu.advanced-options.submenu.toggle-dev-tools',
+                  ),
+                  // Cannot use "toggleDevTools" role in macOS
+                  click() {
+                    const { webContents } = win;
+                    if (webContents.isDevToolsOpened()) {
+                      webContents.closeDevTools();
+                    } else {
+                      webContents.openDevTools();
+                    }
+                  },
+                }
               : {
-                label: t(
-                  'main.menu.options.submenu.advanced-options.submenu.toggle-dev-tools',
-                ),
-                role: 'toggleDevTools',
-              },
+                  label: t(
+                    'main.menu.options.submenu.advanced-options.submenu.toggle-dev-tools',
+                  ),
+                  role: 'toggleDevTools',
+                },
             {
               label: t(
                 'main.menu.options.submenu.advanced-options.submenu.edit-config-json',

src/plugins/adblocker/adSpeedup.ts

@@ -1,5 +1,7 @@
 function skipAd(target: Element) {
-  const skipButton = target.querySelector<HTMLButtonElement>('button.ytp-ad-skip-button-modern');
+  const skipButton = target.querySelector<HTMLButtonElement>(
+    'button.ytp-ad-skip-button-modern',
+  );
   if (skipButton) {
     skipButton.click();
   }
@@ -17,7 +19,7 @@ function speedUpAndMute(player: Element, isAdShowing: boolean) {
   }
 }
 
-export const loadAdSpeedup = async () => {
+export const loadAdSpeedup = () => {
   const player = document.querySelector<HTMLVideoElement>('#movie_player');
   if (!player) return;
 
@@ -53,4 +55,4 @@ export const loadAdSpeedup = async () => {
     player.classList.contains('ad-interrupting');
   speedUpAndMute(player, isAdShowing);
   skipAd(player);
-}
+};

src/plugins/adblocker/index.ts

@@ -79,7 +79,7 @@ export default createPlugin({
       if (config.blocker === blockers.AdSpeedup) {
         await loadAdSpeedup();
       }
-    }
+    },
   },
   backend: {
     mainWindow: null as BrowserWindow | null,

src/plugins/album-actions/index.ts

@@ -104,21 +104,28 @@ export default createPlugin<
             buttons.splice(i, 1);
             i--;
           } else {
-            (buttons[i].children[0].children[0] as HTMLElement).style.setProperty(
+            (
+              buttons[i].children[0].children[0] as HTMLElement
+            ).style.setProperty(
               '-webkit-mask-size',
-              `100% ${100 - ((count / listsLength) * 100)}%`,
+              `100% ${100 - (count / listsLength) * 100}%`,
             );
           }
           i++;
         }
       }
-      const menuParent = document.querySelector('#action-buttons')?.parentElement;
+      const menuParent =
+        document.querySelector('#action-buttons')?.parentElement;
       if (menuParent && !document.querySelector('.like-menu')) {
         const menu = document.createElement('div');
         menu.id = 'ytmd-album-action-buttons';
-        menu.className = 'action-buttons style-scope ytmusic-responsive-header-renderer';
+        menu.className =
+          'action-buttons style-scope ytmusic-responsive-header-renderer';
 
-        menuParent.insertBefore(menu, menuParent.children[menuParent.children.length - 1]);
+        menuParent.insertBefore(
+          menu,
+          menuParent.children[menuParent.children.length - 1],
+        );
         for (const button of buttons) {
           menu.appendChild(button);
           button.addEventListener('click', this.loadFullList);

src/plugins/album-color-theme/index.ts

@@ -25,7 +25,12 @@ export default createPlugin<
     sidebarSmall: HTMLElement | null;
     ytmusicAppLayout: HTMLElement | null;
 
-    getMixedColor(color: string, key: string, alpha?: number, ratioMultiply?: number): string;
+    getMixedColor(
+      color: string,
+      key: string,
+      alpha?: number,
+      ratioMultiply?: number,
+    ): string;
     updateColor(): void;
   },
   {
@@ -91,7 +96,10 @@ export default createPlugin<
       this.ytmusicAppLayout = document.querySelector<HTMLElement>('#layout');
 
       const config = await getConfig();
-      document.documentElement.style.setProperty(RATIO_KEY, `${~~(config.ratio * 100)}%`);
+      document.documentElement.style.setProperty(
+        RATIO_KEY,
+        `${~~(config.ratio * 100)}%`,
+      );
     },
     onPlayerApiReady(playerApi) {
       const fastAverageColor = new FastAverageColor();
@@ -100,10 +108,12 @@ export default createPlugin<
         if (event.detail.name !== 'dataloaded') return;
 
         const playerResponse = playerApi.getPlayerResponse();
-        const thumbnail = playerResponse?.videoDetails?.thumbnail?.thumbnails?.at(0);
+        const thumbnail =
+          playerResponse?.videoDetails?.thumbnail?.thumbnails?.at(0);
         if (!thumbnail) return;
 
-        const albumColor = await fastAverageColor.getColorAsync(thumbnail.url)
+        const albumColor = await fastAverageColor
+          .getColorAsync(thumbnail.url)
           .catch((err) => {
             console.error(err);
             return null;
@@ -120,8 +130,14 @@ export default createPlugin<
             this.darkColor = this.darkColor?.darken(0.05);
           }
 
-          document.documentElement.style.setProperty(COLOR_KEY, `${~~this.color.red()}, ${~~this.color.green()}, ${~~this.color.blue()}`);
-          document.documentElement.style.setProperty(DARK_COLOR_KEY, `${~~this.darkColor.red()}, ${~~this.darkColor.green()}, ${~~this.darkColor.blue()}`);
+          document.documentElement.style.setProperty(
+            COLOR_KEY,
+            `${~~this.color.red()}, ${~~this.color.green()}, ${~~this.color.blue()}`,
+          );
+          document.documentElement.style.setProperty(
+            DARK_COLOR_KEY,
+            `${~~this.darkColor.red()}, ${~~this.darkColor.green()}, ${~~this.darkColor.blue()}`,
+          );
         } else {
           document.documentElement.style.setProperty(COLOR_KEY, '0, 0, 0');
           document.documentElement.style.setProperty(DARK_COLOR_KEY, '0, 0, 0');
@@ -131,7 +147,10 @@ export default createPlugin<
       });
     },
     onConfigChange(config) {
-      document.documentElement.style.setProperty(RATIO_KEY, `${~~(config.ratio * 100)}%`);
+      document.documentElement.style.setProperty(
+        RATIO_KEY,
+        `${~~(config.ratio * 100)}%`,
+      );
     },
     getMixedColor(color: string, key: string, alpha = 1, ratioMultiply) {
       const keyColor = `rgba(var(${key}), ${alpha})`;
@@ -181,11 +200,23 @@ export default createPlugin<
         '--yt-spec-black-1-alpha-95': 'rgba(40,40,40,0.95)',
       };
       Object.entries(variableMap).map(([variable, color]) => {
-        document.documentElement.style.setProperty(variable, this.getMixedColor(color, COLOR_KEY), 'important');
+        document.documentElement.style.setProperty(
+          variable,
+          this.getMixedColor(color, COLOR_KEY),
+          'important',
+        );
       });
 
-      document.body.style.setProperty('background', this.getMixedColor('#030303', COLOR_KEY), 'important');
-      document.documentElement.style.setProperty('--ytmusic-background', this.getMixedColor('#030303', DARK_COLOR_KEY), 'important');
+      document.body.style.setProperty(
+        'background',
+        this.getMixedColor('#030303', COLOR_KEY),
+        'important',
+      );
+      document.documentElement.style.setProperty(
+        '--ytmusic-background',
+        this.getMixedColor('#030303', DARK_COLOR_KEY),
+        'important',
+      );
     },
   },
 });

src/plugins/ambient-mode/index.ts

@@ -53,10 +53,16 @@ export default createPlugin({
 
       const songImage = document.querySelector<HTMLImageElement>('#song-image');
       const songVideo = document.querySelector<HTMLDivElement>('#song-video');
-      const image = songImage?.querySelector<HTMLImageElement>('yt-img-shadow > img');
-      const video = await waitForElement<HTMLVideoElement>('.html5-video-container > video');
+      const image = songImage?.querySelector<HTMLImageElement>(
+        'yt-img-shadow > img',
+      );
+      const video = await waitForElement<HTMLVideoElement>(
+        '.html5-video-container > video',
+      );
 
-      const videoWrapper = document.querySelector('#song-video > .player-wrapper');
+      const videoWrapper = document.querySelector(
+        '#song-video > .player-wrapper',
+      );
 
       const injectBlurImage = () => {
         if (!songImage || !image) return null;
@@ -95,7 +101,9 @@ export default createPlugin({
         const blurCanvas = document.createElement('canvas');
         blurCanvas.classList.add('html5-blur-canvas');
 
-        const context = blurCanvas.getContext('2d', { willReadFrequently: true });
+        const context = blurCanvas.getContext('2d', {
+          willReadFrequently: true,
+        });
 
         /* effect */
         let lastEffectWorkId: number | null = null;
@@ -109,14 +117,18 @@ export default createPlugin({
             if (!context) return;
 
             const width = this.qualityRatio;
-            let height = Math.max(Math.floor((blurCanvas.height / blurCanvas.width) * width), 1,);
+            let height = Math.max(
+              Math.floor((blurCanvas.height / blurCanvas.width) * width),
+              1,
+            );
             if (!Number.isFinite(height)) height = width;
             if (!height) return;
 
             context.globalAlpha = 1;
             if (lastImageData) {
-              const frameOffset = (1 / this.buffer) * (1000 / this.interpolationTime);
-              context.globalAlpha = 1 - (frameOffset * 2); // because of alpha value must be < 1
+              const frameOffset =
+                (1 / this.buffer) * (1000 / this.interpolationTime);
+              context.globalAlpha = 1 - frameOffset * 2; // because of alpha value must be < 1
               context.putImageData(lastImageData, 0, 0);
               context.globalAlpha = frameOffset;
             }
@@ -137,7 +149,9 @@ export default createPlugin({
           if (newWidth === 0 || newHeight === 0) return;
 
           blurCanvas.width = this.qualityRatio;
-          blurCanvas.height = Math.floor((newHeight / newWidth) * this.qualityRatio);
+          blurCanvas.height = Math.floor(
+            (newHeight / newWidth) * this.qualityRatio,
+          );
 
           if (this.isFullscreen) blurCanvas.classList.add('fullscreen');
           else blurCanvas.classList.remove('fullscreen');
@@ -151,7 +165,10 @@ export default createPlugin({
 
         /* hooking */
         let canvasInterval: NodeJS.Timeout | null = null;
-        canvasInterval = setInterval(onSync, Math.max(1, Math.ceil(1000 / this.buffer)));
+        canvasInterval = setInterval(
+          onSync,
+          Math.max(1, Math.ceil(1000 / this.buffer)),
+        );
 
         const onPause = () => {
           if (canvasInterval) clearInterval(canvasInterval);
@@ -159,7 +176,10 @@ export default createPlugin({
         };
         const onPlay = () => {
           if (canvasInterval) clearInterval(canvasInterval);
-          canvasInterval = setInterval(onSync, Math.max(1, Math.ceil(1000 / this.buffer)));
+          canvasInterval = setInterval(
+            onSync,
+            Math.max(1, Math.ceil(1000 / this.buffer)),
+          );
         };
         songVideo.addEventListener('pause', onPause);
         songVideo.addEventListener('play', onPlay);
@@ -198,11 +218,20 @@ export default createPlugin({
         if (isPageOpen) {
           const isVideo = isVideoMode();
           if (!force) {
-            if (this.lastMediaType === 'video' && this.lastVideoSource === video?.src) return false;
-            if (this.lastMediaType === 'image' && this.lastImageSource === image?.src) return false;
+            if (
+              this.lastMediaType === 'video' &&
+              this.lastVideoSource === video?.src
+            )
+              return false;
+            if (
+              this.lastMediaType === 'image' &&
+              this.lastImageSource === image?.src
+            )
+              return false;
           }
           this.unregister?.();
-          this.unregister = (isVideo ? injectBlurVideo() : injectBlurImage()) ?? null;
+          this.unregister =
+            (isVideo ? injectBlurVideo() : injectBlurImage()) ?? null;
         } else {
           this.unregister?.();
           this.unregister = null;

src/plugins/ambient-mode/menu.ts

@@ -1,14 +1,24 @@
-import { t } from "@/i18n";
-import { MenuContext } from "@/types/contexts";
-import { MenuItemConstructorOptions } from "electron";
-import { AmbientModePluginConfig } from "./types";
+import { MenuItemConstructorOptions } from 'electron';
+
+import { t } from '@/i18n';
+import { MenuContext } from '@/types/contexts';
+import { AmbientModePluginConfig } from './types';
 
 export interface menuParameters {
   getConfig: () => AmbientModePluginConfig | Promise<AmbientModePluginConfig>;
-  setConfig: (conf: Partial<Omit<AmbientModePluginConfig, "enabled">>) => void | Promise<void>;
+  setConfig: (
+    conf: Partial<Omit<AmbientModePluginConfig, 'enabled'>>,
+  ) => void | Promise<void>;
 }
 
-export const menu: (ctx: MenuContext<AmbientModePluginConfig>) => MenuItemConstructorOptions[] | Promise<MenuItemConstructorOptions[]> = async ({ getConfig, setConfig }: menuParameters) => {
+export const menu: (
+  ctx: MenuContext<AmbientModePluginConfig>,
+) =>
+  | MenuItemConstructorOptions[]
+  | Promise<MenuItemConstructorOptions[]> = async ({
+  getConfig,
+  setConfig,
+}: menuParameters) => {
   const interpolationTimeList = [0, 500, 1000, 1500, 2000, 3000, 4000, 5000];
   const qualityList = [10, 25, 50, 100, 200, 500, 1000];
   const sizeList = [100, 110, 125, 150, 175, 200, 300];
@@ -107,4 +117,4 @@ export const menu: (ctx: MenuContext<AmbientModePluginConfig>) => MenuItemConstr
       },
     },
   ];
-}
+};

src/plugins/ambient-mode/types.ts

@@ -7,4 +7,4 @@ export type AmbientModePluginConfig = {
   size: number;
   opacity: number;
   fullscreen: boolean;
-};
+};

src/plugins/api-server/backend/index.ts

@@ -0,0 +1 @@
+export * from './main';

src/plugins/api-server/backend/main.ts

@@ -0,0 +1,121 @@
+import { jwt } from 'hono/jwt';
+import { OpenAPIHono as Hono } from '@hono/zod-openapi';
+import { cors } from 'hono/cors';
+import { swaggerUI } from '@hono/swagger-ui';
+import { serve } from '@hono/node-server';
+
+import registerCallback from '@/providers/song-info';
+import { createBackend } from '@/utils';
+
+import { JWTPayloadSchema } from './scheme';
+import { registerAuth, registerControl } from './routes';
+
+import { type APIServerConfig, AuthStrategy } from '../config';
+
+import type { BackendType } from './types';
+
+export const backend = createBackend<BackendType, APIServerConfig>({
+  async start(ctx) {
+    const config = await ctx.getConfig();
+
+    await this.init(ctx);
+    registerCallback((songInfo) => {
+      this.songInfo = songInfo;
+    });
+
+    this.run(config.hostname, config.port);
+  },
+  stop() {
+    this.end();
+  },
+  onConfigChange(config) {
+    if (
+      this.oldConfig?.hostname === config.hostname &&
+      this.oldConfig?.port === config.port
+    ) {
+      this.oldConfig = config;
+      return;
+    }
+
+    this.end();
+    this.run(config.hostname, config.port);
+    this.oldConfig = config;
+  },
+
+  // Custom
+  async init(ctx) {
+    const config = await ctx.getConfig();
+    this.app = new Hono();
+
+    this.app.use('*', cors());
+
+    // middlewares
+    this.app.use('/api/*', async (ctx, next) => {
+      if (config.authStrategy !== AuthStrategy.NONE) {
+        return await jwt({
+          secret: config.secret,
+        })(ctx, next);
+      }
+      await next();
+    });
+    this.app.use('/api/*', async (ctx, next) => {
+      const result = await JWTPayloadSchema.spa(await ctx.get('jwtPayload'));
+
+      const isAuthorized =
+        config.authStrategy === AuthStrategy.NONE ||
+        (result.success && config.authorizedClients.includes(result.data.id));
+      if (!isAuthorized) {
+        ctx.status(401);
+        return ctx.body('Unauthorized');
+      }
+
+      return await next();
+    });
+
+    // routes
+    registerControl(this.app, ctx, () => this.songInfo);
+    registerAuth(this.app, ctx);
+
+    // swagger
+    this.app.openAPIRegistry.registerComponent(
+      'securitySchemes',
+      'bearerAuth',
+      {
+        type: 'http',
+        scheme: 'bearer',
+        bearerFormat: 'JWT',
+      },
+    );
+    this.app.doc('/doc', {
+      openapi: '3.1.0',
+      info: {
+        version: '1.0.0',
+        title: 'Youtube Music API Server',
+      },
+      security: [
+        {
+          bearerAuth: [],
+        },
+      ],
+    });
+
+    this.app.get('/swagger', swaggerUI({ url: '/doc' }));
+  },
+  run(hostname, port) {
+    if (!this.app) return;
+
+    try {
+      this.server = serve({
+        fetch: this.app.fetch.bind(this.app),
+        port,
+        hostname,
+      });
+    } catch (err) {
+      console.error(err);
+    }
+  },
+  end() {
+    this.server?.close();
+    this.server = undefined;
+  },
+});

src/plugins/api-server/backend/routes/auth.ts

@@ -0,0 +1,95 @@
+import { createRoute, z } from '@hono/zod-openapi';
+import { dialog } from 'electron';
+import { sign } from 'hono/jwt';
+
+import { getConnInfo } from '@hono/node-server/conninfo';
+
+import { t } from '@/i18n';
+
+import { type APIServerConfig, AuthStrategy } from '../../config';
+
+import type { JWTPayload } from '../scheme';
+import type { HonoApp } from '../types';
+import type { BackendContext } from '@/types/contexts';
+
+const routes = {
+  request: createRoute({
+    method: 'post',
+    path: '/auth/{id}',
+    summary: '',
+    description: '',
+    security: [],
+    request: {
+      params: z.object({
+        id: z.string(),
+      }),
+    },
+    responses: {
+      200: {
+        description: 'Success',
+        content: {
+          'application/json': {
+            schema: z.object({
+              accessToken: z.string(),
+            }),
+          },
+        },
+      },
+      403: {
+        description: 'Forbidden',
+      },
+    },
+  }),
+};
+
+export const register = (
+  app: HonoApp,
+  { getConfig, setConfig }: BackendContext<APIServerConfig>,
+) => {
+  app.openapi(routes.request, async (ctx) => {
+    const config = await getConfig();
+    const { id } = ctx.req.param();
+
+    if (config.authorizedClients.includes(id)) {
+      // SKIP CHECK
+    } else if (config.authStrategy === AuthStrategy.AUTH_AT_FIRST) {
+      const result = await dialog.showMessageBox({
+        title: t('plugins.api-server.dialog.request.title'),
+        message: t('plugins.api-server.dialog.request.message', {
+          origin: getConnInfo(ctx).remote.address,
+          ID: id,
+        }),
+        buttons: [
+          t('plugins.api-server.dialog.request.buttons.allow'),
+          t('plugins.api-server.dialog.request.buttons.deny'),
+        ],
+        defaultId: 1,
+        cancelId: 1,
+      });
+
+      if (result.response === 1) {
+        ctx.status(403);
+        return ctx.body(null);
+      }
+    } else if (config.authStrategy === AuthStrategy.NONE) {
+      // SKIP CHECK
+    }
+
+    setConfig({
+      authorizedClients: [...config.authorizedClients, id],
+    });
+
+    const token = await sign(
+      {
+        id,
+        iat: ~~(Date.now() / 1000),
+      } satisfies JWTPayload,
+      config.secret,
+    );
+
+    ctx.status(200);
+    return ctx.json({
+      accessToken: token,
+    });
+  });
+};

src/plugins/api-server/backend/routes/control.ts

@@ -0,0 +1,446 @@
+import { createRoute, z } from '@hono/zod-openapi';
+
+import { ipcMain } from 'electron';
+
+import getSongControls from '@/providers/song-controls';
+
+import {
+  AuthHeadersSchema,
+  type ResponseSongInfo,
+  SongInfoSchema,
+  GoForwardScheme,
+  GoBackSchema,
+  SwitchRepeatSchema,
+  SetVolumeSchema,
+  SetFullscreenSchema,
+} from '../scheme';
+
+import type { SongInfo } from '@/providers/song-info';
+import type { BackendContext } from '@/types/contexts';
+import type { APIServerConfig } from '../../config';
+import type { HonoApp } from '../types';
+import type { QueueResponse } from '@/types/youtube-music-desktop-internal';
+
+const API_VERSION = 'v1';
+
+const routes = {
+  previous: createRoute({
+    method: 'post',
+    path: `/api/${API_VERSION}/previous`,
+    summary: 'play previous song',
+    description: 'Plays the previous song in the queue',
+    responses: {
+      204: {
+        description: 'Success',
+      },
+    },
+  }),
+  next: createRoute({
+    method: 'post',
+    path: `/api/${API_VERSION}/next`,
+    summary: 'play next song',
+    description: 'Plays the next song in the queue',
+    responses: {
+      204: {
+        description: 'Success',
+      },
+    },
+  }),
+  play: createRoute({
+    method: 'post',
+    path: `/api/${API_VERSION}/play`,
+    summary: 'Play',
+    description: 'Change the state of the player to play',
+    responses: {
+      204: {
+        description: 'Success',
+      },
+    },
+  }),
+  pause: createRoute({
+    method: 'post',
+    path: `/api/${API_VERSION}/pause`,
+    summary: 'Pause',
+    description: 'Change the state of the player to pause',
+    responses: {
+      204: {
+        description: 'Success',
+      },
+    },
+  }),
+  togglePlay: createRoute({
+    method: 'post',
+    path: `/api/${API_VERSION}/toggle-play`,
+    summary: 'Toggle play/pause',
+    description:
+      'Change the state of the player to play if paused, or pause if playing',
+    responses: {
+      204: {
+        description: 'Success',
+      },
+    },
+  }),
+  like: createRoute({
+    method: 'post',
+    path: `/api/${API_VERSION}/like`,
+    summary: 'like song',
+    description: 'Set the current song as liked',
+    responses: {
+      204: {
+        description: 'Success',
+      },
+    },
+  }),
+  dislike: createRoute({
+    method: 'post',
+    path: `/api/${API_VERSION}/dislike`,
+    summary: 'dislike song',
+    description: 'Set the current song as disliked',
+    responses: {
+      204: {
+        description: 'Success',
+      },
+    },
+  }),
+
+  goBack: createRoute({
+    method: 'post',
+    path: `/api/${API_VERSION}/go-back`,
+    summary: 'go back',
+    description: 'Move the current song back by a number of seconds',
+    request: {
+      headers: AuthHeadersSchema,
+      body: {
+        description: 'seconds to go back',
+        content: {
+          'application/json': {
+            schema: GoBackSchema,
+          },
+        },
+      },
+    },
+    responses: {
+      204: {
+        description: 'Success',
+      },
+    },
+  }),
+
+  goForward: createRoute({
+    method: 'post',
+    path: `/api/${API_VERSION}/go-forward`,
+    summary: 'go forward',
+    description: 'Move the current song forward by a number of seconds',
+    request: {
+      headers: AuthHeadersSchema,
+      body: {
+        description: 'seconds to go forward',
+        content: {
+          'application/json': {
+            schema: GoForwardScheme,
+          },
+        },
+      },
+    },
+    responses: {
+      204: {
+        description: 'Success',
+      },
+    },
+  }),
+
+  shuffle: createRoute({
+    method: 'post',
+    path: `/api/${API_VERSION}/shuffle`,
+    summary: 'shuffle',
+    description: 'Shuffle the queue',
+    responses: {
+      204: {
+        description: 'Success',
+      },
+    },
+  }),
+  switchRepeat: createRoute({
+    method: 'post',
+    path: `/api/${API_VERSION}/switch-repeat`,
+    summary: 'switch repeat',
+    description: 'Switch the repeat mode',
+    request: {
+      headers: AuthHeadersSchema,
+      body: {
+        description: 'number of times to click the repeat button',
+        content: {
+          'application/json': {
+            schema: SwitchRepeatSchema,
+          },
+        },
+      },
+    },
+    responses: {
+      204: {
+        description: 'Success',
+      },
+    },
+  }),
+  setVolume: createRoute({
+    method: 'post',
+    path: `/api/${API_VERSION}/volume`,
+    summary: 'set volume',
+    description: 'Set the volume of the player',
+    request: {
+      headers: AuthHeadersSchema,
+      body: {
+        description: 'volume to set',
+        content: {
+          'application/json': {
+            schema: SetVolumeSchema,
+          },
+        },
+      },
+    },
+    responses: {
+      204: {
+        description: 'Success',
+      },
+    },
+  }),
+  setFullscreen: createRoute({
+    method: 'post',
+    path: `/api/${API_VERSION}/fullscreen`,
+    summary: 'set fullscreen',
+    description: 'Set the fullscreen state of the player',
+    request: {
+      headers: AuthHeadersSchema,
+      body: {
+        description: 'fullscreen state',
+        content: {
+          'application/json': {
+            schema: SetFullscreenSchema,
+          },
+        },
+      },
+    },
+    responses: {
+      204: {
+        description: 'Success',
+      },
+    },
+  }),
+  toggleMute: createRoute({
+    method: 'post',
+    path: `/api/${API_VERSION}/toggle-mute`,
+    summary: 'toggle mute',
+    description: 'Toggle the mute state of the player',
+    responses: {
+      204: {
+        description: 'Success',
+      },
+    },
+  }),
+
+  getFullscreenState: createRoute({
+    method: 'get',
+    path: `/api/${API_VERSION}/fullscreen`,
+    summary: 'get fullscreen state',
+    description: 'Get the current fullscreen state',
+    responses: {
+      200: {
+        description: 'Success',
+        content: {
+          'application/json': {
+            schema: z.object({
+              state: z.boolean(),
+            }),
+          },
+        },
+      },
+    },
+  }),
+  queueInfo: createRoute({
+    method: 'get',
+    path: `/api/${API_VERSION}/queue-info`,
+    summary: 'get current queue info',
+    description: 'Get the current queue info',
+    responses: {
+      200: {
+        description: 'Success',
+        content: {
+          'application/json': {
+            schema: z.object({}),
+          },
+        },
+      },
+      204: {
+        description: 'No queue info',
+      },
+    },
+  }),
+  songInfo: createRoute({
+    method: 'get',
+    path: `/api/${API_VERSION}/song-info`,
+    summary: 'get current song info',
+    description: 'Get the current song info',
+    responses: {
+      200: {
+        description: 'Success',
+        content: {
+          'application/json': {
+            schema: SongInfoSchema,
+          },
+        },
+      },
+      204: {
+        description: 'No song info',
+      },
+    },
+  }),
+};
+
+export const register = (
+  app: HonoApp,
+  { window }: BackendContext<APIServerConfig>,
+  songInfoGetter: () => SongInfo | undefined,
+) => {
+  const controller = getSongControls(window);
+
+  app.openapi(routes.previous, (ctx) => {
+    controller.previous();
+
+    ctx.status(204);
+    return ctx.body(null);
+  });
+  app.openapi(routes.previous, (ctx) => {
+    controller.previous();
+
+    ctx.status(204);
+    return ctx.body(null);
+  });
+  app.openapi(routes.play, (ctx) => {
+    controller.play();
+
+    ctx.status(204);
+    return ctx.body(null);
+  });
+  app.openapi(routes.pause, (ctx) => {
+    controller.pause();
+
+    ctx.status(204);
+    return ctx.body(null);
+  });
+  app.openapi(routes.togglePlay, (ctx) => {
+    controller.playPause();
+
+    ctx.status(204);
+    return ctx.body(null);
+  });
+  app.openapi(routes.like, (ctx) => {
+    controller.like();
+
+    ctx.status(204);
+    return ctx.body(null);
+  });
+  app.openapi(routes.dislike, (ctx) => {
+    controller.dislike();
+
+    ctx.status(204);
+    return ctx.body(null);
+  });
+  app.openapi(routes.goBack, (ctx) => {
+    const { seconds } = ctx.req.valid('json');
+    controller.goBack(seconds);
+
+    ctx.status(204);
+    return ctx.body(null);
+  });
+  app.openapi(routes.goForward, (ctx) => {
+    const { seconds } = ctx.req.valid('json');
+    controller.goForward(seconds);
+
+    ctx.status(204);
+    return ctx.body(null);
+  });
+  app.openapi(routes.shuffle, (ctx) => {
+    controller.shuffle();
+
+    ctx.status(204);
+    return ctx.body(null);
+  });
+  app.openapi(routes.switchRepeat, (ctx) => {
+    const { iteration } = ctx.req.valid('json');
+    controller.switchRepeat(iteration);
+
+    ctx.status(204);
+    return ctx.body(null);
+  });
+  app.openapi(routes.setVolume, (ctx) => {
+    const { volume } = ctx.req.valid('json');
+    controller.setVolume(volume);
+
+    ctx.status(204);
+    return ctx.body(null);
+  });
+  app.openapi(routes.setFullscreen, (ctx) => {
+    const { state } = ctx.req.valid('json');
+    controller.setFullscreen(state);
+
+    ctx.status(204);
+    return ctx.body(null);
+  });
+  app.openapi(routes.toggleMute, (ctx) => {
+    controller.muteUnmute();
+
+    ctx.status(204);
+    return ctx.body(null);
+  });
+
+  app.openapi(routes.getFullscreenState, async (ctx) => {
+    const stateResponsePromise = new Promise<boolean>((resolve) => {
+      ipcMain.once(
+        'ytmd:set-fullscreen',
+        (_, isFullscreen: boolean | undefined) => {
+          return resolve(!!isFullscreen);
+        },
+      );
+
+      controller.requestFullscreenInformation();
+    });
+
+    const fullscreen = await stateResponsePromise;
+
+    ctx.status(200);
+    return ctx.json({ state: fullscreen });
+  });
+  app.openapi(routes.queueInfo, async (ctx) => {
+    const queueResponsePromise = new Promise<QueueResponse>((resolve) => {
+      ipcMain.once('ytmd:get-queue-response', (_, queue: QueueResponse) => {
+        return resolve(queue);
+      });
+
+      controller.requestQueueInformation();
+    });
+
+    const info = await queueResponsePromise;
+
+    if (!info) {
+      ctx.status(204);
+      return ctx.body(null);
+    }
+
+    ctx.status(200);
+    return ctx.json(info);
+  });
+  app.openapi(routes.songInfo, (ctx) => {
+    const info = songInfoGetter();
+
+    if (!info) {
+      ctx.status(204);
+      return ctx.body(null);
+    }
+
+    const body = { ...info };
+    delete body.image;
+
+    ctx.status(200);
+    return ctx.json(body satisfies ResponseSongInfo);
+  });
+};

src/plugins/api-server/backend/routes/index.ts

@@ -0,0 +1,2 @@
+export { register as registerControl } from './control';
+export { register as registerAuth } from './auth';

src/plugins/api-server/backend/scheme/auth.ts

@@ -0,0 +1,13 @@
+import { z } from '@hono/zod-openapi';
+
+export const AuthHeadersSchema = z.object({
+  authorization: z.string().openapi({
+    example: 'Bearer token',
+  }),
+});
+
+export type JWTPayload = z.infer<typeof JWTPayloadSchema>;
+export const JWTPayloadSchema = z.object({
+  id: z.string(),
+  iat: z.number(),
+});

src/plugins/api-server/backend/scheme/go-back.ts

@@ -0,0 +1,5 @@
+import { z } from '@hono/zod-openapi';
+
+export const GoBackSchema = z.object({
+  seconds: z.number(),
+});

src/plugins/api-server/backend/scheme/go-forward.ts

@@ -0,0 +1,5 @@
+import { z } from '@hono/zod-openapi';
+
+export const GoForwardScheme = z.object({
+  seconds: z.number(),
+});

src/plugins/api-server/backend/scheme/index.ts

@@ -0,0 +1,7 @@
+export * from './auth';
+export * from './song-info';
+export * from './go-back';
+export * from './go-forward';
+export * from './switch-repeat';
+export * from './set-volume';
+export * from './set-fullscreen';

src/plugins/api-server/backend/scheme/set-fullscreen.ts

@@ -0,0 +1,5 @@
+import { z } from '@hono/zod-openapi';
+
+export const SetFullscreenSchema = z.object({
+  state: z.boolean(),
+});

src/plugins/api-server/backend/scheme/set-volume.ts

@@ -0,0 +1,5 @@
+import { z } from '@hono/zod-openapi';
+
+export const SetVolumeSchema = z.object({
+  volume: z.number(),
+});

src/plugins/api-server/backend/scheme/song-info.ts

@@ -0,0 +1,26 @@
+import { z } from '@hono/zod-openapi';
+
+import { MediaType } from '@/providers/song-info';
+
+export type ResponseSongInfo = z.infer<typeof SongInfoSchema>;
+export const SongInfoSchema = z.object({
+  title: z.string(),
+  artist: z.string(),
+  views: z.number(),
+  uploadDate: z.string().optional(),
+  imageSrc: z.string().nullable().optional(),
+  isPaused: z.boolean().optional(),
+  songDuration: z.number(),
+  elapsedSeconds: z.number().optional(),
+  url: z.string().optional(),
+  album: z.string().nullable().optional(),
+  videoId: z.string(),
+  playlistId: z.string().optional(),
+  mediaType: z.enum([
+    MediaType.Audio,
+    MediaType.OriginalMusicVideo,
+    MediaType.UserGeneratedContent,
+    MediaType.PodcastEpisode,
+    MediaType.OtherVideo,
+  ]),
+});

src/plugins/api-server/backend/scheme/switch-repeat.ts

@@ -0,0 +1,5 @@
+import { z } from '@hono/zod-openapi';
+
+export const SwitchRepeatSchema = z.object({
+  iteration: z.number(),
+});

src/plugins/api-server/backend/types.ts

@@ -0,0 +1,18 @@
+import { OpenAPIHono as Hono } from '@hono/zod-openapi';
+import { serve } from '@hono/node-server';
+
+import type { BackendContext } from '@/types/contexts';
+import type { SongInfo } from '@/providers/song-info';
+import type { APIServerConfig } from '../config';
+
+export type HonoApp = Hono;
+export type BackendType = {
+  app?: HonoApp;
+  server?: ReturnType<typeof serve>;
+  oldConfig?: APIServerConfig;
+  songInfo?: SongInfo;
+
+  init: (ctx: BackendContext<APIServerConfig>) => Promise<void>;
+  run: (hostname: string, port: number) => void;
+  end: () => void;
+};

src/plugins/api-server/config.ts

@@ -0,0 +1,24 @@
+export enum AuthStrategy {
+  AUTH_AT_FIRST = 'AUTH_AT_FIRST',
+  NONE = 'NONE',
+}
+
+export interface APIServerConfig {
+  enabled: boolean;
+  hostname: string;
+  port: number;
+  authStrategy: AuthStrategy;
+  secret: string;
+
+  authorizedClients: string[];
+}
+
+export const defaultAPIServerConfig: APIServerConfig = {
+  enabled: true,
+  hostname: '0.0.0.0',
+  port: 26538,
+  authStrategy: AuthStrategy.AUTH_AT_FIRST,
+  secret: Date.now().toString(36),
+
+  authorizedClients: [],
+};

src/plugins/api-server/index.ts

@@ -0,0 +1,17 @@
+import { createPlugin } from '@/utils';
+import { t } from '@/i18n';
+
+import { defaultAPIServerConfig } from './config';
+import { onMenu } from './menu';
+import { backend } from './backend';
+
+export default createPlugin({
+  name: () => t('plugins.api-server.name'),
+  description: () => t('plugins.api-server.description'),
+  restartNeeded: false,
+  config: defaultAPIServerConfig,
+  addedVersion: '3.6.X',
+  menu: onMenu,
+
+  backend,
+});

src/plugins/api-server/menu.ts

@@ -0,0 +1,97 @@
+import prompt from 'custom-electron-prompt';
+
+import { t } from '@/i18n';
+import promptOptions from '@/providers/prompt-options';
+
+import {
+  type APIServerConfig,
+  AuthStrategy,
+  defaultAPIServerConfig,
+} from './config';
+
+import type { MenuContext } from '@/types/contexts';
+import type { MenuTemplate } from '@/menu';
+
+export const onMenu = async ({
+  getConfig,
+  setConfig,
+  window,
+}: MenuContext<APIServerConfig>): Promise<MenuTemplate> => {
+  const config = await getConfig();
+
+  return [
+    {
+      label: t('plugins.api-server.menu.hostname.label'),
+      type: 'normal',
+      async click() {
+        const config = await getConfig();
+
+        const newHostname =
+          (await prompt(
+            {
+              title: t('plugins.api-server.prompt.hostname.title'),
+              label: t('plugins.api-server.prompt.hostname.label'),
+              value: config.hostname,
+              type: 'input',
+              width: 380,
+              ...promptOptions(),
+            },
+            window,
+          )) ??
+          config.hostname ??
+          defaultAPIServerConfig.hostname;
+
+        setConfig({ ...config, hostname: newHostname });
+      },
+    },
+    {
+      label: t('plugins.api-server.menu.port.label'),
+      type: 'normal',
+      async click() {
+        const config = await getConfig();
+
+        const newPort =
+          (await prompt(
+            {
+              title: t('plugins.api-server.prompt.port.title'),
+              label: t('plugins.api-server.prompt.port.label'),
+              value: config.port,
+              type: 'counter',
+              counterOptions: { minimum: 0, maximum: 65565 },
+              width: 380,
+              ...promptOptions(),
+            },
+            window,
+          )) ??
+          config.port ??
+          defaultAPIServerConfig.port;
+
+        setConfig({ ...config, port: newPort });
+      },
+    },
+    {
+      label: t('plugins.api-server.menu.auth-strategy.label'),
+      type: 'submenu',
+      submenu: [
+        {
+          label: t(
+            'plugins.api-server.menu.auth-strategy.submenu.auth-at-first.label',
+          ),
+          type: 'radio',
+          checked: config.authStrategy === AuthStrategy.AUTH_AT_FIRST,
+          click() {
+            setConfig({ ...config, authStrategy: AuthStrategy.AUTH_AT_FIRST });
+          },
+        },
+        {
+          label: t('plugins.api-server.menu.auth-strategy.submenu.none.label'),
+          type: 'radio',
+          checked: config.authStrategy === AuthStrategy.NONE,
+          click() {
+            setConfig({ ...config, authStrategy: AuthStrategy.NONE });
+          },
+        },
+      ],
+    },
+  ];
+};

src/plugins/blur-nav-bar/index.ts

@@ -15,7 +15,10 @@ export default createPlugin({
       this.styleSheet = new CSSStyleSheet();
       await this.styleSheet.replace(style);
 
-      document.adoptedStyleSheets = [...document.adoptedStyleSheets, this.styleSheet];
+      document.adoptedStyleSheets = [
+        ...document.adoptedStyleSheets,
+        this.styleSheet,
+      ];
     },
     async stop() {
       await this.styleSheet?.replace('');

src/plugins/captions-selector/index.ts

@@ -34,7 +34,7 @@ export default createPlugin<
       {
         label: t('plugins.captions-selector.menu.autoload'),
         type: 'checkbox',
-        checked: config.autoload as boolean,
+        checked: config.autoload,
         click(item) {
           setConfig({ autoload: item.checked });
         },
@@ -42,7 +42,7 @@ export default createPlugin<
       {
         label: t('plugins.captions-selector.menu.disable-captions'),
         type: 'checkbox',
-        checked: config.disableCaptions as boolean,
+        checked: config.disableCaptions,
         click(item) {
           setConfig({ disableCaptions: item.checked });
         },

src/plugins/crossfade/fader.ts

@@ -64,7 +64,7 @@ interface VolumeFade {
 // Main class
 export class VolumeFader {
   private readonly media: HTMLMediaElement;
-  private readonly logger: VolumeLogger | false;
+  private readonly logger: VolumeLogger | null;
   private scale: {
     internalToVolume: (level: number) => number;
     volumeToInternal: (level: number) => number;
@@ -100,7 +100,7 @@ export class VolumeFader {
       this.logger = options.logger;
     } else {
       // Set log function explicitly to false
-      this.logger = false;
+      this.logger = null;
     }
 
     // Linear volume fading?
@@ -112,7 +112,7 @@ export class VolumeFader {
       };
 
       // Log setting
-      this.logger && this.logger('Using linear fading.');
+      this.logger?.('Using linear fading.');
     }
     // No linear, but logarithmic fading…
     else {
@@ -152,9 +152,8 @@ export class VolumeFader {
       };
 
       // Log setting if not default
-      options.fadeScaling &&
-        this.logger &&
-        this.logger(
+      if (options.fadeScaling)
+        this.logger?.(
           'Using logarithmic fading with ' +
             String(10 * dynamicRange) +
             ' dB dynamic range.',
@@ -170,8 +169,7 @@ export class VolumeFader {
       this.media.volume = options.initialVolume;
 
       // Log setting
-      this.logger &&
-        this.logger('Set initial volume to ' + String(this.media.volume) + '.');
+      this.logger?.('Set initial volume to ' + String(this.media.volume) + '.');
     }
 
     // Fade duration given?
@@ -187,7 +185,7 @@ export class VolumeFader {
     this.active = false;
 
     // Initialization done
-    this.logger && this.logger('Initialized for', this.media);
+    this.logger?.('Initialized for', this.media);
   }
 
   /**
@@ -236,8 +234,7 @@ export class VolumeFader {
       this.fadeDuration = fadeDuration;
 
       // Log setting
-      this.logger &&
-        this.logger('Set fade duration to ' + String(fadeDuration) + ' ms.');
+      this.logger?.('Set fade duration to ' + String(fadeDuration) + ' ms.');
     } else {
       // Abort and throw an exception
       throw new TypeError('Positive number expected as fade duration!');
@@ -279,7 +276,7 @@ export class VolumeFader {
     this.start();
 
     // Log new fade
-    this.logger && this.logger('New fade started:', this.fade);
+    this.logger?.('New fade started:', this.fade);
 
     // Return instance for chaining
     return this;
@@ -313,7 +310,7 @@ export class VolumeFader {
 
         // Compute current level on internal scale
         const level =
-          (progress * (this.fade.volume.end - this.fade.volume.start)) +
+          progress * (this.fade.volume.end - this.fade.volume.start) +
           this.fade.volume.start;
 
         // Map fade level to volume level and apply it to media element
@@ -323,8 +320,7 @@ export class VolumeFader {
         window.requestAnimationFrame(this.updateVolume.bind(this));
       } else {
         // Log end of fade
-        this.logger &&
-          this.logger('Fade to ' + String(this.fade.volume.end) + ' complete.');
+        this.logger?.('Fade to ' + String(this.fade.volume.end) + ' complete.');
 
         // Time is up, jump to target volume
         this.media.volume = this.scale.internalToVolume(this.fade.volume.end);
@@ -333,7 +329,7 @@ export class VolumeFader {
         this.active = false;
 
         // Done, call back (if callable)
-        typeof this.fade.callback === 'function' && this.fade.callback();
+        if (typeof this.fade.callback === 'function') this.fade.callback();
 
         // Clear fade
         this.fade = undefined;
@@ -382,7 +378,7 @@ export class VolumeFader {
     input = Math.log10(input);
 
     // Scale minus something × 10 dB to 0…1 (clipping at 0)
-    return Math.max(1 + (input / dynamicRange), 0);
+    return Math.max(1 + input / dynamicRange, 0);
   }
 }
 

src/plugins/crossfade/index.ts

@@ -191,7 +191,7 @@ export default createPlugin<
       let waitForTransition: Promise<unknown>;
 
       const getStreamURL = async (videoID: string): Promise<string> =>
-        this.ipc?.invoke('audio-url', videoID);
+        this.ipc?.invoke('audio-url', videoID) as Promise<string>;
 
       const getVideoIDFromURL = (url: string) =>
         new URLSearchParams(url.split('?')?.at(-1)).get('v');

src/plugins/discord/main.ts

@@ -202,9 +202,9 @@ export const backend = createBackend<
       }
     } else if (!config.hideDurationLeft) {
       // Add the start and end time of the song
-      const songStartTime = Date.now() - ((songInfo.elapsedSeconds ?? 0) * 1000);
+      const songStartTime = Date.now() - (songInfo.elapsedSeconds ?? 0) * 1000;
       activityInfo.startTimestamp = songStartTime;
-      activityInfo.endTimestamp = songStartTime + (songInfo.songDuration * 1000);
+      activityInfo.endTimestamp = songStartTime + songInfo.songDuration * 1000;
     }
 
     info.rpc.user?.setActivity(activityInfo).catch(console.error);

src/plugins/downloader/main/index.ts

@@ -172,6 +172,8 @@ function downloadSongOnFinishSetup({
   let duration: number | undefined;
   let time = 0;
 
+  const defaultDownloadFolder = app.getPath('downloads');
+
   registerCallback((songInfo: SongInfo) => {
     if (
       !songInfo.isPaused &&
@@ -183,12 +185,22 @@ function downloadSongOnFinishSetup({
           config.downloadOnFinish.mode === 'seconds' &&
           duration - time <= config.downloadOnFinish.seconds
         ) {
-          downloadSong(currentUrl, config.downloadOnFinish.folder ?? config.downloadFolder);
+          downloadSong(
+            currentUrl,
+            config.downloadOnFinish.folder ??
+              config.downloadFolder ??
+              defaultDownloadFolder,
+          );
         } else if (
           config.downloadOnFinish.mode === 'percent' &&
           time >= duration * (config.downloadOnFinish.percent / 100)
         ) {
-          downloadSong(currentUrl, config.downloadOnFinish.folder ?? config.downloadFolder);
+          downloadSong(
+            currentUrl,
+            config.downloadOnFinish.folder ??
+              config.downloadFolder ??
+              defaultDownloadFolder,
+          );
         }
       }
 
@@ -438,7 +450,7 @@ async function iterableStreamToProcessedUint8Array(
           }),
           ratio,
         );
-        increasePlaylistProgress(0.15 + (ratio * 0.85));
+        increasePlaylistProgress(0.15 + ratio * 0.85);
       });
 
       const safeVideoNameWithExtension = `${safeVideoName}.${extension}`;
@@ -566,7 +578,13 @@ export async function downloadPlaylist(givenUrl?: string | URL) {
     return;
   }
 
-  if (!playlist || !playlist.items || playlist.items.length === 0 || !playlist.header || !('title' in playlist.header)) {
+  if (
+    !playlist ||
+    !playlist.items ||
+    playlist.items.length === 0 ||
+    !playlist.header ||
+    !('title' in playlist.header)
+  ) {
     sendError(
       new Error(t('plugins.downloader.backend.feedback.playlist-is-empty')),
     );
@@ -660,7 +678,7 @@ export async function downloadPlaylist(givenUrl?: string | URL) {
 
   const increaseProgress = (itemPercentage: number) => {
     const currentProgress = (counter - 1) / (items.length ?? 1);
-    const newProgress = currentProgress + (progressStep * itemPercentage);
+    const newProgress = currentProgress + progressStep * itemPercentage;
     win.setProgressBar(newProgress);
   };
 

src/plugins/downloader/menu.ts

@@ -35,7 +35,10 @@ export const onMenu = async ({
           click(item) {
             setConfig({
               downloadOnFinish: {
-                ...deepmerge(defaultConfig.downloadOnFinish, config.downloadOnFinish)!,
+                ...deepmerge(
+                  defaultConfig.downloadOnFinish,
+                  config.downloadOnFinish,
+                )!,
                 enabled: item.checked,
               },
             });
@@ -49,14 +52,19 @@ export const onMenu = async ({
           click() {
             const result = dialog.showOpenDialogSync({
               properties: ['openDirectory', 'createDirectory'],
-              defaultPath: getFolder(config.downloadOnFinish?.folder ?? config.downloadFolder),
+              defaultPath: getFolder(
+                config.downloadOnFinish?.folder ?? config.downloadFolder,
+              ),
             });
             if (result) {
               setConfig({
                 downloadOnFinish: {
-                  ...deepmerge(defaultConfig.downloadOnFinish, config.downloadOnFinish)!,
+                  ...deepmerge(
+                    defaultConfig.downloadOnFinish,
+                    config.downloadOnFinish,
+                  )!,
                   folder: result[0],
-                }
+                },
               });
             }
           },
@@ -76,7 +84,10 @@ export const onMenu = async ({
               click() {
                 setConfig({
                   downloadOnFinish: {
-                    ...deepmerge(defaultConfig.downloadOnFinish, config.downloadOnFinish)!,
+                    ...deepmerge(
+                      defaultConfig.downloadOnFinish,
+                      config.downloadOnFinish,
+                    )!,
                     mode: 'seconds',
                   },
                 });
@@ -91,7 +102,10 @@ export const onMenu = async ({
               click() {
                 setConfig({
                   downloadOnFinish: {
-                    ...deepmerge(defaultConfig.downloadOnFinish, config.downloadOnFinish)!,
+                    ...deepmerge(
+                      defaultConfig.downloadOnFinish,
+                      config.downloadOnFinish,
+                    )!,
                     mode: 'percent',
                   },
                 });
@@ -120,7 +134,9 @@ export const onMenu = async ({
                     min: '0',
                     step: '1',
                   },
-                  value: config.downloadOnFinish?.seconds ?? defaultConfig.downloadOnFinish!.seconds,
+                  value:
+                    config.downloadOnFinish?.seconds ??
+                    defaultConfig.downloadOnFinish!.seconds,
                 },
                 {
                   label: t(
@@ -133,7 +149,9 @@ export const onMenu = async ({
                     max: '100',
                     step: '1',
                   },
-                  value: config.downloadOnFinish?.percent ?? defaultConfig.downloadOnFinish!.percent,
+                  value:
+                    config.downloadOnFinish?.percent ??
+                    defaultConfig.downloadOnFinish!.percent,
                 },
               ],
               ...promptOptions(),
@@ -147,7 +165,10 @@ export const onMenu = async ({
 
             setConfig({
               downloadOnFinish: {
-                ...deepmerge(defaultConfig.downloadOnFinish, config.downloadOnFinish)!,
+                ...deepmerge(
+                  defaultConfig.downloadOnFinish,
+                  config.downloadOnFinish,
+                )!,
                 seconds: Number(res[0]),
                 percent: Number(res[1]),
               },

src/plugins/downloader/renderer.ts

@@ -39,7 +39,9 @@ const menuObserver = new MutationObserver(() => {
   if (!menuUrl?.includes('watch?')) {
     menuUrl = undefined;
     // check for podcast
-    for (const it of document.querySelectorAll('tp-yt-paper-listbox [tabindex="-1"] #navigation-endpoint')) {
+    for (const it of document.querySelectorAll(
+      'tp-yt-paper-listbox [tabindex="-1"] #navigation-endpoint',
+    )) {
       if (it.getAttribute('href')?.includes('podcast/')) {
         menuUrl = it.getAttribute('href')!;
         break;
@@ -72,7 +74,9 @@ export const onRendererLoad = ({
       ?.getAttribute('href');
 
     if (!videoUrl && songMenu) {
-      for (const it of songMenu.querySelectorAll('ytmusic-menu-navigation-item-renderer[tabindex="-1"] #navigation-endpoint')) {
+      for (const it of songMenu.querySelectorAll(
+        'ytmusic-menu-navigation-item-renderer[tabindex="-1"] #navigation-endpoint',
+      )) {
         if (it.getAttribute('href')?.includes('podcast/')) {
           videoUrl = it.getAttribute('href');
           break;
@@ -86,7 +90,8 @@ export const onRendererLoad = ({
       }
 
       if (videoUrl.startsWith('podcast/')) {
-        videoUrl = defaultConfig.url + '/watch?' + videoUrl.replace('podcast/', 'v=');
+        videoUrl =
+          defaultConfig.url + '/watch?' + videoUrl.replace('podcast/', 'v=');
       }
 
       if (videoUrl.includes('?playlist=')) {

src/plugins/in-app-menu/constants.ts

@@ -4,24 +4,12 @@ export interface InAppMenuConfig {
 }
 export const defaultInAppMenuConfig: InAppMenuConfig = {
   enabled:
-    (
-      (
-        typeof window !== 'undefined' &&
-        !window.navigator?.userAgent?.toLowerCase().includes('mac')
-      ) ||
-      (
-        typeof global !== 'undefined' &&
-        global.process?.platform !== 'darwin'
-      )
-    ) && (
-      (
-        typeof window !== 'undefined' &&
-        !window.navigator?.userAgent?.toLowerCase().includes('linux')
-      ) ||
-      (
-        typeof global !== 'undefined' &&
-        global.process?.platform !== 'linux'
-      )
-    ),
+    ((typeof window !== 'undefined' &&
+      !window.navigator?.userAgent?.toLowerCase().includes('mac')) ||
+      (typeof global !== 'undefined' &&
+        global.process?.platform !== 'darwin')) &&
+    ((typeof window !== 'undefined' &&
+      !window.navigator?.userAgent?.toLowerCase().includes('linux')) ||
+      (typeof global !== 'undefined' && global.process?.platform !== 'linux')),
   hideDOMWindowControls: false,
 };

src/plugins/in-app-menu/main.ts

@@ -1,6 +1,13 @@
 import { register } from 'electron-localshortcut';
 
-import { BrowserWindow, Menu, MenuItem, ipcMain, nativeImage } from 'electron';
+import {
+  BrowserWindow,
+  Menu,
+  MenuItem,
+  ipcMain,
+  nativeImage,
+  WebContents,
+} from 'electron';
 
 import type { BackendContext } from '@/types/contexts';
 import type { InAppMenuConfig } from './constants';
@@ -50,11 +57,13 @@ export const onMainLoad = ({
   ipcMain.handle('ytmd:menu-event', (event, commandId: number) => {
     const target = getMenuItemById(commandId);
     if (target)
-      target.click(
-        undefined,
-        BrowserWindow.fromWebContents(event.sender),
-        event.sender,
-      );
+      (
+        target.click as (
+          args0: unknown,
+          args1: BrowserWindow | null,
+          args3: WebContents,
+        ) => void
+      )(undefined, BrowserWindow.fromWebContents(event.sender), event.sender);
   });
 
   handle('get-menu-by-id', (commandId: number) => {

src/plugins/in-app-menu/renderer.tsx

@@ -16,8 +16,9 @@ const isMacOS = navigator.userAgent.includes('Macintosh');
 const isNotWindowsOrMacOS =
   !navigator.userAgent.includes('Windows') && !isMacOS;
 
-
-const [config, setConfig] = createSignal<InAppMenuConfig>(defaultInAppMenuConfig);
+const [config, setConfig] = createSignal<InAppMenuConfig>(
+  defaultInAppMenuConfig,
+);
 export const onRendererLoad = async ({
   getConfig,
   ipc,
@@ -29,14 +30,19 @@ export const onRendererLoad = async ({
   stylesheet.replaceSync(scrollStyle);
   document.adoptedStyleSheets = [...document.adoptedStyleSheets, stylesheet];
 
-  render(() => (
-    <TitleBar
-      ipc={ipc}
-      isMacOS={isMacOS}
-      enableController={isNotWindowsOrMacOS && !config().hideDOMWindowControls}
-      initialCollapsed={window.mainConfig.get('options.hideMenu')}
-    />
-  ), document.body);
+  render(
+    () => (
+      <TitleBar
+        ipc={ipc}
+        isMacOS={isMacOS}
+        enableController={
+          isNotWindowsOrMacOS && !config().hideDOMWindowControls
+        }
+        initialCollapsed={window.mainConfig.get('options.hideMenu')}
+      />
+    ),
+    document.body,
+  );
 };
 
 export const onPlayerApiReady = () => {

src/plugins/in-app-menu/renderer/IconButton.tsx

@@ -3,36 +3,38 @@ import { css } from 'solid-styled-components';
 
 import { cacheNoArgs } from '@/providers/decorators';
 
-const iconButton = cacheNoArgs(() => css`
-  -webkit-app-region: none;
+const iconButton = cacheNoArgs(
+  () => css`
+    -webkit-app-region: none;
 
-  background: transparent;
+    background: transparent;
 
-  width: 24px;
-  height: 24px;
+    width: 24px;
+    height: 24px;
 
-  padding: 2px;
-  border-radius: 2px;
+    padding: 2px;
+    border-radius: 2px;
 
-  display: flex;
-  justify-content: center;
-  align-items: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 
-  color: white;
+    color: white;
 
-  outline: none;
-  border: none;
+    outline: none;
+    border: none;
 
-  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
 
-  &:hover {
-    background: rgba(255, 255, 255, 0.1);
-  }
+    &:hover {
+      background: rgba(255, 255, 255, 0.1);
+    }
 
-  &:active {
-    scale: 0.9;
-  }
-`);
+    &:active {
+      scale: 0.9;
+    }
+  `,
+);
 
 type CollapseIconButtonProps = JSX.HTMLAttributes<HTMLButtonElement>;
 export const IconButton = (props: CollapseIconButtonProps) => {

src/plugins/in-app-menu/renderer/MenuButton.tsx

@@ -3,31 +3,33 @@ import { css } from 'solid-styled-components';
 
 import { cacheNoArgs } from '@/providers/decorators';
 
-const menuStyle = cacheNoArgs(() => css`
-  -webkit-app-region: none;
+const menuStyle = cacheNoArgs(
+  () => css`
+    -webkit-app-region: none;
 
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  align-self: stretch;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    align-self: stretch;
 
-  padding: 2px 8px;
-  border-radius: 4px;
+    padding: 2px 8px;
+    border-radius: 4px;
 
-  cursor: pointer;
-  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+    cursor: pointer;
+    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
 
-  &:hover {
-    background-color: rgba(255, 255, 255, 0.1);
-  }
-  &:active {
-    scale: 0.9;
-  }
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.1);
+    }
+    &:active {
+      scale: 0.9;
+    }
 
-  &[data-selected="true"] {
-    background-color: rgba(255, 255, 255, 0.2);
-  }
-`);
+    &[data-selected='true'] {
+      background-color: rgba(255, 255, 255, 0.2);
+    }
+  `,
+);
 
 export type MenuButtonProps = JSX.HTMLAttributes<HTMLLIElement> & {
   text?: string;

src/plugins/in-app-menu/renderer/Panel.tsx

@@ -2,39 +2,48 @@ import { createSignal, JSX, Show, splitProps } from 'solid-js';
 import { mergeProps, Portal } from 'solid-js/web';
 import { css } from 'solid-styled-components';
 import { Transition } from 'solid-transition-group';
-import { autoUpdate, flip, offset, OffsetOptions, size } from '@floating-ui/dom';
+import {
+  autoUpdate,
+  flip,
+  offset,
+  OffsetOptions,
+  size,
+} from '@floating-ui/dom';
 import { useFloating } from 'solid-floating-ui';
 
 import { cacheNoArgs } from '@/providers/decorators';
 
-const panelStyle = cacheNoArgs(() => css`
-  position: fixed;
-  top: var(--offset-y, 0);
-  left: var(--offset-x, 0);
+const panelStyle = cacheNoArgs(
+  () => css`
+    position: fixed;
+    top: var(--offset-y, 0);
+    left: var(--offset-x, 0);
 
-  max-width: var(--max-width, 100%);
-  max-height: var(--max-height, 100%);
+    max-width: var(--max-width, 100%);
+    max-height: var(--max-height, 100%);
 
-  z-index: 10000;
-  width: fit-content;
-  height: fit-content;
+    z-index: 10000;
+    width: fit-content;
+    height: fit-content;
 
-  padding: 4px;
-  box-sizing: border-box;
-  border-radius: 8px;
-  overflow: auto;
+    padding: 4px;
+    box-sizing: border-box;
+    border-radius: 8px;
+    overflow: auto;
 
-  background-color: color-mix(
-    in srgb,
-    var(--titlebar-background-color, #030303) 50%,
-    rgba(0, 0, 0, 0.1)
-  );
-  backdrop-filter: blur(8px);
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05),
-  0 2px 8px rgba(0, 0, 0, 0.2);
+    background-color: color-mix(
+      in srgb,
+      var(--titlebar-background-color, #030303) 50%,
+      rgba(0, 0, 0, 0.1)
+    );
+    backdrop-filter: blur(8px);
+    box-shadow:
+      0 0 0 1px rgba(0, 0, 0, 0.05),
+      0 2px 8px rgba(0, 0, 0, 0.2);
 
-  transform-origin: var(--origin-x, 50%) var(--origin-y, 50%);
-`);
+    transform-origin: var(--origin-x, 50%) var(--origin-y, 50%);
+  `,
+);
 
 const animationStyle = cacheNoArgs(() => ({
   enter: css`
@@ -42,19 +51,23 @@ const animationStyle = cacheNoArgs(() => ({
     transform: scale(0.9);
   `,
   enterActive: css`
-    transition: opacity 0.225s cubic-bezier(0.33, 1, 0.68, 1), transform 0.225s cubic-bezier(0.33, 1, 0.68, 1);
+    transition:
+      opacity 0.225s cubic-bezier(0.33, 1, 0.68, 1),
+      transform 0.225s cubic-bezier(0.33, 1, 0.68, 1);
   `,
   exitTo: css`
     opacity: 0;
     transform: scale(0.9);
   `,
   exitActive: css`
-    transition: opacity 0.225s cubic-bezier(0.32, 0, 0.67, 0), transform 0.225s cubic-bezier(0.32, 0, 0.67, 0);
+    transition:
+      opacity 0.225s cubic-bezier(0.32, 0, 0.67, 0),
+      transform 0.225s cubic-bezier(0.32, 0, 0.67, 0);
   `,
 }));
 
 export type Placement =
-  'top'
+  | 'top'
   | 'bottom'
   | 'left'
   | 'right'
@@ -92,9 +105,15 @@ export const Panel = (props: PanelProps) => {
       size({
         padding: 8,
         apply({ elements, availableWidth, availableHeight }) {
-          elements.floating.style.setProperty('--max-width', `${Math.max(200, availableWidth)}px`);
-          elements.floating.style.setProperty('--max-height', `${Math.max(200, availableHeight)}px`);
-        }
+          elements.floating.style.setProperty(
+            '--max-width',
+            `${Math.max(200, availableWidth)}px`,
+          );
+          elements.floating.style.setProperty(
+            '--max-height',
+            `${Math.max(200, availableHeight)}px`,
+          );
+        },
       }),
       flip({ fallbackStrategy: 'initialPlacement' }),
     ],
@@ -103,7 +122,10 @@ export const Panel = (props: PanelProps) => {
   const originX = () => {
     if (position.placement.includes('left')) return '100%';
     if (position.placement.includes('right')) return '0';
-    if (position.placement.includes('top') || position.placement.includes('bottom')) {
+    if (
+      position.placement.includes('top') ||
+      position.placement.includes('bottom')
+    ) {
       if (position.placement.includes('start')) return '0';
       if (position.placement.includes('end')) return '100%';
     }
@@ -113,7 +135,10 @@ export const Panel = (props: PanelProps) => {
   const originY = () => {
     if (position.placement.includes('top')) return '100%';
     if (position.placement.includes('bottom')) return '0';
-    if (position.placement.includes('left') || position.placement.includes('right')) {
+    if (
+      position.placement.includes('left') ||
+      position.placement.includes('right')
+    ) {
       if (position.placement.includes('start')) return '0';
       if (position.placement.includes('end')) return '100%';
     }

src/plugins/in-app-menu/renderer/PanelItem.tsx

@@ -10,100 +10,111 @@ import { autoUpdate, offset, size } from '@floating-ui/dom';
 import { Panel } from './Panel';
 import { cacheNoArgs } from '@/providers/decorators';
 
-const itemStyle = cacheNoArgs(() => css`
-  position: relative;
+const itemStyle = cacheNoArgs(
+  () => css`
+    position: relative;
 
-  -webkit-app-region: none;
-  min-height: 32px;
-  height: 32px;
+    -webkit-app-region: none;
+    min-height: 32px;
+    height: 32px;
 
-  display: grid;
-  grid-template-columns: 32px 1fr auto minmax(32px, auto);
-  justify-content: flex-start;
-  align-items: center;
+    display: grid;
+    grid-template-columns: 32px 1fr auto minmax(32px, auto);
+    justify-content: flex-start;
+    align-items: center;
 
-  border-radius: 4px;
-  cursor: pointer;
-  box-sizing: border-box;
-  user-select: none;
-  -webkit-user-drag: none;
-
-  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
-
-  &:hover {
-    background-color: rgba(255, 255, 255, 0.1);
-  }
-
-  &:active {
-    background-color: rgba(255, 255, 255, 0.2);
-  }
-
-  &[data-selected="true"] {
-    background-color: rgba(255, 255, 255, 0.2);
-  }
-
-  & * {
+    border-radius: 4px;
+    cursor: pointer;
     box-sizing: border-box;
-  }
-`);
+    user-select: none;
+    -webkit-user-drag: none;
 
-const itemIconStyle = cacheNoArgs(() => css`
-  height: 32px;
-  padding: 4px;
-  color: white;
-`);
+    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
 
-const itemLabelStyle = cacheNoArgs(() => css`
-  font-size: 12px;
-  color: white;
-`);
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.1);
+    }
 
-const itemChipStyle = cacheNoArgs(() => css`
-  display: flex;
-  justify-content: center;
-  align-items: center;
+    &:active {
+      background-color: rgba(255, 255, 255, 0.2);
+    }
 
-  min-width: 16px;
-  height: 16px;
-  padding: 0 4px;
-  margin-left: 8px;
+    &[data-selected='true'] {
+      background-color: rgba(255, 255, 255, 0.2);
+    }
 
-  border-radius: 4px;
-  background-color: rgba(255, 255, 255, 0.2);
-  color: #f1f1f1;
-  font-size: 10px;
-  font-weight: 500;
-  line-height: 1;
-`);
+    & * {
+      box-sizing: border-box;
+    }
+  `,
+);
 
-const toolTipStyle = cacheNoArgs(() => css`
-  min-width: 32px;
-  width: 100%;
-  height: 100%;
+const itemIconStyle = cacheNoArgs(
+  () => css`
+    height: 32px;
+    padding: 4px;
+    color: white;
+  `,
+);
 
-  padding: 4px;
+const itemLabelStyle = cacheNoArgs(
+  () => css`
+    font-size: 12px;
+    color: white;
+  `,
+);
 
-  max-width: calc(var(--max-width, 100%) - 8px);
-  max-height: calc(var(--max-height, 100%) - 8px);
+const itemChipStyle = cacheNoArgs(
+  () => css`
+    display: flex;
+    justify-content: center;
+    align-items: center;
 
-  border-radius: 4px;
-  background-color: rgba(25, 25, 25, 0.8);
-  color: #f1f1f1;
-  font-size: 10px;
-`);
+    min-width: 16px;
+    height: 16px;
+    padding: 0 4px;
+    margin-left: 8px;
 
-const popupStyle = cacheNoArgs(() => css`
-  position: fixed;
-  top: var(--offset-y, 0);
-  left: var(--offset-x, 0);
+    border-radius: 4px;
+    background-color: rgba(255, 255, 255, 0.2);
+    color: #f1f1f1;
+    font-size: 10px;
+    font-weight: 500;
+    line-height: 1;
+  `,
+);
 
-  max-width: var(--max-width, 100%);
-  max-height: var(--max-height, 100%);
+const toolTipStyle = cacheNoArgs(
+  () => css`
+    min-width: 32px;
+    width: 100%;
+    height: 100%;
 
-  z-index: 100000000;
-  pointer-events: none;
+    padding: 4px;
 
-`);
+    max-width: calc(var(--max-width, 100%) - 8px);
+    max-height: calc(var(--max-height, 100%) - 8px);
+
+    border-radius: 4px;
+    background-color: rgba(25, 25, 25, 0.8);
+    color: #f1f1f1;
+    font-size: 10px;
+  `,
+);
+
+const popupStyle = cacheNoArgs(
+  () => css`
+    position: fixed;
+    top: var(--offset-y, 0);
+    left: var(--offset-x, 0);
+
+    max-width: var(--max-width, 100%);
+    max-height: var(--max-height, 100%);
+
+    z-index: 100000000;
+    pointer-events: none;
+  `,
+);
 
 const animationStyle = cacheNoArgs(() => ({
   enter: css`
@@ -111,14 +122,18 @@ const animationStyle = cacheNoArgs(() => ({
     transform: scale(0.9);
   `,
   enterActive: css`
-    transition: opacity 0.225s cubic-bezier(0.33, 1, 0.68, 1), transform 0.225s cubic-bezier(0.33, 1, 0.68, 1);
+    transition:
+      opacity 0.225s cubic-bezier(0.33, 1, 0.68, 1),
+      transform 0.225s cubic-bezier(0.33, 1, 0.68, 1);
   `,
   exitTo: css`
     opacity: 0;
     transform: scale(0.9);
   `,
   exitActive: css`
-    transition: opacity 0.225s cubic-bezier(0.32, 0, 0.67, 0), transform 0.225s cubic-bezier(0.32, 0, 0.67, 0);
+    transition:
+      opacity 0.225s cubic-bezier(0.32, 0, 0.67, 0),
+      transform 0.225s cubic-bezier(0.32, 0, 0.67, 0);
   `,
 }));
 
@@ -160,7 +175,11 @@ type CheckboxPanelItemProps = BasePanelItemProps & {
   checked: boolean;
   onChange?: (checked: boolean) => void;
 };
-export type PanelItemProps = NormalPanelItemProps | SubmenuItemProps | RadioPanelItemProps | CheckboxPanelItemProps;
+export type PanelItemProps =
+  | NormalPanelItemProps
+  | SubmenuItemProps
+  | RadioPanelItemProps
+  | CheckboxPanelItemProps;
 export const PanelItem = (props: PanelItemProps) => {
   const [open, setOpen] = createSignal(false);
   const [toolTipOpen, setToolTipOpen] = createSignal(false);
@@ -176,17 +195,24 @@ export const PanelItem = (props: PanelItemProps) => {
       offset({ mainAxis: 8 }),
       size({
         apply({ rects, elements }) {
-          elements.floating.style.setProperty('--max-width', `${rects.reference.width}px`);
-        }
+          elements.floating.style.setProperty(
+            '--max-width',
+            `${rects.reference.width}px`,
+          );
+        },
       }),
     ],
   });
 
   const handleHover = (event: MouseEvent) => {
     setToolTipOpen(true);
-    event.target?.addEventListener('mouseleave', () => {
-      setToolTipOpen(false);
-    }, { once: true });
+    event.target?.addEventListener(
+      'mouseleave',
+      () => {
+        setToolTipOpen(false);
+      },
+      { once: true },
+    );
 
     if (props.type === 'submenu') {
       const timer = setTimeout(() => {
@@ -200,36 +226,54 @@ export const PanelItem = (props: PanelItemProps) => {
         };
         document.addEventListener('mousemove', onMouseMove);
 
-        event.target?.addEventListener('mouseleave', () => {
-          setTimeout(() => {
-            document.removeEventListener('mousemove', onMouseMove);
-            const parents = getParents(document.elementFromPoint(mouseX, mouseY));
+        event.target?.addEventListener(
+          'mouseleave',
+          () => {
+            setTimeout(() => {
+              document.removeEventListener('mousemove', onMouseMove);
+              const parents = getParents(
+                document.elementFromPoint(mouseX, mouseY),
+              );
 
-            if (!parents.includes(child())) {
-              setOpen(false);
-            } else {
-              const onOtherHover = (event: MouseEvent) => {
-                const parents = getParents(event.target as HTMLElement);
-                const closestLevel = parents.find((it) => it?.dataset?.level)?.dataset.level ?? '';
-                const path = event.composedPath();
+              if (!parents.includes(child())) {
+                setOpen(false);
+              } else {
+                const onOtherHover = (event: MouseEvent) => {
+                  const parents = getParents(event.target as HTMLElement);
+                  const closestLevel =
+                    parents.find((it) => it?.dataset?.level)?.dataset.level ??
+                    '';
+                  const path = event.composedPath();
 
-                const isOtherItem = path.some((it) => it instanceof HTMLElement && it.classList.contains(itemStyle()));
-                const isChild = closestLevel.startsWith(props.level.join('/'));
+                  const isOtherItem = path.some(
+                    (it) =>
+                      it instanceof HTMLElement &&
+                      it.classList.contains(itemStyle()),
+                  );
+                  const isChild = closestLevel.startsWith(
+                    props.level.join('/'),
+                  );
 
-                if (isOtherItem && !isChild) {
-                  setOpen(false);
-                  document.removeEventListener('mousemove', onOtherHover);
-                }
-              };
-              document.addEventListener('mousemove', onOtherHover);
-            }
-          }, 225);
-        }, { once: true });
+                  if (isOtherItem && !isChild) {
+                    setOpen(false);
+                    document.removeEventListener('mousemove', onOtherHover);
+                  }
+                };
+                document.addEventListener('mousemove', onOtherHover);
+              }
+            }, 225);
+          },
+          { once: true },
+        );
       }, 225);
 
-      event.target?.addEventListener('mouseleave', () => {
-        clearTimeout(timer);
-      }, { once: true });
+      event.target?.addEventListener(
+        'mouseleave',
+        () => {
+          clearTimeout(timer);
+        },
+        { once: true },
+      );
     }
   };
 
@@ -244,7 +288,6 @@ export const PanelItem = (props: PanelItemProps) => {
     }
   };
 
-
   return (
     <li
       ref={setAnchor}
@@ -253,45 +296,66 @@ export const PanelItem = (props: PanelItemProps) => {
       onClick={handleClick}
       data-selected={open()}
     >
-      <Switch fallback={<div class={itemIconStyle()}/>}>
+      <Switch fallback={<div class={itemIconStyle()} />}>
         <Match when={props.type === 'checkbox' && props.checked}>
-          <svg class={itemIconStyle()} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5"
-               stroke="currentColor" fill="none"
-               stroke-linecap="round" stroke-linejoin="round">
-            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
-            <path d="M5 12l5 5l10 -10"/>
+          <svg
+            class={itemIconStyle()}
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            stroke-width="1.5"
+            stroke="currentColor"
+            fill="none"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+            <path d="M5 12l5 5l10 -10" />
           </svg>
         </Match>
         <Match when={props.type === 'radio' && props.checked}>
-          <svg class={itemIconStyle()} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
-               style={{ padding: '6px' }}>
-            <path fill="currentColor"
-                  d="M10,5 C7.2,5 5,7.2 5,10 C5,12.8 7.2,15 10,15 C12.8,15 15,12.8 15,10 C15,7.2 12.8,5 10,5 L10,5 Z M10,0 C4.5,0 0,4.5 0,10 C0,15.5 4.5,20 10,20 C15.5,20 20,15.5 20,10 C20,4.5 15.5,0 10,0 L10,0 Z M10,18 C5.6,18 2,14.4 2,10 C2,5.6 5.6,2 10,2 C14.4,2 18,5.6 18,10 C18,14.4 14.4,18 10,18 L10,18 Z"/>
+          <svg
+            class={itemIconStyle()}
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 20 20"
+            style={{ padding: '6px' }}
+          >
+            <path
+              fill="currentColor"
+              d="M10,5 C7.2,5 5,7.2 5,10 C5,12.8 7.2,15 10,15 C12.8,15 15,12.8 15,10 C15,7.2 12.8,5 10,5 L10,5 Z M10,0 C4.5,0 0,4.5 0,10 C0,15.5 4.5,20 10,20 C15.5,20 20,15.5 20,10 C20,4.5 15.5,0 10,0 L10,0 Z M10,18 C5.6,18 2,14.4 2,10 C2,5.6 5.6,2 10,2 C14.4,2 18,5.6 18,10 C18,14.4 14.4,18 10,18 L10,18 Z"
+            />
           </svg>
         </Match>
         <Match when={props.type === 'radio' && !props.checked}>
-          <svg class={itemIconStyle()} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
-               style={{ padding: '6px' }}>
-            <path fill="currentColor"
-                  d="M10,0 C4.5,0 0,4.5 0,10 C0,15.5 4.5,20 10,20 C15.5,20 20,15.5 20,10 C20,4.5 15.5,0 10,0 L10,0 Z M10,18 C5.6,18 2,14.4 2,10 C2,5.6 5.6,2 10,2 C14.4,2 18,5.6 18,10 C18,14.4 14.4,18 10,18 L10,18 Z"/>
+          <svg
+            class={itemIconStyle()}
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 20 20"
+            style={{ padding: '6px' }}
+          >
+            <path
+              fill="currentColor"
+              d="M10,0 C4.5,0 0,4.5 0,10 C0,15.5 4.5,20 10,20 C15.5,20 20,15.5 20,10 C20,4.5 15.5,0 10,0 L10,0 Z M10,18 C5.6,18 2,14.4 2,10 C2,5.6 5.6,2 10,2 C14.4,2 18,5.6 18,10 C18,14.4 14.4,18 10,18 L10,18 Z"
+            />
           </svg>
         </Match>
       </Switch>
-      <span class={itemLabelStyle()}>
-        {props.name}
-      </span>
-      <Show when={props.chip} fallback={<div/>}>
-        <span class={itemChipStyle()}>
-          {props.chip}
-        </span>
+      <span class={itemLabelStyle()}>{props.name}</span>
+      <Show when={props.chip} fallback={<div />}>
+        <span class={itemChipStyle()}>{props.chip}</span>
       </Show>
       <Show when={props.type === 'submenu'}>
-        <svg class={itemIconStyle()} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5"
-             stroke="currentColor"
-             fill="none"
-             stroke-linecap="round" stroke-linejoin="round">
-          <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
-          <polyline points="9 6 15 12 9 18"/>
+        <svg
+          class={itemIconStyle()}
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          stroke-width="1.5"
+          stroke="currentColor"
+          fill="none"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+          <polyline points="9 6 15 12 9 18" />
         </svg>
         <Panel
           ref={setChild}
@@ -322,9 +386,7 @@ export const PanelItem = (props: PanelItemProps) => {
               exitActiveClass={animationStyle().exitActive}
             >
               <Show when={toolTipOpen()}>
-                <div class={toolTipStyle()}>
-                  {props.toolTip}
-                </div>
+                <div class={toolTipStyle()}>{props.toolTip}</div>
               </Show>
             </Transition>
           </div>

src/plugins/in-app-menu/renderer/TitleBar.tsx

@@ -1,5 +1,15 @@
 import { Menu, MenuItem } from 'electron';
-import { createEffect, createResource, createSignal, Index, Match, onCleanup, onMount, Show, Switch } from 'solid-js';
+import {
+  createEffect,
+  createResource,
+  createSignal,
+  Index,
+  Match,
+  onCleanup,
+  onMount,
+  Show,
+  Switch,
+} from 'solid-js';
 import { css } from 'solid-styled-components';
 import { TransitionGroup } from 'solid-transition-group';
 
@@ -14,49 +24,55 @@ import { cacheNoArgs } from '@/providers/decorators';
 import type { RendererContext } from '@/types/contexts';
 import type { InAppMenuConfig } from '../constants';
 
-const titleStyle = cacheNoArgs(() => css`
-  -webkit-app-region: drag;
-  box-sizing: border-box;
+const titleStyle = cacheNoArgs(
+  () => css`
+    -webkit-app-region: drag;
+    box-sizing: border-box;
 
-  position: fixed;
-  top: 0;
-  z-index: 10000000;
+    position: fixed;
+    top: 0;
+    z-index: 10000000;
 
-  width: 100%;
-  height: var(--menu-bar-height, 32px);
+    width: 100%;
+    height: var(--menu-bar-height, 32px);
 
-  display: flex;
-  flex-flow: row;
-  justify-content: flex-start;
-  align-items: center;
-  gap: 4px;
+    display: flex;
+    flex-flow: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 4px;
 
-  color: #f1f1f1;
-  font-size: 12px;
-  padding: 4px 4px 4px var(--offset-left, 4px);
-  background-color: var(--titlebar-background-color, #030303);
-  user-select: none;
+    color: #f1f1f1;
+    font-size: 12px;
+    padding: 4px 4px 4px var(--offset-left, 4px);
+    background-color: var(--titlebar-background-color, #030303);
+    user-select: none;
 
-  transition: opacity 200ms ease 0s,
-  transform 300ms cubic-bezier(0.2, 0, 0.6, 1) 0s,
-  background-color 300ms cubic-bezier(0.2, 0, 0.6, 1) 0s;
+    transition:
+      opacity 200ms ease 0s,
+      transform 300ms cubic-bezier(0.2, 0, 0.6, 1) 0s,
+      background-color 300ms cubic-bezier(0.2, 0, 0.6, 1) 0s;
 
-  &[data-macos="true"] {
-    padding: 4px 4px 4px 74px;
-  }
+    &[data-macos='true'] {
+      padding: 4px 4px 4px 74px;
+    }
 
-  ytmusic-app:has(ytmusic-player[player-ui-state=FULLSCREEN]) ~ &:not([data-show="true"]) {
-    transform: translateY(calc(-1 * var(--menu-bar-height, 32px)));
-  }
-`);
+    ytmusic-app:has(ytmusic-player[player-ui-state='FULLSCREEN'])
+      ~ &:not([data-show='true']) {
+      transform: translateY(calc(-1 * var(--menu-bar-height, 32px)));
+    }
+  `,
+);
 
-const separatorStyle = cacheNoArgs(() => css`
-  min-height: 1px;
-  height: 1px;
-  margin: 4px 0;
+const separatorStyle = cacheNoArgs(
+  () => css`
+    min-height: 1px;
+    height: 1px;
+    margin: 4px 0;
 
-  background-color: rgba(255, 255, 255, 0.2);
-`);
+    background-color: rgba(255, 255, 255, 0.2);
+  `,
+);
 
 const animationStyle = cacheNoArgs(() => ({
   enter: css`
@@ -64,14 +80,18 @@ const animationStyle = cacheNoArgs(() => ({
     transform: translateX(-50%) scale(0.8);
   `,
   enterActive: css`
-    transition: opacity 0.1s cubic-bezier(0.33, 1, 0.68, 1), transform 0.1s cubic-bezier(0.33, 1, 0.68, 1);
+    transition:
+      opacity 0.1s cubic-bezier(0.33, 1, 0.68, 1),
+      transform 0.1s cubic-bezier(0.33, 1, 0.68, 1);
   `,
   exitTo: css`
     opacity: 0;
     transform: translateX(-50%) scale(0.8);
   `,
   exitActive: css`
-    transition: opacity 0.1s cubic-bezier(0.32, 0, 0.67, 0), transform 0.1s cubic-bezier(0.32, 0, 0.67, 0);
+    transition:
+      opacity 0.1s cubic-bezier(0.32, 0, 0.67, 0),
+      transform 0.1s cubic-bezier(0.32, 0, 0.67, 0);
   `,
   move: css`
     transition: all 0.1s cubic-bezier(0.65, 0, 0.35, 1);
@@ -89,7 +109,7 @@ export type PanelRendererProps = {
   items: Electron.Menu['items'];
   level?: number[];
   onClick?: (commandId: number, radioGroup?: MenuItem[]) => void;
-}
+};
 const PanelRenderer = (props: PanelRendererProps) => {
   const radioGroup = () => props.items.filter((it) => it.type === 'radio');
 
@@ -114,12 +134,12 @@ const PanelRenderer = (props: PanelRendererProps) => {
                 name={subItem().label}
                 chip={subItem().sublabel}
                 toolTip={subItem().toolTip}
-                level={[...props.level ?? [], subItem().commandId]}
+                level={[...(props.level ?? []), subItem().commandId]}
                 commandId={subItem().commandId}
               >
                 <PanelRenderer
                   items={subItem().submenu?.items ?? []}
-                  level={[...props.level ?? [], subItem().commandId]}
+                  level={[...(props.level ?? []), subItem().commandId]}
                   onClick={props.onClick}
                 />
               </PanelItem>
@@ -143,11 +163,13 @@ const PanelRenderer = (props: PanelRendererProps) => {
                 chip={subItem().sublabel}
                 toolTip={subItem().toolTip}
                 commandId={subItem().commandId}
-                onChange={() => props.onClick?.(subItem().commandId, radioGroup())}
+                onChange={() =>
+                  props.onClick?.(subItem().commandId, radioGroup())
+                }
               />
             </Match>
             <Match when={subItem().type === 'separator'}>
-              <hr class={separatorStyle()}/>
+              <hr class={separatorStyle()} />
             </Match>
           </Switch>
         </Show>
@@ -169,8 +191,13 @@ export const TitleBar = (props: TitleBarProps) => {
   const [menu, setMenu] = createSignal<Menu | null>(null);
   const [mouseY, setMouseY] = createSignal(0);
 
-  const [data, { refetch }] = createResource(async () => await props.ipc.invoke('get-menu') as Promise<Menu | null>);
-  const [isMaximized, { refetch: refetchMaximize }] = createResource(async () => await props.ipc.invoke('window-is-maximized') as Promise<boolean>);
+  const [data, { refetch }] = createResource(
+    async () => (await props.ipc.invoke('get-menu')) as Promise<Menu | null>,
+  );
+  const [isMaximized, { refetch: refetchMaximize }] = createResource(
+    async () =>
+      (await props.ipc.invoke('window-is-maximized')) as Promise<boolean>,
+  );
 
   const handleToggleMaximize = async () => {
     if (isMaximized()) {
@@ -194,10 +221,12 @@ export const TitleBar = (props: TitleBarProps) => {
     )) as MenuItem | null;
 
     const newMenu = structuredClone(originalMenu);
-    const stack = [...newMenu?.items ?? []];
+    const stack = [...(newMenu?.items ?? [])];
     let now: MenuItem | undefined = stack.pop();
     while (now) {
-      const index = now?.submenu?.items?.findIndex((it) => it.commandId === commandId) ?? -1;
+      const index =
+        now?.submenu?.items?.findIndex((it) => it.commandId === commandId) ??
+        -1;
 
       if (index >= 0) {
         if (menuItem) now?.submenu?.items?.splice(index, 1, menuItem);
@@ -213,13 +242,16 @@ export const TitleBar = (props: TitleBarProps) => {
     return newMenu;
   };
 
-  const handleItemClick = async (commandId: number, radioGroup?: MenuItem[]) => {
+  const handleItemClick = async (
+    commandId: number,
+    radioGroup?: MenuItem[],
+  ) => {
     const menuData = menu();
     if (!menuData) return;
 
     if (Array.isArray(radioGroup)) {
       let newMenu = menuData;
-      for await (const item of radioGroup) {
+      for (const item of radioGroup) {
         newMenu = await refreshMenuItem(newMenu, item.commandId);
       }
 
@@ -272,18 +304,15 @@ export const TitleBar = (props: TitleBarProps) => {
     window.addEventListener('mousemove', listener);
     const ytmusicAppLayout = document.querySelector<HTMLElement>('#layout');
     ytmusicAppLayout?.addEventListener('scroll', () => {
-    const scrollValue = ytmusicAppLayout.scrollTop;
-    if (scrollValue > 20){
-      ytmusicAppLayout.classList.add('content-scrolled');
-    }
-    else{
-      ytmusicAppLayout.classList.remove('content-scrolled');
-    }
+      const scrollValue = ytmusicAppLayout.scrollTop;
+      if (scrollValue > 20) {
+        ytmusicAppLayout.classList.add('content-scrolled');
+      } else {
+        ytmusicAppLayout.classList.remove('content-scrolled');
+      }
     });
   });
 
-
-
   createEffect(() => {
     if (!menu() && data()) {
       setMenu(data() ?? null);
@@ -295,7 +324,12 @@ export const TitleBar = (props: TitleBarProps) => {
   });
 
   return (
-    <nav data-ytmd-main-panel={true} class={titleStyle()} data-macos={props.isMacOS} data-show={mouseY() < 32}>
+    <nav
+      data-ytmd-main-panel={true}
+      class={titleStyle()}
+      data-macos={props.isMacOS}
+      data-show={mouseY() < 32}
+    >
       <IconButton
         onClick={() => setCollapsed(!collapsed())}
         style={{
@@ -310,15 +344,34 @@ export const TitleBar = (props: TitleBarProps) => {
         </svg>
       </IconButton>
       <TransitionGroup
-        enterClass={ignoreTransition() ? animationStyle().fakeTarget : animationStyle().enter}
-        enterActiveClass={ignoreTransition() ? animationStyle().fake : animationStyle().enterActive}
-        exitToClass={ignoreTransition() ? animationStyle().fakeTarget : animationStyle().exitTo}
-        exitActiveClass={ignoreTransition() ? animationStyle().fake : animationStyle().exitActive}
+        enterClass={
+          ignoreTransition()
+            ? animationStyle().fakeTarget
+            : animationStyle().enter
+        }
+        enterActiveClass={
+          ignoreTransition()
+            ? animationStyle().fake
+            : animationStyle().enterActive
+        }
+        exitToClass={
+          ignoreTransition()
+            ? animationStyle().fakeTarget
+            : animationStyle().exitTo
+        }
+        exitActiveClass={
+          ignoreTransition()
+            ? animationStyle().fake
+            : animationStyle().exitActive
+        }
         onBeforeEnter={(element) => {
           if (ignoreTransition()) return;
           const index = Number(element.getAttribute('data-index') ?? 0);
 
-          (element as HTMLElement).style.setProperty('transition-delay', `${(index * 0.025)}s`);
+          (element as HTMLElement).style.setProperty(
+            'transition-delay',
+            `${index * 0.025}s`,
+          );
         }}
         onAfterEnter={(element) => {
           (element as HTMLElement).style.removeProperty('transition-delay');
@@ -328,13 +381,18 @@ export const TitleBar = (props: TitleBarProps) => {
           const index = Number(element.getAttribute('data-index') ?? 0);
           const length = Number(element.getAttribute('data-length') ?? 1);
 
-          (element as HTMLElement).style.setProperty('transition-delay', `${(length * 0.025) - (index * 0.025)}s`);
+          (element as HTMLElement).style.setProperty(
+            'transition-delay',
+            `${length * 0.025 - index * 0.025}s`,
+          );
         }}
       >
         <Show when={!collapsed()}>
           <Index each={menu()?.items}>
             {(item, index) => {
-              const [anchor, setAnchor] = createSignal<HTMLElement | null>(null);
+              const [anchor, setAnchor] = createSignal<HTMLElement | null>(
+                null,
+              );
 
               const handleClick = () => {
                 if (openTarget() === anchor()) {
@@ -372,7 +430,7 @@ export const TitleBar = (props: TitleBarProps) => {
         </Show>
       </TransitionGroup>
       <Show when={props.enableController}>
-        <div style={{ flex: 1 }}/>
+        <div style={{ flex: 1 }} />
         <WindowController
           isMaximize={isMaximized()}
           onToggleMaximize={handleToggleMaximize}
@@ -383,4 +441,3 @@ export const TitleBar = (props: TitleBarProps) => {
     </nav>
   );
 };
-

src/plugins/in-app-menu/renderer/WindowController.tsx

@@ -4,19 +4,21 @@ import { Show } from 'solid-js';
 import { IconButton } from './IconButton';
 import { cacheNoArgs } from '@/providers/decorators';
 
-const containerStyle = cacheNoArgs(() => css`
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
+const containerStyle = cacheNoArgs(
+  () => css`
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
 
-  & > *:last-of-type {
-    border-top-right-radius: 4px;
+    & > *:last-of-type {
+      border-top-right-radius: 4px;
 
-    &:hover {
-      background: rgba(255, 0, 0, 0.5);
+      &:hover {
+        background: rgba(255, 0, 0, 0.5);
+      }
     }
-  }
-`);
+  `,
+);
 
 export type WindowControllerProps = {
   isMaximize?: boolean;
@@ -24,20 +26,35 @@ export type WindowControllerProps = {
   onToggleMaximize?: () => void;
   onMinimize?: () => void;
   onClose?: () => void;
-}
+};
 export const WindowController = (props: WindowControllerProps) => {
   return (
     <div class={containerStyle()}>
       <IconButton onClick={props.onMinimize}>
-        <svg width={16} height={16} fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-          <path fill="currentColor" d="M3.755 12.5h16.492a.75.75 0 0 0 0-1.5H3.755a.75.75 0 0 0 0 1.5Z"/>
+        <svg
+          width={16}
+          height={16}
+          fill="none"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            fill="currentColor"
+            d="M3.755 12.5h16.492a.75.75 0 0 0 0-1.5H3.755a.75.75 0 0 0 0 1.5Z"
+          />
         </svg>
       </IconButton>
       <IconButton onClick={props.onToggleMaximize}>
         <Show
           when={props.isMaximize}
           fallback={
-            <svg width={16} height={16} fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <svg
+              width={16}
+              height={16}
+              fill="none"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
               <path
                 fill="currentColor"
                 d="M6 3h12a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3Zm0 2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1H6Z"
@@ -45,7 +62,13 @@ export const WindowController = (props: WindowControllerProps) => {
             </svg>
           }
         >
-          <svg width={16} height={16} fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <svg
+            width={16}
+            height={16}
+            fill="none"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
             <path
               fill="currentColor"
               d="M7.518 5H6.009a3.25 3.25 0 0 1 3.24-3h8.001A4.75 4.75 0 0 1 22 6.75v8a3.25 3.25 0 0 1-3 3.24v-1.508a1.75 1.75 0 0 0 1.5-1.732v-8a3.25 3.25 0 0 0-3.25-3.25h-8A1.75 1.75 0 0 0 7.518 5ZM5.25 6A3.25 3.25 0 0 0 2 9.25v9.5A3.25 3.25 0 0 0 5.25 22h9.5A3.25 3.25 0 0 0 18 18.75v-9.5A3.25 3.25 0 0 0 14.75 6h-9.5ZM3.5 9.25c0-.966.784-1.75 1.75-1.75h9.5c.967 0 1.75.784 1.75 1.75v9.5a1.75 1.75 0 0 1-1.75 1.75h-9.5a1.75 1.75 0 0 1-1.75-1.75v-9.5Z"
@@ -54,7 +77,13 @@ export const WindowController = (props: WindowControllerProps) => {
         </Show>
       </IconButton>
       <IconButton onClick={props.onClose}>
-        <svg width={16} height={16} fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <svg
+          width={16}
+          height={16}
+          fill="none"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
           <path
             fill="currentColor"
             d="m4.21 4.387.083-.094a1 1 0 0 1 1.32-.083l.094.083L12 10.585l6.293-6.292a1 1 0 1 1 1.414 1.414L13.415 12l6.292 6.293a1 1 0 0 1 .083 1.32l-.083.094a1 1 0 0 1-1.32.083l-.094-.083L12 13.415l-6.293 6.292a1 1 0 0 1-1.414-1.414L10.585 12 4.293 5.707a1 1 0 0 1-.083-1.32l.083-.094-.083.094Z"

src/plugins/lyrics-genius/renderer.ts

@@ -77,7 +77,7 @@ export const onRendererLoad = ({
           applyLyricsTabState();
         }
       };
-      
+
       const applyLyricsTabState = () => {
         if (lyrics) {
           tabs.lyrics.removeAttribute('disabled');

src/plugins/music-together/connection.ts

@@ -3,13 +3,15 @@ import { DataConnection, Peer } from 'peerjs';
 import type { Permission, Profile, VideoData } from './types';
 
 export type ConnectionEventMap = {
-  ADD_SONGS: { videoList: VideoData[], index?: number };
+  ADD_SONGS: { videoList: VideoData[]; index?: number };
   REMOVE_SONG: { index: number };
   MOVE_SONG: { fromIndex: number; toIndex: number };
   IDENTIFY: { profile: Profile } | undefined;
   SYNC_PROFILE: { profiles: Record<string, Profile> } | undefined;
   SYNC_QUEUE: { videoList: VideoData[] } | undefined;
-  SYNC_PROGRESS: { progress?: number; state?: number; index?: number; } | undefined;
+  SYNC_PROGRESS:
+    | { progress?: number; state?: number; index?: number }
+    | undefined;
   PERMISSION: Permission | undefined;
 };
 export type ConnectionEventUnion = {
@@ -24,9 +26,12 @@ type PromiseUtil<T> = {
   promise: Promise<T>;
   resolve: (id: T) => void;
   reject: (err: unknown) => void;
-}
+};
 
-export type ConnectionListener = (event: ConnectionEventUnion, conn: DataConnection) => void;
+export type ConnectionListener = (
+  event: ConnectionEventUnion,
+  conn: DataConnection,
+) => void;
 export type ConnectionMode = 'host' | 'guest' | 'disconnected';
 export class Connection {
   private peer: Peer;
@@ -95,9 +100,12 @@ export class Connection {
     return Object.values(this.connections);
   }
 
-  public async broadcast<Event extends keyof ConnectionEventMap>(type: Event, payload: ConnectionEventMap[Event]) {
+  public async broadcast<Event extends keyof ConnectionEventMap>(
+    type: Event,
+    payload: ConnectionEventMap[Event],
+  ) {
     await Promise.all(
-      this.getConnections().map((conn) => conn.send({ type, payload }))
+      this.getConnections().map((conn) => conn.send({ type, payload })),
     );
   }
 
@@ -125,7 +133,13 @@ export class Connection {
         this.connectionListeners.forEach((listener) => listener(conn));
 
         conn.on('data', (data) => {
-          if (!data || typeof data !== 'object' || !('type' in data) || !('payload' in data) || !data.type) {
+          if (
+            !data ||
+            typeof data !== 'object' ||
+            !('type' in data) ||
+            !('payload' in data) ||
+            !data.type
+          ) {
             console.warn('Music Together: Invalid data', data);
             return;
           }

src/plugins/music-together/element.ts

@@ -4,7 +4,7 @@ import itemHTML from './templates/item.html?raw';
 import popupHTML from './templates/popup.html?raw';
 
 type Placement =
-  'top'
+  | 'top'
   | 'bottom'
   | 'right'
   | 'left'
@@ -15,32 +15,40 @@ type Placement =
   | 'top-right'
   | 'bottom-left'
   | 'bottom-right';
-type PopupItem = (ItemRendererProps & { type: 'item'; })
-  | { type: 'divider'; }
-  | { type: 'custom'; element: HTMLElement; };
+type PopupItem =
+  | (ItemRendererProps & { type: 'item' })
+  | { type: 'divider' }
+  | { type: 'custom'; element: HTMLElement };
 
 type PopupProps = {
   data: PopupItem[];
   anchorAt?: Placement;
   popupAt?: Placement;
-}
+};
 export const Popup = (props: PopupProps) => {
   const popup = ElementFromHtml(popupHTML);
-  const container = popup.querySelector<HTMLElement>('.music-together-popup-container')!;
+  const container = popup.querySelector<HTMLElement>(
+    '.music-together-popup-container',
+  )!;
   const items = props.data
     .map((props) => {
-      if (props.type === 'item') return {
-        type: 'item' as const,
-        ...ItemRenderer(props),
-      };
-      if (props.type === 'divider') return {
-        type: 'divider' as const,
-        element: ElementFromHtml('<div class="music-together-divider horizontal"></div>'),
-      };
-      if (props.type === 'custom') return {
-        type: 'custom' as const,
-        element: props.element,
-      };
+      if (props.type === 'item')
+        return {
+          type: 'item' as const,
+          ...ItemRenderer(props),
+        };
+      if (props.type === 'divider')
+        return {
+          type: 'divider' as const,
+          element: ElementFromHtml(
+            '<div class="music-together-divider horizontal"></div>',
+          ),
+        };
+      if (props.type === 'custom')
+        return {
+          type: 'custom' as const,
+          element: props.element,
+        };
 
       return null;
     })
@@ -80,7 +88,9 @@ export const Popup = (props: PopupProps) => {
 
       setTimeout(() => {
         const onClose = (event: MouseEvent) => {
-          const isPopupClick = event.composedPath().some((element) => element === popup);
+          const isPopupClick = event
+            .composedPath()
+            .some((element) => element === popup);
           if (!isPopupClick) {
             this.dismiss();
             document.removeEventListener('click', onClose);
@@ -101,7 +111,7 @@ export const Popup = (props: PopupProps) => {
     dismiss() {
       popup.style.setProperty('opacity', '0');
       popup.style.setProperty('pointer-events', 'none');
-    }
+    },
   };
 };
 
@@ -133,6 +143,6 @@ export const ItemRenderer = (props: ItemRendererProps) => {
     setText(text: string) {
       textContainer.replaceChildren(text);
     },
-    id: props.id
+    id: props.id,
   };
 };

src/plugins/music-together/index.ts

@@ -6,7 +6,12 @@ import { t } from '@/i18n';
 import { createPlugin } from '@/utils';
 import promptOptions from '@/providers/prompt-options';
 
-import { getDefaultProfile, type Permission, type Profile, type VideoData } from './types';
+import {
+  getDefaultProfile,
+  type Permission,
+  type Profile,
+  type VideoData,
+} from './types';
 import { Queue } from './queue';
 import { Connection, type ConnectionEventUnion } from './connection';
 import { createHostPopup } from './ui/host';
@@ -26,7 +31,7 @@ type RawAccountData = {
     runs: { text: string }[];
   };
   accountPhoto: {
-    thumbnails: { url: string; width: number; height: number; }[];
+    thumbnails: { url: string; width: number; height: number }[];
   };
   settingsEndpoint: unknown;
   manageAccountTitle: unknown;
@@ -59,7 +64,7 @@ export default createPlugin<
     stateInterval?: number;
     updateNext: boolean;
     ignoreChange: boolean;
-    rollbackInjector?: (() => void);
+    rollbackInjector?: () => void;
     me?: Omit<Profile, 'id'>;
     profiles: Record<string, Profile>;
     permission: Permission;
@@ -79,16 +84,18 @@ export default createPlugin<
   restartNeeded: false,
   addedVersion: '3.2.X',
   config: {
-    enabled: false
+    enabled: false,
   },
   stylesheets: [style],
   backend({ ipc }) {
-    ipc.handle('music-together:prompt', async (title: string, label: string) => prompt({
-      title,
-      label,
-      type: 'input',
-      ...promptOptions()
-    }));
+    ipc.handle('music-together:prompt', async (title: string, label: string) =>
+      prompt({
+        title,
+        label,
+        type: 'input',
+        ...promptOptions(),
+      }),
+    );
   },
   renderer: {
     updateNext: false,
@@ -112,15 +119,19 @@ export default createPlugin<
     videoChangeListener(event: CustomEvent<VideoDataChanged>) {
       if (event.detail.name === 'dataloaded' || this.updateNext) {
         if (this.connection?.mode === 'host') {
-          const videoList: VideoData[] = this.queue?.flatItems.map((it) => ({
-            videoId: it!.videoId,
-            ownerId: this.connection!.id
-          } satisfies VideoData)) ?? [];
+          const videoList: VideoData[] =
+            this.queue?.flatItems.map(
+              (it) =>
+                ({
+                  videoId: it!.videoId,
+                  ownerId: this.connection!.id,
+                }) satisfies VideoData,
+            ) ?? [];
 
           this.queue?.setVideoList(videoList, false);
           this.queue?.syncQueueOwner();
           this.connection.broadcast('SYNC_QUEUE', {
-            videoList
+            videoList,
           });
 
           this.updateNext = event.detail.name === 'dataloaded';
@@ -138,7 +149,7 @@ export default createPlugin<
 
       this.connection.broadcast('SYNC_PROGRESS', {
         // progress: this.playerApi?.getCurrentTime(),
-        state: this.playerApi?.getPlayerState()
+        state: this.playerApi?.getPlayerState(),
         // index: this.queue?.selectedIndex ?? 0,
       });
     },
@@ -150,13 +161,17 @@ export default createPlugin<
       if (!wait) return false;
 
       if (!this.me) this.me = getDefaultProfile(this.connection.id);
-      const rawItems = this.queue?.flatItems?.map((it) => ({
-        videoId: it!.videoId,
-        ownerId: this.connection!.id
-      } satisfies VideoData)) ?? [];
+      const rawItems =
+        this.queue?.flatItems?.map(
+          (it) =>
+            ({
+              videoId: it!.videoId,
+              ownerId: this.connection!.id,
+            }) satisfies VideoData,
+        ) ?? [];
       this.queue?.setOwner({
         id: this.connection.id,
-        ...this.me
+        ...this.me,
       });
       this.queue?.setVideoList(rawItems, false);
       this.queue?.syncQueueOwner();
@@ -166,31 +181,41 @@ export default createPlugin<
       this.profiles = {};
       this.connection.onConnections((connection) => {
         if (!connection) {
-          this.api?.openToast(t('plugins.music-together.toast.disconnected'));
+          this.api?.toastService?.show(
+            t('plugins.music-together.toast.disconnected'),
+          );
           this.onStop();
           return;
         }
 
         if (!connection.open) {
-          this.api?.openToast(t('plugins.music-together.toast.user-disconnected', {
-            name: this.profiles[connection.peer]?.name
-          }));
+          this.api?.toastService?.show(
+            t('plugins.music-together.toast.user-disconnected', {
+              name: this.profiles[connection.peer]?.name,
+            }),
+          );
           this.putProfile(connection.peer, undefined);
         }
       });
       this.putProfile(this.connection.id, {
         id: this.connection.id,
-        ...this.me
+        ...this.me,
       });
 
-      const listener = async (event: ConnectionEventUnion, conn?: DataConnection) => {
+      const listener = async (
+        event: ConnectionEventUnion,
+        conn?: DataConnection,
+      ) => {
         this.ignoreChange = true;
 
         switch (event.type) {
           case 'ADD_SONGS': {
             if (conn && this.permission === 'host-only') return;
 
-            await this.queue?.addVideos(event.payload.videoList, event.payload.index);
+            await this.queue?.addVideos(
+              event.payload.videoList,
+              event.payload.index,
+            );
             await this.connection?.broadcast('ADD_SONGS', event.payload);
             break;
           }
@@ -204,27 +229,38 @@ export default createPlugin<
           case 'MOVE_SONG': {
             if (conn && this.permission === 'host-only') {
               await this.connection?.broadcast('SYNC_QUEUE', {
-                videoList: this.queue?.videoList ?? []
+                videoList: this.queue?.videoList ?? [],
               });
               break;
             }
 
-            this.queue?.moveItem(event.payload.fromIndex, event.payload.toIndex);
+            this.queue?.moveItem(
+              event.payload.fromIndex,
+              event.payload.toIndex,
+            );
             await this.connection?.broadcast('MOVE_SONG', event.payload);
             break;
           }
           case 'IDENTIFY': {
             if (!event.payload || !conn) {
-              console.warn('Music Together [Host]: Received "IDENTIFY" event without payload or connection');
+              console.warn(
+                'Music Together [Host]: Received "IDENTIFY" event without payload or connection',
+              );
               break;
             }
 
-            this.api?.openToast(t('plugins.music-together.toast.user-connected', { name: event.payload.profile.name }));
+            this.api?.toastService?.show(
+              t('plugins.music-together.toast.user-connected', {
+                name: event.payload.profile.name,
+              }),
+            );
             this.putProfile(conn.peer, event.payload.profile);
             break;
           }
           case 'SYNC_PROFILE': {
-            await this.connection?.broadcast('SYNC_PROFILE', { profiles: this.profiles });
+            await this.connection?.broadcast('SYNC_PROFILE', {
+              profiles: this.profiles,
+            });
 
             break;
           }
@@ -237,7 +273,7 @@ export default createPlugin<
           }
           case 'SYNC_QUEUE': {
             await this.connection?.broadcast('SYNC_QUEUE', {
-              videoList: this.queue?.videoList ?? []
+              videoList: this.queue?.videoList ?? [],
             });
             break;
           }
@@ -251,7 +287,8 @@ export default createPlugin<
             if (permissionLevel >= 2) {
               if (typeof event.payload?.progress === 'number') {
                 const currentTime = this.playerApi?.getCurrentTime() ?? 0;
-                if (Math.abs(event.payload.progress - currentTime) > 3) this.playerApi?.seekTo(event.payload.progress);
+                if (Math.abs(event.payload.progress - currentTime) > 3)
+                  this.playerApi?.seekTo(event.payload.progress);
               }
               if (this.playerApi?.getPlayerState() !== event.payload?.state) {
                 if (event.payload?.state === 2) this.playerApi?.pauseVideo();
@@ -300,25 +337,32 @@ export default createPlugin<
 
       this.profiles = {};
 
-      const id = await this.showPrompt(t('plugins.music-together.name'), t('plugins.music-together.dialog.enter-host'));
+      const id = await this.showPrompt(
+        t('plugins.music-together.name'),
+        t('plugins.music-together.dialog.enter-host'),
+      );
       if (typeof id !== 'string') return false;
 
       const connection = await this.connection.connect(id).catch(() => false);
       if (!connection) return false;
       this.connection.onConnections((connection) => {
         if (!connection?.open) {
-          this.api?.openToast(t('plugins.music-together.toast.disconnected'));
+          this.api?.toastService?.show(
+            t('plugins.music-together.toast.disconnected'),
+          );
           this.onStop();
         }
       });
 
-
       let resolveIgnore: number | null = null;
       const listener = async (event: ConnectionEventUnion) => {
         this.ignoreChange = true;
         switch (event.type) {
           case 'ADD_SONGS': {
-            await this.queue?.addVideos(event.payload.videoList, event.payload.index);
+            await this.queue?.addVideos(
+              event.payload.videoList,
+              event.payload.index,
+            );
             break;
           }
           case 'REMOVE_SONG': {
@@ -326,11 +370,16 @@ export default createPlugin<
             break;
           }
           case 'MOVE_SONG': {
-            this.queue?.moveItem(event.payload.fromIndex, event.payload.toIndex);
+            this.queue?.moveItem(
+              event.payload.fromIndex,
+              event.payload.toIndex,
+            );
             break;
           }
           case 'IDENTIFY': {
-            console.warn('Music Together [Guest]: Received "IDENTIFY" event from guest');
+            console.warn(
+              'Music Together [Guest]: Received "IDENTIFY" event from guest',
+            );
             break;
           }
           case 'SYNC_QUEUE': {
@@ -341,7 +390,9 @@ export default createPlugin<
           }
           case 'SYNC_PROFILE': {
             if (!event.payload) {
-              console.warn('Music Together [Guest]: Received "SYNC_PROFILE" event without payload');
+              console.warn(
+                'Music Together [Guest]: Received "SYNC_PROFILE" event without payload',
+              );
               break;
             }
 
@@ -353,7 +404,8 @@ export default createPlugin<
           case 'SYNC_PROGRESS': {
             if (typeof event.payload?.progress === 'number') {
               const currentTime = this.playerApi?.getCurrentTime() ?? 0;
-              if (Math.abs(event.payload.progress - currentTime) > 3) this.playerApi?.seekTo(event.payload.progress);
+              if (Math.abs(event.payload.progress - currentTime) > 3)
+                this.playerApi?.seekTo(event.payload.progress);
             }
             if (this.playerApi?.getPlayerState() !== event.payload?.state) {
               if (event.payload?.state === 2) this.playerApi?.pauseVideo();
@@ -370,7 +422,9 @@ export default createPlugin<
           }
           case 'PERMISSION': {
             if (!event.payload) {
-              console.warn('Music Together [Guest]: Received "PERMISSION" event without payload');
+              console.warn(
+                'Music Together [Guest]: Received "PERMISSION" event without payload',
+              );
               break;
             }
 
@@ -379,9 +433,15 @@ export default createPlugin<
             this.popups.host.setPermission(this.permission);
             this.popups.setting.setPermission(this.permission);
 
-            const permissionLabel = t(`plugins.music-together.menu.permission.${this.permission}`);
+            const permissionLabel = t(
+              `plugins.music-together.menu.permission.${this.permission}`,
+            );
 
-            this.api?.openToast(t('plugins.music-together.toast.permission-changed', { permission: permissionLabel }));
+            this.api?.toastService?.show(
+              t('plugins.music-together.toast.permission-changed', {
+                permission: permissionLabel,
+              }),
+            );
             break;
           }
           default: {
@@ -415,8 +475,10 @@ export default createPlugin<
             break;
           }
           case 'SYNC_PROGRESS': {
-            if (this.permission === 'host-only') await this.connection?.broadcast('SYNC_QUEUE', undefined);
-            else await this.connection?.broadcast('SYNC_PROGRESS', event.payload);
+            if (this.permission === 'host-only')
+              await this.connection?.broadcast('SYNC_QUEUE', undefined);
+            else
+              await this.connection?.broadcast('SYNC_PROGRESS', event.payload);
             break;
           }
         }
@@ -431,12 +493,16 @@ export default createPlugin<
       this.queue?.injection();
       this.queue?.setOwner({
         id: this.connection.id,
-        ...this.me
+        ...this.me,
       });
 
-      const progress = Array.from(document.querySelectorAll<HTMLElement & {
-        _update: (...args: unknown[]) => void
-      }>('tp-yt-paper-progress'));
+      const progress = Array.from(
+        document.querySelectorAll<
+          HTMLElement & {
+            _update: (...args: unknown[]) => void;
+          }
+        >('tp-yt-paper-progress'),
+      );
       const rollbackList = progress.map((progress) => {
         const original = progress._update;
         progress._update = (...args) => {
@@ -444,10 +510,11 @@ export default createPlugin<
 
           if (this.permission === 'all' && typeof now === 'number') {
             const currentTime = this.playerApi?.getCurrentTime() ?? 0;
-            if (Math.abs(now - currentTime) > 3) this.connection?.broadcast('SYNC_PROGRESS', {
-              progress: now,
-              state: this.playerApi?.getPlayerState()
-            });
+            if (Math.abs(now - currentTime) > 3)
+              this.connection?.broadcast('SYNC_PROGRESS', {
+                progress: now,
+                state: this.playerApi?.getPlayerState(),
+              });
           }
 
           original.call(progress, ...args);
@@ -466,8 +533,8 @@ export default createPlugin<
           id: this.connection.id,
           handleId: this.me.handleId,
           name: this.me.name,
-          thumbnail: this.me.thumbnail
-        }
+          thumbnail: this.me.thumbnail,
+        },
       });
 
       this.connection.broadcast('SYNC_PROFILE', undefined);
@@ -525,14 +592,18 @@ export default createPlugin<
     },
 
     initMyProfile() {
-      const accountButton = document.querySelector<HTMLElement & {
-        onButtonTap: () => void
-      }>('ytmusic-settings-button');
+      const accountButton = document.querySelector<
+        HTMLElement & {
+          onButtonTap: () => void;
+        }
+      >('ytmusic-settings-button');
 
       accountButton?.onButtonTap();
       setTimeout(() => {
         accountButton?.onButtonTap();
-        const renderer = document.querySelector<HTMLElement & { data: unknown }>('ytd-active-account-header-renderer');
+        const renderer = document.querySelector<
+          HTMLElement & { data: unknown }
+        >('ytd-active-account-header-renderer');
         if (!accountButton || !renderer) {
           console.warn('Music Together: Cannot find account');
           this.me = getDefaultProfile(this.connection?.id ?? '');
@@ -543,7 +614,7 @@ export default createPlugin<
         this.me = {
           handleId: accountData.channelHandle.runs[0].text,
           name: accountData.accountName.runs[0].text,
-          thumbnail: accountData.accountPhoto.thumbnails[0].url
+          thumbnail: accountData.accountPhoto.thumbnails[0].url,
         };
 
         if (this.me.thumbnail) {
@@ -557,14 +628,23 @@ export default createPlugin<
 
     start({ ipc }) {
       this.ipc = ipc;
-      this.showPrompt = async (title: string, label: string) => ipc.invoke('music-together:prompt', title, label) as Promise<string>;
+      this.showPrompt = async (title: string, label: string) =>
+        ipc.invoke('music-together:prompt', title, label) as Promise<string>;
       this.api = document.querySelector<AppElement>('ytmusic-app');
 
       /* setup */
-      document.querySelector('#right-content > ytmusic-settings-button')?.insertAdjacentHTML('beforebegin', settingHTML);
-      const setting = document.querySelector<HTMLElement>('#music-together-setting-button');
-      const icon = document.querySelector<SVGElement>('#music-together-setting-button > svg');
-      const spinner = document.querySelector<HTMLElement>('#music-together-setting-button > tp-yt-paper-spinner-lite');
+      document
+        .querySelector('#right-content > ytmusic-settings-button')
+        ?.insertAdjacentHTML('beforebegin', settingHTML);
+      const setting = document.querySelector<HTMLElement>(
+        '#music-together-setting-button',
+      );
+      const icon = document.querySelector<SVGElement>(
+        '#music-together-setting-button > svg',
+      );
+      const spinner = document.querySelector<HTMLElement>(
+        '#music-together-setting-button > tp-yt-paper-spinner-lite',
+      );
       if (!setting || !icon || !spinner) {
         console.warn('Music Together: Cannot inject html');
         console.log(setting, icon, spinner);
@@ -574,7 +654,7 @@ export default createPlugin<
       this.elements = {
         setting,
         icon,
-        spinner
+        spinner,
       };
 
       this.stateInterval = window.setInterval(() => {
@@ -584,7 +664,7 @@ export default createPlugin<
         this.connection.broadcast('SYNC_PROGRESS', {
           progress: this.playerApi?.getCurrentTime(),
           state: this.playerApi?.getPlayerState(),
-          index
+          index,
         });
       }, 1000);
 
@@ -593,18 +673,25 @@ export default createPlugin<
         onItemClick: (id) => {
           if (id === 'music-together-close') {
             this.onStop();
-            this.api?.openToast(t('plugins.music-together.toast.closed'));
+            this.api?.toastService?.show(
+              t('plugins.music-together.toast.closed'),
+            );
             hostPopup.dismiss();
           }
 
           if (id === 'music-together-copy-id') {
-            navigator.clipboard.writeText(this.connection?.id ?? '')
+            navigator.clipboard
+              .writeText(this.connection?.id ?? '')
               .then(() => {
-                this.api?.openToast(t('plugins.music-together.toast.id-copied'));
+                this.api?.toastService?.show(
+                  t('plugins.music-together.toast.id-copied'),
+                );
                 hostPopup.dismiss();
               })
               .catch(() => {
-                this.api?.openToast(t('plugins.music-together.toast.id-copy-failed'));
+                this.api?.toastService?.show(
+                  t('plugins.music-together.toast.id-copy-failed'),
+                );
                 hostPopup.dismiss();
               });
           }
@@ -612,30 +699,39 @@ export default createPlugin<
           if (id === 'music-together-permission') {
             if (this.permission === 'all') this.permission = 'host-only';
             else if (this.permission === 'playlist') this.permission = 'all';
-            else if (this.permission === 'host-only') this.permission = 'playlist';
+            else if (this.permission === 'host-only')
+              this.permission = 'playlist';
             this.connection?.broadcast('PERMISSION', this.permission);
 
             hostPopup.setPermission(this.permission);
             guestPopup.setPermission(this.permission);
             settingPopup.setPermission(this.permission);
 
-            const permissionLabel = t(`plugins.music-together.menu.permission.${this.permission}`);
-            this.api?.openToast(t('plugins.music-together.toast.permission-changed', { permission: permissionLabel }));
+            const permissionLabel = t(
+              `plugins.music-together.menu.permission.${this.permission}`,
+            );
+            this.api?.toastService?.show(
+              t('plugins.music-together.toast.permission-changed', {
+                permission: permissionLabel,
+              }),
+            );
             const item = hostPopup.items.find((it) => it?.element.id === id);
             if (item?.type === 'item') {
               item.setText(t('plugins.music-together.menu.set-permission'));
             }
           }
-        }
+        },
       });
       const guestPopup = createGuestPopup({
         onItemClick: (id) => {
           if (id === 'music-together-disconnect') {
             this.onStop();
-            this.api?.openToast(t('plugins.music-together.toast.disconnected'));
+            this.api?.toastService?.show(
+              t('plugins.music-together.toast.disconnected'),
+            );
             guestPopup.dismiss();
           }
-        }
+        },
       });
       const settingPopup = createSettingPopup({
         onItemClick: async (id) => {
@@ -646,16 +742,24 @@ export default createPlugin<
             this.hideSpinner();
 
             if (result) {
-              navigator.clipboard.writeText(this.connection?.id ?? '')
+              navigator.clipboard
+                .writeText(this.connection?.id ?? '')
                 .then(() => {
-                  this.api?.openToast(t('plugins.music-together.toast.id-copied'));
+                  this.api?.toastService?.show(
+                    t('plugins.music-together.toast.id-copied'),
+                  );
                   hostPopup.showAtAnchor(setting);
-                }).catch(() => {
-                  this.api?.openToast(t('plugins.music-together.toast.id-copy-failed'));
+                })
+                .catch(() => {
+                  this.api?.toastService?.show(
+                    t('plugins.music-together.toast.id-copy-failed'),
+                  );
                   hostPopup.showAtAnchor(setting);
                 });
             } else {
-              this.api?.openToast(t('plugins.music-together.toast.host-failed'));
+              this.api?.toastService?.show(
+                t('plugins.music-together.toast.host-failed'),
+              );
             }
           }
 
@@ -666,18 +770,22 @@ export default createPlugin<
             this.hideSpinner();
 
             if (result) {
-              this.api?.openToast(t('plugins.music-together.toast.joined'));
+              this.api?.toastService?.show(
+                t('plugins.music-together.toast.joined'),
+              );
               guestPopup.showAtAnchor(setting);
             } else {
-              this.api?.openToast(t('plugins.music-together.toast.join-failed'));
+              this.api?.toastService?.show(
+                t('plugins.music-together.toast.join-failed'),
+              );
             }
           }
-        }
+        },
       });
       this.popups = {
         host: hostPopup,
         guest: guestPopup,
-        setting: settingPopup
+        setting: settingPopup,
       };
       setting.addEventListener('click', () => {
         let popup = settingPopup;
@@ -695,24 +803,38 @@ export default createPlugin<
       this.queue = new Queue({
         owner: {
           id: this.connection?.id ?? '',
-          ...this.me!
+          ...this.me!,
         },
-        getProfile: (id) => this.profiles[id]
+        getProfile: (id) => this.profiles[id],
       });
       this.playerApi = playerApi;
 
-      this.playerApi.addEventListener('onStateChange', this.videoStateChangeListener);
+      this.playerApi.addEventListener(
+        'onStateChange',
+        this.videoStateChangeListener,
+      );
       document.addEventListener('videodatachange', this.videoChangeListener);
     },
     stop() {
-      const dividers = Array.from(document.querySelectorAll('.music-together-divider'));
+      const dividers = Array.from(
+        document.querySelectorAll('.music-together-divider'),
+      );
       dividers.forEach((divider) => divider.remove());
 
       this.elements.setting?.remove();
       this.onStop();
-      if (typeof this.stateInterval === 'number') clearInterval(this.stateInterval);
-      if (this.playerApi) this.playerApi.removeEventListener('onStateChange', this.videoStateChangeListener);
-      if (this.videoChangeListener) document.removeEventListener('videodatachange', this.videoChangeListener);
-    }
-  }
+      if (typeof this.stateInterval === 'number')
+        clearInterval(this.stateInterval);
+      if (this.playerApi)
+        this.playerApi.removeEventListener(
+          'onStateChange',
+          this.videoStateChangeListener,
+        );
+      if (this.videoChangeListener)
+        document.removeEventListener(
+          'videodatachange',
+          this.videoChangeListener,
+        );
+    },
+  },
 });

src/plugins/music-together/queue/client.ts

@@ -1,11 +1,20 @@
 import { SHA1Hash } from './sha1hash';
 
-export const extractToken = (cookie = document.cookie) => cookie.match(/SAPISID=([^;]+);/)?.[1] ?? cookie.match(/__Secure-3PAPISID=([^;]+);/)?.[1];
+export const extractToken = (cookie = document.cookie) =>
+  cookie.match(/SAPISID=([^;]+);/)?.[1] ??
+  cookie.match(/__Secure-3PAPISID=([^;]+);/)?.[1];
 
-export const getHash = async (papisid: string, millis = Date.now(), origin: string = 'https://music.youtube.com') =>
-  (await SHA1Hash(`${millis} ${papisid} ${origin}`)).toLowerCase();
+export const getHash = async (
+  papisid: string,
+  millis = Date.now(),
+  origin: string = 'https://music.youtube.com',
+) => (await SHA1Hash(`${millis} ${papisid} ${origin}`)).toLowerCase();
 
-export const getAuthorizationHeader = async (papisid: string, millis = Date.now(), origin: string = 'https://music.youtube.com') => {
+export const getAuthorizationHeader = async (
+  papisid: string,
+  millis = Date.now(),
+  origin: string = 'https://music.youtube.com',
+) => {
   return `SAPISIDHASH ${millis}_${await getHash(papisid, millis, origin)}`;
 };
 
@@ -23,15 +32,17 @@ export const getClient = () => {
     platform: 'DESKTOP',
     timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
     locationInfo: {
-      locationPermissionAuthorizationStatus: 'LOCATION_PERMISSION_AUTHORIZATION_STATUS_UNSUPPORTED',
+      locationPermissionAuthorizationStatus:
+        'LOCATION_PERMISSION_AUTHORIZATION_STATUS_UNSUPPORTED',
     },
     musicAppInfo: {
       pwaInstallabilityStatus: 'PWA_INSTALLABILITY_STATUS_UNKNOWN',
       webDisplayMode: 'WEB_DISPLAY_MODE_BROWSER',
       storeDigitalGoodsApiSupportStatus: {
-        playStoreDigitalGoodsApiSupportStatus: 'DIGITAL_GOODS_API_SUPPORT_STATUS_UNSUPPORTED',
+        playStoreDigitalGoodsApiSupportStatus:
+          'DIGITAL_GOODS_API_SUPPORT_STATUS_UNSUPPORTED',
       },
     },
-    utcOffsetMinutes: -1 * (new Date()).getTimezoneOffset(),
+    utcOffsetMinutes: -1 * new Date().getTimezoneOffset(),
   };
 };

src/plugins/music-together/queue/queue.ts

@@ -54,46 +54,46 @@ const getHeaderPayload = (() => {
         title: {
           runs: [
             {
-              text: t('plugins.music-together.internal.track-source')
-            }
-          ]
+              text: t('plugins.music-together.internal.track-source'),
+            },
+          ],
         },
         subtitle: {
           runs: [
             {
-              text: t('plugins.music-together.name')
-            }
-          ]
+              text: t('plugins.music-together.name'),
+            },
+          ],
         },
         buttons: [
           {
             chipCloudChipRenderer: {
               style: {
-                styleType: 'STYLE_TRANSPARENT'
+                styleType: 'STYLE_TRANSPARENT',
               },
               text: {
                 runs: [
                   {
-                    text: t('plugins.music-together.internal.save')
-                  }
-                ]
+                    text: t('plugins.music-together.internal.save'),
+                  },
+                ],
               },
               navigationEndpoint: {
-                saveQueueToPlaylistCommand: {}
+                saveQueueToPlaylistCommand: {},
               },
               icon: {
-                iconType: 'ADD_TO_PLAYLIST'
+                iconType: 'ADD_TO_PLAYLIST',
               },
               accessibilityData: {
                 accessibilityData: {
-                  label: t('plugins.music-together.internal.save')
-                }
+                  label: t('plugins.music-together.internal.save'),
+                },
               },
               isSelected: false,
-              uniqueId: t('plugins.music-together.internal.save')
-            }
-          }
-        ]
+              uniqueId: t('plugins.music-together.internal.save'),
+            },
+          },
+        ],
       };
     }
 
@@ -106,7 +106,7 @@ export type QueueOptions = {
   owner?: Profile;
   queue?: QueueElement;
   getProfile: (id: string) => Profile | undefined;
-}
+};
 export type QueueEventListener = (event: ConnectionEventUnion) => void;
 
 export class Queue {
@@ -114,7 +114,7 @@ export class Queue {
 
   private originalDispatch?: (obj: {
     type: string;
-    payload?: { items?: QueueItem[] | undefined; };
+    payload?: { items?: QueueItem[] | undefined };
   }) => void;
 
   private internalDispatch = false;
@@ -126,7 +126,8 @@ export class Queue {
 
   constructor(options: QueueOptions) {
     this.getProfile = options.getProfile;
-    this.queue = options.queue ?? (document.querySelector<QueueElement>('#queue')!);
+    this.queue =
+      options.queue ?? document.querySelector<QueueElement>('#queue')!;
     this.owner = options.owner ?? null;
     this._videoList = options.videoList ?? [];
   }
@@ -139,7 +140,12 @@ export class Queue {
   }
 
   get selectedIndex() {
-    return mapQueueItem((it) => it?.selected, this.queue.queue.store.store.getState().queue.items).findIndex(Boolean) ?? 0;
+    return (
+      mapQueueItem(
+        (it) => it?.selected,
+        this.queue.queue.store.store.getState().queue.items,
+      ).findIndex(Boolean) ?? 0
+    );
   }
 
   get rawItems() {
@@ -162,7 +168,9 @@ export class Queue {
   }
 
   async addVideos(videos: VideoData[], index?: number) {
-    const response = await getMusicQueueRenderer(videos.map((it) => it.videoId));
+    const response = await getMusicQueueRenderer(
+      videos.map((it) => it.videoId),
+    );
     if (!response) return false;
 
     const items = response.queueDatas.map((it) => it?.content).filter(Boolean);
@@ -173,12 +181,16 @@ export class Queue {
     this.queue?.dispatch({
       type: 'ADD_ITEMS',
       payload: {
-        nextQueueItemId: this.queue.queue.store.store.getState().queue.nextQueueItemId,
-        index: index ?? this.queue.queue.store.store.getState().queue.items.length ?? 0,
+        nextQueueItemId:
+          this.queue.queue.store.store.getState().queue.nextQueueItemId,
+        index:
+          index ??
+          this.queue.queue.store.store.getState().queue.items.length ??
+          0,
         items,
         shuffleEnabled: false,
-        shouldAssignIds: true
-      }
+        shouldAssignIds: true,
+      },
     });
     this.internalDispatch = false;
     setTimeout(() => {
@@ -194,7 +206,7 @@ export class Queue {
     this._videoList.splice(index, 1);
     this.queue?.dispatch({
       type: 'REMOVE_ITEM',
-      payload: index
+      payload: index,
     });
     this.internalDispatch = false;
     setTimeout(() => {
@@ -207,7 +219,7 @@ export class Queue {
     this.internalDispatch = true;
     this.queue?.dispatch({
       type: 'SET_INDEX',
-      payload: index
+      payload: index,
     });
     this.internalDispatch = false;
   }
@@ -220,8 +232,8 @@ export class Queue {
       type: 'MOVE_ITEM',
       payload: {
         fromIndex,
-        toIndex
-      }
+        toIndex,
+      },
     });
     this.internalDispatch = false;
     setTimeout(() => {
@@ -234,7 +246,7 @@ export class Queue {
     this.internalDispatch = true;
     this._videoList = [];
     this.queue?.dispatch({
-      type: 'CLEAR'
+      type: 'CLEAR',
     });
     this.internalDispatch = false;
   }
@@ -253,7 +265,8 @@ export class Queue {
       return;
     }
 
-    if (this.originalDispatch) this.queue.queue.store.store.dispatch = this.originalDispatch;
+    if (this.originalDispatch)
+      this.queue.queue.store.store.dispatch = this.originalDispatch;
   }
 
   injection() {
@@ -276,40 +289,54 @@ export class Queue {
         if (event.type === 'ADD_ITEMS') {
           if (this.ignoreFlag) {
             this.ignoreFlag = false;
-            const videoList = mapQueueItem((it) => ({
-              videoId: it!.videoId,
-              ownerId: this.owner!.id
-            } satisfies VideoData), event.payload!.items!);
+            const videoList = mapQueueItem(
+              (it) =>
+                ({
+                  videoId: it!.videoId,
+                  ownerId: this.owner!.id,
+                }) satisfies VideoData,
+              event.payload!.items!,
+            );
             const index = this._videoList.length + videoList.length - 1;
 
             if (videoList.length > 0) {
-              this.broadcast({ // play
+              this.broadcast({
+                // play
                 type: 'ADD_SONGS',
                 payload: {
-                  videoList
+                  videoList,
                 },
                 after: [
                   {
                     type: 'SYNC_PROGRESS',
                     payload: {
-                      index
-                    }
-                  }
-                ]
+                      index,
+                    },
+                  },
+                ],
               });
             }
-          } else if ((event.payload as {
-            items: unknown[];
-          }).items.length === 1) {
-            this.broadcast({ // add playlist
+          } else if (
+            (
+              event.payload as {
+                items: unknown[];
+              }
+            ).items.length === 1
+          ) {
+            this.broadcast({
+              // add playlist
               type: 'ADD_SONGS',
               payload: {
                 // index: (event.payload as any).index,
-                videoList: mapQueueItem((it) => ({
-                  videoId: it!.videoId,
-                  ownerId: this.owner!.id
-                } satisfies VideoData), event.payload!.items!)
-              }
+                videoList: mapQueueItem(
+                  (it) =>
+                    ({
+                      videoId: it!.videoId,
+                      ownerId: this.owner!.id,
+                    }) satisfies VideoData,
+                  event.payload!.items!,
+                ),
+              },
             });
           }
 
@@ -320,13 +347,17 @@ export class Queue {
           this.broadcast({
             type: 'MOVE_SONG',
             payload: {
-              fromIndex: (event.payload as {
-                fromIndex: number;
-              }).fromIndex,
-              toIndex: (event.payload as {
-                toIndex: number;
-              }).toIndex
-            }
+              fromIndex: (
+                event.payload as {
+                  fromIndex: number;
+                }
+              ).fromIndex,
+              toIndex: (
+                event.payload as {
+                  toIndex: number;
+                }
+              ).toIndex,
+            },
           });
           return;
         }
@@ -334,8 +365,8 @@ export class Queue {
           this.broadcast({
             type: 'REMOVE_SONG',
             payload: {
-              index: event.payload as number
-            }
+              index: event.payload as number,
+            },
           });
           return;
         }
@@ -343,8 +374,8 @@ export class Queue {
           this.broadcast({
             type: 'SYNC_PROGRESS',
             payload: {
-              index: event.payload as number
-            }
+              index: event.payload as number,
+            },
           });
           return;
         }
@@ -355,7 +386,10 @@ export class Queue {
           event.payload = undefined;
         }
         if (event.type === 'SET_PLAYER_UI_STATE') {
-          if (event.payload as string === 'INACTIVE' && this.videoList.length > 0) {
+          if (
+            (event.payload as string) === 'INACTIVE' &&
+            this.videoList.length > 0
+          ) {
             return;
           }
         }
@@ -370,7 +404,7 @@ export class Queue {
           store: {
             ...this.queue.queue.store,
             dispatch: this.originalDispatch,
-          }
+          },
         },
       };
       this.originalDispatch?.call(fakeContext, event);
@@ -384,20 +418,22 @@ export class Queue {
     this.internalDispatch = true;
     this.queue.dispatch({
       type: 'HAS_SHOWN_AUTOPLAY',
-      payload: false
+      payload: false,
     });
     this.queue.dispatch({
       type: 'SET_HEADER',
       payload: getHeaderPayload(),
     });
     this.queue.dispatch({
-      type: 'CLEAR_STEERING_CHIPS'
+      type: 'CLEAR_STEERING_CHIPS',
     });
     this.internalDispatch = false;
   }
 
   async syncVideo() {
-    const response = await getMusicQueueRenderer(this._videoList.map((it) => it.videoId));
+    const response = await getMusicQueueRenderer(
+      this._videoList.map((it) => it.videoId),
+    );
     if (!response) return false;
 
     const items = response.queueDatas.map((it) => it.content);
@@ -407,10 +443,11 @@ export class Queue {
       type: 'UPDATE_ITEMS',
       payload: {
         items: items,
-        nextQueueItemId: this.queue.queue.store.store.getState().queue.nextQueueItemId,
+        nextQueueItemId:
+          this.queue.queue.store.store.getState().queue.nextQueueItemId,
         shouldAssignIds: true,
-        currentIndex: -1
-      }
+        currentIndex: -1,
+      },
     });
     this.internalDispatch = false;
     setTimeout(() => {
@@ -425,7 +462,9 @@ export class Queue {
     const allQueue = document.querySelectorAll('#queue');
 
     allQueue.forEach((queue) => {
-      const list = Array.from(queue?.querySelectorAll<HTMLElement>('ytmusic-player-queue-item') ?? []);
+      const list = Array.from(
+        queue?.querySelectorAll<HTMLElement>('ytmusic-player-queue-item') ?? [],
+      );
 
       list.forEach((item, index: number | undefined) => {
         if (typeof index !== 'number') return;
@@ -433,14 +472,19 @@ export class Queue {
         const id = this._videoList[index]?.ownerId;
         const data = this.getProfile(id);
 
-        const profile = item.querySelector<HTMLImageElement>('.music-together-owner') ?? document.createElement('img');
+        const profile =
+          item.querySelector<HTMLImageElement>('.music-together-owner') ??
+          document.createElement('img');
         profile.classList.add('music-together-owner');
         profile.dataset.id = id;
         profile.dataset.index = index.toString();
 
-        const name = item.querySelector<HTMLElement>('.music-together-name') ?? document.createElement('div');
+        const name =
+          item.querySelector<HTMLElement>('.music-together-name') ??
+          document.createElement('div');
         name.classList.add('music-together-name');
-        name.textContent = data?.name ?? t('plugins.music-together.internal.unknown-user');
+        name.textContent =
+          data?.name ?? t('plugins.music-together.internal.unknown-user');
 
         if (data) {
           profile.dataset.thumbnail = data.thumbnail ?? '';
@@ -463,10 +507,14 @@ export class Queue {
     const allQueue = document.querySelectorAll('#queue');
 
     allQueue.forEach((queue) => {
-      const list = Array.from(queue?.querySelectorAll<HTMLElement>('ytmusic-player-queue-item') ?? []);
+      const list = Array.from(
+        queue?.querySelectorAll<HTMLElement>('ytmusic-player-queue-item') ?? [],
+      );
 
       list.forEach((item) => {
-        const profile = item.querySelector<HTMLImageElement>('.music-together-owner');
+        const profile = item.querySelector<HTMLImageElement>(
+          '.music-together-owner',
+        );
         const name = item.querySelector<HTMLElement>('.music-together-name');
         profile?.remove();
         name?.remove();

src/plugins/music-together/queue/song.ts

@@ -8,7 +8,9 @@ type QueueRendererResponse = {
   trackingParams: string;
 };
 
-export const getMusicQueueRenderer = async (videoIds: string[]): Promise<QueueRendererResponse | null> => {
+export const getMusicQueueRenderer = async (
+  videoIds: string[],
+): Promise<QueueRendererResponse | null> => {
   const token = extractToken();
   if (!token) return null;
 
@@ -35,8 +37,8 @@ export const getMusicQueueRenderer = async (videoIds: string[]): Promise<QueueRe
         'Content-Type': 'application/json',
         'Origin': 'https://music.youtube.com',
         'Authorization': await getAuthorizationHeader(token),
-      }
-    }
+      },
+    },
   );
 
   const text = await response.text();

src/plugins/music-together/queue/utils.ts

@@ -1,21 +1,26 @@
 import {
   ItemPlaylistPanelVideoRenderer,
   PlaylistPanelVideoWrapperRenderer,
-  QueueItem
+  QueueItem,
 } from '@/types/datahost-get-state';
 
-export const mapQueueItem = <T>(map: (item?: ItemPlaylistPanelVideoRenderer) => T, array: QueueItem[]): T[] => array
-  .map((item) => {
-    if ('playlistPanelVideoWrapperRenderer' in item) {
-      const keys = Object.keys(item.playlistPanelVideoWrapperRenderer!.primaryRenderer) as (keyof PlaylistPanelVideoWrapperRenderer['primaryRenderer'])[];
-      return item.playlistPanelVideoWrapperRenderer!.primaryRenderer[keys[0]];
-    }
-    if ('playlistPanelVideoRenderer' in item) {
-      return item.playlistPanelVideoRenderer;
-    }
-
-    console.error('Music Together: Unknown item', item);
-    return undefined;
-  })
-  .map(map);
+export const mapQueueItem = <T>(
+  map: (item?: ItemPlaylistPanelVideoRenderer) => T,
+  array: QueueItem[],
+): T[] =>
+  array
+    .map((item) => {
+      if ('playlistPanelVideoWrapperRenderer' in item) {
+        const keys = Object.keys(
+          item.playlistPanelVideoWrapperRenderer!.primaryRenderer,
+        ) as (keyof PlaylistPanelVideoWrapperRenderer['primaryRenderer'])[];
+        return item.playlistPanelVideoWrapperRenderer!.primaryRenderer[keys[0]];
+      }
+      if ('playlistPanelVideoRenderer' in item) {
+        return item.playlistPanelVideoRenderer;
+      }
 
+      console.error('Music Together: Unknown item', item);
+      return undefined;
+    })
+    .map(map);

src/plugins/music-together/types.ts

@@ -10,13 +10,16 @@ export type VideoData = {
 };
 export type Permission = 'host-only' | 'playlist' | 'all';
 
-export const getDefaultProfile = (connectionID: string, id: string = Date.now().toString()): Profile => {
+export const getDefaultProfile = (
+  connectionID: string,
+  id: string = Date.now().toString(),
+): Profile => {
   const name = `Guest ${id.slice(0, 4)}`;
 
   return {
     id: connectionID,
     handleId: `#music-together:${id}`,
     name,
-    thumbnail: `https://ui-avatars.com/api/?name=${name}&background=random`
+    thumbnail: `https://ui-avatars.com/api/?name=${name}&background=random`,
   };
 };

src/plugins/music-together/ui/guest.ts

@@ -7,7 +7,6 @@ import { createStatus } from '../ui/status';
 
 import IconOff from '../icons/off.svg?raw';
 
-
 export type GuestPopupProps = {
   onItemClick: (id: string) => void;
 };
@@ -33,7 +32,7 @@ export const createGuestPopup = (props: GuestPopupProps) => {
       },
     ],
     anchorAt: 'bottom-right',
-    popupAt: 'top-right'
+    popupAt: 'top-right',
   });
 
   return {

src/plugins/music-together/ui/host.ts

@@ -22,7 +22,7 @@ export const createHostPopup = (props: HostPopupProps) => {
         element: status.element,
       },
       {
-        type: 'divider'
+        type: 'divider',
       },
       {
         id: 'music-together-copy-id',
@@ -35,7 +35,9 @@ export const createHostPopup = (props: HostPopupProps) => {
         id: 'music-together-permission',
         type: 'item',
         icon: ElementFromHtml(IconTune),
-        text: t('plugins.music-together.menu.set-permission', { permission: t('plugins.music-together.menu.permission.host-only') }),
+        text: t('plugins.music-together.menu.set-permission', {
+          permission: t('plugins.music-together.menu.permission.host-only'),
+        }),
         onClick: () => props.onItemClick('music-together-permission'),
       },
       {

src/plugins/music-together/ui/setting.ts

@@ -39,7 +39,7 @@ export const createSettingPopup = (props: SettingPopupProps) => {
       },
     ],
     anchorAt: 'bottom-right',
-    popupAt: 'top-right'
+    popupAt: 'top-right',
   });
 
   return {

src/plugins/music-together/ui/status.ts

@@ -7,17 +7,27 @@ import type { Permission, Profile } from '../types';
 
 export const createStatus = () => {
   const element = ElementFromHtml(statusHTML);
-  const icon = document.querySelector<HTMLImageElement>('ytmusic-settings-button > tp-yt-paper-icon-button > tp-yt-iron-icon#icon img');
+  const icon = document.querySelector<HTMLImageElement>(
+    'ytmusic-settings-button > tp-yt-paper-icon-button > tp-yt-iron-icon#icon img',
+  );
 
-  const profile = element.querySelector<HTMLImageElement>('.music-together-profile')!;
-  const statusLabel = element.querySelector<HTMLSpanElement>('#music-together-status-label')!;
-  const permissionLabel = element.querySelector<HTMLMarqueeElement>('#music-together-permission-label')!;
+  const profile = element.querySelector<HTMLImageElement>(
+    '.music-together-profile',
+  )!;
+  const statusLabel = element.querySelector<HTMLSpanElement>(
+    '#music-together-status-label',
+  )!;
+  const permissionLabel = element.querySelector<HTMLMarqueeElement>(
+    '#music-together-permission-label',
+  )!;
 
   profile.src = icon?.src ?? '';
 
   const setStatus = (status: 'disconnected' | 'host' | 'guest') => {
     if (status === 'disconnected') {
-      statusLabel.textContent = t('plugins.music-together.menu.status.disconnected');
+      statusLabel.textContent = t(
+        'plugins.music-together.menu.status.disconnected',
+      );
       statusLabel.style.color = 'rgba(255, 255, 255, 0.5)';
     }
 
@@ -34,17 +44,23 @@ export const createStatus = () => {
 
   const setPermission = (permission: Permission) => {
     if (permission === 'host-only') {
-      permissionLabel.textContent = t('plugins.music-together.menu.permission.host-only');
+      permissionLabel.textContent = t(
+        'plugins.music-together.menu.permission.host-only',
+      );
       permissionLabel.style.color = 'rgba(255, 255, 255, 0.5)';
     }
 
     if (permission === 'playlist') {
-      permissionLabel.textContent = t('plugins.music-together.menu.permission.playlist');
+      permissionLabel.textContent = t(
+        'plugins.music-together.menu.permission.playlist',
+      );
       permissionLabel.style.color = 'rgba(255, 255, 255, 0.75)';
     }
 
     if (permission === 'all') {
-      permissionLabel.textContent = t('plugins.music-together.menu.permission.all');
+      permissionLabel.textContent = t(
+        'plugins.music-together.menu.permission.all',
+      );
       permissionLabel.style.color = 'rgba(255, 255, 255, 1)';
     }
   };
@@ -54,7 +70,9 @@ export const createStatus = () => {
   };
 
   const setUsers = (users: Profile[]) => {
-    const container = element.querySelector<HTMLDivElement>('.music-together-user-container')!;
+    const container = element.querySelector<HTMLDivElement>(
+      '.music-together-user-container',
+    )!;
     const empty = element.querySelector<HTMLElement>('.music-together-empty')!;
     for (const child of Array.from(container.children)) {
       if (child !== empty) child.remove();

src/plugins/picture-in-picture/renderer.ts

@@ -68,7 +68,9 @@ const observer = new MutationObserver(() => {
   if (!menuUrl?.includes('watch?')) {
     menuUrl = undefined;
     // check for podcast
-    for (const it of document.querySelectorAll('tp-yt-paper-listbox [tabindex="-1"] #navigation-endpoint')) {
+    for (const it of document.querySelectorAll(
+      'tp-yt-paper-listbox [tabindex="-1"] #navigation-endpoint',
+    )) {
       if (it.getAttribute('href')?.includes('podcast/')) {
         menuUrl = it.getAttribute('href')!;
         break;

src/plugins/playback-speed/renderer.ts

@@ -53,10 +53,7 @@ const observePopupContainer = () => {
       menu = getSongMenu();
     }
 
-    if (
-      menu &&
-      !menu.contains(slider)
-    ) {
+    if (menu && !menu.contains(slider)) {
       menu.prepend(slider);
       setupSliderListener();
     }

src/plugins/precise-volume/override.ts

@@ -8,7 +8,6 @@ const ignored = {
 function overrideAddEventListener() {
   // YO WHAT ARE YOU DOING NOW?!?!
   // Save native addEventListener
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-expect-error - We know what we're doing
   // eslint-disable-next-line @typescript-eslint/unbound-method
   Element.prototype._addEventListener = Element.prototype.addEventListener;

src/plugins/scrobbler/index.ts

@@ -5,13 +5,13 @@ import { onMenu } from './menu';
 import { backend } from './main';
 
 export interface ScrobblerPluginConfig {
-  enabled: boolean,
+  enabled: boolean;
   /**
-    * Attempt to scrobble other video types (e.g. Podcasts, normal YouTube videos)
-    *
-    * @default true
-    */
-  scrobbleOtherMedia: boolean,
+   * Attempt to scrobble other video types (e.g. Podcasts, normal YouTube videos)
+   *
+   * @default true
+   */
+  scrobbleOtherMedia: boolean;
   scrobblers: {
     lastfm: {
       /**
@@ -19,53 +19,53 @@ export interface ScrobblerPluginConfig {
        *
        * @default false
        */
-      enabled: boolean,
+      enabled: boolean;
       /**
        * Token used for authentication
        */
-      token: string | undefined,
+      token: string | undefined;
       /**
        * Session key used for scrobbling
        */
-      sessionKey: string | undefined,
+      sessionKey: string | undefined;
       /**
        * Root of the Last.fm API
        *
        * @default 'http://ws.audioscrobbler.com/2.0/'
        */
-      apiRoot: string,
+      apiRoot: string;
       /**
        * Last.fm api key registered by @semvis123
        *
        * @default '04d76faaac8726e60988e14c105d421a'
        */
-      apiKey: string,
+      apiKey: string;
       /**
        * Last.fm api secret registered by @semvis123
        *
        * @default 'a5d2a36fdf64819290f6982481eaffa2'
        */
-      secret: string,
-    },
+      secret: string;
+    };
     listenbrainz: {
       /**
        * Enable ListenBrainz scrobbling
        *
        * @default false
        */
-      enabled: boolean,
+      enabled: boolean;
       /**
        * Listenbrainz user token
        */
-      token: string | undefined,
+      token: string | undefined;
       /**
        * Root of the ListenBrainz API
        *
        * @default 'https://api.listenbrainz.org/1/'
        */
-      apiRoot: string,
-    },
-  }
+      apiRoot: string;
+    };
+  };
 }
 
 export const defaultConfig: ScrobblerPluginConfig = {

src/plugins/scrobbler/main.ts

@@ -1,6 +1,9 @@
 import { BrowserWindow } from 'electron';
 
-import registerCallback, { MediaType, type SongInfo } from '@/providers/song-info';
+import registerCallback, {
+  MediaType,
+  type SongInfo,
+} from '@/providers/song-info';
 import { createBackend } from '@/utils';
 
 import { LastFmScrobbler } from './services/lastfm';
@@ -13,14 +16,23 @@ export type SetConfType = (
   conf: Partial<Omit<ScrobblerPluginConfig, 'enabled'>>,
 ) => void | Promise<void>;
 
-export const backend = createBackend<{
-  config?: ScrobblerPluginConfig;
-  window?: BrowserWindow;
-  enabledScrobblers: Map<string, ScrobblerBase>;
-  toggleScrobblers(config: ScrobblerPluginConfig, window: BrowserWindow): void;
-  createSessions(config: ScrobblerPluginConfig, setConfig: SetConfType): Promise<void>;
-  setConfig?: SetConfType;
-}, ScrobblerPluginConfig>({
+export const backend = createBackend<
+  {
+    config?: ScrobblerPluginConfig;
+    window?: BrowserWindow;
+    enabledScrobblers: Map<string, ScrobblerBase>;
+    toggleScrobblers(
+      config: ScrobblerPluginConfig,
+      window: BrowserWindow,
+    ): void;
+    createSessions(
+      config: ScrobblerPluginConfig,
+      setConfig: SetConfType,
+    ): Promise<void>;
+    setConfig?: SetConfType;
+  },
+  ScrobblerPluginConfig
+>({
   enabledScrobblers: new Map(),
 
   toggleScrobblers(config: ScrobblerPluginConfig, window: BrowserWindow) {
@@ -30,7 +42,10 @@ export const backend = createBackend<{
       this.enabledScrobblers.delete('lastfm');
     }
 
-    if (config.scrobblers.listenbrainz && config.scrobblers.listenbrainz.enabled) {
+    if (
+      config.scrobblers.listenbrainz &&
+      config.scrobblers.listenbrainz.enabled
+    ) {
       this.enabledScrobblers.set('listenbrainz', new ListenbrainzScrobbler());
     } else {
       this.enabledScrobblers.delete('listenbrainz');
@@ -45,12 +60,8 @@ export const backend = createBackend<{
     }
   },
 
-  async start({
-    getConfig,
-    setConfig,
-    window,
-  }) {
-    const config = this.config = await getConfig();
+  async start({ getConfig, setConfig, window }) {
+    const config = (this.config = await getConfig());
     // This will store the timeout that will trigger addScrobble
     let scrobbleTimer: NodeJS.Timeout | undefined;
 
@@ -65,21 +76,38 @@ export const backend = createBackend<{
       if (!songInfo.isPaused) {
         const configNonnull = this.config!;
         // Scrobblers normally have no trouble working with official music videos
-        if (!configNonnull.scrobbleOtherMedia && (songInfo.mediaType !== MediaType.Audio && songInfo.mediaType !== MediaType.OriginalMusicVideo)) {
+        if (
+          !configNonnull.scrobbleOtherMedia &&
+          songInfo.mediaType !== MediaType.Audio &&
+          songInfo.mediaType !== MediaType.OriginalMusicVideo
+        ) {
           return;
         }
 
         // Scrobble when the song is halfway through, or has passed the 4-minute mark
-        const scrobbleTime = Math.min(Math.ceil(songInfo.songDuration / 2), 4 * 60);
+        const scrobbleTime = Math.min(
+          Math.ceil(songInfo.songDuration / 2),
+          4 * 60,
+        );
         if (scrobbleTime > (songInfo.elapsedSeconds ?? 0)) {
           // Scrobble still needs to happen
-          const timeToWait = (scrobbleTime - (songInfo.elapsedSeconds ?? 0)) * 1000;
-          scrobbleTimer = setTimeout((info, config) => {
-            this.enabledScrobblers.forEach((scrobbler) => scrobbler.addScrobble(info, config, setConfig));
-          }, timeToWait, songInfo, configNonnull);
+          const timeToWait =
+            (scrobbleTime - (songInfo.elapsedSeconds ?? 0)) * 1000;
+          scrobbleTimer = setTimeout(
+            (info, config) => {
+              this.enabledScrobblers.forEach((scrobbler) =>
+                scrobbler.addScrobble(info, config, setConfig),
+              );
+            },
+            timeToWait,
+            songInfo,
+            configNonnull,
+          );
         }
 
-        this.enabledScrobblers.forEach((scrobbler) => scrobbler.setNowPlaying(songInfo, configNonnull, setConfig));
+        this.enabledScrobblers.forEach((scrobbler) =>
+          scrobbler.setNowPlaying(songInfo, configNonnull, setConfig),
+        );
       }
     });
   },
@@ -88,11 +116,15 @@ export const backend = createBackend<{
     this.enabledScrobblers.clear();
 
     this.toggleScrobblers(newConfig, this.window!);
-    for (const [scrobblerName, scrobblerConfig] of Object.entries(newConfig.scrobblers)) {
+    for (const [scrobblerName, scrobblerConfig] of Object.entries(
+      newConfig.scrobblers,
+    )) {
       if (scrobblerConfig.enabled) {
         const scrobbler = this.enabledScrobblers.get(scrobblerName);
         if (
-          this.config?.scrobblers?.[scrobblerName as keyof typeof newConfig.scrobblers]?.enabled !== scrobblerConfig.enabled &&
+          this.config?.scrobblers?.[
+            scrobblerName as keyof typeof newConfig.scrobblers
+          ]?.enabled !== scrobblerConfig.enabled &&
           scrobbler &&
           !scrobbler.isSessionCreated(newConfig) &&
           this.setConfig
@@ -103,6 +135,5 @@ export const backend = createBackend<{
     }
 
     this.config = newConfig;
-  }
+  },
 });
-

src/plugins/scrobbler/menu.ts

@@ -11,7 +11,11 @@ import { SetConfType, backend } from './main';
 import type { MenuContext } from '@/types/contexts';
 import type { MenuTemplate } from '@/menu';
 
-async function promptLastFmOptions(options: ScrobblerPluginConfig, setConfig: SetConfType, window: BrowserWindow) {
+async function promptLastFmOptions(
+  options: ScrobblerPluginConfig,
+  setConfig: SetConfType,
+  window: BrowserWindow,
+) {
   const output = await prompt(
     {
       title: t('plugins.scrobbler.menu.lastfm.api-settings'),
@@ -22,16 +26,16 @@ async function promptLastFmOptions(options: ScrobblerPluginConfig, setConfig: Se
           label: t('plugins.scrobbler.prompt.lastfm.api-key'),
           value: options.scrobblers.lastfm?.apiKey,
           inputAttrs: {
-            type: 'text'
-          }
+            type: 'text',
+          },
         },
         {
           label: t('plugins.scrobbler.prompt.lastfm.api-secret'),
           value: options.scrobblers.lastfm?.secret,
           inputAttrs: {
-            type: 'text'
-          }
-        }
+            type: 'text',
+          },
+        },
       ],
       resizable: true,
       height: 360,
@@ -53,7 +57,11 @@ async function promptLastFmOptions(options: ScrobblerPluginConfig, setConfig: Se
   }
 }
 
-async function promptListenbrainzOptions(options: ScrobblerPluginConfig, setConfig: SetConfType, window: BrowserWindow) {
+async function promptListenbrainzOptions(
+  options: ScrobblerPluginConfig,
+  setConfig: SetConfType,
+  window: BrowserWindow,
+) {
   const output = await prompt(
     {
       title: t('plugins.scrobbler.prompt.listenbrainz.token.title'),

src/plugins/scrobbler/services/base.ts

@@ -5,9 +5,20 @@ import type { SongInfo } from '@/providers/song-info';
 export abstract class ScrobblerBase {
   public abstract isSessionCreated(config: ScrobblerPluginConfig): boolean;
 
-  public abstract createSession(config: ScrobblerPluginConfig, setConfig: SetConfType): Promise<ScrobblerPluginConfig>;
+  public abstract createSession(
+    config: ScrobblerPluginConfig,
+    setConfig: SetConfType,
+  ): Promise<ScrobblerPluginConfig>;
 
-  public abstract setNowPlaying(songInfo: SongInfo, config: ScrobblerPluginConfig, setConfig: SetConfType): void;
+  public abstract setNowPlaying(
+    songInfo: SongInfo,
+    config: ScrobblerPluginConfig,
+    setConfig: SetConfType,
+  ): void;
 
-  public abstract addScrobble(songInfo: SongInfo, config: ScrobblerPluginConfig, setConfig: SetConfType): void;
+  public abstract addScrobble(
+    songInfo: SongInfo,
+    config: ScrobblerPluginConfig,
+    setConfig: SetConfType,
+  ): void;
 }

src/plugins/scrobbler/services/lastfm.ts

@@ -81,7 +81,11 @@ export class LastFmScrobbler extends ScrobblerBase {
     return config;
   }
 
-  override setNowPlaying(songInfo: SongInfo, config: ScrobblerPluginConfig, setConfig: SetConfType): void {
+  override setNowPlaying(
+    songInfo: SongInfo,
+    config: ScrobblerPluginConfig,
+    setConfig: SetConfType,
+  ): void {
     if (!config.scrobblers.lastfm.sessionKey) {
       return;
     }
@@ -93,7 +97,11 @@ export class LastFmScrobbler extends ScrobblerBase {
     this.postSongDataToAPI(songInfo, config, data, setConfig);
   }
 
-  override addScrobble(songInfo: SongInfo, config: ScrobblerPluginConfig, setConfig: SetConfType): void {
+  override addScrobble(
+    songInfo: SongInfo,
+    config: ScrobblerPluginConfig,
+    setConfig: SetConfType,
+  ): void {
     if (!config.scrobblers.lastfm.sessionKey) {
       return;
     }
@@ -101,7 +109,9 @@ export class LastFmScrobbler extends ScrobblerBase {
     // This adds one scrobbled song to last.fm
     const data = {
       method: 'track.scrobble',
-      timestamp: Math.trunc((Date.now() - (songInfo.elapsedSeconds ?? 0)) / 1000),
+      timestamp: Math.trunc(
+        (Date.now() - (songInfo.elapsedSeconds ?? 0)) / 1000,
+      ),
     };
     this.postSongDataToAPI(songInfo, config, data, setConfig);
   }
@@ -195,8 +205,7 @@ const createApiSig = (parameters: LastFmSongData, secret: string) => {
   // This function creates the api signature, see: https://www.last.fm/api/authspec
   let sig = '';
 
-  Object
-    .entries(parameters)
+  Object.entries(parameters)
     .sort(([a], [b]) => a.localeCompare(b))
     .forEach(([key, value]) => {
       if (key === 'format') {
@@ -212,12 +221,8 @@ const createApiSig = (parameters: LastFmSongData, secret: string) => {
 
 const createToken = async ({
   scrobblers: {
-    lastfm: {
-      apiKey,
-      apiRoot,
-      secret,
-    }
-  }
+    lastfm: { apiKey, apiRoot, secret },
+  },
 }: ScrobblerPluginConfig) => {
   // Creates and stores the auth token
   const data: {
@@ -240,7 +245,10 @@ const createToken = async ({
 let authWindowOpened = false;
 let latestAuthResult = false;
 
-const authenticate = async (config: ScrobblerPluginConfig, mainWindow: BrowserWindow) => {
+const authenticate = async (
+  config: ScrobblerPluginConfig,
+  mainWindow: BrowserWindow,
+) => {
   return new Promise<boolean>((resolve) => {
     if (!authWindowOpened) {
       authWindowOpened = true;
@@ -266,9 +274,10 @@ const authenticate = async (config: ScrobblerPluginConfig, mainWindow: BrowserWi
           const url = new URL(newUrl);
           if (url.hostname.endsWith('last.fm')) {
             if (url.pathname === '/api/auth') {
-              const isApproveScreen = await browserWindow.webContents.executeJavaScript(
-                '!!document.getElementsByName(\'confirm\').length'
-              ) as boolean;
+              const isApproveScreen =
+                (await browserWindow.webContents.executeJavaScript(
+                  "!!document.getElementsByName('confirm').length",
+                )) as boolean;
               // successful authentication
               if (!isApproveScreen) {
                 resolve(true);
@@ -287,7 +296,7 @@ const authenticate = async (config: ScrobblerPluginConfig, mainWindow: BrowserWi
             dialog.showMessageBox({
               title: t('plugins.scrobbler.dialog.lastfm.auth-failed.title'),
               message: t('plugins.scrobbler.dialog.lastfm.auth-failed.message'),
-              type: 'error'
+              type: 'error',
             });
           }
           authWindowOpened = false;

src/plugins/scrobbler/services/listenbrainz.ts

@@ -29,12 +29,22 @@ export class ListenbrainzScrobbler extends ScrobblerBase {
     return true;
   }
 
-  override createSession(config: ScrobblerPluginConfig, _setConfig: SetConfType): Promise<ScrobblerPluginConfig> {
+  override createSession(
+    config: ScrobblerPluginConfig,
+    _setConfig: SetConfType,
+  ): Promise<ScrobblerPluginConfig> {
     return Promise.resolve(config);
   }
 
-  override setNowPlaying(songInfo: SongInfo, config: ScrobblerPluginConfig, _setConfig: SetConfType): void {
-    if (!config.scrobblers.listenbrainz.apiRoot || !config.scrobblers.listenbrainz.token) {
+  override setNowPlaying(
+    songInfo: SongInfo,
+    config: ScrobblerPluginConfig,
+    _setConfig: SetConfType,
+  ): void {
+    if (
+      !config.scrobblers.listenbrainz.apiRoot ||
+      !config.scrobblers.listenbrainz.token
+    ) {
       return;
     }
 
@@ -42,8 +52,15 @@ export class ListenbrainzScrobbler extends ScrobblerBase {
     submitListen(body, config);
   }
 
-  override addScrobble(songInfo: SongInfo, config: ScrobblerPluginConfig, _setConfig: SetConfType): void {
-    if (!config.scrobblers.listenbrainz.apiRoot || !config.scrobblers.listenbrainz.token) {
+  override addScrobble(
+    songInfo: SongInfo,
+    config: ScrobblerPluginConfig,
+    _setConfig: SetConfType,
+  ): void {
+    if (
+      !config.scrobblers.listenbrainz.apiRoot ||
+      !config.scrobblers.listenbrainz.token
+    ) {
       return;
     }
 
@@ -54,7 +71,10 @@ export class ListenbrainzScrobbler extends ScrobblerBase {
   }
 }
 
-function createRequestBody(listenType: string, songInfo: SongInfo): ListenbrainzRequestBody {
+function createRequestBody(
+  listenType: string,
+  songInfo: SongInfo,
+): ListenbrainzRequestBody {
   const trackMetadata = {
     artist_name: songInfo.artist,
     track_name: songInfo.title,
@@ -64,7 +84,7 @@ function createRequestBody(listenType: string, songInfo: SongInfo): Listenbrainz
       submission_client: 'YouTube Music Desktop App - Scrobbler Plugin',
       origin_url: songInfo.url,
       duration: songInfo.songDuration,
-    }
+    },
   };
 
   return {
@@ -72,19 +92,23 @@ function createRequestBody(listenType: string, songInfo: SongInfo): Listenbrainz
     payload: [
       {
         track_metadata: trackMetadata,
-      }
-    ]
+      },
+    ],
   };
 }
 
-function submitListen(body: ListenbrainzRequestBody, config: ScrobblerPluginConfig) {
-  net.fetch(config.scrobblers.listenbrainz.apiRoot + 'submit-listens',
-    {
+function submitListen(
+  body: ListenbrainzRequestBody,
+  config: ScrobblerPluginConfig,
+) {
+  net
+    .fetch(config.scrobblers.listenbrainz.apiRoot + 'submit-listens', {
       method: 'POST',
       body: JSON.stringify(body),
       headers: {
         'Authorization': 'Token ' + config.scrobblers.listenbrainz.token,
         'Content-Type': 'application/json',
-      }
-    }).catch(console.error);
+      },
+    })
+    .catch(console.error);
 }

src/plugins/shortcuts/mpris-service.d.ts

@@ -176,15 +176,17 @@ declare module '@jellybrick/mpris-service' {
     setActivePlaylist(playlistId: string): void;
   }
 
-  interface MprisInterface extends dbusInterface.Interface {
+  export interface MprisInterface extends dbusInterface.Interface {
     setProperty(property: string, valuePlain: unknown): void;
   }
 
-  interface RootInterface {}
+  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
+  export interface RootInterface {}
 
-  interface PlayerInterface {}
+  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
+  export interface PlayerInterface {}
 
-  interface TracklistInterface {
+  export interface TracklistInterface {
     TrackListReplaced(tracks: Track[]): void;
 
     TrackAdded(afterTrack: string): void;
@@ -192,7 +194,7 @@ declare module '@jellybrick/mpris-service' {
     TrackRemoved(trackId: string): void;
   }
 
-  interface PlaylistsInterface {
+  export interface PlaylistsInterface {
     PlaylistChanged(playlist: unknown[]): void;
 
     setActivePlaylistId(playlistId: string): void;

src/plugins/shortcuts/mpris.ts

@@ -192,10 +192,13 @@ function registerMPRIS(win: BrowserWindow) {
         return;
       }
 
-      const currentPosition = queue.items?.findIndex((it) =>
-        it?.playlistPanelVideoRenderer?.selected ||
-        it?.playlistPanelVideoWrapperRenderer?.primaryRenderer?.playlistPanelVideoRenderer?.selected
-      ) ?? 0;
+      const currentPosition =
+        queue.items?.findIndex(
+          (it) =>
+            it?.playlistPanelVideoRenderer?.selected ||
+            it?.playlistPanelVideoWrapperRenderer?.primaryRenderer
+              ?.playlistPanelVideoRenderer?.selected,
+        ) ?? 0;
       player.canGoPrevious = currentPosition !== 0;
 
       let hasNext: boolean;

src/plugins/skip-disliked-songs/index.ts

@@ -16,20 +16,24 @@ export default createPlugin<
   restartNeeded: false,
   renderer: {
     start() {
-      waitForElement<HTMLElement>('#dislike-button-renderer').then((dislikeBtn) => {
-        this.observer = new MutationObserver(() => {
-          if (dislikeBtn?.getAttribute('like-status') == 'DISLIKE') {
-            document
-              .querySelector<HTMLButtonElement>('tp-yt-paper-icon-button.next-button')
-              ?.click();
-          }
-        });
-        this.observer.observe(dislikeBtn, {
-          attributes: true,
-          childList: false,
-          subtree: false,
-        });
-      });
+      waitForElement<HTMLElement>('#dislike-button-renderer').then(
+        (dislikeBtn) => {
+          this.observer = new MutationObserver(() => {
+            if (dislikeBtn?.getAttribute('like-status') == 'DISLIKE') {
+              document
+                .querySelector<HTMLButtonElement>(
+                  'tp-yt-paper-icon-button.next-button',
+                )
+                ?.click();
+            }
+          });
+          this.observer.observe(dislikeBtn, {
+            attributes: true,
+            childList: false,
+            subtree: false,
+          });
+        },
+      );
     },
     stop() {
       this.observer?.disconnect();

src/plugins/sponsorblock/tests/segments.test.js

@@ -1,7 +1,9 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
+/* eslint-disable @typescript-eslint/no-require-imports */
 
+// eslint-disable-next-line no-undef
 const { test, expect } = require('@playwright/test');
 
+// eslint-disable-next-line no-undef
 const { sortSegments } = require('../segments');
 
 test('Segment sorting', () => {

src/plugins/synced-lyrics/menu.ts

@@ -31,8 +31,12 @@ export const menu = async ({
       type: 'submenu',
       submenu: [
         {
-          label: t('plugins.synced-lyrics.menu.line-effect.submenu.scale.label'),
-          toolTip: t('plugins.synced-lyrics.menu.line-effect.submenu.scale.tooltip'),
+          label: t(
+            'plugins.synced-lyrics.menu.line-effect.submenu.scale.label',
+          ),
+          toolTip: t(
+            'plugins.synced-lyrics.menu.line-effect.submenu.scale.tooltip',
+          ),
           type: 'radio',
           checked: config.lineEffect === 'scale',
           click() {
@@ -42,8 +46,12 @@ export const menu = async ({
           },
         },
         {
-          label: t('plugins.synced-lyrics.menu.line-effect.submenu.offset.label'),
-          toolTip: t('plugins.synced-lyrics.menu.line-effect.submenu.offset.tooltip'),
+          label: t(
+            'plugins.synced-lyrics.menu.line-effect.submenu.offset.label',
+          ),
+          toolTip: t(
+            'plugins.synced-lyrics.menu.line-effect.submenu.offset.tooltip',
+          ),
           type: 'radio',
           checked: config.lineEffect === 'offset',
           click() {
@@ -53,8 +61,12 @@ export const menu = async ({
           },
         },
         {
-          label: t('plugins.synced-lyrics.menu.line-effect.submenu.focus.label'),
-          toolTip: t('plugins.synced-lyrics.menu.line-effect.submenu.focus.tooltip'),
+          label: t(
+            'plugins.synced-lyrics.menu.line-effect.submenu.focus.label',
+          ),
+          toolTip: t(
+            'plugins.synced-lyrics.menu.line-effect.submenu.focus.tooltip',
+          ),
           type: 'radio',
           checked: config.lineEffect === 'focus',
           click() {
@@ -125,7 +137,9 @@ export const menu = async ({
     },
     {
       label: t('plugins.synced-lyrics.menu.show-lyrics-even-if-inexact.label'),
-      toolTip: t('plugins.synced-lyrics.menu.show-lyrics-even-if-inexact.tooltip'),
+      toolTip: t(
+        'plugins.synced-lyrics.menu.show-lyrics-even-if-inexact.tooltip',
+      ),
       type: 'checkbox',
       checked: config.showLyricsEvenIfInexact,
       click(item) {

src/plugins/synced-lyrics/renderer/components/LyricsContainer.tsx

@@ -28,7 +28,7 @@ export const LyricsContainer = () => {
 
     const info = getSongInfo();
     await makeLyricsRequest(info).catch((err) => {
-      setError(`${err}`);
+      setError(String(err));
     });
   };
 

src/plugins/synced-lyrics/renderer/index.ts

@@ -14,12 +14,15 @@ import type { SyncedLyricsPluginConfig } from '../types';
 
 export let _ytAPI: YoutubePlayer | null = null;
 
-export const renderer = createRenderer<{
-  observerCallback: MutationCallback;
-  observer?: MutationObserver;
-  videoDataChange: () => Promise<void>;
-  updateTimestampInterval?: NodeJS.Timeout | string | number;
-}, SyncedLyricsPluginConfig>({
+export const renderer = createRenderer<
+  {
+    observerCallback: MutationCallback;
+    observer?: MutationObserver;
+    videoDataChange: () => Promise<void>;
+    updateTimestampInterval?: NodeJS.Timeout | string | number;
+  },
+  SyncedLyricsPluginConfig
+>({
   onConfigChange(newConfig) {
     setConfig(newConfig);
   },
@@ -57,9 +60,7 @@ export const renderer = createRenderer<{
       );
     }
 
-    this.observer ??= new MutationObserver(
-      this.observerCallback,
-    );
+    this.observer ??= new MutationObserver(this.observerCallback);
 
     // Force the lyrics tab to be enabled at all times.
     this.observer.disconnect();

src/plugins/synced-lyrics/renderer/lyrics/fetch.ts

@@ -8,21 +8,16 @@ import { setDebugInfo, setLineLyrics } from '../components/LyricsContainer';
 import type { SongInfo } from '@/providers/song-info';
 import type { LineLyrics, LRCLIBSearchResponse } from '../../types';
 
-// prettier-ignore
 export const [isInstrumental, setIsInstrumental] = createSignal(false);
-// prettier-ignore
 export const [isFetching, setIsFetching] = createSignal(false);
-// prettier-ignore
 export const [hadSecondAttempt, setHadSecondAttempt] = createSignal(false);
-// prettier-ignore
 export const [differentDuration, setDifferentDuration] = createSignal(false);
-// eslint-disable-next-line prefer-const
 
 export const extractTimeAndText = (
   line: string,
   index: number,
 ): LineLyrics | null => {
-  const groups = /\[(\d+):(\d+)\.(\d+)\](.+)/.exec(line);
+  const groups = /\[(\d+):(\d+)\.(\d+)](.+)/.exec(line);
   if (!groups) return null;
 
   const [, rMinutes, rSeconds, rMillis, text] = groups;
@@ -32,14 +27,13 @@ export const extractTimeAndText = (
     parseInt(rMillis),
   ];
 
-  // prettier-ignore
-  const timeInMs = (minutes * 60 * 1000) + (seconds * 1000) + millis;
+  const timeInMs = minutes * 60 * 1000 + seconds * 1000 + millis;
 
   return {
     index,
     timeInMs,
     time: `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}:${millis}`,
-    text: text?.trim() ?? config()!.defaultTextString,
+    text: text?.trim() || config()!.defaultTextString,
     status: 'upcoming',
     duration: 0,
   };
@@ -81,7 +75,6 @@ export const getLyricsList = async (
     track_name: songData.title,
   });
 
-
   if (songData.album) {
     query.set('album_name', songData.album);
   }
@@ -94,7 +87,7 @@ export const getLyricsList = async (
     return null;
   }
 
-  let data = await response.json() as LRCLIBSearchResponse;
+  let data = (await response.json()) as LRCLIBSearchResponse;
   if (!data || !Array.isArray(data)) {
     setDebugInfo('Unexpected server response.');
     return null;
@@ -124,7 +117,7 @@ export const getLyricsList = async (
     setHadSecondAttempt(true);
   }
 
-  const filteredResults = [];
+  const filteredResults: LRCLIBSearchResponse = [];
   for (const item of data) {
     const { artist } = songData;
     const { artistName } = item;
@@ -133,7 +126,10 @@ export const getLyricsList = async (
     const itemArtists = artistName.split(/[&,]/g).map((i) => i.trim());
 
     const permutations = artists.flatMap((artistA) =>
-      itemArtists.map((artistB) => [artistA.toLowerCase(), artistB.toLowerCase()])
+      itemArtists.map((artistB) => [
+        artistA.toLowerCase(),
+        artistB.toLowerCase(),
+      ]),
     );
 
     const ratio = Math.max(...permutations.map(([x, y]) => jaroWinkler(x, y)));
@@ -154,7 +150,7 @@ export const getLyricsList = async (
     return null;
   }
 
-    setDebugInfo(JSON.stringify(closestResult, null, 4));
+  setDebugInfo(JSON.stringify(closestResult, null, 4));
 
   if (Math.abs(closestResult.duration - duration) > 15) {
     return null;
@@ -179,8 +175,8 @@ export const getLyricsList = async (
   // Add a blank line at the beginning
   raw.unshift('[0:0.0] ');
 
-  const syncedLyricList = raw.reduce<LineLyrics[]>((acc, line, index) => {
-    const syncedLine = extractTimeAndText(line, index);
+  const syncedLyricList = raw.reduce<LineLyrics[]>((acc, line) => {
+    const syncedLine = extractTimeAndText(line, acc.length);
     if (syncedLine) {
       acc.push(syncedLine);
     }

src/plugins/synced-lyrics/renderer/renderer.tsx

@@ -7,8 +7,11 @@ import type { SyncedLyricsPluginConfig } from '../types';
 
 export const [isVisible, setIsVisible] = createSignal<boolean>(false);
 
-export const [config, setConfig] = createSignal<SyncedLyricsPluginConfig | null>(null);
-export const [playerState, setPlayerState] = createSignal<VideoDetails | null>(null);
+export const [config, setConfig] =
+  createSignal<SyncedLyricsPluginConfig | null>(null);
+export const [playerState, setPlayerState] = createSignal<VideoDetails | null>(
+  null,
+);
 
 export const LyricsRenderer = () => {
   return (