Bump version to 2.0.1

Hotfix for #1269, #1267

.editorconfig

@@ -1,7 +1,8 @@
 root = true
 
 [*]
-indent_style = tab
+indent_style = space
+indent_size = 2
 end_of_line = lf
 charset = utf-8
 trim_trailing_whitespace = true

.eslintignore

@@ -0,0 +1,3 @@
+.eslintrc.js
+rollup.main.config.ts
+rollup.preload.config.ts

.eslintrc.js

@@ -0,0 +1,69 @@
+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: ['@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/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'],
+};

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -0,0 +1,73 @@
+name: Bug Report
+description: Report a YouTube Music bug
+title: "[Bug]: "
+labels: "bug :beetle:"
+body:
+- type: checkboxes
+  attributes:
+    label: Preflight Checklist
+    description: Please ensure you've completed all of the following.
+    options:
+      - label: I use the latest version of YouTube Music (Application).
+        required: true
+      - label: I have searched the [issue tracker](https://github.com/th-ch/youtube-music/issues) for a bug report that matches the one I want to file, without success.
+        required: true
+- type: input
+  attributes:
+    label: YouTube Music (Application) Version
+    description: |
+      What version of YouTube Music Application are you using?
+
+      Note: Please check if this issue is reproducible with the latest stable release.
+    placeholder: 2.0.0
+  validations:
+    required: true
+- type: dropdown
+  attributes:
+    label: What operating system are you using?
+    options:
+      - Windows
+      - macOS
+      - Ubuntu
+      - Other Linux
+      - Other (specify below)
+  validations:
+    required: true
+- type: input
+  attributes:
+    label: Operating System Version
+    description: What operating system version are you using? On Windows, click Start button > Settings > System > About. On macOS, click the Apple Menu > About This Mac. On Linux, use lsb_release or uname -a.
+    placeholder: "e.g. Windows 10 version 1909, macOS Catalina 10.15.7, or Ubuntu 20.04"
+  validations:
+    required: true
+- type: dropdown
+  attributes:
+    label: What arch are you using?
+    options:
+      - x64
+      - ia32
+      - arm64 (including Apple Silicon)
+      - Other (specify below)
+  validations:
+    required: true
+- type: input
+  attributes:
+    label: Last Known Working YouTube Music (Application) version
+    description: (If applicable) What is the last version of YouTube Music this worked in?
+    placeholder: 1.20.0
+- type: textarea
+  attributes:
+    label: Expected Behavior
+    description: A clear and concise description of what you expected to happen. (Add a replication step if applicable)
+  validations:
+    required: true
+- type: textarea
+  attributes:
+    label: Actual Behavior
+    description: A clear description of what actually happens.
+  validations:
+    required: true
+- type: textarea
+  attributes:
+    label: Additional Information
+    description: If your problem needs further explanation, or if the issue you're seeing cannot be reproduced in a gist, please add more information here. 

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -0,0 +1,38 @@
+name: Feature Request
+description: Suggest an idea for YouTube Music
+title: "[Feature Request]: "
+labels: "enhancement :sparkles:"
+body:
+- type: checkboxes
+  attributes:
+    label: Preflight Checklist
+    description: Please ensure you've completed all of the following.
+    options:
+      - label: I use the latest version of YouTube Music (Application).
+        required: true
+      - label: I have searched the [issue tracker](https://github.com/th-ch/youtube-music/issues) for a feature request that matches the one I want to file, without success.
+        required: true
+- type: textarea
+  attributes:
+    label: Problem Description
+    description: Please add a clear and concise description of the problem you are seeking to solve with this feature request.
+  validations:
+    required: true
+- type: textarea
+  attributes:
+    label: Proposed Solution
+    description: Describe the solution you'd like in a clear and concise manner.
+  validations:
+    required: true
+- type: textarea
+  attributes:
+    label: Alternatives Considered
+    description: A clear and concise description of any alternative solutions or features you've considered.
+  validations:
+    required: true
+- type: textarea
+  attributes:
+    label: Additional Information
+    description: Add any other context about the problem here.
+  validations:
+    required: false

.github/workflows/build.yml

@@ -6,7 +6,7 @@ on:
   pull_request:
 
 env:
-  NODE_VERSION: "16.x"
+  NODE_VERSION: "20.x"
 
 jobs:
   build:
@@ -15,95 +15,64 @@ jobs:
     strategy:
       fail-fast: true
       matrix:
-        os: [macos-latest, ubuntu-latest, windows-latest]
+        os: [ macos-latest, ubuntu-latest, windows-latest ]
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       - name: Setup NodeJS
         uses: actions/setup-node@v3
         with:
           node-version: ${{ env.NODE_VERSION }}
-
+          cache: 'npm'
-      - name: Expose yarn config as "$GITHUB_OUTPUT"
-        id: yarn-config
-        shell: bash
-        run: |
-          echo "CACHE_FOLDER=$(yarn config get cacheFolder)" >> $GITHUB_OUTPUT
-
-      # Yarn rotates the downloaded cache archives, @see https://github.com/actions/setup-node/issues/325
-      # Yarn cache is also reusable between arch and os.
-      - name: Restore yarn cache
-        uses: actions/cache@v3
-        id: yarn-download-cache
-        with:
-          path: ${{ steps.yarn-config.outputs.CACHE_FOLDER }}
-          key: yarn-download-cache-${{ hashFiles('yarn.lock') }}
-          restore-keys: |
-            yarn-download-cache-
-
-      # Invalidated on yarn.lock changes
-      - name: Restore yarn install state
-        id: yarn-install-state-cache
-        uses: actions/cache@v3
-        with:
-          path: .yarn/ci-cache/
-          key: ${{ runner.os }}-yarn-install-state-cache-${{ hashFiles('yarn.lock', '.yarnrc.yml') }}
 
       - name: Install dependencies
-        shell: bash
+        run: npm ci
-        run: |
-          yarn install --immutable --inline-builds
-        env:
-          # CI optimizations. Overrides yarnrc.yml options (or their defaults) in the CI action.
-          YARN_ENABLE_GLOBAL_CACHE: "false" # Use local cache folder to keep downloaded archives
-          YARN_NM_MODE: "hardlinks-local" # Hardlinks-(local|global) reduces io / node_modules size
-          YARN_INSTALL_STATE_PATH: .yarn/ci-cache/install-state.gz # Very small speedup when lock does not change
 
       - name: Test
         uses: GabrielBB/xvfb-action@v1
         env:
           PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: 1
         with:
-          run: yarn test
+          run: npm run test
 
       # Build and release if it's the main repository
       - name: Build and release on Mac
         if: startsWith(matrix.os, 'macOS') && github.repository == 'th-ch/youtube-music'
         env:
-          GH_TOKEN: ${{ secrets.GH_TOKEN }}
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         run: |
-          yarn run release:mac
+          npm run release:mac
 
       - name: Build and release on Linux
         if: startsWith(matrix.os, 'ubuntu') && github.repository == 'th-ch/youtube-music'
         env:
-          GH_TOKEN: ${{ secrets.GH_TOKEN }}
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         run: |
-          yarn run release:linux
+          npm run release:linux
 
       - name: Build and release on Windows
         if: startsWith(matrix.os, 'windows') && github.repository == 'th-ch/youtube-music'
         env:
-          GH_TOKEN: ${{ secrets.GH_TOKEN }}
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         run: |
-          yarn run release:win
+          npm run release:win
 
       # Only build without release if it is a fork
       - name: Build on Mac
         if: startsWith(matrix.os, 'macOS') && github.repository != 'th-ch/youtube-music'
         run: |
-          yarn run build:mac
+          npm run build:mac
 
       - name: Build on Linux
         if: startsWith(matrix.os, 'ubuntu') && github.repository != 'th-ch/youtube-music'
         run: |
-          yarn run build:linux
+          npm run build:linux
 
       - name: Build on Windows
         if: startsWith(matrix.os, 'windows') && github.repository != 'th-ch/youtube-music'
         run: |
-          yarn run build:win
+          npm run build:win
 
   release:
     runs-on: ubuntu-latest
@@ -111,7 +80,7 @@ jobs:
     if: github.repository == 'th-ch/youtube-music' && github.ref == 'refs/heads/master'
     needs: build
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 0
 
@@ -119,41 +88,10 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: ${{ env.NODE_VERSION }}
-
+          cache: 'npm'
-      - name: Expose yarn config as "$GITHUB_OUTPUT"
-        id: yarn-config
-        shell: bash
-        run: |
-          echo "CACHE_FOLDER=$(yarn config get cacheFolder)" >> $GITHUB_OUTPUT
-
-      # Yarn rotates the downloaded cache archives, @see https://github.com/actions/setup-node/issues/325
-      # Yarn cache is also reusable between arch and os.
-      - name: Restore yarn cache
-        uses: actions/cache@v3
-        id: yarn-download-cache
-        with:
-          path: ${{ steps.yarn-config.outputs.CACHE_FOLDER }}
-          key: yarn-download-cache-${{ hashFiles('yarn.lock') }}
-          restore-keys: |
-            yarn-download-cache-
-
-      # Invalidated on yarn.lock changes
-      - name: Restore yarn install state
-        id: yarn-install-state-cache
-        uses: actions/cache@v3
-        with:
-          path: .yarn/ci-cache/
-          key: ${{ runner.os }}-yarn-install-state-cache-${{ hashFiles('yarn.lock', '.yarnrc.yml') }}
 
       - name: Install dependencies
-        shell: bash
+        run: npm ci
-        run: |
-          yarn install --immutable --inline-builds
-        env:
-          # CI optimizations. Overrides yarnrc.yml options (or their defaults) in the CI action.
-          YARN_ENABLE_GLOBAL_CACHE: "false" # Use local cache folder to keep downloaded archives
-          YARN_NM_MODE: "hardlinks-local" # Hardlinks-(local|global) reduces io / node_modules size
-          YARN_INSTALL_STATE_PATH: .yarn/ci-cache/install-state.gz # Very small speedup when lock does not change
 
       - name: Get version
         run: |
@@ -169,7 +107,7 @@ jobs:
         uses: cardinalby/git-get-release-action@v1
         id: get_draft_release
         env:
-          GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:
           latest: true
           draft: true
@@ -179,7 +117,7 @@ jobs:
         if: ${{ env.VERSION_HASH == '' }}
         uses: irongut/EditRelease@v1.2.0
         with:
-          token: ${{ secrets.GH_TOKEN }}
+          token: ${{ secrets.GITHUB_TOKEN }}
           id: ${{ steps.get_draft_release.outputs.id }}
           draft: false
           prerelease: false
@@ -194,11 +132,11 @@ jobs:
       - name: Update changelog
         if: ${{ env.VERSION_HASH == '' }}
         run: |
-          yarn changelog
+          npm run changelog
 
       - name: Commit changelog
         if: ${{ env.VERSION_HASH == '' }}
-        uses: stefanzweifel/git-auto-commit-action@v4
+        uses: stefanzweifel/git-auto-commit-action@v5
         with:
           commit_message: Update changelog for ${{ env.VERSION_TAG }}
           file_pattern: "changelog.md"

.github/workflows/dependency-review.yml

@@ -5,7 +5,7 @@
 # Source repository: https://github.com/actions/dependency-review-action
 # Public documentation: https://docs.github.com/en/code-security/supply-chain-security/understanding-your-software-supply-chain/about-dependency-review#dependency-review-enforcement
 name: "Dependency Review"
-on: [pull_request]
+on: [ pull_request ]
 
 permissions:
   contents: read
@@ -15,6 +15,6 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: "Checkout Repository"
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
       - name: "Dependency Review"
         uses: actions/dependency-review-action@v3

.github/workflows/winget-submission.yml

@@ -2,7 +2,7 @@ name: Submit to Windows Package Manager Community Repository
 
 on:
   release:
-    types: [released]
+    types: [ released ]
   workflow_dispatch:
     inputs:
       tag_name:
@@ -13,7 +13,7 @@ on:
 jobs:
   winget:
     name: Publish winget package
-    runs-on: windows-latest
+    runs-on: ubuntu-latest
     steps:
       - name: Submit package to Windows Package Manager Community Repository
         uses: vedantmgoyal2009/winget-releaser@v2

.gitignore

@@ -1,5 +1,6 @@
 node_modules
 /dist
+/pack
 electron-builder.yml
 .vscode/settings.json
 .idea

.yarn/patches/electron-is-dev-npm-2.0.0-9d41637d91.patch

@@ -1,24 +0,0 @@
-diff --git a/index.js b/index.js
-index c8f2fd4467c11b484fe654f7f250e2ba37e8100d..c9ae1ed3d3c7683b14dfe0eee801f5a07585d2aa 100644
---- a/index.js
-+++ b/index.js
-@@ -5,7 +5,16 @@ if (typeof electron === 'string') {
- 	throw new TypeError('Not running in an Electron environment!');
- }
- 
--const isEnvSet = 'ELECTRON_IS_DEV' in process.env;
--const getFromEnv = Number.parseInt(process.env.ELECTRON_IS_DEV, 10) === 1;
-+const isDev = () => {
-+	if ('ELECTRON_IS_DEV' in process.env) {
-+		return Number.parseInt(process.env.ELECTRON_IS_DEV, 10) === 1;
-+	}
- 
--module.exports = isEnvSet ? getFromEnv : !electron.app.isPackaged;
-+	if (process.type === 'browser') {
-+		return !electron.app.isPackaged;
-+	}
-+
-+	return 'npm_package_name' in process.env;
-+};
-+
-+module.exports = isDev();

.yarn/plugins/@yarnpkg/plugin-after-install.cjs

@@ -1,9 +0,0 @@
-/* eslint-disable */
-//prettier-ignore
-module.exports = {
-name: "@yarnpkg/plugin-after-install",
-factory: function (require) {
-var plugin=(()=>{var g=Object.create,r=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var C=Object.getOwnPropertyNames;var k=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var I=t=>r(t,"__esModule",{value:!0});var i=t=>{if(typeof require!="undefined")return require(t);throw new Error('Dynamic require of "'+t+'" is not supported')};var h=(t,o)=>{for(var e in o)r(t,e,{get:o[e],enumerable:!0})},w=(t,o,e)=>{if(o&&typeof o=="object"||typeof o=="function")for(let n of C(o))!y.call(t,n)&&n!=="default"&&r(t,n,{get:()=>o[n],enumerable:!(e=x(o,n))||e.enumerable});return t},a=t=>w(I(r(t!=null?g(k(t)):{},"default",t&&t.__esModule&&"default"in t?{get:()=>t.default,enumerable:!0}:{value:t,enumerable:!0})),t);var j={};h(j,{default:()=>b});var c=a(i("@yarnpkg/core")),m={afterInstall:{description:"Hook that will always run after install",type:c.SettingsType.STRING,default:""}};var u=a(i("clipanion")),d=a(i("@yarnpkg/core"));var p=a(i("@yarnpkg/shell")),l=async(t,o)=>{var f;let e=t.get("afterInstall"),n=!!((f=t.projectCwd)==null?void 0:f.endsWith(`dlx-${process.pid}`));return e&&!n?(o&&console.log("Running `afterInstall` hook..."),(0,p.execute)(e,[],{cwd:t.projectCwd||void 0})):0};var s=class extends u.Command{async execute(){let o=await d.Configuration.find(this.context.cwd,this.context.plugins);return l(o,!1)}};s.paths=[["after-install"]];var P={configuration:m,commands:[s],hooks:{afterAllInstalled:async t=>{if(await l(t.configuration,!0))throw new Error("The `afterInstall` hook failed, see output above.")}}},b=P;return j;})();
-return plugin;
-}
-};

.yarnrc.yml

@@ -1,9 +0,0 @@
-afterInstall: yarn postinstall
-
-nodeLinker: node-modules
-
-plugins:
-  - path: .yarn/plugins/@yarnpkg/plugin-after-install.cjs
-    spec: "https://raw.githubusercontent.com/mhassan1/yarn-plugin-after-install/v0.3.1/bundles/@yarnpkg/plugin-after-install.js"
-
-yarnPath: .yarn/releases/yarn-3.4.1.cjs

assets/menu.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M3 17h12a1 1 0 0 1 .117 1.993L15 19H3a1 1 0 0 1-.117-1.993L3 17h12H3Zm0-6h18a1 1 0 0 1 .117 1.993L21 13H3a1 1 0 0 1-.117-1.993L3 11h18H3Zm0-6h15a1 1 0 0 1 .117 1.993L18 7H3a1 1 0 0 1-.117-1.993L3 5h15H3Z" fill="#ffffff"/>
+</svg>

assets/youtube-music.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 176 176" width="32" height="32">
+	<circle fill="red" cx="88" cy="88" r="88"/>
+	<path fill="#FFF"
+		  d="M88 46c23.1 0 42 18.8 42 42s-18.8 42-42 42-42-18.8-42-42 18.9-42 42-42m0-4c-25.4 0-46 20.6-46 46s20.6 46 46 46 46-20.6 46-46-20.6-46-46-46z"/>
+	<path fill="#FFF" d="M72 111l39-24-39-22z"/>
+</svg>

changelog.md

@@ -2,8 +2,132 @@
 
 All notable changes to this project will be documented in this file. Dates are displayed in UTC.
 
+#### [v2.0.0](https://github.com/th-ch/youtube-music/compare/v1.20.0...v2.0.0)
+
+- Bump version to 2.0.0 [`#1257`](https://github.com/th-ch/youtube-music/pull/1257)
+- feat(GitHub): add issue template [`#1264`](https://github.com/th-ch/youtube-music/pull/1264)
+- feat: I guess it's TypeScript [`#1235`](https://github.com/th-ch/youtube-music/pull/1235)
+- chore(deps): update dependency rollup to v4 [`#44`](https://github.com/th-ch/youtube-music/pull/44)
+- feat: apply rollup 🚀 [`#20`](https://github.com/th-ch/youtube-music/pull/20)
+- fix: Fixes the video-toggle being displayed at the wrong position on fullscreen [`#1218`](https://github.com/th-ch/youtube-music/pull/1218)
+- Change Winget Releaser job to `ubuntu-latest` [`#1225`](https://github.com/th-ch/youtube-music/pull/1225)
+- Fixes the video-toggle being displayed at the wrong position on fullscreen [`#1218`](https://github.com/th-ch/youtube-music/pull/1218)
+- Fix Remove upgrade button [`#1206`](https://github.com/th-ch/youtube-music/pull/1206)
+- Fixed Age Restriction Bypass [`#1221`](https://github.com/th-ch/youtube-music/pull/1221)
+- fix(tuna): handle `playPaused` [`#1`](https://github.com/th-ch/youtube-music/pull/1)
+- Add plugin to always use the compact sidebar [`#1190`](https://github.com/th-ch/youtube-music/pull/1190)
+- Hide login elements [`#1189`](https://github.com/th-ch/youtube-music/pull/1189)
+- Fix navigation arrows [`#1191`](https://github.com/th-ch/youtube-music/pull/1191)
+- MacOS better copy paste in readme.md [`#1156`](https://github.com/th-ch/youtube-music/pull/1156)
+- feat(build-windows): Add support for IA32 (resolves #1110) [`#1110`](https://github.com/th-ch/youtube-music/issues/1110)
+- fix: fix the downloader to work in a proxy environment (resolve #46) [`#46`](https://github.com/th-ch/youtube-music/issues/46)
+- fix: fix #34 [`#34`](https://github.com/th-ch/youtube-music/issues/34)
+- fix: fix #32 [`#32`](https://github.com/th-ch/youtube-music/issues/32)
+- fix: fix #29 [`#29`](https://github.com/th-ch/youtube-music/issues/29)
+- fix: fix #30 [`#30`](https://github.com/th-ch/youtube-music/issues/30)
+- fix: fix #29 [`#29`](https://github.com/th-ch/youtube-music/issues/29)
+- fix: fix #30 [`#30`](https://github.com/th-ch/youtube-music/issues/30)
+- hotfix: fix #28 [`#28`](https://github.com/th-ch/youtube-music/issues/28)
+- fix: resolve #12 [`#12`](https://github.com/th-ch/youtube-music/issues/12)
+- fix(precise-volume): fix slider ui does not sync [`#15`](https://github.com/th-ch/youtube-music/issues/15)
+- fix(video-toggle): fix video config not load config [`#16`](https://github.com/th-ch/youtube-music/issues/16)
+- refactor(in-app-menu): refactor in-app-menu plugin [`#13`](https://github.com/th-ch/youtube-music/issues/13)
+- feat(disable-autoplay): add `apply once`, resolve #9 [`#9`](https://github.com/th-ch/youtube-music/issues/9)
+- fix: fix #4 [`#4`](https://github.com/th-ch/youtube-music/issues/4)
+- fix: fix #7 [`#7`](https://github.com/th-ch/youtube-music/issues/7)
+- fix: fix #1187 [`#1187`](https://github.com/th-ch/youtube-music/issues/1187)
+- fix: resolves #978 [`#978`](https://github.com/th-ch/youtube-music/issues/978)
+- fix: resolves #958 [`#958`](https://github.com/th-ch/youtube-music/issues/958)
+- Merge pull request #1259 from organization/feat/fork-to-main [`457a8b5`](https://github.com/th-ch/youtube-music/commit/457a8b5018695d82b043cb7fa7264fbcf43f996c)
+- fix: remove `xo`, migration to `eslint` [`c722896`](https://github.com/th-ch/youtube-music/commit/c722896a73cfbca3bbbab67bfcdfa639474e9030)
+- fix: rollback changelog [`9048da2`](https://github.com/th-ch/youtube-music/commit/9048da22f98b9091ab606464a6cbdaad8bc185ae)
+
+#### [v1.20.0](https://github.com/th-ch/youtube-music/compare/v1.19.0...v1.20.0)
+
+> 18 May 2023
+
+- Bump version to 1.20.0 [`#1117`](https://github.com/th-ch/youtube-music/pull/1117)
+- Multiple implementations for the Adblocker plugin [`#1134`](https://github.com/th-ch/youtube-music/pull/1134)
+- add xesam:url mpris from songInfo.url [`#1138`](https://github.com/th-ch/youtube-music/pull/1138)
+- revert adblocker bump [`#1124`](https://github.com/th-ch/youtube-music/pull/1124)
+- fix security issues in dependencies [`#1116`](https://github.com/th-ch/youtube-music/pull/1116)
+- commit assets/generated [`#1118`](https://github.com/th-ch/youtube-music/pull/1118)
+- remove `electron.remote` dependency [`#1113`](https://github.com/th-ch/youtube-music/pull/1113)
+- .gitattributes set `eol=lf` on *all* files [`#1115`](https://github.com/th-ch/youtube-music/pull/1115)
+- [crossfade] add `[beta]` tag to warn of possible bugs [`#1096`](https://github.com/th-ch/youtube-music/pull/1096)
+- [crossfade] add menu options [`#1065`](https://github.com/th-ch/youtube-music/pull/1065)
+- [captions-selector] add `autoload` option [`#1079`](https://github.com/th-ch/youtube-music/pull/1079)
+- [downloader] Cleanup metadata [`#1091`](https://github.com/th-ch/youtube-music/pull/1091)
+- fix protocol handler on unix [`#1099`](https://github.com/th-ch/youtube-music/pull/1099)
+- fix merge conflict mistake in #1032 [`#1090`](https://github.com/th-ch/youtube-music/pull/1090)
+- Create providers/decorators.js [`#1068`](https://github.com/th-ch/youtube-music/pull/1068)
+- [adblocker] fix ads showing on program start [`#1100`](https://github.com/th-ch/youtube-music/pull/1100)
+- Allow downloading age restricted videos [`#1086`](https://github.com/th-ch/youtube-music/pull/1086)
+- add starting page option [`#1073`](https://github.com/th-ch/youtube-music/pull/1073)
+- [downloader] plugin overhaul [`#1054`](https://github.com/th-ch/youtube-music/pull/1054)
+- [Snyk] Upgrade @cliqz/adblocker-electron from 1.25.2 to 1.26.0 [`#1070`](https://github.com/th-ch/youtube-music/pull/1070)
+- [in-app-menu] fix css style of the library of uploaded songs [`#1072`](https://github.com/th-ch/youtube-music/pull/1072)
+- add option to hide the like buttons [`#1077`](https://github.com/th-ch/youtube-music/pull/1077)
+- Nitpick: Fix name casing in tray icon tooltip [`#1081`](https://github.com/th-ch/youtube-music/pull/1081)
+- [lyrics-genius] Improved reliability of east asian language detection #1080 [`#1082`](https://github.com/th-ch/youtube-music/pull/1082)
+- Add dynamic synced plugin config provider [`#1064`](https://github.com/th-ch/youtube-music/pull/1064)
+- [captions-selector] fix button showing when there aren't any captions available [`#1063`](https://github.com/th-ch/youtube-music/pull/1063)
+- [in-app-menu] fix items hidden by navbar in library [`#1067`](https://github.com/th-ch/youtube-music/pull/1067)
+- Fix Youtube Music logo is draggable [`#1061`](https://github.com/th-ch/youtube-music/pull/1061)
+- fix build action failing on forks, and run it on pull requests [`#1069`](https://github.com/th-ch/youtube-music/pull/1069)
+- try to fix songInfo time&album [`#1032`](https://github.com/th-ch/youtube-music/pull/1032)
+- [lyrics] Romanization toggle for Genius plugin [`#1039`](https://github.com/th-ch/youtube-music/pull/1039)
+- [Snyk] Upgrade html-to-text from 9.0.3 to 9.0.4 [`#1056`](https://github.com/th-ch/youtube-music/pull/1056)
+- [in-app-menu] add toggle menu icon [`#988`](https://github.com/th-ch/youtube-music/pull/988)
+- Fix playback speed slider not showing and PiP button showing when it shouldn't [`#1048`](https://github.com/th-ch/youtube-music/pull/1048)
+- [lyrics-genius] Fix lyrics not showing up or showing up when they shouldn't [`#1052`](https://github.com/th-ch/youtube-music/pull/1052)
+- [in-app-menu] disable nav-bar drag when menu is open [`#1055`](https://github.com/th-ch/youtube-music/pull/1055)
+- [Notifications] [Windows] Native interactive notifications [`#946`](https://github.com/th-ch/youtube-music/pull/946)
+- automate winget releases [`#1049`](https://github.com/th-ch/youtube-music/pull/1049)
+- build win target on ARM [`#1029`](https://github.com/th-ch/youtube-music/pull/1029)
+- feat: auto reconnect rpc and CSP fix [`#961`](https://github.com/th-ch/youtube-music/pull/961)
+- [in-app-menu] make navbar draggable [`#989`](https://github.com/th-ch/youtube-music/pull/989)
+- Add option `useNativePiP` in PiP plugin to use native PiP [`#1013`](https://github.com/th-ch/youtube-music/pull/1013)
+- [PiP] fix hotkey activating when typing in the search box [`#1025`](https://github.com/th-ch/youtube-music/pull/1025)
+- [PiP] Remove titlebar when in-app-menu is enabled [`#1024`](https://github.com/th-ch/youtube-music/pull/1024)
+- [Shortcuts] MPRIS fixes, Repeat Language bug fix [`#1005`](https://github.com/th-ch/youtube-music/pull/1005)
+- Build without release in forks [`#1023`](https://github.com/th-ch/youtube-music/pull/1023)
+- [in-app-menu] fix navbar position [`#997`](https://github.com/th-ch/youtube-music/pull/997)
+- Migrate to yarn v3 [`#1022`](https://github.com/th-ch/youtube-music/pull/1022)
+- [precise-volume] fix arrows shortcuts active in search box [`#1002`](https://github.com/th-ch/youtube-music/pull/1002)
+- [new plugin] Add first version for crossfade plugin [`#1012`](https://github.com/th-ch/youtube-music/pull/1012)
+- Fix bypass-age-restriction lib import [`#984`](https://github.com/th-ch/youtube-music/pull/984)
+- Add menu entry to copy current URL [`#977`](https://github.com/th-ch/youtube-music/pull/977)
+- Remove deprecated code [`#979`](https://github.com/th-ch/youtube-music/pull/979)
+- Update dev dependencies [`#976`](https://github.com/th-ch/youtube-music/pull/976)
+- Update electron and various dependencies [`#974`](https://github.com/th-ch/youtube-music/pull/974)
+- Add CI job for dependency review [`#973`](https://github.com/th-ch/youtube-music/pull/973)
+- Improve captions plugin [`#972`](https://github.com/th-ch/youtube-music/pull/972)
+- fix malformed json in tuna-obs [`#817`](https://github.com/th-ch/youtube-music/pull/817)
+- Add Captions selector [`#866`](https://github.com/th-ch/youtube-music/pull/866)
+- fix SnoreToast implementation [`#941`](https://github.com/th-ch/youtube-music/pull/941)
+- Bump json5 from 1.0.1 to 1.0.2 [`#942`](https://github.com/th-ch/youtube-music/pull/942)
+- [Snyk] Upgrade custom-electron-titlebar from 4.1.3 to 4.1.5 [`#969`](https://github.com/th-ch/youtube-music/pull/969)
+- Fixed video-toggle aligning running before #main-panel exists [`#956`](https://github.com/th-ch/youtube-music/pull/956)
+- [New plugin] Music visualizers [`#953`](https://github.com/th-ch/youtube-music/pull/953)
+- fix PiP buttons not showing up [`#964`](https://github.com/th-ch/youtube-music/pull/964)
+- Use same audio context/source everywhere [`#951`](https://github.com/th-ch/youtube-music/pull/951)
+- revert adblocker bump [`#1105`](https://github.com/th-ch/youtube-music/issues/1105)
+- Allow downloading age restricted videos [`#1084`](https://github.com/th-ch/youtube-music/issues/1084)
+- add option to hide the like buttons [`#1075`](https://github.com/th-ch/youtube-music/issues/1075)
+- add starting page option [`#1071`](https://github.com/th-ch/youtube-music/issues/1071)
+- add slight delay to lyrics genius [`#1041`](https://github.com/th-ch/youtube-music/issues/1041)
+- fix unescaped url params [`#1050`](https://github.com/th-ch/youtube-music/issues/1050)
+- fix playback speed selector [`#1045`](https://github.com/th-ch/youtube-music/issues/1045)
+- fix PiP button [`#959`](https://github.com/th-ch/youtube-music/issues/959)
+- fix security issues in deps [`9cde19d`](https://github.com/th-ch/youtube-music/commit/9cde19d906081fe1851f90fa44581b2b74c328e3)
+- rome lint [`325026e`](https://github.com/th-ch/youtube-music/commit/325026e3eae3daed33a6d66d1ef9f898d6805b28)
+- lint [`b652a01`](https://github.com/th-ch/youtube-music/commit/b652a011a5a08978db6660aeca6908c47a7cf07a)
+
 #### [v1.19.0](https://github.com/th-ch/youtube-music/compare/v1.18.0...v1.19.0)
 
+> 31 December 2022
+
 - Automatic release by CI when version is updated [`#936`](https://github.com/th-ch/youtube-music/pull/936)
 - Center toggle of video-toggle [`#894`](https://github.com/th-ch/youtube-music/pull/894)
 - Load plugins as soon as the window is created [`#890`](https://github.com/th-ch/youtube-music/pull/890)

config/defaults.js

@@ -1,184 +0,0 @@
-const defaultConfig = {
-	"window-size": {
-		width: 1100,
-		height: 550,
-	},
-	url: "https://music.youtube.com",
-	options: {
-		tray: false,
-		appVisible: true,
-		autoUpdates: true,
-		hideMenu: false,
-		startAtLogin: false,
-		disableHardwareAcceleration: false,
-		restartOnConfigChanges: false,
-		trayClickPlayPause: false,
-		autoResetAppCache: false,
-		resumeOnStart: true,
-		proxy: "",
-		startingPage: "",
-	},
-	plugins: {
-		// Enabled plugins
-		navigation: {
-			enabled: true,
-		},
-		adblocker: {
-			enabled: true,
-			cache: true,
-			additionalBlockLists: [], // Additional list of filters, e.g "https://raw.githubusercontent.com/uBlockOrigin/uAssets/master/filters/filters.txt"
-		},
-		// Disabled plugins
-		shortcuts: {
-			enabled: false,
-			overrideMediaKeys: false,
-		},
-		downloader: {
-			enabled: false,
-			ffmpegArgs: [], // e.g. ["-b:a", "192k"] for an audio bitrate of 192kb/s
-			downloadFolder: undefined, // Custom download folder (absolute path)
-			preset: "mp3",
-		},
-		"last-fm": {
-			enabled: false,
-			api_root: "http://ws.audioscrobbler.com/2.0/",
-			api_key: "04d76faaac8726e60988e14c105d421a", // api key registered by @semvis123
-			secret: "a5d2a36fdf64819290f6982481eaffa2",
-		},
-		discord: {
-			enabled: false,
-			autoReconnect: true, // if enabled, will try to reconnect to discord every 5 seconds after disconnecting or failing to connect
-			activityTimoutEnabled: true, // if enabled, the discord rich presence gets cleared when music paused after the time specified below
-			activityTimoutTime: 10 * 60 * 1000, // 10 minutes
-			listenAlong: true, // add a "listen along" button to rich presence
-			hideDurationLeft: false, // hides the start and end time of the song to rich presence
-		},
-		notifications: {
-			enabled: false,
-			unpauseNotification: false,
-			urgency: "normal", //has effect only on Linux 
-			// the following has effect only on Windows
-			interactive: true,
-			toastStyle: 1, // see plugins/notifications/utils for more info
-			refreshOnPlayPause: false,
-			trayControls: true,
-			hideButtonText: false 
-		},
-		"precise-volume": {
-			enabled: false,
-			steps: 1, //percentage of volume to change
-			arrowsShortcut: true, //enable ArrowUp + ArrowDown local shortcuts
-			globalShortcuts: {
-				volumeUp: "",
-				volumeDown: ""
-			},
-			savedVolume: undefined //plugin save volume between session here
-		},
-		sponsorblock: {
-			enabled: false,
-			apiURL: "https://sponsor.ajay.app",
-			categories: [
-				"sponsor",
-				"intro",
-				"outro",
-				"interaction",
-				"selfpromo",
-				"music_offtopic",
-			],
-		},
-		"video-toggle": {
-			enabled: false,
-			mode: "custom",
-			forceHide: false,
-		},
-		"picture-in-picture": {
-			"enabled": false,
-			"alwaysOnTop": true,
-			"savePosition": true,
-			"saveSize": false,
-			"hotkey": "P"
-		},
-		"captions-selector": {
-			enabled: false,
-			disableCaptions: false
-		},
-		"skip-silences": {
-			onlySkipBeginning: false,
-		},
-		"crossfade": {
-			enabled: false,
-			fadeInDuration: 1500, // ms
-			fadeOutDuration: 5000, // ms
-			secondsBeforeEnd: 10, // s
-			fadeScaling: "linear", // 'linear', 'logarithmic' or a positive number in dB
-		},
-		visualizer: {
-			enabled: false,
-			type: "butterchurn",
-			// Config per visualizer
-			butterchurn: {
-				preset: "martin [shadow harlequins shape code] - fata morgana",
-				renderingFrequencyInMs: 500,
-				blendTimeInSeconds: 2.7,
-			},
-			vudio: {
-				effect: "lighting",
-				accuracy: 128,
-				lighting: {
-					maxHeight: 160,
-					maxSize: 12,
-					lineWidth: 1,
-					color: "#49f3f7",
-					shadowBlur: 2,
-					shadowColor: "rgba(244,244,244,.5)",
-					fadeSide: true,
-					prettify: false,
-					horizontalAlign: "center",
-					verticalAlign: "middle",
-					dottify: true,
-				},
-			},
-			wave: {
-				animations: [
-					{
-						type: "Cubes",
-						config: {
-							bottom: true,
-							count: 30,
-							cubeHeight: 5,
-							fillColor: { gradient: ["#FAD961", "#F76B1C"] },
-							lineColor: "rgba(0,0,0,0)",
-							radius: 20,
-						},
-					},
-					{
-						type: "Cubes",
-						config: {
-							top: true,
-							count: 12,
-							cubeHeight: 5,
-							fillColor: { gradient: ["#FAD961", "#F76B1C"] },
-							lineColor: "rgba(0,0,0,0)",
-							radius: 10,
-						},
-					},
-					{
-						type: "Circles",
-						config: {
-							lineColor: {
-								gradient: ["#FAD961", "#FAD961", "#F76B1C"],
-								rotate: 90,
-							},
-							lineWidth: 4,
-							diameter: 20,
-							count: 10,
-							frequencyBand: "base",
-						},
-					},
-				],
-			},
-		},
-	},
-};
-
-module.exports = defaultConfig;

config/defaults.ts

@@ -0,0 +1,279 @@
+import { blockers } from '../plugins/adblocker/blocker-types';
+
+export interface WindowSizeConfig {
+  width: number;
+  height: number;
+}
+
+export interface DefaultConfig {
+  'window-size': {
+    width: number;
+    height: number;
+  }
+  'window-maximized': boolean;
+  'window-position': {
+    x: number;
+    y: number;
+  }
+  url: string;
+  options: {
+    tray: boolean;
+    appVisible: boolean;
+    autoUpdates: boolean;
+    alwaysOnTop: boolean;
+    hideMenu: boolean;
+    hideMenuWarned: boolean;
+    startAtLogin: boolean;
+    disableHardwareAcceleration: boolean;
+    removeUpgradeButton: boolean;
+    restartOnConfigChanges: boolean;
+    trayClickPlayPause: boolean;
+    autoResetAppCache: boolean;
+    resumeOnStart: boolean;
+    likeButtons: string;
+    proxy: string;
+    startingPage: string;
+    overrideUserAgent: boolean;
+    themes: string[];
+  }
+}
+
+const defaultConfig = {
+  'window-size': {
+    width: 1100,
+    height: 550,
+  },
+  'window-maximized': false,
+  'window-position': {
+    x: -1,
+    y: -1,
+  },
+  'url': 'https://music.youtube.com',
+  'options': {
+    tray: false,
+    appVisible: true,
+    autoUpdates: true,
+    alwaysOnTop: false,
+    hideMenu: false,
+    hideMenuWarned: false,
+    startAtLogin: false,
+    disableHardwareAcceleration: false,
+    removeUpgradeButton: false,
+    restartOnConfigChanges: false,
+    trayClickPlayPause: false,
+    autoResetAppCache: false,
+    resumeOnStart: true,
+    likeButtons: '',
+    proxy: '',
+    startingPage: '',
+    overrideUserAgent: false,
+    themes: [] as string[],
+  },
+  /** please order alphabetically */
+  'plugins': {
+    'adblocker': {
+      enabled: true,
+      cache: true,
+      blocker: blockers.InPlayer as string,
+      additionalBlockLists: [], // Additional list of filters, e.g "https://raw.githubusercontent.com/uBlockOrigin/uAssets/master/filters/filters.txt"
+      disableDefaultLists: false,
+    },
+    'album-color-theme': {},
+    'ambient-mode': {},
+    'audio-compressor': {},
+    'blur-nav-bar': {},
+    'bypass-age-restrictions': {},
+    'captions-selector': {
+      enabled: false,
+      disableCaptions: false,
+      autoload: false,
+      lastCaptionsCode: '',
+    },
+    'compact-sidebar': {},
+    'crossfade': {
+      enabled: false,
+      fadeInDuration: 1500, // Ms
+      fadeOutDuration: 5000, // Ms
+      secondsBeforeEnd: 10, // S
+      fadeScaling: 'linear', // 'linear', 'logarithmic' or a positive number in dB
+    },
+    'disable-autoplay': {
+      applyOnce: false,
+    },
+    'discord': {
+      enabled: false,
+      autoReconnect: true, // If enabled, will try to reconnect to discord every 5 seconds after disconnecting or failing to connect
+      activityTimoutEnabled: true, // If enabled, the discord rich presence gets cleared when music paused after the time specified below
+      activityTimoutTime: 10 * 60 * 1000, // 10 minutes
+      listenAlong: true, // Add a "listen along" button to rich presence
+      hideDurationLeft: false, // Hides the start and end time of the song to rich presence
+    },
+    'downloader': {
+      enabled: false,
+      ffmpegArgs: ['-b:a', '256k'], // E.g. ["-b:a", "192k"] for an audio bitrate of 192kb/s
+      downloadFolder: undefined as string | undefined, // Custom download folder (absolute path)
+      preset: 'mp3',
+      skipExisting: false,
+      playlistMaxItems: undefined as number | undefined,
+    },
+    'exponential-volume': {},
+    'in-app-menu': {},
+    'last-fm': {
+      enabled: false,
+      token: undefined as string | undefined, // Token used for authentication
+      session_key: undefined as string | undefined, // Session key used for scrobbling
+      api_root: 'http://ws.audioscrobbler.com/2.0/',
+      api_key: '04d76faaac8726e60988e14c105d421a', // Api key registered by @semvis123
+      secret: 'a5d2a36fdf64819290f6982481eaffa2',
+    },
+    'lumiastream': {},
+    'lyrics-genius': {
+      romanizedLyrics: false,
+    },
+    'navigation': {
+      enabled: true,
+    },
+    'no-google-login': {},
+    'notifications': {
+      enabled: false,
+      unpauseNotification: false,
+      urgency: 'normal', // Has effect only on Linux
+      // the following has effect only on Windows
+      interactive: true,
+      toastStyle: 1, // See plugins/notifications/utils for more info
+      refreshOnPlayPause: false,
+      trayControls: true,
+      hideButtonText: false,
+    },
+    'picture-in-picture': {
+      'enabled': false,
+      'alwaysOnTop': true,
+      'savePosition': true,
+      'saveSize': false,
+      'hotkey': 'P',
+      'pip-position': [10, 10],
+      'pip-size': [450, 275],
+      'isInPiP': false,
+      'useNativePiP': false,
+    },
+    'playback-speed': {},
+    'precise-volume': {
+      enabled: false,
+      steps: 1, // Percentage of volume to change
+      arrowsShortcut: true, // Enable ArrowUp + ArrowDown local shortcuts
+      globalShortcuts: {
+        volumeUp: '',
+        volumeDown: '',
+      },
+      savedVolume: undefined as number | undefined, // Plugin save volume between session here
+    },
+    'quality-changer': {},
+    'shortcuts': {
+      enabled: false,
+      overrideMediaKeys: false,
+      global: {
+        previous: '',
+        playPause: '',
+        next: '',
+      } as Record<string, string>,
+      local: {
+        previous: '',
+        playPause: '',
+        next: '',
+      } as Record<string, string>,
+    },
+    'skip-silences': {
+      onlySkipBeginning: false,
+    },
+    'sponsorblock': {
+      enabled: false,
+      apiURL: 'https://sponsor.ajay.app',
+      categories: [
+        'sponsor',
+        'intro',
+        'outro',
+        'interaction',
+        'selfpromo',
+        'music_offtopic',
+      ],
+    },
+    'taskbar-mediacontrol': {},
+    'touchbar': {},
+    'tuna-obs': {},
+    'video-toggle': {
+      enabled: false,
+      hideVideo: false,
+      mode: 'custom',
+      forceHide: false,
+      align: '',
+    },
+    'visualizer': {
+      enabled: false,
+      type: 'butterchurn',
+      // Config per visualizer
+      butterchurn: {
+        preset: 'martin [shadow harlequins shape code] - fata morgana',
+        renderingFrequencyInMs: 500,
+        blendTimeInSeconds: 2.7,
+      },
+      vudio: {
+        effect: 'lighting',
+        accuracy: 128,
+        lighting: {
+          maxHeight: 160,
+          maxSize: 12,
+          lineWidth: 1,
+          color: '#49f3f7',
+          shadowBlur: 2,
+          shadowColor: 'rgba(244,244,244,.5)',
+          fadeSide: true,
+          prettify: false,
+          horizontalAlign: 'center',
+          verticalAlign: 'middle',
+          dottify: true,
+        },
+      },
+      wave: {
+        animations: [
+          {
+            type: 'Cubes',
+            config: {
+              bottom: true,
+              count: 30,
+              cubeHeight: 5,
+              fillColor: { gradient: ['#FAD961', '#F76B1C'] },
+              lineColor: 'rgba(0,0,0,0)',
+              radius: 20,
+            },
+          },
+          {
+            type: 'Cubes',
+            config: {
+              top: true,
+              count: 12,
+              cubeHeight: 5,
+              fillColor: { gradient: ['#FAD961', '#F76B1C'] },
+              lineColor: 'rgba(0,0,0,0)',
+              radius: 10,
+            },
+          },
+          {
+            type: 'Circles',
+            config: {
+              lineColor: {
+                gradient: ['#FAD961', '#FAD961', '#F76B1C'],
+                rotate: 90,
+              },
+              lineWidth: 4,
+              diameter: 20,
+              count: 10,
+              frequencyBand: 'base',
+            },
+          },
+        ],
+      },
+    },
+  },
+};
+
+export default defaultConfig;

config/dynamic.js

@@ -1,205 +0,0 @@
-const { ipcRenderer, ipcMain } = require("electron");
-
-const defaultConfig = require("./defaults");
-const { getOptions, setOptions, setMenuOptions } = require("./plugins");
-const { sendToFront } = require("../providers/app-controls");
-
-const activePlugins = {};
-/**
- * [!IMPORTANT!]
- * The method is **sync** in the main process and **async** in the renderer process.
- */
-module.exports.getActivePlugins =
-	process.type === "renderer"
-		? async () => ipcRenderer.invoke("get-active-plugins")
-		: () => activePlugins;
-
-if (process.type === "browser") {
-	ipcMain.handle("get-active-plugins", this.getActivePlugins);
-}
-
-/**
- * [!IMPORTANT!]
- * The method is **sync** in the main process and **async** in the renderer process.
- */
-module.exports.isActive =
-	process.type === "renderer"
-		? async (plugin) =>
-				plugin in (await ipcRenderer.invoke("get-active-plugins"))
-		: (plugin) => plugin in activePlugins;
-
-/**
- * This class is used to create a dynamic synced config for plugins.
- *
- * [!IMPORTANT!]
- * The methods are **sync** in the main process and **async** in the renderer process.
- *
- * @param {string} name - The name of the plugin.
- * @param {boolean} [options.enableFront] - Whether the config should be available in front.js. Default: false.
- * @param {object} [options.initialOptions] - The initial options for the plugin. Default: loaded from store.
- *
- * @example
- * const { PluginConfig } = require("../../config/dynamic");
- * const config = new PluginConfig("plugin-name", { enableFront: true });
- * module.exports = { ...config };
- *
- * // or
- *
- * module.exports = (win, options) => {
- *  const config = new PluginConfig("plugin-name", {
- *  	enableFront: true,
- *  	initialOptions: options,
- *  });
- *  setupMyPlugin(win, config);
- * };
- */
-module.exports.PluginConfig = class PluginConfig {
-	#name;
-	#config;
-	#defaultConfig;
-	#enableFront;
-
-	#subscribers = {};
-	#allSubscribers = [];
-
-	constructor(name, { enableFront = false, initialOptions = undefined } = {}) {
-		const pluginDefaultConfig = defaultConfig.plugins[name] || {};
-		const pluginConfig = initialOptions || getOptions(name) || {};
-
-		this.#name = name;
-		this.#enableFront = enableFront;
-		this.#defaultConfig = pluginDefaultConfig;
-		this.#config = { ...pluginDefaultConfig, ...pluginConfig };
-
-		if (this.#enableFront) {
-			this.#setupFront();
-		}
-
-		activePlugins[name] = this;
-	}
-
-	get = (option) => {
-		return this.#config[option];
-	};
-
-	set = (option, value) => {
-		this.#config[option] = value;
-		this.#onChange(option);
-		this.#save();
-	};
-
-	toggle = (option) => {
-		this.#config[option] = !this.#config[option];
-		this.#onChange(option);
-		this.#save();
-	};
-
-	getAll = () => {
-		return { ...this.#config };
-	};
-
-	setAll = (options) => {
-		if (!options || typeof options !== "object")
-			throw new Error("Options must be an object.");
-
-		let changed = false;
-		for (const [key, val] of Object.entries(options)) {
-			if (this.#config[key] !== val) {
-				this.#config[key] = val;
-				this.#onChange(key, false);
-				changed = true;
-			}
-		}
-		if (changed) this.#allSubscribers.forEach((fn) => fn(this.#config));
-		this.#save();
-	};
-
-	getDefaultConfig = () => {
-		return this.#defaultConfig;
-	};
-
-	/**
-	 * Use this method to set an option and restart the app if `appConfig.restartOnConfigChange === true`
-	 *
-	 * Used for options that require a restart to take effect.
-	 */
-	setAndMaybeRestart = (option, value) => {
-		this.#config[option] = value;
-		setMenuOptions(this.#name, this.#config);
-		this.#onChange(option);
-	};
-
-	subscribe = (valueName, fn) => {
-		this.#subscribers[valueName] = fn;
-	};
-
-	subscribeAll = (fn) => {
-		this.#allSubscribers.push(fn);
-	};
-
-	/** Called only from back */
-	#save() {
-		setOptions(this.#name, this.#config);
-	}
-
-	#onChange(valueName, single = true) {
-		this.#subscribers[valueName]?.(this.#config[valueName]);
-		if (single) this.#allSubscribers.forEach((fn) => fn(this.#config));
-	}
-
-	#setupFront() {
-		const ignoredMethods = ["subscribe", "subscribeAll"];
-
-		if (process.type === "renderer") {
-			for (const [fnName, fn] of Object.entries(this)) {
-				if (typeof fn !== "function" || fn.name in ignoredMethods) return;
-				this[fnName] = async (...args) => {
-					return await ipcRenderer.invoke(
-						`${this.#name}-config-${fnName}`,
-						...args,
-					);
-				};
-
-				this.subscribe = (valueName, fn) => {
-					if (valueName in this.#subscribers) {
-						console.error(`Already subscribed to ${valueName}`);
-					}
-					this.#subscribers[valueName] = fn;
-					ipcRenderer.on(
-						`${this.#name}-config-changed-${valueName}`,
-						(_, value) => {
-							fn(value);
-						},
-					);
-					ipcRenderer.send(`${this.#name}-config-subscribe`, valueName);
-				};
-
-				this.subscribeAll = (fn) => {
-					ipcRenderer.on(`${this.#name}-config-changed`, (_, value) => {
-						fn(value);
-					});
-					ipcRenderer.send(`${this.#name}-config-subscribe-all`);
-				};
-			}
-		} else if (process.type === "browser") {
-			for (const [fnName, fn] of Object.entries(this)) {
-				if (typeof fn !== "function" || fn.name in ignoredMethods) return;
-				ipcMain.handle(`${this.#name}-config-${fnName}`, (_, ...args) => {
-					return fn(...args);
-				});
-			}
-
-			ipcMain.on(`${this.#name}-config-subscribe`, (_, valueName) => {
-				this.subscribe(valueName, (value) => {
-					sendToFront(`${this.#name}-config-changed-${valueName}`, value);
-				});
-			});
-
-			ipcMain.on(`${this.#name}-config-subscribe-all`, () => {
-				this.subscribeAll((value) => {
-					sendToFront(`${this.#name}-config-changed`, value);
-				});
-			});
-		}
-	}
-};

config/dynamic.ts

@@ -0,0 +1,241 @@
+/* eslint-disable @typescript-eslint/require-await */
+
+import { ipcMain, ipcRenderer } from 'electron';
+
+import defaultConfig from './defaults';
+
+import { getOptions, setMenuOptions, setOptions } from './plugins';
+
+
+import { sendToFront } from '../providers/app-controls';
+import { Entries } from '../utils/type-utils';
+
+export type DefaultPluginsConfig = typeof defaultConfig.plugins;
+export type OneOfDefaultConfigKey = keyof DefaultPluginsConfig;
+export type OneOfDefaultConfig = typeof defaultConfig.plugins[OneOfDefaultConfigKey];
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const activePlugins: { [key in OneOfDefaultConfigKey]?: PluginConfig<any> } = {};
+
+/**
+ * [!IMPORTANT!]
+ * The method is **sync** in the main process and **async** in the renderer process.
+ */
+export const getActivePlugins
+  = process.type === 'renderer'
+  ? async () => ipcRenderer.invoke('get-active-plugins')
+  : () => activePlugins;
+
+if (process.type === 'browser') {
+  ipcMain.handle('get-active-plugins', getActivePlugins);
+}
+
+/**
+ * [!IMPORTANT!]
+ * The method is **sync** in the main process and **async** in the renderer process.
+ */
+export const isActive
+  = process.type === 'renderer'
+  ? async (plugin: string) =>
+    plugin in (await ipcRenderer.invoke('get-active-plugins'))
+  : (plugin: string): boolean => plugin in activePlugins;
+
+interface PluginConfigOptions {
+  enableFront: boolean;
+  initialOptions?: OneOfDefaultConfig;
+}
+
+/**
+ * This class is used to create a dynamic synced config for plugins.
+ *
+ * [!IMPORTANT!]
+ * The methods are **sync** in the main process and **async** in the renderer process.
+ *
+ * @param {string} name - The name of the plugin.
+ * @param {boolean} [options.enableFront] - Whether the config should be available in front.js. Default: false.
+ * @param {object} [options.initialOptions] - The initial options for the plugin. Default: loaded from store.
+ *
+ * @example
+ * const { PluginConfig } = require("../../config/dynamic");
+ * const config = new PluginConfig("plugin-name", { enableFront: true });
+ * module.exports = { ...config };
+ *
+ * // or
+ *
+ * module.exports = (win, options) => {
+ *  const config = new PluginConfig("plugin-name", {
+ *    enableFront: true,
+ *    initialOptions: options,
+ *  });
+ *  setupMyPlugin(win, config);
+ * };
+ */
+export type ConfigType<T extends OneOfDefaultConfigKey> = typeof defaultConfig.plugins[T];
+type ValueOf<T> = T[keyof T];
+type Mode<T, Mode extends 'r' | 'm'> = Mode extends 'r' ? Promise<T> : T;
+export class PluginConfig<T extends OneOfDefaultConfigKey> {
+  private readonly name: string;
+  private readonly config: ConfigType<T>;
+  private readonly defaultConfig: ConfigType<T>;
+  private readonly enableFront: boolean;
+
+  private subscribers: { [key in keyof ConfigType<T>]?: (config: ConfigType<T>) => void } = {};
+  private allSubscribers: ((config: ConfigType<T>) => void)[] = [];
+
+  constructor(
+    name: T,
+    options: PluginConfigOptions = {
+      enableFront: false,
+    },
+  ) {
+    const pluginDefaultConfig = defaultConfig.plugins[name] ?? {};
+    const pluginConfig = options.initialOptions || getOptions(name) || {};
+
+    this.name = name;
+    this.enableFront = options.enableFront;
+    this.defaultConfig = pluginDefaultConfig;
+    this.config = { ...pluginDefaultConfig, ...pluginConfig };
+
+    if (this.enableFront) {
+      this.setupFront();
+    }
+
+    activePlugins[name] = this;
+  }
+
+  get<Key extends keyof ConfigType<T> = keyof ConfigType<T>>(key: Key): ConfigType<T>[Key] {
+    return this.config?.[key];
+  }
+
+  set(key: keyof ConfigType<T>, value: ValueOf<ConfigType<T>>) {
+    this.config[key] = value;
+    this.onChange(key);
+    this.save();
+  }
+
+  getAll(): ConfigType<T> {
+    return { ...this.config };
+  }
+
+  setAll(options: Partial<ConfigType<T>>) {
+    if (!options || typeof options !== 'object') {
+      throw new Error('Options must be an object.');
+    }
+
+    let changed = false;
+    for (const [key, value] of Object.entries(options) as Entries<typeof options>) {
+      if (this.config[key] !== value) {
+        if (value !== undefined) this.config[key] = value;
+        this.onChange(key, false);
+        changed = true;
+      }
+    }
+
+    if (changed) {
+      for (const fn of this.allSubscribers) {
+        fn(this.config);
+      }
+    }
+
+    this.save();
+  }
+
+  getDefaultConfig() {
+    return this.defaultConfig;
+  }
+
+  /**
+   * Use this method to set an option and restart the app if `appConfig.restartOnConfigChange === true`
+   *
+   * Used for options that require a restart to take effect.
+   */
+  setAndMaybeRestart(key: keyof ConfigType<T>, value: ValueOf<ConfigType<T>>) {
+    this.config[key] = value;
+    setMenuOptions(this.name, this.config);
+    this.onChange(key);
+  }
+
+  subscribe(valueName: keyof ConfigType<T>, fn: (config: ConfigType<T>) => void) {
+    this.subscribers[valueName] = fn;
+  }
+
+  subscribeAll(fn: (config: ConfigType<T>) => void) {
+    this.allSubscribers.push(fn);
+  }
+
+  /** Called only from back */
+  private save() {
+    setOptions(this.name, this.config);
+  }
+
+  private onChange(valueName: keyof ConfigType<T>, single: boolean = true) {
+    this.subscribers[valueName]?.(this.config[valueName] as ConfigType<T>);
+    if (single) {
+      for (const fn of this.allSubscribers) {
+        fn(this.config);
+      }
+    }
+  }
+
+  private setupFront() {
+    const ignoredMethods = ['subscribe', 'subscribeAll'];
+
+    if (process.type === 'renderer') {
+      for (const [fnName, fn] of Object.entries(this) as Entries<this>) {
+        if (typeof fn !== 'function' || fn.name in ignoredMethods) {
+          return;
+        }
+
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any,@typescript-eslint/no-unsafe-return
+        this[fnName] = (async (...args: any) => await ipcRenderer.invoke(
+          `${this.name}-config-${String(fnName)}`,
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+          ...args,
+        )) as typeof this[keyof this];
+
+        this.subscribe = (valueName, fn: (config: ConfigType<T>) => void) => {
+          if (valueName in this.subscribers) {
+            console.error(`Already subscribed to ${String(valueName)}`);
+          }
+
+          this.subscribers[valueName] = fn;
+          ipcRenderer.on(
+            `${this.name}-config-changed-${String(valueName)}`,
+            (_, value: ConfigType<T>) => {
+              fn(value);
+            },
+          );
+          ipcRenderer.send(`${this.name}-config-subscribe`, valueName);
+        };
+
+        this.subscribeAll = (fn: (config: ConfigType<T>) => void) => {
+          ipcRenderer.on(`${this.name}-config-changed`, (_, value: ConfigType<T>) => {
+            fn(value);
+          });
+          ipcRenderer.send(`${this.name}-config-subscribe-all`);
+        };
+      }
+    } else if (process.type === 'browser') {
+      for (const [fnName, fn] of Object.entries(this) as Entries<this>) {
+        if (typeof fn !== 'function' || fn.name in ignoredMethods) {
+          return;
+        }
+
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument,@typescript-eslint/no-unsafe-return
+        ipcMain.handle(`${this.name}-config-${String(fnName)}`, (_, ...args) => fn(...args));
+      }
+
+      ipcMain.on(`${this.name}-config-subscribe`, (_, valueName: keyof ConfigType<T>) => {
+        this.subscribe(valueName, (value) => {
+          sendToFront(`${this.name}-config-changed-${String(valueName)}`, value);
+        });
+      });
+
+      ipcMain.on(`${this.name}-config-subscribe-all`, () => {
+        this.subscribeAll((value) => {
+          sendToFront(`${this.name}-config-changed`, value);
+        });
+      });
+    }
+  }
+}

config/index.js

@@ -1,30 +0,0 @@
-const defaultConfig = require("./defaults");
-const plugins = require("./plugins");
-const store = require("./store");
-const { restart } = require("../providers/app-controls");
-
-const set = (key, value) => {
-	store.set(key, value);
-};
-
-function setMenuOption(key, value) {
-	set(key, value);
-	if (store.get("options.restartOnConfigChanges")) restart();
-}
-
-const get = (key) => {
-	return store.get(key);
-};
-
-module.exports = {
-	defaultConfig,
-	get,
-	set,
-	setMenuOption,
-	edit: () => store.openInEditor(),
-	watch: (cb) => {
-		store.onDidChange("options", cb);
-		store.onDidChange("plugins", cb);
-	},
-	plugins,
-};

config/index.ts

@@ -0,0 +1,53 @@
+import Store from 'electron-store';
+
+import defaultConfig from './defaults';
+import plugins from './plugins';
+import store from './store';
+
+import { restart } from '../providers/app-controls';
+
+
+const set = (key: string, value: unknown) => {
+  store.set(key, value);
+};
+
+function setMenuOption(key: string, value: unknown) {
+  set(key, value);
+  if (store.get('options.restartOnConfigChanges')) {
+    restart();
+  }
+}
+
+// MAGIC OF TYPESCRIPT
+
+type Prev = [never, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10,
+  11, 12, 13, 14, 15, 16, 17, 18, 19, 20, ...0[]]
+type Join<K, P> = K extends string | number ?
+  P extends string | number ?
+    `${K}${'' extends P ? '' : '.'}${P}`
+    : never : never;
+type Paths<T, D extends number = 10> = [D] extends [never] ? never : T extends object ?
+  { [K in keyof T]-?: K extends string | number ?
+    `${K}` | Join<K, Paths<T[K], Prev[D]>>
+    : never
+  }[keyof T] : ''
+
+type SplitKey<K> = K extends `${infer A}.${infer B}` ? [A, B] : [K, string];
+type PathValue<T, K extends string> =
+  SplitKey<K> extends [infer A extends keyof T, infer B extends string]
+    ? PathValue<T[A], B>
+    : T;
+const get = <Key extends Paths<typeof defaultConfig>>(key: Key) => store.get(key) as PathValue<typeof defaultConfig, typeof key>;
+
+export default {
+  defaultConfig,
+  get,
+  set,
+  setMenuOption,
+  edit: () => store.openInEditor(),
+  watch(cb: Parameters<Store['onDidChange']>[1]) {
+    store.onDidChange('options', cb);
+    store.onDidChange('plugins', cb);
+  },
+  plugins,
+};

config/plugins.js

@@ -1,53 +0,0 @@
-const store = require("./store");
-const { restart } = require("../providers/app-controls");
-
-function getEnabled() {
-	const plugins = store.get("plugins");
-	const enabledPlugins = Object.entries(plugins).filter(([plugin, options]) =>
-		isEnabled(plugin)
-	);
-	return enabledPlugins;
-}
-
-function isEnabled(plugin) {
-	const pluginConfig = store.get("plugins")[plugin];
-	return pluginConfig !== undefined && pluginConfig.enabled;
-}
-
-function setOptions(plugin, options) {
-	const plugins = store.get("plugins");
-	store.set("plugins", {
-		...plugins,
-		[plugin]: {
-			...plugins[plugin],
-			...options,
-		},
-	});
-}
-
-function setMenuOptions(plugin, options) {
-	setOptions(plugin, options);
-	if (store.get("options.restartOnConfigChanges")) restart();
-}
-
-function getOptions(plugin) {
-	return store.get("plugins")[plugin];
-}
-
-function enable(plugin) {
-	setMenuOptions(plugin, { enabled: true });
-}
-
-function disable(plugin) {
-	setMenuOptions(plugin, { enabled: false });
-}
-
-module.exports = {
-	isEnabled,
-	getEnabled,
-	enable,
-	disable,
-	setOptions,
-	setMenuOptions,
-	getOptions,
-};

config/plugins.ts

@@ -0,0 +1,63 @@
+import store from './store';
+import defaultConfig from './defaults';
+
+import { restart } from '../providers/app-controls';
+import { Entries } from '../utils/type-utils';
+
+interface Plugin {
+  enabled: boolean;
+}
+
+type DefaultPluginsConfig = typeof defaultConfig.plugins;
+
+export function getEnabled() {
+  const plugins = store.get('plugins') as DefaultPluginsConfig;
+  return (Object.entries(plugins) as Entries<DefaultPluginsConfig>).filter(([plugin]) =>
+    isEnabled(plugin),
+  );
+}
+
+export function isEnabled(plugin: string) {
+  const pluginConfig = (store.get('plugins') as Record<string, Plugin>)[plugin];
+  return pluginConfig !== undefined && pluginConfig.enabled;
+}
+
+export function setOptions<T>(plugin: string, options: T) {
+  const plugins = store.get('plugins') as Record<string, T>;
+  store.set('plugins', {
+    ...plugins,
+    [plugin]: {
+      ...plugins[plugin],
+      ...options,
+    },
+  });
+}
+
+export function setMenuOptions<T>(plugin: string, options: T) {
+  setOptions(plugin, options);
+  if (store.get('options.restartOnConfigChanges')) {
+    restart();
+  }
+}
+
+export function getOptions<T>(plugin: string): T {
+  return (store.get('plugins') as Record<string, T>)[plugin];
+}
+
+export function enable(plugin: string) {
+  setMenuOptions(plugin, { enabled: true });
+}
+
+export function disable(plugin: string) {
+  setMenuOptions(plugin, { enabled: false });
+}
+
+export default {
+  isEnabled,
+  getEnabled,
+  enable,
+  disable,
+  setOptions,
+  setMenuOptions,
+  getOptions,
+};

config/store.js

@@ -1,112 +0,0 @@
-const Store = require("electron-store");
-
-const defaults = require("./defaults");
-
-const setDefaultPluginOptions = (store, plugin) => {
-	if (!store.get(`plugins.${plugin}`)) {
-		store.set(`plugins.${plugin}`, defaults.plugins[plugin]);
-	}
-}
-
-const migrations = {
-	">=1.20.0": (store) => {
-		setDefaultPluginOptions(store, "visualizer");
-
-		if (store.get("plugins.notifications.toastStyle") === undefined) {
-			const pluginOptions = store.get("plugins.notifications") || {};
-			store.set("plugins.notifications", {
-				...defaults.plugins.notifications,
-				...pluginOptions,
-			});
-		}
-
-		if (store.get("options.ForceShowLikeButtons")) {
-			store.delete("options.ForceShowLikeButtons");
-			store.set("options.likeButtons", 'force');
-		}
-	},
-	">=1.17.0": (store) => {
-		setDefaultPluginOptions(store, "picture-in-picture");
-
-		if (store.get("plugins.video-toggle.mode") === undefined) {
-			store.set("plugins.video-toggle.mode", "custom");
-		}
-	},
-	">=1.14.0": (store) => {
-		if (
-			typeof store.get("plugins.precise-volume.globalShortcuts") !== "object"
-		) {
-			store.set("plugins.precise-volume.globalShortcuts", {});
-		}
-
-		if (store.get("plugins.hide-video-player.enabled")) {
-			store.delete("plugins.hide-video-player");
-			store.set("plugins.video-toggle.enabled", true);
-		}
-	},
-	">=1.13.0": (store) => {
-		if (store.get("plugins.discord.listenAlong") === undefined) {
-			store.set("plugins.discord.listenAlong", true);
-		}
-	},
-	">=1.12.0": (store) => {
-		const options = store.get("plugins.shortcuts");
-		let updated = false;
-		for (const optionType of ["global", "local"]) {
-			if (Array.isArray(options[optionType])) {
-				const updatedOptions = {};
-				for (const optionObject of options[optionType]) {
-					if (optionObject.action && optionObject.shortcut) {
-						updatedOptions[optionObject.action] = optionObject.shortcut;
-					}
-				}
-
-				options[optionType] = updatedOptions;
-				updated = true;
-			}
-		}
-
-		if (updated) {
-			store.set("plugins.shortcuts", options);
-		}
-	},
-	">=1.11.0": (store) => {
-		if (store.get("options.resumeOnStart") === undefined) {
-			store.set("options.resumeOnStart", true);
-		}
-	},
-	">=1.7.0": (store) => {
-		const enabledPlugins = store.get("plugins");
-		if (!Array.isArray(enabledPlugins)) {
-			console.warn("Plugins are not in array format, cannot migrate");
-			return;
-		}
-
-		// Include custom options
-		const plugins = {
-			adblocker: {
-				enabled: true,
-				cache: true,
-				additionalBlockLists: [],
-			},
-			downloader: {
-				enabled: false,
-				ffmpegArgs: [], // e.g. ["-b:a", "192k"] for an audio bitrate of 192kb/s
-				downloadFolder: undefined, // Custom download folder (absolute path)
-			},
-		};
-		enabledPlugins.forEach((enabledPlugin) => {
-			plugins[enabledPlugin] = {
-				...plugins[enabledPlugin],
-				enabled: true,
-			};
-		});
-		store.set("plugins", plugins);
-	},
-};
-
-module.exports = new Store({
-	defaults,
-	clearInvalidConfig: false,
-	migrations,
-});

config/store.ts

@@ -0,0 +1,124 @@
+import Store from 'electron-store';
+import Conf from 'conf';
+
+import defaults from './defaults';
+
+const setDefaultPluginOptions = (store: Conf<Record<string, unknown>>, plugin: keyof typeof defaults.plugins) => {
+  if (!store.get(`plugins.${plugin}`)) {
+    store.set(`plugins.${plugin}`, defaults.plugins[plugin]);
+  }
+};
+
+const migrations = {
+  '>=1.20.0'(store: Conf<Record<string, unknown>>) {
+    setDefaultPluginOptions(store, 'visualizer');
+
+    if (store.get('plugins.notifications.toastStyle') === undefined) {
+      const pluginOptions = store.get('plugins.notifications') || {};
+      store.set('plugins.notifications', {
+        ...defaults.plugins.notifications,
+        ...pluginOptions,
+      });
+    }
+
+    if (store.get('options.ForceShowLikeButtons')) {
+      store.delete('options.ForceShowLikeButtons');
+      store.set('options.likeButtons', 'force');
+    }
+  },
+  '>=1.17.0'(store: Conf<Record<string, unknown>>) {
+    setDefaultPluginOptions(store, 'picture-in-picture');
+
+    if (store.get('plugins.video-toggle.mode') === undefined) {
+      store.set('plugins.video-toggle.mode', 'custom');
+    }
+  },
+  '>=1.14.0'(store: Conf<Record<string, unknown>>) {
+    if (
+      typeof store.get('plugins.precise-volume.globalShortcuts') !== 'object'
+    ) {
+      store.set('plugins.precise-volume.globalShortcuts', {});
+    }
+
+    if (store.get('plugins.hide-video-player.enabled')) {
+      store.delete('plugins.hide-video-player');
+      store.set('plugins.video-toggle.enabled', true);
+    }
+  },
+  '>=1.13.0'(store: Conf<Record<string, unknown>>) {
+    if (store.get('plugins.discord.listenAlong') === undefined) {
+      store.set('plugins.discord.listenAlong', true);
+    }
+  },
+  '>=1.12.0'(store: Conf<Record<string, unknown>>) {
+    const options = store.get('plugins.shortcuts') as Record<string, {
+      action: string;
+      shortcut: unknown;
+    }[] | Record<string, unknown>>;
+    let updated = false;
+    for (const optionType of ['global', 'local']) {
+      if (Array.isArray(options[optionType])) {
+        const optionsArray = options[optionType] as {
+          action: string;
+          shortcut: unknown;
+        }[];
+        const updatedOptions: Record<string, unknown> = {};
+        for (const optionObject of optionsArray) {
+          if (optionObject.action && optionObject.shortcut) {
+            updatedOptions[optionObject.action] = optionObject.shortcut;
+          }
+        }
+
+        options[optionType] = updatedOptions;
+        updated = true;
+      }
+    }
+
+    if (updated) {
+      store.set('plugins.shortcuts', options);
+    }
+  },
+  '>=1.11.0'(store: Conf<Record<string, unknown>>) {
+    if (store.get('options.resumeOnStart') === undefined) {
+      store.set('options.resumeOnStart', true);
+    }
+  },
+  '>=1.7.0'(store: Conf<Record<string, unknown>>) {
+    const enabledPlugins = store.get('plugins') as string[];
+    if (!Array.isArray(enabledPlugins)) {
+      console.warn('Plugins are not in array format, cannot migrate');
+      return;
+    }
+
+    // Include custom options
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const plugins: Record<string, any> = {
+      adblocker: {
+        enabled: true,
+        cache: true,
+        additionalBlockLists: [],
+      },
+      downloader: {
+        enabled: false,
+        ffmpegArgs: [], // E.g. ["-b:a", "192k"] for an audio bitrate of 192kb/s
+        downloadFolder: undefined, // Custom download folder (absolute path)
+      },
+    };
+
+    for (const enabledPlugin of enabledPlugins) {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      plugins[enabledPlugin] = {
+        ...plugins[enabledPlugin],
+        enabled: true,
+      };
+    }
+
+    store.set('plugins', plugins);
+  },
+};
+
+export default new Store({
+  defaults,
+  clearInvalidConfig: false,
+  migrations,
+});

custom-electron-prompt.d.ts

@@ -0,0 +1,85 @@
+declare module 'custom-electron-prompt' {
+  import { BrowserWindow } from 'electron';
+
+  export type SelectOptions = Record<string, string>;
+
+  export interface CounterOptions {
+    minimum?: number;
+    maximum?: number;
+    multiFire?: boolean;
+  }
+
+  export interface KeybindOptions {
+    value: string;
+    label: string;
+    default?: string;
+  }
+
+  export interface InputOptions {
+    label: string;
+    value: unknown;
+    inputAttrs?: Partial<HTMLInputElement>;
+    selectOptions?: SelectOptions;
+  }
+
+  interface BasePromptOptions<T extends string> {
+    type?: T;
+    width?: number;
+    height?: number;
+    resizable?: boolean;
+    title?: string;
+    label?: string;
+    buttonLabels?: {
+      ok?: string;
+      cancel?: string;
+    };
+    alwaysOnTop?: boolean;
+    value?: unknown;
+    icon?: string;
+    useHtmlLabel?: boolean;
+    customStylesheet?: string;
+    menuBarVisible?: boolean;
+    skipTaskbar?: boolean;
+    frame?: boolean;
+    customScript?: string;
+    enableRemoteModule?: boolean;
+    inputAttrs?: Partial<HTMLInputElement>;
+  }
+
+  export type InputPromptOptions = BasePromptOptions<'input'>;
+  export interface SelectPromptOptions extends BasePromptOptions<'select'> {
+    selectOptions: SelectOptions;
+  }
+  export interface CounterPromptOptions extends BasePromptOptions<'counter'> {
+    counterOptions: CounterOptions;
+  }
+  export interface MultiInputPromptOptions extends BasePromptOptions<'multiInput'> {
+    multiInputOptions: InputOptions[];
+  }
+  export interface KeybindPromptOptions extends BasePromptOptions<'keybind'> {
+    keybindOptions: KeybindOptions[];
+  }
+
+  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
+  );
+
+  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;
+
+  const prompt: <T extends Type>(options?: PromptOptions<T> & { type: T }, parent?: BrowserWindow) => Promise<PromptResult<T> | null>;
+
+  export default prompt;
+}

docs/img/adblock.svg

@@ -1 +1,9 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400"><g transform="translate(183.604 196.396)" stroke="#fff" stroke-width="2.23"><path style="line-height:normal;-inkscape-font-specification:Sans;text-indent:0;text-align:start;text-decoration-line:none;text-transform:none;block-progression:tb;marker:none" d="M-116.99 106.245l31.82 31.82 236.31-236.31-31.82-31.82z" color="#000" font-weight="400" font-family="Sans" overflow="visible" fill="#fff" stroke="none"/><circle r="171.304" cy="4" cx="16" fill="none" stroke-width="44.6"/></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400">
+  <g transform="translate(183.604 196.396)" stroke="#fff" stroke-width="2.23">
+    <path
+      style="line-height:normal;-inkscape-font-specification:Sans;text-indent:0;text-align:start;text-decoration-line:none;text-transform:none;block-progression:tb;marker:none"
+      d="M-116.99 106.245l31.82 31.82 236.31-236.31-31.82-31.82z" color="#000" font-weight="400"
+      font-family="Sans" overflow="visible" fill="#fff" stroke="none"/>
+    <circle r="171.304" cy="4" cx="16" fill="none" stroke-width="44.6"/>
+  </g>
+</svg>

docs/img/bg-bottom.svg

@@ -1 +1,23 @@
-<svg width="1440" height="347" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="a"><stop stop-color="#606483" stop-opacity="0" offset="0%"/><stop stop-color="#0B0D19" stop-opacity=".72" offset="100%"/></linearGradient><linearGradient x1="50%" y1="0%" x2="39.334%" y2="79.282%" id="b"><stop stop-color="#0B0D19" offset="0%"/><stop stop-color="#0B0D19" stop-opacity="0" offset="100%"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><path d="M177.486 208.219c78.18 89.285 218.65-81.067 218.65-119.337 0-38.27-86.408-69.295-193-69.295-106.59 0-193 31.024-193 69.295 0 38.27 89.17 30.051 167.35 119.337z" transform="rotate(6 -140.175 3980.948)" fill="url(#a)"/><path d="M252.464 335.471c101.27 115.965 283.227-105.29 283.227-154.996 0-49.705-111.929-90-250-90s-250 40.295-250 90c0 49.706 115.503 39.032 216.773 154.996z" fill="url(#a)" transform="rotate(24 321.92 -247.724)"/><path d="M302.512 242.909c88.025 32.428 156-25.04 156-55.93 0-30.888-69.844-55.928-156-55.928-86.157 0-156 25.04-156 55.929 0 30.888 67.974 23.5 156 55.929z" fill="url(#b)" transform="rotate(24 338.741 -285.505)"/></g></svg>
+<svg width="1440" height="347" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="a">
+      <stop stop-color="#606483" stop-opacity="0" offset="0%"/>
+      <stop stop-color="#0B0D19" stop-opacity=".72" offset="100%"/>
+    </linearGradient>
+    <linearGradient x1="50%" y1="0%" x2="39.334%" y2="79.282%" id="b">
+      <stop stop-color="#0B0D19" offset="0%"/>
+      <stop stop-color="#0B0D19" stop-opacity="0" offset="100%"/>
+    </linearGradient>
+  </defs>
+  <g fill="none" fill-rule="evenodd">
+    <path
+      d="M177.486 208.219c78.18 89.285 218.65-81.067 218.65-119.337 0-38.27-86.408-69.295-193-69.295-106.59 0-193 31.024-193 69.295 0 38.27 89.17 30.051 167.35 119.337z"
+      transform="rotate(6 -140.175 3980.948)" fill="url(#a)"/>
+    <path
+      d="M252.464 335.471c101.27 115.965 283.227-105.29 283.227-154.996 0-49.705-111.929-90-250-90s-250 40.295-250 90c0 49.706 115.503 39.032 216.773 154.996z"
+      fill="url(#a)" transform="rotate(24 321.92 -247.724)"/>
+    <path
+      d="M302.512 242.909c88.025 32.428 156-25.04 156-55.93 0-30.888-69.844-55.928-156-55.928-86.157 0-156 25.04-156 55.929 0 30.888 67.974 23.5 156 55.929z"
+      fill="url(#b)" transform="rotate(24 338.741 -285.505)"/>
+  </g>
+</svg>

docs/img/bg-top.svg

@@ -1 +1,32 @@
-<svg width="1440" height="318" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="38.706%" y1="-187.115%" x2="18.675%" y2="110.984%" id="a"><stop stop-color="#FFF" stop-opacity="0" offset="0%"/><stop stop-color="#c3352e" offset="100%"/></linearGradient><linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="c"><stop stop-color="#606483" stop-opacity="0" offset="0%"/><stop stop-color="#0B0D19" stop-opacity=".72" offset="100%"/></linearGradient><linearGradient x1="50%" y1="0%" x2="39.334%" y2="79.282%" id="d"><stop stop-color="#0B0D19" stop-opacity=".32" offset="0%"/><stop stop-color="#0B0D19" stop-opacity="0" offset="100%"/></linearGradient><filter id="b"><feTurbulence type="fractalNoise" numOctaves="2" baseFrequency=".3" result="turb"/><feComposite in="turb" operator="arithmetic" k1=".1" k2=".1" k3=".1" k4=".1" result="result1"/><feComposite operator="in" in="result1" in2="SourceGraphic" result="finalFilter"/><feBlend mode="multiply" in="finalFilter" in2="SourceGraphic"/></filter></defs><g fill="none" fill-rule="evenodd"><path d="M88.494 90c67.04 7.177 161.094-24.753 224.996-90H.2c25.3 48.079 42.361 85.083 88.294 90z" transform="translate(1051)" fill="url(#a)" filter="url(#b)"/><path d="M250.464 367.471c101.27 115.965 283.227-105.29 283.227-154.996 0-49.705-111.929-90-250-90s-250 40.295-250 90c0 49.706 115.503 39.032 216.773 154.996z" fill="url(#c)" transform="rotate(143 810.285 354.367)"/><path d="M373.408 256.178c88.026 32.429 156-25.04 156-55.929 0-30.888-69.843-55.929-156-55.929-86.156 0-156 25.04-156 55.93 0 30.888 67.975 23.5 156 55.928z" fill="url(#d)" transform="rotate(136 905.21 332.676)"/></g></svg>
+<svg width="1440" height="318" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+        <linearGradient x1="38.706%" y1="-187.115%" x2="18.675%" y2="110.984%" id="a">
+            <stop stop-color="#FFF" stop-opacity="0" offset="0%"/>
+            <stop stop-color="#c3352e" offset="100%"/>
+        </linearGradient>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="c">
+            <stop stop-color="#606483" stop-opacity="0" offset="0%"/>
+            <stop stop-color="#0B0D19" stop-opacity=".72" offset="100%"/>
+        </linearGradient>
+        <linearGradient x1="50%" y1="0%" x2="39.334%" y2="79.282%" id="d">
+            <stop stop-color="#0B0D19" stop-opacity=".32" offset="0%"/>
+            <stop stop-color="#0B0D19" stop-opacity="0" offset="100%"/>
+        </linearGradient>
+        <filter id="b">
+            <feTurbulence type="fractalNoise" numOctaves="2" baseFrequency=".3" result="turb"/>
+            <feComposite in="turb" operator="arithmetic" k1=".1" k2=".1" k3=".1" k4=".1" result="result1"/>
+            <feComposite operator="in" in="result1" in2="SourceGraphic" result="finalFilter"/>
+            <feBlend mode="multiply" in="finalFilter" in2="SourceGraphic"/>
+        </filter>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <path d="M88.494 90c67.04 7.177 161.094-24.753 224.996-90H.2c25.3 48.079 42.361 85.083 88.294 90z"
+              transform="translate(1051)" fill="url(#a)" filter="url(#b)"/>
+        <path
+                d="M250.464 367.471c101.27 115.965 283.227-105.29 283.227-154.996 0-49.705-111.929-90-250-90s-250 40.295-250 90c0 49.706 115.503 39.032 216.773 154.996z"
+                fill="url(#c)" transform="rotate(143 810.285 354.367)"/>
+        <path
+                d="M373.408 256.178c88.026 32.429 156-25.04 156-55.929 0-30.888-69.843-55.929-156-55.929-86.156 0-156 25.04-156 55.93 0 30.888 67.975 23.5 156 55.928z"
+                fill="url(#d)" transform="rotate(136 905.21 332.676)"/>
+    </g>
+</svg>

docs/img/code.svg

@@ -1 +1,5 @@
-<svg width="96" height="48" xmlns="http://www.w3.org/2000/svg"><text y="35" x="48" fill="#fff" stroke-width="0" font-size="36" font-family="Monospace" text-anchor="middle" stroke="#fff">&lt;/&gt;</text></svg>
+<svg width="96" height="48" xmlns="http://www.w3.org/2000/svg">
+  <text y="35" x="48" fill="#fff" stroke-width="0" font-size="36" font-family="Monospace" text-anchor="middle"
+        stroke="#fff">&lt;/&gt;
+  </text>
+</svg>

docs/img/download.svg

@@ -1 +1,8 @@
-<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="style-scope yt-icon" style="width:100%;height:100%" pointer-events="none" display="block" fill="#fff"><g class="style-scope yt-icon"><path d="M25.462 19.105v6.848H4.515v-6.848H.489v8.861c0 1.111.9 2.012 2.016 2.012h24.967c1.115 0 2.016-.9 2.016-2.012v-8.861h-4.026zM14.62 18.426l-5.764-6.965s-.877-.828.074-.828h3.248V9.217.494S12.049 0 12.793 0h4.572c.536 0 .524.416.524.416V10.424h2.998c1.154 0 .285.867.285.867s-4.904 6.51-5.588 7.193c-.492.495-.964-.058-.964-.058z" class="style-scope yt-icon"/></g></svg>
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="style-scope yt-icon" style="width:100%;height:100%"
+     pointer-events="none" display="block" fill="#fff">
+    <g class="style-scope yt-icon">
+        <path
+                d="M25.462 19.105v6.848H4.515v-6.848H.489v8.861c0 1.111.9 2.012 2.016 2.012h24.967c1.115 0 2.016-.9 2.016-2.012v-8.861h-4.026zM14.62 18.426l-5.764-6.965s-.877-.828.074-.828h3.248V9.217.494S12.049 0 12.793 0h4.572c.536 0 .524.416.524.416V10.424h2.998c1.154 0 .285.867.285.867s-4.904 6.51-5.588 7.193c-.492.495-.964-.058-.964-.058z"
+                class="style-scope yt-icon"/>
+    </g>
+</svg>

docs/img/footer.svg

@@ -1 +1,35 @@
-<svg width="1440" height="582" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="a"><stop stop-color="#606483" stop-opacity="0" offset="0%"/><stop stop-color="#363636" stop-opacity=".72" offset="100%"/></linearGradient><linearGradient x1="50%" y1="0%" x2="39.334%" y2="79.282%" id="b"><stop stop-color="#363636" offset="0%"/><stop stop-color="#363636" stop-opacity="0" offset="100%"/></linearGradient><radialGradient cx="33.3%" cy="43.394%" fx="33.3%" fy="43.394%" r="57.93%" gradientTransform="matrix(.24796 -.96592 .92535 .25883 -.151 .643)" id="c"><stop stop-color="#c3352e" stop-opacity="0" offset="0%"/><stop stop-color="#c3352e" stop-opacity=".64" offset="51.712%"/><stop stop-color="#c3352e" stop-opacity=".24" offset="100%"/></radialGradient><filter id="d"><feTurbulence type="fractalNoise" numOctaves="2" baseFrequency=".3" result="turb"/><feComposite in="turb" operator="arithmetic" k1=".1" k2=".1" k3=".1" k4=".1" result="result1"/><feComposite operator="in" in="result1" in2="SourceGraphic" result="finalFilter"/><feBlend mode="multiply" in="finalFilter" in2="SourceGraphic"/></filter></defs><g fill="none" fill-rule="evenodd"><path d="M252.464 335.471c101.27 115.965 283.227-105.29 283.227-154.996 0-49.705-111.929-90-250-90s-250 40.295-250 90c0 49.706 115.503 39.032 216.773 154.996z" fill="url(#a)" transform="rotate(24 -272.272 -82.087)"/><path d="M302.512 242.909c88.025 32.428 156-25.04 156-55.93 0-30.888-69.844-55.928-156-55.928-86.157 0-156 25.04-156 55.929 0 30.888 67.974 23.5 156 55.929z" fill="url(#b)" transform="rotate(24 -255.451 -119.868)"/><path d="M103.064 315.218c128.156 12.998 192.38 157.059 218.627 106.632 26.247-50.427-44.059-106.456 60.397-202.707 104.457-96.252-143.2-285.785-172.392-122.551C180.503 259.825-25.091 302.22 103.064 315.218z" transform="translate(1176 -33)" fill="url(#c)" filter="url(#d)"/></g></svg>
+<svg width="1440" height="582" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="a">
+            <stop stop-color="#606483" stop-opacity="0" offset="0%"/>
+            <stop stop-color="#363636" stop-opacity=".72" offset="100%"/>
+        </linearGradient>
+        <linearGradient x1="50%" y1="0%" x2="39.334%" y2="79.282%" id="b">
+            <stop stop-color="#363636" offset="0%"/>
+            <stop stop-color="#363636" stop-opacity="0" offset="100%"/>
+        </linearGradient>
+        <radialGradient cx="33.3%" cy="43.394%" fx="33.3%" fy="43.394%" r="57.93%"
+                        gradientTransform="matrix(.24796 -.96592 .92535 .25883 -.151 .643)" id="c">
+            <stop stop-color="#c3352e" stop-opacity="0" offset="0%"/>
+            <stop stop-color="#c3352e" stop-opacity=".64" offset="51.712%"/>
+            <stop stop-color="#c3352e" stop-opacity=".24" offset="100%"/>
+        </radialGradient>
+        <filter id="d">
+            <feTurbulence type="fractalNoise" numOctaves="2" baseFrequency=".3" result="turb"/>
+            <feComposite in="turb" operator="arithmetic" k1=".1" k2=".1" k3=".1" k4=".1" result="result1"/>
+            <feComposite operator="in" in="result1" in2="SourceGraphic" result="finalFilter"/>
+            <feBlend mode="multiply" in="finalFilter" in2="SourceGraphic"/>
+        </filter>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <path
+                d="M252.464 335.471c101.27 115.965 283.227-105.29 283.227-154.996 0-49.705-111.929-90-250-90s-250 40.295-250 90c0 49.706 115.503 39.032 216.773 154.996z"
+                fill="url(#a)" transform="rotate(24 -272.272 -82.087)"/>
+        <path
+                d="M302.512 242.909c88.025 32.428 156-25.04 156-55.93 0-30.888-69.844-55.928-156-55.928-86.157 0-156 25.04-156 55.929 0 30.888 67.974 23.5 156 55.929z"
+                fill="url(#b)" transform="rotate(24 -255.451 -119.868)"/>
+        <path
+                d="M103.064 315.218c128.156 12.998 192.38 157.059 218.627 106.632 26.247-50.427-44.059-106.456 60.397-202.707 104.457-96.252-143.2-285.785-172.392-122.551C180.503 259.825-25.091 302.22 103.064 315.218z"
+                transform="translate(1176 -33)" fill="url(#c)" filter="url(#d)"/>
+    </g>
+</svg>

docs/img/plugins.svg

@@ -1 +1,6 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" fill="#fff"><path d="M45.563 29.174l-22-15A1 1 0 0022 15v30a.999.999 0 001.563.826l22-15a1 1 0 000-1.652zM24 43.107V16.893L43.225 30 24 43.107z"/><path d="M30 0C13.458 0 0 13.458 0 30s13.458 30 30 30 30-13.458 30-30S46.542 0 30 0zm0 58C14.561 58 2 45.439 2 30S14.561 2 30 2s28 12.561 28 28-12.561 28-28 28z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" fill="#fff">
+  <path
+    d="M45.563 29.174l-22-15A1 1 0 0022 15v30a.999.999 0 001.563.826l22-15a1 1 0 000-1.652zM24 43.107V16.893L43.225 30 24 43.107z"/>
+  <path
+    d="M30 0C13.458 0 0 13.458 0 30s13.458 30 30 30 30-13.458 30-30S46.542 0 30 0zm0 58C14.561 58 2 45.439 2 30S14.561 2 30 2s28 12.561 28 28-12.561 28-28 28z"/>
+</svg>

docs/img/youtube-music.svg

@@ -1 +1,6 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 176 176" width="32" height="32"><circle fill="red" cx="88" cy="88" r="88"/><path fill="#FFF" d="M88 46c23.1 0 42 18.8 42 42s-18.8 42-42 42-42-18.8-42-42 18.9-42 42-42m0-4c-25.4 0-46 20.6-46 46s20.6 46 46 46 46-20.6 46-46-20.6-46-46-46z"/><path fill="#FFF" d="M72 111l39-24-39-22z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 176 176" width="32" height="32">
+  <circle fill="red" cx="88" cy="88" r="88"/>
+  <path fill="#FFF"
+        d="M88 46c23.1 0 42 18.8 42 42s-18.8 42-42 42-42-18.8-42-42 18.9-42 42-42m0-4c-25.4 0-46 20.6-46 46s20.6 46 46 46 46-20.6 46-46-20.6-46-46-46z"/>
+  <path fill="#FFF" d="M72 111l39-24-39-22z"/>
+</svg>

docs/index.html

@@ -1,138 +1,137 @@
 <!DOCTYPE html>
 <html lang="en">
-	<head>
+<head>
-		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
 
-		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta content="IE=edge" http-equiv="X-UA-Compatible"/>
-		<meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta content="width=device-width, initial-scale=1" name="viewport"/>
-		<title>YouTube Music Desktop App (Unofficial)</title>
+    <title>YouTube Music Desktop App (Unofficial)</title>
-		<link
+    <link
-			rel="icon"
+            href="./favicon/favicon.ico"
-			href="./favicon/favicon.ico"
+            rel="icon"
-			sizes="16x16"
+            sizes="16x16"
-			type="image/x-icon"
+            type="image/x-icon"
-		/>
+    />
-		<link
+    <link
-			rel="icon"
+            href="./favicon/favicon_32.png"
-			href="./favicon/favicon_32.png"
+            rel="icon"
-			sizes="32x32"
+            sizes="32x32"
-			type="image/png"
+            type="image/png"
-		/>
+    />
-		<link
+    <link
-			rel="icon"
+            href="./favicon/favicon_48.png"
-			href="./favicon/favicon_48.png"
+            rel="icon"
-			sizes="48x48"
+            sizes="48x48"
-			type="image/png"
+            type="image/png"
-		/>
+    />
-		<link
+    <link
-			rel="icon"
+            href="./favicon/favicon_96.png"
-			href="./favicon/favicon_96.png"
+            rel="icon"
-			sizes="96x96"
+            sizes="96x96"
-			type="image/png"
+            type="image/png"
-		/>
+    />
-		<link
+    <link
-			rel="icon"
+            href="./favicon/favicon_144.png"
-			href="./favicon/favicon_144.png"
+            rel="icon"
-			sizes="144x144"
+            sizes="144x144"
-			type="image/png"
+            type="image/png"
-		/>
+    />
 
-		<meta name="theme-color" content="#131313" />
+    <meta content="#131313" name="theme-color"/>
-		<meta
+    <meta
-			name="description"
+            content="YouTube Music Unofficial Desktop App with built-in ad blocker and downloader"
-			content="YouTube Music Unofficial Desktop App with built-in ad blocker and downloader"
+            name="description"
-		/>
+    />
-		<meta
+    <meta
-			property="og:site_name"
+            content="YouTube&nbsp;Music&nbsp;Desktop&nbsp;App"
-			content="YouTube&nbsp;Music&nbsp;Desktop&nbsp;App"
+            property="og:site_name"
-		/>
+    />
-		<meta
+    <meta
-			property="og:url"
+            class="meta-url"
-			class="meta-url"
+            content="https://th-ch.github.io/youtube-music"
-			content="https://th-ch.github.io/youtube-music"
+            property="og:url"
-		/>
+    />
-		<meta property="og:type" content="website" />
+    <meta content="website" property="og:type"/>
-		<meta
+    <meta
-			name="twitter:url"
+            class="meta-url"
-			class="meta-url"
+            content="https://th-ch.github.io/youtube-music"
-			content="https://th-ch.github.io/youtube-music"
+            name="twitter:url"
-		/>
+    />
 
-		<link href="./style/fonts.css" rel="stylesheet" />
+    <link href="./style/fonts.css" rel="stylesheet"/>
-		<link rel="stylesheet" href="./style/style.css" />
+    <link href="./style/style.css" rel="stylesheet"/>
-		<script src="https://unpkg.com/scrollreveal"></script>
+    <script src="https://unpkg.com/scrollreveal"></script>
-	</head>
+</head>
-	<body class="has-animations vsc-initialized" style="height: 100%;">
+<body class="has-animations vsc-initialized" style="height: 100%;">
-		<div class="body-wrap boxed-container">
+<div class="body-wrap boxed-container">
-			<header class="site-header text-light">
+    <header class="site-header text-light">
-				<div class="container">
+        <div class="container">
-					<div class="site-header-inner">
+            <div class="site-header-inner">
-						<div class="brand header-brand">
+                <div class="brand header-brand">
-							<h1 class="m-0">
+                    <h1 class="m-0">
-								<a href="https://github.com/th-ch/youtube-music">
+                        <a href="https://github.com/th-ch/youtube-music">
-									<img
+                            <img
-										class="header-logo-image"
+                                    alt="YouTube Music"
-										src="./img/youtube-music.svg"
+                                    class="header-logo-image"
-										alt="YouTube Music"
+                                    src="./img/youtube-music.svg"
-									/>
+                            />
-								</a>
+                        </a>
-							</h1>
+                    </h1>
-						</div>
+                </div>
-					</div>
+            </div>
-				</div>
+        </div>
-			</header>
+    </header>
 
-			<main>
+    <main>
-				<section class="hero text-center text-light">
+        <section class="hero text-center text-light">
-					<div class="hero-bg"></div>
+            <div class="hero-bg"></div>
-					<div class="hero-particles-container">
+            <div class="hero-particles-container">
-						<canvas id="hero-particles"></canvas>
+                <canvas id="hero-particles"></canvas>
-					</div>
+            </div>
-					<div class="container-sm">
+            <div class="container-sm">
-						<div class="hero-inner">
+                <div class="hero-inner">
-							<div class="hero-copy">
+                    <div class="hero-copy">
-								<h1 class="hero-title mt-0">
+                        <h1 class="hero-title mt-0">
-									Custom YouTube Music Desktop App
+                            Custom YouTube Music Desktop App
-								</h1>
+                        </h1>
-								<p class="hero-paragraph">
+                        <p class="hero-paragraph">
-									Open source, cross-platform, unofficial YouTube Music Desktop
+                            Open source, cross-platform, unofficial YouTube Music Desktop
-									App with built-in <strong>ad blocker</strong> and
+                            App with built-in <strong>ad blocker</strong> and
-									<strong>downloader</strong>
+                            <strong>downloader</strong>
-								</p>
+                        </p>
-								<div class="hero-cta">
+                        <div class="hero-cta">
-									<a
+                            <a
-										class="button button-primary button-wide-mobile"
+                                    class="button button-primary button-wide-mobile"
-										href="https://github.com/th-ch/youtube-music/releases/latest"
+                                    href="https://github.com/th-ch/youtube-music/releases/latest"
-										>Download</a
+                            >Download</a
-									>
+                            >
-								</div>
+                        </div>
-							</div>
+                    </div>
-							<div class="mockup-container">
+                    <div class="mockup-container">
-								<div class="mockup-bg">
+                        <div class="mockup-bg">
-									<img
+                            <img
-										src="./img/youtube-music.png"
+                                    alt="YouTube Music"
-										id="mockup-header-img"
+                                    id="mockup-header-img"
-										alt="YouTube Music"
+                                    src="./img/youtube-music.png"
-									/>
+                            />
-								</div>
+                        </div>
-							</div>
+                    </div>
-						</div>
+                </div>
-					</div>
+            </div>
-				</section>
+        </section>
 
-				<section class="features-extended section">
+        <section class="features-extended section">
-					<div class="features-extended-inner section-inner">
+            <div class="features-extended-inner section-inner">
-						<div class="features-extended-wrap">
+                <div class="features-extended-wrap">
-							<div class="container">
+                    <div class="container">
-								<div class="feature-extended">
+                        <div class="feature-extended">
-									<div class="feature-extended-image">
+                            <div class="feature-extended-image">
-										<img
+                                <img
-											class="device-mockup"
+                                        alt="Adblocker"
-											src="./img/adblock.svg"
+                                        class="device-mockup"
-											width="100px"
+                                        data-sr-id="0"
-											alt="Adblocker"
+                                        src="./img/adblock.svg"
-											data-sr-id="0"
+                                        style="
-											style="
 												visibility: visible;
 												opacity: 1;
 												transform: matrix3d(
@@ -157,12 +156,13 @@
 														cubic-bezier(0.215, 0.61, 0.355, 1) 0s,
 													transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
 											"
-										/>
+                                        width="100px"
-									</div>
+                                />
-									<div
+                            </div>
-										class="feature-extended-body"
+                            <div
-										data-sr-id="5"
+                                    class="feature-extended-body"
-										style="
+                                    data-sr-id="5"
+                                    style="
 											visibility: visible;
 											opacity: 1;
 											transform: matrix3d(
@@ -187,19 +187,19 @@
 													cubic-bezier(0.215, 0.61, 0.355, 1) 0s,
 												transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
 										"
-									>
+                            >
-										<h3 class="mt-0 mb-16">Built-in adblocker</h3>
+                                <h3 class="mt-0 mb-16">Built-in adblocker</h3>
-										<p class="m-0">Block all ads and tracking out of the box</p>
+                                <p class="m-0">Block all ads and tracking out of the box</p>
-									</div>
+                            </div>
-								</div>
+                        </div>
-								<div class="feature-extended">
+                        <div class="feature-extended">
-									<div class="feature-extended-image">
+                            <div class="feature-extended-image">
-										<img
+                                <img
-											class="device-mockup"
+                                        alt="Downloader"
-											src="./img/download.svg"
+                                        class="device-mockup"
-											alt="Downloader"
+                                        data-sr-id="2"
-											data-sr-id="2"
+                                        src="./img/download.svg"
-											style="
+                                        style="
 												visibility: visible;
 												opacity: 1;
 												transform: matrix3d(
@@ -224,12 +224,12 @@
 														cubic-bezier(0.215, 0.61, 0.355, 1) 0s,
 													transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
 											"
-										/>
+                                />
-									</div>
+                            </div>
-									<div
+                            <div
-										class="feature-extended-body"
+                                    class="feature-extended-body"
-										data-sr-id="6"
+                                    data-sr-id="6"
-										style="
+                                    style="
 											visibility: visible;
 											opacity: 1;
 											transform: matrix3d(
@@ -254,22 +254,22 @@
 													cubic-bezier(0.215, 0.61, 0.355, 1) 0s,
 												transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
 										"
-									>
+                            >
-										<h3 class="mt-0 mb-16">Built-in downloader</h3>
+                                <h3 class="mt-0 mb-16">Built-in downloader</h3>
-										<p class="m-0">
+                                <p class="m-0">
-											Download (like youtube-dl) to custom formats (mp3, opus,
+                                    Download (like youtube-dl) to custom formats (mp3, opus,
-											etc) directly from the interface
+                                    etc) directly from the interface
-										</p>
+                                </p>
-									</div>
+                            </div>
-								</div>
+                        </div>
-								<div class="feature-extended">
+                        <div class="feature-extended">
-									<div class="feature-extended-image">
+                            <div class="feature-extended-image">
-										<img
+                                <img
-											class="device-mockup"
+                                        alt="Plugins"
-											src="./img/plugins.svg"
+                                        class="device-mockup"
-											alt="Plugins"
+                                        data-sr-id="3"
-											data-sr-id="3"
+                                        src="./img/plugins.svg"
-											style="
+                                        style="
 												visibility: visible;
 												opacity: 1;
 												transform: matrix3d(
@@ -294,12 +294,12 @@
 														cubic-bezier(0.215, 0.61, 0.355, 1) 0s,
 													transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
 											"
-										/>
+                                />
-									</div>
+                            </div>
-									<div
+                            <div
-										class="feature-extended-body"
+                                    class="feature-extended-body"
-										data-sr-id="7"
+                                    data-sr-id="7"
-										style="
+                                    style="
 											visibility: visible;
 											opacity: 1;
 											transform: matrix3d(
@@ -324,24 +324,24 @@
 													cubic-bezier(0.215, 0.61, 0.355, 1) 0s,
 												transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
 										"
-									>
+                            >
-										<h3 class="mt-0 mb-16">Many other plugins in one click</h3>
+                                <h3 class="mt-0 mb-16">Many other plugins in one click</h3>
-										<p class="m-0">
+                                <p class="m-0">
-											Enhance your user experience with media keys, integrations
+                                    Enhance your user experience with media keys, integrations
-											(Discord), cosmetic filters, notifications, TouchBar,
+                                    (Discord), cosmetic filters, notifications, TouchBar,
-											auto-unpause and many more! Every plugin can be enabled or
+                                    auto-unpause and many more! Every plugin can be enabled or
-											disabled in one click.
+                                    disabled in one click.
-										</p>
+                                </p>
-									</div>
+                            </div>
-								</div>
+                        </div>
-								<div class="feature-extended">
+                        <div class="feature-extended">
-									<div class="feature-extended-image">
+                            <div class="feature-extended-image">
-										<img
+                                <img
-											class="device-mockup"
+                                        alt="Code"
-											src="./img/code.svg"
+                                        class="device-mockup"
-											alt="Code"
+                                        data-sr-id="4"
-											data-sr-id="4"
+                                        src="./img/code.svg"
-											style="
+                                        style="
 												visibility: visible;
 												width: 200%;
 												opacity: 1;
@@ -367,12 +367,12 @@
 														cubic-bezier(0.215, 0.61, 0.355, 1) 0s,
 													transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
 											"
-										/>
+                                />
-									</div>
+                            </div>
-									<div
+                            <div
-										class="feature-extended-body"
+                                    class="feature-extended-body"
-										data-sr-id="8"
+                                    data-sr-id="8"
-										style="
+                                    style="
 											visibility: visible;
 											opacity: 1;
 											transform: matrix3d(
@@ -397,94 +397,94 @@
 													cubic-bezier(0.215, 0.61, 0.355, 1) 0s,
 												transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
 										"
-									>
+                            >
-										<h3 class="mt-0 mb-16">Open source & Cross platform</h3>
+                                <h3 class="mt-0 mb-16">Open source & Cross platform</h3>
-										<p class="m-0">
+                                <p class="m-0">
-											Available for Windows (installer and portable), Mac and
+                                    Available for Windows (installer and portable), Mac and
-											Linux (AppImage, deb, etc)
+                                    Linux (AppImage, deb, etc)
-										</p>
+                                </p>
-									</div>
+                            </div>
-								</div>
+                        </div>
-							</div>
+                    </div>
-						</div>
+                </div>
-					</div>
+            </div>
-					<div class="main-particles-container">
+            <div class="main-particles-container">
-						<canvas id="main-particles"></canvas>
+                <canvas id="main-particles"></canvas>
-					</div>
+            </div>
-				</section>
+        </section>
-			</main>
+    </main>
 
-			<footer class="site-footer">
+    <footer class="site-footer">
-				<div class="footer-particles-container">
+        <div class="footer-particles-container">
-					<canvas id="footer-particles"></canvas>
+            <canvas id="footer-particles"></canvas>
-				</div>
+        </div>
-				<div class="site-footer-top">
+        <div class="site-footer-top">
-					<section class="cta section text-light">
+            <section class="cta section text-light">
-						<div class="container-sm">
+                <div class="container-sm">
-							<div class="cta-inner section-inner">
+                    <div class="cta-inner section-inner">
-								<div class="cta-header text-center">
+                        <div class="cta-header text-center">
-									<h2 class="section-title mt-0">Download and/or contribute</h2>
+                            <h2 class="section-title mt-0">Download and/or contribute</h2>
-									<p class="section-paragraph">Pull requests welcome!</p>
+                            <p class="section-paragraph">Pull requests welcome!</p>
-									<div class="cta-cta">
+                            <div class="cta-cta">
-										<a
+                                <a
-											class="button button-primary button-wide-mobile"
+                                        class="button button-primary button-wide-mobile"
-											href="https://github.com/th-ch/youtube-music"
+                                        href="https://github.com/th-ch/youtube-music"
-											>Go to code</a
+                                >Go to code</a
-										>
+                                >
-									</div>
+                            </div>
-								</div>
+                        </div>
-							</div>
+                    </div>
-						</div>
+                </div>
-					</section>
+            </section>
-				</div>
+        </div>
-				<div class="site-footer-bottom">
+        <div class="site-footer-bottom">
-					<div class="container">
+            <div class="container">
-						<div class="site-footer-inner">
+                <div class="site-footer-inner">
-							<div class="brand footer-brand">
+                    <div class="brand footer-brand">
-								<a href="https://github.com/th-ch/youtube-music">
+                        <a href="https://github.com/th-ch/youtube-music">
-									<img src="./img/youtube-music.svg" alt="YouTube Music logo" />
+                            <img alt="YouTube Music logo" src="./img/youtube-music.svg"/>
-								</a>
+                        </a>
-							</div>
+                    </div>
-							<ul class="footer-links list-reset">
+                    <ul class="footer-links list-reset">
-								<li>
+                        <li>
-									<a href="https://github.com/th-ch/youtube-music">Main page</a>
+                            <a href="https://github.com/th-ch/youtube-music">Main page</a>
-								</li>
+                        </li>
-								<li>
+                        <li>
-									<a href="https://github.com/th-ch/youtube-music/issues"
+                            <a href="https://github.com/th-ch/youtube-music/issues"
-										>Issues</a
+                            >Issues</a
-									>
+                            >
-								</li>
+                        </li>
-								<li>
+                        <li>
-									<a href="https://github.com/th-ch/youtube-music/pulls"
+                            <a href="https://github.com/th-ch/youtube-music/pulls"
-										>Pull requests</a
+                            >Pull requests</a
-									>
+                            >
-								</li>
+                        </li>
-							</ul>
+                    </ul>
-							<ul class="footer-social-links list-reset">
+                    <ul class="footer-social-links list-reset">
-								<li>
+                        <li>
-									<a href="https://github.com/th-ch/youtube-music">
+                            <a href="https://github.com/th-ch/youtube-music">
-										<span class="screen-reader-text">GitHub</span>
+                                <span class="screen-reader-text">GitHub</span>
-										<svg
+                                <svg
-											xmlns="http://www.w3.org/2000/svg"
+                                        height="16"
-											width="16"
+                                        viewBox="0 0 1792 1792"
-											height="16"
+                                        width="16"
-											viewBox="0 0 1792 1792"
+                                        xmlns="http://www.w3.org/2000/svg"
-										>
+                                >
-											<path
+                                    <path
-												d="M896 128q209 0 385.5 103t279.5 279.5 103 385.5q0 251-146.5 451.5t-378.5 277.5q-27 5-40-7t-13-30q0-3 .5-76.5t.5-134.5q0-97-52-142 57-6 102.5-18t94-39 81-66.5 53-105 20.5-150.5q0-119-79-206 37-91-8-204-28-9-81 11t-92 44l-38 24q-93-26-192-26t-192 26q-16-11-42.5-27t-83.5-38.5-85-13.5q-45 113-8 204-79 87-79 206 0 85 20.5 150t52.5 105 80.5 67 94 39 102.5 18q-39 36-49 103-21 10-45 15t-57 5-65.5-21.5-55.5-62.5q-19-32-48.5-52t-49.5-24l-20-3q-21 0-29 4.5t-5 11.5 9 14 13 12l7 5q22 10 43.5 38t31.5 51l10 23q13 38 44 61.5t67 30 69.5 7 55.5-3.5l23-4q0 38 .5 88.5t.5 54.5q0 18-13 30t-40 7q-232-77-378.5-277.5t-146.5-451.5q0-209 103-385.5t279.5-279.5 385.5-103zm-477 1103q3-7-7-12-10-3-13 2-3 7 7 12 9 6 13-2zm31 34q7-5-2-16-10-9-16-3-7 5 2 16 10 10 16 3zm30 45q9-7 0-19-8-13-17-6-9 5 0 18t17 7zm42 42q8-8-4-19-12-12-20-3-9 8 4 19 12 12 20 3zm57 25q3-11-13-16-15-4-19 7t13 15q15 6 19-6zm63 5q0-13-17-11-16 0-16 11 0 13 17 11 16 0 16-11zm58-10q-2-11-18-9-16 3-14 15t18 8 14-14z"
+                                            d="M896 128q209 0 385.5 103t279.5 279.5 103 385.5q0 251-146.5 451.5t-378.5 277.5q-27 5-40-7t-13-30q0-3 .5-76.5t.5-134.5q0-97-52-142 57-6 102.5-18t94-39 81-66.5 53-105 20.5-150.5q0-119-79-206 37-91-8-204-28-9-81 11t-92 44l-38 24q-93-26-192-26t-192 26q-16-11-42.5-27t-83.5-38.5-85-13.5q-45 113-8 204-79 87-79 206 0 85 20.5 150t52.5 105 80.5 67 94 39 102.5 18q-39 36-49 103-21 10-45 15t-57 5-65.5-21.5-55.5-62.5q-19-32-48.5-52t-49.5-24l-20-3q-21 0-29 4.5t-5 11.5 9 14 13 12l7 5q22 10 43.5 38t31.5 51l10 23q13 38 44 61.5t67 30 69.5 7 55.5-3.5l23-4q0 38 .5 88.5t.5 54.5q0 18-13 30t-40 7q-232-77-378.5-277.5t-146.5-451.5q0-209 103-385.5t279.5-279.5 385.5-103zm-477 1103q3-7-7-12-10-3-13 2-3 7 7 12 9 6 13-2zm31 34q7-5-2-16-10-9-16-3-7 5 2 16 10 10 16 3zm30 45q9-7 0-19-8-13-17-6-9 5 0 18t17 7zm42 42q8-8-4-19-12-12-20-3-9 8 4 19 12 12 20 3zm57 25q3-11-13-16-15-4-19 7t13 15q15 6 19-6zm63 5q0-13-17-11-16 0-16 11 0 13 17 11 16 0 16-11zm58-10q-2-11-18-9-16 3-14 15t18 8 14-14z"
-												fill="#fff"
+                                            fill="#fff"
-											/>
+                                    />
-										</svg>
+                                </svg>
-									</a>
+                            </a>
-								</li>
+                        </li>
-							</ul>
+                    </ul>
-							<div class="footer-copyright">© 2021 th-ch</div>
+                    <div class="footer-copyright">© 2021 th-ch</div>
-						</div>
+                </div>
-					</div>
+            </div>
-				</div>
+        </div>
-			</footer>
+    </footer>
-		</div>
+</div>
 
-		<script src="./js/main.js"></script>
+<script src="./js/main.js"></script>
-	</body>
+</body>
 </html>

docs/js/main.js

@@ -1,46 +1,49 @@
+/* eslint-disable */
+
 // Constants
-const element = document.documentElement,
+const element = document.documentElement;
-  body = document.body,
+const { body } = document;
-  revealOnScroll = (window.sr = ScrollReveal({ mobile: false }));
+const revealOnScroll = (window.sr = ScrollReveal({ mobile: false }));
 
 // Load animations
-element.classList.remove("no-js");
+element.classList.remove('no-js');
-element.classList.add("js");
+element.classList.add('js');
-window.addEventListener("load", function () {
+window.addEventListener('load', () => {
-  body.classList.add("is-loaded");
+  body.classList.add('is-loaded');
 });
 
-if (body.classList.contains("has-animations")) {
+if (body.classList.contains('has-animations')) {
-  window.addEventListener("load", function () {
+  window.addEventListener('load', () => {
-    revealOnScroll.reveal(".feature-extended .device-mockup", {
+    revealOnScroll.reveal('.feature-extended .device-mockup', {
       duration: 600,
-      distance: "100px",
+      distance: '100px',
-      easing: "cubic-bezier(0.215, 0.61, 0.355, 1)",
+      easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)',
-      origin: "bottom",
+      origin: 'bottom',
       viewFactor: 0.6,
     });
-    revealOnScroll.reveal(".feature-extended .feature-extended-body", {
+    revealOnScroll.reveal('.feature-extended .feature-extended-body', {
       duration: 600,
-      distance: "40px",
+      distance: '40px',
-      easing: "cubic-bezier(0.215, 0.61, 0.355, 1)",
+      easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)',
-      origin: "top",
+      origin: 'top',
       viewFactor: 0.6,
     });
   });
 }
 
 // Bubble canvas
-let bubbleCanvas = function (t) {
+const bubbleCanvas = function (t) {
-  let e = this;
+  const e = this;
   e.parentNode = t;
   e.setCanvasSize();
-  window.addEventListener("resize", function () {
+  window.addEventListener('resize', () => {
     e.setCanvasSize();
   });
   e.mouseX = 0;
   e.mouseY = 0;
-  window.addEventListener("mousemove", function (t) {
+  window.addEventListener('mousemove', (t) => {
-    (e.mouseX = t.clientX), (e.mouseY = t.clientY);
+    e.mouseX = t.clientX;
+    e.mouseY = t.clientY;
   });
   e.randomise();
 };
@@ -55,15 +58,15 @@ bubbleCanvas.prototype.generateDecimalBetween = function (start, end) {
 };
 
 bubbleCanvas.prototype.update = function () {
-  let t = this;
+  const t = this;
-  t.translateX = t.translateX - t.movementX;
+  t.translateX -= t.movementX;
-  t.translateY = t.translateY - t.movementY;
+  t.translateY -= t.movementY;
   t.posX += (t.mouseX / (t.staticity / t.magnetism) - t.posX) / t.smoothFactor;
   t.posY += (t.mouseY / (t.staticity / t.magnetism) - t.posY) / t.smoothFactor;
   if (
-    t.translateY + t.posY < 0 ||
+    t.translateY + t.posY < 0
-    t.translateX + t.posX < 0 ||
+    || t.translateX + t.posX < 0
-    t.translateX + t.posX > t.canvasWidth
+    || t.translateX + t.posX > t.canvasWidth
   ) {
     t.randomise();
     t.translateY = t.canvasHeight;
@@ -71,7 +74,7 @@ bubbleCanvas.prototype.update = function () {
 };
 
 bubbleCanvas.prototype.randomise = function () {
-  this.colors = ["195,53,46", "172,54,46"];
+  this.colors = ['195,53,46', '172,54,46'];
 
   this.velocity = 20;
   this.smoothFactor = 50;
@@ -88,17 +91,17 @@ bubbleCanvas.prototype.randomise = function () {
   this.translateY = this.generateDecimalBetween(0, this.canvasHeight);
 };
 
-let drawBubbleCanvas = function (t) {
+const drawBubbleCanvas = function (t) {
   this.canvas = document.getElementById(t);
-  this.ctx = this.canvas.getContext("2d");
+  this.ctx = this.canvas.getContext('2d');
   this.dpr = window.devicePixelRatio;
 };
 
 drawBubbleCanvas.prototype.start = function (bubbleDensity) {
-  let t = this;
+  const t = this;
   t.bubbleDensity = bubbleDensity;
   t.setCanvasSize();
-  window.addEventListener("resize", function () {
+  window.addEventListener('resize', () => {
     t.setCanvasSize();
   });
   t.bubblesList = [];
@@ -114,23 +117,24 @@ drawBubbleCanvas.prototype.setCanvasSize = function () {
   this.hdpi = this.h * this.dpr;
   this.canvas.width = this.wdpi;
   this.canvas.height = this.hdpi;
-  this.canvas.style.width = this.w + "px";
+  this.canvas.style.width = this.w + 'px';
-  this.canvas.style.height = this.h + "px";
+  this.canvas.style.height = this.h + 'px';
   this.ctx.scale(this.dpr, this.dpr);
 };
 
 drawBubbleCanvas.prototype.animate = function () {
-  let t = this;
+  const t = this;
   t.ctx.clearRect(0, 0, t.canvas.clientWidth, t.canvas.clientHeight);
-  t.bubblesList.forEach(function (e) {
+  for (const e of t.bubblesList) {
     e.update();
     t.ctx.translate(e.translateX, e.translateY);
     t.ctx.beginPath();
     t.ctx.arc(e.posX, e.posY, e.size, 0, 2 * Math.PI);
-    t.ctx.fillStyle = "rgba(" + e.color + "," + e.alpha + ")";
+    t.ctx.fillStyle = 'rgba(' + e.color + ',' + e.alpha + ')';
     t.ctx.fill();
     t.ctx.setTransform(t.dpr, 0, 0, t.dpr, 0, 0);
-  });
+  }
+
   requestAnimationFrame(this.animate.bind(this));
 };
 
@@ -139,15 +143,16 @@ drawBubbleCanvas.prototype.addBubble = function (t) {
 };
 
 drawBubbleCanvas.prototype.generateBubbles = function () {
-  let t = this;
+  const t = this;
-  for (let e = 0; e < t.bubbleDensity; e++)
+  for (let e = 0; e < t.bubbleDensity; e++) {
     t.addBubble(new bubbleCanvas(t.canvas.parentNode));
+  }
 };
 
 // Night sky with stars canvas
-let starCanvas = function (t) {
+const starCanvas = function (t) {
   this.canvas = document.getElementById(t);
-  this.ctx = this.canvas.getContext("2d");
+  this.ctx = this.canvas.getContext('2d');
   this.dpr = window.devicePixelRatio;
 };
 
@@ -156,17 +161,17 @@ starCanvas.prototype.start = function () {
   let h;
 
   const setCanvasExtents = () => {
-	w = this.canvas.parentNode.clientWidth;
+    w = this.canvas.parentNode.clientWidth;
-	h = this.canvas.parentNode.clientHeight;
+    h = this.canvas.parentNode.clientHeight;
     this.canvas.width = w;
     this.canvas.height = h;
   };
 
   setCanvasExtents();
 
-  window.onresize = () => {
+  window.addEventListener('resize', () => {
     setCanvasExtents();
-  };
+  });
 
   const makeStars = (count) => {
     const out = [];
@@ -178,19 +183,20 @@ starCanvas.prototype.start = function () {
       };
       out.push(s);
     }
+
     return out;
   };
 
-  let stars = makeStars(10000);
+  const stars = makeStars(10_000);
 
   const clear = () => {
-    this.ctx.fillStyle = "#212121";
+    this.ctx.fillStyle = '#212121';
     this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
   };
 
   const putPixel = (x, y, brightness) => {
     const intensity = brightness * 255;
-    const rgb = "rgb(" + intensity + "," + intensity + "," + intensity + ")";
+    const rgb = 'rgb(' + intensity + ',' + intensity + ',' + intensity + ')';
     this.ctx.beginPath();
     this.ctx.arc(x, y, 0.9, 0, 2 * Math.PI);
     this.ctx.fillStyle = rgb;
@@ -199,7 +205,7 @@ starCanvas.prototype.start = function () {
 
   const moveStars = (distance) => {
     const count = stars.length;
-    for (var i = 0; i < count; i++) {
+    for (let i = 0; i < count; i++) {
       const s = stars[i];
       s.z -= distance;
       while (s.z <= 1) {
@@ -208,15 +214,15 @@ starCanvas.prototype.start = function () {
     }
   };
 
-  let prevTime;
+  let previousTime;
   const init = (time) => {
-    prevTime = time;
+    previousTime = time;
     requestAnimationFrame(tick);
   };
 
   const tick = (time) => {
-    let elapsed = time - prevTime;
+    const elapsed = time - previousTime;
-    prevTime = time;
+    previousTime = time;
 
     moveStars(elapsed * 0.1);
 
@@ -226,7 +232,7 @@ starCanvas.prototype.start = function () {
     const cy = h / 2;
 
     const count = stars.length;
-    for (var i = 0; i < count; i++) {
+    for (let i = 0; i < count; i++) {
       const star = stars[i];
 
       const x = cx + star.x / (star.z * 0.001);
@@ -236,7 +242,7 @@ starCanvas.prototype.start = function () {
         continue;
       }
 
-      const d = star.z / 1000.0;
+      const d = star.z / 1000;
       const b = 1 - d * d;
 
       putPixel(x, y, b);
@@ -249,12 +255,12 @@ starCanvas.prototype.start = function () {
 };
 
 // Start canvas animations
-window.addEventListener("load", function () {
+window.addEventListener('load', () => {
   // Stars
-  const headCanvas = new starCanvas("hero-particles");
+  const headCanvas = new starCanvas('hero-particles');
   // Bubbles
-  const footerCanvas = new drawBubbleCanvas("footer-particles");
+  const footerCanvas = new drawBubbleCanvas('footer-particles');
-  const mainCanvas = new drawBubbleCanvas("main-particles");
+  const mainCanvas = new drawBubbleCanvas('main-particles');
 
   headCanvas.start();
   footerCanvas.start(30);

docs/style/fonts.css

@@ -6,6 +6,7 @@
   src: url(https://fonts.gstatic.com/s/heebo/v9/NGS6v5_NC0k9P9H0TbFhsqMA6aw.woff2) format('woff2');
   unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F;
 }
+
 /* latin */
 @font-face {
   font-family: 'Heebo';
@@ -14,6 +15,7 @@
   src: url(https://fonts.gstatic.com/s/heebo/v9/NGS6v5_NC0k9P9H2TbFhsqMA.woff2) format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
+
 /* hebrew */
 @font-face {
   font-family: 'Heebo';
@@ -22,6 +24,7 @@
   src: url(https://fonts.gstatic.com/s/heebo/v9/NGS6v5_NC0k9P9H0TbFhsqMA6aw.woff2) format('woff2');
   unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F;
 }
+
 /* latin */
 @font-face {
   font-family: 'Heebo';
@@ -30,6 +33,7 @@
   src: url(https://fonts.gstatic.com/s/heebo/v9/NGS6v5_NC0k9P9H2TbFhsqMA.woff2) format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
+
 /* latin-ext */
 @font-face {
   font-family: 'Oxygen';
@@ -38,6 +42,7 @@
   src: url(https://fonts.gstatic.com/s/oxygen/v10/2sDcZG1Wl4LcnbuCNWgzZmW5Kb8VZBHR.woff2) format('woff2');
   unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
+
 /* latin */
 @font-face {
   font-family: 'Oxygen';

error.html

@@ -1,50 +1,50 @@
 <!DOCTYPE html>
 <html>
-	<head>
+<head>
-		<meta charset="utf-8" />
+    <meta charset="utf-8"/>
-		<title>Cannot load YouTube Music</title>
+    <title>Cannot load YouTube Music</title>
-		<style>
+    <style>
-			body {
+        body {
-				background: #000;
+            background: #000;
-			}
+        }
 
-			.container {
+        .container {
-				margin: 0;
+            margin: 0;
-				font-family: Roboto, Arial, sans-serif;
+            font-family: Roboto, Arial, sans-serif;
-				font-size: 20px;
+            font-size: 20px;
-				font-weight: 500;
+            font-weight: 500;
-				color: rgba(255, 255, 255, 0.5);
+            color: rgba(255, 255, 255, 0.5);
-				position: absolute;
+            position: absolute;
-				top: 50%;
+            top: 50%;
-				left: 50%;
+            left: 50%;
-				margin-right: -50%;
+            margin-right: -50%;
-				transform: translate(-50%, -50%);
+            transform: translate(-50%, -50%);
-				text-align: center;
+            text-align: center;
-			}
+        }
 
-			.button {
+        .button {
-				background: #065fd4;
+            background: #065fd4;
-				overflow: hidden;
+            overflow: hidden;
-				text-overflow: ellipsis;
+            text-overflow: ellipsis;
-				white-space: nowrap;
+            white-space: nowrap;
-				color: white;
+            color: white;
-				font: inherit;
+            font: inherit;
-				text-transform: uppercase;
+            text-transform: uppercase;
-				text-decoration: none;
+            text-decoration: none;
-				border-radius: 2px;
+            border-radius: 2px;
-				font-size: 16px;
+            font-size: 16px;
-				font-weight: normal;
+            font-weight: normal;
-				text-align: center;
+            text-align: center;
-				padding: 8px 22px;
+            padding: 8px 22px;
-				display: inline-block;
+            display: inline-block;
-			}
+        }
-		</style>
+    </style>
-	</head>
+</head>
 
-	<body>
+<body>
-		<div class="container">
+<div class="container">
-			<p>Cannot load YouTube Music… Internet disconnected?</p>
+    <p>Cannot load YouTube Music… Internet disconnected?</p>
-			<a href="#" class="button" onclick="reload()">Retry</a>
+    <a class="button" href="#" onclick="reload()">Retry</a>
-		</div>
+</div>
-	</body>
+</body>
 </html>

index.js

@@ -1,516 +0,0 @@
-"use strict";
-const path = require("path");
-
-const electron = require("electron");
-const enhanceWebRequest = require("electron-better-web-request").default;
-const is = require("electron-is");
-const unhandled = require("electron-unhandled");
-const { autoUpdater } = require("electron-updater");
-
-const config = require("./config");
-const { setApplicationMenu } = require("./menu");
-const { fileExists, injectCSS } = require("./plugins/utils");
-const { isTesting } = require("./utils/testing");
-const { setUpTray } = require("./tray");
-const { setupSongInfo } = require("./providers/song-info");
-const { setupAppControls, restart } = require("./providers/app-controls");
-const { APP_PROTOCOL, setupProtocolHandler, handleProtocol } = require("./providers/protocol-handler");
-
-// Catch errors and log them
-unhandled({
-	logger: console.error,
-	showDialog: false,
-});
-
-// Disable Node options if the env var is set
-process.env.NODE_OPTIONS = "";
-
-const app = electron.app;
-// Prevent window being garbage collected
-let mainWindow;
-autoUpdater.autoDownload = false;
-
-
-const gotTheLock = app.requestSingleInstanceLock();
-if (!gotTheLock) app.exit();
-
-app.commandLine.appendSwitch("enable-features", "SharedArrayBuffer"); // Required for downloader
-app.allowRendererProcessReuse = true; // https://github.com/electron/electron/issues/18397
-if (config.get("options.disableHardwareAcceleration")) {
-	if (is.dev()) {
-		console.log("Disabling hardware acceleration");
-	}
-	app.disableHardwareAcceleration();
-}
-
-if (is.linux() && config.plugins.isEnabled("shortcuts")) {
-	//stops chromium from launching it's own mpris service
-	app.commandLine.appendSwitch('disable-features', 'MediaSessionService');
-}
-
-if (config.get("options.proxy")) {
-	app.commandLine.appendSwitch("proxy-server", config.get("options.proxy"));
-}
-
-// Adds debug features like hotkeys for triggering dev tools and reload
-require("electron-debug")({
-	showDevTools: false //disable automatic devTools on new window
-});
-
-let icon = "assets/youtube-music.png";
-if (process.platform == "win32") {
-	icon = "assets/generated/icon.ico";
-} else if (process.platform == "darwin") {
-	icon = "assets/generated/icon.icns";
-}
-
-function onClosed() {
-	// Dereference the window
-	// For multiple windows store them in an array
-	mainWindow = null;
-}
-
-/** @param {Electron.BrowserWindow} win */
-function loadPlugins(win) {
-	injectCSS(win.webContents, path.join(__dirname, "youtube-music.css"));
-	// Load user CSS
-	const themes = config.get("options.themes");
-	if (Array.isArray(themes)) {
-		themes.forEach((cssFile) => {
-			fileExists(
-				cssFile,
-				() => {
-					injectCSS(win.webContents, cssFile);
-				},
-				() => {
-					console.warn(`CSS file "${cssFile}" does not exist, ignoring`);
-				}
-			);
-		});
-	}
-
-	win.webContents.once("did-finish-load", () => {
-		if (is.dev()) {
-			console.log("did finish load");
-			win.webContents.openDevTools();
-		}
-	});
-
-	config.plugins.getEnabled().forEach(([plugin, options]) => {
-		console.log("Loaded plugin - " + plugin);
-		const pluginPath = path.join(__dirname, "plugins", plugin, "back.js");
-		fileExists(pluginPath, () => {
-			const handle = require(pluginPath);
-			handle(win, options);
-		});
-	});
-}
-
-function createMainWindow() {
-	const windowSize = config.get("window-size");
-	const windowMaximized = config.get("window-maximized");
-	const windowPosition = config.get("window-position");
-	const useInlineMenu = config.plugins.isEnabled("in-app-menu");
-
-	const win = new electron.BrowserWindow({
-		icon: icon,
-		width: windowSize.width,
-		height: windowSize.height,
-		backgroundColor: "#000",
-		show: false,
-		webPreferences: {
-			// TODO: re-enable contextIsolation once it can work with ffmepg.wasm
-			// Possible bundling? https://github.com/ffmpegwasm/ffmpeg.wasm/issues/126
-			contextIsolation: false,
-			preload: path.join(__dirname, "preload.js"),
-			nodeIntegrationInSubFrames: true,
-			affinity: "main-window", // main window, and addition windows should work in one process
-			...(!isTesting()
-				? {
-						// Sandbox is only enabled in tests for now
-						// See https://www.electronjs.org/docs/latest/tutorial/sandbox#preload-scripts
-						sandbox: false,
-				  }
-				: undefined),
-		},
-		frame: !is.macOS() && !useInlineMenu,
-		titleBarStyle: useInlineMenu
-			? "hidden"
-			: is.macOS()
-			? "hiddenInset"
-			: "default",
-		autoHideMenuBar: config.get("options.hideMenu"),
-	});
-	loadPlugins(win);
-
-	if (windowPosition) {
-		const { x, y } = windowPosition;
-		const winSize = win.getSize();
-		const displaySize =
-			electron.screen.getDisplayNearestPoint(windowPosition).bounds;
-		if (
-			x + winSize[0] < displaySize.x - 8 ||
-			x - winSize[0] > displaySize.x + displaySize.width ||
-			y < displaySize.y - 8 ||
-			y > displaySize.y + displaySize.height
-		) {
-			//Window is offscreen
-			if (is.dev()) {
-				console.log(
-					`Window tried to render offscreen, windowSize=${winSize}, displaySize=${displaySize}, position=${windowPosition}`
-				);
-			}
-		} else {
-			win.setPosition(x, y);
-		}
-	}
-	if (windowMaximized) {
-		win.maximize();
-	}
-
-	if(config.get("options.alwaysOnTop")){
-		win.setAlwaysOnTop(true);
-	}
-
-	const urlToLoad = config.get("options.resumeOnStart")
-		? config.get("url")
-		: config.defaultConfig.url;
-	win.webContents.loadURL(urlToLoad);
-	win.on("closed", onClosed);
-
-	const setPiPOptions = config.plugins.isEnabled("picture-in-picture")
-		? (key, value) => require("./plugins/picture-in-picture/back").setOptions({ [key]: value })
-		: () => {};
-
-	win.on("move", () => {
-		if (win.isMaximized()) return;
-		let position = win.getPosition();
-		const isPiPEnabled =
-			config.plugins.isEnabled("picture-in-picture") &&
-			config.plugins.getOptions("picture-in-picture")["isInPiP"];
-		if (!isPiPEnabled) {
-			lateSave("window-position", { x: position[0], y: position[1] });
-		} else if(config.plugins.getOptions("picture-in-picture")["savePosition"]) {
-			lateSave("pip-position", position, setPiPOptions);
-		}
-	});
-
-	let winWasMaximized;
-
-	win.on("resize", () => {
-		const windowSize = win.getSize();
-		const isMaximized = win.isMaximized();
-
-		const isPiPEnabled =
-			config.plugins.isEnabled("picture-in-picture") &&
-			config.plugins.getOptions("picture-in-picture")["isInPiP"];
-
-		if (!isPiPEnabled && winWasMaximized !== isMaximized) {
-			winWasMaximized = isMaximized;
-			config.set("window-maximized", isMaximized);
-		}
-		if (isMaximized) return;
-
-		if (!isPiPEnabled) {
-			lateSave("window-size", {
-				width: windowSize[0],
-				height: windowSize[1],
-			});
-		} else if(config.plugins.getOptions("picture-in-picture")["saveSize"]) {
-			lateSave("pip-size", windowSize, setPiPOptions);
-		}
-	});
-
-	let savedTimeouts = {};
-	function lateSave(key, value, fn = config.set) {
-		if (savedTimeouts[key]) clearTimeout(savedTimeouts[key]);
-
-		savedTimeouts[key] = setTimeout(() => {
-			fn(key, value);
-			savedTimeouts[key] = undefined;
-		}, 600);
-	}
-
-	win.webContents.on("render-process-gone", (event, webContents, details) => {
-		showUnresponsiveDialog(win, details);
-	});
-
-	win.once("ready-to-show", () => {
-		if (config.get("options.appVisible")) {
-			win.show();
-		}
-	});
-
-	removeContentSecurityPolicy();
-
-	return win;
-}
-
-app.once("browser-window-created", (event, win) => {
-	if (config.get("options.overrideUserAgent")) {
-		// User agents are from https://developers.whatismybrowser.com/useragents/explore/
-		const originalUserAgent = win.webContents.userAgent;
-		const userAgents = {
-			mac: "Mozilla/5.0 (Macintosh; Intel Mac OS X 12.1; rv:95.0) Gecko/20100101 Firefox/95.0",
-			windows: "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:95.0) Gecko/20100101 Firefox/95.0",
-			linux: "Mozilla/5.0 (Linux x86_64; rv:95.0) Gecko/20100101 Firefox/95.0",
-		}
-
-		const updatedUserAgent =
-			is.macOS() ? userAgents.mac :
-				is.windows() ? userAgents.windows :
-					userAgents.linux;
-
-		win.webContents.userAgent = updatedUserAgent;
-		app.userAgentFallback = updatedUserAgent;
-
-		win.webContents.session.webRequest.onBeforeSendHeaders((details, cb) => {
-			// this will only happen if login failed, and "retry" was pressed
-			if (win.webContents.getURL().startsWith("https://accounts.google.com") && details.url.startsWith("https://accounts.google.com")) {
-				details.requestHeaders["User-Agent"] = originalUserAgent;
-			}
-			cb({ requestHeaders: details.requestHeaders });
-		});
-	}
-
-	setupSongInfo(win);
-	setupAppControls();
-
-	win.webContents.on("did-fail-load", (
-		_event,
-		errorCode,
-		errorDescription,
-		validatedURL,
-		isMainFrame,
-		frameProcessId,
-		frameRoutingId,
-	) => {
-		const log = JSON.stringify({
-			error: "did-fail-load",
-			errorCode,
-			errorDescription,
-			validatedURL,
-			isMainFrame,
-			frameProcessId,
-			frameRoutingId,
-		}, null, "\t");
-		if (is.dev()) {
-			console.log(log);
-		}
-		if( !(config.plugins.isEnabled("in-app-menu") && errorCode === -3)) { // -3 is a false positive with in-app-menu
-			win.webContents.send("log", log);
-			win.webContents.loadFile(path.join(__dirname, "error.html"));
-		}
-	});
-
-	win.webContents.on("will-prevent-unload", (event) => {
-		event.preventDefault();
-	});
-});
-
-app.on("window-all-closed", () => {
-	if (process.platform !== "darwin") {
-		app.quit();
-	}
-
-	// Unregister all shortcuts.
-	electron.globalShortcut.unregisterAll();
-});
-
-app.on("activate", () => {
-	// On OS X it's common to re-create a window in the app when the
-	// dock icon is clicked and there are no other windows open.
-	if (mainWindow === null) {
-		mainWindow = createMainWindow();
-	} else if (!mainWindow.isVisible()) {
-		mainWindow.show();
-	}
-});
-
-app.on("ready", () => {
-	if (config.get("options.autoResetAppCache")) {
-		// Clear cache after 20s
-		const clearCacheTimeout = setTimeout(() => {
-			if (is.dev()) {
-				console.log("Clearing app cache.");
-			}
-			electron.session.defaultSession.clearCache();
-			clearTimeout(clearCacheTimeout);
-		}, 20000);
-	}
-
-	// Register appID on windows
-	if (is.windows()) {
-		const appID = "com.github.th-ch.youtube-music";
-		app.setAppUserModelId(appID);
-		const appLocation = process.execPath;
-		const appData = app.getPath("appData");
-		// check shortcut validity if not in dev mode / running portable app
-		if (!is.dev() && !appLocation.startsWith(path.join(appData, "..", "Local", "Temp"))) {
-			const shortcutPath = path.join(appData, "Microsoft", "Windows", "Start Menu", "Programs", "YouTube Music.lnk");
-			try { // check if shortcut is registered and valid
-				const shortcutDetails = electron.shell.readShortcutLink(shortcutPath); // throw error if doesn't exist yet
-				if (
-					shortcutDetails.target !== appLocation ||
-					shortcutDetails.appUserModelId !== appID
-				) {
-					throw "needUpdate";
-				}
-			} catch (error) { // if not valid -> Register shortcut
-				electron.shell.writeShortcutLink(
-					shortcutPath,
-					error === "needUpdate" ? "update" : "create",
-					{
-						target: appLocation,
-						cwd: path.dirname(appLocation),
-						description: "YouTube Music Desktop App - including custom plugins",
-						appUserModelId: appID,
-					}
-				);
-			}
-		}
-	}
-
-	mainWindow = createMainWindow();
-	setApplicationMenu(mainWindow);
-	setUpTray(app, mainWindow);
-
-	setupProtocolHandler(mainWindow);
-
-	app.on('second-instance', (_event, commandLine, _workingDirectory) => {
-		const uri = `${APP_PROTOCOL}://`;
-		const protocolArgv = commandLine.find(arg => arg.startsWith(uri));
-		if (protocolArgv) {
-			const lastIndex = protocolArgv.endsWith("/") ? -1 : undefined;
-			const command = protocolArgv.slice(uri.length, lastIndex);
-			if (is.dev()) console.debug(`Received command over protocol: "${command}"`);
-			handleProtocol(command);
-			return;
-		}
-		if (!mainWindow) return;
-		if (mainWindow.isMinimized()) mainWindow.restore();
-		if (!mainWindow.isVisible()) mainWindow.show();
-		mainWindow.focus();
-	});
-
-	// Autostart at login
-	app.setLoginItemSettings({
-		openAtLogin: config.get("options.startAtLogin"),
-	});
-
-	if (!is.dev() && config.get("options.autoUpdates")) {
-		const updateTimeout = setTimeout(() => {
-			autoUpdater.checkForUpdatesAndNotify();
-			clearTimeout(updateTimeout);
-		}, 2000);
-		autoUpdater.on("update-available", () => {
-			const downloadLink =
-				"https://github.com/th-ch/youtube-music/releases/latest";
-			const dialogOpts = {
-				type: "info",
-				buttons: ["OK", "Download", "Disable updates"],
-				title: "Application Update",
-				message: "A new version is available",
-				detail: `A new version is available and can be downloaded at ${downloadLink}`,
-			};
-			electron.dialog.showMessageBox(dialogOpts).then((dialogOutput) => {
-				switch (dialogOutput.response) {
-					// Download
-					case 1:
-						electron.shell.openExternal(downloadLink);
-						break;
-					// Disable updates
-					case 2:
-						config.set("options.autoUpdates", false);
-						break;
-					default:
-						break;
-				}
-			});
-		});
-	}
-
-	if (config.get("options.hideMenu") && !config.get("options.hideMenuWarned")) {
-		electron.dialog.showMessageBox(mainWindow, {
-			type: 'info', title: 'Hide Menu Enabled',
-			message: "Menu is hidden, use 'Alt' to show it (or 'Escape' if using in-app-menu)"
-		});
-		config.set("options.hideMenuWarned", true);
-	}
-
-	// Optimized for Mac OS X
-	if (is.macOS() && !config.get("options.appVisible")) {
-		app.dock.hide();
-	}
-
-	let forceQuit = false;
-	app.on("before-quit", () => {
-		forceQuit = true;
-	});
-
-	if (is.macOS() || config.get("options.tray")) {
-		mainWindow.on("close", (event) => {
-			// Hide the window instead of quitting (quit is available in tray options)
-			if (!forceQuit) {
-				event.preventDefault();
-				mainWindow.hide();
-			}
-		});
-	}
-});
-
-function showUnresponsiveDialog(win, details) {
-	if (!!details) {
-		console.log("Unresponsive Error!\n"+JSON.stringify(details, null, "\t"))
-	}
-	electron.dialog.showMessageBox(win, {
-		type: "error",
-		title: "Window Unresponsive",
-		message: "The Application is Unresponsive",
-		details: "We are sorry for the inconvenience! please choose what to do:",
-		buttons: ["Wait", "Relaunch", "Quit"],
-		cancelId: 0
-	}).then( result => {
-		switch (result.response) {
-			case 1: restart(); break;
-			case 2: app.quit(); break;
-		}
-	});
-}
-
-function removeContentSecurityPolicy(
-	session = electron.session.defaultSession
-) {
-	// Allows defining multiple "onHeadersReceived" listeners
-	// by enhancing the session.
-	// Some plugins (e.g. adblocker) also define a "onHeadersReceived" listener
-	enhanceWebRequest(session);
-
-	// Custom listener to tweak the content security policy
-	session.webRequest.onHeadersReceived(function (details, callback) {
-		details.responseHeaders ??= {}
-
-		// Remove the content security policy
-		delete details.responseHeaders["content-security-policy-report-only"];
-		delete details.responseHeaders["content-security-policy"];
-
-		callback({ cancel: false, responseHeaders: details.responseHeaders });
-	});
-
-	// When multiple listeners are defined, apply them all
-	session.webRequest.setResolver("onHeadersReceived", (listeners) => {
-		const response = listeners.reduce(
-			async (accumulator, listener) => {
-				if (accumulator.cancel) {
-					return accumulator;
-				}
-
-				const result = await listener.apply();
-				return { ...accumulator, ...result };
-			},
-			{ cancel: false }
-		);
-
-		return response;
-	});
-}

index.ts

@@ -0,0 +1,662 @@
+import path from 'node:path';
+
+import { BrowserWindow, app, screen, globalShortcut, session, shell, dialog, ipcMain } from 'electron';
+import enhanceWebRequest from 'electron-better-web-request';
+import is from 'electron-is';
+import unhandled from 'electron-unhandled';
+import { autoUpdater } from 'electron-updater';
+import electronDebug from 'electron-debug';
+
+import { BetterWebRequest } from 'electron-better-web-request/lib/electron-better-web-request';
+
+import config from './config';
+import { setApplicationMenu } from './menu';
+import { fileExists, injectCSS, injectCSSAsFile } from './plugins/utils';
+import { isTesting } from './utils/testing';
+import { setUpTray } from './tray';
+import { setupSongInfo } from './providers/song-info';
+import { restart, setupAppControls } from './providers/app-controls';
+import { APP_PROTOCOL, handleProtocol, setupProtocolHandler } from './providers/protocol-handler';
+
+import adblocker from './plugins/adblocker/back';
+import albumColorTheme from './plugins/album-color-theme/back';
+import ambientMode from './plugins/ambient-mode/back';
+import blurNavigationBar from './plugins/blur-nav-bar/back';
+import captionsSelector from './plugins/captions-selector/back';
+import crossfade from './plugins/crossfade/back';
+import discord from './plugins/discord/back';
+import downloader from './plugins/downloader/back';
+import inAppMenu from './plugins/in-app-menu/back';
+import lastFm from './plugins/last-fm/back';
+import lumiaStream from './plugins/lumiastream/back';
+import lyricsGenius from './plugins/lyrics-genius/back';
+import navigation from './plugins/navigation/back';
+import noGoogleLogin from './plugins/no-google-login/back';
+import notifications from './plugins/notifications/back';
+import pictureInPicture, { setOptions as pipSetOptions } from './plugins/picture-in-picture/back';
+import preciseVolume from './plugins/precise-volume/back';
+import qualityChanger from './plugins/quality-changer/back';
+import shortcuts from './plugins/shortcuts/back';
+import sponsorBlock from './plugins/sponsorblock/back';
+import taskbarMediaControl from './plugins/taskbar-mediacontrol/back';
+import touchbar from './plugins/touchbar/back';
+import tunaObs from './plugins/tuna-obs/back';
+import videoToggle from './plugins/video-toggle/back';
+import visualizer from './plugins/visualizer/back';
+
+import youtubeMusicCSS from './youtube-music.css';
+
+// Catch errors and log them
+unhandled({
+  logger: console.error,
+  showDialog: false,
+});
+
+// Disable Node options if the env var is set
+process.env.NODE_OPTIONS = '';
+
+// Prevent window being garbage collected
+let mainWindow: Electron.BrowserWindow | null;
+autoUpdater.autoDownload = false;
+
+const gotTheLock = app.requestSingleInstanceLock();
+if (!gotTheLock) {
+  app.exit();
+}
+
+// SharedArrayBuffer: Required for downloader (@ffmpeg/core-mt)
+// OverlayScrollbar: Required for overlay scrollbars
+app.commandLine.appendSwitch('enable-features', 'OverlayScrollbar,SharedArrayBuffer');
+if (config.get('options.disableHardwareAcceleration')) {
+  if (is.dev()) {
+    console.log('Disabling hardware acceleration');
+  }
+
+  app.disableHardwareAcceleration();
+}
+
+if (is.linux() && config.plugins.isEnabled('shortcuts')) {
+  // Stops chromium from launching its own MPRIS service
+  app.commandLine.appendSwitch('disable-features', 'MediaSessionService');
+}
+
+if (config.get('options.proxy')) {
+  app.commandLine.appendSwitch('proxy-server', config.get('options.proxy'));
+}
+
+// Adds debug features like hotkeys for triggering dev tools and reload
+electronDebug({
+  showDevTools: false, // Disable automatic devTools on new window
+});
+
+let icon = 'assets/youtube-music.png';
+if (process.platform === 'win32') {
+  icon = 'assets/generated/icon.ico';
+} else if (process.platform === 'darwin') {
+  icon = 'assets/generated/icon.icns';
+}
+
+function onClosed() {
+  // Dereference the window
+  // For multiple Windows store them in an array
+  mainWindow = null;
+}
+
+const mainPlugins = {
+  'adblocker': adblocker,
+  'album-color-theme': albumColorTheme,
+  'ambient-mode': ambientMode,
+  'blur-nav-bar': blurNavigationBar,
+  'captions-selector': captionsSelector,
+  'crossfade': crossfade,
+  'discord': discord,
+  'downloader': downloader,
+  'in-app-menu': inAppMenu,
+  'last-fm': lastFm,
+  'lumiastream': lumiaStream,
+  'lyrics-genius': lyricsGenius,
+  'navigation': navigation,
+  'no-google-login': noGoogleLogin,
+  'notifications': notifications,
+  'picture-in-picture': pictureInPicture,
+  'precise-volume': preciseVolume,
+  'quality-changer': qualityChanger,
+  'shortcuts': shortcuts,
+  'sponsorblock': sponsorBlock,
+  'taskbar-mediacontrol': undefined as typeof taskbarMediaControl | undefined,
+  'touchbar': undefined as typeof touchbar | undefined,
+  'tuna-obs': tunaObs,
+  'video-toggle': videoToggle,
+  'visualizer': visualizer,
+};
+export const mainPluginNames = Object.keys(mainPlugins);
+
+if (is.windows()) {
+  mainPlugins['taskbar-mediacontrol'] = taskbarMediaControl;
+  delete mainPlugins['touchbar'];
+} else if (is.macOS()) {
+  mainPlugins['touchbar'] = touchbar;
+  delete mainPlugins['taskbar-mediacontrol'];
+} else {
+  delete mainPlugins['touchbar'];
+  delete mainPlugins['taskbar-mediacontrol'];
+}
+
+ipcMain.handle('get-main-plugin-names', () => Object.keys(mainPlugins));
+
+function loadPlugins(win: BrowserWindow) {
+  injectCSS(win.webContents, youtubeMusicCSS);
+  // Load user CSS
+  const themes: string[] = config.get('options.themes');
+  if (Array.isArray(themes)) {
+    for (const cssFile of themes) {
+      fileExists(
+        cssFile,
+        () => {
+          injectCSSAsFile(win.webContents, cssFile);
+        },
+        () => {
+          console.warn(`CSS file "${cssFile}" does not exist, ignoring`);
+        },
+      );
+    }
+  }
+
+  win.webContents.once('did-finish-load', () => {
+    if (is.dev()) {
+      console.log('did finish load');
+      win.webContents.openDevTools();
+    }
+  });
+
+  for (const [plugin, options] of config.plugins.getEnabled()) {
+    try {
+      if (Object.hasOwn(mainPlugins, plugin)) {
+        console.log('Loaded plugin - ' + plugin);
+        const handler = mainPlugins[plugin as keyof typeof mainPlugins];
+        if (handler) {
+          handler(win, options as never);
+        }
+      }
+    } catch (e) {
+      console.error(`Failed to load plugin "${plugin}"`, e);
+    }
+  }
+}
+
+function createMainWindow() {
+  const windowSize = config.get('window-size');
+  const windowMaximized = config.get('window-maximized');
+  const windowPosition: Electron.Point = config.get('window-position');
+  const useInlineMenu = config.plugins.isEnabled('in-app-menu');
+
+  const win = new BrowserWindow({
+    icon,
+    width: windowSize.width,
+    height: windowSize.height,
+    backgroundColor: '#000',
+    show: false,
+    webPreferences: {
+      // TODO: re-enable contextIsolation once it can work with FFMpeg.wasm
+      // Possible bundling? https://github.com/ffmpegwasm/ffmpeg.wasm/issues/126
+      contextIsolation: false,
+      preload: path.join(__dirname, 'preload.js'),
+      nodeIntegrationInSubFrames: true,
+      ...(isTesting()
+        ? undefined
+        : {
+          // Sandbox is only enabled in tests for now
+          // See https://www.electronjs.org/docs/latest/tutorial/sandbox#preload-scripts
+          sandbox: false,
+        }),
+    },
+    frame: !is.macOS() && !useInlineMenu,
+    titleBarOverlay: {
+      color: '#00000000',
+      symbolColor: '#ffffff',
+      height: 36,
+    },
+    titleBarStyle: useInlineMenu
+      ? 'hidden'
+      : (is.macOS()
+        ? 'hiddenInset'
+        : 'default'),
+    autoHideMenuBar: config.get('options.hideMenu'),
+  });
+  loadPlugins(win);
+
+  if (windowPosition) {
+    const { x, y } = windowPosition;
+    const winSize = win.getSize();
+    const displaySize
+      = screen.getDisplayNearestPoint(windowPosition).bounds;
+    if (
+      x + winSize[0] < displaySize.x - 8
+      || x - winSize[0] > displaySize.x + displaySize.width
+      || y < displaySize.y - 8
+      || y > displaySize.y + displaySize.height
+    ) {
+      // Window is offscreen
+      if (is.dev()) {
+        console.log(
+          `Window tried to render offscreen, windowSize=${String(winSize)}, displaySize=${String(displaySize)}, position=${String(windowPosition)}`,
+        );
+      }
+    } else {
+      win.setPosition(x, y);
+    }
+  }
+
+  if (windowMaximized) {
+    win.maximize();
+  }
+
+  if (config.get('options.alwaysOnTop')) {
+    win.setAlwaysOnTop(true);
+  }
+
+  const urlToLoad = config.get('options.resumeOnStart')
+    ? config.get('url')
+    : config.defaultConfig.url;
+  win.webContents.loadURL(urlToLoad);
+  win.on('closed', onClosed);
+
+  const scaleFactor = screen.getAllDisplays().length > 1 ? screen.getPrimaryDisplay().scaleFactor : 1;
+  const size = config.get('window-size');
+  const position = config.get('window-position');
+
+  if (size && size.width && size.height) {
+    const scaledSize = {
+      width: size.width / scaleFactor,
+      height: size.height / scaleFactor,
+    };
+    win.setSize(scaledSize.width, scaledSize.height);
+  }
+
+  if (position && position.x && position.y) {
+    const scaledPosition = {
+      x: position.x / scaleFactor,
+      y: position.y / scaleFactor,
+    };
+    win.setPosition(scaledPosition.x, scaledPosition.y);
+  }
+
+  type PiPOptions = typeof config.defaultConfig.plugins['picture-in-picture'];
+  const setPiPOptions = config.plugins.isEnabled('picture-in-picture')
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    ? (key: string, value: unknown) => pipSetOptions({ [key]: value })
+    : () => {};
+
+  win.on('move', () => {
+    if (win.isMaximized()) {
+      return;
+    }
+
+    const position = win.getPosition();
+    const isPiPEnabled: boolean
+      = config.plugins.isEnabled('picture-in-picture')
+      && config.plugins.getOptions<PiPOptions>('picture-in-picture').isInPiP;
+    if (!isPiPEnabled) {
+
+      lateSave('window-position', { x: position[0], y: position[1] });
+    } else if (config.plugins.getOptions<PiPOptions>('picture-in-picture').savePosition) {
+      lateSave('pip-position', position, setPiPOptions);
+    }
+  });
+
+  let winWasMaximized: boolean;
+
+  win.on('resize', () => {
+    const windowSize = win.getSize();
+    const isMaximized = win.isMaximized();
+
+    const isPiPEnabled
+      = config.plugins.isEnabled('picture-in-picture')
+      && config.plugins.getOptions<PiPOptions>('picture-in-picture').isInPiP;
+
+    if (!isPiPEnabled && winWasMaximized !== isMaximized) {
+      winWasMaximized = isMaximized;
+      config.set('window-maximized', isMaximized);
+    }
+
+    if (isMaximized) {
+      return;
+    }
+
+    if (!isPiPEnabled) {
+      lateSave('window-size', {
+        width: windowSize[0],
+        height: windowSize[1],
+      });
+    } else if (config.plugins.getOptions<PiPOptions>('picture-in-picture').saveSize) {
+      lateSave('pip-size', windowSize, setPiPOptions);
+    }
+  });
+
+  const savedTimeouts: Record<string, NodeJS.Timeout | undefined> = {};
+
+  function lateSave(key: string, value: unknown, fn: (key: string, value: unknown) => void = config.set) {
+    if (savedTimeouts[key]) {
+      clearTimeout(savedTimeouts[key]);
+    }
+
+    savedTimeouts[key] = setTimeout(() => {
+      fn(key, value);
+      savedTimeouts[key] = undefined;
+    }, 600);
+  }
+
+  app.on('render-process-gone', (event, webContents, details) => {
+    showUnresponsiveDialog(win, details);
+  });
+
+  win.once('ready-to-show', () => {
+    if (config.get('options.appVisible')) {
+      win.show();
+    }
+  });
+
+  removeContentSecurityPolicy();
+
+  return win;
+}
+
+app.once('browser-window-created', (event, win) => {
+  if (config.get('options.overrideUserAgent')) {
+    // User agents are from https://developers.whatismybrowser.com/useragents/explore/
+    const originalUserAgent = win.webContents.userAgent;
+    const userAgents = {
+      mac: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 12.1; rv:95.0) Gecko/20100101 Firefox/95.0',
+      windows: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:95.0) Gecko/20100101 Firefox/95.0',
+      linux: 'Mozilla/5.0 (Linux x86_64; rv:95.0) Gecko/20100101 Firefox/95.0',
+    };
+
+    const updatedUserAgent
+      = is.macOS() ? userAgents.mac
+      : (is.windows() ? userAgents.windows
+        : userAgents.linux);
+
+    win.webContents.userAgent = updatedUserAgent;
+    app.userAgentFallback = updatedUserAgent;
+
+    win.webContents.session.webRequest.onBeforeSendHeaders((details, cb) => {
+      // This will only happen if login failed, and "retry" was pressed
+      if (win.webContents.getURL().startsWith('https://accounts.google.com') && details.url.startsWith('https://accounts.google.com')) {
+        details.requestHeaders['User-Agent'] = originalUserAgent;
+      }
+
+      cb({ requestHeaders: details.requestHeaders });
+    });
+  }
+
+  setupSongInfo(win);
+  setupAppControls();
+
+  win.webContents.on('did-fail-load', (
+    _event,
+    errorCode,
+    errorDescription,
+    validatedURL,
+    isMainFrame,
+    frameProcessId,
+    frameRoutingId,
+  ) => {
+    const log = JSON.stringify({
+      error: 'did-fail-load',
+      errorCode,
+      errorDescription,
+      validatedURL,
+      isMainFrame,
+      frameProcessId,
+      frameRoutingId,
+    }, null, '\t');
+    if (is.dev()) {
+      console.log(log);
+    }
+
+    if (!(config.plugins.isEnabled('in-app-menu') && errorCode === -3)) { // -3 is a false positive with in-app-menu
+      win.webContents.send('log', log);
+      win.webContents.loadFile(path.join(__dirname, 'error.html'));
+    }
+  });
+
+  win.webContents.on('will-prevent-unload', (event) => {
+    event.preventDefault();
+  });
+});
+
+app.on('window-all-closed', () => {
+  if (process.platform !== 'darwin') {
+    app.quit();
+  }
+
+  // Unregister all shortcuts.
+  globalShortcut.unregisterAll();
+});
+
+app.on('activate', () => {
+  // On OS X it's common to re-create a window in the app when the
+  // dock icon is clicked and there are no other windows open.
+  if (mainWindow === null) {
+    mainWindow = createMainWindow();
+  } else if (!mainWindow.isVisible()) {
+    mainWindow.show();
+  }
+});
+
+app.on('ready', () => {
+  if (config.get('options.autoResetAppCache')) {
+    // Clear cache after 20s
+    const clearCacheTimeout = setTimeout(() => {
+      if (is.dev()) {
+        console.log('Clearing app cache.');
+      }
+
+      session.defaultSession.clearCache();
+      clearTimeout(clearCacheTimeout);
+    }, 20_000);
+  }
+
+  // Register appID on windows
+  if (is.windows()) {
+    const appID = 'com.github.th-ch.youtube-music';
+    app.setAppUserModelId(appID);
+    const appLocation = process.execPath;
+    const appData = app.getPath('appData');
+    // Check shortcut validity if not in dev mode / running portable app
+    if (!is.dev() && !appLocation.startsWith(path.join(appData, '..', 'Local', 'Temp'))) {
+      const shortcutPath = path.join(appData, 'Microsoft', 'Windows', 'Start Menu', 'Programs', 'YouTube Music.lnk');
+      try { // Check if shortcut is registered and valid
+        const shortcutDetails = shell.readShortcutLink(shortcutPath); // Throw error if doesn't exist yet
+        if (
+          shortcutDetails.target !== appLocation
+          || shortcutDetails.appUserModelId !== appID
+        ) {
+          throw 'needUpdate';
+        }
+      } catch (error) { // If not valid -> Register shortcut
+        shell.writeShortcutLink(
+          shortcutPath,
+          error === 'needUpdate' ? 'update' : 'create',
+          {
+            target: appLocation,
+            cwd: path.dirname(appLocation),
+            description: 'YouTube Music Desktop App - including custom plugins',
+            appUserModelId: appID,
+          },
+        );
+      }
+    }
+  }
+
+  mainWindow = createMainWindow();
+  setApplicationMenu(mainWindow);
+  setUpTray(app, mainWindow);
+
+  setupProtocolHandler(mainWindow);
+
+  app.on('second-instance', (_, commandLine) => {
+    const uri = `${APP_PROTOCOL}://`;
+    const protocolArgv = commandLine.find((arg) => arg.startsWith(uri));
+    if (protocolArgv) {
+      const lastIndex = protocolArgv.endsWith('/') ? -1 : undefined;
+      const command = protocolArgv.slice(uri.length, lastIndex);
+      if (is.dev()) {
+        console.debug(`Received command over protocol: "${command}"`);
+      }
+
+      handleProtocol(command);
+      return;
+    }
+
+    if (!mainWindow) {
+      return;
+    }
+
+    if (mainWindow.isMinimized()) {
+      mainWindow.restore();
+    }
+
+    if (!mainWindow.isVisible()) {
+      mainWindow.show();
+    }
+
+    mainWindow.focus();
+  });
+
+  // Autostart at login
+  app.setLoginItemSettings({
+    openAtLogin: config.get('options.startAtLogin'),
+  });
+
+  if (!is.dev() && config.get('options.autoUpdates')) {
+    const updateTimeout = setTimeout(() => {
+      autoUpdater.checkForUpdatesAndNotify();
+      clearTimeout(updateTimeout);
+    }, 2000);
+    autoUpdater.on('update-available', () => {
+      const downloadLink
+        = 'https://github.com/th-ch/youtube-music/releases/latest';
+      const dialogOptions: Electron.MessageBoxOptions = {
+        type: 'info',
+        buttons: ['OK', 'Download', 'Disable updates'],
+        title: 'Application Update',
+        message: 'A new version is available',
+        detail: `A new version is available and can be downloaded at ${downloadLink}`,
+      };
+      dialog.showMessageBox(dialogOptions).then((dialogOutput) => {
+        switch (dialogOutput.response) {
+          // Download
+          case 1: {
+            shell.openExternal(downloadLink);
+            break;
+          }
+
+          // Disable updates
+          case 2: {
+            config.set('options.autoUpdates', false);
+            break;
+          }
+
+          default: {
+            break;
+          }
+        }
+      });
+    });
+  }
+
+  if (config.get('options.hideMenu') && !config.get('options.hideMenuWarned')) {
+    dialog.showMessageBox(mainWindow, {
+      type: 'info', title: 'Hide Menu Enabled',
+      message: "Menu is hidden, use 'Alt' to show it (or 'Escape' if using in-app-menu)",
+    });
+    config.set('options.hideMenuWarned', true);
+  }
+
+  // Optimized for Mac OS X
+  if (is.macOS() && !config.get('options.appVisible')) {
+    app.dock.hide();
+  }
+
+  let forceQuit = false;
+  app.on('before-quit', () => {
+    forceQuit = true;
+  });
+
+  if (is.macOS() || config.get('options.tray')) {
+    mainWindow.on('close', (event) => {
+      // Hide the window instead of quitting (quit is available in tray options)
+      if (!forceQuit) {
+        event.preventDefault();
+        mainWindow!.hide();
+      }
+    });
+  }
+});
+
+function showUnresponsiveDialog(win: BrowserWindow, details: Electron.RenderProcessGoneDetails) {
+  if (details) {
+    console.log('Unresponsive Error!\n' + JSON.stringify(details, null, '\t'));
+  }
+
+  dialog.showMessageBox(win, {
+    type: 'error',
+    title: 'Window Unresponsive',
+    message: 'The Application is Unresponsive',
+    detail: 'We are sorry for the inconvenience! please choose what to do:',
+    buttons: ['Wait', 'Relaunch', 'Quit'],
+    cancelId: 0,
+  }).then((result) => {
+    switch (result.response) {
+      case 1: {
+        restart();
+        break;
+      }
+
+      case 2: {
+        app.quit();
+        break;
+      }
+    }
+  });
+}
+
+// HACK: electron-better-web-request's typing is wrong
+type BetterSession = Omit<Electron.Session, 'webRequest'> & { webRequest: BetterWebRequest & Electron.WebRequest };
+function removeContentSecurityPolicy(
+  betterSession: BetterSession = session.defaultSession as BetterSession,
+) {
+  // Allows defining multiple "onHeadersReceived" listeners
+  // by enhancing the session.
+  // Some plugins (e.g. adblocker) also define a "onHeadersReceived" listener
+  enhanceWebRequest(betterSession);
+
+  // Custom listener to tweak the content security policy
+  betterSession.webRequest.onHeadersReceived((details, callback) => {
+    details.responseHeaders ??= {};
+
+    // Remove the content security policy
+    delete details.responseHeaders['content-security-policy-report-only'];
+    delete details.responseHeaders['content-security-policy'];
+
+    callback({ cancel: false, responseHeaders: details.responseHeaders });
+  });
+
+  type ResolverListener = { apply: () => Promise<Record<string, unknown>>; context: unknown };
+  // When multiple listeners are defined, apply them all
+  betterSession.webRequest.setResolver('onHeadersReceived', async (listeners: ResolverListener[]) => {
+    return listeners.reduce<Promise<Record<string, unknown>>>(
+      async (accumulator: Promise<Record<string, unknown>>, listener: ResolverListener) => {
+        const acc = await accumulator;
+        if (acc.cancel) {
+          return acc;
+        }
+
+        const result = await listener.apply();
+        return { ...accumulator, ...result };
+      },
+      Promise.resolve({ cancel: false }),
+    );
+  });
+}

menu.js

@@ -1,437 +0,0 @@
-const { existsSync } = require("fs");
-const path = require("path");
-
-const { app, clipboard, Menu, dialog } = require("electron");
-const is = require("electron-is");
-const { restart } = require("./providers/app-controls");
-
-const { getAllPlugins } = require("./plugins/utils");
-const config = require("./config");
-const { startingPages } = require("./providers/extracted-data");
-
-const prompt = require("custom-electron-prompt");
-const promptOptions = require("./providers/prompt-options");
-
-// true only if in-app-menu was loaded on launch
-const inAppMenuActive = config.plugins.isEnabled("in-app-menu");
-
-const pluginEnabledMenu = (plugin, label = "", hasSubmenu = false, refreshMenu = undefined) => ({
-	label: label || plugin,
-	type: "checkbox",
-	checked: config.plugins.isEnabled(plugin),
-	click: (item) => {
-		if (item.checked) {
-			config.plugins.enable(plugin);
-		} else {
-			config.plugins.disable(plugin);
-		}
-		if (hasSubmenu) {
-			refreshMenu();
-		}
-	},
-});
-
-const mainMenuTemplate = (win) => {
-	const refreshMenu = () => {
-		this.setApplicationMenu(win);
-		if (inAppMenuActive) {
-			win.webContents.send("refreshMenu");
-		}
-	}
-	return [
-		{
-			label: "Plugins",
-			submenu: [
-				...getAllPlugins().map((plugin) => {
-					const pluginPath = path.join(__dirname, "plugins", plugin, "menu.js")
-					if (existsSync(pluginPath)) {
-						let pluginLabel = plugin;
-						if (pluginLabel === "crossfade") {
-							pluginLabel = "crossfade [beta]";
-						}
-						if (!config.plugins.isEnabled(plugin)) {
-							return pluginEnabledMenu(plugin, pluginLabel, true, refreshMenu);
-						}
-						const getPluginMenu = require(pluginPath);
-						return {
-							label: pluginLabel,
-							submenu: [
-								pluginEnabledMenu(plugin, "Enabled", true, refreshMenu),
-								{ type: "separator" },
-								...getPluginMenu(win, config.plugins.getOptions(plugin), refreshMenu),
-							],
-						};
-					}
-					return pluginEnabledMenu(plugin);
-				}),
-			],
-		},
-		{
-			label: "Options",
-			submenu: [
-				{
-					label: "Auto-update",
-					type: "checkbox",
-					checked: config.get("options.autoUpdates"),
-					click: (item) => {
-						config.setMenuOption("options.autoUpdates", item.checked);
-					},
-				},
-				{
-					label: "Resume last song when app starts",
-					type: "checkbox",
-					checked: config.get("options.resumeOnStart"),
-					click: (item) => {
-						config.setMenuOption("options.resumeOnStart", item.checked);
-					},
-				},
-				{
-					label: 'Starting page',
-					submenu: Object.keys(startingPages).map((name) => ({
-						label: name,
-						type: 'radio',
-						checked: config.get('options.startingPage') === name,
-						click: () => {
-							config.set('options.startingPage', name);
-						},
-					}))
-				},
-				{
-					label: "Visual Tweaks",
-					submenu: [
-						{
-							label: "Remove upgrade button",
-							type: "checkbox",
-							checked: config.get("options.removeUpgradeButton"),
-							click: (item) => {
-								config.setMenuOption("options.removeUpgradeButton", item.checked);
-							},
-						},
-						{
-							label: "Like buttons",
-							submenu: [
-								{
-									label: "Default",
-									type: "radio",
-									checked: !config.get("options.likeButtons"),
-									click: () => {
-										config.set("options.likeButtons", '');
-									},
-								},
-								{
-									label: "Force show",
-									type: "radio",
-									checked: config.get("options.likeButtons") === 'force',
-									click: () => {
-										config.set("options.likeButtons", 'force');
-									}
-								},
-								{
-									label: "Hide",
-									type: "radio",
-									checked: config.get("options.likeButtons") === 'hide',
-									click: () => {
-										config.set("options.likeButtons", 'hide');
-									}
-								},
-							],
-						},
-						{
-							label: "Theme",
-							submenu: [
-								{
-									label: "No theme",
-									type: "radio",
-									checked: !config.get("options.themes"), // todo rename "themes"
-									click: () => {
-										config.set("options.themes", []);
-									},
-								},
-								{ type: "separator" },
-								{
-									label: "Import custom CSS file",
-									type: "radio",
-									checked: false,
-									click: async () => {
-										const { filePaths } = await dialog.showOpenDialog({
-											filters: [{ name: "CSS Files", extensions: ["css"] }],
-											properties: ["openFile", "multiSelections"],
-										});
-										if (filePaths) {
-											config.set("options.themes", filePaths);
-										}
-									},
-								},
-							],
-						},
-					],
-				},
-				{
-					label: "Single instance lock",
-					type: "checkbox",
-					checked: true,
-					click: (item) => {
-						if (!item.checked && app.hasSingleInstanceLock())
-							app.releaseSingleInstanceLock();
-						else if (item.checked && !app.hasSingleInstanceLock())
-							app.requestSingleInstanceLock();
-					},
-				},
-				{
-					label: "Always on top",
-					type: "checkbox",
-					checked: config.get("options.alwaysOnTop"),
-					click: (item) => {
-						config.setMenuOption("options.alwaysOnTop", item.checked);
-						win.setAlwaysOnTop(item.checked);
-					},
-				},
-				...(is.windows() || is.linux()
-					? [
-						{
-							label: "Hide menu",
-							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: 'Hide Menu Enabled',
-										message: "Menu will be hidden on next launch, use [Alt] to show it (or backtick [`] if using in-app-menu)"
-									});
-								}
-							},
-						},
-					]
-					: []),
-				...(is.windows() || is.macOS()
-					? // Only works on Win/Mac
-					// https://www.electronjs.org/docs/api/app#appsetloginitemsettingssettings-macos-windows
-					[
-						{
-							label: "Start at login",
-							type: "checkbox",
-							checked: config.get("options.startAtLogin"),
-							click: (item) => {
-								config.setMenuOption("options.startAtLogin", item.checked);
-							},
-						},
-					]
-					: []),
-				{
-					label: "Tray",
-					submenu: [
-						{
-							label: "Disabled",
-							type: "radio",
-							checked: !config.get("options.tray"),
-							click: () => {
-								config.setMenuOption("options.tray", false);
-								config.setMenuOption("options.appVisible", true);
-							},
-						},
-						{
-							label: "Enabled + app visible",
-							type: "radio",
-							checked:
-								config.get("options.tray") && config.get("options.appVisible"),
-							click: () => {
-								config.setMenuOption("options.tray", true);
-								config.setMenuOption("options.appVisible", true);
-							},
-						},
-						{
-							label: "Enabled + app hidden",
-							type: "radio",
-							checked:
-								config.get("options.tray") && !config.get("options.appVisible"),
-							click: () => {
-								config.setMenuOption("options.tray", true);
-								config.setMenuOption("options.appVisible", false);
-							},
-						},
-						{ type: "separator" },
-						{
-							label: "Play/Pause on click",
-							type: "checkbox",
-							checked: config.get("options.trayClickPlayPause"),
-							click: (item) => {
-								config.setMenuOption("options.trayClickPlayPause", item.checked);
-							},
-						},
-					],
-				},
-				{ type: "separator" },
-				{
-					label: "Advanced options",
-					submenu: [
-						{
-							label: "Proxy",
-							type: "checkbox",
-							checked: !!config.get("options.proxy"),
-							click: (item) => {
-								setProxy(item, win);
-							},
-						},
-						{
-							label: "Override useragent",
-							type: "checkbox",
-							checked: config.get("options.overrideUserAgent"),
-							click: (item) => {
-								config.setMenuOption("options.overrideUserAgent", item.checked);
-							}
-						},
-						{
-							label: "Disable hardware acceleration",
-							type: "checkbox",
-							checked: config.get("options.disableHardwareAcceleration"),
-							click: (item) => {
-								config.setMenuOption("options.disableHardwareAcceleration", item.checked);
-							},
-						},
-						{
-							label: "Restart on config changes",
-							type: "checkbox",
-							checked: config.get("options.restartOnConfigChanges"),
-							click: (item) => {
-								config.setMenuOption("options.restartOnConfigChanges", item.checked);
-							},
-						},
-						{
-							label: "Reset App cache when app starts",
-							type: "checkbox",
-							checked: config.get("options.autoResetAppCache"),
-							click: (item) => {
-								config.setMenuOption("options.autoResetAppCache", item.checked);
-							},
-						},
-						{ type: "separator" },
-						is.macOS() ?
-							{
-								label: "Toggle DevTools",
-								// Cannot use "toggleDevTools" role in MacOS
-								click: () => {
-									const { webContents } = win;
-									if (webContents.isDevToolsOpened()) {
-										webContents.closeDevTools();
-									} else {
-										const devToolsOptions = {};
-										webContents.openDevTools(devToolsOptions);
-									}
-								},
-							} :
-							{ role: "toggleDevTools" },
-						{
-							label: "Edit config.json",
-							click: () => {
-								config.edit();
-							},
-						},
-					]
-				},
-			],
-		},
-		{
-			label: "View",
-			submenu: [
-				{ role: "reload" },
-				{ role: "forceReload" },
-				{ type: "separator" },
-				{ role: "zoomIn" },
-				{ role: "zoomOut" },
-				{ role: "resetZoom" },
-				{ type: "separator" },
-				{ role: "togglefullscreen" },
-			],
-		},
-		{
-			label: "Navigation",
-			submenu: [
-				{
-					label: "Go back",
-					click: () => {
-						if (win.webContents.canGoBack()) {
-							win.webContents.goBack();
-						}
-					},
-				},
-				{
-					label: "Go forward",
-					click: () => {
-						if (win.webContents.canGoForward()) {
-							win.webContents.goForward();
-						}
-					},
-				},
-				{
-					label: "Copy current URL",
-					click: () => {
-						const currentURL = win.webContents.getURL();
-						clipboard.writeText(currentURL);
-					},
-				},
-				{
-					label: "Restart App",
-					click: restart
-				},
-				{ role: "quit" },
-			],
-		},
-	];
-}
-
-module.exports.mainMenuTemplate = mainMenuTemplate;
-module.exports.setApplicationMenu = (win) => {
-	const menuTemplate = [...mainMenuTemplate(win)];
-	if (process.platform === "darwin") {
-		const name = app.name;
-		menuTemplate.unshift({
-			label: name,
-			submenu: [
-				{ role: "about" },
-				{ type: "separator" },
-				{ role: "hide" },
-				{ role: "hideothers" },
-				{ role: "unhide" },
-				{ type: "separator" },
-				{
-					label: "Select All",
-					accelerator: "CmdOrCtrl+A",
-					selector: "selectAll:",
-				},
-				{ label: "Cut", accelerator: "CmdOrCtrl+X", selector: "cut:" },
-				{ label: "Copy", accelerator: "CmdOrCtrl+C", selector: "copy:" },
-				{ label: "Paste", accelerator: "CmdOrCtrl+V", selector: "paste:" },
-				{ type: "separator" },
-				{ role: "minimize" },
-				{ role: "close" },
-				{ role: "quit" },
-			],
-		});
-	}
-
-	const menu = Menu.buildFromTemplate(menuTemplate);
-	Menu.setApplicationMenu(menu);
-};
-
-async function setProxy(item, win) {
-	const output = await prompt({
-		title: 'Set Proxy',
-		label: 'Enter Proxy Address: (leave empty to disable)',
-		value: config.get("options.proxy"),
-		type: 'input',
-		inputAttrs: {
-			type: 'url',
-			placeholder: "Example: 'socks5://127.0.0.1:9999"
-		},
-		width: 450,
-		...promptOptions()
-	}, win);
-
-	if (typeof output === "string") {
-		config.setMenuOption("options.proxy", output);
-		item.checked = output !== "";
-	} else { //user pressed cancel
-		item.checked = !item.checked; //reset checkbox
-	}
-}

menu.ts

@@ -0,0 +1,472 @@
+import is from 'electron-is';
+import { app, BrowserWindow, clipboard, dialog, Menu } from 'electron';
+import prompt from 'custom-electron-prompt';
+
+import { restart } from './providers/app-controls';
+import config from './config';
+import { startingPages } from './providers/extracted-data';
+import promptOptions from './providers/prompt-options';
+
+import adblockerMenu from './plugins/adblocker/menu';
+import captionsSelectorMenu from './plugins/captions-selector/menu';
+import crossfadeMenu from './plugins/crossfade/menu';
+import disableAutoplayMenu from './plugins/disable-autoplay/menu';
+import discordMenu from './plugins/discord/menu';
+import downloaderMenu from './plugins/downloader/menu';
+import lyricsGeniusMenu from './plugins/lyrics-genius/menu';
+import notificationsMenu from './plugins/notifications/menu';
+import pictureInPictureMenu from './plugins/picture-in-picture/menu';
+import preciseVolumeMenu from './plugins/precise-volume/menu';
+import shortcutsMenu from './plugins/shortcuts/menu';
+import videoToggleMenu from './plugins/video-toggle/menu';
+import visualizerMenu from './plugins/visualizer/menu';
+import { getAvailablePluginNames } from './plugins/utils';
+
+export type MenuTemplate = Electron.MenuItemConstructorOptions[];
+
+// True only if in-app-menu was loaded on launch
+const inAppMenuActive = config.plugins.isEnabled('in-app-menu');
+
+const betaPlugins = ['crossfade', 'lumiastream'];
+
+const pluginMenus = {
+  'adblocker': adblockerMenu,
+  'disable-autoplay': disableAutoplayMenu,
+  'captions-selector': captionsSelectorMenu,
+  'crossfade': crossfadeMenu,
+  'discord': discordMenu,
+  'downloader': downloaderMenu,
+  'lyrics-genius': lyricsGeniusMenu,
+  'notifications': notificationsMenu,
+  'picture-in-picture': pictureInPictureMenu,
+  'precise-volume': preciseVolumeMenu,
+  'shortcuts': shortcutsMenu,
+  'video-toggle': videoToggleMenu,
+  'visualizer': visualizerMenu,
+};
+
+const pluginEnabledMenu = (plugin: string, label = '', hasSubmenu = false, refreshMenu: (() => void ) | undefined = undefined): Electron.MenuItemConstructorOptions => ({
+  label: label || plugin,
+  type: 'checkbox',
+  checked: config.plugins.isEnabled(plugin),
+  click(item: Electron.MenuItem) {
+    if (item.checked) {
+      config.plugins.enable(plugin);
+    } else {
+      config.plugins.disable(plugin);
+    }
+
+    if (hasSubmenu) {
+      refreshMenu?.();
+    }
+  },
+});
+
+export const mainMenuTemplate = (win: BrowserWindow): MenuTemplate => {
+  const refreshMenu = () => {
+    setApplicationMenu(win);
+    if (inAppMenuActive) {
+      win.webContents.send('refreshMenu');
+    }
+  };
+
+  return [
+    {
+      label: 'Plugins',
+      submenu:
+        getAvailablePluginNames().map((pluginName) => {
+          let pluginLabel = pluginName;
+          if (betaPlugins.includes(pluginLabel)) {
+            pluginLabel += ' [beta]';
+          }
+
+          if (Object.hasOwn(pluginMenus, pluginName)) {
+            const getPluginMenu = pluginMenus[pluginName as keyof typeof pluginMenus];
+
+            if (!config.plugins.isEnabled(pluginName)) {
+              return pluginEnabledMenu(pluginName, pluginLabel, true, refreshMenu);
+            }
+
+            return {
+              label: pluginLabel,
+              submenu: [
+                pluginEnabledMenu(pluginName, 'Enabled', true, refreshMenu),
+                { type: 'separator' },
+                ...getPluginMenu(win, config.plugins.getOptions(pluginName), refreshMenu),
+              ],
+            } satisfies Electron.MenuItemConstructorOptions;
+          }
+
+          return pluginEnabledMenu(pluginName, pluginLabel);
+        }),
+    },
+    {
+      label: 'Options',
+      submenu: [
+        {
+          label: 'Auto-update',
+          type: 'checkbox',
+          checked: config.get('options.autoUpdates'),
+          click(item) {
+            config.setMenuOption('options.autoUpdates', item.checked);
+          },
+        },
+        {
+          label: 'Resume last song when app starts',
+          type: 'checkbox',
+          checked: config.get('options.resumeOnStart'),
+          click(item) {
+            config.setMenuOption('options.resumeOnStart', item.checked);
+          },
+        },
+        {
+          label: 'Starting page',
+          submenu: (() => {
+            const subMenuArray: Electron.MenuItemConstructorOptions[] = Object.keys(startingPages).map((name) => ({
+              label: name,
+              type: 'radio',
+              checked: config.get('options.startingPage') === name,
+              click() {
+                config.set('options.startingPage', name);
+              },
+            }));
+            subMenuArray.unshift({
+              label: 'Unset',
+              type: 'radio',
+              checked: config.get('options.startingPage') === '',
+              click() {
+                config.set('options.startingPage', '');
+              },
+            });
+            return subMenuArray;
+          })(),
+        },
+        {
+          label: 'Visual Tweaks',
+          submenu: [
+            {
+              label: 'Remove upgrade button',
+              type: 'checkbox',
+              checked: config.get('options.removeUpgradeButton'),
+              click(item) {
+                config.setMenuOption('options.removeUpgradeButton', item.checked);
+              },
+            },
+            {
+              label: 'Like buttons',
+              submenu: [
+                {
+                  label: 'Default',
+                  type: 'radio',
+                  checked: !config.get('options.likeButtons'),
+                  click() {
+                    config.set('options.likeButtons', '');
+                  },
+                },
+                {
+                  label: 'Force show',
+                  type: 'radio',
+                  checked: config.get('options.likeButtons') === 'force',
+                  click() {
+                    config.set('options.likeButtons', 'force');
+                  },
+                },
+                {
+                  label: 'Hide',
+                  type: 'radio',
+                  checked: config.get('options.likeButtons') === 'hide',
+                  click() {
+                    config.set('options.likeButtons', 'hide');
+                  },
+                },
+              ],
+            },
+            {
+              label: 'Theme',
+              submenu: [
+                {
+                  label: 'No theme',
+                  type: 'radio',
+                  checked: config.get('options.themes')?.length === 0, // Todo rename "themes"
+                  click() {
+                    config.set('options.themes', []);
+                  },
+                },
+                { type: 'separator' },
+                {
+                  label: 'Import custom CSS file',
+                  type: 'normal',
+                  async click() {
+                    const { filePaths } = await dialog.showOpenDialog({
+                      filters: [{ name: 'CSS Files', extensions: ['css'] }],
+                      properties: ['openFile', 'multiSelections'],
+                    });
+                    if (filePaths) {
+                      config.set('options.themes', filePaths);
+                    }
+                  },
+                },
+              ],
+            },
+          ],
+        },
+        {
+          label: 'Single instance lock',
+          type: 'checkbox',
+          checked: true,
+          click(item) {
+            if (!item.checked && app.hasSingleInstanceLock()) {
+              app.releaseSingleInstanceLock();
+            } else if (item.checked && !app.hasSingleInstanceLock()) {
+              app.requestSingleInstanceLock();
+            }
+          },
+        },
+        {
+          label: 'Always on top',
+          type: 'checkbox',
+          checked: config.get('options.alwaysOnTop'),
+          click(item) {
+            config.setMenuOption('options.alwaysOnTop', item.checked);
+            win.setAlwaysOnTop(item.checked);
+          },
+        },
+        ...(is.windows() || is.linux()
+          ? [
+            {
+              label: 'Hide menu',
+              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: 'Hide Menu Enabled',
+                    message: 'Menu will be hidden on next launch, use [Alt] to show it (or backtick [`] if using in-app-menu)',
+                  });
+                }
+              },
+            },
+          ]
+          : []) satisfies Electron.MenuItemConstructorOptions[],
+        ...(is.windows() || is.macOS()
+          ? // Only works on Win/Mac
+          // https://www.electronjs.org/docs/api/app#appsetloginitemsettingssettings-macos-windows
+          [
+            {
+              label: 'Start at login',
+              type: 'checkbox',
+              checked: config.get('options.startAtLogin'),
+              click(item) {
+                config.setMenuOption('options.startAtLogin', item.checked);
+              },
+            },
+          ]
+          : []) satisfies Electron.MenuItemConstructorOptions[],
+        {
+          label: 'Tray',
+          submenu: [
+            {
+              label: 'Disabled',
+              type: 'radio',
+              checked: !config.get('options.tray'),
+              click() {
+                config.setMenuOption('options.tray', false);
+                config.setMenuOption('options.appVisible', true);
+              },
+            },
+            {
+              label: 'Enabled + app visible',
+              type: 'radio',
+              checked: config.get('options.tray') && config.get('options.appVisible'),
+              click() {
+                config.setMenuOption('options.tray', true);
+                config.setMenuOption('options.appVisible', true);
+              },
+            },
+            {
+              label: 'Enabled + app hidden',
+              type: 'radio',
+              checked: config.get('options.tray') && !config.get('options.appVisible'),
+              click() {
+                config.setMenuOption('options.tray', true);
+                config.setMenuOption('options.appVisible', false);
+              },
+            },
+            { type: 'separator' },
+            {
+              label: 'Play/Pause on click',
+              type: 'checkbox',
+              checked: config.get('options.trayClickPlayPause'),
+              click(item) {
+                config.setMenuOption('options.trayClickPlayPause', item.checked);
+              },
+            },
+          ],
+        },
+        { type: 'separator' },
+        {
+          label: 'Advanced options',
+          submenu: [
+            {
+              label: 'Set Proxy',
+              type: 'normal',
+              async click(item) {
+                await setProxy(item, win);
+              },
+            },
+            {
+              label: 'Override useragent',
+              type: 'checkbox',
+              checked: config.get('options.overrideUserAgent'),
+              click(item) {
+                config.setMenuOption('options.overrideUserAgent', item.checked);
+              },
+            },
+            {
+              label: 'Disable hardware acceleration',
+              type: 'checkbox',
+              checked: config.get('options.disableHardwareAcceleration'),
+              click(item) {
+                config.setMenuOption('options.disableHardwareAcceleration', item.checked);
+              },
+            },
+            {
+              label: 'Restart on config changes',
+              type: 'checkbox',
+              checked: config.get('options.restartOnConfigChanges'),
+              click(item) {
+                config.setMenuOption('options.restartOnConfigChanges', item.checked);
+              },
+            },
+            {
+              label: 'Reset App cache when app starts',
+              type: 'checkbox',
+              checked: config.get('options.autoResetAppCache'),
+              click(item) {
+                config.setMenuOption('options.autoResetAppCache', item.checked);
+              },
+            },
+            { type: 'separator' },
+            is.macOS()
+              ? {
+                label: 'Toggle DevTools',
+                // Cannot use "toggleDevTools" role in macOS
+                click() {
+                  const { webContents } = win;
+                  if (webContents.isDevToolsOpened()) {
+                    webContents.closeDevTools();
+                  } else {
+                    webContents.openDevTools();
+                  }
+                },
+              }
+              : { role: 'toggleDevTools' },
+            {
+              label: 'Edit config.json',
+              click() {
+                config.edit();
+              },
+            },
+          ],
+        },
+      ],
+    },
+    {
+      label: 'View',
+      submenu: [
+        { role: 'reload' },
+        { role: 'forceReload' },
+        { type: 'separator' },
+        { role: 'zoomIn', accelerator: process.platform === 'darwin' ? 'Cmd+I' : 'Ctrl+I' },
+        { role: 'zoomOut', accelerator: process.platform === 'darwin' ? 'Cmd+O' : 'Ctrl+O' },
+        { role: 'resetZoom' },
+        { type: 'separator' },
+        { role: 'togglefullscreen' },
+      ],
+    },
+    {
+      label: 'Navigation',
+      submenu: [
+        {
+          label: 'Go back',
+          click() {
+            if (win.webContents.canGoBack()) {
+              win.webContents.goBack();
+            }
+          },
+        },
+        {
+          label: 'Go forward',
+          click() {
+            if (win.webContents.canGoForward()) {
+              win.webContents.goForward();
+            }
+          },
+        },
+        {
+          label: 'Copy current URL',
+          click() {
+            const currentURL = win.webContents.getURL();
+            clipboard.writeText(currentURL);
+          },
+        },
+        {
+          label: 'Restart App',
+          click: restart,
+        },
+        { role: 'quit' },
+      ],
+    },
+  ];
+};
+export const setApplicationMenu = (win: Electron.BrowserWindow) => {
+  const menuTemplate: MenuTemplate = [...mainMenuTemplate(win)];
+  if (process.platform === 'darwin') {
+    const { name } = app;
+    menuTemplate.unshift({
+      label: name,
+      submenu: [
+        { role: 'about' },
+        { type: 'separator' },
+        { role: 'hide' },
+        { role: 'hideOthers' },
+        { role: 'unhide' },
+        { type: 'separator' },
+        { role: 'selectAll' },
+        { role: 'cut' },
+        { role: 'copy' },
+        { role: 'paste' },
+        { type: 'separator' },
+        { role: 'minimize' },
+        { role: 'close' },
+        { role: 'quit' },
+      ],
+    });
+  }
+
+  const menu = Menu.buildFromTemplate(menuTemplate);
+  Menu.setApplicationMenu(menu);
+};
+
+async function setProxy(item: Electron.MenuItem, win: BrowserWindow) {
+  const output = await prompt({
+    title: 'Set Proxy',
+    label: 'Enter Proxy Address: (leave empty to disable)',
+    value: config.get('options.proxy'),
+    type: 'input',
+    inputAttrs: {
+      type: 'url',
+      placeholder: "Example: 'socks5://127.0.0.1:9999",
+    },
+    width: 450,
+    ...promptOptions(),
+  }, win);
+
+  if (typeof output === 'string') {
+    config.setMenuOption('options.proxy', output);
+    item.checked = output !== '';
+  } else { // User pressed cancel
+    item.checked = !item.checked; // Reset checkbox
+  }
+}

navigation.d.ts

@@ -0,0 +1,88 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+interface NavigationOptions {
+  info: any;
+}
+
+interface NavigationHistoryEntry extends EventTarget {
+  readonly url?: string;
+  readonly key: string;
+  readonly id: string;
+  readonly index: number;
+  readonly sameDocument: boolean;
+  getState(): any;
+  ondispose: ((this: NavigationHistoryEntry, ev: Event) => any) | null;
+}
+
+interface NavigationTransition {
+  readonly navigationType: NavigationType;
+  readonly from: NavigationHistoryEntry;
+  readonly finished: Promise<undefined>;
+}
+
+interface NavigationResult {
+  committed: Promise<NavigationHistoryEntry>;
+  finished: Promise<NavigationHistoryEntry>;
+}
+
+interface NavigationNavigateOptions extends NavigationOptions {
+  state: any;
+  history?: NavigationHistoryBehavior;
+}
+
+interface NavigationReloadOptions extends NavigationOptions {
+  state: any;
+}
+
+interface NavigationUpdateCurrentEntryOptions {
+  state: any;
+}
+
+interface NavigationEventsMap {
+  currententrychange: NavigateEvent;
+  navigate: NavigateEvent;
+  navigateerror: NavigateEvent;
+  navigatesuccess: NavigateEvent;
+}
+
+interface Navigation extends EventTarget {
+  entries(): Array<NavigationHistoryEntry>;
+  readonly currentEntry?: NavigationHistoryEntry;
+  updateCurrentEntry(options: NavigationUpdateCurrentEntryOptions): undefined;
+  readonly transition?: NavigationTransition;
+  readonly canGoBack: boolean;
+  readonly canGoForward: boolean;
+  navigate(url: string, options?: NavigationNavigateOptions): NavigationResult;
+  reload(options?: NavigationReloadOptions): NavigationResult;
+  traverseTo(key: string, options?: NavigationOptions): NavigationResult;
+  back(options?: NavigationOptions): NavigationResult;
+  forward(options?: NavigationOptions): NavigationResult;
+  onnavigate: ((this: Navigation, ev: Event) => any) | null;
+  onnavigatesuccess: ((this: Navigation, ev: Event) => any) | null;
+  onnavigateerror: ((this: Navigation, ev: Event) => any) | null;
+  oncurrententrychange: ((this: Navigation, ev: Event) => any) | null;
+
+  addEventListener<K extends keyof NavigationEventsMap>(name: K, listener: (event: NavigationEventsMap[K]) => void);
+}
+
+declare class NavigateEvent extends Event {
+  canIntercept: boolean;
+  destination: NavigationHistoryEntry;
+  downloadRequest: string | null;
+  formData: FormData;
+  hashChange: boolean;
+  info: Record<string, string>;
+  navigationType: 'push' | 'reload' | 'replace' | 'traverse';
+  signal: AbortSignal;
+  userInitiated: boolean;
+
+  intercept(options?: Record<string, unknown>): void;
+  scroll(): void;
+}
+
+type NavigationHistoryBehavior = 'auto' | 'push' | 'replace';
+
+declare const Navigation: {
+  prototype: Navigation;
+  new(): Navigation;
+};

package.json

@@ -1,178 +1,212 @@
 {
-	"name": "youtube-music",
+  "name": "youtube-music",
-	"productName": "YouTube Music",
+  "productName": "YouTube Music",
-	"version": "1.20.0",
+  "version": "2.0.1",
-	"description": "YouTube Music Desktop App - including custom plugins",
+  "description": "YouTube Music Desktop App - including custom plugins",
-	"license": "MIT",
+  "main": "./dist/index.js",
-	"repository": "th-ch/youtube-music",
+  "license": "MIT",
-	"author": {
+  "repository": "th-ch/youtube-music",
-		"name": "th-ch",
+  "author": {
-		"email": "th-ch@users.noreply.github.com",
+    "name": "th-ch",
-		"url": "https://github.com/th-ch/youtube-music"
+    "email": "th-ch@users.noreply.github.com",
-	},
+    "url": "https://github.com/th-ch/youtube-music"
-	"build": {
+  },
-		"appId": "com.github.th-ch.youtube-music",
+  "build": {
-		"productName": "YouTube Music",
+    "appId": "com.github.th-ch.youtube-music",
-		"mac": {
+    "productName": "YouTube Music",
-			"identity": null,
+    "files": [
-			"files": [
+      "!*",
-				"!plugins/taskbar-mediacontrol${/*}"
+      "dist",
-			],
+      "license",
-			"target": [
+      "!node_modules",
-				{
+      "node_modules/custom-electron-prompt/**",
-					"target": "dmg",
+      "node_modules/youtubei.js/**",
-					"arch": [
+      "node_modules/undici/**",
-						"x64",
+      "node_modules/@fastify/busboy/**",
-						"arm64"
+      "node_modules/jintr/**",
-					]
+      "node_modules/acorn/**",
-				}
+      "node_modules/tslib/**",
-			],
+      "node_modules/semver/**",
-			"icon": "assets/generated/icons/mac/icon.icns"
+      "node_modules/lru-cache/**",
-		},
+      "node_modules/detect-libc/**",
-		"win": {
+      "node_modules/color/**",
-			"icon": "assets/generated/icons/win/icon.ico",
+      "node_modules/color-convert/**",
-			"files": [
+      "node_modules/color-string/**",
-				"!plugins/touchbar${/*}"
+      "node_modules/color-name/**",
-			],
+      "node_modules/simple-swizzle/**",
-			"target": [
+      "node_modules/is-arrayish/**",
-				{
+      "node_modules/@cliqz/adblocker-electron-preload/**",
-					"target": "nsis",
+      "node_modules/@cliqz/adblocker-content/**",
-					"arch": [
+      "node_modules/@cliqz/adblocker-extended-selectors/**",
-						"x64",
+      "node_modules/@ffmpeg.wasm/core-mt/**",
-						"arm64"
+      "!node_modules/**/*.map",
-					]
+      "!node_modules/**/*.ts"
-				},
+    ],
-				{
+    "mac": {
-					"target": "portable",
+      "identity": null,
-					"arch": [
+      "target": [
-						"x64",
+        {
-						"arm64"
+          "target": "dmg",
-					]
+          "arch": [
-				}
+            "x64",
-			]
+            "arm64"
-		},
+          ]
-		"nsis": {
+        }
-			"runAfterFinish": false
+      ],
-		},
+      "icon": "assets/generated/icons/mac/icon.icns"
-		"linux": {
+    },
-			"icon": "assets/generated/icons/png",
+    "win": {
-			"files": [
+      "icon": "assets/generated/icons/win/icon.ico",
-				"!plugins/{touchbar,taskbar-mediacontrol}${/*}"
+      "target": [
-			],
+        {
-			"category": "AudioVideo",
+          "target": "nsis",
-			"target": [
+          "arch": [
-				"AppImage",
+            "x64",
-				"snap",
+            "ia32",
-				"freebsd",
+            "arm64"
-				"deb",
+          ]
-				"rpm"
+        },
-			]
+        {
-		},
+          "target": "portable",
-		"snap": {
+          "arch": [
-			"slots": [
+            "x64",
-				{
+            "ia32",
-					"mpris": {
+            "arm64"
-						"interface": "mpris"
+          ]
-					}
+        }
-				}
+      ]
-			]
+    },
-		}
+    "nsis": {
-	},
+      "runAfterFinish": false
-	"scripts": {
+    },
-		"test": "playwright test",
+    "linux": {
-		"test:debug": "DEBUG=pw:browser* playwright test",
+      "icon": "assets/generated/icons/png",
-		"start": "electron .",
+      "category": "AudioVideo",
-		"start:debug": "ELECTRON_ENABLE_LOGGING=1 electron .",
+      "target": [
-		"generate:package": "node utils/generate-package-json.js",
+        "AppImage",
-		"postinstall": "yarn run plugins",
+        "snap",
-		"clean": "del-cli dist",
+        "freebsd",
-		"build": "yarn run clean && electron-builder --win --mac --linux -p never",
+        "deb",
-		"build:linux": "yarn run clean && electron-builder --linux -p never",
+        "rpm"
-		"build:mac": "yarn run clean && electron-builder --mac dmg:x64 -p never",
+      ]
-		"build:mac:arm64": "yarn run clean && electron-builder --mac dmg:arm64 -p never",
+    },
-		"build:win": "yarn run clean && electron-builder --win -p never",
+    "snap": {
-		"lint": "xo",
+      "slots": [
-		"changelog": "auto-changelog",
+        {
-		"plugins": "yarn run plugin:adblocker && yarn run plugin:bypass-age-restrictions",
+          "mpris": {
-		"plugin:adblocker": "del-cli plugins/adblocker/ad-blocker-engine.bin && node plugins/adblocker/blocker.js",
+            "interface": "mpris"
-		"plugin:bypass-age-restrictions": "del-cli node_modules/simple-youtube-age-restriction-bypass/package.json && yarn run generate:package simple-youtube-age-restriction-bypass",
+          }
-		"release:linux": "yarn run clean && electron-builder --linux -p always -c.snap.publish=github",
+        }
-		"release:mac": "yarn run clean && electron-builder --mac -p always",
+      ]
-		"release:win": "yarn run clean && electron-builder --win -p always"
+    },
-	},
+    "directories": {
-	"engines": {
+      "output": "./pack/"
-		"node": ">=16.0.0",
+    }
-		"npm": "Please use yarn instead"
+  },
-	},
+  "scripts": {
-	"dependencies": {
+    "test": "npm run build && playwright test",
-		"@cliqz/adblocker-electron": "^1.26.5",
+    "test:debug": "DEBUG=pw:browser* npm run build && playwright test",
-		"@ffmpeg/core": "^0.11.0",
+    "rollup:preload": "rollup -c rollup.preload.config.ts --configPlugin @rollup/plugin-typescript --bundleConfigAsCjs",
-		"@ffmpeg/ffmpeg": "^0.11.6",
+    "rollup:main": "rollup -c rollup.main.config.ts --configPlugin @rollup/plugin-typescript --bundleConfigAsCjs",
-		"@foobar404/wave": "^2.0.4",
+    "build": "npm run rollup:preload && npm run rollup:main",
-		"@xhayper/discord-rpc": "^1.0.16",
+    "start": "npm run build && electron ./dist/index.js",
-		"async-mutex": "^0.4.0",
+    "start:debug": "ELECTRON_ENABLE_LOGGING=1 npm run start",
-		"browser-id3-writer": "^5.0.0",
+    "generate:package": "node utils/generate-package-json.js",
-		"butterchurn": "^2.6.7",
+    "postinstall": "npm run plugins && npm run clean",
-		"butterchurn-presets": "^2.4.7",
+    "clean": "del-cli dist && del-cli pack",
-		"custom-electron-prompt": "^1.5.7",
+    "dist": "npm run clean && npm run build && electron-builder --win --mac --linux -p never",
-		"custom-electron-titlebar": "^4.1.6",
+    "dist:linux": "npm run clean && npm run build && electron-builder --linux -p never",
-		"electron-better-web-request": "^1.0.1",
+    "dist:mac": "npm run clean && npm run build && electron-builder --mac dmg:x64 -p never",
-		"electron-debug": "^3.2.0",
+    "dist:mac:arm64": "npm run clean && npm run build && electron-builder --mac dmg:arm64 -p never",
-		"electron-is": "^3.0.0",
+    "dist:win": "npm run clean && npm run build && electron-builder --win -p never",
-		"electron-localshortcut": "^3.2.1",
+    "dist:win:x64": "npm run clean && npm run build && electron-builder --win nsis:x64 -p never",
-		"electron-store": "^8.1.0",
+    "lint": "eslint .",
-		"electron-unhandled": "^4.0.1",
+    "changelog": "auto-changelog",
-		"electron-updater": "^5.3.0",
+    "plugins": "npm run plugin:bypass-age-restrictions",
-		"filenamify": "^4.3.0",
+    "plugin:bypass-age-restrictions": "del-cli node_modules/simple-youtube-age-restriction-bypass/package.json && npm run generate:package simple-youtube-age-restriction-bypass",
-		"howler": "^2.2.3",
+    "release:linux": "npm run clean && npm run build && electron-builder --linux -p always -c.snap.publish=github",
-		"html-to-text": "^9.0.5",
+    "release:mac": "npm run clean && npm run build && electron-builder --mac -p always",
-		"keyboardevent-from-electron-accelerator": "^2.0.0",
+    "release:win": "npm run clean && npm run build && electron-builder --win -p always",
-		"keyboardevents-areequal": "^0.2.2",
+    "typecheck": "tsc -p tsconfig.json --noEmit"
-		"md5": "^2.3.0",
+  },
-		"mpris-service": "^2.1.2",
+  "engines": {
-		"node-fetch": "^2.6.9",
+    "node": ">=16.0.0"
-		"simple-youtube-age-restriction-bypass": "https://gitpkg.now.sh/api/pkg.tgz?url=zerodytrash/Simple-YouTube-Age-Restriction-Bypass&commit=v2.5.4",
+  },
-		"vudio": "^2.1.1",
+  "dependencies": {
-		"youtubei.js": "^4.3.0",
+    "@cliqz/adblocker-electron": "1.26.7",
-		"ytpl": "^2.3.0"
+    "@ffmpeg.wasm/core-mt": "0.12.0",
-	},
+    "@ffmpeg.wasm/main": "0.12.0",
-	"resolutions": {
+    "@foobar404/wave": "2.0.4",
-		"xml2js": "^0.5.0",
+    "@xhayper/discord-rpc": "1.0.23",
-		"@electron/universal": "^1.3.4",
+    "async-mutex": "0.4.0",
-		"electron-is-dev": "patch:electron-is-dev@npm%3A2.0.0#./.yarn/patches/electron-is-dev-npm-2.0.0-9d41637d91.patch"
+    "butterchurn": "2.6.7",
-	},
+    "butterchurn-presets": "2.4.7",
-	"devDependencies": {
+    "conf": "10.2.0",
-		"@playwright/test": "^1.29.2",
+    "custom-electron-prompt": "1.5.7",
-		"auto-changelog": "^2.4.0",
+    "electron-better-web-request": "1.0.1",
-		"del-cli": "^5.0.0",
+    "electron-debug": "3.2.0",
-		"electron": "^22.3.6",
+    "electron-is": "3.0.0",
-		"electron-builder": "^23.6.0",
+    "electron-localshortcut": "3.2.1",
-		"electron-devtools-installer": "^3.2.0",
+    "electron-store": "8.1.0",
-		"node-gyp": "^9.3.1",
+    "electron-unhandled": "4.0.1",
-		"playwright": "^1.29.2",
+    "electron-updater": "6.1.4",
-		"xo": "^0.53.1"
+    "fast-average-color": "9.4.0",
-	},
+    "filenamify": "6.0.0",
-	"auto-changelog": {
+    "howler": "2.2.4",
-		"hideCredit": true,
+    "html-to-text": "9.0.5",
-		"package": true,
+    "keyboardevent-from-electron-accelerator": "2.0.0",
-		"unreleased": true,
+    "keyboardevents-areequal": "0.2.2",
-		"output": "changelog.md"
+    "mpris-service": "2.1.2",
-	},
+    "node-id3": "0.2.6",
-	"xo": {
+    "simple-youtube-age-restriction-bypass": "git+https://github.com/MiepHD/Simple-YouTube-Age-Restriction-Bypass.git#v2.5.5",
-		"envs": [
+    "vudio": "2.1.1",
-			"node",
+    "x11": "2.3.0",
-			"browser"
+    "youtubei.js": "6.4.1",
-		],
+    "ytpl": "2.3.0"
-		"rules": {
+  },
-			"quotes": [
+  "overrides": {
-				"error",
+    "rollup": "4.0.2",
-				"double",
+    "node-gyp": "9.4.0",
-				{
+    "xml2js": "0.6.2",
-					"avoidEscape": true,
+    "dbus-next": "0.10.2",
-					"allowTemplateLiterals": true
+    "node-fetch": "2.7.0",
-				}
+    "@electron/universal": "1.4.2",
-			]
+    "electron": "27.0.0-beta.9"
-		}
+  },
-	},
+  "devDependencies": {
-	"packageManager": "yarn@3.4.1"
+    "@playwright/test": "1.38.1",
+    "@rollup/plugin-commonjs": "25.0.5",
+    "@rollup/plugin-image": "3.0.3",
+    "@rollup/plugin-json": "6.0.1",
+    "@rollup/plugin-node-resolve": "15.2.2",
+    "@rollup/plugin-terser": "0.4.4",
+    "@rollup/plugin-typescript": "11.1.5",
+    "@rollup/plugin-wasm": "6.2.2",
+    "@total-typescript/ts-reset": "0.5.1",
+    "@types/electron-localshortcut": "3.1.1",
+    "@types/howler": "2.2.9",
+    "@types/html-to-text": "9.0.2",
+    "@typescript-eslint/eslint-plugin": "6.7.4",
+    "auto-changelog": "2.4.0",
+    "del-cli": "5.1.0",
+    "electron": "27.0.0-beta.9",
+    "electron-builder": "24.6.4",
+    "electron-devtools-installer": "3.2.0",
+    "eslint": "8.51.0",
+    "eslint-plugin-import": "2.28.1",
+    "eslint-plugin-prettier": "5.0.0",
+    "node-gyp": "9.4.0",
+    "playwright": "1.38.1",
+    "rollup": "4.0.2",
+    "rollup-plugin-copy": "3.5.0",
+    "rollup-plugin-import-css": "3.3.4",
+    "rollup-plugin-string": "3.0.0",
+    "typescript": "5.2.2"
+  },
+  "auto-changelog": {
+    "hideCredit": true,
+    "package": true,
+    "unreleased": true,
+    "output": "changelog.md"
+  }
 }

plugins/adblocker/back.js

@@ -1,13 +0,0 @@
-const { loadAdBlockerEngine } = require("./blocker");
-const config = require("./config");
-
-module.exports = async (win, options) => {
-	if (await config.shouldUseBlocklists()) {
-		loadAdBlockerEngine(
-			win.webContents.session,
-			options.cache,
-			options.additionalBlockLists,
-			options.disableDefaultLists,
-		);
-	}
-};

plugins/adblocker/back.ts

@@ -0,0 +1,19 @@
+import { BrowserWindow } from 'electron';
+
+import { loadAdBlockerEngine } from './blocker';
+import { shouldUseBlocklists } from './config';
+
+import type { ConfigType } from '../../config/dynamic';
+
+type AdBlockOptions = ConfigType<'adblocker'>;
+
+export default async (win: BrowserWindow, options: AdBlockOptions) => {
+  if (await shouldUseBlocklists()) {
+    loadAdBlockerEngine(
+      win.webContents.session,
+      options.cache,
+      options.additionalBlockLists,
+      options.disableDefaultLists,
+    );
+  }
+};

plugins/adblocker/blocker-types.ts

@@ -0,0 +1,4 @@
+export const blockers = {
+  WithBlocklists: 'With blocklists',
+  InPlayer: 'In player',
+} as const;

plugins/adblocker/blocker.js

@@ -1,60 +0,0 @@
-const { promises } = require("fs"); // used for caching
-const path = require("path");
-
-const { ElectronBlocker } = require("@cliqz/adblocker-electron");
-const fetch = require("node-fetch");
-
-const SOURCES = [
-	"https://raw.githubusercontent.com/kbinani/adblock-youtube-ads/master/signed.txt",
-	// uBlock Origin
-	"https://raw.githubusercontent.com/uBlockOrigin/uAssets/master/filters/filters.txt",
-	"https://raw.githubusercontent.com/uBlockOrigin/uAssets/master/filters/filters-2021.txt",
-	// Fanboy Annoyances
-	"https://secure.fanboy.co.nz/fanboy-annoyance_ubo.txt",
-];
-
-const loadAdBlockerEngine = (
-	session = undefined,
-	cache = true,
-	additionalBlockLists = [],
-	disableDefaultLists = false
-) => {
-	// Only use cache if no additional blocklists are passed
-	const cachingOptions =
-		cache && additionalBlockLists.length === 0
-			? {
-					path: path.resolve(__dirname, "ad-blocker-engine.bin"),
-					read: promises.readFile,
-					write: promises.writeFile,
-			  }
-			: undefined;
-	const lists = [
-		...(disableDefaultLists ? [] : SOURCES),
-		...additionalBlockLists,
-	];
-
-	ElectronBlocker.fromLists(
-		fetch,
-		lists,
-		{
-			// when generating the engine for caching, do not load network filters
-			// So that enhancing the session works as expected
-			// Allowing to define multiple webRequest listeners
-			loadNetworkFilters: session !== undefined,
-		},
-		cachingOptions
-	)
-		.then((blocker) => {
-			if (session) {
-				blocker.enableBlockingInSession(session);
-			} else {
-				console.log("Successfully generated adBlocker engine.");
-			}
-		})
-		.catch((err) => console.log("Error loading adBlocker engine", err));
-};
-
-module.exports = { loadAdBlockerEngine };
-if (require.main === module) {
-	loadAdBlockerEngine(); // Generate the engine without enabling it
-}

plugins/adblocker/blocker.ts

@@ -0,0 +1,73 @@
+// Used for caching
+import path from 'node:path';
+import fs, { promises } from 'node:fs';
+
+import { ElectronBlocker } from '@cliqz/adblocker-electron';
+import { app } from 'electron';
+
+const SOURCES = [
+  'https://raw.githubusercontent.com/kbinani/adblock-youtube-ads/master/signed.txt',
+  // UBlock Origin
+  'https://raw.githubusercontent.com/uBlockOrigin/uAssets/master/filters/filters.txt',
+  'https://raw.githubusercontent.com/uBlockOrigin/uAssets/master/filters/filters-2020.txt',
+  'https://raw.githubusercontent.com/uBlockOrigin/uAssets/master/filters/filters-2021.txt',
+  'https://raw.githubusercontent.com/uBlockOrigin/uAssets/master/filters/filters-2022.txt',
+  'https://raw.githubusercontent.com/uBlockOrigin/uAssets/master/filters/filters-2023.txt',
+  // Fanboy Annoyances
+  'https://secure.fanboy.co.nz/fanboy-annoyance_ubo.txt',
+];
+
+export const loadAdBlockerEngine = (
+  session: Electron.Session | undefined = undefined,
+  cache = true,
+  additionalBlockLists = [],
+  disableDefaultLists: boolean | unknown[] = false,
+) => {
+  // Only use cache if no additional blocklists are passed
+  let cacheDirectory: string;
+  if (app.isPackaged) {
+    cacheDirectory = path.join(app.getPath('userData'), 'adblock_cache');
+  } else {
+    cacheDirectory = path.resolve(__dirname, 'adblock_cache');
+  }
+  if (!fs.existsSync(cacheDirectory)) {
+    fs.mkdirSync(cacheDirectory);
+  }
+  const cachingOptions
+    = cache && additionalBlockLists.length === 0
+    ? {
+      path: path.join(cacheDirectory, 'adblocker-engine.bin'),
+      read: promises.readFile,
+      write: promises.writeFile,
+    }
+    : undefined;
+  const lists = [
+    ...(
+      (disableDefaultLists && !Array.isArray(disableDefaultLists)) ||
+      (Array.isArray(disableDefaultLists) && disableDefaultLists.length > 0) ? [] : SOURCES
+    ),
+    ...additionalBlockLists,
+  ];
+
+  ElectronBlocker.fromLists(
+    fetch,
+    lists,
+    {
+      // When generating the engine for caching, do not load network filters
+      // So that enhancing the session works as expected
+      // Allowing to define multiple webRequest listeners
+      loadNetworkFilters: session !== undefined,
+    },
+    cachingOptions,
+  )
+    .then((blocker) => {
+      if (session) {
+        blocker.enableBlockingInSession(session);
+      } else {
+        console.log('Successfully generated adBlocker engine.');
+      }
+    })
+    .catch((error) => console.log('Error loading adBlocker engine', error));
+};
+
+export default { loadAdBlockerEngine };

plugins/adblocker/config.js

@@ -1,13 +0,0 @@
-const { PluginConfig } = require("../../config/dynamic");
-
-const config = new PluginConfig("adblocker", { enableFront: true });
-
-const blockers = {
-	WithBlocklists: "With blocklists",
-	InPlayer: "In player",
-};
-
-const shouldUseBlocklists = async () =>
-	(await config.get("blocker")) !== blockers.InPlayer;
-
-module.exports = { shouldUseBlocklists, blockers, ...config };

plugins/adblocker/config.ts

@@ -0,0 +1,15 @@
+/* eslint-disable @typescript-eslint/await-thenable */
+/* renderer */
+
+import { blockers } from './blocker-types';
+
+import { PluginConfig } from '../../config/dynamic';
+
+const config = new PluginConfig('adblocker', { enableFront: true });
+
+export const shouldUseBlocklists = async () => await config.get('blocker') !== blockers.InPlayer;
+
+export default Object.assign(config, {
+  shouldUseBlocklists,
+  blockers,
+});

plugins/adblocker/inject-cliqz-preload.ts

@@ -0,0 +1,4 @@
+export default () => {
+  const path = '@cliqz/adblocker-electron-preload'; // prevent require hoisting
+  require(path);
+};

plugins/adblocker/inject.d.ts

@@ -0,0 +1,3 @@
+const inject: () => void;
+
+export default inject;

plugins/adblocker/inject.js

@@ -1,289 +1,435 @@
+/* eslint-disable */
+
 // Source: https://addons.mozilla.org/en-US/firefox/addon/adblock-for-youtube/
 // https://robwu.nl/crxviewer/?crx=https%3A%2F%2Faddons.mozilla.org%2Fen-US%2Ffirefox%2Faddon%2Fadblock-for-youtube%2F
 
 /*
-	Parts of this code is derived from set-constant.js:
+  Parts of this code is derived from set-constant.js:
-	https://github.com/gorhill/uBlock/blob/5de0ce975753b7565759ac40983d31978d1f84ca/assets/resources/scriptlets.js#L704
+  https://github.com/gorhill/uBlock/blob/5de0ce975753b7565759ac40983d31978d1f84ca/assets/resources/scriptlets.js#L704
-	*/
-
-{
-	let pruner = function (o) {
-		delete o.playerAds;
-		delete o.adPlacements;
-		//
-		if (o.playerResponse) {
-			delete o.playerResponse.playerAds;
-			delete o.playerResponse.adPlacements;
-		}
-		//
-		return o;
-	};
-
-	JSON.parse = new Proxy(JSON.parse, {
-		apply: function () {
-			return pruner(Reflect.apply(...arguments));
-		},
-	});
-
-	Response.prototype.json = new Proxy(Response.prototype.json, {
-		apply: function () {
-			return Reflect.apply(...arguments).then((o) => pruner(o));
-		},
-	});
-}
-
-(function () {
-	let cValue = "undefined";
-	const chain = "playerResponse.adPlacements";
-	const thisScript = document.currentScript;
-	//
-	if (cValue === "null") cValue = null;
-	else if (cValue === "''") cValue = "";
-	else if (cValue === "true") cValue = true;
-	else if (cValue === "false") cValue = false;
-	else if (cValue === "undefined") cValue = undefined;
-	else if (cValue === "noopFunc") cValue = function () {};
-	else if (cValue === "trueFunc")
-		cValue = function () {
-			return true;
-		};
-	else if (cValue === "falseFunc")
-		cValue = function () {
-			return false;
-		};
-	else if (/^\d+$/.test(cValue)) {
-		cValue = parseFloat(cValue);
-		//
-		if (isNaN(cValue)) return;
-		if (Math.abs(cValue) > 0x7fff) return;
-	} else {
-		return;
-	}
-	//
-	let aborted = false;
-	const mustAbort = function (v) {
-		if (aborted) return true;
-		aborted =
-			v !== undefined &&
-			v !== null &&
-			cValue !== undefined &&
-			cValue !== null &&
-			typeof v !== typeof cValue;
-		return aborted;
-	};
-
-	/*
-	Support multiple trappers for the same property:
-	https://github.com/uBlockOrigin/uBlock-issues/issues/156
   */
+module.exports = () => {
+  {
+    const pruner = function (o) {
+      delete o.playerAds;
+      delete o.adPlacements;
+      //
+      if (o.playerResponse) {
+        delete o.playerResponse.playerAds;
+        delete o.playerResponse.adPlacements;
+      }
 
-	const trapProp = function (owner, prop, configurable, handler) {
+      //
-		if (handler.init(owner[prop]) === false) {
+      return o;
-			return;
+    };
-		}
-		//
-		const odesc = Object.getOwnPropertyDescriptor(owner, prop);
-		let prevGetter, prevSetter;
-		if (odesc instanceof Object) {
-			if (odesc.configurable === false) return;
-			if (odesc.get instanceof Function) prevGetter = odesc.get;
-			if (odesc.set instanceof Function) prevSetter = odesc.set;
-		}
-		//
-		Object.defineProperty(owner, prop, {
-			configurable,
-			get() {
-				if (prevGetter !== undefined) {
-					prevGetter();
-				}
-				//
-				return handler.getter();
-			},
-			set(a) {
-				if (prevSetter !== undefined) {
-					prevSetter(a);
-				}
-				//
-				handler.setter(a);
-			},
-		});
-	};
 
-	const trapChain = function (owner, chain) {
+    JSON.parse = new Proxy(JSON.parse, {
-		const pos = chain.indexOf(".");
+      apply() {
-		if (pos === -1) {
+        return pruner(Reflect.apply(...arguments));
-			trapProp(owner, chain, false, {
+      },
-				v: undefined,
+    });
-				getter: function () {
-					return document.currentScript === thisScript ? this.v : cValue;
-				},
-				setter: function (a) {
-					if (mustAbort(a) === false) return;
-					cValue = a;
-				},
-				init: function (v) {
-					if (mustAbort(v)) return false;
-					//
-					this.v = v;
-					return true;
-				},
-			});
-			//
-			return;
-		}
-		//
-		const prop = chain.slice(0, pos);
-		const v = owner[prop];
-		//
-		chain = chain.slice(pos + 1);
-		if (v instanceof Object || (typeof v === "object" && v !== null)) {
-			trapChain(v, chain);
-			return;
-		}
-		//
-		trapProp(owner, prop, true, {
-			v: undefined,
-			getter: function () {
-				return this.v;
-			},
-			setter: function (a) {
-				this.v = a;
-				if (a instanceof Object) trapChain(a, chain);
-			},
-			init: function (v) {
-				this.v = v;
-				return true;
-			},
-		});
-	};
-	//
-	trapChain(window, chain);
-})();
 
-(function () {
+    Response.prototype.json = new Proxy(Response.prototype.json, {
-	let cValue = "undefined";
+      apply() {
-	const thisScript = document.currentScript;
+        return Reflect.apply(...arguments).then((o) => pruner(o));
-	const chain = "ytInitialPlayerResponse.adPlacements";
+      },
-	//
+    });
-	if (cValue === "null") cValue = null;
+  }
-	else if (cValue === "''") cValue = "";
-	else if (cValue === "true") cValue = true;
-	else if (cValue === "false") cValue = false;
-	else if (cValue === "undefined") cValue = undefined;
-	else if (cValue === "noopFunc") cValue = function () {};
-	else if (cValue === "trueFunc")
-		cValue = function () {
-			return true;
-		};
-	else if (cValue === "falseFunc")
-		cValue = function () {
-			return false;
-		};
-	else if (/^\d+$/.test(cValue)) {
-		cValue = parseFloat(cValue);
-		//
-		if (isNaN(cValue)) return;
-		if (Math.abs(cValue) > 0x7fff) return;
-	} else {
-		return;
-	}
-	//
-	let aborted = false;
-	const mustAbort = function (v) {
-		if (aborted) return true;
-		aborted =
-			v !== undefined &&
-			v !== null &&
-			cValue !== undefined &&
-			cValue !== null &&
-			typeof v !== typeof cValue;
-		return aborted;
-	};
 
-	/*
+  (function () {
-	Support multiple trappers for the same property:
+    let cValue = 'undefined';
-	https://github.com/uBlockOrigin/uBlock-issues/issues/156
+    const chain = 'playerResponse.adPlacements';
-  */
+    const thisScript = document.currentScript;
+    //
+    switch (cValue) {
+      case 'null': {
+        cValue = null;
+        break;
+      }
 
-	const trapProp = function (owner, prop, configurable, handler) {
+      case "''": {
-		if (handler.init(owner[prop]) === false) {
+        cValue = '';
-			return;
+        break;
-		}
+      }
-		//
-		const odesc = Object.getOwnPropertyDescriptor(owner, prop);
-		let prevGetter, prevSetter;
-		if (odesc instanceof Object) {
-			if (odesc.configurable === false) return;
-			if (odesc.get instanceof Function) prevGetter = odesc.get;
-			if (odesc.set instanceof Function) prevSetter = odesc.set;
-		}
-		//
-		Object.defineProperty(owner, prop, {
-			configurable,
-			get() {
-				if (prevGetter !== undefined) {
-					prevGetter();
-				}
-				//
-				return handler.getter();
-			},
-			set(a) {
-				if (prevSetter !== undefined) {
-					prevSetter(a);
-				}
-				//
-				handler.setter(a);
-			},
-		});
-	};
 
-	const trapChain = function (owner, chain) {
+      case 'true': {
-		const pos = chain.indexOf(".");
+        cValue = true;
-		if (pos === -1) {
+        break;
-			trapProp(owner, chain, false, {
+      }
-				v: undefined,
+
-				getter: function () {
+      case 'false': {
-					return document.currentScript === thisScript ? this.v : cValue;
+        cValue = false;
-				},
+        break;
-				setter: function (a) {
+      }
-					if (mustAbort(a) === false) return;
+
-					cValue = a;
+      case 'undefined': {
-				},
+        cValue = undefined;
-				init: function (v) {
+        break;
-					if (mustAbort(v)) return false;
+      }
-					//
+
-					this.v = v;
+      case 'noopFunc': {
-					return true;
+        cValue = function () {
-				},
+        };
-			});
+
-			//
+        break;
-			return;
+      }
-		}
+
-		//
+      case 'trueFunc': {
-		const prop = chain.slice(0, pos);
+        cValue = function () {
-		const v = owner[prop];
+          return true;
-		//
+        };
-		chain = chain.slice(pos + 1);
+
-		if (v instanceof Object || (typeof v === "object" && v !== null)) {
+        break;
-			trapChain(v, chain);
+      }
-			return;
+
-		}
+      case 'falseFunc': {
-		//
+        cValue = function () {
-		trapProp(owner, prop, true, {
+          return false;
-			v: undefined,
+        };
-			getter: function () {
+
-				return this.v;
+        break;
-			},
+      }
-			setter: function (a) {
+
-				this.v = a;
+      default: {
-				if (a instanceof Object) trapChain(a, chain);
+        if (/^\d+$/.test(cValue)) {
-			},
+          cValue = Number.parseFloat(cValue);
-			init: function (v) {
+          //
-				this.v = v;
+          if (isNaN(cValue)) {
-				return true;
+            return;
-			},
+          }
-		});
+
-	};
+          if (Math.abs(cValue) > 0x7F_FF) {
-	//
+            return;
-	trapChain(window, chain);
+          }
-})();
+        } else {
+          return;
+        }
+      }
+    }
+
+    //
+    let aborted = false;
+    const mustAbort = function (v) {
+      if (aborted) {
+        return true;
+      }
+
+      aborted
+        = v !== undefined
+        && v !== null
+        && cValue !== undefined
+        && cValue !== null
+        && typeof v !== typeof cValue;
+      return aborted;
+    };
+
+    /*
+    Support multiple trappers for the same property:
+    https://github.com/uBlockOrigin/uBlock-issues/issues/156
+    */
+
+    const trapProp = function (owner, prop, configurable, handler) {
+      if (handler.init(owner[prop]) === false) {
+        return;
+      }
+
+      //
+      const odesc = Object.getOwnPropertyDescriptor(owner, prop);
+      let previousGetter;
+      let previousSetter;
+      if (odesc instanceof Object) {
+        if (odesc.configurable === false) {
+          return;
+        }
+
+        if (odesc.get instanceof Function) {
+          previousGetter = odesc.get;
+        }
+
+        if (odesc.set instanceof Function) {
+          previousSetter = odesc.set;
+        }
+      }
+
+      //
+      Object.defineProperty(owner, prop, {
+        configurable,
+        get() {
+          if (previousGetter !== undefined) {
+            previousGetter();
+          }
+
+          //
+          return handler.getter();
+        },
+        set(a) {
+          if (previousSetter !== undefined) {
+            previousSetter(a);
+          }
+
+          //
+          handler.setter(a);
+        },
+      });
+    };
+
+    const trapChain = function (owner, chain) {
+      const pos = chain.indexOf('.');
+      if (pos === -1) {
+        trapProp(owner, chain, false, {
+          v: undefined,
+          getter() {
+            return document.currentScript === thisScript ? this.v : cValue;
+          },
+          setter(a) {
+            if (mustAbort(a) === false) {
+              return;
+            }
+
+            cValue = a;
+          },
+          init(v) {
+            if (mustAbort(v)) {
+              return false;
+            }
+
+            //
+            this.v = v;
+            return true;
+          },
+        });
+        //
+        return;
+      }
+
+      //
+      const prop = chain.slice(0, pos);
+      const v = owner[prop];
+      //
+      chain = chain.slice(pos + 1);
+      if (v instanceof Object || (typeof v === 'object' && v !== null)) {
+        trapChain(v, chain);
+        return;
+      }
+
+      //
+      trapProp(owner, prop, true, {
+        v: undefined,
+        getter() {
+          return this.v;
+        },
+        setter(a) {
+          this.v = a;
+          if (a instanceof Object) {
+            trapChain(a, chain);
+          }
+        },
+        init(v) {
+          this.v = v;
+          return true;
+        },
+      });
+    };
+
+    //
+    trapChain(window, chain);
+  })();
+
+  (function () {
+    let cValue = 'undefined';
+    const thisScript = document.currentScript;
+    const chain = 'ytInitialPlayerResponse.adPlacements';
+    //
+    switch (cValue) {
+      case 'null': {
+        cValue = null;
+        break;
+      }
+
+      case "''": {
+        cValue = '';
+        break;
+      }
+
+      case 'true': {
+        cValue = true;
+        break;
+      }
+
+      case 'false': {
+        cValue = false;
+        break;
+      }
+
+      case 'undefined': {
+        cValue = undefined;
+        break;
+      }
+
+      case 'noopFunc': {
+        cValue = function () {
+        };
+
+        break;
+      }
+
+      case 'trueFunc': {
+        cValue = function () {
+          return true;
+        };
+
+        break;
+      }
+
+      case 'falseFunc': {
+        cValue = function () {
+          return false;
+        };
+
+        break;
+      }
+
+      default: {
+        if (/^\d+$/.test(cValue)) {
+          cValue = Number.parseFloat(cValue);
+          //
+          if (isNaN(cValue)) {
+            return;
+          }
+
+          if (Math.abs(cValue) > 0x7F_FF) {
+            return;
+          }
+        } else {
+          return;
+        }
+      }
+    }
+
+    //
+    let aborted = false;
+    const mustAbort = function (v) {
+      if (aborted) {
+        return true;
+      }
+
+      aborted
+        = v !== undefined
+        && v !== null
+        && cValue !== undefined
+        && cValue !== null
+        && typeof v !== typeof cValue;
+      return aborted;
+    };
+
+    /*
+    Support multiple trappers for the same property:
+    https://github.com/uBlockOrigin/uBlock-issues/issues/156
+    */
+
+    const trapProp = function (owner, prop, configurable, handler) {
+      if (handler.init(owner[prop]) === false) {
+        return;
+      }
+
+      //
+      const odesc = Object.getOwnPropertyDescriptor(owner, prop);
+      let previousGetter;
+      let previousSetter;
+      if (odesc instanceof Object) {
+        if (odesc.configurable === false) {
+          return;
+        }
+
+        if (odesc.get instanceof Function) {
+          previousGetter = odesc.get;
+        }
+
+        if (odesc.set instanceof Function) {
+          previousSetter = odesc.set;
+        }
+      }
+
+      //
+      Object.defineProperty(owner, prop, {
+        configurable,
+        get() {
+          if (previousGetter !== undefined) {
+            previousGetter();
+          }
+
+          //
+          return handler.getter();
+        },
+        set(a) {
+          if (previousSetter !== undefined) {
+            previousSetter(a);
+          }
+
+          //
+          handler.setter(a);
+        },
+      });
+    };
+
+    const trapChain = function (owner, chain) {
+      const pos = chain.indexOf('.');
+      if (pos === -1) {
+        trapProp(owner, chain, false, {
+          v: undefined,
+          getter() {
+            return document.currentScript === thisScript ? this.v : cValue;
+          },
+          setter(a) {
+            if (mustAbort(a) === false) {
+              return;
+            }
+
+            cValue = a;
+          },
+          init(v) {
+            if (mustAbort(v)) {
+              return false;
+            }
+
+            //
+            this.v = v;
+            return true;
+          },
+        });
+        //
+        return;
+      }
+
+      //
+      const prop = chain.slice(0, pos);
+      const v = owner[prop];
+      //
+      chain = chain.slice(pos + 1);
+      if (v instanceof Object || (typeof v === 'object' && v !== null)) {
+        trapChain(v, chain);
+        return;
+      }
+
+      //
+      trapProp(owner, prop, true, {
+        v: undefined,
+        getter() {
+          return this.v;
+        },
+        setter(a) {
+          this.v = a;
+          if (a instanceof Object) {
+            trapChain(a, chain);
+          }
+        },
+        init(v) {
+          this.v = v;
+          return true;
+        },
+      });
+    };
+
+    //
+    trapChain(window, chain);
+  })();
+};

plugins/adblocker/menu.js

@@ -1,15 +0,0 @@
-const config = require("./config");
-
-module.exports = () => [
-	{
-		label: "Blocker",
-		submenu: Object.values(config.blockers).map((blocker) => ({
-			label: blocker,
-			type: "radio",
-			checked: (config.get("blocker") || config.blockers.WithBlocklists) === blocker,
-			click: () => {
-				config.set("blocker", blocker);
-			},
-		})),
-	},
-];

plugins/adblocker/menu.ts

@@ -0,0 +1,21 @@
+import config from './config';
+
+import { blockers } from './blocker-types';
+
+import { MenuTemplate } from '../../menu';
+
+export default (): MenuTemplate => {
+  return [
+    {
+      label: 'Blocker',
+      submenu: Object.values(blockers).map((blocker: string) => ({
+        label: blocker,
+        type: 'radio',
+        checked: (config.get('blocker') || blockers.WithBlocklists) === blocker,
+        click() {
+          config.set('blocker', blocker);
+        },
+      })),
+    },
+  ];
+};

plugins/adblocker/preload.js

@@ -1,10 +0,0 @@
-const config = require("./config");
-
-module.exports = async () => {
-	if (await config.shouldUseBlocklists()) {
-		// Preload adblocker to inject scripts/styles
-		require("@cliqz/adblocker-electron-preload");
-	} else if ((await config.get("blocker")) === config.blockers.InPlayer) {
-		require("./inject");
-	}
-};

plugins/adblocker/preload.ts

@@ -0,0 +1,15 @@
+import config from './config';
+import inject from './inject';
+import injectCliqzPreload from './inject-cliqz-preload';
+
+import { blockers } from './blocker-types';
+
+export default async () => {
+  if (await config.shouldUseBlocklists()) {
+    // Preload adblocker to inject scripts/styles
+    injectCliqzPreload();
+    // eslint-disable-next-line @typescript-eslint/await-thenable
+  } else if ((await config.get('blocker')) === blockers.InPlayer) {
+    inject();
+  }
+};

plugins/album-color-theme/back.ts

@@ -0,0 +1,9 @@
+import { BrowserWindow } from 'electron';
+
+import style from './style.css';
+
+import { injectCSS } from '../utils';
+
+export default (win: BrowserWindow) => {
+  injectCSS(win.webContents, style);
+};

plugins/album-color-theme/front.ts

@@ -0,0 +1,127 @@
+import { FastAverageColor } from 'fast-average-color';
+
+import { ConfigType } from '../../config/dynamic';
+
+function hexToHSL(H: string) {
+  // Convert hex to RGB first
+  let r = 0;
+  let g = 0;
+  let b = 0;
+  if (H.length == 4) {
+    r = Number('0x' + H[1] + H[1]);
+    g = Number('0x' + H[2] + H[2]);
+    b = Number('0x' + H[3] + H[3]);
+  } else if (H.length == 7) {
+    r = Number('0x' + H[1] + H[2]);
+    g = Number('0x' + H[3] + H[4]);
+    b = Number('0x' + H[5] + H[6]);
+  }
+  // Then to HSL
+  r /= 255;
+  g /= 255;
+  b /= 255;
+  const cmin = Math.min(r, g, b);
+  const cmax = Math.max(r, g, b);
+  const delta = cmax - cmin;
+  let h: number;
+  let s: number;
+  let l: number;
+
+  if (delta == 0) {
+    h = 0;
+  } else if (cmax == r) {
+    h = ((g - b) / delta) % 6;
+  } else if (cmax == g) {
+    h = ((b - r) / delta) + 2;
+  } else {
+    h = ((r - g) / delta) + 4;
+  }
+
+  h = Math.round(h * 60);
+
+  if (h < 0) {
+    h += 360;
+  }
+
+  l = (cmax + cmin) / 2;
+  s = delta == 0 ? 0 : delta / (1 - Math.abs((2 * l) - 1));
+  s = +(s * 100).toFixed(1);
+  l = +(l * 100).toFixed(1);
+
+  //return "hsl(" + h + "," + s + "%," + l + "%)";
+  return [h,s,l];
+}
+
+let hue = 0;
+let saturation = 0;
+let lightness = 0;
+
+function changeElementColor(element: HTMLElement | null, hue: number, saturation: number, lightness: number){
+  if (element) {
+    element.style.backgroundColor = `hsl(${hue}, ${saturation}%, ${lightness}%)`;
+  }
+}
+
+export default (_: ConfigType<'album-color-theme'>) => {
+  // updated elements
+  const playerPage = document.querySelector<HTMLElement>('#player-page');
+  const navBarBackground = document.querySelector<HTMLElement>('#nav-bar-background');
+  const ytmusicPlayerBar = document.querySelector<HTMLElement>('ytmusic-player-bar');
+  const playerBarBackground = document.querySelector<HTMLElement>('#player-bar-background');
+  const sidebarBig = document.querySelector<HTMLElement>('#guide-wrapper');
+  const sidebarSmall = document.querySelector<HTMLElement>('#mini-guide-background');
+  const ytmusicAppLayout = document.querySelector<HTMLElement>('#layout');
+
+  const observer = new MutationObserver((mutationsList) => {
+    for (const mutation of mutationsList) {
+      if (mutation.type === 'attributes') {
+        const isPageOpen = ytmusicAppLayout?.hasAttribute('player-page-open');
+        if (isPageOpen) {
+          changeElementColor(sidebarSmall, hue, saturation, lightness - 30);
+        } else {
+          if (sidebarSmall) {
+            sidebarSmall.style.backgroundColor = 'black';
+          }
+        }
+      }
+    }
+  });
+
+  if (playerPage) {
+    observer.observe(playerPage, { attributes: true });
+  }
+
+  document.addEventListener('apiLoaded', (apiEvent) => {
+    const fastAverageColor = new FastAverageColor();
+
+    apiEvent.detail.addEventListener('videodatachange', (name: string) => {
+      if (name === 'dataloaded') {
+        const playerResponse = apiEvent.detail.getPlayerResponse();
+        const thumbnail = playerResponse?.videoDetails?.thumbnail?.thumbnails?.at(0);
+        if (thumbnail) {
+          fastAverageColor.getColorAsync(thumbnail.url)
+            .then((albumColor) => {
+              if (albumColor) {
+                [hue, saturation, lightness] = hexToHSL(albumColor.hex);
+                changeElementColor(playerPage, hue, saturation, lightness - 30);
+                changeElementColor(navBarBackground, hue, saturation, lightness - 15);
+                changeElementColor(ytmusicPlayerBar, hue, saturation, lightness - 15);
+                changeElementColor(playerBarBackground, hue, saturation, lightness - 15);
+                changeElementColor(sidebarBig, hue, saturation, lightness - 15);
+                if (ytmusicAppLayout?.hasAttribute('player-page-open')) {
+                  changeElementColor(sidebarSmall, hue, saturation, lightness - 30);
+                }
+                const ytRightClickList = document.querySelector<HTMLElement>('tp-yt-paper-listbox');
+                changeElementColor(ytRightClickList, hue, saturation, lightness - 15);
+              } else {
+                if (playerPage) {
+                  playerPage.style.backgroundColor = '#000000';
+                }
+              }
+            })
+            .catch((e) => console.error(e));
+        }
+      }
+    });
+  });
+};

plugins/album-color-theme/style.css

@@ -0,0 +1,29 @@
+yt-page-navigation-progress {
+  --yt-page-navigation-container-color: #00000046 !important;
+  --yt-page-navigation-progress-color: white !important;
+}
+
+#player-page {
+  transition: transform 300ms,background-color 300ms cubic-bezier(0.2,0,0.6,1) !important;
+}
+
+#nav-bar-background {
+  transition: opacity 200ms,background-color 300ms cubic-bezier(0.2,0,0.6,1) !important;
+}
+
+#mini-guide-background {
+  transition: opacity 200ms,background-color 300ms cubic-bezier(0.2,0,0.6,1) !important;
+  border-right: 0px !important;
+}
+
+#guide-wrapper {
+  transition: opacity 200ms,background-color 300ms cubic-bezier(0.2,0,0.6,1) !important;
+}
+
+#img, #player, .song-media-controls.style-scope.ytmusic-player {
+  border-radius: 2% !important;
+}
+
+#items {
+  border-radius: 10px !important;
+}

plugins/ambient-mode/back.ts

@@ -0,0 +1,10 @@
+import { BrowserWindow } from 'electron';
+
+import style from './style.css';
+
+import { injectCSS } from '../utils';
+
+
+export default (win: BrowserWindow) => {  
+  injectCSS(win.webContents, style);
+};

plugins/ambient-mode/front.ts

@@ -0,0 +1,138 @@
+import { ConfigType } from '../../config/dynamic';
+
+export default (_: ConfigType<'ambient-mode'>) => {
+  const interpolationTime = 3000; // interpolation time (ms)
+  const framerate = 30; // frame
+  const qualityRatio = 50; // width size (pixel)
+
+  let unregister: (() => void) | null = null;
+
+  const injectBlurVideo = (): (() => void) | null => {
+    const songVideo = document.querySelector<HTMLDivElement>('#song-video');
+    const video = document.querySelector<HTMLVideoElement>('#song-video .html5-video-container > video');
+    const wrapper = document.querySelector('#song-video > .player-wrapper');
+
+    if (!songVideo) return null;
+    if (!video) return null;
+    if (!wrapper) return null;
+
+    const blurCanvas = document.createElement('canvas');
+    blurCanvas.classList.add('html5-blur-canvas');
+
+    const context = blurCanvas.getContext('2d', { willReadFrequently: true });
+
+    /* effect */
+    let lastEffectWorkId: number | null = null;
+    let lastImageData: ImageData | null = null;
+    
+    const onSync = () => {
+      if (typeof lastEffectWorkId === 'number') cancelAnimationFrame(lastEffectWorkId);
+
+      lastEffectWorkId = requestAnimationFrame(() => {
+        if (!context) return;
+
+        const width = qualityRatio;
+        let height = Math.max(Math.floor(blurCanvas.height / blurCanvas.width * width), 1);
+        if (!Number.isFinite(height)) height = width;
+
+        context.globalAlpha = 1;
+        if (lastImageData) {
+          const frameOffset = (1 / framerate) * (1000 / interpolationTime);
+          context.globalAlpha = 1 - (frameOffset * 2); // because of alpha value must be < 1
+          context.putImageData(lastImageData, 0, 0);
+          context.globalAlpha = frameOffset;
+        }
+        context.drawImage(video, 0, 0, width, height);
+
+        const nowImageData = context.getImageData(0, 0, width, height);
+        lastImageData = nowImageData;
+
+        lastEffectWorkId = null;
+      });
+    };
+
+    const applyVideoAttributes = () => {
+      const rect = video.getBoundingClientRect();
+
+      const newWidth = Math.floor(video.width || rect.width);
+      const newHeight = Math.floor(video.height || rect.height);
+
+      if (newWidth === 0 || newHeight === 0) return;
+
+      blurCanvas.width = qualityRatio;
+      blurCanvas.height = Math.floor(newHeight / newWidth * qualityRatio);
+      blurCanvas.style.width = `${newWidth}px`;
+      blurCanvas.style.height = `${newHeight}px`;
+    };
+
+    const observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        if (mutation.type === 'attributes') {
+          applyVideoAttributes();
+        }
+      });
+    });
+    const resizeObserver = new ResizeObserver(() => {
+      applyVideoAttributes();
+    });
+
+    /* hooking */
+    let canvasInterval: NodeJS.Timeout | null = null;
+    canvasInterval = setInterval(onSync, Math.max(1, Math.ceil(1000 / framerate)));
+    applyVideoAttributes();
+    observer.observe(songVideo, { attributes: true });
+    resizeObserver.observe(songVideo);
+    window.addEventListener('resize', applyVideoAttributes);
+
+    const onPause = () => {
+      if (canvasInterval) clearInterval(canvasInterval);
+      canvasInterval = null;
+    };
+    const onPlay = () => {
+      if (canvasInterval) clearInterval(canvasInterval);
+      canvasInterval = setInterval(onSync, Math.max(1, Math.ceil(1000 / framerate)));
+    };
+    songVideo.addEventListener('pause', onPause);
+    songVideo.addEventListener('play', onPlay);
+
+    /* injecting */
+    wrapper.prepend(blurCanvas);
+
+    /* cleanup */
+    return () => {
+      if (canvasInterval) clearInterval(canvasInterval);
+
+      songVideo.removeEventListener('pause', onPause);
+      songVideo.removeEventListener('play', onPlay);
+
+      observer.disconnect();
+      resizeObserver.disconnect();
+      window.removeEventListener('resize', applyVideoAttributes);
+
+      wrapper.removeChild(blurCanvas);
+    };
+  };
+
+  
+  const playerPage = document.querySelector<HTMLElement>('#player-page');
+  const ytmusicAppLayout = document.querySelector<HTMLElement>('#layout');
+  
+  const observer = new MutationObserver((mutationsList) => {
+    for (const mutation of mutationsList) {
+      if (mutation.type === 'attributes') {
+        const isPageOpen = ytmusicAppLayout?.hasAttribute('player-page-open');
+        if (isPageOpen) {
+          unregister?.();
+          unregister = injectBlurVideo() ?? null;
+        } else {
+          unregister?.();
+          unregister = null;
+        }
+      }
+    }
+  });
+
+  if (playerPage) {
+    observer.observe(playerPage, { attributes: true });
+  }
+};

plugins/ambient-mode/style.css

@@ -0,0 +1,7 @@
+#song-video canvas.html5-blur-canvas{
+  position: absolute;
+  left: 0;
+  top: 0;
+
+  filter: blur(100px);
+}

plugins/audio-compressor/front.js

@@ -1,19 +0,0 @@
-const applyCompressor = (e) => {
-	const audioContext = e.detail.audioContext;
-
-	const compressor = audioContext.createDynamicsCompressor();
-	compressor.threshold.value = -50;
-	compressor.ratio.value = 12;
-	compressor.knee.value = 40;
-	compressor.attack.value = 0;
-	compressor.release.value = 0.25;
-
-	e.detail.audioSource.connect(compressor);
-	compressor.connect(audioContext.destination);
-};
-
-module.exports = () =>
-	document.addEventListener("audioCanPlay", applyCompressor, {
-		once: true, // Only create the audio compressor once, not on each video
-		passive: true,
-	});

plugins/audio-compressor/front.ts

@@ -0,0 +1,17 @@
+export default () =>
+  document.addEventListener('audioCanPlay', (e) => {
+    const { audioContext } = e.detail;
+
+    const compressor = audioContext.createDynamicsCompressor();
+    compressor.threshold.value = -50;
+    compressor.ratio.value = 12;
+    compressor.knee.value = 40;
+    compressor.attack.value = 0;
+    compressor.release.value = 0.25;
+
+    e.detail.audioSource.connect(compressor);
+    compressor.connect(audioContext.destination);
+  }, {
+    once: true, // Only create the audio compressor once, not on each video
+    passive: true,
+  });

plugins/blur-nav-bar/back.js

@@ -1,6 +0,0 @@
-const path = require("path");
-const { injectCSS } = require("../utils");
-
-module.exports = win => {
-	injectCSS(win.webContents, path.join(__dirname, "style.css"));
-};

plugins/blur-nav-bar/back.ts

@@ -0,0 +1,9 @@
+import { BrowserWindow } from 'electron';
+
+import style from './style.css';
+
+import { injectCSS } from '../utils';
+
+export default (win: BrowserWindow) => {
+  injectCSS(win.webContents, style);
+};

plugins/blur-nav-bar/style.css

@@ -1,10 +1,10 @@
 #nav-bar-background,
 #header.ytmusic-item-section-renderer,
 ytmusic-tabs {
-	background: rgba(0, 0, 0, 0.3) !important;
+  background: rgba(0, 0, 0, 0.3) !important;
-	backdrop-filter: blur(8px) !important;
+  backdrop-filter: blur(8px) !important;
 }
 
 #nav-bar-divider {
-	display: none !important;
+  display: none !important;
 }

plugins/bypass-age-restrictions/front.js

@@ -1,4 +0,0 @@
-module.exports = () => {
-	// See https://github.com/zerodytrash/Simple-YouTube-Age-Restriction-Bypass#userscript
-	require("simple-youtube-age-restriction-bypass/dist/Simple-YouTube-Age-Restriction-Bypass.user.js");
-};

plugins/bypass-age-restrictions/front.ts

@@ -0,0 +1,4 @@
+export default () => {
+  // See https://github.com/zerodytrash/Simple-YouTube-Age-Restriction-Bypass#userscript
+  require('simple-youtube-age-restriction-bypass/dist/Simple-YouTube-Age-Restriction-Bypass.user.js');
+};

plugins/captions-selector/back.js

@@ -1,21 +0,0 @@
-const { ipcMain } = require("electron");
-
-const prompt = require("custom-electron-prompt");
-const promptOptions = require("../../providers/prompt-options");
-
-module.exports = (win) => {
-	ipcMain.handle("captionsSelector", async (_, captionLabels, currentIndex) => {
-		return await prompt(
-			{
-				title: "Choose Caption",
-				label: `Current Caption: ${captionLabels[currentIndex] || "None"}`,
-				type: "select",
-				value: currentIndex,
-				selectOptions: captionLabels,
-				resizable: true,
-				...promptOptions(),
-			},
-			win
-		);
-	});
-};

plugins/captions-selector/back.ts

@@ -0,0 +1,19 @@
+import { BrowserWindow, ipcMain } from 'electron';
+import prompt from 'custom-electron-prompt';
+
+import promptOptions from '../../providers/prompt-options';
+
+export default (win: BrowserWindow) => {
+  ipcMain.handle('captionsSelector', async (_, captionLabels: Record<string, string>, currentIndex: string) => await prompt(
+    {
+      title: 'Choose Caption',
+      label: `Current Caption: ${captionLabels[currentIndex] || 'None'}`,
+      type: 'select',
+      value: currentIndex,
+      selectOptions: captionLabels,
+      resizable: true,
+      ...promptOptions(),
+    },
+    win,
+  ));
+};

plugins/captions-selector/config.js

@@ -1,3 +0,0 @@
-const { PluginConfig } = require("../../config/dynamic");
-const config = new PluginConfig("captions-selector", { enableFront: true });
-module.exports = { ...config };

plugins/captions-selector/config.ts

@@ -0,0 +1,4 @@
+import { PluginConfig } from '../../config/dynamic';
+
+const config = new PluginConfig('captions-selector', { enableFront: true });
+export default config;

plugins/captions-selector/front.js

@@ -1,77 +0,0 @@
-const { ElementFromFile, templatePath } = require("../utils");
-const { ipcRenderer } = require("electron");
-
-const configProvider = require("./config");
-let config;
-
-function $(selector) { return document.querySelector(selector); }
-
-const captionsSettingsButton = ElementFromFile(
-    templatePath(__dirname, "captions-settings-template.html")
-);
-
-module.exports = async () => {
-	config = await configProvider.getAll();
-
-	configProvider.subscribeAll((newConfig) => {
-		config = newConfig;
-	});
-    document.addEventListener('apiLoaded', (event) => setup(event.detail), { once: true, passive: true });
-}
-
-function setup(api) {
-    $(".right-controls-buttons").append(captionsSettingsButton);
-
-    let captionTrackList = api.getOption("captions", "tracklist");
-
-	$("video").addEventListener("srcChanged", async () => {
-		if (config.disableCaptions) {
-			setTimeout(() => api.unloadModule("captions"), 100);
-			captionsSettingsButton.style.display = "none";
-			return;
-		}
-
-		api.loadModule("captions");
-
-		setTimeout(async () => {
-			captionTrackList = api.getOption("captions", "tracklist");
-
-			if (config.autoload && config.lastCaptionsCode) {
-				api.setOption("captions", "track", {
-					languageCode: config.lastCaptionsCode,
-				});
-			}
-
-			captionsSettingsButton.style.display = captionTrackList?.length
-				? "inline-block"
-				: "none";
-		}, 250);
-	});
-
-    captionsSettingsButton.onclick = async () => {
-        if (captionTrackList?.length) {
-            const currentCaptionTrack = api.getOption("captions", "track");
-            let currentIndex = !currentCaptionTrack ?
-				null :
-				captionTrackList.indexOf(captionTrackList.find(track => track.languageCode === currentCaptionTrack.languageCode));
-
-            const captionLabels = [
-                ...captionTrackList.map(track => track.displayName),
-                'None'
-            ];
-
-            currentIndex = await ipcRenderer.invoke('captionsSelector', captionLabels, currentIndex)
-			if (currentIndex === null) return;
-
-			const newCaptions = captionTrackList[currentIndex];
-            configProvider.set('lastCaptionsCode', newCaptions?.languageCode);
-			if (newCaptions) {
-				api.setOption("captions", "track", { languageCode: newCaptions.languageCode });
-			} else {
-				api.setOption("captions", "track", {});
-			}
-
-			setTimeout(() => api.playVideo());
-        }
-    }
-}

plugins/captions-selector/front.ts

@@ -0,0 +1,101 @@
+/* eslint-disable @typescript-eslint/await-thenable */
+/* renderer */
+
+import { ipcRenderer } from 'electron';
+
+import configProvider from './config';
+
+import CaptionsSettingsButtonHTML from './templates/captions-settings-template.html';
+
+import { ElementFromHtml } from '../utils';
+import { YoutubePlayer } from '../../types/youtube-player';
+
+import type { ConfigType } from '../../config/dynamic';
+
+interface LanguageOptions {
+  displayName: string;
+  id: string | null;
+  is_default: boolean;
+  is_servable: boolean;
+  is_translateable: boolean;
+  kind: string;
+  languageCode: string; // 2 length
+  languageName: string;
+  name: string | null;
+  vss_id: string;
+}
+
+let config: ConfigType<'captions-selector'>;
+
+const $ = <Element extends HTMLElement>(selector: string): Element => document.querySelector(selector)!;
+
+const captionsSettingsButton = ElementFromHtml(CaptionsSettingsButtonHTML);
+
+export default async () => {
+  // RENDERER
+  config = await configProvider.getAll();
+
+  configProvider.subscribeAll((newConfig) => {
+    config = newConfig;
+  });
+  document.addEventListener('apiLoaded', (event) => setup(event.detail), { once: true, passive: true });
+};
+
+function setup(api: YoutubePlayer) {
+  $('.right-controls-buttons').append(captionsSettingsButton);
+
+  let captionTrackList = api.getOption<LanguageOptions[]>('captions', 'tracklist') ?? [];
+
+  $('video').addEventListener('srcChanged', () => {
+    if (config.disableCaptions) {
+      setTimeout(() => api.unloadModule('captions'), 100);
+      captionsSettingsButton.style.display = 'none';
+      return;
+    }
+
+    api.loadModule('captions');
+
+    setTimeout(() => {
+      captionTrackList = api.getOption('captions', 'tracklist') ?? [];
+
+      if (config.autoload && config.lastCaptionsCode) {
+        api.setOption('captions', 'track', {
+          languageCode: config.lastCaptionsCode,
+        });
+      }
+
+      captionsSettingsButton.style.display = captionTrackList?.length
+        ? 'inline-block'
+        : 'none';
+    }, 250);
+  });
+
+  captionsSettingsButton.addEventListener('click', async () => {
+    if (captionTrackList?.length) {
+      const currentCaptionTrack = api.getOption<LanguageOptions>('captions', 'track')!;
+      let currentIndex = currentCaptionTrack
+        ? captionTrackList.indexOf(captionTrackList.find((track) => track.languageCode === currentCaptionTrack.languageCode)!)
+        : null;
+
+      const captionLabels = [
+        ...captionTrackList.map((track) => track.displayName),
+        'None',
+      ];
+
+      currentIndex = await ipcRenderer.invoke('captionsSelector', captionLabels, currentIndex) as number;
+      if (currentIndex === null) {
+        return;
+      }
+
+      const newCaptions = captionTrackList[currentIndex];
+      configProvider.set('lastCaptionsCode', newCaptions?.languageCode);
+      if (newCaptions) {
+        api.setOption('captions', 'track', { languageCode: newCaptions.languageCode });
+      } else {
+        api.setOption('captions', 'track', {});
+      }
+
+      setTimeout(() => api.playVideo());
+    }
+  });
+}

plugins/captions-selector/menu.js

@@ -1,20 +0,0 @@
-const config = require("./config");
-
-module.exports = () => [
-    {
-        label: "Automatically select last used caption",
-        type: "checkbox",
-        checked: config.get("autoload"),
-        click: (item) => {
-            config.set('autoload', item.checked);
-        }
-    },
-    {
-        label: "No captions by default",
-        type: "checkbox",
-        checked: config.get("disabledCaptions"),
-        click: (item) => {
-            config.set('disableCaptions', item.checked);
-        },
-    }
-];

plugins/captions-selector/menu.ts

@@ -0,0 +1,22 @@
+import config from './config';
+
+import { MenuTemplate } from '../../menu';
+
+export default (): MenuTemplate => [
+  {
+    label: 'Automatically select last used caption',
+    type: 'checkbox',
+    checked: config.get('autoload'),
+    click(item) {
+      config.set('autoload', item.checked);
+    },
+  },
+  {
+    label: 'No captions by default',
+    type: 'checkbox',
+    checked: config.get('disableCaptions'),
+    click(item) {
+      config.set('disableCaptions', item.checked);
+    },
+  },
+];

plugins/captions-selector/templates/captions-settings-template.html

@@ -1,13 +1,17 @@
-<tp-yt-paper-icon-button class="player-captions-button style-scope ytmusic-player" icon="yt-icons:subtitles"
+<tp-yt-paper-icon-button aria-disabled="false" aria-label="Open captions selector"
-    title="Open captions selector" aria-label="Open captions selector" role="button" tabindex="0" aria-disabled="false">
+                         class="player-captions-button style-scope ytmusic-player" icon="yt-icons:subtitles"
-    <tp-yt-iron-icon id="icon" class="style-scope tp-yt-paper-icon-button"><svg viewBox="0 0 24 24"
+                         role="button" tabindex="0"
-            preserveAspectRatio="xMidYMid meet" focusable="false" class="style-scope yt-icon"
+                         title="Open captions selector">
-            style="pointer-events: none; display: block; width: 100%; height: 100%;">
+  <tp-yt-iron-icon class="style-scope tp-yt-paper-icon-button" id="icon">
-            <g class="style-scope yt-icon">
+    <svg class="style-scope yt-icon"
-                <path
+         focusable="false" preserveAspectRatio="xMidYMid meet"
-					d="M20 4H4c-1.103 0-2 .897-2 2v12c0 1.103.897 2 2 2h16c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2zm-9 6H8v4h3v2H8c-1.103 0-2-.897-2-2v-4c0-1.103.897-2 2-2h3v2zm7 0h-3v4h3v2h-3c-1.103 0-2-.897-2-2v-4c0-1.103.897-2 2-2h3v2z"
+         style="pointer-events: none; display: block; width: 100%; height: 100%;"
-					class="style-scope tp-yt-iron-icon"></path>
+         viewBox="0 0 24 24">
-            </g>
+      <g class="style-scope yt-icon">
-        </svg>
+        <path
-    </tp-yt-iron-icon>
+          class="style-scope tp-yt-iron-icon"
+          d="M20 4H4c-1.103 0-2 .897-2 2v12c0 1.103.897 2 2 2h16c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2zm-9 6H8v4h3v2H8c-1.103 0-2-.897-2-2v-4c0-1.103.897-2 2-2h3v2zm7 0h-3v4h3v2h-3c-1.103 0-2-.897-2-2v-4c0-1.103.897-2 2-2h3v2z"></path>
+      </g>
+    </svg>
+  </tp-yt-iron-icon>
 </tp-yt-paper-icon-button>

plugins/compact-sidebar/front.ts

@@ -0,0 +1,10 @@
+export default () => {
+  const compactSidebar = document.querySelector('#mini-guide');
+  const isCompactSidebarDisabled
+    = compactSidebar === null
+    || window.getComputedStyle(compactSidebar).display === 'none';
+
+  if (isCompactSidebarDisabled) {
+    document.querySelector<HTMLButtonElement>('#button')?.click();
+  }
+};

plugins/crossfade/back.js

@@ -1,15 +0,0 @@
-const { ipcMain } = require("electron");
-const { Innertube } = require("youtubei.js");
-
-require("./config");
-
-module.exports = async () => {
-	const yt = await Innertube.create();
-
-	ipcMain.handle("audio-url", async (_, videoID) => {
-		const info = await yt.getBasicInfo(videoID);
-		const url = info.streaming_data?.formats[0].decipher(yt.session.player);
-
-		return url;
-	});
-};

plugins/crossfade/back.ts

@@ -0,0 +1,11 @@
+import { ipcMain } from 'electron';
+import { Innertube } from 'youtubei.js';
+
+export default async () => {
+  const yt = await Innertube.create();
+
+  ipcMain.handle('audio-url', async (_, videoID: string) => {
+    const info = await yt.getBasicInfo(videoID);
+    return info.streaming_data?.formats[0].decipher(yt.session.player);
+  });
+};

plugins/crossfade/config.js

@@ -1,3 +0,0 @@
-const { PluginConfig } = require("../../config/dynamic");
-const config = new PluginConfig("crossfade", { enableFront: true });
-module.exports = { ...config };

plugins/crossfade/config.ts

@@ -0,0 +1,4 @@
+import { PluginConfig } from '../../config/dynamic';
+
+const config = new PluginConfig('crossfade', { enableFront: true });
+export default config;

plugins/crossfade/fader.js

@@ -1,360 +0,0 @@
-/**
- * VolumeFader
- * Sophisticated Media Volume Fading
- *
- * Requires browser support for:
- * - HTMLMediaElement
- * - requestAnimationFrame()
- * - ES6
- *
- * Does not depend on any third-party library.
- *
- * License: MIT
- *
- * Nick Schwarzenberg
- * v0.2.0, 07/2016
- */
-
-(function (root) {
-	"use strict";
-
-	// internal utility: check if value is a valid volume level and throw if not
-	let validateVolumeLevel = (value) => {
-		// number between 0 and 1?
-		if (!Number.isNaN(value) && value >= 0 && value <= 1) {
-			// yup, that's fine
-			return;
-		} else {
-			// abort and throw an exception
-			throw new TypeError("Number between 0 and 1 expected as volume!");
-		}
-	};
-
-	// main class
-	class VolumeFader {
-		/**
-		 * VolumeFader Constructor
-		 *
-		 * @param media {HTMLMediaElement} - audio or video element to be controlled
-		 * @param options {Object} - an object with optional settings
-		 * @throws {TypeError} if options.initialVolume or options.fadeDuration are invalid
-		 *
-		 * options:
-		 * .logger: {Function} logging `function(stuff, …)` for execution information (default: no logging)
-		 * .fadeScaling: {Mixed} either 'linear', 'logarithmic' or a positive number in dB (default: logarithmic)
-		 * .initialVolume: {Number} media volume 0…1 to apply during setup (volume not touched by default)
-		 * .fadeDuration: {Number} time in milliseconds to complete a fade (default: 1000 ms)
-		 */
-		constructor(media, options) {
-			// passed media element of correct type?
-			if (media instanceof HTMLMediaElement) {
-				// save reference to media element
-				this.media = media;
-			} else {
-				// abort and throw an exception
-				throw new TypeError("Media element expected!");
-			}
-
-			// make sure options is an object
-			options = options || {};
-
-			// log function passed?
-			if (typeof options.logger == "function") {
-				// set log function to the one specified
-				this.logger = options.logger;
-			} else {
-				// set log function explicitly to false
-				this.logger = false;
-			}
-
-			// linear volume fading?
-			if (options.fadeScaling == "linear") {
-				// pass levels unchanged
-				this.scale = {
-					internalToVolume: (level) => level,
-					volumeToInternal: (level) => level,
-				};
-
-				// log setting
-				this.logger && this.logger("Using linear fading.");
-			}
-			// no linear, but logarithmic fading…
-			else {
-				let dynamicRange;
-
-				// default dynamic range?
-				if (
-					options.fadeScaling === undefined ||
-					options.fadeScaling == "logarithmic"
-				) {
-					// set default of 60 dB
-					dynamicRange = 3;
-				}
-				// custom dynamic range?
-				else if (
-					!Number.isNaN(options.fadeScaling) &&
-					options.fadeScaling > 0
-				) {
-					// turn amplitude dB into a multiple of 10 power dB
-					dynamicRange = options.fadeScaling / 2 / 10;
-				}
-				// unsupported value
-				else {
-					// abort and throw exception
-					throw new TypeError(
-						"Expected 'linear', 'logarithmic' or a positive number as fade scaling preference!"
-					);
-				}
-
-				// use exponential/logarithmic scaler for expansion/compression
-				this.scale = {
-					internalToVolume: (level) =>
-						this.exponentialScaler(level, dynamicRange),
-					volumeToInternal: (level) =>
-						this.logarithmicScaler(level, dynamicRange),
-				};
-
-				// log setting if not default
-				options.fadeScaling &&
-					this.logger &&
-					this.logger(
-						"Using logarithmic fading with " +
-							String(10 * dynamicRange) +
-							" dB dynamic range."
-					);
-			}
-
-			// set initial volume?
-			if (options.initialVolume !== undefined) {
-				// validate volume level and throw if invalid
-				validateVolumeLevel(options.initialVolume);
-
-				// set initial volume
-				this.media.volume = options.initialVolume;
-
-				// log setting
-				this.logger &&
-					this.logger(
-						"Set initial volume to " + String(this.media.volume) + "."
-					);
-			}
-
-			// fade duration given?
-			if (options.fadeDuration !== undefined) {
-				// try to set given fade duration (will log if successful and throw if not)
-				this.setFadeDuration(options.fadeDuration);
-			} else {
-				// set default fade duration (1000 ms)
-				this.fadeDuration = 1000;
-			}
-
-			// indicate that fader is not active yet
-			this.active = false;
-
-			// initialization done
-			this.logger && this.logger("Initialized for", this.media);
-		}
-
-		/**
-		 * Re(start) the update cycle.
-		 * (this.active must be truthy for volume updates to take effect)
-		 *
-		 * @return {Object} VolumeFader instance for chaining
-		 */
-		start() {
-			// set fader to be active
-			this.active = true;
-
-			// start by running the update method
-			this.updateVolume();
-
-			// return instance for chaining
-			return this;
-		}
-
-		/**
-		 * Stop the update cycle.
-		 * (interrupting any fade)
-		 *
-		 * @return {Object} VolumeFader instance for chaining
-		 */
-		stop() {
-			// set fader to be inactive
-			this.active = false;
-
-			// return instance for chaining
-			return this;
-		}
-
-		/**
-		 * Set fade duration.
-		 * (used for future calls to fadeTo)
-		 *
-		 * @param {Number} fadeDuration - fading length in milliseconds
-		 * @throws {TypeError} if fadeDuration is not a number greater than zero
-		 * @return {Object} VolumeFader instance for chaining
-		 */
-		setFadeDuration(fadeDuration) {
-			// if duration is a valid number > 0…
-			if (!Number.isNaN(fadeDuration) && fadeDuration > 0) {
-				// set fade duration
-				this.fadeDuration = fadeDuration;
-
-				// log setting
-				this.logger &&
-					this.logger("Set fade duration to " + String(fadeDuration) + " ms.");
-			} else {
-				// abort and throw an exception
-				throw new TypeError("Positive number expected as fade duration!");
-			}
-
-			// return instance for chaining
-			return this;
-		}
-
-		/**
-		 * Define a new fade and start fading.
-		 *
-		 * @param {Number} targetVolume - level to fade to in the range 0…1
-		 * @param {Function} callback - (optional) function to be called when fade is complete
-		 * @throws {TypeError} if targetVolume is not in the range 0…1
-		 * @return {Object} VolumeFader instance for chaining
-		 */
-		fadeTo(targetVolume, callback) {
-			// validate volume and throw if invalid
-			validateVolumeLevel(targetVolume);
-
-			// define new fade
-			this.fade = {
-				// volume start and end point on internal fading scale
-				volume: {
-					start: this.scale.volumeToInternal(this.media.volume),
-					end: this.scale.volumeToInternal(targetVolume),
-				},
-				// time start and end point
-				time: {
-					start: Date.now(),
-					end: Date.now() + this.fadeDuration,
-				},
-				// optional callback function
-				callback: callback,
-			};
-
-			// start fading
-			this.start();
-
-			// log new fade
-			this.logger && this.logger("New fade started:", this.fade);
-
-			// return instance for chaining
-			return this;
-		}
-
-		// convenience shorthand methods for common fades
-		fadeIn(callback) {
-			this.fadeTo(1, callback);
-		}
-		fadeOut(callback) {
-			this.fadeTo(0, callback);
-		}
-
-		/**
-		 * Internal: Update media volume.
-		 * (calls itself through requestAnimationFrame)
-		 *
-		 * @param {Number} targetVolume - linear level to fade to (0…1)
-		 * @param {Function} callback - (optional) function to be called when fade is complete
-		 */
-		updateVolume() {
-			// fader active and fade available to process?
-			if (this.active && this.fade) {
-				// get current time
-				let now = Date.now();
-
-				// time left for fading?
-				if (now < this.fade.time.end) {
-					// compute current fade progress
-					let progress =
-						(now - this.fade.time.start) /
-						(this.fade.time.end - this.fade.time.start);
-
-					// compute current level on internal scale
-					let level =
-						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
-					this.media.volume = this.scale.internalToVolume(level);
-
-					// schedule next update
-					root.requestAnimationFrame(this.updateVolume.bind(this));
-				} else {
-					// log end of fade
-					this.logger &&
-						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);
-
-					// set fader to be inactive
-					this.active = false;
-
-					// done, call back (if callable)
-					typeof this.fade.callback == "function" && this.fade.callback();
-
-					// clear fade
-					this.fade = undefined;
-				}
-			}
-		}
-
-		/**
-		 * Internal: Exponential scaler with dynamic range limit.
-		 *
-		 * @param {Number} input - logarithmic input level to be expanded (float, 0…1)
-		 * @param {Number} dynamicRange - expanded output range, in multiples of 10 dB (float, 0…∞)
-		 * @return {Number} - expanded level (float, 0…1)
-		 */
-		exponentialScaler(input, dynamicRange) {
-			// special case: make zero (or any falsy input) return zero
-			if (input == 0) {
-				// since the dynamic range is limited,
-				// allow a zero to produce a plain zero instead of a small faction
-				// (audio would not be recognized as silent otherwise)
-				return 0;
-			} else {
-				// scale 0…1 to minus something × 10 dB
-				input = (input - 1) * dynamicRange;
-
-				// compute power of 10
-				return Math.pow(10, input);
-			}
-		}
-
-		/**
-		 * Internal: Logarithmic scaler with dynamic range limit.
-		 *
-		 * @param {Number} input - exponential input level to be compressed (float, 0…1)
-		 * @param {Number} dynamicRange - coerced input range, in multiples of 10 dB (float, 0…∞)
-		 * @return {Number} - compressed level (float, 0…1)
-		 */
-		logarithmicScaler(input, dynamicRange) {
-			// special case: make zero (or any falsy input) return zero
-			if (input == 0) {
-				// logarithm of zero would be -∞, which would map to zero anyway
-				return 0;
-			} else {
-				// compute base-10 logarithm
-				input = Math.log10(input);
-
-				// scale minus something × 10 dB to 0…1 (clipping at 0)
-				return Math.max(1 + input / dynamicRange, 0);
-			}
-		}
-	}
-
-	// export class to root scope
-	root.VolumeFader = VolumeFader;
-})(window);

plugins/crossfade/fader.ts

@@ -0,0 +1,395 @@
+/**
+ * VolumeFader
+ * Sophisticated Media Volume Fading
+ *
+ * Requires browser support for:
+ * - HTMLMediaElement
+ * - requestAnimationFrame()
+ * - ES6
+ *
+ * Does not depend on any third-party library.
+ *
+ * License: MIT
+ *
+ * Nick Schwarzenberg
+ * v0.2.0, 07/2016
+ */
+
+'use strict';
+
+// Internal utility: check if value is a valid volume level and throw if not
+const validateVolumeLevel = (value: number) => {
+  // Number between 0 and 1?
+  if (!Number.isNaN(value) && value >= 0 && value <= 1) {
+    // Yup, that's fine
+
+  } else {
+    // Abort and throw an exception
+    throw new TypeError('Number between 0 and 1 expected as volume!');
+  }
+};
+
+type VolumeLogger = <Params extends unknown[]>(message: string, ...args: Params) => void;
+interface VolumeFaderOptions {
+  /**
+   * logging `function(stuff, …)` for execution information (default: no logging)
+   */
+  logger?: VolumeLogger;
+  /**
+   * either 'linear', 'logarithmic' or a positive number in dB (default: logarithmic)
+   */
+  fadeScaling?: string | number;
+  /**
+   * media volume 0…1 to apply during setup (volume not touched by default)
+   */
+  initialVolume?: number;
+  /**
+   * time in milliseconds to complete a fade (default: 1000 ms)
+   */
+  fadeDuration?: number;
+}
+
+interface VolumeFade {
+  volume: {
+    start: number;
+    end: number;
+  };
+  time: {
+    start: number;
+    end: number;
+  };
+  callback?: () => void;
+}
+
+// Main class
+export class VolumeFader {
+  private readonly media: HTMLMediaElement;
+  private readonly logger: VolumeLogger | false;
+  private scale: {
+    internalToVolume: (level: number) => number;
+    volumeToInternal: (level: number) => number;
+  };
+  private fadeDuration: number = 1000;
+  private active: boolean = false;
+  private fade: VolumeFade | undefined;
+
+
+  /**
+   * VolumeFader Constructor
+   *
+   * @param media {HTMLMediaElement} - audio or video element to be controlled
+   * @param options {Object} - an object with optional settings
+   * @throws {TypeError} if options.initialVolume or options.fadeDuration are invalid
+   *
+   */
+  constructor(media: HTMLMediaElement, options: VolumeFaderOptions) {
+    // Passed media element of correct type?
+    if (media instanceof HTMLMediaElement) {
+      // Save reference to media element
+      this.media = media;
+    } else {
+      // Abort and throw an exception
+      throw new TypeError('Media element expected!');
+    }
+
+    // Make sure options is an object
+    options = options || {};
+
+    // Log function passed?
+    if (typeof options.logger === 'function') {
+      // Set log function to the one specified
+      this.logger = options.logger;
+    } else {
+      // Set log function explicitly to false
+      this.logger = false;
+    }
+
+    // Linear volume fading?
+    if (options.fadeScaling === 'linear') {
+      // Pass levels unchanged
+      this.scale = {
+        internalToVolume: (level: number) => level,
+        volumeToInternal: (level: number) => level,
+      };
+
+      // Log setting
+      this.logger && this.logger('Using linear fading.');
+    }
+    // No linear, but logarithmic fading…
+    else {
+      let dynamicRange: number;
+
+      // Default dynamic range?
+      if (
+        options.fadeScaling === undefined
+        || options.fadeScaling === 'logarithmic'
+      ) {
+        // Set default of 60 dB
+        dynamicRange = 3;
+      }
+      // Custom dynamic range?
+      else if (
+        typeof options.fadeScaling === 'number'
+        && !Number.isNaN(options.fadeScaling)
+        && options.fadeScaling > 0
+      ) {
+        // Turn amplitude dB into a multiple of 10 power dB
+        dynamicRange = options.fadeScaling / 2 / 10;
+      }
+      // Unsupported value
+      else {
+        // Abort and throw exception
+        throw new TypeError(
+          "Expected 'linear', 'logarithmic' or a positive number as fade scaling preference!",
+        );
+      }
+
+      // Use exponential/logarithmic scaler for expansion/compression
+      this.scale = {
+        internalToVolume: (level: number) =>
+          this.exponentialScaler(level, dynamicRange),
+        volumeToInternal: (level: number) =>
+          this.logarithmicScaler(level, dynamicRange),
+      };
+
+      // Log setting if not default
+      options.fadeScaling
+      && this.logger
+      && this.logger(
+        'Using logarithmic fading with '
+        + String(10 * dynamicRange)
+        + ' dB dynamic range.',
+      );
+    }
+
+    // Set initial volume?
+    if (options.initialVolume !== undefined) {
+      // Validate volume level and throw if invalid
+      validateVolumeLevel(options.initialVolume);
+
+      // Set initial volume
+      this.media.volume = options.initialVolume;
+
+      // Log setting
+      this.logger
+      && this.logger(
+        'Set initial volume to ' + String(this.media.volume) + '.',
+      );
+    }
+
+    // Fade duration given?
+    if (options.fadeDuration === undefined) {
+      // Set default fade duration (1000 ms)
+      this.fadeDuration = 1000;
+    } else {
+      // Try to set given fade duration (will log if successful and throw if not)
+      this.setFadeDuration(options.fadeDuration);
+    }
+
+    // Indicate that fader is not active yet
+    this.active = false;
+
+    // Initialization done
+    this.logger && this.logger('Initialized for', this.media);
+  }
+
+  /**
+   * Re(start) the update cycle.
+   * (this.active must be truthy for volume updates to take effect)
+   *
+   * @return {Object} VolumeFader instance for chaining
+   */
+  start() {
+    // Set fader to be active
+    this.active = true;
+
+    // Start by running the update method
+    this.updateVolume();
+
+    // Return instance for chaining
+    return this;
+  }
+
+  /**
+   * Stop the update cycle.
+   * (interrupting any fade)
+   *
+   * @return {Object} VolumeFader instance for chaining
+   */
+  stop() {
+    // Set fader to be inactive
+    this.active = false;
+
+    // Return instance for chaining
+    return this;
+  }
+
+  /**
+   * Set fade duration.
+   * (used for future calls to fadeTo)
+   *
+   * @param {Number} fadeDuration - fading length in milliseconds
+   * @throws {TypeError} if fadeDuration is not a number greater than zero
+   * @return {Object} VolumeFader instance for chaining
+   */
+  setFadeDuration(fadeDuration: number) {
+    // If duration is a valid number > 0…
+    if (!Number.isNaN(fadeDuration) && fadeDuration > 0) {
+      // Set fade duration
+      this.fadeDuration = fadeDuration;
+
+      // Log setting
+      this.logger
+      && this.logger('Set fade duration to ' + String(fadeDuration) + ' ms.');
+    } else {
+      // Abort and throw an exception
+      throw new TypeError('Positive number expected as fade duration!');
+    }
+
+    // Return instance for chaining
+    return this;
+  }
+
+  /**
+   * Define a new fade and start fading.
+   *
+   * @param {Number} targetVolume - level to fade to in the range 0…1
+   * @param {Function} callback - (optional) function to be called when fade is complete
+   * @throws {TypeError} if targetVolume is not in the range 0…1
+   * @return {Object} VolumeFader instance for chaining
+   */
+  fadeTo(targetVolume: number, callback?: () => void) {
+    // Validate volume and throw if invalid
+    validateVolumeLevel(targetVolume);
+
+    // Define new fade
+    this.fade = {
+      // Volume start and end point on internal fading scale
+      volume: {
+        start: this.scale.volumeToInternal(this.media.volume),
+        end: this.scale.volumeToInternal(targetVolume),
+      },
+      // Time start and end point
+      time: {
+        start: Date.now(),
+        end: Date.now() + this.fadeDuration,
+      },
+      // Optional callback function
+      callback,
+    };
+
+    // Start fading
+    this.start();
+
+    // Log new fade
+    this.logger && this.logger('New fade started:', this.fade);
+
+    // Return instance for chaining
+    return this;
+  }
+
+  // Convenience shorthand methods for common fades
+  fadeIn(callback: () => void) {
+    this.fadeTo(1, callback);
+  }
+
+  fadeOut(callback: () => void) {
+    this.fadeTo(0, callback);
+  }
+
+  /**
+   * Internal: Update media volume.
+   * (calls itself through requestAnimationFrame)
+   */
+  updateVolume() {
+    // Fader active and fade available to process?
+    if (this.active && this.fade) {
+      // Get current time
+      const now = Date.now();
+
+      // Time left for fading?
+      if (now < this.fade.time.end) {
+        // Compute current fade progress
+        const progress
+          = (now - this.fade.time.start)
+          / (this.fade.time.end - this.fade.time.start);
+
+        // Compute current level on internal scale
+        const level
+          = (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
+        this.media.volume = this.scale.internalToVolume(level);
+
+        // Schedule next update
+        window.requestAnimationFrame(this.updateVolume.bind(this));
+      } else {
+        // Log end of fade
+        this.logger
+        && 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);
+
+        // Set fader to be inactive
+        this.active = false;
+
+        // Done, call back (if callable)
+        typeof this.fade.callback === 'function' && this.fade.callback();
+
+        // Clear fade
+        this.fade = undefined;
+      }
+    }
+  }
+
+  /**
+   * Internal: Exponential scaler with dynamic range limit.
+   *
+   * @param {Number} input - logarithmic input level to be expanded (float, 0…1)
+   * @param {Number} dynamicRange - expanded output range, in multiples of 10 dB (float, 0…∞)
+   * @return {Number} - expanded level (float, 0…1)
+   */
+  exponentialScaler(input: number, dynamicRange: number) {
+    // Special case: make zero (or any falsy input) return zero
+    if (input === 0) {
+      // Since the dynamic range is limited,
+      // allow a zero to produce a plain zero instead of a small faction
+      // (audio would not be recognized as silent otherwise)
+      return 0;
+    }
+
+    // Scale 0…1 to minus something × 10 dB
+    input = (input - 1) * dynamicRange;
+
+    // Compute power of 10
+    return 10 ** input;
+  }
+
+  /**
+   * Internal: Logarithmic scaler with dynamic range limit.
+   *
+   * @param {Number} input - exponential input level to be compressed (float, 0…1)
+   * @param {Number} dynamicRange - coerced input range, in multiples of 10 dB (float, 0…∞)
+   * @return {Number} - compressed level (float, 0…1)
+   */
+  logarithmicScaler(input: number, dynamicRange: number) {
+    // Special case: make zero (or any falsy input) return zero
+    if (input === 0) {
+      // Logarithm of zero would be -∞, which would map to zero anyway
+      return 0;
+    }
+
+    // Compute base-10 logarithm
+    input = Math.log10(input);
+
+    // Scale minus something × 10 dB to 0…1 (clipping at 0)
+    return Math.max(1 + (input / dynamicRange), 0);
+  }
+}
+
+export default {
+  VolumeFader
+};

plugins/crossfade/front.js

@@ -1,158 +0,0 @@
-const { ipcRenderer } = require("electron");
-const { Howl } = require("howler");
-
-// Extracted from https://github.com/bitfasching/VolumeFader
-require("./fader");
-
-let transitionAudio; // Howler audio used to fade out the current music
-let firstVideo = true;
-let waitForTransition;
-
-const defaultConfig = require("../../config/defaults").plugins.crossfade;
-
-const configProvider = require("./config");
-let config;
-
-const configGetNum = (key) => Number(config[key]) || defaultConfig[key];
-
-const getStreamURL = async (videoID) => {
-	const url = await ipcRenderer.invoke("audio-url", videoID);
-	return url;
-};
-
-const getVideoIDFromURL = (url) => {
-	return new URLSearchParams(url.split("?")?.at(-1)).get("v");
-};
-
-const isReadyToCrossfade = () => {
-	return transitionAudio && transitionAudio.state() === "loaded";
-};
-
-const watchVideoIDChanges = (cb) => {
-	navigation.addEventListener("navigate", (event) => {
-		const currentVideoID = getVideoIDFromURL(
-			event.currentTarget.currentEntry.url,
-		);
-		const nextVideoID = getVideoIDFromURL(event.destination.url);
-
-		if (
-			nextVideoID &&
-			currentVideoID &&
-			(firstVideo || nextVideoID !== currentVideoID)
-		) {
-			if (isReadyToCrossfade()) {
-				crossfade(() => {
-					cb(nextVideoID);
-				});
-			} else {
-				cb(nextVideoID);
-				firstVideo = false;
-			}
-		}
-	});
-};
-
-const createAudioForCrossfade = async (url) => {
-	if (transitionAudio) {
-		transitionAudio.unload();
-	}
-	transitionAudio = new Howl({
-		src: url,
-		html5: true,
-		volume: 0,
-	});
-	await syncVideoWithTransitionAudio();
-};
-
-const syncVideoWithTransitionAudio = async () => {
-	const video = document.querySelector("video");
-
-	const videoFader = new VolumeFader(video, {
-		fadeScaling: configGetNum("fadeScaling"),
-		fadeDuration: configGetNum("fadeInDuration"),
-	});
-
-	await transitionAudio.play();
-	await transitionAudio.seek(video.currentTime);
-
-	video.onseeking = () => {
-		transitionAudio.seek(video.currentTime);
-	};
-	video.onpause = () => {
-		transitionAudio.pause();
-	};
-	video.onplay = async () => {
-		await transitionAudio.play();
-		await transitionAudio.seek(video.currentTime);
-
-		// Fade in
-		const videoVolume = video.volume;
-		video.volume = 0;
-		videoFader.fadeTo(videoVolume);
-	};
-
-	// Exit just before the end for the transition
-	const transitionBeforeEnd = () => {
-		if (
-			video.currentTime >= video.duration - configGetNum("secondsBeforeEnd") &&
-			isReadyToCrossfade()
-		) {
-			video.removeEventListener("timeupdate", transitionBeforeEnd);
-
-			// Go to next video - XXX: does not support "repeat 1" mode
-			document.querySelector(".next-button").click();
-		}
-	};
-	video.ontimeupdate = transitionBeforeEnd;
-};
-
-const onApiLoaded = () => {
-	watchVideoIDChanges(async (videoID) => {
-		await waitForTransition;
-		const url = await getStreamURL(videoID);
-		if (!url) {
-			return;
-		}
-		await createAudioForCrossfade(url);
-	});
-};
-
-const crossfade = async (cb) => {
-	if (!isReadyToCrossfade()) {
-		cb();
-		return;
-	}
-
-	let resolveTransition;
-	waitForTransition = new Promise(function (resolve, reject) {
-		resolveTransition = resolve;
-	});
-
-	const video = document.querySelector("video");
-
-	const fader = new VolumeFader(transitionAudio._sounds[0]._node, {
-		initialVolume: video.volume,
-		fadeScaling: configGetNum("fadeScaling"),
-		fadeDuration: configGetNum("fadeOutDuration"),
-	});
-
-	// Fade out the music
-	video.volume = 0;
-	fader.fadeOut(() => {
-		resolveTransition();
-		cb();
-	});
-};
-
-module.exports = async () => {
-	config = await configProvider.getAll();
-
-	configProvider.subscribeAll((newConfig) => {
-		config = newConfig;
-	});
-
-	document.addEventListener("apiLoaded", onApiLoaded, {
-		once: true,
-		passive: true,
-	});
-};

plugins/crossfade/front.ts

@@ -0,0 +1,164 @@
+/* eslint-disable @typescript-eslint/await-thenable */
+/* renderer */
+
+import { ipcRenderer } from 'electron';
+import { Howl } from 'howler';
+
+// Extracted from https://github.com/bitfasching/VolumeFader
+import { VolumeFader } from './fader';
+
+import configProvider from './config';
+
+import defaultConfigs from '../../config/defaults';
+
+import type { ConfigType } from '../../config/dynamic';
+
+let transitionAudio: Howl; // Howler audio used to fade out the current music
+let firstVideo = true;
+let waitForTransition: Promise<unknown>;
+
+const defaultConfig = defaultConfigs.plugins.crossfade;
+
+let config: ConfigType<'crossfade'>;
+
+const configGetNumber = (key: keyof ConfigType<'crossfade'>): number => Number(config[key]) || (defaultConfig[key] as number);
+
+const getStreamURL = async (videoID: string) => ipcRenderer.invoke('audio-url', videoID) as Promise<string>;
+
+const getVideoIDFromURL = (url: string) => new URLSearchParams(url.split('?')?.at(-1)).get('v');
+
+const isReadyToCrossfade = () => transitionAudio && transitionAudio.state() === 'loaded';
+
+const watchVideoIDChanges = (cb: (id: string) => void) => {
+  window.navigation.addEventListener('navigate', (event) => {
+    const currentVideoID = getVideoIDFromURL(
+      (event.currentTarget as Navigation).currentEntry?.url ?? '',
+    );
+    const nextVideoID = getVideoIDFromURL(event.destination.url ?? '');
+
+    if (
+      nextVideoID
+      && currentVideoID
+      && (firstVideo || nextVideoID !== currentVideoID)
+    ) {
+      if (isReadyToCrossfade()) {
+        crossfade(() => {
+          cb(nextVideoID);
+        });
+      } else {
+        cb(nextVideoID);
+        firstVideo = false;
+      }
+    }
+  });
+};
+
+const createAudioForCrossfade = (url: string) => {
+  if (transitionAudio) {
+    transitionAudio.unload();
+  }
+
+  transitionAudio = new Howl({
+    src: url,
+    html5: true,
+    volume: 0,
+  });
+  syncVideoWithTransitionAudio();
+};
+
+const syncVideoWithTransitionAudio = () => {
+  const video = document.querySelector('video')!;
+
+  const videoFader = new VolumeFader(video, {
+    fadeScaling: configGetNumber('fadeScaling'),
+    fadeDuration: configGetNumber('fadeInDuration'),
+  });
+
+  transitionAudio.play();
+  transitionAudio.seek(video.currentTime);
+
+  video.addEventListener('seeking', () => {
+    transitionAudio.seek(video.currentTime);
+  });
+
+  video.addEventListener('pause', () => {
+    transitionAudio.pause();
+  });
+
+  video.addEventListener('play', () => {
+    transitionAudio.play();
+    transitionAudio.seek(video.currentTime);
+
+    // Fade in
+    const videoVolume = video.volume;
+    video.volume = 0;
+    videoFader.fadeTo(videoVolume);
+  });
+
+  // Exit just before the end for the transition
+  const transitionBeforeEnd = () => {
+    if (
+      video.currentTime >= video.duration - configGetNumber('secondsBeforeEnd')
+      && isReadyToCrossfade()
+    ) {
+      video.removeEventListener('timeupdate', transitionBeforeEnd);
+
+      // Go to next video - XXX: does not support "repeat 1" mode
+      document.querySelector<HTMLButtonElement>('.next-button')?.click();
+    }
+  };
+
+  video.addEventListener('timeupdate', transitionBeforeEnd);
+};
+
+const onApiLoaded = () => {
+  watchVideoIDChanges(async (videoID) => {
+    await waitForTransition;
+    const url = await getStreamURL(videoID);
+    if (!url) {
+      return;
+    }
+
+    await createAudioForCrossfade(url);
+  });
+};
+
+const crossfade = (cb: () => void) => {
+  if (!isReadyToCrossfade()) {
+    cb();
+    return;
+  }
+
+  let resolveTransition: () => void;
+  waitForTransition = new Promise<void>((resolve) => {
+    resolveTransition = resolve;
+  });
+
+  const video = document.querySelector('video')!;
+
+  const fader = new VolumeFader(transitionAudio._sounds[0]._node, {
+    initialVolume: video.volume,
+    fadeScaling: configGetNumber('fadeScaling'),
+    fadeDuration: configGetNumber('fadeOutDuration'),
+  });
+
+  // Fade out the music
+  video.volume = 0;
+  fader.fadeOut(() => {
+    resolveTransition();
+    cb();
+  });
+};
+
+export default async () => {
+  config = await configProvider.getAll();
+
+  configProvider.subscribeAll((newConfig) => {
+    config = newConfig;
+  });
+
+  document.addEventListener('apiLoaded', onApiLoaded, {
+    once: true,
+    passive: true,
+  });
+};

plugins/crossfade/menu.js

@@ -1,72 +0,0 @@
-const config = require("./config");
-const defaultOptions = require("../../config/defaults").plugins.crossfade;
-
-const prompt = require("custom-electron-prompt");
-const promptOptions = require("../../providers/prompt-options");
-
-module.exports = (win) => [
-	{
-		label: "Advanced",
-		click: async () => {
-			const newOptions = await promptCrossfadeValues(win, config.getAll());
-			if (newOptions) config.setAll(newOptions);
-		},
-	},
-];
-
-async function promptCrossfadeValues(win, options) {
-	const res = await prompt(
-		{
-			title: "Crossfade Options",
-			type: "multiInput",
-			multiInputOptions: [
-				{
-					label: "Fade in duration (ms)",
-					value: options.fadeInDuration || defaultOptions.fadeInDuration,
-					inputAttrs: {
-						type: "number",
-						required: true,
-						min: 0,
-						step: 100,
-					},
-				},
-				{
-					label: "Fade out duration (ms)",
-					value: options.fadeOutDuration || defaultOptions.fadeOutDuration,
-					inputAttrs: {
-						type: "number",
-						required: true,
-						min: 0,
-						step: 100,
-					},
-				},
-				{
-					label: "Crossfade x seconds before end",
-					value:
-						options.secondsBeforeEnd || defaultOptions.secondsBeforeEnd,
-					inputAttrs: {
-						type: "number",
-						required: true,
-						min: 0,
-					},
-				},
-				{
-					label: "Fade scaling",
-					selectOptions: { linear: "Linear", logarithmic: "Logarithmic" },
-					value: options.fadeScaling || defaultOptions.fadeScaling,
-				},
-			],
-			resizable: true,
-			height: 360,
-			...promptOptions(),
-		},
-		win,
-	).catch(console.error);
-	if (!res) return undefined;
-	return {
-		fadeInDuration: Number(res[0]),
-		fadeOutDuration: Number(res[1]),
-		secondsBeforeEnd: Number(res[2]),
-		fadeScaling: res[3],
-	};
-}

plugins/crossfade/menu.ts

@@ -0,0 +1,86 @@
+import prompt from 'custom-electron-prompt';
+
+import { BrowserWindow } from 'electron';
+
+import config from './config';
+
+import promptOptions from '../../providers/prompt-options';
+import configOptions from '../../config/defaults';
+
+import { MenuTemplate } from '../../menu';
+
+import type { ConfigType } from '../../config/dynamic';
+
+const defaultOptions = configOptions.plugins.crossfade;
+
+export default (win: BrowserWindow): MenuTemplate => [
+  {
+    label: 'Advanced',
+    async click() {
+      const newOptions = await promptCrossfadeValues(win, config.getAll());
+      if (newOptions) {
+        config.setAll(newOptions);
+      }
+    },
+  },
+];
+
+async function promptCrossfadeValues(win: BrowserWindow, options: ConfigType<'crossfade'>): Promise<Partial<ConfigType<'crossfade'>> | undefined> {
+  const res = await prompt(
+    {
+      title: 'Crossfade Options',
+      type: 'multiInput',
+      multiInputOptions: [
+        {
+          label: 'Fade in duration (ms)',
+          value: options.fadeInDuration || defaultOptions.fadeInDuration,
+          inputAttrs: {
+            type: 'number',
+            required: true,
+            min: '0',
+            step: '100',
+          },
+        },
+        {
+          label: 'Fade out duration (ms)',
+          value: options.fadeOutDuration || defaultOptions.fadeOutDuration,
+          inputAttrs: {
+            type: 'number',
+            required: true,
+            min: '0',
+            step: '100',
+          },
+        },
+        {
+          label: 'Crossfade x seconds before end',
+          value:
+            options.secondsBeforeEnd || defaultOptions.secondsBeforeEnd,
+          inputAttrs: {
+            type: 'number',
+            required: true,
+            min: '0',
+          },
+        },
+        {
+          label: 'Fade scaling',
+          selectOptions: { linear: 'Linear', logarithmic: 'Logarithmic' },
+          value: options.fadeScaling || defaultOptions.fadeScaling,
+        },
+      ],
+      resizable: true,
+      height: 360,
+      ...promptOptions(),
+    },
+    win,
+  ).catch(console.error);
+  if (!res) {
+    return undefined;
+  }
+
+  return {
+    fadeInDuration: Number(res[0]),
+    fadeOutDuration: Number(res[1]),
+    secondsBeforeEnd: Number(res[2]),
+    fadeScaling: res[3],
+  };
+}

plugins/disable-autoplay/front.js

@@ -1,14 +0,0 @@
-module.exports = () => {
-	document.addEventListener('apiLoaded', apiEvent => {
-		apiEvent.detail.addEventListener('videodatachange', name => {
-			if (name === 'dataloaded') {
-				apiEvent.detail.pauseVideo();
-				document.querySelector('video').ontimeupdate = e => {
-					e.target.pause();
-				}
-			} else {
-				document.querySelector('video').ontimeupdate = null;
-		   }
-		})
-	}, { once: true, passive: true })
-};

plugins/disable-autoplay/front.ts

@@ -0,0 +1,23 @@
+import type { ConfigType } from '../../config/dynamic';
+
+export default (options: ConfigType<'disable-autoplay'>) => {
+  const timeUpdateListener = (e: Event) => {
+    if (e.target instanceof HTMLVideoElement) {
+      e.target.pause();
+    }
+  };
+
+  document.addEventListener('apiLoaded', (apiEvent) => {
+    const eventListener = (name: string) => {
+      if (options.applyOnce) {
+        apiEvent.detail.removeEventListener('videodatachange', eventListener);
+      }
+
+      if (name === 'dataloaded') {
+        apiEvent.detail.pauseVideo();
+        document.querySelector<HTMLVideoElement>('video')?.addEventListener('timeupdate', timeUpdateListener, { once: true });
+      }
+    };
+    apiEvent.detail.addEventListener('videodatachange', eventListener);
+  }, { once: true, passive: true });
+};

plugins/disable-autoplay/menu.ts

@@ -0,0 +1,20 @@
+import { BrowserWindow } from 'electron';
+
+import { setMenuOptions } from '../../config/plugins';
+
+import { MenuTemplate } from '../../menu';
+
+import type { ConfigType } from '../../config/dynamic';
+
+export default (_: BrowserWindow, options: ConfigType<'disable-autoplay'>): MenuTemplate => [
+  {
+    label: 'Applies only on startup',
+    type: 'checkbox',
+    checked: options.applyOnce,
+    click() {
+      setMenuOptions('disable-autoplay', {
+        applyOnce: !options.applyOnce,
+      });
+    }
+  }
+];

plugins/discord/back.js

@@ -1,171 +0,0 @@
-"use strict";
-const Discord = require("@xhayper/discord-rpc");
-const { dev } = require("electron-is");
-const { dialog, app } = require("electron");
-
-const registerCallback = require("../../providers/song-info");
-
-// Application ID registered by @Zo-Bro-23
-const clientId = "1043858434585526382";
-
-/**
- * @typedef {Object} Info
- * @property {import('@xhayper/discord-rpc').Client} rpc
- * @property {boolean} ready
- * @property {boolean} autoReconnect
- * @property {import('../../providers/song-info').SongInfo} lastSongInfo
- */
-/**
- * @type {Info}
- */
-const info = {
-	rpc: new Discord.Client({
-		clientId
-	}),
-	ready: false,
-	autoReconnect: true,
-	lastSongInfo: null,
-};
-
-/**
- * @type {(() => void)[]}
- */
-const refreshCallbacks = [];
-
-const resetInfo = () => {
-	info.ready = false;
-	clearTimeout(clearActivity);
-	if (dev()) console.log("discord disconnected");
-	refreshCallbacks.forEach(cb => cb());
-};
-
-info.rpc.on("connected", () => {
-	if (dev()) console.log("discord connected");
-	refreshCallbacks.forEach(cb => cb());
-});
-
-info.rpc.on("ready", () => {
-	info.ready = true;
-	if (info.lastSongInfo) updateActivity(info.lastSongInfo)
-});
-
-info.rpc.on("disconnected", () => {
-	resetInfo();
-
-	if (info.autoReconnect) {
-		connectTimeout();
-	}
-});
-
-const connectTimeout = () => new Promise((resolve, reject) => setTimeout(() => {
-	if (!info.autoReconnect || info.rpc.isConnected) return;
-	info.rpc.login().then(resolve).catch(reject);
-}, 5000));
-
-const connectRecursive = () => {
-	if (!info.autoReconnect || info.rpc.isConnected) return;
-	connectTimeout().catch(connectRecursive);
-}
-
-let window;
-const connect = (showErr = false) => {
-	if (info.rpc.isConnected) {
-		if (dev())
-			console.log('Attempted to connect with active connection');
-		return;
-	}
-
-	info.ready = false;
-
-	// Startup the rpc client
-	info.rpc.login({ clientId }).catch(err => {
-		resetInfo();
-		if (dev()) console.error(err);
-		if (info.autoReconnect) {
-			connectRecursive();
-		}
-		else if (showErr) dialog.showMessageBox(window, { title: 'Connection failed', message: err.message || String(err), type: 'error' });
-	});
-};
-
-let clearActivity;
-/**
- * @type {import('../../providers/song-info').songInfoCallback}
- */
-let updateActivity;
-
-module.exports = (win, { autoReconnect, activityTimoutEnabled, activityTimoutTime, listenAlong, hideDurationLeft }) => {
-	info.autoReconnect = autoReconnect;
-
-	window = win;
-	// We get multiple events
-	// Next song: PAUSE(n), PAUSE(n+1), PLAY(n+1)
-	// Skip time: PAUSE(N), PLAY(N)
-	updateActivity = songInfo => {
-		if (songInfo.title.length === 0 && songInfo.artist.length === 0) {
-			return;
-		}
-		info.lastSongInfo = songInfo;
-
-		// stop the clear activity timout
-		clearTimeout(clearActivity);
-
-		// stop early if discord connection is not ready
-		// do this after clearTimeout to avoid unexpected clears
-		if (!info.rpc || !info.ready) {
-			return;
-		}
-
-		// clear directly if timeout is 0
-		if (songInfo.isPaused && activityTimoutEnabled && activityTimoutTime === 0) {
-			info.rpc.user?.clearActivity().catch(console.error);
-			return;
-		}
-
-		// Song information changed, so lets update the rich presence
-		// @see https://discord.com/developers/docs/topics/gateway#activity-object
-		// not all options are transfered through https://github.com/discordjs/RPC/blob/6f83d8d812c87cb7ae22064acd132600407d7d05/src/client.js#L518-530
-		const activityInfo = {
-			details: songInfo.title,
-			state: songInfo.artist,
-			largeImageKey: songInfo.imageSrc,
-			largeImageText: songInfo.album,
-				buttons: listenAlong ? [
-				{ label: "Listen Along", url: songInfo.url },
-			] : undefined,
-		};
-
-		if (songInfo.isPaused) {
-			// Add a paused icon to show that the song is paused
-			activityInfo.smallImageKey = "paused";
-			activityInfo.smallImageText = "Paused";
-			// Set start the timer so the activity gets cleared after a while if enabled
-			if (activityTimoutEnabled)
-				clearActivity = setTimeout(() => info.rpc.user?.clearActivity().catch(console.error), activityTimoutTime ?? 10000);
-		} else if (!hideDurationLeft) {
-			// Add the start and end time of the song
-			const songStartTime = Date.now() - songInfo.elapsedSeconds * 1000;
-			activityInfo.startTimestamp = songStartTime;
-			activityInfo.endTimestamp =
-				songStartTime + songInfo.songDuration * 1000;
-		}
-
-		info.rpc.user?.setActivity(activityInfo).catch(console.error);
-	};
-
-	// If the page is ready, register the callback
-	win.once("ready-to-show", () => {
-		registerCallback(updateActivity);
-		connect();
-	});
-	app.on('window-all-closed', module.exports.clear)
-};
-
-module.exports.clear = () => {
-	if (info.rpc) info.rpc.user?.clearActivity();
-	clearTimeout(clearActivity);
-};
-
-module.exports.connect = connect;
-module.exports.registerRefresh = (cb) => refreshCallbacks.push(cb);
-module.exports.isConnected = () => info.rpc !== null;

plugins/discord/back.ts

@@ -0,0 +1,206 @@
+import { app, dialog } from 'electron';
+import { Client as DiscordClient } from '@xhayper/discord-rpc';
+import { dev } from 'electron-is';
+
+import { SetActivity } from '@xhayper/discord-rpc/dist/structures/ClientUser';
+
+import registerCallback from '../../providers/song-info';
+
+import type { ConfigType } from '../../config/dynamic';
+
+// Application ID registered by @Zo-Bro-23
+const clientId = '1043858434585526382';
+
+export interface Info {
+  rpc: DiscordClient;
+  ready: boolean;
+  autoReconnect: boolean;
+  lastSongInfo?: import('../../providers/song-info').SongInfo;
+}
+
+const info: Info = {
+  rpc: new DiscordClient({
+    clientId,
+  }),
+  ready: false,
+  autoReconnect: true,
+  lastSongInfo: undefined,
+};
+
+/**
+ * @type {(() => void)[]}
+ */
+const refreshCallbacks: (() => void)[] = [];
+
+const resetInfo = () => {
+  info.ready = false;
+  clearTimeout(clearActivity);
+  if (dev()) {
+    console.log('discord disconnected');
+  }
+
+  for (const cb of refreshCallbacks) {
+    cb();
+  }
+};
+
+info.rpc.on('connected', () => {
+  if (dev()) {
+    console.log('discord connected');
+  }
+
+  for (const cb of refreshCallbacks) {
+    cb();
+  }
+});
+
+info.rpc.on('ready', () => {
+  info.ready = true;
+  if (info.lastSongInfo) {
+    updateActivity(info.lastSongInfo);
+  }
+});
+
+info.rpc.on('disconnected', () => {
+  resetInfo();
+
+  if (info.autoReconnect) {
+    connectTimeout();
+  }
+});
+
+const connectTimeout = () => new Promise((resolve, reject) => setTimeout(() => {
+  if (!info.autoReconnect || info.rpc.isConnected) {
+    return;
+  }
+
+  info.rpc.login().then(resolve).catch(reject);
+}, 5000));
+
+const connectRecursive = () => {
+  if (!info.autoReconnect || info.rpc.isConnected) {
+    return;
+  }
+
+  connectTimeout().catch(connectRecursive);
+};
+
+let window: Electron.BrowserWindow;
+export const connect = (showError = false) => {
+  if (info.rpc.isConnected) {
+    if (dev()) {
+      console.log('Attempted to connect with active connection');
+    }
+
+    return;
+  }
+
+  info.ready = false;
+
+  // Startup the rpc client
+  info.rpc.login().catch((error: Error) => {
+    resetInfo();
+    if (dev()) {
+      console.error(error);
+    }
+
+    if (info.autoReconnect) {
+      connectRecursive();
+    } else if (showError) {
+      dialog.showMessageBox(window, {
+        title: 'Connection failed',
+        message: error.message || String(error),
+        type: 'error',
+      });
+    }
+  });
+};
+
+let clearActivity: NodeJS.Timeout | undefined;
+let updateActivity: import('../../providers/song-info').SongInfoCallback;
+
+type DiscordOptions = ConfigType<'discord'>;
+
+export default (
+  win: Electron.BrowserWindow,
+  options: DiscordOptions,
+) => {
+  info.autoReconnect = options.autoReconnect;
+
+  window = win;
+  // We get multiple events
+  // Next song: PAUSE(n), PAUSE(n+1), PLAY(n+1)
+  // Skip time: PAUSE(N), PLAY(N)
+  updateActivity = (songInfo) => {
+    if (songInfo.title.length === 0 && songInfo.artist.length === 0) {
+      return;
+    }
+
+    info.lastSongInfo = songInfo;
+
+    // Stop the clear activity timout
+    clearTimeout(clearActivity);
+
+    // Stop early if discord connection is not ready
+    // do this after clearTimeout to avoid unexpected clears
+    if (!info.rpc || !info.ready) {
+      return;
+    }
+
+    // Clear directly if timeout is 0
+    if (songInfo.isPaused && options.activityTimoutEnabled && options.activityTimoutTime === 0) {
+      info.rpc.user?.clearActivity().catch(console.error);
+      return;
+    }
+
+    // Song information changed, so lets update the rich presence
+    // @see https://discord.com/developers/docs/topics/gateway#activity-object
+    // not all options are transfered through https://github.com/discordjs/RPC/blob/6f83d8d812c87cb7ae22064acd132600407d7d05/src/client.js#L518-530
+    const activityInfo: SetActivity = {
+      details: songInfo.title,
+      state: songInfo.artist,
+      largeImageKey: songInfo.imageSrc ?? '',
+      largeImageText: songInfo.album ?? '',
+      buttons: [
+        ...(options.listenAlong ? [{ label: 'Listen Along', url: songInfo.url ?? '' }] : []),
+        { label: 'View App On GitHub', url: 'https://github.com/th-ch/youtube-music' },
+      ],
+    };
+
+    if (songInfo.isPaused) {
+      // Add a paused icon to show that the song is paused
+      activityInfo.smallImageKey = 'paused';
+      activityInfo.smallImageText = 'Paused';
+      // Set start the timer so the activity gets cleared after a while if enabled
+      if (options.activityTimoutEnabled) {
+        clearActivity = setTimeout(() => info.rpc.user?.clearActivity().catch(console.error), options.activityTimoutTime ?? 10_000);
+      }
+    } else if (!options.hideDurationLeft) {
+      // Add the start and end time of the song
+      const songStartTime = Date.now() - ((songInfo.elapsedSeconds ?? 0) * 1000);
+      activityInfo.startTimestamp = songStartTime;
+      activityInfo.endTimestamp
+        = songStartTime + (songInfo.songDuration * 1000);
+    }
+
+    info.rpc.user?.setActivity(activityInfo).catch(console.error);
+  };
+
+  // If the page is ready, register the callback
+  win.once('ready-to-show', () => {
+    registerCallback(updateActivity);
+    connect();
+  });
+  app.on('window-all-closed', clear);
+};
+
+export const clear = () => {
+  if (info.rpc) {
+    info.rpc.user?.clearActivity();
+  }
+
+  clearTimeout(clearActivity);
+};
+
+export const registerRefresh = (cb: () => void) => refreshCallbacks.push(cb);
+export const isConnected = () => info.rpc !== null;

plugins/discord/menu.js

@@ -1,84 +0,0 @@
-const prompt = require("custom-electron-prompt");
-
-const { setMenuOptions } = require("../../config/plugins");
-const promptOptions = require("../../providers/prompt-options");
-const { clear, connect, registerRefresh, isConnected } = require("./back");
-
-const { singleton } = require("../../providers/decorators")
-
-const registerRefreshOnce = singleton((refreshMenu) => {
-	registerRefresh(refreshMenu);
-});
-
-module.exports = (win, options, refreshMenu) => {
-	registerRefreshOnce(refreshMenu);
-
-	return [
-		{
-			label: isConnected() ? "Connected" : "Reconnect",
-			enabled: !isConnected(),
-			click: connect,
-		},
-		{
-			label: "Auto reconnect",
-			type: "checkbox",
-			checked: options.autoReconnect,
-			click: (item) => {
-				options.autoReconnect = item.checked;
-				setMenuOptions('discord', options);
-			},
-		},
-		{
-			label: "Clear activity",
-			click: clear,
-		},
-		{
-			label: "Clear activity after timeout",
-			type: "checkbox",
-			checked: options.activityTimoutEnabled,
-			click: (item) => {
-				options.activityTimoutEnabled = item.checked;
-				setMenuOptions('discord', options);
-			},
-		},
-		{
-			label: "Listen Along",
-			type: "checkbox",
-			checked: options.listenAlong,
-			click: (item) => {
-				options.listenAlong = item.checked;
-				setMenuOptions('discord', options);
-			},
-		},
-		{
-			label: "Hide duration left",
-			type: "checkbox",
-			checked: options.hideDurationLeft,
-			click: (item) => {
-				options.hideDurationLeft = item.checked;
-				setMenuOptions('discord', options);
-			}
-		},
-		{
-			label: "Set inactivity timeout",
-			click: () => setInactivityTimeout(win, options),
-		},
-	];
-};
-
-async function setInactivityTimeout(win, options) {
-	let output = await prompt({
-		title: 'Set Inactivity Timeout',
-		label: 'Enter inactivity timeout in seconds:',
-		value: Math.round((options.activityTimoutTime ?? 0) / 1e3),
-		type: "counter",
-		counterOptions: { minimum: 0, multiFire: true },
-		width: 450,
-		...promptOptions()
-	}, win)
-
-	if (output) {
-		options.activityTimoutTime = Math.round(output * 1e3);
-		setMenuOptions("discord", options);
-	}
-}