release 3.3.1 (HOTFIX)

fix #1199

.eslintignore

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

.eslintrc.js

@@ -7,7 +7,7 @@ module.exports = {
     'plugin:@typescript-eslint/recommended',
     'plugin:@typescript-eslint/recommended-requiring-type-checking',
   ],
-  plugins: ['@typescript-eslint', 'import'],
+  plugins: ['prettier', '@typescript-eslint', 'import'],
   parser: '@typescript-eslint/parser',
   parserOptions: {
     project: './tsconfig.json',
@@ -26,6 +26,7 @@ module.exports = {
     'import/newline-after-import': 'error',
     'import/no-default-export': 'off',
     'import/no-duplicates': 'error',
+    'import/no-unresolved': ['error', { ignore: ['^virtual:', '\\?inline$', '\\?raw$', '\\?asset&asarUnpack'] }],
     'import/order': [
       'error',
       {
@@ -66,4 +67,14 @@ module.exports = {
     es6: true,
   },
   ignorePatterns: ['dist', 'node_modules'],
+  root: true,
+  settings: {
+    'import/parsers': {
+      '@typescript-eslint/parser': ['.ts']
+    },
+    'import/resolver': {
+      typescript: {},
+      exports: {},
+    },
+  },
 };

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -12,16 +12,24 @@ body:
         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
+      - label: I understand that **th-ch/youtube-music has NO affiliation with Google or YouTube**
+        required: true
 - type: input
   attributes:
     label: YouTube Music (Application) Version
     description: |
-      What version of YouTube Music Application are you using?
+      What version of the 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: checkboxes
+  attributes:
+    label: Checklists
+    options:
+      - label: I use the portable version of the YouTube Music Application.
+      - label: I can reproduce this issue in the [official YTM web version](https://music.youtube.com).
 - type: dropdown
   attributes:
     label: What operating system are you using?
@@ -36,13 +44,13 @@ body:
 - 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.
+    description: What operating system version are you using? On Windows, click the 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?
+    label: What CPU architecture are you using?
     options:
       - x64
       - ia32
@@ -55,10 +63,17 @@ body:
     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: Reproduction steps
+    description: Provide steps to reproduce the issue.
+    placeholder: 1. Enable the X plugin.
+  validations:
+    required: true
 - type: textarea
   attributes:
     label: Expected Behavior
-    description: A clear and concise description of what you expected to happen. (Add a replication step if applicable)
+    description: A clear and concise description of what you expected to happen.
   validations:
     required: true
 - type: textarea
@@ -67,6 +82,13 @@ body:
     description: A clear description of what actually happens.
   validations:
     required: true
+- type: textarea
+  attributes:
+    label: Enabled plugins
+    description: Provide the list of plugins you enabled.
+    placeholder: 1. Album Color Theme
+  validations:
+    required: true
 - type: textarea
   attributes:
     label: Additional Information

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -15,7 +15,7 @@ body:
 - 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.
+    description: A clear and concise description of the problem you are seeking to solve with this feature request.
   validations:
     required: true
 - type: textarea
@@ -33,6 +33,6 @@ body:
 - type: textarea
   attributes:
     label: Additional Information
-    description: Add any other context about the problem here.
+    description: Any other context about the problem.
   validations:
     required: false

.github/workflows/build.yml

@@ -20,59 +20,63 @@ jobs:
     steps:
       - uses: actions/checkout@v4
 
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8
+          run_install: false
+
       - name: Setup NodeJS
-        uses: actions/setup-node@v3
+        if: startsWith(matrix.os, 'macOS') != true
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache: 'pnpm'
+
+      - name: Setup NodeJS for macOS
+        if: startsWith(matrix.os, 'macOS')
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ env.NODE_VERSION }}
-          cache: 'npm'
 
       - name: Install dependencies
-        run: npm ci
+        run: pnpm install --frozen-lockfile
+
+      # Only vite build without release if it is a fork, or it is a pull-request
+      - name: Vite Build
+        if: github.repository == 'th-ch/youtube-music' && github.event_name == 'pull_request'
+        run: |
+          pnpm build
+
+      # Build and release if it's the main repository and is not pull-request
+      - name: Build and release on Mac
+        if: startsWith(matrix.os, 'macOS') && (github.repository == 'th-ch/youtube-music' && github.event_name != 'pull_request')
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          pnpm release:mac
+
+      - name: Build and release on Linux
+        if: startsWith(matrix.os, 'ubuntu') && (github.repository == 'th-ch/youtube-music' && github.event_name != 'pull_request')
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          pnpm release:linux
+
+      - name: Build and release on Windows
+        if: startsWith(matrix.os, 'windows') && (github.repository == 'th-ch/youtube-music' && github.event_name != 'pull_request')
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          pnpm release:win
 
       - name: Test
-        uses: GabrielBB/xvfb-action@v1
+        uses: coactions/setup-xvfb@v1
         env:
           PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: 1
         with:
-          run: npm run test
+          run: pnpm test:debug
 
-      # 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.GITHUB_TOKEN }}
-        run: |
-          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.GITHUB_TOKEN }}
-        run: |
-          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.GITHUB_TOKEN }}
-        run: |
-          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: |
-          npm run build:mac
-
-      - name: Build on Linux
-        if: startsWith(matrix.os, 'ubuntu') && github.repository != 'th-ch/youtube-music'
-        run: |
-          npm run build:linux
-
-      - name: Build on Windows
-        if: startsWith(matrix.os, 'windows') && github.repository != 'th-ch/youtube-music'
-        run: |
-          npm run build:win
 
   release:
     runs-on: ubuntu-latest
@@ -84,14 +88,27 @@ jobs:
         with:
           fetch-depth: 0
 
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8
+          run_install: false
+
       - name: Setup NodeJS
-        uses: actions/setup-node@v3
+        if: startsWith(matrix.os, 'macOS') != true
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache: 'pnpm'
+
+      - name: Setup NodeJS for macOS
+        if: startsWith(matrix.os, 'macOS')
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ env.NODE_VERSION }}
-          cache: 'npm'
 
       - name: Install dependencies
-        run: npm ci
+        run: pnpm install --frozen-lockfile
 
       - name: Get version
         run: |
@@ -129,10 +146,12 @@ jobs:
 
             Thanks to all contributors! 🏅
 
+            (Note for Windows: `YouTube-Music-Web-Setup-${{ env.VERSION_TAG }}.exe` is an installer, and `YouTube-Music-${{ env.VERSION_TAG }}.exe` is a portable version)
+
       - name: Update changelog
         if: ${{ env.VERSION_HASH == '' }}
         run: |
-          npm run changelog
+          pnpm changelog
 
       - name: Commit changelog
         if: ${{ env.VERSION_HASH == '' }}

.github/workflows/dependency-review.yml

@@ -17,4 +17,4 @@ jobs:
       - name: "Checkout Repository"
         uses: actions/checkout@v4
       - name: "Dependency Review"
-        uses: actions/dependency-review-action@v3
+        uses: actions/dependency-review-action@v4

.github/workflows/winget-submission.yml

@@ -15,12 +15,16 @@ jobs:
     name: Publish winget package
     runs-on: ubuntu-latest
     steps:
+      - name: Set winget version env
+        env:
+          TAG_NAME: ${{ inputs.tag_name || github.event.release.tag_name }}
+        run: echo "WINGET_TAG_NAME=$(echo ${TAG_NAME#v})" >> $GITHUB_ENV
       - name: Submit package to Windows Package Manager Community Repository
         uses: vedantmgoyal2009/winget-releaser@v2
         with:
           identifier: th-ch.YouTubeMusic
           installers-regex: '^YouTube-Music-Web-Setup-[\d\.]+\.exe$'
-          version: ${{ inputs.tag_name || github.event.release.tag_name }}
+          version: ${{ env.WINGET_TAG_NAME }}
           release-tag: ${{ inputs.tag_name || github.event.release.tag_name }}
           token: ${{ secrets.WINGET_ACC_TOKEN }}
           fork-user: youtube-music-winget

.gitignore

@@ -12,3 +12,4 @@ electron-builder.yml
 !.yarn/releases
 !.yarn/sdks
 !.yarn/versions
+.vite-inspect

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "tabWidth": 2,
+  "useTabs": false,
+  "singleQuote": true
+}

README.md

@@ -6,26 +6,44 @@
 [![GitHub license](https://img.shields.io/github/license/th-ch/youtube-music.svg?style=for-the-badge)](https://github.com/th-ch/youtube-music/blob/master/LICENSE)
 [![eslint code style](https://img.shields.io/badge/code_style-eslint-5ed9c7.svg?style=for-the-badge)](https://github.com/th-ch/youtube-music/blob/master/.eslintrc.js)
 [![Build status](https://img.shields.io/github/actions/workflow/status/th-ch/youtube-music/build.yml?branch=master&style=for-the-badge&logo=youtube-music)](https://GitHub.com/th-ch/youtube-music/releases/)
-[![Known Vulnerabilities](https://img.shields.io/snyk/vulnerabilities/github/th-ch/youtube-music?style=for-the-badge)](https://snyk.io/test/github/th-ch/youtube-music)
 [![GitHub All Releases](https://img.shields.io/github/downloads/th-ch/youtube-music/total?style=for-the-badge&logo=youtube-music)](https://GitHub.com/th-ch/youtube-music/releases/)
 [![AUR](https://img.shields.io/aur/version/youtube-music-bin?color=blueviolet&style=for-the-badge&logo=youtube-music)](https://aur.archlinux.org/packages/youtube-music-bin)
+[![Known Vulnerabilities](https://snyk.io/test/github/th-ch/youtube-music/badge.svg)](https://snyk.io/test/github/th-ch/youtube-music)
 
 </div>
 
 ![Screenshot](web/screenshot.jpg "Screenshot")
 
+
 <div align="center">
 	<a href="https://github.com/th-ch/youtube-music/releases/latest">
-		<img src="web/youtube-music.svg" width="400" height="100">
+		<img src="web/youtube-music.svg" width="400" height="100" alt="YouTube Music SVG">
 	</a>
 </div>
 
+Read this in other languages: [🇰🇷](./docs/readme/README-ko.md)
+
 **Electron wrapper around YouTube Music featuring:**
 
 - Native look & feel, aims at keeping the original interface
 - Framework for custom plugins: change YouTube Music to your needs (style, content, features), enable/disable plugins in
   one click
 
+## Demo Image
+
+|                          Player Screen (album color theme & ambient light)                                |
+|:---------------------------------------------------------------------------------------------------------:|
+|![Screenshot1](https://github.com/th-ch/youtube-music/assets/16558115/53efdf73-b8fa-4d7b-a235-b96b91ea77fc)|
+
+## Translation
+
+You can help with translation on [Hosted Weblate](https://hosted.weblate.org/projects/youtube-music/).
+
+<a href="https://hosted.weblate.org/engage/youtube-music/">
+  <img src="https://hosted.weblate.org/widget/youtube-music/i18n/multi-auto.svg" alt="translation status" />
+  <img src="https://hosted.weblate.org/widget/youtube-music/i18n/287x66-black.png" alt="translation status 2" />
+</a>
+
 ## Download
 
 You can check out the [latest release](https://github.com/th-ch/youtube-music/releases/latest) to quickly find the
@@ -38,7 +56,13 @@ this [wiki page](https://wiki.archlinux.org/index.php/Arch_User_Repository#Insta
 
 ### MacOS
 
-If you get an error "is damaged and can’t be opened." when launching the app, run the following in the Terminal:
+You can install the app using Homebrew (see the [cask definition](https://github.com/th-ch/homebrew-youtube-music)):
+
+```bash
+brew install th-ch/youtube-music/youtube-music
+```
+
+If you install the app manually and get an error "is damaged and can’t be opened." when launching the app, run the following in the Terminal:
 
 ```bash
 xattr -cr /Applications/YouTube\ Music.app
@@ -75,26 +99,40 @@ winget install th-ch.YouTubeMusic
 - Place them in the **same directory**.
 - Run the installer.
 
+## Features:
+
+- **Auto confirm when paused** (Always Enabled): disable
+  the ["Continue Watching?"](https://user-images.githubusercontent.com/61631665/129977894-01c60740-7ec6-4bf0-9a2c-25da24491b0e.png)
+  popup that pause music after a certain time
+
+ - And more ...
+
 ## Available plugins:
 
 - **Ad Blocker**: Block all ads and tracking out of the box
+  
+- **Album Actions**: Adds Undislike, Dislike, Like, and Unlike buttons to apply this to all songs in a playlist or album
+
+- **Album Color Theme**: Applies a dynamic theme and visual effects based on the album color palette
+
+- **Ambient Mode**: Applies a lighting effect by casting gentle colors from the video, into your screen’s background
 
 - **Audio Compressor**: Apply compression to audio (lowers the volume of the loudest parts of the signal and raises the
   volume of the softest parts)
 
-- **Blur Nav Bar**: makes navigation bar transparent and blurry
+- **Blur Navigation Bar**: makes navigation bar transparent and blurry
 
-- **Bypass age restrictions**: bypass YouTube's age verification
+- **Bypass Age Restrictions**: bypass YouTube's age verification
 
-- **Captions selector**: Enable captions
+- **Captions Selector**: Enable captions
 
-- **Compact sidebar**: Always set the sidebar in compact mode
+- **Compact Sidebar**: Always set the sidebar in compact mode
 
 - **Crossfade**: Crossfade between songs
 
 - **Disable Autoplay**: Makes every song start in "paused" mode
 
-- [**Discord**](https://discord.com/): Show your friends what you listen to
+- **[Discord](https://discord.com/) Rich Presence**: Show your friends what you listen to
   with [Rich Presence](https://user-images.githubusercontent.com/28219076/104362104-a7a0b980-5513-11eb-9744-bb89eabe0016.png)
 
 - **Downloader**: downloads
@@ -102,17 +140,21 @@ winget install th-ch.YouTubeMusic
 
 - **Exponential Volume**: Makes the volume
   slider [exponential](https://greasyfork.org/en/scripts/397686-youtube-music-fix-volume-ratio/) so it's easier to
-  select lower volumes.
+  select lower volumes
 
 - **In-App Menu**: [gives bars a fancy, dark look](https://user-images.githubusercontent.com/78568641/112215894-923dbf00-8c29-11eb-95c3-3ce15db27eca.png)
 
   > (see [this post](https://github.com/th-ch/youtube-music/issues/410#issuecomment-952060709) if you have problem
   accessing the menu after enabling this plugin and hide-menu option)
 
-- [**Last.fm**](https://www.last.fm/): Scrobbles support
+- **Scrobbler**: Adds scrobbling support for [Last.fm](https://www.last.fm/) and [ListenBrainz](https://listenbrainz.org/)
+
+- **Lumia Stream**: Adds [Lumia Stream](https://lumiastream.com/) support
 
 - **Lyrics Genius**: Adds lyrics support for most songs
 
+- **Music Together**: Share a playlist with others. When the host plays a song, everyone else will hear the same song
+
 - **Navigation**: Next/Back navigation arrows directly integrated in the interface, like in your favorite browser
 
 - **No Google Login**: Remove Google login buttons and links from the interface
@@ -121,7 +163,7 @@ winget install th-ch.YouTubeMusic
   playing ([interactive notifications](https://user-images.githubusercontent.com/78568641/114102651-63ce0e00-98d0-11eb-9dfe-c5a02bb54f9c.png)
   are available on windows)
 
-- **Picture in picture**: allows to switch the app to picture-in-picture mode
+- **Picture-in-picture**: allows to switch the app to picture-in-picture mode
 
 - **Playback Speed**: Listen fast, listen
   slow! [Adds a slider that controls song speed](https://user-images.githubusercontent.com/61631665/129976003-e55db5ba-bf42-448c-a059-26a009775e68.png)
@@ -129,17 +171,15 @@ winget install th-ch.YouTubeMusic
 - **Precise Volume**: Control the volume precisely using mousewheel/hotkeys, with a custom hud and customizable volume
   steps
 
-- **Quality Changer**: Allows changing the video quality with
+- **Shortcuts (& MPRIS)**: Allows setting global hotkeys for playback (play/pause/next/previous) +
-  a [button](https://user-images.githubusercontent.com/78568641/138574366-70324a5e-2d64-4f6a-acdd-dc2a2b9cecc5.png) on
-  the video overlay
-
-- **Shortcuts**: Allows setting global hotkeys for playback (play/pause/next/previous) +
   disable [media osd](https://user-images.githubusercontent.com/84923831/128601225-afa38c1f-dea8-4209-9f72-0f84c1dd8b54.png)
   by overriding media keys + enable Ctrl/CMD + F to search + enable linux mpris support for
   mediakeys + [custom hotkeys](https://github.com/Araxeus/youtube-music/blob/1e591d6a3df98449bcda6e63baab249b28026148/providers/song-controls.js#L13-L50)
   for [advanced users](https://github.com/th-ch/youtube-music/issues/106#issuecomment-952156902)
 
-- **Skip-Silences** - Automatically skip silenced sections
+- **Skip Disliked Song**: Skips disliked songs
+
+- **Skip Silences**: Automatically skip silenced sections
 
 - [**SponsorBlock**](https://github.com/ajayyy/SponsorBlock): Automatically Skips non-music parts like intro/outro or
   parts of music videos where the song isn't playing
@@ -147,26 +187,21 @@ winget install th-ch.YouTubeMusic
 - **Taskbar Media Control**: Control playback from
   your [Windows taskbar](https://user-images.githubusercontent.com/78568641/111916130-24a35e80-8a82-11eb-80c8-5021c1aa27f4.png)
 
-- **Touchbar**: Custom TouchBar layout for macOS
+- **TouchBar**: Custom TouchBar layout for macOS
 
-- **Tuna-OBS**: Integration with [OBS](https://obsproject.com/)'s
+- **Tuna OBS**: Integration with [OBS](https://obsproject.com/)'s
   plugin [Tuna](https://obsproject.com/forum/resources/tuna.843/)
 
+- **Video Quality Changer**: Allows changing the video quality with
+  a [button](https://user-images.githubusercontent.com/78568641/138574366-70324a5e-2d64-4f6a-acdd-dc2a2b9cecc5.png) on
+  the video overlay
+
 - **Video Toggle**: Adds
   a [button](https://user-images.githubusercontent.com/28893833/173663950-63e6610e-a532-49b7-9afa-54cb57ddfc15.png) to
   switch between Video/Song mode. can also optionally remove the whole video tab
 
 - **Visualizer**: Different music visualizers
 
----
-
-- **Auto confirm when paused** (Always Enabled): disable
-  the ["Continue Watching?"](https://user-images.githubusercontent.com/61631665/129977894-01c60740-7ec6-4bf0-9a2c-25da24491b0e.png)
-  popup that pause music after a certain time
-
-> If `Hide Menu` option is on - you can show the menu with the <kbd>alt</kbd> key (or <kbd>\`</kbd> [backtick] if using
-> the in-app-menu plugin)
-
 ## Themes
 
 You can load CSS files to change the look of the application (Options > Visual Tweaks > Themes).
@@ -178,8 +213,8 @@ Some predefined themes are available in https://github.com/kerichdev/themes-for-
 ```bash
 git clone https://github.com/th-ch/youtube-music
 cd youtube-music
-npm ci
+pnpm install --frozen-lockfile
-npm run start
+pnpm dev
 ```
 
 ## Build your own plugins
@@ -191,49 +226,72 @@ Using plugins, you can:
 
 ### Creating a plugin
 
-Create a folder in `plugins/YOUR-PLUGIN-NAME`:
+Create a folder in `src/plugins/YOUR-PLUGIN-NAME`:
-
-- if you need to manipulate the BrowserWindow, create a file with the following template:
 
+- `index.ts`: the main file of the plugin
 ```typescript
-// file: back.ts
+import style from './style.css?inline'; // import style as inline
-export default (win: Electron.BrowserWindow, config: ConfigType<'YOUR-PLUGIN-NAME'>) => {
-  // something
-};
-```
 
-then, register the plugin in `index.ts`:
+import { createPlugin } from '@/utils';
 
-```typescript
+export default createPlugin({
-import yourPlugin from './plugins/YOUR-PLUGIN-NAME/back';
+  name: 'Plugin Label',
+  restartNeeded: true, // if value is true, ytmusic show restart dialog
+  config: {
+    enabled: false,
+  }, // your custom config
+  stylesheets: [style], // your custom style,
+  menu: async ({ getConfig, setConfig }) => {
+    // All *Config methods are wrapped Promise<T>
+    const config = await getConfig();
+    return [
+      {
+        label: 'menu',
+        submenu: [1, 2, 3].map((value) => ({
+          label: `value ${value}`,
+          type: 'radio',
+          checked: config.value === value,
+          click() {
+            setConfig({ value });
+          },
+        })),
+      },
+    ];
+  },
+  backend: {
+    start({ window, ipc }) {
+      window.maximize();
 
-// ...
+      // you can communicate with renderer plugin
-
+      ipc.handle('some-event', () => {
-const mainPlugins = {
+        return 'hello';
-  // ...
+      });
-  'YOUR-PLUGIN-NAME': yourPlugin,
+    },
-};
+    // it fired when config changed
-```
+    onConfigChange(newConfig) { /* ... */ },
-
+    // it fired when plugin disabled
-- if you need to change the front, create a file with the following template:
+    stop(context) { /* ... */ },
-
+  },
-```typescript
+  renderer: {
-// file: front.ts
+    async start(context) {
-export default (config: ConfigType<'YOUR-PLUGIN-NAME'>) => {
+      console.log(await context.ipc.invoke('some-event'));
-  // This function will be called as a preload script
+    },
-  // So you can use front features like `document.querySelector`
+    // Only renderer available hook
-};
+    onPlayerApiReady(api: YoutubePlayer, context: RendererContext) {
-```
+      // set plugin config easily
-
+      context.setConfig({ myConfig: api.getVolume() });
-then, register the plugin in `preload.ts`:
+    },
-
+    onConfigChange(newConfig) { /* ... */ },
-```typescript
+    stop(_context) { /* ... */ },
-import yourPlugin from './plugins/YOUR-PLUGIN-NAME/front';
+  },
-
+  preload: {
-const rendererPlugins: PluginMapper<'renderer'> = {
+    async start({ getConfig }) {
-  // ...
+      const config = await getConfig();
-  'YOUR-PLUGIN-NAME': yourPlugin,
+    },
-};
+    onConfigChange(newConfig) {},
+    stop(_context) {},
+  },
+});
 ```
 
 ### Common use cases
@@ -241,45 +299,67 @@ const rendererPlugins: PluginMapper<'renderer'> = {
 - injecting custom CSS: create a `style.css` file in the same folder then:
 
 ```typescript
-import path from 'node:path';
+// index.ts
-import { injectCSS } from '../utils';
+import style from './style.css?inline'; // import style as inline
 
-// back.ts
+import { createPlugin } from '@/utils';
-export default (win: Electron.BrowserWindow) => {
+
-  injectCSS(win.webContents, path.join(__dirname, 'style.css'));
+export default createPlugin({
-};
+  name: 'Plugin Label',
+  restartNeeded: true, // if value is true, ytmusic will show a restart dialog
+  config: {
+    enabled: false,
+  }, // your custom config
+  stylesheets: [style], // your custom style
+  renderer() {} // define renderer hook
+});
 ```
 
-- changing the HTML:
+- If you want to change the HTML:
 
 ```typescript
-// front.ts
+import { createPlugin } from '@/utils';
-export default () => {
+
-  // Remove the login button
+export default createPlugin({
-  document.querySelector(".sign-in-link.ytmusic-nav-bar").remove();
+  name: 'Plugin Label',
-};
+  restartNeeded: true, // if value is true, ytmusic will show the restart dialog
+  config: {
+    enabled: false,
+  }, // your custom config
+  renderer() {
+    // Remove the login button
+    document.querySelector(".sign-in-link.ytmusic-nav-bar").remove();
+  } // define renderer hook
+});
 ```
 
-- communicating between the front and back: can be done using the ipcMain module from electron. See `utils.js` file and
+- communicating between the front and back: can be done using the ipcMain module from electron. See `index.ts` file and
-  example in `navigation` plugin.
+  example in `sponsorblock` plugin.
 
 ## Build
 
 1. Clone the repo
-2. Run `npm i` to install dependencies
+2. Follow [this guide](https://pnpm.io/installation) to install `pnpm`
-3. Run `npm run build:OS`
+3. Run `pnpm install --frozen-lockfile` to install dependencies
+4. Run `pnpm build:OS`
 
-- `npm run dist:win` - Windows
+- `pnpm dist:win` - Windows
-- `npm run dist:linux` - Linux
+- `pnpm dist:linux` - Linux
-- `npm run dist:mac` - MacOS
+- `pnpm dist:mac` - MacOS
 
 Builds the app for macOS, Linux, and Windows,
 using [electron-builder](https://github.com/electron-userland/electron-builder).
 
+## Production Preview
+
+```bash
+pnpm start
+```
+
 ## Tests
 
 ```bash
-npm run test
+pnpm test
 ```
 
 Uses [Playwright](https://playwright.dev/) to test the app.
@@ -287,3 +367,10 @@ Uses [Playwright](https://playwright.dev/) to test the app.
 ## License
 
 MIT © [th-ch](https://github.com/th-ch/youtube-music)
+
+## Most asked questions
+
+### Why apps menu isn't showing up?
+
+If `Hide Menu` option is on - you can show the menu with the <kbd>alt</kbd> key (or <kbd>\`</kbd> [backtick] if using
+the in-app-menu plugin)

changelog.md

@@ -2,8 +2,275 @@
 
 All notable changes to this project will be documented in this file. Dates are displayed in UTC.
 
+#### [v3.3.0](https://github.com/th-ch/youtube-music/compare/v3.2.2...v3.3.0)
+
+- fix(deps): update dependency i18next to v23.8.3 [`#1751`](https://github.com/th-ch/youtube-music/pull/1751)
+- import fixed ./constants [`#1748`](https://github.com/th-ch/youtube-music/pull/1748)
+- chore(deps): update dependency rollup to v4.12.0 [`#1743`](https://github.com/th-ch/youtube-music/pull/1743)
+- chore(deps): bump undici from 5.28.2 to 5.28.3 [`#1747`](https://github.com/th-ch/youtube-music/pull/1747)
+- chore(deps): update dependency vite to v5.1.3 [`#1742`](https://github.com/th-ch/youtube-music/pull/1742)
+- chore(deps): update dependency vite-plugin-solid to v2.10.1 [`#1734`](https://github.com/th-ch/youtube-music/pull/1734)
+- chore(deps): update dependency discord-api-types to v0.37.70 [`#1740`](https://github.com/th-ch/youtube-music/pull/1740)
+- chore(deps): update dependency electron to v28.2.3 [`#1736`](https://github.com/th-ch/youtube-music/pull/1736)
+- chore(deps): update pnpm to v8.15.3 [`#1739`](https://github.com/th-ch/youtube-music/pull/1739)
+- chore(deps): update dependency rollup to v4.11.0 [`#1738`](https://github.com/th-ch/youtube-music/pull/1738)
+- fix(deps): update dependency solid-js to v1.8.15 [`#1735`](https://github.com/th-ch/youtube-music/pull/1735)
+- chore(deps): update dependency vite to v5.1.2 [`#1733`](https://github.com/th-ch/youtube-music/pull/1733)
+- chore(deps): update dependency vite-plugin-solid to v2.10.0 [`#1732`](https://github.com/th-ch/youtube-music/pull/1732)
+- chore(deps): update pnpm to v8.15.2 [`#1729`](https://github.com/th-ch/youtube-music/pull/1729)
+- Update Copyright - 2024 [`#1730`](https://github.com/th-ch/youtube-music/pull/1730)
+- chore(deps): update dependency @typescript-eslint/eslint-plugin to v7 [`#1728`](https://github.com/th-ch/youtube-music/pull/1728)
+- fix(deps): update dependency @floating-ui/dom to v1.6.3 [`#1727`](https://github.com/th-ch/youtube-music/pull/1727)
+- chore(deps): update dependency electron to v28.2.2 [`#1717`](https://github.com/th-ch/youtube-music/pull/1717)
+- chore(deps): update dependency vite to v5.1.1 [`#1718`](https://github.com/th-ch/youtube-music/pull/1718)
+- chore(deps): update dependency @types/semver to v7.5.7 [`#1724`](https://github.com/th-ch/youtube-music/pull/1724)
+- fix(deps): update dependency @floating-ui/dom to v1.6.2 [`#1725`](https://github.com/th-ch/youtube-music/pull/1725)
+- chore(deps): update dependency rollup to v4.10.0 [`#1719`](https://github.com/th-ch/youtube-music/pull/1719)
+- fix(deps): update dependency solid-js to v1.8.14 [`#1713`](https://github.com/th-ch/youtube-music/pull/1713)
+- chore(deps): update dependency @typescript-eslint/eslint-plugin to v6.21.0 [`#1711`](https://github.com/th-ch/youtube-music/pull/1711)
+- fix(deps): update dependency semver to v7.6.0 [`#1712`](https://github.com/th-ch/youtube-music/pull/1712)
+- refactor(in-app-menu): refactor `in-app-menu` plugin [`#1710`](https://github.com/th-ch/youtube-music/pull/1710)
+- chore(deps): update playwright monorepo to v1.41.2 [`#1706`](https://github.com/th-ch/youtube-music/pull/1706)
+- chore(deps): update dependency electron to v29.0.0-beta.5 [`#1707`](https://github.com/th-ch/youtube-music/pull/1707)
+- feat(album-color-theme): support album color theme in all pages [`#1685`](https://github.com/th-ch/youtube-music/pull/1685)
+- fix(deps): update dependency youtubei.js to v9.0.2 [`#1704`](https://github.com/th-ch/youtube-music/pull/1704)
+- fix(deps): update dependency i18next to v23.8.2 [`#1702`](https://github.com/th-ch/youtube-music/pull/1702)
+- feat: Support disabling scrobbling for non-music content [`#1665`](https://github.com/th-ch/youtube-music/pull/1665)
+- fix(deps): update dependency youtubei.js to v9 [`#1682`](https://github.com/th-ch/youtube-music/pull/1682)
+- chore(deps): update dependency electron to v29.0.0-beta.4 [`#1698`](https://github.com/th-ch/youtube-music/pull/1698)
+- fix(deps): update dependency i18next to v23.8.1 [`#1694`](https://github.com/th-ch/youtube-music/pull/1694)
+- chore(deps): update dependency @typescript-eslint/eslint-plugin to v6.20.0 [`#1700`](https://github.com/th-ch/youtube-music/pull/1700)
+- chore(deps): update pnpm to v8.15.1 [`#1699`](https://github.com/th-ch/youtube-music/pull/1699)
+- chore(deps): update dependency esbuild to v0.20.0 [`#1691`](https://github.com/th-ch/youtube-music/pull/1691)
+- chore(deps): update pnpm to v8.15.0 [`#1692`](https://github.com/th-ch/youtube-music/pull/1692)
+- fix(deps): update dependency i18next to v23.7.20 [`#1684`](https://github.com/th-ch/youtube-music/pull/1684)
+- chore(deps): update dependency electron to v29.0.0-beta.3 [`#1683`](https://github.com/th-ch/youtube-music/pull/1683)
+- chore(deps): update dependency electron to v29.0.0-beta.2 [`#1681`](https://github.com/th-ch/youtube-music/pull/1681)
+- chore(deps): update dependency rollup to v4.9.6 [`#1663`](https://github.com/th-ch/youtube-music/pull/1663)
+- chore(deps): update dependency electron to v29.0.0-beta.1 [`#1670`](https://github.com/th-ch/youtube-music/pull/1670)
+- fix(deps): update dependency i18next to v23.7.19 [`#1680`](https://github.com/th-ch/youtube-music/pull/1680)
+- chore(deps): update dependency @typescript-eslint/eslint-plugin to v6.19.1 [`#1669`](https://github.com/th-ch/youtube-music/pull/1669)
+- chore(deps): update pnpm to v8.14.3 [`#1668`](https://github.com/th-ch/youtube-music/pull/1668)
+- chore(deps): update dependency vite-plugin-inspect to v0.8.3 [`#1672`](https://github.com/th-ch/youtube-music/pull/1672)
+- chore(deps): update dependency esbuild to v0.19.12 [`#1673`](https://github.com/th-ch/youtube-music/pull/1673)
+- fix(deps): update dependency @electron/remote to v2.1.2 [`#1676`](https://github.com/th-ch/youtube-music/pull/1676)
+- chore: Update issue templates [`#1661`](https://github.com/th-ch/youtube-music/pull/1661)
+- chore(deps): update playwright monorepo to v1.41.1 [`#1660`](https://github.com/th-ch/youtube-music/pull/1660)
+- fix(deps): update dependency i18next to v23.7.18 [`#1662`](https://github.com/th-ch/youtube-music/pull/1662)
+- chore(deps): update actions/dependency-review-action action to v4 [`#1654`](https://github.com/th-ch/youtube-music/pull/1654)
+- chore(deps): update dependency electron to v29.0.0-alpha.11 [`#1656`](https://github.com/th-ch/youtube-music/pull/1656)
+- chore(deps): update dependency vite to v5.0.12 [security] [`#1659`](https://github.com/th-ch/youtube-music/pull/1659)
+- fix(deps): update dependency async-mutex to v0.4.1 [`#1653`](https://github.com/th-ch/youtube-music/pull/1653)
+- chore(deps): update playwright monorepo to v1.41.0 [`#1651`](https://github.com/th-ch/youtube-music/pull/1651)
+- feat: Better Scrobbler Plugin [`#1640`](https://github.com/th-ch/youtube-music/pull/1640)
+- chore(deps): update dependency electron to v29.0.0-alpha.10 [`#1645`](https://github.com/th-ch/youtube-music/pull/1645)
+- chore(deps): update dependency @typescript-eslint/eslint-plugin to v6.19.0 [`#1643`](https://github.com/th-ch/youtube-music/pull/1643)
+- chore(README): Fix plugins names and add plugins in/to Readme (in menu too) [`#1624`](https://github.com/th-ch/youtube-music/pull/1624)
+- fix(album-actions): Fixed album actions [`#1639`](https://github.com/th-ch/youtube-music/pull/1639)
+- chore(deps): update playwright monorepo to v1.41.0-beta-1705101589000 [`#1638`](https://github.com/th-ch/youtube-music/pull/1638)
+- fix(#1543): fix song control doesn't work [`#1637`](https://github.com/th-ch/youtube-music/pull/1637)
+- chore(deps): update playwright monorepo to v1.41.0-beta-1705092460000 [`#1635`](https://github.com/th-ch/youtube-music/pull/1635)
+- chore(deps): update dependency rollup to v4.9.5 [`#1629`](https://github.com/th-ch/youtube-music/pull/1629)
+- chore(deps): update dependency electron to v29.0.0-alpha.9 [`#1627`](https://github.com/th-ch/youtube-music/pull/1627)
+- chore(deps): update dependency electron to v29.0.0-alpha.8 [`#1608`](https://github.com/th-ch/youtube-music/pull/1608)
+- fix(deps): update dependency @cliqz/adblocker-electron to v1.26.15 [`#1615`](https://github.com/th-ch/youtube-music/pull/1615)
+- chore(deps): update dependency rollup to v4.9.4 [`#1591`](https://github.com/th-ch/youtube-music/pull/1591)
+- fix(deps): update dependency @cliqz/adblocker-electron-preload to v1.26.15 [`#1616`](https://github.com/th-ch/youtube-music/pull/1616)
+- chore(deps): update pnpm to v8.14.1 [`#1619`](https://github.com/th-ch/youtube-music/pull/1619)
+- chore(deps): update dependency eslint-plugin-prettier to v5.1.3 [`#1618`](https://github.com/th-ch/youtube-music/pull/1618)
+- chore(deps): update dependency @typescript-eslint/eslint-plugin to v6.18.1 [`#1612`](https://github.com/th-ch/youtube-music/pull/1612)
+- fix(deps): update dependency youtubei.js to v8.2.0 [`#1614`](https://github.com/th-ch/youtube-music/pull/1614)
+- chore(deps): update dependency electron-vite to v2.0.0 [`#1609`](https://github.com/th-ch/youtube-music/pull/1609)
+- chore(deps): update dependency @typescript-eslint/eslint-plugin to v6.18.0 [`#1603`](https://github.com/th-ch/youtube-music/pull/1603)
+- chore(deps): update dependency electron-vite to v2.0.0-beta.4 [`#1602`](https://github.com/th-ch/youtube-music/pull/1602)
+- fix: fix upgrade button [`#1199`](https://github.com/th-ch/youtube-music/issues/1199)
+- fix(mpris): fix mpris invalid position [`#1726`](https://github.com/th-ch/youtube-music/issues/1726)
+- fix: discord RPC (fix #1664) [`#1664`](https://github.com/th-ch/youtube-music/issues/1664)
+- fix: remove sign-in button (fix #1199) [`#1199`](https://github.com/th-ch/youtube-music/issues/1199)
+- Fix #1617 [`#1617`](https://github.com/th-ch/youtube-music/issues/1617)
+- fix(crossfade): fix #1633 [`#1633`](https://github.com/th-ch/youtube-music/issues/1633)
+- fix: fix #1621 [`#1621`](https://github.com/th-ch/youtube-music/issues/1621)
+- fix(tuna-obs): partially fix #1596 [`#1596`](https://github.com/th-ch/youtube-music/issues/1596)
+- fix(discord): fix hide duration button [`#1644`](https://github.com/th-ch/youtube-music/issues/1644)
+- fix(in-app-menu): fix invalid `margin-top` [`#1597`](https://github.com/th-ch/youtube-music/issues/1597)
+- fix(README): fix `plugins` path [`#1598`](https://github.com/th-ch/youtube-music/issues/1598)
+- chore(i18n): Translated using Weblate (Vietnamese) [`0528637`](https://github.com/th-ch/youtube-music/commit/05286371353e8b4c36a5b9fe9011ae5dfdc7ee82)
+- chore: update pnpm-lock [`fd8d59b`](https://github.com/th-ch/youtube-music/commit/fd8d59bada56dab4e156d22394fe0c5efec5abc4)
+- fix(in-app-menu): fix app crash in production [`febc63e`](https://github.com/th-ch/youtube-music/commit/febc63edef375bd82db48b7fb460ec5a601ab872)
+
+#### [v3.2.2](https://github.com/th-ch/youtube-music/compare/v3.2.1...v3.2.2)
+
+> 5 January 2024
+
+- feat(tray): Add song info and paused icon [`#1592`](https://github.com/th-ch/youtube-music/pull/1592)
+- fix(skip-silences): fix audio distorted [`#1141`](https://github.com/th-ch/youtube-music/issues/1141)
+- chore(deps): update dependency rollup to v4.9.3 [`0c3c380`](https://github.com/th-ch/youtube-music/commit/0c3c3805918adf2a185a7f1dc67ea3af8135863d)
+- chore(i18n): Translated using Weblate (Turkish) [`64ea1fd`](https://github.com/th-ch/youtube-music/commit/64ea1fdb58fdf2766ae3284ac1a51bfac8894b36)
+- fix(music-together): typing [`895386f`](https://github.com/th-ch/youtube-music/commit/895386f6f8c649f77ea15c88f6fb7ecc5b775554)
+
+#### [v3.2.1](https://github.com/th-ch/youtube-music/compare/v3.2.0...v3.2.1)
+
+> 1 January 2024
+
+- fix: fix #1574 [`#1574`](https://github.com/th-ch/youtube-music/issues/1574)
+- fix: fix #1575 [`#1575`](https://github.com/th-ch/youtube-music/issues/1575)
+- chore(i18n): Translated using Weblate [`f5aa179`](https://github.com/th-ch/youtube-music/commit/f5aa179cd639eb4b8f70f1264b5b459ebcc16695)
+- chore(i18n): Translated using Weblate (English) [`e409165`](https://github.com/th-ch/youtube-music/commit/e409165e1bed85f3d1aea3a565e7b9e462b1e05b)
+- chore(i18n): Translated using Weblate (Czech) [`0ca4e34`](https://github.com/th-ch/youtube-music/commit/0ca4e34efd86e877314e5a245f266065b4cf0013)
+
+#### [v3.2.0](https://github.com/th-ch/youtube-music/compare/v3.1.1...v3.2.0)
+
+> 1 January 2024
+
+- feat(album-color-theme): improve `Album Color Theme` style [`#1571`](https://github.com/th-ch/youtube-music/pull/1571)
+- feat(menu): add more detail in Menu [`#1570`](https://github.com/th-ch/youtube-music/pull/1570)
+- feat(music-together): Add new plugin `Music Together` [`#1562`](https://github.com/th-ch/youtube-music/pull/1562)
+- chore(deps): update dependency rollup to v4.9.2 [`#1567`](https://github.com/th-ch/youtube-music/pull/1567)
+- fix(deps): update dependency i18next to v23.7.13 [`#1569`](https://github.com/th-ch/youtube-music/pull/1569)
+- feat: Add new plugin `Album actions` [`#1515`](https://github.com/th-ch/youtube-music/pull/1515)
+- fix(deps): update dependency i18next to v23.7.12 [`#1564`](https://github.com/th-ch/youtube-music/pull/1564)
+- fix: Only apply scale factor on Windows [`#1565`](https://github.com/th-ch/youtube-music/pull/1565)
+- chore(deps): update dependency @typescript-eslint/eslint-plugin to v6.16.0 [`#1556`](https://github.com/th-ch/youtube-music/pull/1556)
+- chore(deps): update pnpm to v8.13.1 [`#1557`](https://github.com/th-ch/youtube-music/pull/1557)
+- chore(deps): update dependency ws to v8.16.0 [`#1559`](https://github.com/th-ch/youtube-music/pull/1559)
+- fix(deps): update dependency youtubei.js to v8.1.0 [`#1560`](https://github.com/th-ch/youtube-music/pull/1560)
+- fix(deps): update dependency node-html-parser to v6.1.12 [`#1554`](https://github.com/th-ch/youtube-music/pull/1554)
+- Revert "fix(deps): update dependency @xhayper/discord-rpc to v1.1.2" [`#1552`](https://github.com/th-ch/youtube-music/pull/1552)
+- feat(ambient-mode): support ambient mode on `Song section` [`#1555`](https://github.com/th-ch/youtube-music/issues/1555)
+- fix: fixed an issue with the download button disappearing [`#1551`](https://github.com/th-ch/youtube-music/issues/1551)
+- fix: fix `homebrew cask` [`#1514`](https://github.com/th-ch/youtube-music/issues/1514)
+- fix: pnpm build error [`13ef856`](https://github.com/th-ch/youtube-music/commit/13ef8560ff43353030537403be7da82542ba535e)
+- chore(i18n): Translated using Weblate (Czech) [`0dc9c6a`](https://github.com/th-ch/youtube-music/commit/0dc9c6a1a90bce6505614617b827e816cbaaf875)
+- chore(deps): update dependency @typescript-eslint/eslint-plugin to v6.15.0 [`c5bcd89`](https://github.com/th-ch/youtube-music/commit/c5bcd89f164b51d7380486a8ae35edd0caeea842)
+
+#### [v3.1.1](https://github.com/th-ch/youtube-music/compare/v3.1.0...v3.1.1)
+
+> 18 December 2023
+
+- fix: fix renderer plugin load timing [`#1522`](https://github.com/th-ch/youtube-music/issues/1522)
+- chore(i18n): Translated using Weblate (Lithuanian) [`fc1a7cd`](https://github.com/th-ch/youtube-music/commit/fc1a7cda62b6e33e5f5d57a5a6e0adef6a32bf9a)
+- chore(i18n): Translated using Weblate (Chinese (Simplified)) [`eba7026`](https://github.com/th-ch/youtube-music/commit/eba7026b89bbfdd3ac07cf728a66ba9bdd274ec0)
+- chore(deps): update dependency rollup to v4.8.0 [`a601d0b`](https://github.com/th-ch/youtube-music/commit/a601d0b3d2dee0fabad79a18e1a7dd0ca84ccf01)
+
+#### [v3.1.0](https://github.com/th-ch/youtube-music/compare/v3.0.2...v3.1.0)
+
+> 11 December 2023
+
+- chore(deps): update dependency electron to v28 [`#1498`](https://github.com/th-ch/youtube-music/pull/1498)
+- Enable/Disable Navigation without restart [`#1507`](https://github.com/th-ch/youtube-music/pull/1507)
+- Turkish(tr)_lang_file [`#1513`](https://github.com/th-ch/youtube-music/pull/1513)
+- Skip Disliked Songs [`#1505`](https://github.com/th-ch/youtube-music/pull/1505)
+- chore(deps): update dependency @typescript-eslint/eslint-plugin to v6.13.2 [`#1452`](https://github.com/th-ch/youtube-music/pull/1452)
+- fix: Homebrew latest release url parsing [`#1496`](https://github.com/th-ch/youtube-music/pull/1496)
+- fix: in-player adblocker inject timing issue [`#1478`](https://github.com/th-ch/youtube-music/issues/1478)
+- fix(package.json): fix RPM version `libuuid` issue [`#1508`](https://github.com/th-ch/youtube-music/issues/1508)
+- Translated using Weblate (Polish) [`7b78ba6`](https://github.com/th-ch/youtube-music/commit/7b78ba67613f14be65a45751efeb06431b405a91)
+- Translated using Weblate (French) [`ebc0879`](https://github.com/th-ch/youtube-music/commit/ebc087963b23265ff00528c8305d51597abf587a)
+- Translated using Weblate (Chinese (Traditional)) [`020bdc0`](https://github.com/th-ch/youtube-music/commit/020bdc0811ea45ad6c2853c62a05ae6695c5c4f9)
+
+#### [v3.0.2](https://github.com/th-ch/youtube-music/compare/v3.0.1...v3.0.2)
+
+> 3 December 2023
+
+- fix(adblocker): fix In-Player adblocker [`#1478`](https://github.com/th-ch/youtube-music/issues/1478)
+- fix(menu): crash on linux [`#1477`](https://github.com/th-ch/youtube-music/issues/1477)
+- fix: update pnpm-lock.yaml [`9e2c6b1`](https://github.com/th-ch/youtube-music/commit/9e2c6b1afa33b5708853c8328946e68ec45b09c3)
+- Translated using Weblate (Chinese (Traditional)) [`125b69f`](https://github.com/th-ch/youtube-music/commit/125b69fd75a05c3eb893886119e2d9f2332b3e56)
+- Translated using Weblate (French) [`15c4551`](https://github.com/th-ch/youtube-music/commit/15c455105b5100a8ee2bd0a4631548d3d455f047)
+
+#### [v3.0.1](https://github.com/th-ch/youtube-music/compare/v3.0.0...v3.0.1)
+
+> 2 December 2023
+
+- hotfix(adblocker): fix #1475 [`#1475`](https://github.com/th-ch/youtube-music/issues/1475)
+- Translated using Weblate (French) [`7f02afc`](https://github.com/th-ch/youtube-music/commit/7f02afc5a6839adfe8437d4e2cc8dee13a93b311)
+- Update changelog for v3.0.0 [`d8c8bd1`](https://github.com/th-ch/youtube-music/commit/d8c8bd17ecfbdf96ebd29eb4c5748c07876ee242)
+- Translated using Weblate (German) [`0660f0b`](https://github.com/th-ch/youtube-music/commit/0660f0b7ce6895ef5800f48ade1da2d7f8e0c1f7)
+
+### [v3.0.0](https://github.com/th-ch/youtube-music/compare/v2.2.0...v3.0.0)
+
+> 2 December 2023
+
+- Add text to Translation section [`#1470`](https://github.com/th-ch/youtube-music/pull/1470)
+- fix(deps): update dependency youtubei.js to v8 [`#1473`](https://github.com/th-ch/youtube-music/pull/1473)
+- chore(deps): update dependency electron to v27.1.3 [`#1471`](https://github.com/th-ch/youtube-music/pull/1471)
+- fix(deps): update dependency @xhayper/discord-rpc to v1.1.1 [`#1472`](https://github.com/th-ch/youtube-music/pull/1472)
+- feat: add support i18n [`#1468`](https://github.com/th-ch/youtube-music/pull/1468)
+- chore(deps): update dependency electron to v27.1.2 [`#1441`](https://github.com/th-ch/youtube-music/pull/1441)
+- Nicer Readme [`#1439`](https://github.com/th-ch/youtube-music/pull/1439)
+- Windows Zoom, ScaleFactor [`#1402`](https://github.com/th-ch/youtube-music/pull/1402)
+- chore(deps): bump axios from 1.5.1 to 1.6.1 [`#1400`](https://github.com/th-ch/youtube-music/pull/1400)
+- Updated mac icon to better reflect the Mac styling [`#1395`](https://github.com/th-ch/youtube-music/pull/1395)
+- feat: rename plugins to clarify context [`#1392`](https://github.com/th-ch/youtube-music/pull/1392)
+- feat: refactor plugin utils [`#1391`](https://github.com/th-ch/youtube-music/pull/1391)
+- feat: plugin auto-importer with `vite-plugin-resolve` [`#1385`](https://github.com/th-ch/youtube-music/pull/1385)
+- feat: migrate from `rollup` to `electron-vite` [`#1364`](https://github.com/th-ch/youtube-music/pull/1364)
+- feat: enable `context-isolation` [`#1361`](https://github.com/th-ch/youtube-music/pull/1361)
+- fix: add workaround for `podcast` type video [`#1362`](https://github.com/th-ch/youtube-music/pull/1362)
+- fix: fix broken menu-layout [`#1360`](https://github.com/th-ch/youtube-music/pull/1360)
+- Add Homebrew cask install option for MacOS. [`#1357`](https://github.com/th-ch/youtube-music/pull/1357)
+- feat: changed Zoom shortcuts to standard [`#1458`](https://github.com/th-ch/youtube-music/issues/1458)
+- fix(in-app-menu): fix #1436 [`#1436`](https://github.com/th-ch/youtube-music/issues/1436)
+- fix(discord): update application client-id [`#1431`](https://github.com/th-ch/youtube-music/issues/1431)
+- chore(deps): update dependency electron to v27.0.4 [`#1324`](https://github.com/th-ch/youtube-music/issues/1324)
+- fix(in-app-menu): panel should close with the window when it is closed [`#1389`](https://github.com/th-ch/youtube-music/issues/1389)
+- fix: change titleBarOverlay height based on zoomFactor [`#1375`](https://github.com/th-ch/youtube-music/issues/1375)
+- fix: fixed an issue if "Always on top" is enabled, the dialog is displayed below the window [`#1379`](https://github.com/th-ch/youtube-music/issues/1379)
+- fix: fix winget version (fix #1363) [`#1363`](https://github.com/th-ch/youtube-music/issues/1363)
+- feat: run prettier [`a3104fd`](https://github.com/th-ch/youtube-music/commit/a3104fda4b0d58b076d0c737111636a66e468acc)
+- Translated using Weblate (Korean) [`b4b7ad8`](https://github.com/th-ch/youtube-music/commit/b4b7ad824b8c489ae483eba139b46e5b200231fc)
+- Translated using Weblate (English) [`d2eabaa`](https://github.com/th-ch/youtube-music/commit/d2eabaa4bbccd89eae529eae52cec035e8e2620c)
+
+#### [v2.2.0](https://github.com/th-ch/youtube-music/compare/v2.1.3...v2.2.0)
+
+> 27 October 2023
+
+- feat(ambient-mode): add config for `ambient-mode` plugin [`#1349`](https://github.com/th-ch/youtube-music/pull/1349)
+- bump deps [`4248d20`](https://github.com/th-ch/youtube-music/commit/4248d20e8ef926ce7b1d07eb83743755a341d9f6)
+- Update changelog for v2.1.3 [`dc73561`](https://github.com/th-ch/youtube-music/commit/dc73561c8a8acfc8ba91aff2dc78e4267869f2fd)
+- Bump version to 2.2.0 [`6288d0b`](https://github.com/th-ch/youtube-music/commit/6288d0b171a65ea015922cdf3af6c7bd9a1f269b)
+
+#### [v2.1.3](https://github.com/th-ch/youtube-music/compare/v2.1.2...v2.1.3)
+
+> 23 October 2023
+
+- fix: fixed bugs in downloader [`#1342`](https://github.com/th-ch/youtube-music/pull/1342)
+- feat(discord): rename `Listen Along` to `Play on YTM` [`#1341`](https://github.com/th-ch/youtube-music/issues/1341)
+- chore(deps): bump deps [`4333891`](https://github.com/th-ch/youtube-music/commit/4333891ccabe42aedf756fd48618be715db13262)
+- Update changelog for v2.1.2 [`fa4c69d`](https://github.com/th-ch/youtube-music/commit/fa4c69d228d4e06a7858e2b22fcdfa075a8ca766)
+- fix(store): fix listenAlong statement [`bceaa05`](https://github.com/th-ch/youtube-music/commit/bceaa05197d47a4a4bbd22e767d1e4d6ec277514)
+
+#### [v2.1.2](https://github.com/th-ch/youtube-music/compare/v2.1.1...v2.1.2)
+
+> 19 October 2023
+
+- feat(in-app-menu): add an option to hide the window controls [`#1335`](https://github.com/th-ch/youtube-music/pull/1335)
+- fix: fixed an issue where the album name was missing [`#1334`](https://github.com/th-ch/youtube-music/pull/1334)
+- chore(deps): update dependency electron to v27.0.1 [`#1331`](https://github.com/th-ch/youtube-music/pull/1331)
+- fix: fixed an issue where only the first 100 songs in a playlist were downloaded [`#1329`](https://github.com/th-ch/youtube-music/pull/1329)
+- Updated readme plugins list [`#1326`](https://github.com/th-ch/youtube-music/pull/1326)
+- QOL: Move source code under the src directory. [`#1318`](https://github.com/th-ch/youtube-music/pull/1318)
+- feat: migrate from `npm` to `pnpm` [`#1316`](https://github.com/th-ch/youtube-music/pull/1316)
+- fix: fix unresponsive (fix #1325) [`#1325`](https://github.com/th-ch/youtube-music/issues/1325)
+- fix(blocker): remove the `app.isPackaged` check (fix #1315) [`#1315`](https://github.com/th-ch/youtube-music/issues/1315)
+- fix(discord): `Discord RPC fails if a song's title is only one character` (fix #1314) [`#1314`](https://github.com/th-ch/youtube-music/issues/1314)
+- chore(deps): Bump @rollup/plugin-commonjs, pnpm version, Remove ytpl [`9705f84`](https://github.com/th-ch/youtube-music/commit/9705f8489d7bf262bfd8b15ab84c2d3485f10eae)
+- chore(deps): Bump rollup, @xhayper/discord-rpc version [`00a3e8d`](https://github.com/th-ch/youtube-music/commit/00a3e8d35ec335e1913be19f30ae09dbe0b7acdd)
+- chore(deps): update dependency rollup to v4.1.4 [`6774d54`](https://github.com/th-ch/youtube-music/commit/6774d54f5eca432edc2e11743d9d1b1c2fda9ac8)
+
+#### [v2.1.1](https://github.com/th-ch/youtube-music/compare/v2.1.0...v2.1.1)
+
+> 14 October 2023
+
+- hotfix(downloader): can't get an album title (fix #1313) [`#1313`](https://github.com/th-ch/youtube-music/issues/1313)
+- Update changelog for v2.1.0 [`92cab89`](https://github.com/th-ch/youtube-music/commit/92cab89d17175741e60e65ea61633e23ebdc1f45)
+- Bump version to 2.1.1 [`3bb5bc2`](https://github.com/th-ch/youtube-music/commit/3bb5bc2ca1856f4e222ee1e01e865f1ab804fdba)
+- Add "about" menu to show app version [`21c45fa`](https://github.com/th-ch/youtube-music/commit/21c45faf2043cf72a7c14d5cf6c8d848d0448528)
+
 #### [v2.1.0](https://github.com/th-ch/youtube-music/compare/v2.0.4...v2.1.0)
 
+> 14 October 2023
+
 - feat(downloader): Added support for audio format auto-detection [`#1310`](https://github.com/th-ch/youtube-music/pull/1310)
 - feat(in-app-menu): enable in-app-menu by default (in Windows) [`#1311`](https://github.com/th-ch/youtube-music/pull/1311)
 - fix: winget publish [`#1307`](https://github.com/th-ch/youtube-music/pull/1307)

config/defaults.ts

@@ -1,287 +0,0 @@
-import { blockers } from '../plugins/adblocker/blocker-types';
-
-import { DefaultPresetList } from '../plugins/downloader/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.WithBlocklists 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
-      hideGitHubButton: false, // Disable the "View App On GitHub" button
-      hideDurationLeft: false, // Hides the start and end time of the song to rich presence
-    },
-    'downloader': {
-      enabled: false,
-      downloadFolder: undefined as string | undefined, // Custom download folder (absolute path)
-      selectedPreset: 'mp3 (256kbps)', // Selected preset
-      customPresetSetting: DefaultPresetList['mp3 (256kbps)'], // Presets
-      skipExisting: false,
-      playlistMaxItems: undefined as number | undefined,
-    },
-    'exponential-volume': {},
-    'in-app-menu': {
-      /**
-       * true in Windows, false in Linux and macOS (see youtube-music/config/store.ts)
-       */
-      enabled: false,
-    },
-    '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.ts

@@ -1,241 +0,0 @@
-/* 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.ts

@@ -1,53 +0,0 @@
-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.ts

@@ -1,63 +0,0 @@
-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.ts

@@ -1,154 +0,0 @@
-import Store from 'electron-store';
-import Conf from 'conf';
-import is from 'electron-is';
-
-import defaults from './defaults';
-
-import { DefaultPresetList, type Preset } from '../plugins/downloader/types';
-
-const getDefaults = () => {
-  if (is.windows()) {
-    defaults.plugins['in-app-menu'].enabled = true;
-  }
-  return 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 = {
-  '>=2.1.0'(store: Conf<Record<string, unknown>>) {
-    const originalPreset = store.get('plugins.downloader.preset') as string | undefined;
-    if (originalPreset) {
-      if (originalPreset !== 'opus') {
-        store.set('plugins.downloader.selectedPreset', 'Custom');
-        store.set('plugins.downloader.customPresetSetting', {
-          extension: 'mp3',
-          ffmpegArgs: store.get('plugins.downloader.ffmpegArgs') as string[] ?? DefaultPresetList['mp3 (256kbps)'].ffmpegArgs,
-        } satisfies Preset);
-      } else {
-        store.set('plugins.downloader.selectedPreset', 'Source');
-        store.set('plugins.downloader.customPresetSetting', {
-          extension: null,
-          ffmpegArgs: store.get('plugins.downloader.ffmpegArgs') as string[] ?? [],
-        } satisfies Preset);
-      }
-      store.delete('plugins.downloader.preset');
-      store.delete('plugins.downloader.ffmpegArgs');
-    }
-  },
-  '>=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: getDefaults(),
-  clearInvalidConfig: false,
-  migrations,
-});

docs/index.html

@@ -478,7 +478,7 @@
                             </a>
                         </li>
                     </ul>
-                    <div class="footer-copyright">© 2021 th-ch</div>
+                    <div class="footer-copyright">© 2024 th-ch</div>
                 </div>
             </div>
         </div>

docs/readme/README-ko.md

@@ -0,0 +1,327 @@
+# 유튜브 뮤직 (YouTube Music)
+
+<div align="center">
+
+[![GitHub release](https://img.shields.io/github/release/th-ch/youtube-music.svg?style=for-the-badge&logo=youtube-music)](https://github.com/th-ch/youtube-music/releases/)
+[![GitHub license](https://img.shields.io/github/license/th-ch/youtube-music.svg?style=for-the-badge)](https://github.com/th-ch/youtube-music/blob/master/LICENSE)
+[![eslint code style](https://img.shields.io/badge/code_style-eslint-5ed9c7.svg?style=for-the-badge)](https://github.com/th-ch/youtube-music/blob/master/.eslintrc.js)
+[![Build status](https://img.shields.io/github/actions/workflow/status/th-ch/youtube-music/build.yml?branch=master&style=for-the-badge&logo=youtube-music)](https://GitHub.com/th-ch/youtube-music/releases/)
+[![GitHub All Releases](https://img.shields.io/github/downloads/th-ch/youtube-music/total?style=for-the-badge&logo=youtube-music)](https://GitHub.com/th-ch/youtube-music/releases/)
+[![AUR](https://img.shields.io/aur/version/youtube-music-bin?color=blueviolet&style=for-the-badge&logo=youtube-music)](https://aur.archlinux.org/packages/youtube-music-bin)
+[![Known Vulnerabilities](https://snyk.io/test/github/th-ch/youtube-music/badge.svg)](https://snyk.io/test/github/th-ch/youtube-music)
+
+</div>
+
+![Screenshot](../../web/screenshot.jpg "Screenshot")
+
+<div align="center">
+	<a href="https://github.com/th-ch/youtube-music/releases/latest">
+		<img src="../../web/youtube-music.svg" width="400" height="100" alt="YouTube Music SVG">
+	</a>
+</div>
+
+**유튜브 뮤직의 Electron 래퍼; 기능:**
+
+- 원래의 인터페이스를 유지하는 것을 목표로 하는 네이티브 디자인 및 느낌
+- 맞춤 플러그인을 위한 프레임워크: 스타일, 콘텐츠, 기능 등 필요에 따라 유튜브 뮤직을 변경하고, 클릭 한 번으로 플러그인을 활성화/비활성화할 수 있습니다.
+
+## 번역
+
+[Hosted Weblate](https://hosted.weblate.org/projects/youtube-music/)에서 번역을 도울 수 있습니다.
+
+<a href="https://hosted.weblate.org/engage/youtube-music/">
+  <img src="https://hosted.weblate.org/widget/youtube-music/i18n/multi-auto.svg" alt="번역 상태" />
+  <img src="https://hosted.weblate.org/widget/youtube-music/i18n/287x66-black.png" alt="번역 상태 2" />
+</a>
+
+## 다운로드
+
+[최신 릴리즈](https://github.com/th-ch/youtube-music/releases/latest)를 확인하여 최신 버전을 빠르게 찾을 수 있습니다.
+
+### Arch Linux
+
+AUR에서 `youtube-music-bin` 패키지를 설치합니다. AUR 설치 지침은 [이 위키 페이지](https://wiki.archlinux.org/index.php/Arch_User_Repository#Installing_packages)를 참조하세요.
+
+### MacOS
+
+Homebrew를 사용하여 앱을 설치할 수 있습니다:
+```bash
+brew install --cask https://raw.githubusercontent.com/th-ch/youtube-music/master/youtube-music.rb
+```
+
+(앱을 수동으로 설치하고) 앱을 실행할 때 `손상되었기 때문에 열 수 없습니다.`라는 오류가 발생하면 터미널에서 다음을 실행하세요:
+
+```bash
+xattr -cr /Applications/YouTube\ Music.app
+```
+
+### Windows
+
+[Scoop 패키지 매니저](https://scoop.sh)를 사용하여 [`extras` 버킷](https://github.com/ScoopInstaller/Extras)에서 `youtube-music` 패키지를 설치할 수 있습니다.
+
+```bash
+scoop bucket add extras
+scoop install extras/youtube-music
+```
+
+또는 Windows 11의 공식 CLI 패키지 관리자인 [Winget](https://learn.microsoft.com/en-us/windows/package-manager/winget/)을 사용하여 `th-ch.YouTubeMusic` 패키지를 설치할 수 있습니다.
+
+*참고: "알 수 없는 게시자"의 파일이기 때문에 Microsoft Defender의 SmartScreen에서 설치를 차단할 수 있습니다. 이는 GitHub에서 동일 파일을 수동으로 다운로드한 후 실행 파일(.exe)을 실행하려고 할 때도 마찬가지로 발생합니다.*
+
+```bash
+winget install th-ch.YouTubeMusic
+```
+
+#### (Windows에서) 네트워크에 연결하지 않고 설치하는 방법은 무엇인가요?
+
+- [릴리즈 페이지](https://github.com/th-ch/youtube-music/releases/latest)에서 _본인 기기 아키텍처_에 맞는 `*.nsis.7z` 파일을 다운로드하세요.
+  - `x64`는 64비트 Windows 용입니다.
+  - `ia32`는 32비트 Windows 용입니다.
+  - `arm64`는 ARM64 Windows 용입니다.
+- 릴리즈 페이지에서 설치기를 다운로드하세요. (`*-Setup.exe`)
+- 두 파일을 **동일한 위치**에 놓아주세요.
+- 설치기를 실행하세요.
+
+## 기능:
+
+- **일시 정지 시 자동 확인** (항상 활성화 됨): 일정 시간이 지나면 음악을 일시 정지하는 ["계속 시청하시겠습니까?"](https://user-images.githubusercontent.com/61631665/129977894-01c60740-7ec6-4bf0-9a2c-25da24491b0e.png) 팝업을 비활성화합니다.
+
+- 이외에 더 많은 기능 ...
+
+## 사용 가능한 플러그인:
+
+- **애드블록**: 모든 광고와 트래커를 즉시 차단합니다
+
+- **앨범 컬러 기반 테마**: 앨범 색상 팔레트를 기반으로 동적 테마 및 시각 효과를 적용합니다
+
+- **앰비언트 모드**: 영상의 간접 조명을 화면 배경에 투사합니다.
+
+- **오디오 컴프레서**: 오디오에 컴프레서를 적용합니다 (신호에서 가장 시끄러운 부분의 음량을 낮추고 가장 조용한 부분의 음량을 높임)
+
+- **네비게이션 바 흐림 효과**: 내비게이션 바를 투명하고 흐릿하게 만듭니다
+
+- **나이 제한 우회**: 유튜브의 나이 제한을 우회합니다
+
+- **자막 선택기**: 자막을 활성화합니다
+
+- **컴팩트 사이드바**: 사이드바를 항상 컴팩트 모드로 설정합니다
+
+- **크로스페이드**: 노래 사이에 크로스페이드 효과를 적용합니다
+
+- **자동 재생 해제**: 노래를 '일시 정지' 모드로 시작하게 합니다
+
+- [**디스코드 활동 상태**](https://discord.com/): [활동 상태 (Rich Presence)](https://user-images.githubusercontent.com/28219076/104362104-a7a0b980-5513-11eb-9744-bb89eabe0016.png)를 사용하여 친구들에게 내가 듣는 음악을 보여주세요
+
+- **다운로더**: UI에서 [직접](https://user-images.githubusercontent.com/61631665/129977677-83a7d067-c192-45e1-98ae-b5a4927393be.png) MP3/소스 오디오를 다운로드하세요
+
+- **지수 볼륨**: 음량 슬라이더를 [지수적](https://greasyfork.org/en/scripts/397686-youtube-music-fix-volume-ratio/)으로 만들어 더 낮은 음량을 쉽게 선택할 수 있도록 합니다.
+
+- **인앱 메뉴**: [메뉴 표시줄을 더 멋지게, 그리고 다크 또는 앨범의 색상으로 만듭니다](https://user-images.githubusercontent.com/78568641/112215894-923dbf00-8c29-11eb-95c3-3ce15db27eca.png)
+
+  > (이 플러그인 및 메뉴 숨기기 옵션을 활성화한 후 메뉴에 액세스하는 데 문제가 있는 경우 [이 글](https://github.com/th-ch/youtube-music/issues/410#issuecomment-952060709)을 참조하세요)
+
+- [**Last.fm**](https://www.last.fm/): Last.fm에 대한 스크러블 지원을 추가합니다
+
+- **Lumia Stream**: [Lumia Stream](https://lumiastream.com/) 지원을 추가합니다
+
+- **Genius 가사**: 더 많은 곡에 대해 가사 지원을 추가합니다
+
+- **네비게이션**: 브라우저에서처럼, UI에 직접 통합된 앞으로/뒤로 탐색하는 화살표를 추가합니다
+
+- **Google 로그인 제거**: UI에서 Google 로그인 버튼 및 링크 제거하기
+
+- **알림**: 노래 재생이 시작되면 알림을 표시 (Windows에서는 [대화형 알림](https://user-images.githubusercontent.com/78568641/114102651-63ce0e00-98d0-11eb-9dfe-c5a02bb54f9c.png) 사용 가능)
+
+- **PiP**: 앱을 PiP 모드로 전환할 수 있게 허용합니다
+
+- **재생 속도**: 빨리 듣거나, 천천히 들어보세요! [노래 속도를 제어하는 슬라이더를 추가합니다](https://user-images.githubusercontent.com/61631665/129976003-e55db5ba-bf42-448c-a059-26a009775e68.png)
+
+- **정확한 음량**: 사용자 지정 HUD와 사용자 지정 음량 단계 및 마우스 휠/단축키를 사용하여 음량을 정확하게 제어하세요
+
+- **영상 품질 체인저**: 영상 오버레이의 [버튼](https://user-images.githubusercontent.com/78568641/138574366-70324a5e-2d64-4f6a-acdd-dc2a2b9cecc5.png)으로 영상 품질을 변경할 수 있게 합니다
+
+- **단축키 (& MPRIS)**: 재생을 위한 전역 단축키 설정 허용 (재생/일시 정지/다음/이전) + 미디어 키를 재정의하여 [미디어 osd](https://user-images.githubusercontent.com/84923831/128601225-afa38c1f-dea8-4209-9f72-0f84c1dd8b54.png) 비활성화 + Ctrl/CMD + F 검색 활성화 + 미디어 키에 대한 리눅스 MPRIS 지원 활성화 + [고급 사용자](https://github.com/th-ch/youtube-music/issues/106#issuecomment-952156902)를 위한 [사용자 지정 단축키](https://github.com/Araxeus/youtube-music/blob/1e591d6a3df98449bcda6e63baab249b28026148/providers/song-controls.js#L13-L50) 지원
+
+- **무음 건너뛰기** - 노래의 무음 부분을 자동으로 건너뜁니다
+
+- [**SponsorBlock**](https://github.com/ajayyy/SponsorBlock): 인트로/아웃트로와 같은 음악이 아닌 부분이나, 노래가 재생되지 않는 뮤직 비디오의 일부를 자동으로 건너뜁니다
+
+- **작업표시줄 미디어 컨트롤**: [Windows 작업표시줄](https://user-images.githubusercontent.com/78568641/111916130-24a35e80-8a82-11eb-80c8-5021c1aa27f4.png)에서 재생을 제어하세요
+
+- **TouchBar**: macOS 사용자를 위한 TouchBar 위젯을 추가합니다
+
+- **Tuna-OBS**: [OBS](https://obsproject.com/)의 플러그인, [Tuna](https://obsproject.com/forum/resources/tuna.843/)와 통합을 활성화합니다
+
+- **영상 전환**: 영상/노래 모드를 전환하는 [버튼](https://user-images.githubusercontent.com/28893833/173663950-63e6610e-a532-49b7-9afa-54cb57ddfc15.png)을 추가합니다. 선택적으로 전체 영상 탭을 제거할 수도 있습니다
+
+- **비주얼라이저**: 플레이어에 시각화 도구 추가
+
+## 테마
+
+CSS 파일을 로드하여 애플리케이션의 모양을 변경할 수 있습니다(설정 > 시각적 변경 > 테마).
+
+일부 사전 정의 테마는 https://github.com/kerichdev/themes-for-ytmdesktop-player 에서 사용할 수 있습니다.
+
+## 개발
+
+```bash
+git clone https://github.com/th-ch/youtube-music
+cd youtube-music
+pnpm install --frozen-lockfile
+pnpm dev
+```
+
+## 나만의 플러그인 만들기
+
+플러그인을 사용하면 할 수 있는 것들:
+
+- 앱 조작 - Electron에서 `BrowserWindow`가 플러그인 핸들러로 전달
+- HTML/CSS를 조작하여 프론트엔드를 변경
+
+### 플러그인 만들기
+
+`plugins/나만의-플러그인-이름`에 폴더를 만듭니다:
+
+- `index.ts`: 플러그인의 메인 파일입니다.
+```typescript
+import style from './style.css?inline'; // 스타일을 인라인으로 가져옵니다
+
+import { createPlugin } from '@/utils';
+
+export default createPlugin({
+  name: 'Plugin Label',
+  restartNeeded: true, // 값이 true면, YTM은 재시작 다이얼로그를 표시합니다
+  config: {
+    enabled: false,
+  }, // 나의 커스텀 config
+  stylesheets: [style], // 나의 스타일
+  menu: async ({ getConfig, setConfig }) => {
+    // 모든 *Config 메서드는 Promise<T>로 래핑됩니다
+    const config = await getConfig();
+    return [
+      {
+        label: 'menu',
+        submenu: [1, 2, 3].map((value) => ({
+          label: `value ${value}`,
+          type: 'radio',
+          checked: config.value === value,
+          click() {
+            setConfig({ value });
+          },
+        })),
+      },
+    ];
+  },
+  backend: {
+    start({ window, ipc }) {
+      window.maximize();
+
+      // 이를 사용하여 렌더러 플러그인과 통신할 수 있습니다
+      ipc.handle('some-event', () => {
+        return 'hello';
+      });
+    },
+    // config가 변경되면 실행됩니다
+    onConfigChange(newConfig) { /* ... */ },
+    // 플러그인이 비활성화되면 실행됩니다
+    stop(context) { /* ... */ },
+  },
+  renderer: {
+    async start(context) {
+      console.log(await context.ipc.invoke('some-event'));
+    },
+    // 렌더러에서만 사용 가능한 훅입니다
+    onPlayerApiReady(api: YoutubePlayer, context: RendererContext<T>) {
+      // 플러그인의 config를 간단하게 설정할 수 있습니다
+      context.setConfig({ myConfig: api.getVolume() });
+    },
+    onConfigChange(newConfig) { /* ... */ },
+    stop(_context) { /* ... */ },
+  },
+  preload: {
+    async start({ getConfig }) {
+      const config = await getConfig();
+    },
+    onConfigChange(newConfig) {},
+    stop(_context) {},
+  },
+});
+```
+
+### 일반적인 사용 예
+
+- 사용자 정의 CSS 삽입: 같은 폴더에 `style.css` 파일을 생성합니다:
+
+```typescript
+// index.ts
+import style from './style.css?inline'; // 스타일을 인라인으로 가져옵니다
+
+import { createPlugin } from '@/utils';
+
+export default createPlugin({
+  name: 'Plugin Label',
+  restartNeeded: true, // 값이 true면, YTM은 재시작 다이얼로그를 표시합니다
+  config: {
+    enabled: false,
+  }, // 나의 커스텀 config
+  stylesheets: [style], // 나의 커스텀 스타일
+  renderer() {} // 렌더러 훅 정의
+});
+```
+
+- HTML을 변경하려는 경우:
+
+```typescript
+import { createPlugin } from '@/utils';
+
+export default createPlugin({
+  name: 'Plugin Label',
+  restartNeeded: true, // 값이 true면, YTM은 재시작 다이얼로그를 표시합니다
+  config: {
+    enabled: false,
+  }, // 나의 커스텀 config
+  renderer() {
+    // 로그인 버튼을 제거합니다
+    document.querySelector(".sign-in-link.ytmusic-nav-bar").remove();
+  } // 렌더러 훅 정의
+});
+```
+
+- 프론트엔드와 백엔드 간의 통신: Electron의 `ipcMain` 모듈을 사용하여 수행할 수 있습니다. `SponsorBlock` 플러그인의 `index.ts` 파일과 예제를 참조하세요.
+
+## 빌드
+
+1. 레포지토리를 복제 (clone) 합니다
+2. [이 가이드](https://pnpm.io/installation)에 따라 `pnpm`을 설치합니다.
+3. `pnpm install --frozen-lockfile`을 실행하여 종속성을 설치합니다.
+4. `pnpm build:OS`을 실행합니다.
+
+- `pnpm dist:win` - Windows
+- `pnpm dist:linux` - Linux
+- `pnpm dist:mac` - MacOS
+
+[electron-builder](https://github.com/electron-userland/electron-builder)를 사용하여 macOS, Linux 및 Windows용 앱을 빌드합니다.
+
+## 프로덕션 빌드 미리보기
+
+```bash
+pnpm start
+```
+
+## 테스트
+
+```bash
+pnpm test
+```
+
+[Playwright](https://playwright.dev/)를 사용하여 앱을 테스트합니다.
+
+## 라이선스
+
+MIT © [th-ch](https://github.com/th-ch/youtube-music)
+
+## 자주 묻는 질문
+
+### 앱 메뉴가 표시되지 않는 이유는 무엇인가요?
+
+`메뉴 숨기기` 옵션이 켜져 있는 경우 - <kbd>alt</kbd> 키(또는 인앱 메뉴 플러그인을 사용하는 경우 <kbd>\`</kbd> [백틱] 키)로 메뉴를 표시할 수 있습니다.

electron.vite.config.mts

@@ -0,0 +1,160 @@
+import { resolve, dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import { defineConfig, defineViteConfig } from 'electron-vite';
+import builtinModules from 'builtin-modules';
+import viteResolve from 'vite-plugin-resolve';
+import Inspect from 'vite-plugin-inspect';
+
+import { pluginVirtualModuleGenerator } from './vite-plugins/plugin-importer.mjs';
+import pluginLoader from './vite-plugins/plugin-loader.mjs';
+
+import type { UserConfig } from 'vite';
+import { i18nImporter } from './vite-plugins/i18n-importer.mjs';
+import solidPlugin from 'vite-plugin-solid';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+const resolveAlias = {
+  '@': resolve(__dirname, './src'),
+  '@assets': resolve(__dirname, './assets'),
+};
+
+export default defineConfig({
+  main: defineViteConfig(({ mode }) => {
+    const commonConfig: UserConfig = {
+      plugins: [
+        pluginLoader('backend'),
+        viteResolve({
+          'virtual:i18n': i18nImporter(),
+          'virtual:plugins': pluginVirtualModuleGenerator('main'),
+        }),
+      ],
+      publicDir: 'assets',
+      build: {
+        lib: {
+          entry: 'src/index.ts',
+          formats: ['cjs'],
+        },
+        outDir: 'dist/main',
+        commonjsOptions: {
+          ignoreDynamicRequires: true,
+        },
+        rollupOptions: {
+          external: ['electron', 'custom-electron-prompt', ...builtinModules],
+          input: './src/index.ts',
+        },
+      },
+      resolve: {
+        alias: resolveAlias,
+      },
+    };
+
+    if (mode === 'development') {
+      commonConfig.plugins?.push(
+        Inspect({ build: true, outputDir: '.vite-inspect/backend' }),
+      );
+      return commonConfig;
+    }
+
+    return {
+      ...commonConfig,
+      build: {
+        ...commonConfig.build,
+        minify: true,
+        cssMinify: true,
+      },
+    };
+  }),
+  preload: defineViteConfig(({ mode }) => {
+    const commonConfig: UserConfig = {
+      plugins: [
+        pluginLoader('preload'),
+        viteResolve({
+          'virtual:i18n': i18nImporter(),
+          'virtual:plugins': pluginVirtualModuleGenerator('preload'),
+        }),
+      ],
+      build: {
+        lib: {
+          entry: 'src/preload.ts',
+          formats: ['cjs'],
+        },
+        outDir: 'dist/preload',
+        commonjsOptions: {
+          ignoreDynamicRequires: true,
+        },
+        rollupOptions: {
+          external: ['electron', 'custom-electron-prompt', ...builtinModules],
+          input: './src/preload.ts',
+        },
+      },
+      resolve: {
+        alias: resolveAlias,
+      },
+    };
+
+    if (mode === 'development') {
+      commonConfig.plugins?.push(
+        Inspect({ build: true, outputDir: '.vite-inspect/preload' }),
+      );
+      return commonConfig;
+    }
+
+    return {
+      ...commonConfig,
+      build: {
+        ...commonConfig.build,
+        minify: true,
+        cssMinify: true,
+      },
+    };
+  }),
+  renderer: defineViteConfig(({ mode }) => {
+    const commonConfig: UserConfig = {
+      plugins: [
+        pluginLoader('renderer'),
+        viteResolve({
+          'virtual:i18n': i18nImporter(),
+          'virtual:plugins': pluginVirtualModuleGenerator('renderer'),
+        }),
+        solidPlugin(),
+      ],
+      root: './src/',
+      build: {
+        lib: {
+          entry: 'src/index.html',
+          formats: ['iife'],
+          name: 'renderer',
+        },
+        outDir: 'dist/renderer',
+        commonjsOptions: {
+          ignoreDynamicRequires: true,
+        },
+        rollupOptions: {
+          external: ['electron', ...builtinModules],
+          input: './src/index.html',
+        },
+      },
+      resolve: {
+        alias: resolveAlias,
+      },
+    };
+
+    if (mode === 'development') {
+      commonConfig.plugins?.push(
+        Inspect({ build: true, outputDir: '.vite-inspect/renderer' }),
+      );
+      return commonConfig;
+    }
+
+    return {
+      ...commonConfig,
+      build: {
+        ...commonConfig.build,
+        minify: true,
+        cssMinify: true,
+      },
+    };
+  }),
+});

error.html

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

index.ts

@@ -1,639 +0,0 @@
-import path from 'node:path';
-
-import { BrowserWindow, app, screen, globalShortcut, session, shell, dialog, ipcMain } from 'electron';
-import enhanceWebRequest, { BetterSession } from '@jellybrick/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 config from './config';
-import { refreshMenu, 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));
-
-async 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) {
-          await handler(win, options as never);
-        }
-      }
-    } catch (e) {
-      console.error(`Failed to load plugin "${plugin}"`, e);
-    }
-  }
-}
-
-async 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'),
-  });
-  await loadPlugins(win);
-
-  if (windowPosition) {
-    const { x: windowX, y: windowY } = windowPosition;
-    const winSize = win.getSize();
-    const displaySize
-      = screen.getDisplayNearestPoint(windowPosition).bounds;
-    if (
-      windowX + winSize[0] < displaySize.x - 8
-      || windowX - winSize[0] > displaySize.x + displaySize.width
-      || windowY < displaySize.y - 8
-      || windowY > 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(windowX, windowY);
-    }
-  }
-
-  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.on('closed', onClosed);
-
-  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();
-
-  win.webContents.loadURL(urlToLoad);
-
-  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 (errorCode !== -3) { // -3 is a false positive
-      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', async () => {
-  // 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 = await createMainWindow();
-  } else if (!mainWindow.isVisible()) {
-    mainWindow.show();
-  }
-});
-
-app.on('ready', async () => {
-  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 = await createMainWindow();
-  setApplicationMenu(mainWindow);
-  refreshMenu(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;
-      }
-    }
-  });
-}
-
-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 });
-  });
-
-  // When multiple listeners are defined, apply them all
-  betterSession.webRequest.setResolver('onHeadersReceived', async (listeners) => {
-    return listeners.reduce(
-      async (accumulator, listener) => {
-        const acc = await accumulator;
-        if (acc.cancel) {
-          return acc;
-        }
-
-        const result = await listener.apply();
-        return { ...accumulator, ...result };
-      },
-      Promise.resolve({ cancel: false }),
-    );
-  });
-}

menu.ts

@@ -1,480 +0,0 @@
-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 refreshMenu = (win: BrowserWindow) => {
-  setApplicationMenu(win);
-  if (inAppMenuActive) {
-    win.webContents.send('refreshMenu');
-  }
-};
-
-export const mainMenuTemplate = (win: BrowserWindow): MenuTemplate => {
-  const innerRefreshMenu = () => refreshMenu(win);
-
-  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, innerRefreshMenu);
-            }
-
-            return {
-              label: pluginLabel,
-              submenu: [
-                pluginEnabledMenu(pluginName, 'Enabled', true, innerRefreshMenu),
-                { type: 'separator' },
-                ...getPluginMenu(win, config.plugins.getOptions(pluginName), innerRefreshMenu),
-              ],
-            } 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' },
-      ],
-    },
-    {
-      label: 'About',
-      submenu: [
-        { role: 'about' },
-      ],
-    }
-  ];
-};
-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
-  }
-}

package.json

@@ -1,9 +1,9 @@
 {
   "name": "youtube-music",
   "productName": "YouTube Music",
-  "version": "2.1.1",
+  "version": "3.3.1",
   "description": "YouTube Music Desktop App - including custom plugins",
-  "main": "./dist/index.js",
+  "main": "./dist/main/index.js",
   "license": "MIT",
   "repository": "th-ch/youtube-music",
   "author": {
@@ -17,6 +17,7 @@
     "files": [
       "!*",
       "dist",
+      "assets",
       "license",
       "!node_modules",
       "node_modules/custom-electron-prompt/**",
@@ -25,6 +26,9 @@
       "!node_modules/**/*.map",
       "!node_modules/**/*.ts"
     ],
+    "asarUnpack": [
+      "assets"
+    ],
     "mac": {
       "identity": null,
       "target": [
@@ -73,6 +77,11 @@
         "rpm"
       ]
     },
+    "rpm": {
+      "depends": [
+        "/usr/lib64/libuuid.so.1"
+      ]
+    },
     "snap": {
       "slots": [
         {
@@ -87,106 +96,135 @@
     }
   },
   "scripts": {
-    "test": "npm run build && playwright test",
+    "test": "playwright test",
-    "test:debug": "DEBUG=pw:browser* npm run build && playwright test",
+    "test:debug": "cross-env DEBUG=pw:*,-pw:test:protocol playwright test",
-    "rollup:preload": "rollup -c rollup.preload.config.ts --configPlugin @rollup/plugin-typescript --bundleConfigAsCjs",
+    "build": "electron-vite build",
-    "rollup:main": "rollup -c rollup.main.config.ts --configPlugin @rollup/plugin-typescript --bundleConfigAsCjs",
+    "vite:inspect": "pnpm clean && electron-vite build --mode development && pnpm exec serve .vite-inspect",
-    "build": "npm run rollup:preload && npm run rollup:main",
+    "start": "electron-vite preview",
-    "start": "npm run build && electron ./dist/index.js",
+    "start:debug": "cross-env ELECTRON_ENABLE_LOGGING=1 pnpm start",
-    "start:debug": "ELECTRON_ENABLE_LOGGING=1 npm run start",
+    "dev": "electron-vite dev --watch",
-    "postinstall": "patch-package",
+    "dev:debug": "cross-env ELECTRON_ENABLE_LOGGING=1 pnpm dev",
-    "clean": "del-cli dist && del-cli pack",
+    "clean": "del-cli dist && del-cli pack && del-cli .vite-inspect",
-    "dist": "npm run clean && npm run build && electron-builder --win --mac --linux -p never",
+    "dist": "pnpm clean && pnpm build && pnpm electron-builder --win --mac --linux -p never",
-    "dist:linux": "npm run clean && npm run build && electron-builder --linux -p never",
+    "dist:linux": "pnpm clean && pnpm build && pnpm electron-builder --linux -p never",
-    "dist:mac": "npm run clean && npm run build && electron-builder --mac dmg:x64 -p never",
+    "dist:mac": "pnpm clean && pnpm build && pnpm electron-builder --mac dmg:x64 -p never",
-    "dist:mac:arm64": "npm run clean && npm run build && electron-builder --mac dmg:arm64 -p never",
+    "dist:mac:arm64": "pnpm clean && pnpm build && pnpm electron-builder --mac dmg:arm64 -p never",
-    "dist:win": "npm run clean && npm run build && electron-builder --win -p never",
+    "dist:win": "pnpm clean && pnpm build && pnpm electron-builder --win -p never",
-    "dist:win:x64": "npm run clean && npm run build && electron-builder --win nsis-web:x64 -p never",
+    "dist:win:x64": "pnpm clean && pnpm build && pnpm electron-builder --win nsis-web:x64 -p never",
     "lint": "eslint .",
-    "changelog": "auto-changelog",
+    "changelog": "npx --yes auto-changelog",
-    "release:linux": "npm run clean && npm run build && electron-builder --linux -p always -c.snap.publish=github",
+    "release:linux": "pnpm clean && pnpm build && pnpm electron-builder --linux -p always -c.snap.publish=github",
-    "release:mac": "npm run clean && npm run build && electron-builder --mac -p always",
+    "release:mac": "pnpm clean && pnpm build && pnpm electron-builder --mac -p always",
-    "release:win": "npm run clean && npm run build && electron-builder --win -p always",
+    "release:win": "pnpm clean && pnpm build && pnpm electron-builder --win -p always",
     "typecheck": "tsc -p tsconfig.json --noEmit"
   },
   "engines": {
-    "node": ">=16.0.0"
+    "node": ">=18.0.0"
+  },
+  "pnpm": {
+    "overrides": {
+      "usocket": "1.0.1",
+      "node-gyp": "10.0.1",
+      "xml2js": "0.6.2",
+      "node-fetch": "3.3.2",
+      "@electron/universal": "2.0.1",
+      "@babel/runtime": "7.23.8"
+    },
+    "patchedDependencies": {
+      "vudio@2.1.1": "patches/vudio@2.1.1.patch",
+      "@xhayper/discord-rpc@1.1.2": "patches/@xhayper__discord-rpc@1.1.2.patch"
+    }
   },
   "dependencies": {
-    "@cliqz/adblocker-electron": "1.26.8",
+    "@cliqz/adblocker-electron": "1.26.15",
+    "@cliqz/adblocker-electron-preload": "1.26.15",
+    "@electron-toolkit/tsconfig": "1.0.1",
+    "@electron/remote": "2.1.2",
     "@ffmpeg.wasm/core-mt": "0.12.0",
     "@ffmpeg.wasm/main": "0.12.0",
-    "@foobar404/wave": "2.0.4",
+    "@floating-ui/dom": "1.6.3",
+    "@foobar404/wave": "2.0.5",
     "@jellybrick/electron-better-web-request": "1.0.4",
     "@jellybrick/mpris-service": "2.1.4",
-    "@xhayper/discord-rpc": "1.0.23",
+    "@xhayper/discord-rpc": "1.1.2",
-    "async-mutex": "0.4.0",
+    "async-mutex": "0.4.1",
     "butterchurn": "3.0.0-beta.4",
     "butterchurn-presets": "3.0.0-beta.4",
+    "color": "4.2.3",
     "conf": "10.2.0",
     "custom-electron-prompt": "1.5.7",
+    "dbus-next": "0.10.2",
+    "deepmerge-ts": "5.1.0",
     "electron-debug": "3.2.0",
     "electron-is": "3.0.0",
     "electron-localshortcut": "3.2.1",
     "electron-store": "8.1.0",
     "electron-unhandled": "4.0.1",
-    "electron-updater": "6.1.4",
+    "electron-updater": "6.1.7",
     "fast-average-color": "9.4.0",
+    "fast-equals": "5.0.1",
     "filenamify": "6.0.0",
     "howler": "2.2.4",
     "html-to-text": "9.0.5",
+    "i18next": "23.8.3",
     "keyboardevent-from-electron-accelerator": "2.0.0",
     "keyboardevents-areequal": "0.2.2",
+    "node-html-parser": "6.1.12",
     "node-id3": "0.2.6",
-    "simple-youtube-age-restriction-bypass": "git+https://github.com/organization/Simple-YouTube-Age-Restriction-Bypass.git#v2.5.8",
+    "peerjs": "1.5.2",
+    "semver": "7.6.0",
+    "serve": "14.2.1",
+    "simple-youtube-age-restriction-bypass": "github:organization/Simple-YouTube-Age-Restriction-Bypass#v2.5.9",
+    "solid-floating-ui": "0.3.1",
+    "solid-js": "1.8.15",
+    "solid-styled-components": "0.28.5",
+    "solid-transition-group": "0.2.3",
+    "ts-morph": "21.0.1",
     "vudio": "2.1.1",
     "x11": "2.3.0",
-    "youtubei.js": "6.4.1",
+    "youtubei.js": "9.0.2"
-    "ytpl": "2.3.0"
-  },
-  "overrides": {
-    "rollup": "4.0.2",
-    "node-gyp": "9.4.0",
-    "xml2js": "0.6.2",
-    "node-fetch": "2.7.0",
-    "@electron/universal": "1.4.2",
-    "@babel/runtime": "7.23.2"
   },
   "devDependencies": {
-    "@playwright/test": "1.39.0",
+    "@playwright/test": "1.41.2",
-    "@rollup/plugin-commonjs": "25.0.5",
-    "@rollup/plugin-image": "3.0.3",
-    "@rollup/plugin-json": "6.0.1",
-    "@rollup/plugin-node-resolve": "15.2.3",
-    "@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/color": "3.0.6",
-    "@types/howler": "2.2.9",
+    "@types/electron-localshortcut": "3.1.3",
-    "@types/html-to-text": "9.0.2",
+    "@types/howler": "2.2.11",
-    "@typescript-eslint/eslint-plugin": "6.7.5",
+    "@types/html-to-text": "9.0.4",
-    "auto-changelog": "2.4.0",
+    "@types/semver": "7.5.7",
+    "@typescript-eslint/eslint-plugin": "7.0.1",
+    "bufferutil": "4.0.8",
+    "builtin-modules": "3.3.0",
+    "cross-env": "7.0.3",
     "del-cli": "5.1.0",
-    "electron": "27.0.0",
+    "discord-api-types": "0.37.70",
-    "electron-builder": "24.6.4",
+    "electron": "28.2.3",
+    "electron-builder": "24.9.1",
     "electron-devtools-installer": "3.2.0",
-    "eslint": "8.51.0",
+    "electron-vite": "2.0.0",
-    "eslint-plugin-import": "2.28.1",
+    "esbuild": "0.20.0",
-    "eslint-plugin-prettier": "5.0.1",
+    "eslint": "8.56.0",
-    "node-gyp": "9.4.0",
+    "eslint-import-resolver-exports": "1.0.0-beta.5",
-    "patch-package": "8.0.0",
+    "eslint-import-resolver-typescript": "3.6.1",
-    "playwright": "1.39.0",
+    "eslint-plugin-import": "2.29.1",
-    "rollup": "4.0.2",
+    "eslint-plugin-prettier": "5.1.3",
-    "rollup-plugin-copy": "3.5.0",
+    "glob": "10.3.10",
-    "rollup-plugin-import-css": "3.3.5",
+    "node-gyp": "10.0.1",
-    "rollup-plugin-string": "3.0.0",
+    "playwright": "1.41.2",
-    "typescript": "5.2.2"
+    "rollup": "4.12.0",
+    "typescript": "5.3.3",
+    "utf-8-validate": "6.0.3",
+    "vite": "5.1.3",
+    "vite-plugin-inspect": "0.8.3",
+    "vite-plugin-resolve": "2.5.1",
+    "vite-plugin-solid": "2.10.1",
+    "ws": "8.16.0"
   },
   "auto-changelog": {
     "hideCredit": true,
     "package": true,
     "unreleased": true,
     "output": "changelog.md"
-  }
+  },
+  "packageManager": "pnpm@8.15.3"
 }

patches/@xhayper__discord-rpc@1.1.2.patch

@@ -0,0 +1,17 @@
+diff --git a/package.json b/package.json
+index 40db5dfbd8a4455ce2987d8115eca9882e1f9f14..414fc6986b9c0cc288908eb0107b90c4bfd916b2 100644
+--- a/package.json
++++ b/package.json
+@@ -25,11 +25,7 @@
+     },
+     "dependencies": {
+         "axios": "^1.6.2",
+-        "ws": "^8.15.1"
+-    },
+-    "optionalDependencies": {
+-        "bufferutil": "^4.0.8",
+-        "utf-8-validate": "^6.0.3"
++        "ws": "^8.16.0"
+     },
+     "devDependencies": {
+         "@types/node": "^14.*",

patches/vudio@2.1.1.patch

@@ -0,0 +1,20 @@
+diff --git a/umd/vudio.js b/umd/vudio.js
+index d0d1127e57125ad4e77442af2db4a26998c7b385..c0b66bd4327c65c31dc6e588bfa4ae6ec70bd3b8 100644
+--- a/umd/vudio.js
++++ b/umd/vudio.js
+@@ -147,7 +147,6 @@
+ 
+             source.connect(this.analyser);
+             this.analyser.fftSize = this.option.accuracy * 2;
+-            this.analyser.connect(audioContext.destination);
+ 
+             this.freqByteData = new Uint8Array(this.analyser.frequencyBinCount);
+ 
+@@ -207,7 +206,6 @@
+ 
+             source.connect(this.analyser);
+             this.analyser.fftSize = this.option.accuracy * 2;
+-            this.analyser.connect(audioContext.destination);
+         },
+ 
+         __rebuildData : function (freqByteData, horizontalAlign) {

patches/youtubei.js+6.4.1.patch

@@ -1,38 +0,0 @@
-diff --git a/node_modules/youtubei.js/bundle/node.cjs b/node_modules/youtubei.js/bundle/node.cjs
-index 7e3072e..bf5be6a 100644
---- a/node_modules/youtubei.js/bundle/node.cjs
-+++ b/node_modules/youtubei.js/bundle/node.cjs
-@@ -16969,7 +16969,13 @@ var _Cache_createCache;
- var meta_url = import_meta.url;
- var is_cjs = !meta_url;
- var __dirname__ = is_cjs ? __dirname : import_path.default.dirname((0, import_url.fileURLToPath)(meta_url));
--var package_json = JSON.parse((0, import_fs.readFileSync)(import_path.default.resolve(__dirname__, is_cjs ? "../package.json" : "../../package.json"), "utf-8"));
-+var package_json = {
-+  homepage: "https://github.com/LuanRT/YouTube.js#readme",
-+  version: "6.4.1",
-+  bugs: {
-+    url: "https://github.com/LuanRT/YouTube.js/issues"
-+  }
-+};
- var repo_url = (_a3 = package_json.homepage) === null || _a3 === void 0 ? void 0 : _a3.split("#")[0];
- var Cache = class {
-   constructor(persistent = false, persistent_directory) {
-diff --git a/node_modules/youtubei.js/dist/src/platform/node.js b/node_modules/youtubei.js/dist/src/platform/node.js
-index 0e1b2ca..17b437c 100644
---- a/node_modules/youtubei.js/dist/src/platform/node.js
-+++ b/node_modules/youtubei.js/dist/src/platform/node.js
-@@ -16,7 +16,13 @@ import evaluate from './jsruntime/jinter.js';
- const meta_url = import.meta.url;
- const is_cjs = !meta_url;
- const __dirname__ = is_cjs ? __dirname : path.dirname(fileURLToPath(meta_url));
--const package_json = JSON.parse(readFileSync(path.resolve(__dirname__, is_cjs ? '../package.json' : '../../package.json'), 'utf-8'));
-+const package_json = {
-+  homepage: "https://github.com/LuanRT/YouTube.js#readme",
-+  version: "6.4.1",
-+  bugs: {
-+    url: "https://github.com/LuanRT/YouTube.js/issues"
-+  }
-+};
- const repo_url = (_a = package_json.homepage) === null || _a === void 0 ? void 0 : _a.split('#')[0];
- class Cache {
-     constructor(persistent = false, persistent_directory) {

plugins/adblocker/back.ts

@@ -1,19 +0,0 @@
-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 (shouldUseBlocklists()) {
-    await loadAdBlockerEngine(
-      win.webContents.session,
-      options.cache,
-      options.additionalBlockLists,
-      options.disableDefaultLists,
-    );
-  }
-};

plugins/adblocker/config.ts

@@ -1,15 +0,0 @@
-/* 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 = () => config.get('blocker') !== blockers.InPlayer;
-
-export default Object.assign(config, {
-  shouldUseBlocklists,
-  blockers,
-});

plugins/adblocker/inject.d.ts

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

plugins/adblocker/menu.ts

@@ -1,21 +0,0 @@
-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.ts

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

plugins/album-color-theme/back.ts

@@ -1,9 +0,0 @@
-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

@@ -1,127 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,138 +0,0 @@
-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

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

plugins/audio-compressor/front.ts

@@ -1,17 +0,0 @@
-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.ts

@@ -1,9 +0,0 @@
-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 +0,0 @@
-#nav-bar-background,
-#header.ytmusic-item-section-renderer,
-ytmusic-tabs {
-  background: rgba(0, 0, 0, 0.3) !important;
-  backdrop-filter: blur(8px) !important;
-}
-
-#nav-bar-divider {
-  display: none !important;
-}

plugins/bypass-age-restrictions/front.ts

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

plugins/captions-selector/back.ts

@@ -1,19 +0,0 @@
-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.ts

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

plugins/captions-selector/front.ts

@@ -1,101 +0,0 @@
-/* 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.ts

@@ -1,22 +0,0 @@
-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,17 +0,0 @@
-<tp-yt-paper-icon-button aria-disabled="false" aria-label="Open captions selector"
-                         class="player-captions-button style-scope ytmusic-player" icon="yt-icons:subtitles"
-                         role="button" tabindex="0"
-                         title="Open captions selector">
-  <tp-yt-iron-icon class="style-scope tp-yt-paper-icon-button" id="icon">
-    <svg class="style-scope yt-icon"
-         focusable="false" preserveAspectRatio="xMidYMid meet"
-         style="pointer-events: none; display: block; width: 100%; height: 100%;"
-         viewBox="0 0 24 24">
-      <g class="style-scope yt-icon">
-        <path
-          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

@@ -1,10 +0,0 @@
-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.ts

@@ -1,11 +0,0 @@
-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.ts

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

plugins/crossfade/front.ts

@@ -1,164 +0,0 @@
-/* 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.ts

@@ -1,86 +0,0 @@
-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.ts

@@ -1,23 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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.ts

@@ -1,220 +0,0 @@
-import { app, dialog, ipcMain } 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, { type SongInfoCallback, type SongInfo } 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?: 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();
-  }
-};
-
-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: SongInfoCallback;
-
-type DiscordOptions = ConfigType<'discord'>;
-
-export default (
-  win: Electron.BrowserWindow,
-  options: DiscordOptions,
-) => {
-  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();
-    }
-  });
-
-  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 ?? '' }] : []),
-        ...(options.hideGitHubButton ? [] : [{ 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', () => {
-    let lastSongInfo: SongInfo;
-    registerCallback((songInfo) => {
-      lastSongInfo = songInfo;
-      updateActivity(songInfo);
-    });
-    connect();
-    let lastSent = Date.now();
-    ipcMain.on('timeChanged', (_, t: number) => {
-      const currentTime = Date.now();
-      // if lastSent is more than 5 seconds ago, send the new time
-      if (currentTime - lastSent > 5000) {
-        lastSent = currentTime;
-        lastSongInfo.elapsedSeconds = t;
-        updateActivity(lastSongInfo);
-      }
-    });
-  });
-  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.ts

@@ -1,98 +0,0 @@
-import prompt from 'custom-electron-prompt';
-
-import { clear, connect, isConnected, registerRefresh } from './back';
-
-import { setMenuOptions } from '../../config/plugins';
-import promptOptions from '../../providers/prompt-options';
-import { singleton } from '../../providers/decorators';
-import { MenuTemplate } from '../../menu';
-
-import type { ConfigType } from '../../config/dynamic';
-
-const registerRefreshOnce = singleton((refreshMenu: () => void) => {
-  registerRefresh(refreshMenu);
-});
-
-type DiscordOptions = ConfigType<'discord'>;
-
-export default (win: Electron.BrowserWindow, options: DiscordOptions, refreshMenu: () => void): MenuTemplate => {
-  registerRefreshOnce(refreshMenu);
-
-  return [
-    {
-      label: isConnected() ? 'Connected' : 'Reconnect',
-      enabled: !isConnected(),
-      click: () => connect(),
-    },
-    {
-      label: 'Auto reconnect',
-      type: 'checkbox',
-      checked: options.autoReconnect,
-      click(item: Electron.MenuItem) {
-        options.autoReconnect = item.checked;
-        setMenuOptions('discord', options);
-      },
-    },
-    {
-      label: 'Clear activity',
-      click: clear,
-    },
-    {
-      label: 'Clear activity after timeout',
-      type: 'checkbox',
-      checked: options.activityTimoutEnabled,
-      click(item: Electron.MenuItem) {
-        options.activityTimoutEnabled = item.checked;
-        setMenuOptions('discord', options);
-      },
-    },
-    {
-      label: 'Listen Along',
-      type: 'checkbox',
-      checked: options.listenAlong,
-      click(item: Electron.MenuItem) {
-        options.listenAlong = item.checked;
-        setMenuOptions('discord', options);
-      },
-    },
-    {
-      label: 'Hide GitHub link Button',
-      type: 'checkbox',
-      checked: options.hideGitHubButton,
-      click(item: Electron.MenuItem) {
-        options.hideGitHubButton = item.checked;
-        setMenuOptions('discord', options);
-      },
-    },
-    {
-      label: 'Hide duration left',
-      type: 'checkbox',
-      checked: options.hideDurationLeft,
-      click(item: Electron.MenuItem) {
-        options.hideDurationLeft = item.checked;
-        setMenuOptions('discord', options);
-      },
-    },
-    {
-      label: 'Set inactivity timeout',
-      click: () => setInactivityTimeout(win, options),
-    },
-  ];
-};
-
-async function setInactivityTimeout(win: Electron.BrowserWindow, options: DiscordOptions) {
-  const output = await prompt({
-    title: 'Set Inactivity Timeout',
-    label: 'Enter inactivity timeout in seconds:',
-    value: String(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);
-  }
-}

plugins/downloader/config.ts

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

plugins/downloader/front.ts

@@ -1,83 +0,0 @@
-import { ipcRenderer } from 'electron';
-
-import downloadHTML from './templates/download.html';
-
-import defaultConfig from '../../config/defaults';
-import { getSongMenu } from '../../providers/dom-elements';
-import { ElementFromHtml } from '../utils';
-import { getSongInfo } from '../../providers/song-info-front';
-
-let menu: Element | null = null;
-let progress: Element | null = null;
-const downloadButton = ElementFromHtml(downloadHTML);
-
-let doneFirstLoad = false;
-
-const menuObserver = new MutationObserver(() => {
-  if (!menu) {
-    menu = getSongMenu();
-    if (!menu) {
-      return;
-    }
-  }
-
-  if (menu.contains(downloadButton)) {
-    return;
-  }
-
-  const menuUrl = document.querySelector<HTMLAnchorElement>('tp-yt-paper-listbox [tabindex="0"] #navigation-endpoint')?.href;
-  if (!menuUrl?.includes('watch?') && doneFirstLoad) {
-    return;
-  }
-
-  menu.prepend(downloadButton);
-  progress = document.querySelector('#ytmcustom-download');
-
-  if (doneFirstLoad) {
-    return;
-  }
-
-  setTimeout(() => doneFirstLoad ||= true, 500);
-});
-
-// TODO: re-enable once contextIsolation is set to true
-// contextBridge.exposeInMainWorld("downloader", {
-// download: () => {
-// eslint-disable-next-line @typescript-eslint/no-explicit-any,@typescript-eslint/no-unsafe-member-access
-(global as any).download = () => {
-  let videoUrl = getSongMenu()
-    // Selector of first button which is always "Start Radio"
-    ?.querySelector('ytmusic-menu-navigation-item-renderer[tabindex="-1"] #navigation-endpoint')
-    ?.getAttribute('href');
-  if (videoUrl) {
-    if (videoUrl.startsWith('watch?')) {
-      videoUrl = defaultConfig.url + '/' + videoUrl;
-    }
-
-    if (videoUrl.includes('?playlist=')) {
-      ipcRenderer.send('download-playlist-request', videoUrl);
-      return;
-    }
-  } else {
-    videoUrl = getSongInfo().url || window.location.href;
-  }
-
-  ipcRenderer.send('download-song', videoUrl);
-};
-
-export default () => {
-  document.addEventListener('apiLoaded', () => {
-    menuObserver.observe(document.querySelector('ytmusic-popup-container')!, {
-      childList: true,
-      subtree: true,
-    });
-  }, { once: true, passive: true });
-
-  ipcRenderer.on('downloader-feedback', (_, feedback: string) => {
-    if (progress) {
-      progress.innerHTML = feedback || 'Download';
-    } else {
-      console.warn('Cannot update progress');
-    }
-  });
-};

plugins/downloader/menu.ts

@@ -1,46 +0,0 @@
-import { dialog } from 'electron';
-
-import { downloadPlaylist } from './back';
-import { defaultMenuDownloadLabel, getFolder } from './utils';
-import { DefaultPresetList } from './types';
-import config from './config';
-
-import { MenuTemplate } from '../../menu';
-
-export default (): MenuTemplate => [
-  {
-    label: defaultMenuDownloadLabel,
-    click: () => downloadPlaylist(),
-  },
-  {
-    label: 'Choose download folder',
-    click() {
-      const result = dialog.showOpenDialogSync({
-        properties: ['openDirectory', 'createDirectory'],
-        defaultPath: getFolder(config.get('downloadFolder') ?? ''),
-      });
-      if (result) {
-        config.set('downloadFolder', result[0]);
-      } // Else = user pressed cancel
-    },
-  },
-  {
-    label: 'Presets',
-    submenu: Object.keys(DefaultPresetList).map((preset) => ({
-      label: preset,
-      type: 'radio',
-      checked: config.get('selectedPreset') === preset,
-      click() {
-        config.set('selectedPreset', preset);
-      },
-    })),
-  },
-  {
-    label: 'Skip existing files',
-    type: 'checkbox',
-    checked: config.get('skipExisting'),
-    click(item) {
-      config.set('skipExisting', item.checked);
-    },
-  },
-];

plugins/downloader/types.ts

@@ -1,116 +0,0 @@
-export interface Preset {
-  extension?: string | null;
-  ffmpegArgs: string[];
-}
-
-// Presets for FFmpeg
-export const DefaultPresetList: Record<string, Preset> = {
-  'mp3 (256kbps)': {
-    extension: 'mp3',
-    ffmpegArgs: ['-b:a', '256k'],
-  },
-  'Source': {
-    extension: undefined,
-    ffmpegArgs: ['-acodec', 'copy'],
-  },
-  'Custom': {
-    extension: null,
-    ffmpegArgs: [],
-  }
-};
-
-export interface YouTubeFormat {
-  itag: number;
-  container: string;
-  content: string;
-  resolution: string;
-  bitrate: string;
-  range: string;
-  vrOr3D: string;
-}
-
-// converted from https://gist.github.com/sidneys/7095afe4da4ae58694d128b1034e01e2#file-youtube_format_code_itag_list-md
-export const YoutubeFormatList: YouTubeFormat[] = [
-  { itag: 5, container: 'flv', content: 'audio/video', resolution: '240p', bitrate: '-', range: '-', vrOr3D: '-' },
-  { itag: 6, container: 'flv', content: 'audio/video', resolution: '270p', bitrate: '-', range: '-', vrOr3D: '-' },
-  { itag: 17, container: '3gp', content: 'audio/video', resolution: '144p', bitrate: '-', range: '-', vrOr3D: '-' },
-  { itag: 18, container: 'mp4', content: 'audio/video', resolution: '360p', bitrate: '-', range: '-', vrOr3D: '-' },
-  { itag: 22, container: 'mp4', content: 'audio/video', resolution: '720p', bitrate: '-', range: '-', vrOr3D: '-' },
-  { itag: 34, container: 'flv', content: 'audio/video', resolution: '360p', bitrate: '-', range: '-', vrOr3D: '-' },
-  { itag: 35, container: 'flv', content: 'audio/video', resolution: '480p', bitrate: '-', range: '-', vrOr3D: '-' },
-  { itag: 36, container: '3gp', content: 'audio/video', resolution: '180p', bitrate: '-', range: '-', vrOr3D: '-' },
-  { itag: 37, container: 'mp4', content: 'audio/video', resolution: '1080p', bitrate: '-', range: '-', vrOr3D: '-' },
-  { itag: 38, container: 'mp4', content: 'audio/video', resolution: '3072p', bitrate: '-', range: '-', vrOr3D: '-' },
-  { itag: 43, container: 'webm', content: 'audio/video', resolution: '360p', bitrate: '-', range: '-', vrOr3D: '-' },
-  { itag: 44, container: 'webm', content: 'audio/video', resolution: '480p', bitrate: '-', range: '-', vrOr3D: '-' },
-  { itag: 45, container: 'webm', content: 'audio/video', resolution: '720p', bitrate: '-', range: '-', vrOr3D: '-' },
-  { itag: 46, container: 'webm', content: 'audio/video', resolution: '1080p', bitrate: '-', range: '-', vrOr3D: '-' },
-  { itag: 82, container: 'mp4', content: 'audio/video', resolution: '360p', bitrate: '-', range: '-', vrOr3D: '3D' },
-  { itag: 83, container: 'mp4', content: 'audio/video', resolution: '480p', bitrate: '-', range: '-', vrOr3D: '3D' },
-  { itag: 84, container: 'mp4', content: 'audio/video', resolution: '720p', bitrate: '-', range: '-', vrOr3D: '3D' },
-  { itag: 85, container: 'mp4', content: 'audio/video', resolution: '1080p', bitrate: '-', range: '-', vrOr3D: '3D' },
-  { itag: 91, container: 'hls', content: 'audio/video', resolution: '144p', bitrate: '-', range: '-', vrOr3D: '3D' },
-  { itag: 92, container: 'hls', content: 'audio/video', resolution: '240p', bitrate: '-', range: '-', vrOr3D: '3D' },
-  { itag: 93, container: 'hls', content: 'audio/video', resolution: '360p', bitrate: '-', range: '-', vrOr3D: '3D' },
-  { itag: 94, container: 'hls', content: 'audio/video', resolution: '480p', bitrate: '-', range: '-', vrOr3D: '3D' },
-  { itag: 95, container: 'hls', content: 'audio/video', resolution: '720p', bitrate: '-', range: '-', vrOr3D: '3D' },
-  { itag: 96, container: 'hls', content: 'audio/video', resolution: '1080p', bitrate: '-', range: '-', vrOr3D: '-' },
-  { itag: 100, container: 'webm', content: 'audio/video', resolution: '360p', bitrate: '-', range: '-', vrOr3D: '3D' },
-  { itag: 101, container: 'webm', content: 'audio/video', resolution: '480p', bitrate: '-', range: '-', vrOr3D: '3D' },
-  { itag: 102, container: 'webm', content: 'audio/video', resolution: '720p', bitrate: '-', range: '-', vrOr3D: '3D' },
-  { itag: 132, container: 'hls', content: 'audio/video', resolution: '240p', bitrate: '-', range: '-', vrOr3D: '' },
-  { itag: 133, container: 'mp4', content: 'video', resolution: '240p', bitrate: '-', range: '-', vrOr3D: '' },
-  { itag: 134, container: 'mp4', content: 'video', resolution: '360p', bitrate: '-', range: '-', vrOr3D: '' },
-  { itag: 135, container: 'mp4', content: 'video', resolution: '480p', bitrate: '-', range: '-', vrOr3D: '' },
-  { itag: 136, container: 'mp4', content: 'video', resolution: '720p', bitrate: '-', range: '-', vrOr3D: '' },
-  { itag: 137, container: 'mp4', content: 'video', resolution: '1080p', bitrate: '-', range: '-', vrOr3D: '' },
-  { itag: 138, container: 'mp4', content: 'video', resolution: '2160p60', bitrate: '-', range: '-', vrOr3D: '' },
-  { itag: 139, container: 'm4a', content: 'audio', resolution: '-', bitrate: '48k', range: '-', vrOr3D: '' },
-  { itag: 140, container: 'm4a', content: 'audio', resolution: '-', bitrate: '128k', range: '-', vrOr3D: '' },
-  { itag: 141, container: 'm4a', content: 'audio', resolution: '-', bitrate: '256k', range: '-', vrOr3D: '' },
-  { itag: 151, container: 'hls', content: 'audio/video', resolution: '72p', bitrate: '-', range: '-', vrOr3D: '' },
-  { itag: 160, container: 'mp4', content: 'video', resolution: '144p', bitrate: '-', range: '-', vrOr3D: '' },
-  { itag: 167, container: 'webm', content: 'video', resolution: '360p', bitrate: '-', range: '-', vrOr3D: '' },
-  { itag: 168, container: 'webm', content: 'video', resolution: '480p', bitrate: '-', range: '-', vrOr3D: '' },
-  { itag: 169, container: 'webm', content: 'video', resolution: '1080p', bitrate: '-', range: '-', vrOr3D: '' },
-  { itag: 171, container: 'webm', content: 'audio', resolution: '-', bitrate: '128k', range: '-', vrOr3D: '' },
-  { itag: 218, container: 'webm', content: 'video', resolution: '480p', bitrate: '-', range: '-', vrOr3D: '' },
-  { itag: 219, container: 'webm', content: 'video', resolution: '144p', bitrate: '-', range: '-', vrOr3D: '' },
-  { itag: 242, container: 'webm', content: 'video', resolution: '240p', bitrate: '-', range: '-', vrOr3D: '' },
-  { itag: 243, container: 'webm', content: 'video', resolution: '360p', bitrate: '-', range: '-', vrOr3D: '' },
-  { itag: 244, container: 'webm', content: 'video', resolution: '480p', bitrate: '-', range: '-', vrOr3D: '' },
-  { itag: 245, container: 'webm', content: 'video', resolution: '480p', bitrate: '-', range: '-', vrOr3D: '' },
-  { itag: 246, container: 'webm', content: 'video', resolution: '480p', bitrate: '-', range: '-', vrOr3D: '' },
-  { itag: 247, container: 'webm', content: 'video', resolution: '720p', bitrate: '-', range: '-', vrOr3D: '' },
-  { itag: 248, container: 'webm', content: 'video', resolution: '1080p', bitrate: '-', range: '-', vrOr3D: '' },
-  { itag: 249, container: 'webm', content: 'audio', resolution: '-', bitrate: '50k', range: '-', vrOr3D: '' },
-  { itag: 250, container: 'webm', content: 'audio', resolution: '-', bitrate: '70k', range: '-', vrOr3D: '' },
-  { itag: 251, container: 'webm', content: 'audio', resolution: '-', bitrate: '160k', range: '-', vrOr3D: '' },
-  { itag: 264, container: 'mp4', content: 'video', resolution: '1440p', bitrate: '-', range: '-', vrOr3D: '' },
-  { itag: 266, container: 'mp4', content: 'video', resolution: '2160p60', bitrate: '-', range: '-', vrOr3D: '' },
-  { itag: 271, container: 'webm', content: 'video', resolution: '1440p', bitrate: '-', range: '-', vrOr3D: '' },
-  { itag: 272, container: 'webm', content: 'video', resolution: '4320p', bitrate: '-', range: '-', vrOr3D: '' },
-  { itag: 278, container: 'webm', content: 'video', resolution: '144p', bitrate: '-', range: '-', vrOr3D: '' },
-  { itag: 298, container: 'mp4', content: 'video', resolution: '720p60', bitrate: '-', range: '-', vrOr3D: '' },
-  { itag: 299, container: 'mp4', content: 'video', resolution: '1080p60', bitrate: '-', range: '-', vrOr3D: '' },
-  { itag: 302, container: 'webm', content: 'video', resolution: '720p60', bitrate: '-', range: '-', vrOr3D: '' },
-  { itag: 303, container: 'webm', content: 'video', resolution: '1080p60', bitrate: '-', range: '-', vrOr3D: '' },
-  { itag: 308, container: 'webm', content: 'video', resolution: '1440p60', bitrate: '-', range: '-', vrOr3D: '' },
-  { itag: 313, container: 'webm', content: 'video', resolution: '2160p', bitrate: '-', range: '-', vrOr3D: '' },
-  { itag: 315, container: 'webm', content: 'video', resolution: '2160p60', bitrate: '-', range: '-', vrOr3D: '' },
-  { itag: 330, container: 'webm', content: 'video', resolution: '144p60', bitrate: '-', range: 'hdr', vrOr3D: '' },
-  { itag: 331, container: 'webm', content: 'video', resolution: '240p60', bitrate: '-', range: 'hdr', vrOr3D: '' },
-  { itag: 332, container: 'webm', content: 'video', resolution: '360p60', bitrate: '-', range: 'hdr', vrOr3D: '' },
-  { itag: 333, container: 'webm', content: 'video', resolution: '480p60', bitrate: '-', range: 'hdr', vrOr3D: '' },
-  { itag: 334, container: 'webm', content: 'video', resolution: '720p60', bitrate: '-', range: 'hdr', vrOr3D: '' },
-  { itag: 335, container: 'webm', content: 'video', resolution: '1080p60', bitrate: '-', range: 'hdr', vrOr3D: '' },
-  { itag: 336, container: 'webm', content: 'video', resolution: '1440p60', bitrate: '-', range: 'hdr', vrOr3D: '' },
-  { itag: 337, container: 'webm', content: 'video', resolution: '2160p60', bitrate: '-', range: 'hdr', vrOr3D: '' },
-  { itag: 272, container: 'webm', content: 'video', resolution: '2880p/4320p', bitrate: '-', range: '-', vrOr3D: '' },
-  { itag: 399, container: 'mp4', content: 'video', resolution: '1080p', bitrate: '-', range: '-', vrOr3D: '' },
-  { itag: 400, container: 'mp4', content: 'video', resolution: '1440p', bitrate: '-', range: '-', vrOr3D: '' },
-  { itag: 401, container: 'mp4', content: 'video', resolution: '2160p', bitrate: '-', range: '-', vrOr3D: '' },
-  { itag: 402, container: 'mp4', content: 'video', resolution: '2880p', bitrate: '-', range: '-', vrOr3D: '' },
-  { itag: 571, container: 'mp4', content: 'video', resolution: '3840p', bitrate: '-', range: '-', vrOr3D: '' },
-  { itag: 702, container: 'mp4', content: 'video', resolution: '3840p', bitrate: '-', range: '-', vrOr3D: '' },
-];

plugins/exponential-volume/front.ts

@@ -1,45 +0,0 @@
-// "YouTube Music fix volume ratio 0.4" by Marco Pfeiffer
-// https://greasyfork.org/en/scripts/397686-youtube-music-fix-volume-ratio/
-
-const exponentialVolume = () => {
-  // Manipulation exponent, higher value = lower volume
-  // 3 is the value used by pulseaudio, which Barteks2x figured out this gist here: https://gist.github.com/Barteks2x/a4e189a36a10c159bb1644ffca21c02a
-  // 0.05 (or 5%) is the lowest you can select in the UI which with an exponent of 3 becomes 0.000125 or 0.0125%
-  const EXPONENT = 3;
-
-  const storedOriginalVolumes = new WeakMap<HTMLMediaElement, number>();
-  const propertyDescriptor = Object.getOwnPropertyDescriptor(
-    HTMLMediaElement.prototype,
-    'volume',
-  );
-  Object.defineProperty(HTMLMediaElement.prototype, 'volume', {
-    get(this: HTMLMediaElement) {
-      const lowVolume = propertyDescriptor?.get?.call(this) as number ?? 0;
-      const calculatedOriginalVolume = lowVolume ** (1 / EXPONENT);
-
-      // The calculated value has some accuracy issues which can lead to problems for implementations that expect exact values.
-      // To avoid this, I'll store the unmodified volume to return it when read here.
-      // This mostly solves the issue, but the initial read has no stored value and the volume can also change though external influences.
-      // To avoid ill effects, I check if the stored volume is somewhere in the same range as the calculated volume.
-      const storedOriginalVolume = storedOriginalVolumes.get(this) ?? 0;
-      const storedDeviation = Math.abs(
-        storedOriginalVolume - calculatedOriginalVolume,
-      );
-
-      return storedDeviation < 0.01
-        ? storedOriginalVolume
-        : calculatedOriginalVolume;
-    },
-    set(this: HTMLMediaElement, originalVolume: number) {
-      const lowVolume = originalVolume ** EXPONENT;
-      storedOriginalVolumes.set(this, originalVolume);
-      propertyDescriptor?.set?.call(this, lowVolume);
-    },
-  });
-};
-
-export default () =>
-  document.addEventListener('apiLoaded', exponentialVolume, {
-    once: true,
-    passive: true,
-  });

plugins/in-app-menu/assets/close.svg

@@ -1,3 +0,0 @@
-<svg fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-  <path fill="#ffffff" d="m4.21 4.387.083-.094a1 1 0 0 1 1.32-.083l.094.083L12 10.585l6.293-6.292a1 1 0 1 1 1.414 1.414L13.415 12l6.292 6.293a1 1 0 0 1 .083 1.32l-.083.094a1 1 0 0 1-1.32.083l-.094-.083L12 13.415l-6.293 6.292a1 1 0 0 1-1.414-1.414L10.585 12 4.293 5.707a1 1 0 0 1-.083-1.32l.083-.094-.083.094Z"/>
-</svg>

plugins/in-app-menu/assets/maximize.svg

@@ -1,3 +0,0 @@
-<svg fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-  <path fill="#ffffff" d="M6 3h12a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3Zm0 2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1H6Z"/>
-</svg>

plugins/in-app-menu/assets/menu.svg

@@ -1,3 +0,0 @@
-<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>

plugins/in-app-menu/assets/minimize.svg

@@ -1,3 +0,0 @@
-<svg fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-  <path fill="#ffffff" d="M3.755 12.5h16.492a.75.75 0 0 0 0-1.5H3.755a.75.75 0 0 0 0 1.5Z" />
-</svg>

plugins/in-app-menu/assets/unmaximize.svg

@@ -1,3 +0,0 @@
-<svg fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-  <path fill="#ffffff" d="M7.518 5H6.009a3.25 3.25 0 0 1 3.24-3h8.001A4.75 4.75 0 0 1 22 6.75v8a3.25 3.25 0 0 1-3 3.24v-1.508a1.75 1.75 0 0 0 1.5-1.732v-8a3.25 3.25 0 0 0-3.25-3.25h-8A1.75 1.75 0 0 0 7.518 5ZM5.25 6A3.25 3.25 0 0 0 2 9.25v9.5A3.25 3.25 0 0 0 5.25 22h9.5A3.25 3.25 0 0 0 18 18.75v-9.5A3.25 3.25 0 0 0 14.75 6h-9.5ZM3.5 9.25c0-.966.784-1.75 1.75-1.75h9.5c.967 0 1.75.784 1.75 1.75v9.5a1.75 1.75 0 0 1-1.75 1.75h-9.5a1.75 1.75 0 0 1-1.75-1.75v-9.5Z"/>
-</svg>

plugins/in-app-menu/back.ts

@@ -1,67 +0,0 @@
-import { register } from 'electron-localshortcut';
-
-import { BrowserWindow, Menu, MenuItem, ipcMain } from 'electron';
-
-import titlebarStyle from './titlebar.css';
-
-import { injectCSS } from '../utils';
-
-// Tracks menu visibility
-export default (win: BrowserWindow) => {
-  injectCSS(win.webContents, titlebarStyle);
-
-  win.once('ready-to-show', () => {
-    register(win, '`', () => {
-      win.webContents.send('toggleMenu');
-    });
-  });
-
-  ipcMain.handle(
-    'get-menu',
-    () => JSON.parse(JSON.stringify(
-      Menu.getApplicationMenu(),
-      (key: string, value: unknown) => (key !== 'commandsMap' && key !== 'menu') ? value : undefined),
-    ),
-  );
-
-  const getMenuItemById = (commandId: number): MenuItem | null => {
-    const menu = Menu.getApplicationMenu();
-
-    let target: MenuItem | null = null;
-    const stack = [...menu?.items ?? []];
-    while (stack.length > 0) {
-      const now = stack.shift();
-      now?.submenu?.items.forEach((item) => stack.push(item));
-
-      if (now?.commandId === commandId) {
-        target = now;
-        break;
-      }
-    }
-
-    return target;
-  };
-
-  ipcMain.handle('menu-event', (event, commandId: number) => {
-    const target = getMenuItemById(commandId);
-    if (target) target.click(undefined, BrowserWindow.fromWebContents(event.sender), event.sender);
-  });
-
-  ipcMain.handle('get-menu-by-id', (_, commandId: number) => {
-    const result = getMenuItemById(commandId);
-
-    return JSON.parse(JSON.stringify(
-      result,
-      (key: string, value: unknown) => (key !== 'commandsMap' && key !== 'menu') ? value : undefined),
-    );
-  });
-
-  ipcMain.handle('window-is-maximized', () => win.isMaximized());
-
-  ipcMain.handle('window-close', () => win.close());
-  ipcMain.handle('window-minimize', () => win.minimize());
-  ipcMain.handle('window-maximize', () => win.maximize());
-  win.on('maximize', () => win.webContents.send('window-maximize'));
-  ipcMain.handle('window-unmaximize', () => win.unmaximize());
-  win.on('unmaximize', () => win.webContents.send('window-unmaximize'));
-};

plugins/in-app-menu/front.ts

@@ -1,163 +0,0 @@
-import { ipcRenderer, Menu } from 'electron';
-
-import { createPanel } from './menu/panel';
-
-import logo from './assets/menu.svg';
-import close from './assets/close.svg';
-import minimize from './assets/minimize.svg';
-import maximize from './assets/maximize.svg';
-import unmaximize from './assets/unmaximize.svg';
-
-import { isEnabled } from '../../config/plugins';
-import config from '../../config';
-
-function $<E extends Element = Element>(selector: string) {
-  return document.querySelector<E>(selector);
-}
-
-const isMacOS = navigator.userAgent.includes('Macintosh');
-const isNotWindowsOrMacOS = !navigator.userAgent.includes('Windows') && !isMacOS;
-
-export default async () => {
-  let hideMenu = config.get('options.hideMenu');
-  const titleBar = document.createElement('title-bar');
-  const navBar = document.querySelector<HTMLDivElement>('#nav-bar-background');
-  let maximizeButton: HTMLButtonElement;
-  if (isMacOS) titleBar.style.setProperty('--offset-left', '70px');
-
-  logo.classList.add('title-bar-icon');
-  const logoClick = () => {
-    hideMenu = !hideMenu;
-    let visibilityStyle: string;
-    if (hideMenu) {
-      visibilityStyle = 'hidden';
-    } else {
-      visibilityStyle = 'visible';
-    }
-    const menus = document.querySelectorAll<HTMLElement>('menu-button');
-    menus.forEach((menu) => {
-      menu.style.visibility = visibilityStyle;
-    });
-  };
-  logo.onclick = logoClick;
-
-  ipcRenderer.on('toggleMenu', logoClick);
-
-  if (!isMacOS) titleBar.appendChild(logo);
-  document.body.appendChild(titleBar);
-
-  titleBar.appendChild(logo);
-
-  const addWindowControls = async () => {
-
-    // Create window control buttons
-    const minimizeButton = document.createElement('button');
-    minimizeButton.classList.add('window-control');
-    minimizeButton.appendChild(minimize);
-    minimizeButton.onclick = () => ipcRenderer.invoke('window-minimize');
-
-    maximizeButton = document.createElement('button');
-    if (await ipcRenderer.invoke('window-is-maximized')) {
-      maximizeButton.classList.add('window-control');
-      maximizeButton.appendChild(unmaximize);
-    } else {
-      maximizeButton.classList.add('window-control');
-      maximizeButton.appendChild(maximize);
-    }
-    maximizeButton.onclick = async () => {
-      if (await ipcRenderer.invoke('window-is-maximized')) {
-        // change icon to maximize
-        maximizeButton.removeChild(maximizeButton.firstChild!);
-        maximizeButton.appendChild(maximize);
-
-        // call unmaximize
-        await ipcRenderer.invoke('window-unmaximize');
-      } else {
-        // change icon to unmaximize
-        maximizeButton.removeChild(maximizeButton.firstChild!);
-        maximizeButton.appendChild(unmaximize);
-
-        // call maximize
-        await ipcRenderer.invoke('window-maximize');
-      }
-    };
-
-    const closeButton = document.createElement('button');
-    closeButton.classList.add('window-control');
-    closeButton.appendChild(close);
-    closeButton.onclick = () => ipcRenderer.invoke('window-close');
-
-    // Create a container div for the window control buttons
-    const windowControlsContainer = document.createElement('div');
-    windowControlsContainer.classList.add('window-controls-container');
-    windowControlsContainer.appendChild(minimizeButton);
-    windowControlsContainer.appendChild(maximizeButton);
-    windowControlsContainer.appendChild(closeButton);
-
-    // Add window control buttons to the title bar
-    titleBar.appendChild(windowControlsContainer);
-  };
-
-  if (isNotWindowsOrMacOS) await addWindowControls();
-
-  if (navBar) {
-    const observer = new MutationObserver((mutations) => {
-      mutations.forEach(() => {
-        titleBar.style.setProperty('--titlebar-background-color', navBar.style.backgroundColor);
-        document.querySelector('html')!.style.setProperty('--titlebar-background-color', navBar.style.backgroundColor);
-      });
-    });
-
-    observer.observe(navBar, { attributes : true, attributeFilter : ['style'] });
-  }
-
-  const updateMenu = async () => {
-    const children = [...titleBar.children];
-    children.forEach((child) => {
-      if (child !== logo) child.remove();
-    });
-
-    const menu = await ipcRenderer.invoke('get-menu') as Menu | null;
-    if (!menu) return;
-
-    menu.items.forEach((menuItem) => {
-      const menu = document.createElement('menu-button');
-      createPanel(titleBar, menu, menuItem.submenu?.items ?? []);
-
-      menu.append(menuItem.label);
-      titleBar.appendChild(menu);
-      if (hideMenu) {
-        menu.style.visibility = 'hidden';
-      }
-    });
-    if (isNotWindowsOrMacOS) await addWindowControls();
-  };
-  await updateMenu();
-
-  document.title = 'Youtube Music';
-
-  ipcRenderer.on('refreshMenu', () => updateMenu());
-  ipcRenderer.on('window-maximize', () => {
-    maximizeButton.removeChild(maximizeButton.firstChild!);
-    maximizeButton.appendChild(unmaximize);
-  });
-  ipcRenderer.on('window-unmaximize', () => {
-    maximizeButton.removeChild(maximizeButton.firstChild!);
-    maximizeButton.appendChild(maximize);
-  });
-
-  if (isEnabled('picture-in-picture')) {
-    ipcRenderer.on('pip-toggle', () => {
-      updateMenu();
-    });
-  }
-
-  // Increases the right margin of Navbar background when the scrollbar is visible to avoid blocking it (z-index doesn't affect it)
-  document.addEventListener('apiLoaded', () => {
-    const htmlHeadStyle = $('head > div > style');
-    if (htmlHeadStyle) {
-      // HACK: This is a hack to remove the scrollbar width
-      htmlHeadStyle.innerHTML = htmlHeadStyle.innerHTML.replace('html::-webkit-scrollbar {width: var(--ytmusic-scrollbar-width);', 'html::-webkit-scrollbar {');
-    }
-  }, { once: true, passive: true });
-};

plugins/in-app-menu/menu/icons.ts

@@ -1,10 +0,0 @@
-const Icons = {
-  submenu: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><polyline points="9 6 15 12 9 18" /></svg>',
-  checkbox: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l5 5l10 -10" /></svg>',
-  radio: {
-    checked: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" style="padding: 2px"><path fill="currentColor" d="M10,5 C7.2,5 5,7.2 5,10 C5,12.8 7.2,15 10,15 C12.8,15 15,12.8 15,10 C15,7.2 12.8,5 10,5 L10,5 Z M10,0 C4.5,0 0,4.5 0,10 C0,15.5 4.5,20 10,20 C15.5,20 20,15.5 20,10 C20,4.5 15.5,0 10,0 L10,0 Z M10,18 C5.6,18 2,14.4 2,10 C2,5.6 5.6,2 10,2 C14.4,2 18,5.6 18,10 C18,14.4 14.4,18 10,18 L10,18 Z" /></svg>',
-    unchecked: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" style="padding: 2px"><path fill="currentColor" d="M10,0 C4.5,0 0,4.5 0,10 C0,15.5 4.5,20 10,20 C15.5,20 20,15.5 20,10 C20,4.5 15.5,0 10,0 L10,0 Z M10,18 C5.6,18 2,14.4 2,10 C2,5.6 5.6,2 10,2 C14.4,2 18,5.6 18,10 C18,14.4 14.4,18 10,18 L10,18 Z" /></svg>',
-  },
-};
-
-export default Icons;

plugins/in-app-menu/menu/panel.ts

@@ -1,134 +0,0 @@
-import { nativeImage, type MenuItem, ipcRenderer, Menu } from 'electron';
-
-import Icons from './icons';
-
-import { ElementFromHtml } from '../../utils';
-
-interface PanelOptions {
-  placement?: 'bottom' | 'right';
-  order?: number;
-}
-
-export const createPanel = (
-  parent: HTMLElement,
-  anchor: HTMLElement,
-  items: MenuItem[],
-  options: PanelOptions = { placement: 'bottom', order: 0 },
-) => {
-  const childPanels: HTMLElement[] = [];
-  const panel = document.createElement('menu-panel');
-  panel.style.zIndex = `${options.order}`;
-
-  const updateIconState = (iconWrapper: HTMLElement, item: MenuItem) => {
-    if (item.type === 'checkbox') {
-      if (item.checked) iconWrapper.innerHTML = Icons.checkbox;
-      else iconWrapper.innerHTML = '';
-    } else if (item.type === 'radio') {
-      if (item.checked) iconWrapper.innerHTML = Icons.radio.checked;
-      else iconWrapper.innerHTML = Icons.radio.unchecked;
-    } else {
-      const nativeImageIcon = typeof item.icon === 'string' ? nativeImage.createFromPath(item.icon) : item.icon;
-      const iconURL = nativeImageIcon?.toDataURL();
-
-      if (iconURL) iconWrapper.style.background = `url(${iconURL})`;
-    }
-  };
-
-  const radioGroups: [MenuItem, HTMLElement][] = [];
-  items.map((item) => {
-    if (item.type === 'separator') return panel.appendChild(document.createElement('menu-separator'));
-
-    const menu = document.createElement('menu-item');
-    const iconWrapper = document.createElement('menu-icon');
-
-    updateIconState(iconWrapper, item);
-    menu.appendChild(iconWrapper);
-    menu.append(item.label);
-
-    menu.addEventListener('click', async () => {
-      await ipcRenderer.invoke('menu-event', item.commandId);
-      const menuItem = await ipcRenderer.invoke('get-menu-by-id', item.commandId) as MenuItem | null;
-
-      if (menuItem) {
-        updateIconState(iconWrapper, menuItem);
-
-        if (menuItem.type === 'radio') {
-          await Promise.all(
-            radioGroups.map(async ([item, iconWrapper]) => {
-              if (item.commandId === menuItem.commandId) return;
-              const newItem = await ipcRenderer.invoke('get-menu-by-id', item.commandId) as MenuItem | null;
-
-              if (newItem) updateIconState(iconWrapper, newItem);
-            })
-          );
-        }
-      }
-    });
-
-    if (item.type === 'radio') {
-      radioGroups.push([item, iconWrapper]);
-    }
-
-    if (item.type === 'submenu') {
-      const subMenuIcon = document.createElement('menu-icon');
-      subMenuIcon.appendChild(ElementFromHtml(Icons.submenu));
-      menu.appendChild(subMenuIcon);
-
-      const [child, , children] = createPanel(parent, menu, item.submenu?.items ?? [], {
-        placement: 'right',
-        order: (options?.order ?? 0) + 1,
-      });
-
-      childPanels.push(child);
-      children.push(...children);
-    }
-
-    panel.appendChild(menu);
-  });
-
-  /* methods */
-  const isOpened = () => panel.getAttribute('open') === 'true';
-  const close = () => panel.setAttribute('open', 'false');
-  const open = () => {
-    const rect = anchor.getBoundingClientRect();
-
-    if (options.placement === 'bottom') {
-      panel.style.setProperty('--x', `${rect.x}px`);
-      panel.style.setProperty('--y', `${rect.y + rect.height}px`);
-    } else {
-      panel.style.setProperty('--x', `${rect.x + rect.width}px`);
-      panel.style.setProperty('--y', `${rect.y}px`);
-    }
-
-    panel.setAttribute('open', 'true');
-
-    // Children are placed below their parent item, which can cause
-    // long lists to squeeze their children at the bottom of the screen
-    // (This needs to be done *after* setAttribute)
-    panel.classList.remove('position-by-bottom');
-    if (options.placement === 'right' && panel.scrollHeight > panel.clientHeight ) {
-      panel.style.setProperty('--y', `${rect.y + rect.height}px`);
-      panel.classList.add('position-by-bottom');
-    }
-  };
-
-  anchor.addEventListener('click', () => {
-    if (isOpened()) close();
-    else open();
-  });
-
-  document.body.addEventListener('click', (event) => {
-    const path = event.composedPath();
-    const isInside = path.some((it) => it === panel || it === anchor || childPanels.includes(it as HTMLElement));
-
-    if (!isInside) close();
-  });
-
-  parent.appendChild(panel);
-
-  return [
-    panel,
-    { isOpened, close, open },
-    childPanels,
-  ] as const;
-};

plugins/in-app-menu/titlebar.css

@@ -1,180 +0,0 @@
-:root {
-  --titlebar-background-color: #030303;
-  --menu-bar-height: 36px;
-}
-
-title-bar {
-  -webkit-app-region: drag;
-  box-sizing: border-box;
-
-  position: fixed;
-  top: 0;
-  z-index: 10000000;
-
-  width: 100%;
-  height: var(--menu-bar-height, 36px);
-
-  display: flex;
-  flex-flow: row;
-  justify-content: flex-start;
-  align-items: center;
-  gap: 4px;
-
-  color: #f1f1f1;
-  font-size: 14px;
-  padding: 4px 12px;
-  padding-left: var(--offset-left, 12px);
-  background-color: var(--titlebar-background-color, #030303);
-  user-select: none;
-
-  transition: opacity 200ms ease 0s, background-color 300ms cubic-bezier(0.2, 0, 0.6, 1) 0s;
-}
-
-menu-button {
-  -webkit-app-region: none;
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  align-self: stretch;
-
-  padding: 2px 8px;
-  border-radius: 4px;
-
-  cursor: pointer;
-}
-menu-button:hover {
-  background-color: rgba(255, 255, 255, 0.1);
-}
-
-menu-panel {
-  position: fixed;
-  top: var(--y, 0);
-  left: var(--x, 0);
-
-  max-height: calc(100vh - var(--menu-bar-height, 36px) - 16px - var(--y, 0));
-
-  display: flex;
-  flex-flow: column;
-  justify-content: flex-start;
-  align-items: stretch;
-  gap: 0;
-
-  overflow: auto;
-  padding: 4px;
-  border-radius: 8px;
-  pointer-events: none;
-  background-color: color-mix(in srgb, var(--titlebar-background-color, #030303) 50%, rgba(0, 0, 0, 0.1));
-  backdrop-filter: blur(8px);
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 2px 8px rgba(0, 0, 0, 0.2);
-
-  z-index: 0;
-  opacity: 0;
-  transform: scale(0.8);
-  transform-origin: top left;
-
-  transition: opacity 200ms ease 0s, transform 200ms ease 0s;
-}
-menu-panel[open="true"] {
-  pointer-events: all;
-  opacity: 1;
-  transform: scale(1);
-}
-menu-panel.position-by-bottom {
-  top: unset;
-  bottom: calc(100vh - var(--y, 100%));
-  max-height: calc(var(--y, 0) - var(--menu-bar-height, 36px) - 16px);
-}
-
-menu-item {
-  -webkit-app-region: none;
-  min-height: 32px;
-  height: 32px;
-
-  display: grid;
-  grid-template-columns: 32px 1fr minmax(32px, auto);
-  justify-content: flex-start;
-  align-items: center;
-
-  border-radius: 4px;
-  cursor: pointer;
-}
-menu-item:hover {
-  background-color: rgba(255, 255, 255, 0.1);
-}
-
-menu-item > menu-icon {
-  height: 32px;
-  padding: 4px;
-
-  box-sizing: border-box;
-}
-
-menu-separator {
-  min-height: 1px;
-  height: 1px;
-  margin: 4px 0;
-
-  background-color: rgba(255, 255, 255, 0.2);
-}
-
-/* classes */
-
-.title-bar-icon {
-  height: calc(100% - 8px);
-  object-fit: cover;
-  margin-left: -4px;
-}
-
-/* Window control container */
-
-.window-controls-container {
-  -webkit-app-region: no-drag;
-  display: flex;
-  justify-content: flex-end; /* Align to the right end of the title-bar */
-  align-items: center;
-  gap: 4px; /* Add spacing between the window control buttons */
-  position: absolute; /* Position it absolutely within title-bar */
-  right: 4px; /* Adjust the right position as needed */
-}
-
-/* Window control buttons */
-
-.window-control {
-  width: 24px;
-  height: 24px;
-  background: none;
-  border: none;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  color: #f1f1f1;
-  font-size: 14px;
-  padding: 0;
-}
-
-/* youtube-music style */
-
-ytmusic-app-layout {
-  margin-top: var(--menu-bar-height, 36px) !important;
-}
-
-ytmusic-app-layout>[slot=nav-bar], #nav-bar-background.ytmusic-app-layout {
-  top: var(--menu-bar-height, 36px) !important;
-}
-#nav-bar-divider.ytmusic-app-layout {
-  top: calc(var(--ytmusic-nav-bar-height) + var(--menu-bar-height, 36px)) !important;
-}
-ytmusic-app[is-bauhaus-sidenav-enabled] #guide-spacer.ytmusic-app,
-ytmusic-app[is-bauhaus-sidenav-enabled] #mini-guide-spacer.ytmusic-app {
-  margin-top: calc(var(--ytmusic-nav-bar-height) + var(--menu-bar-height, 36px)) !important;
-}
-
-ytmusic-app-layout>[slot=player-page] {
-  margin-top: var(--menu-bar-height);
-  height: calc(100vh - var(--menu-bar-height) - var(--ytmusic-nav-bar-height) - var(--ytmusic-player-bar-height)) !important;
-}
-
-ytmusic-guide-renderer {
-  height: calc(100vh - var(--menu-bar-height) - var(--ytmusic-nav-bar-height)) !important;
-}

plugins/last-fm/back.ts

@@ -1,203 +0,0 @@
-import crypto from 'node:crypto';
-
-import { BrowserWindow, net, shell } from 'electron';
-
-import { setOptions } from '../../config/plugins';
-import registerCallback, { SongInfo } from '../../providers/song-info';
-import defaultConfig from '../../config/defaults';
-
-import type { ConfigType } from '../../config/dynamic';
-
-type LastFMOptions = ConfigType<'last-fm'>;
-
-interface LastFmData {
-  method: string,
-  timestamp?: number,
-}
-
-interface LastFmSongData {
-  track?: string,
-  duration?: number,
-  artist?: string,
-  album?: string,
-  api_key: string,
-  sk?: string,
-  format: string,
-  method: string,
-  timestamp?: number,
-  api_sig?: string,
-}
-
-const createFormData = (parameters: LastFmSongData) => {
-  // Creates the body for in the post request
-  const formData = new URLSearchParams();
-  for (const key in parameters) {
-    formData.append(key, String(parameters[key as keyof LastFmSongData]));
-  }
-
-  return formData;
-};
-
-const createQueryString = (parameters: Record<string, unknown>, apiSignature: string) => {
-  // Creates a querystring
-  const queryData = [];
-  parameters.api_sig = apiSignature;
-  for (const key in parameters) {
-    queryData.push(`${encodeURIComponent(key)}=${encodeURIComponent(String(parameters[key]))}`);
-  }
-
-  return '?' + queryData.join('&');
-};
-
-const createApiSig = (parameters: LastFmSongData, secret: string) => {
-  // This function creates the api signature, see: https://www.last.fm/api/authspec
-  const keys = Object.keys(parameters);
-
-  keys.sort();
-  let sig = '';
-  for (const key of keys) {
-    if (String(key) === 'format') {
-      continue;
-    }
-
-    sig += `${key}${parameters[key as keyof LastFmSongData]}`;
-  }
-
-  sig += secret;
-  sig = crypto.createHash('md5').update(sig, 'utf-8').digest('hex');
-  return sig;
-};
-
-const createToken = async ({ api_key: apiKey, api_root: apiRoot, secret }: LastFMOptions) => {
-  // Creates and stores the auth token
-  const data = {
-    method: 'auth.gettoken',
-    api_key: apiKey,
-    format: 'json',
-  };
-  const apiSigature = createApiSig(data, secret);
-  const response = await net.fetch(`${apiRoot}${createQueryString(data, apiSigature)}`);
-  const json = await response.json() as Record<string, string>;
-  return json?.token;
-};
-
-const authenticate = async (config: LastFMOptions) => {
-  // Asks the user for authentication
-  await shell.openExternal(`https://www.last.fm/api/auth/?api_key=${config.api_key}&token=${config.token}`);
-};
-
-const getAndSetSessionKey = async (config: LastFMOptions) => {
-  // Get and store the session key
-  const data = {
-    api_key: config.api_key,
-    format: 'json',
-    method: 'auth.getsession',
-    token: config.token,
-  };
-  const apiSignature = createApiSig(data, config.secret);
-  const response = await net.fetch(`${config.api_root}${createQueryString(data, apiSignature)}`);
-  const json = await response.json() as {
-    error?: string,
-    session?: {
-      key: string,
-    }
-  };
-  if (json.error) {
-    config.token = await createToken(config);
-    await authenticate(config);
-    setOptions('last-fm', config);
-  }
-  if (json.session) {
-    config.session_key = json.session.key;
-  }
-  setOptions('last-fm', config);
-  return config;
-};
-
-const postSongDataToAPI = async (songInfo: SongInfo, config: LastFMOptions, data: LastFmData) => {
-  // This sends a post request to the api, and adds the common data
-  if (!config.session_key) {
-    await getAndSetSessionKey(config);
-  }
-
-  const postData: LastFmSongData = {
-    track: songInfo.title,
-    duration: songInfo.songDuration,
-    artist: songInfo.artist,
-    ...(songInfo.album ? { album: songInfo.album } : undefined), // Will be undefined if current song is a video
-    api_key: config.api_key,
-    sk: config.session_key,
-    format: 'json',
-    ...data,
-  };
-
-  postData.api_sig = createApiSig(postData, config.secret);
-  const formData = createFormData(postData);
-  net.fetch('https://ws.audioscrobbler.com/2.0/', { method: 'POST', body: formData })
-    .catch(async (error: {
-      response?: {
-        data?: {
-          error: number,
-        }
-      }
-    }) => {
-      if (error?.response?.data?.error === 9) {
-        // Session key is invalid, so remove it from the config and reauthenticate
-        config.session_key = undefined;
-        config.token = await createToken(config);
-        await authenticate(config);
-        setOptions('last-fm', config);
-      }
-    });
-};
-
-const addScrobble = (songInfo: SongInfo, config: LastFMOptions) => {
-  // This adds one scrobbled song to last.fm
-  const data = {
-    method: 'track.scrobble',
-    timestamp: Math.trunc((Date.now() - (songInfo.elapsedSeconds ?? 0)) / 1000),
-  };
-  postSongDataToAPI(songInfo, config, data);
-};
-
-const setNowPlaying = (songInfo: SongInfo, config: LastFMOptions) => {
-  // This sets the now playing status in last.fm
-  const data = {
-    method: 'track.updateNowPlaying',
-  };
-  postSongDataToAPI(songInfo, config, data);
-};
-
-// This will store the timeout that will trigger addScrobble
-let scrobbleTimer: NodeJS.Timeout | undefined;
-
-const lastfm = async (_win: BrowserWindow, config: LastFMOptions) => {
-  if (!config.api_root) {
-    // Settings are not present, creating them with the default values
-    config = defaultConfig.plugins['last-fm'];
-    config.enabled = true;
-    setOptions('last-fm', config);
-  }
-
-  if (!config.session_key) {
-    // Not authenticated
-    config = await getAndSetSessionKey(config);
-  }
-
-  registerCallback((songInfo) => {
-    // Set remove the old scrobble timer
-    clearTimeout(scrobbleTimer);
-    if (!songInfo.isPaused) {
-      setNowPlaying(songInfo, config);
-      // Scrobble when the song is halfway through, or has passed the 4-minute mark
-      const scrobbleTime = Math.min(Math.ceil(songInfo.songDuration / 2), 4 * 60);
-      if (scrobbleTime > (songInfo.elapsedSeconds ?? 0)) {
-        // Scrobble still needs to happen
-        const timeToWait = (scrobbleTime - (songInfo.elapsedSeconds ?? 0)) * 1000;
-        scrobbleTimer = setTimeout(addScrobble, timeToWait, songInfo, config);
-      }
-    }
-  });
-};
-
-export default lastfm;

plugins/lumiastream/back.ts

@@ -1,82 +0,0 @@
-import { BrowserWindow , net } from 'electron';
-
-import registerCallback from '../../providers/song-info';
-
-const secToMilisec = (t?: number) => t ? Math.round(Number(t) * 1e3) : undefined;
-const previousStatePaused = null;
-
-type LumiaData = {
-  origin: string;
-  eventType: string;
-  url?: string;
-  videoId?: string;
-  playlistId?: string;
-  cover?: string|null;
-  cover_url?: string|null;
-  title?: string;
-  artists?: string[];
-  status?: string;
-  progress?: number;
-  duration?: number;
-  album_url?: string|null;
-  album?: string|null;
-  views?: number;
-  isPaused?: boolean;
-}
-const data: LumiaData = {
-  origin: 'youtubemusic',
-  eventType: 'switchSong',
-};
-
-
-const post = (data: LumiaData) => {
-  const port = 39231;
-  const headers = {
-    'Content-Type': 'application/json',
-    'Accept': 'application/json',
-    'Access-Control-Allow-Headers': '*',
-    'Access-Control-Allow-Origin': '*',
-  };
-  const url = `http://localhost:${port}/api/media`;
-
-  net.fetch(url, { method: 'POST', body: JSON.stringify({ token: 'lsmedia_ytmsI7812', data }), headers })
-    .catch((error: { code: number, errno: number }) => {
-      console.log(
-        `Error: '${
-          error.code || error.errno
-        }' - when trying to access lumiastream webserver at port ${port}`
-      );
-    });
-};
-
-export default (_: BrowserWindow) => {
-  registerCallback((songInfo) => {
-    if (!songInfo.title && !songInfo.artist) {
-      return;
-    }
-
-    if (previousStatePaused === null) {
-      data.eventType = 'switchSong';
-    } else if (previousStatePaused !== songInfo.isPaused) {
-      data.eventType = 'playPause';
-    }
-
-    data.duration = secToMilisec(songInfo.songDuration);
-    data.progress = secToMilisec(songInfo.elapsedSeconds);
-    data.url = songInfo.url;
-    data.videoId = songInfo.videoId;
-    data.playlistId = songInfo.playlistId;
-    data.cover = songInfo.imageSrc;
-    data.cover_url = songInfo.imageSrc;
-    data.album_url = songInfo.imageSrc;
-    data.title = songInfo.title;
-    data.artists = [songInfo.artist];
-    data.status = songInfo.isPaused ? 'stopped' : 'playing';
-    data.isPaused = songInfo.isPaused;
-    data.album = songInfo.album;
-    data.views = songInfo.views;
-    post(data);
-  });
-};
-
-

plugins/lyrics-genius/menu.ts

@@ -1,19 +0,0 @@
-import { BrowserWindow, MenuItem } from 'electron';
-
-import { LyricGeniusType, toggleRomanized } from './back';
-
-import { setOptions } from '../../config/plugins';
-import { MenuTemplate } from '../../menu';
-
-export default (_: BrowserWindow, options: LyricGeniusType): MenuTemplate => [
-  {
-    label: 'Romanized Lyrics',
-    type: 'checkbox',
-    checked: options.romanizedLyrics,
-    click(item: MenuItem) {
-      options.romanizedLyrics = item.checked;
-      setOptions('lyrics-genius', options);
-      toggleRomanized();
-    },
-  },
-];

plugins/navigation/back.ts

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

plugins/navigation/front.ts

@@ -1,20 +0,0 @@
-import { ipcRenderer } from 'electron';
-
-import forwardHTML from './templates/forward.html';
-import backHTML from './templates/back.html';
-
-import { ElementFromHtml } from '../utils';
-
-export function run() {
-  ipcRenderer.on('navigation-css-ready', () => {
-    const forwardButton = ElementFromHtml(forwardHTML);
-    const backButton = ElementFromHtml(backHTML);
-    const menu = document.querySelector('#right-content');
-
-    if (menu) {
-      menu.prepend(backButton, forwardButton);
-    }
-  });
-}
-
-export default run;

plugins/navigation/templates/back.html

@@ -1,33 +0,0 @@
-<div
-        class="style-scope ytmusic-pivot-bar-renderer navigation-item"
-        onclick="history.back()"
-        role="tab"
-        tab-id="FEmusic_back"
->
-    <div
-            aria-disabled="false"
-            class="search-icon style-scope ytmusic-search-box"
-            role="button"
-            tabindex="0"
-            title="Go to previous page"
-    >
-        <div
-                class="tab-icon style-scope paper-icon-button navigation-icon"
-                id="icon"
-        >
-            <svg
-                    class="style-scope iron-icon"
-                    focusable="false"
-                    preserveAspectRatio="xMidYMid meet"
-                    style="pointer-events: none; display: block; width: 100%; height: 100%"
-                    viewBox="0 0 492 492"
-            >
-                <g class="style-scope iron-icon">
-                    <path
-                            d="M109.3 265.2l218.9 218.9c5.1 5.1 11.8 7.9 19 7.9s14-2.8 19-7.9l16.1-16.1c10.5-10.5 10.5-27.6 0-38.1L198.6 246.1 382.7 62c5.1-5.1 7.9-11.8 7.9-19 0-7.2-2.8-14-7.9-19L366.5 7.9c-5.1-5.1-11.8-7.9-19-7.9-7.2 0-14 2.8-19 7.9L109.3 227c-5.1 5.1-7.9 11.9-7.8 19.1 0 7.2 2.8 14 7.8 19.1z"
-                    ></path>
-                </g>
-            </svg>
-        </div>
-    </div>
-</div>

plugins/no-google-login/back.ts

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

plugins/no-google-login/front.ts

@@ -1,37 +0,0 @@
-function removeLoginElements() {
-  const elementsToRemove = [
-    '.sign-in-link.ytmusic-nav-bar',
-    '.ytmusic-pivot-bar-renderer[tab-id="FEmusic_liked"]',
-  ];
-
-  for (const selector of elementsToRemove) {
-    const node = document.querySelector(selector);
-    if (node) {
-      node.remove();
-    }
-  }
-
-  // Remove the library button
-  const libraryIconPath
-    = 'M16,6v2h-2v5c0,1.1-0.9,2-2,2s-2-0.9-2-2s0.9-2,2-2c0.37,0,0.7,0.11,1,0.28V6H16z M18,20H4V6H3v15h15V20z M21,3H6v15h15V3z M7,4h13v13H7V4z';
-  const observer = new MutationObserver(() => {
-    const menuEntries = document.querySelectorAll(
-      '#items ytmusic-guide-entry-renderer',
-    );
-    menuEntries.forEach((item) => {
-      const icon = item.querySelector('path');
-      if (icon) {
-        observer.disconnect();
-        if (icon.getAttribute('d') === libraryIconPath) {
-          item.remove();
-        }
-      }
-    });
-  });
-  observer.observe(document.documentElement, {
-    childList: true,
-    subtree: true,
-  });
-}
-
-export default removeLoginElements;

plugins/notifications/config.ts

@@ -1,5 +0,0 @@
-import { PluginConfig } from '../../config/dynamic';
-
-const config = new PluginConfig('notifications');
-
-export default config;

plugins/notifications/interactive.ts

@@ -1,257 +0,0 @@
-import path from 'node:path';
-
-import { app, BrowserWindow, ipcMain, Notification } from 'electron';
-
-import { notificationImage, secondsToMinutes, ToastStyles } from './utils';
-import config from './config';
-
-import getSongControls from '../../providers/song-controls';
-import registerCallback, { SongInfo } from '../../providers/song-info';
-import { changeProtocolHandler } from '../../providers/protocol-handler';
-import { setTrayOnClick, setTrayOnDoubleClick } from '../../tray';
-import { getMediaIconLocation, mediaIcons, saveMediaIcon } from '../utils';
-
-let songControls: ReturnType<typeof getSongControls>;
-let savedNotification: Notification | undefined;
-
-export default (win: BrowserWindow) => {
-  songControls = getSongControls(win);
-
-  let currentSeconds = 0;
-  ipcMain.on('apiLoaded', () => win.webContents.send('setupTimeChangedListener'));
-
-  ipcMain.on('timeChanged', (_, t: number) => currentSeconds = t);
-
-  if (app.isPackaged) {
-    saveMediaIcon();
-  }
-
-  let savedSongInfo: SongInfo;
-  let lastUrl: string | undefined;
-
-  // Register songInfoCallback
-  registerCallback((songInfo) => {
-    if (!songInfo.artist && !songInfo.title) {
-      return;
-    }
-
-    savedSongInfo = { ...songInfo };
-    if (!songInfo.isPaused
-      && (songInfo.url !== lastUrl || config.get('unpauseNotification'))
-    ) {
-      lastUrl = songInfo.url;
-      sendNotification(songInfo);
-    }
-  });
-
-  if (config.get('trayControls')) {
-    setTrayOnClick(() => {
-      if (savedNotification) {
-        savedNotification.close();
-        savedNotification = undefined;
-      } else if (savedSongInfo) {
-        sendNotification({
-          ...savedSongInfo,
-          elapsedSeconds: currentSeconds,
-        });
-      }
-    });
-
-    setTrayOnDoubleClick(() => {
-      if (win.isVisible()) {
-        win.hide();
-      } else {
-        win.show();
-      }
-    });
-  }
-
-  app.once('before-quit', () => {
-    savedNotification?.close();
-  });
-
-  changeProtocolHandler(
-    (cmd) => {
-      if (Object.keys(songControls).includes(cmd)) {
-        songControls[cmd as keyof typeof songControls]();
-        if (config.get('refreshOnPlayPause') && (
-          cmd === 'pause'
-          || (cmd === 'play' && !config.get('unpauseNotification'))
-        )
-        ) {
-          setImmediate(() =>
-            sendNotification({
-              ...savedSongInfo,
-              isPaused: cmd === 'pause',
-              elapsedSeconds: currentSeconds,
-            }),
-          );
-        }
-      }
-    },
-  );
-};
-
-function sendNotification(songInfo: SongInfo) {
-  const iconSrc = notificationImage(songInfo);
-
-  savedNotification?.close();
-
-  let icon: string;
-  if (typeof iconSrc === 'object') {
-    icon = iconSrc.toDataURL();
-  } else {
-    icon = iconSrc;
-  }
-
-  savedNotification = new Notification({
-    title: songInfo.title || 'Playing',
-    body: songInfo.artist,
-    icon: iconSrc,
-    silent: true,
-    // https://learn.microsoft.com/en-us/uwp/schemas/tiles/toastschema/schema-root
-    // https://learn.microsoft.com/en-us/windows/apps/design/shell/tiles-and-notifications/toast-schema
-    // https://learn.microsoft.com/en-us/windows/apps/design/shell/tiles-and-notifications/adaptive-interactive-toasts?tabs=xml
-    // https://learn.microsoft.com/en-us/uwp/api/windows.ui.notifications.toasttemplatetype
-    toastXml: getXml(songInfo, icon),
-  });
-
-  savedNotification.on('close', () => {
-    savedNotification = undefined;
-  });
-
-  savedNotification.show();
-}
-
-const getXml = (songInfo: SongInfo, iconSrc: string) => {
-  switch (config.get('toastStyle')) {
-    default:
-    case ToastStyles.logo:
-    case ToastStyles.legacy: {
-      return xmlLogo(songInfo, iconSrc);
-    }
-
-    case ToastStyles.banner_top_custom: {
-      return xmlBannerTopCustom(songInfo, iconSrc);
-    }
-
-    case ToastStyles.hero: {
-      return xmlHero(songInfo, iconSrc);
-    }
-
-    case ToastStyles.banner_bottom: {
-      return xmlBannerBottom(songInfo, iconSrc);
-    }
-
-    case ToastStyles.banner_centered_bottom: {
-      return xmlBannerCenteredBottom(songInfo, iconSrc);
-    }
-
-    case ToastStyles.banner_centered_top: {
-      return xmlBannerCenteredTop(songInfo, iconSrc);
-    }
-  }
-};
-const display = (kind: keyof typeof mediaIcons) => {
-  if (config.get('toastStyle') === ToastStyles.legacy) {
-    return `content="${mediaIcons[kind]}"`;
-  }
-
-  return `\
-            content="${config.get('hideButtonText') ? '' : kind.charAt(0).toUpperCase() + kind.slice(1)}"\
-            imageUri="file:///${path.resolve(getMediaIconLocation(), `${kind}.png`)}"
-        `;
-};
-
-const getButton = (kind: keyof typeof mediaIcons) =>
-  `<action ${display(kind)} activationType="protocol" arguments="youtubemusic://${kind}"/>`;
-
-const getButtons = (isPaused: boolean) => `\
-    <actions>
-        ${getButton('previous')}
-        ${isPaused ? getButton('play') : getButton('pause')}
-        ${getButton('next')}
-    </actions>\
-`;
-
-const toast = (content: string, isPaused: boolean) => `\
-<toast>
-    <audio silent="true" />
-    <visual>
-        <binding template="ToastGeneric">
-            ${content}
-        </binding>
-    </visual>
-
-    ${getButtons(isPaused)}
-</toast>`;
-
-const xmlImage = ({ title, artist, isPaused }: SongInfo, imgSrc: string, placement: string) => toast(`\
-            <image id="1" src="${imgSrc}" name="Image" ${placement}/>
-            <text id="1">${title}</text>
-            <text id="2">${artist}</text>\
-`, isPaused ?? false);
-
-const xmlLogo = (songInfo: SongInfo, imgSrc: string) => xmlImage(songInfo, imgSrc, 'placement="appLogoOverride"');
-
-const xmlHero = (songInfo: SongInfo, imgSrc: string) => xmlImage(songInfo, imgSrc, 'placement="hero"');
-
-const xmlBannerBottom = (songInfo: SongInfo, imgSrc: string) => xmlImage(songInfo, imgSrc, '');
-
-const xmlBannerTopCustom = (songInfo: SongInfo, imgSrc: string) => toast(`\
-            <image id="1" src="${imgSrc}" name="Image" />
-            <text>ㅤ</text>
-            <group>
-                <subgroup>
-                    <text hint-style="body">${songInfo.title}</text>
-                    <text hint-style="captionSubtle">${songInfo.artist}</text>
-                </subgroup>
-                ${xmlMoreData(songInfo)}
-            </group>\
-`, songInfo.isPaused ?? false);
-
-const xmlMoreData = ({ album, elapsedSeconds, songDuration }: SongInfo) => `\
-<subgroup hint-textStacking="bottom">
-    ${album
-  ? `<text hint-style="captionSubtle" hint-wrap="true" hint-align="right">${album}</text>` : ''}
-    <text hint-style="captionSubtle" hint-wrap="true" hint-align="right">${secondsToMinutes(elapsedSeconds ?? 0)} / ${secondsToMinutes(songDuration)}</text>
-</subgroup>\
-`;
-
-const xmlBannerCenteredBottom = ({ title, artist, isPaused }: SongInfo, imgSrc: string) => toast(`\
-            <text>ㅤ</text>
-            <group>
-                <subgroup hint-weight="1" hint-textStacking="center">
-                    <text hint-align="center" hint-style="${titleFontPicker(title)}">${title}</text>
-                    <text hint-align="center" hint-style="SubtitleSubtle">${artist}</text>
-                </subgroup>
-            </group>
-            <image id="1" src="${imgSrc}" name="Image"  hint-removeMargin="true" />\
-`, isPaused ?? false);
-
-const xmlBannerCenteredTop = ({ title, artist, isPaused }: SongInfo, imgSrc: string) => toast(`\
-            <image id="1" src="${imgSrc}" name="Image" />
-            <text>ㅤ</text>
-            <group>
-                <subgroup hint-weight="1" hint-textStacking="center">
-                    <text hint-align="center" hint-style="${titleFontPicker(title)}">${title}</text>
-                    <text hint-align="center" hint-style="SubtitleSubtle">${artist}</text>
-                </subgroup>
-            </group>\
-`, isPaused ?? false);
-
-const titleFontPicker = (title: string) => {
-  if (title.length <= 13) {
-    return 'Header';
-  }
-
-  if (title.length <= 22) {
-    return 'Subheader';
-  }
-
-  if (title.length <= 26) {
-    return 'Title';
-  }
-
-  return 'Subtitle';
-};

plugins/notifications/menu.ts

@@ -1,93 +0,0 @@
-import is from 'electron-is';
-
-import { BrowserWindow, MenuItem } from 'electron';
-
-import { snakeToCamel, ToastStyles, urgencyLevels } from './utils';
-
-import config from './config';
-
-import { MenuTemplate } from '../../menu';
-
-import type { ConfigType } from '../../config/dynamic';
-
-const getMenu = (options: ConfigType<'notifications'>): MenuTemplate => {
-  if (is.linux()) {
-    return [
-      {
-        label: 'Notification Priority',
-        submenu: urgencyLevels.map((level) => ({
-          label: level.name,
-          type: 'radio',
-          checked: options.urgency === level.value,
-          click: () => config.set('urgency', level.value),
-        })),
-      }
-    ];
-  } else if (is.windows()) {
-    return [
-      {
-        label: 'Interactive Notifications',
-        type: 'checkbox',
-        checked: options.interactive,
-        // Doesn't update until restart
-        click: (item: MenuItem) => config.setAndMaybeRestart('interactive', item.checked),
-      },
-      {
-        // Submenu with settings for interactive notifications (name shouldn't be too long)
-        label: 'Interactive Settings',
-        submenu: [
-          {
-            label: 'Open/Close on tray click',
-            type: 'checkbox',
-            checked: options.trayControls,
-            click: (item: MenuItem) => config.set('trayControls', item.checked),
-          },
-          {
-            label: 'Hide Button Text',
-            type: 'checkbox',
-            checked: options.hideButtonText,
-            click: (item: MenuItem) => config.set('hideButtonText', item.checked),
-          },
-          {
-            label: 'Refresh on Play/Pause',
-            type: 'checkbox',
-            checked: options.refreshOnPlayPause,
-            click: (item: MenuItem) => config.set('refreshOnPlayPause', item.checked),
-          },
-        ],
-      },
-      {
-        label: 'Style',
-        submenu: getToastStyleMenuItems(options),
-      },
-    ];
-  } else {
-    return [];
-  }
-};
-
-export default (_win: BrowserWindow, options: ConfigType<'notifications'>): MenuTemplate => [
-  ...getMenu(options),
-  {
-    label: 'Show notification on unpause',
-    type: 'checkbox',
-    checked: options.unpauseNotification,
-    click: (item: MenuItem) => config.set('unpauseNotification', item.checked),
-  },
-];
-
-export function getToastStyleMenuItems(options: ConfigType<'notifications'>) {
-  const array = Array.from({ length: Object.keys(ToastStyles).length });
-
-  // ToastStyles index starts from 1
-  for (const [name, index] of Object.entries(ToastStyles)) {
-    array[index - 1] = {
-      label: snakeToCamel(name),
-      type: 'radio',
-      checked: options.toastStyle === index,
-      click: () => config.set('toastStyle', index),
-    } satisfies Electron.MenuItemConstructorOptions;
-  }
-
-  return array as Electron.MenuItemConstructorOptions[];
-}

plugins/picture-in-picture/back.ts

@@ -1,111 +0,0 @@
-import { app, BrowserWindow, ipcMain } from 'electron';
-
-import style from './style.css';
-
-import { injectCSS } from '../utils';
-import { setOptions as setPluginOptions } from '../../config/plugins';
-
-import type { ConfigType } from '../../config/dynamic';
-
-let isInPiP = false;
-let originalPosition: number[];
-let originalSize: number[];
-let originalFullScreen: boolean;
-let originalMaximized: boolean;
-
-let win: BrowserWindow;
-
-type PiPOptions = ConfigType<'picture-in-picture'>;
-
-let options: Partial<PiPOptions>;
-
-const pipPosition = () => (options.savePosition && options['pip-position']) || [10, 10];
-const pipSize = () => (options.saveSize && options['pip-size']) || [450, 275];
-
-const setLocalOptions = (_options: Partial<PiPOptions>) => {
-  options = { ...options, ..._options };
-  setPluginOptions('picture-in-picture', _options);
-};
-
-const togglePiP = () => {
-  isInPiP = !isInPiP;
-  setLocalOptions({ isInPiP });
-
-  if (isInPiP) {
-    originalFullScreen = win.isFullScreen();
-    if (originalFullScreen) {
-      win.setFullScreen(false);
-    }
-
-    originalMaximized = win.isMaximized();
-    if (originalMaximized) {
-      win.unmaximize();
-    }
-
-    originalPosition = win.getPosition();
-    originalSize = win.getSize();
-
-    win.webContents.on('before-input-event', blockShortcutsInPiP);
-
-    win.setMaximizable(false);
-    win.setFullScreenable(false);
-
-    win.webContents.send('pip-toggle', true);
-
-    app.dock?.hide();
-    win.setVisibleOnAllWorkspaces(true, {
-      visibleOnFullScreen: true,
-    });
-    app.dock?.show();
-    if (options.alwaysOnTop) {
-      win.setAlwaysOnTop(true, 'screen-saver', 1);
-    }
-  } else {
-    win.webContents.removeListener('before-input-event', blockShortcutsInPiP);
-    win.setMaximizable(true);
-    win.setFullScreenable(true);
-
-    win.webContents.send('pip-toggle', false);
-
-    win.setVisibleOnAllWorkspaces(false);
-    win.setAlwaysOnTop(false);
-
-    if (originalFullScreen) {
-      win.setFullScreen(true);
-    }
-
-    if (originalMaximized) {
-      win.maximize();
-    }
-  }
-
-  const [x, y] = isInPiP ? pipPosition() : originalPosition;
-  const [w, h] = isInPiP ? pipSize() : originalSize;
-  win.setPosition(x, y);
-  win.setSize(w, h);
-
-  win.setWindowButtonVisibility?.(!isInPiP);
-};
-
-const blockShortcutsInPiP = (event: Electron.Event, input: Electron.Input) => {
-  const key = input.key.toLowerCase();
-
-  if (key === 'f') {
-    event.preventDefault();
-  } else if (key === 'escape') {
-    togglePiP();
-    event.preventDefault();
-  }
-};
-
-export default (_win: BrowserWindow, _options: PiPOptions) => {
-  options ??= _options;
-  win ??= _win;
-  setLocalOptions({ isInPiP });
-  injectCSS(win.webContents, style);
-  ipcMain.on('picture-in-picture', () => {
-    togglePiP();
-  });
-};
-
-export const setOptions = setLocalOptions;

plugins/picture-in-picture/menu.ts

@@ -1,75 +0,0 @@
-import prompt from 'custom-electron-prompt';
-
-import { BrowserWindow } from 'electron';
-
-import { setOptions } from './back';
-
-import promptOptions from '../../providers/prompt-options';
-
-import { MenuTemplate } from '../../menu';
-
-import type { ConfigType } from '../../config/dynamic';
-
-export default (win: BrowserWindow, options: ConfigType<'picture-in-picture'>): MenuTemplate => [
-  {
-    label: 'Always on top',
-    type: 'checkbox',
-    checked: options.alwaysOnTop,
-    click(item) {
-      setOptions({ alwaysOnTop: item.checked });
-      win.setAlwaysOnTop(item.checked);
-    },
-  },
-  {
-    label: 'Save window position',
-    type: 'checkbox',
-    checked: options.savePosition,
-    click(item) {
-      setOptions({ savePosition: item.checked });
-    },
-  },
-  {
-    label: 'Save window size',
-    type: 'checkbox',
-    checked: options.saveSize,
-    click(item) {
-      setOptions({ saveSize: item.checked });
-    },
-  },
-  {
-    label: 'Hotkey',
-    type: 'checkbox',
-    checked: !!options.hotkey,
-    async click(item) {
-      const output = await prompt({
-        title: 'Picture in Picture Hotkey',
-        label: 'Choose a hotkey for toggling Picture in Picture',
-        type: 'keybind',
-        keybindOptions: [{
-          value: 'hotkey',
-          label: 'Hotkey',
-          default: options.hotkey,
-        }],
-        ...promptOptions(),
-      }, win);
-
-      if (output) {
-        const { value, accelerator } = output[0];
-        setOptions({ [value]: accelerator });
-
-        item.checked = !!accelerator;
-      } else {
-        // Reset checkbox if prompt was canceled
-        item.checked = !item.checked;
-      }
-    },
-  },
-  {
-    label: 'Use native PiP',
-    type: 'checkbox',
-    checked: options.useNativePiP,
-    click(item) {
-      setOptions({ useNativePiP: item.checked });
-    },
-  },
-];

plugins/playback-speed/front.ts

@@ -1,117 +0,0 @@
-import sliderHTML from './templates/slider.html';
-
-import { getSongMenu } from '../../providers/dom-elements';
-import { ElementFromHtml } from '../utils';
-import { singleton } from '../../providers/decorators';
-
-
-function $<E extends Element = Element>(selector: string) {
-  return document.querySelector<E>(selector);
-}
-
-const slider = ElementFromHtml(sliderHTML);
-
-const roundToTwo = (n: number) => Math.round(n * 1e2) / 1e2;
-
-const MIN_PLAYBACK_SPEED = 0.07;
-const MAX_PLAYBACK_SPEED = 16;
-
-let playbackSpeed = 1;
-
-const updatePlayBackSpeed = () => {
-  const videoElement = $<HTMLVideoElement>('video');
-  if (videoElement) {
-    videoElement.playbackRate = playbackSpeed;
-  }
-
-  const playbackSpeedElement = $('#playback-speed-value');
-  if (playbackSpeedElement) {
-    playbackSpeedElement.innerHTML = String(playbackSpeed);
-  }
-};
-
-let menu: Element | null = null;
-
-const setupSliderListener = singleton(() => {
-  $('#playback-speed-slider')?.addEventListener('immediate-value-changed', (e) => {
-    playbackSpeed = (e as CustomEvent<{ value: number; }>).detail.value || MIN_PLAYBACK_SPEED;
-    if (isNaN(playbackSpeed)) {
-      playbackSpeed = 1;
-    }
-
-    updatePlayBackSpeed();
-  });
-});
-
-const observePopupContainer = () => {
-  const observer = new MutationObserver(() => {
-    if (!menu) {
-      menu = getSongMenu();
-    }
-
-    if (
-      menu &&
-      (menu.parentElement as HTMLElement & { eventSink_: Element | null })
-        ?.eventSink_
-        ?.matches('ytmusic-menu-renderer.ytmusic-player-bar')&& !menu.contains(slider)
-    ) {
-      menu.prepend(slider);
-      setupSliderListener();
-    }
-  });
-
-  const popupContainer = $('ytmusic-popup-container');
-  if (popupContainer) {
-    observer.observe(popupContainer, {
-      childList: true,
-      subtree: true,
-    });
-  }
-};
-
-const observeVideo = () => {
-  const video = $<HTMLVideoElement>('video');
-  if (video) {
-    video.addEventListener('ratechange', forcePlaybackRate);
-    video.addEventListener('srcChanged', forcePlaybackRate);
-  }
-};
-
-const setupWheelListener = () => {
-  slider.addEventListener('wheel', (e) => {
-    e.preventDefault();
-    if (isNaN(playbackSpeed)) {
-      playbackSpeed = 1;
-    }
-
-    // E.deltaY < 0 means wheel-up
-    playbackSpeed = roundToTwo(e.deltaY < 0
-      ? Math.min(playbackSpeed + 0.01, MAX_PLAYBACK_SPEED)
-      : Math.max(playbackSpeed - 0.01, MIN_PLAYBACK_SPEED),
-    );
-
-    updatePlayBackSpeed();
-    // Update slider position
-    const playbackSpeedSilder = $<HTMLElement & { value: number }>('#playback-speed-slider');
-    if (playbackSpeedSilder) {
-      playbackSpeedSilder.value = playbackSpeed;
-    }
-  });
-};
-
-function forcePlaybackRate(e: Event) {
-  if (e.target instanceof HTMLVideoElement) {
-    const videoElement = e.target;
-    if (videoElement.playbackRate !== playbackSpeed) {
-      videoElement.playbackRate = playbackSpeed;
-    }
-  }
-}
-
-export default () => {
-  document.addEventListener('apiLoaded', () => {
-    observePopupContainer();
-    observeVideo();
-    setupWheelListener();
-  }, { once: true, passive: true });
-};

plugins/precise-volume/back.ts

@@ -1,28 +0,0 @@
-import { globalShortcut, BrowserWindow } from 'electron';
-
-import volumeHudStyle from './volume-hud.css';
-
-import { injectCSS } from '../utils';
-
-import type { ConfigType } from '../../config/dynamic';
-
-/*
-This is used to determine if plugin is actually active
-(not if it's only enabled in options)
-*/
-let isEnabled = false;
-
-export const enabled = () => isEnabled;
-
-export default (win: BrowserWindow, options: ConfigType<'precise-volume'>) => {
-  isEnabled = true;
-  injectCSS(win.webContents, volumeHudStyle);
-
-  if (options.globalShortcuts?.volumeUp) {
-    globalShortcut.register((options.globalShortcuts.volumeUp), () => win.webContents.send('changeVolume', true));
-  }
-
-  if (options.globalShortcuts?.volumeDown) {
-    globalShortcut.register((options.globalShortcuts.volumeDown), () => win.webContents.send('changeVolume', false));
-  }
-};

plugins/precise-volume/front.ts

@@ -1,270 +0,0 @@
-import { ipcRenderer } from 'electron';
-
-import { setOptions, setMenuOptions, isEnabled } from '../../config/plugins';
-import { debounce } from '../../providers/decorators';
-
-import { YoutubePlayer } from '../../types/youtube-player';
-
-import type { ConfigType } from '../../config/dynamic';
-
-function $<E extends Element = Element>(selector: string) {
-  return document.querySelector<E>(selector);
-}
-
-let api: YoutubePlayer;
-let options: ConfigType<'precise-volume'>;
-
-export default (_options: ConfigType<'precise-volume'>) => {
-  options = _options;
-  document.addEventListener('apiLoaded', (e) => {
-    api = e.detail;
-    ipcRenderer.on('changeVolume', (_, toIncrease: boolean) => changeVolume(toIncrease));
-    ipcRenderer.on('setVolume', (_, value: number) => setVolume(value));
-    firstRun();
-  }, { once: true, passive: true });
-};
-
-// Without this function it would rewrite config 20 time when volume change by 20
-const writeOptions = debounce(() => {
-  setOptions('precise-volume', options);
-}, 1000);
-
-export const moveVolumeHud = debounce((showVideo: boolean) => {
-  const volumeHud = $<HTMLElement>('#volumeHud');
-  if (!volumeHud) {
-    return;
-  }
-
-  volumeHud.style.top = showVideo
-    ? `${($('ytmusic-player')!.clientHeight - $('video')!.clientHeight) / 2}px`
-    : '0';
-}, 250);
-
-const hideVolumeHud = debounce((volumeHud: HTMLElement) => {
-  volumeHud.style.opacity = '0';
-}, 2000);
-
-const hideVolumeSlider = debounce((slider: HTMLElement) => {
-  slider.classList.remove('on-hover');
-}, 2500);
-
-/** Restore saved volume and setup tooltip */
-function firstRun() {
-  if (typeof options.savedVolume === 'number') {
-    // Set saved volume as tooltip
-    setTooltip(options.savedVolume);
-
-    if (api.getVolume() !== options.savedVolume) {
-      setVolume(options.savedVolume);
-    }
-  }
-
-  setupPlaybar();
-
-  setupLocalArrowShortcuts();
-
-  // Workaround: computedStyleMap().get(string) returns CSSKeywordValue instead of CSSStyleValue
-  const noVid = ($('#main-panel')?.computedStyleMap().get('display') as CSSKeywordValue)?.value === 'none';
-  injectVolumeHud(noVid);
-  if (!noVid) {
-    setupVideoPlayerOnwheel();
-    if (!isEnabled('video-toggle')) {
-      // Video-toggle handles hud positioning on its own
-      const videoMode = () => api.getPlayerResponse().videoDetails?.musicVideoType !== 'MUSIC_VIDEO_TYPE_ATV';
-      $('video')?.addEventListener('srcChanged', () => moveVolumeHud(videoMode()));
-    }
-  }
-
-  // Change options from renderer to keep sync
-  ipcRenderer.on('setOptions', (_event, newOptions = {}) => {
-    Object.assign(options, newOptions);
-    setMenuOptions('precise-volume', options);
-  });
-}
-
-function injectVolumeHud(noVid: boolean) {
-  if (noVid) {
-    const position = 'top: 18px; right: 60px;';
-    const mainStyle = 'font-size: xx-large;';
-
-    $('.center-content.ytmusic-nav-bar')?.insertAdjacentHTML(
-      'beforeend',
-      `<span id="volumeHud" style="${position + mainStyle}"></span>`,
-    );
-  } else {
-    const position = 'top: 10px; left: 10px;';
-    const mainStyle = 'font-size: xxx-large; webkit-text-stroke: 1px black; font-weight: 600;';
-
-    $('#song-video')?.insertAdjacentHTML(
-      'afterend',
-      `<span id="volumeHud" style="${position + mainStyle}"></span>`,
-    );
-  }
-}
-
-function showVolumeHud(volume: number) {
-  const volumeHud = $<HTMLElement>('#volumeHud');
-  if (!volumeHud) {
-    return;
-  }
-
-  volumeHud.textContent = `${volume}%`;
-  volumeHud.style.opacity = '1';
-
-  hideVolumeHud(volumeHud);
-}
-
-/** Add onwheel event to video player */
-function setupVideoPlayerOnwheel() {
-  const panel = $<HTMLElement>('#main-panel');
-  if (!panel) return;
-
-  panel.addEventListener('wheel', (event) => {
-    event.preventDefault();
-    // Event.deltaY < 0 means wheel-up
-    changeVolume(event.deltaY < 0);
-  });
-}
-
-function saveVolume(volume: number) {
-  options.savedVolume = volume;
-  writeOptions();
-}
-
-/** Add onwheel event to play bar and also track if play bar is hovered */
-function setupPlaybar() {
-  const playerbar = $<HTMLElement>('ytmusic-player-bar');
-  if (!playerbar) return;
-
-  playerbar.addEventListener('wheel', (event) => {
-    event.preventDefault();
-    // Event.deltaY < 0 means wheel-up
-    changeVolume(event.deltaY < 0);
-  });
-
-  // Keep track of mouse position for showVolumeSlider()
-  playerbar.addEventListener('mouseenter', () => {
-    playerbar.classList.add('on-hover');
-  });
-
-  playerbar.addEventListener('mouseleave', () => {
-    playerbar.classList.remove('on-hover');
-  });
-
-  setupSliderObserver();
-}
-
-/** Save volume + Update the volume tooltip when volume-slider is manually changed */
-function setupSliderObserver() {
-  const sliderObserver = new MutationObserver((mutations) => {
-    for (const mutation of mutations) {
-      if (mutation.target instanceof HTMLInputElement) {
-        // This checks that volume-slider was manually set
-        const target = mutation.target;
-        const targetValueNumeric = Number(target.value);
-        if (mutation.oldValue !== target.value
-          && (typeof options.savedVolume !== 'number' || Math.abs(options.savedVolume - targetValueNumeric) > 4)) {
-          // Diff>4 means it was manually set
-          setTooltip(targetValueNumeric);
-          saveVolume(targetValueNumeric);
-        }
-      }
-    }
-  });
-
-  const slider = $('#volume-slider');
-  if (!slider) return;
-
-  // Observing only changes in 'value' of volume-slider
-  sliderObserver.observe(slider, {
-    attributeFilter: ['value'],
-    attributeOldValue: true,
-  });
-}
-
-function setVolume(value: number) {
-  api.setVolume(value);
-  // Save the new volume
-  saveVolume(value);
-
-  // Change slider position (important)
-  updateVolumeSlider();
-
-  // Change tooltips to new value
-  setTooltip(value);
-  // Show volume slider
-  showVolumeSlider();
-  // Show volume HUD
-  showVolumeHud(value);
-}
-
-/** If (toIncrease = false) then volume decrease */
-function changeVolume(toIncrease: boolean) {
-  // Apply volume change if valid
-  const steps = Number(options.steps || 1);
-  setVolume(toIncrease
-    ? Math.min(api.getVolume() + steps, 100)
-    : Math.max(api.getVolume() - steps, 0));
-}
-
-function updateVolumeSlider() {
-  const savedVolume = options.savedVolume ?? 0;
-  // Slider value automatically rounds to multiples of 5
-  for (const slider of ['#volume-slider', '#expand-volume-slider']) {
-    const silderElement = $<HTMLInputElement>(slider);
-    if (silderElement) {
-      silderElement.value = String(savedVolume > 0 && savedVolume < 5 ? 5 : savedVolume);
-    }
-  }
-}
-
-function showVolumeSlider() {
-  const slider = $<HTMLElement>('#volume-slider');
-  if (!slider) return;
-
-  // This class display the volume slider if not in minimized mode
-  slider.classList.add('on-hover');
-
-  hideVolumeSlider(slider);
-}
-
-// Set new volume as tooltip for volume slider and icon + expanding slider (appears when window size is small)
-const tooltipTargets = [
-  '#volume-slider',
-  'tp-yt-paper-icon-button.volume',
-  '#expand-volume-slider',
-  '#expand-volume',
-];
-
-function setTooltip(volume: number) {
-  for (const target of tooltipTargets) {
-    const tooltipTargetElement = $<HTMLElement>(target);
-    if (tooltipTargetElement) {
-      tooltipTargetElement.title = `${volume}%`;
-    }
-  }
-}
-
-function setupLocalArrowShortcuts() {
-  if (options.arrowsShortcut) {
-    window.addEventListener('keydown', (event) => {
-      if ($<HTMLElement & { opened: boolean }>('ytmusic-search-box')?.opened) {
-        return;
-      }
-
-      switch (event.code) {
-        case 'ArrowUp': {
-          event.preventDefault();
-          changeVolume(true);
-          break;
-        }
-
-        case 'ArrowDown': {
-          event.preventDefault();
-          changeVolume(false);
-          break;
-        }
-      }
-    });
-  }
-}

plugins/precise-volume/menu.ts

@@ -1,94 +0,0 @@
-import prompt, { KeybindOptions } from 'custom-electron-prompt';
-
-import { BrowserWindow, MenuItem } from 'electron';
-
-import { enabled } from './back';
-
-import { setMenuOptions } from '../../config/plugins';
-import promptOptions from '../../providers/prompt-options';
-import { MenuTemplate } from '../../menu';
-
-import type { ConfigType } from '../../config/dynamic';
-
-function changeOptions(changedOptions: Partial<ConfigType<'precise-volume'>>, options: ConfigType<'precise-volume'>, win: BrowserWindow) {
-  for (const option in changedOptions) {
-    // HACK: Weird TypeScript error
-    (options as Record<string, unknown>)[option] = (changedOptions as Record<string, unknown>)[option];
-  }
-  // Dynamically change setting if plugin is enabled
-  if (enabled()) {
-    win.webContents.send('setOptions', changedOptions);
-  } else { // Fallback to usual method if disabled
-    setMenuOptions('precise-volume', options);
-  }
-}
-
-export default (win: BrowserWindow, options: ConfigType<'precise-volume'>): MenuTemplate => [
-  {
-    label: 'Local Arrowkeys Controls',
-    type: 'checkbox',
-    checked: Boolean(options.arrowsShortcut),
-    click(item) {
-      changeOptions({ arrowsShortcut: item.checked }, options, win);
-    },
-  },
-  {
-    label: 'Global Hotkeys',
-    type: 'checkbox',
-    checked: Boolean(options.globalShortcuts?.volumeUp ?? options.globalShortcuts?.volumeDown),
-    click: (item) => promptGlobalShortcuts(win, options, item),
-  },
-  {
-    label: 'Set Custom Volume Steps',
-    click: () => promptVolumeSteps(win, options),
-  },
-];
-
-// Helper function for globalShortcuts prompt
-const kb = (label_: string, value_: string, default_: string): KeybindOptions => ({ 'value': value_, 'label': label_, 'default': default_ || undefined });
-
-async function promptVolumeSteps(win: BrowserWindow, options: ConfigType<'precise-volume'>) {
-  const output = await prompt({
-    title: 'Volume Steps',
-    label: 'Choose Volume Increase/Decrease Steps',
-    value: options.steps || 1,
-    type: 'counter',
-    counterOptions: { minimum: 0, maximum: 100, multiFire: true },
-    width: 380,
-    ...promptOptions(),
-  }, win);
-
-  if (output || output === 0) { // 0 is somewhat valid
-    changeOptions({ steps: output }, options, win);
-  }
-}
-
-async function promptGlobalShortcuts(win: BrowserWindow, options: ConfigType<'precise-volume'>, item: MenuItem) {
-  const output = await prompt({
-    title: 'Global Volume Keybinds',
-    label: 'Choose Global Volume Keybinds:',
-    type: 'keybind',
-    keybindOptions: [
-      kb('Increase Volume', 'volumeUp', options.globalShortcuts?.volumeUp),
-      kb('Decrease Volume', 'volumeDown', options.globalShortcuts?.volumeDown),
-    ],
-    ...promptOptions(),
-  }, win);
-
-  if (output) {
-    const newGlobalShortcuts: {
-      volumeUp: string;
-      volumeDown: string;
-    } = { volumeUp: '', volumeDown: '' };
-    for (const { value, accelerator } of output) {
-      newGlobalShortcuts[value as keyof typeof newGlobalShortcuts] = accelerator;
-    }
-
-    changeOptions({ globalShortcuts: newGlobalShortcuts }, options, win);
-
-    item.checked = Boolean(options.globalShortcuts.volumeUp) || Boolean(options.globalShortcuts.volumeDown);
-  } else {
-    // Reset checkbox if prompt was canceled
-    item.checked = !item.checked;
-  }
-}

plugins/precise-volume/preload.ts

@@ -1,41 +0,0 @@
-/* what */
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-
-import is from 'electron-is';
-
-const ignored = {
-  id: ['volume-slider', 'expand-volume-slider'],
-  types: ['mousewheel', 'keydown', 'keyup'],
-};
-
-function overrideAddEventListener() {
-  // YO WHAT ARE YOU DOING NOW?!?!
-  // Save native addEventListener
-  // @ts-ignore
-  // eslint-disable-next-line @typescript-eslint/unbound-method
-  Element.prototype._addEventListener = Element.prototype.addEventListener;
-  // Override addEventListener to Ignore specific events in volume-slider
-  Element.prototype.addEventListener = function (type: string, listener: (event: Event) => void, useCapture = false) {
-    if (!(
-      ignored.id.includes(this.id)
-      && ignored.types.includes(type)
-    )) {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any,@typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
-      (this as any)._addEventListener(type, listener, useCapture);
-    } else if (is.dev()) {
-      console.log(`Ignoring event: "${this.id}.${type}()"`);
-    }
-  };
-}
-
-export default () => {
-  overrideAddEventListener();
-  // Restore original function after finished loading to avoid keeping Element.prototype altered
-  window.addEventListener('load', () => {
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-explicit-any,@typescript-eslint/no-unsafe-member-access
-    Element.prototype.addEventListener = (Element.prototype as any)._addEventListener;
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-explicit-any,@typescript-eslint/no-unsafe-member-access
-    (Element.prototype as any)._addEventListener = undefined;
-
-  }, { once: true });
-};

plugins/quality-changer/back.ts

@@ -1,13 +0,0 @@
-import { ipcMain, dialog } from 'electron';
-
-export default () => {
-  ipcMain.handle('qualityChanger', async (_, qualityLabels: string[], currentIndex: number) => await dialog.showMessageBox({
-    type: 'question',
-    buttons: qualityLabels,
-    defaultId: currentIndex,
-    title: 'Choose Video Quality',
-    message: 'Choose Video Quality:',
-    detail: `Current Quality: ${qualityLabels[currentIndex]}`,
-    cancelId: -1,
-  }));
-};

plugins/quality-changer/front.ts

@@ -1,40 +0,0 @@
-import { ipcRenderer } from 'electron';
-
-import qualitySettingsTemplate from './templates/qualitySettingsTemplate.html';
-
-import { ElementFromHtml } from '../utils';
-import { YoutubePlayer } from '../../types/youtube-player';
-
-function $(selector: string): HTMLElement | null {
-  return document.querySelector(selector);
-}
-
-const qualitySettingsButton = ElementFromHtml(qualitySettingsTemplate);
-
-function setup(event: CustomEvent<YoutubePlayer>) {
-  const api = event.detail;
-
-  $('.top-row-buttons.ytmusic-player')?.prepend(qualitySettingsButton);
-
-  qualitySettingsButton.addEventListener('click', function chooseQuality() {
-    setTimeout(() => $('#player')?.click());
-
-    const qualityLevels = api.getAvailableQualityLevels();
-
-    const currentIndex = qualityLevels.indexOf(api.getPlaybackQuality());
-
-    ipcRenderer.invoke('qualityChanger', api.getAvailableQualityLabels(), currentIndex).then((promise: { response: number }) => {
-      if (promise.response === -1) {
-        return;
-      }
-
-      const newQuality = qualityLevels[promise.response];
-      api.setPlaybackQualityRange(newQuality);
-      api.setPlaybackQuality(newQuality);
-    });
-  });
-}
-
-export default () => {
-  document.addEventListener('apiLoaded', setup, { once: true, passive: true });
-};

plugins/shortcuts/back.ts

@@ -1,69 +0,0 @@
-import { BrowserWindow, globalShortcut } from 'electron';
-import is from 'electron-is';
-import electronLocalshortcut from 'electron-localshortcut';
-
-import registerMPRIS from './mpris';
-
-import getSongControls from '../../providers/song-controls';
-
-import type { ConfigType } from '../../config/dynamic';
-
-function _registerGlobalShortcut(webContents: Electron.WebContents, shortcut: string, action: (webContents: Electron.WebContents) => void) {
-  globalShortcut.register(shortcut, () => {
-    action(webContents);
-  });
-}
-
-function _registerLocalShortcut(win: BrowserWindow, shortcut: string, action: (webContents: Electron.WebContents) => void) {
-  electronLocalshortcut.register(win, shortcut, () => {
-    action(win.webContents);
-  });
-}
-
-function registerShortcuts(win: BrowserWindow, options: ConfigType<'shortcuts'>) {
-  const songControls = getSongControls(win);
-  const { playPause, next, previous, search } = songControls;
-
-  if (options.overrideMediaKeys) {
-    _registerGlobalShortcut(win.webContents, 'MediaPlayPause', playPause);
-    _registerGlobalShortcut(win.webContents, 'MediaNextTrack', next);
-    _registerGlobalShortcut(win.webContents, 'MediaPreviousTrack', previous);
-  }
-
-  _registerLocalShortcut(win, 'CommandOrControl+F', search);
-  _registerLocalShortcut(win, 'CommandOrControl+L', search);
-
-  if (is.linux()) {
-    registerMPRIS(win);
-  }
-
-  const { global, local } = options;
-  const shortcutOptions = { global, local };
-
-  for (const optionType in shortcutOptions) {
-    registerAllShortcuts(shortcutOptions[optionType as 'global' | 'local'], optionType);
-  }
-
-  function registerAllShortcuts(container: Record<string, string>, type: string) {
-    for (const action in container) {
-      if (!container[action]) {
-        continue; // Action accelerator is empty
-      }
-
-      console.debug(`Registering ${type} shortcut`, container[action], ':', action);
-      const actionCallback: () => void = songControls[action as keyof typeof songControls];
-      if (typeof actionCallback !== 'function') {
-        console.warn('Invalid action', action);
-        continue;
-      }
-
-      if (type === 'global') {
-        _registerGlobalShortcut(win.webContents, container[action], actionCallback);
-      } else { // Type === "local"
-        _registerLocalShortcut(win, local[action], actionCallback);
-      }
-    }
-  }
-}
-
-export default registerShortcuts;

plugins/shortcuts/menu.ts

@@ -1,67 +0,0 @@
-import prompt, { KeybindOptions } from 'custom-electron-prompt';
-
-import { BrowserWindow } from 'electron';
-
-import { setMenuOptions } from '../../config/plugins';
-
-
-import promptOptions from '../../providers/prompt-options';
-import { MenuTemplate } from '../../menu';
-
-import type { ConfigType } from '../../config/dynamic';
-
-export default (win: BrowserWindow, options: ConfigType<'shortcuts'>): MenuTemplate => [
-  {
-    label: 'Set Global Song Controls',
-    click: () => promptKeybind(options, win),
-  },
-  {
-    label: 'Override MediaKeys',
-    type: 'checkbox',
-    checked: options.overrideMediaKeys,
-    click: (item) => setOption(options, 'overrideMediaKeys', item.checked),
-  },
-];
-
-function setOption<Key extends keyof ConfigType<'shortcuts'> = keyof ConfigType<'shortcuts'>>(
-  options: ConfigType<'shortcuts'>,
-  key: Key | null = null,
-  newValue: ConfigType<'shortcuts'>[Key] | null = null,
-) {
-  if (key && newValue !== null) {
-    options[key] = newValue;
-  }
-
-  setMenuOptions('shortcuts', options);
-}
-
-// Helper function for keybind prompt
-const kb = (label_: string, value_: string, default_: string): KeybindOptions => ({ value: value_, label: label_, default: default_ });
-
-async function promptKeybind(options: ConfigType<'shortcuts'>, win: BrowserWindow) {
-  const output = await prompt({
-    title: 'Global Keybinds',
-    label: 'Choose Global Keybinds for Songs Control:',
-    type: 'keybind',
-    keybindOptions: [ // If default=undefined then no default is used
-      kb('Previous', 'previous', options.global?.previous),
-      kb('Play / Pause', 'playPause', options.global?.playPause),
-      kb('Next', 'next', options.global?.next),
-    ],
-    height: 270,
-    ...promptOptions(),
-  }, win);
-
-  if (output) {
-    if (!options.global) {
-      options.global = {};
-    }
-
-    for (const { value, accelerator } of output) {
-      options.global[value] = accelerator;
-    }
-
-    setOption(options);
-  }
-  // Else -> pressed cancel
-}

plugins/shortcuts/mpris.ts

@@ -1,177 +0,0 @@
-import { BrowserWindow, ipcMain } from 'electron';
-
-import mpris, { Track } from '@jellybrick/mpris-service';
-
-import registerCallback from '../../providers/song-info';
-import getSongControls from '../../providers/song-controls';
-import config from '../../config';
-
-function setupMPRIS() {
-  const instance = new mpris({
-    name: 'youtube-music',
-    identity: 'YouTube Music',
-    supportedMimeTypes: ['audio/mpeg'],
-    supportedInterfaces: ['player'],
-  });
-  instance.canRaise = true;
-  instance.supportedUriSchemes = ['https'];
-  instance.desktopEntry = 'youtube-music';
-  return instance;
-}
-
-function registerMPRIS(win: BrowserWindow) {
-  const songControls = getSongControls(win);
-  const { playPause, next, previous, volumeMinus10, volumePlus10, shuffle } = songControls;
-  try {
-    // TODO: "Typing" for this arguments
-    const secToMicro = (n: unknown) => Math.round(Number(n) * 1e6);
-    const microToSec = (n: unknown) => Math.round(Number(n) / 1e6);
-
-    const seekTo = (e: { position: unknown }) => win.webContents.send('seekTo', microToSec(e.position));
-    const seekBy = (o: unknown) => win.webContents.send('seekBy', microToSec(o));
-
-    const player = setupMPRIS();
-
-    ipcMain.on('apiLoaded', () => {
-      win.webContents.send('setupSeekedListener', 'mpris');
-      win.webContents.send('setupTimeChangedListener', 'mpris');
-      win.webContents.send('setupRepeatChangedListener', 'mpris');
-      win.webContents.send('setupVolumeChangedListener', 'mpris');
-    });
-
-    ipcMain.on('seeked', (_, t: number) => player.seeked(secToMicro(t)));
-
-    let currentSeconds = 0;
-    ipcMain.on('timeChanged', (_, t: number) => currentSeconds = t);
-
-    ipcMain.on('repeatChanged', (_, mode: string) => {
-      switch (mode) {
-        case 'NONE': {
-          player.loopStatus = mpris.LOOP_STATUS_NONE;
-          break;
-        }
-        case 'ONE': {
-          player.loopStatus = mpris.LOOP_STATUS_PLAYLIST;
-          break;
-        }
-        case 'ALL': {
-          player.loopStatus = mpris.LOOP_STATUS_TRACK;
-          // No default
-          break;
-        }
-      }
-    });
-    player.on('loopStatus', (status: string) => {
-      // SwitchRepeat cycles between states in that order
-      const switches = [mpris.LOOP_STATUS_NONE, mpris.LOOP_STATUS_PLAYLIST, mpris.LOOP_STATUS_TRACK];
-      const currentIndex = switches.indexOf(player.loopStatus);
-      const targetIndex = switches.indexOf(status);
-
-      // Get a delta in the range [0,2]
-      const delta = (targetIndex - currentIndex + 3) % 3;
-      songControls.switchRepeat(delta);
-    });
-    player.getPosition = () => secToMicro(currentSeconds);
-
-    player.on('raise', () => {
-      win.setSkipTaskbar(false);
-      win.show();
-    });
-
-    player.on('play', () => {
-      if (player.playbackStatus !== mpris.PLAYBACK_STATUS_PLAYING) {
-        player.playbackStatus = mpris.PLAYBACK_STATUS_PLAYING;
-        playPause();
-      }
-    });
-    player.on('pause', () => {
-      if (player.playbackStatus !== mpris.PLAYBACK_STATUS_PAUSED) {
-        player.playbackStatus = mpris.PLAYBACK_STATUS_PAUSED;
-        playPause();
-      }
-    });
-    player.on('playpause', () => {
-      player.playbackStatus = player.playbackStatus === mpris.PLAYBACK_STATUS_PLAYING ? mpris.PLAYBACK_STATUS_PAUSED : mpris.PLAYBACK_STATUS_PLAYING;
-      playPause();
-    });
-
-    player.on('next', next);
-    player.on('previous', previous);
-
-    player.on('seek', seekBy);
-    player.on('position', seekTo);
-
-    player.on('shuffle', (enableShuffle) => {
-      if (enableShuffle) {
-        shuffle();
-      }
-    });
-    player.on('open', (args: { uri: string }) => { win.loadURL(args.uri); });
-
-    let mprisVolNewer = false;
-    let autoUpdate = false;
-    ipcMain.on('volumeChanged', (_, newVol) => {
-      if (~~(player.volume * 100) !== newVol) {
-        if (mprisVolNewer) {
-          mprisVolNewer = false;
-          autoUpdate = false;
-        } else {
-          autoUpdate = true;
-          player.volume = Number.parseFloat((newVol / 100).toFixed(2));
-          mprisVolNewer = false;
-          autoUpdate = false;
-        }
-      }
-    });
-
-    player.on('volume', (newVolume) => {
-      if (config.plugins.isEnabled('precise-volume')) {
-        // With precise volume we can set the volume to the exact value.
-        const newVol = ~~(newVolume * 100);
-        if (~~(player.volume * 100) !== newVol && !autoUpdate) {
-          mprisVolNewer = true;
-          autoUpdate = false;
-          win.webContents.send('setVolume', newVol);
-        }
-      } else {
-        // With keyboard shortcuts we can only change the volume in increments of 10, so round it.
-        let deltaVolume = Math.round((newVolume - player.volume) * 10);
-        while (deltaVolume !== 0 && deltaVolume > 0) {
-          volumePlus10();
-          player.volume += 0.1;
-          deltaVolume--;
-        }
-
-        while (deltaVolume !== 0 && deltaVolume < 0) {
-          volumeMinus10();
-          player.volume -= 0.1;
-          deltaVolume++;
-        }
-      }
-    });
-
-    registerCallback((songInfo) => {
-      if (player) {
-        const data: Track = {
-          'mpris:length': secToMicro(songInfo.songDuration),
-          'mpris:artUrl': songInfo.imageSrc ?? undefined,
-          'xesam:title': songInfo.title,
-          'xesam:url': songInfo.url,
-          'xesam:artist': [songInfo.artist],
-          'mpris:trackid': '/',
-        };
-        if (songInfo.album) {
-          data['xesam:album'] = songInfo.album;
-        }
-
-        player.metadata = data;
-        player.seeked(secToMicro(songInfo.elapsedSeconds));
-        player.playbackStatus = songInfo.isPaused ? mpris.PLAYBACK_STATUS_PAUSED : mpris.PLAYBACK_STATUS_PLAYING;
-      }
-    });
-  } catch (error) {
-    console.warn('Error in MPRIS', error);
-  }
-}
-
-export default registerMPRIS;

plugins/skip-silences/front.ts

@@ -1,120 +0,0 @@
-import type { ConfigType } from '../../config/dynamic';
-
-type SkipSilencesOptions = ConfigType<'skip-silences'>;
-
-export default (options: SkipSilencesOptions) => {
-  let isSilent = false;
-  let hasAudioStarted = false;
-
-  const smoothing = 0.1;
-  const threshold = -100; // DB (-100 = absolute silence, 0 = loudest)
-  const interval = 2; // Ms
-  const history = 10;
-  const speakingHistory = Array.from({ length: history }).fill(0) as number[];
-
-  document.addEventListener(
-    'audioCanPlay',
-    (e) => {
-      const video = document.querySelector('video');
-      const { audioContext } = e.detail;
-      const sourceNode = e.detail.audioSource;
-
-      // Use an audio analyser similar to Hark
-      // https://github.com/otalk/hark/blob/master/hark.bundle.js
-      const analyser = audioContext.createAnalyser();
-      analyser.fftSize = 512;
-      analyser.smoothingTimeConstant = smoothing;
-      const fftBins = new Float32Array(analyser.frequencyBinCount);
-
-      sourceNode.connect(analyser);
-      analyser.connect(audioContext.destination);
-
-      const looper = () => {
-        setTimeout(() => {
-          const currentVolume = getMaxVolume(analyser, fftBins);
-
-          let history = 0;
-          if (currentVolume > threshold && isSilent) {
-            // Trigger quickly, short history
-            for (
-              let i = speakingHistory.length - 3;
-              i < speakingHistory.length;
-              i++
-            ) {
-              history += speakingHistory[i];
-            }
-
-            if (history >= 2) {
-              // Not silent
-              isSilent = false;
-              hasAudioStarted = true;
-            }
-          } else if (currentVolume < threshold && !isSilent) {
-            for (const element of speakingHistory) {
-              history += element;
-            }
-
-            if (history == 0 // Silent
-
-              && !(
-                video && (
-                  video.paused
-                  || video.seeking
-                  || video.ended
-                  || video.muted
-                  || video.volume === 0
-                )
-              )
-            ) {
-              isSilent = true;
-              skipSilence();
-            }
-          }
-
-          speakingHistory.shift();
-          speakingHistory.push(Number(currentVolume > threshold));
-
-          looper();
-        }, interval);
-      };
-
-      looper();
-
-      const skipSilence = () => {
-        if (options.onlySkipBeginning && hasAudioStarted) {
-          return;
-        }
-
-        if (isSilent && video && !video.paused) {
-          video.currentTime += 0.2; // In s
-        }
-      };
-
-      video?.addEventListener('play', () => {
-        hasAudioStarted = false;
-        skipSilence();
-      });
-
-      video?.addEventListener('seeked', () => {
-        hasAudioStarted = false;
-        skipSilence();
-      });
-    },
-    {
-      passive: true,
-    },
-  );
-};
-
-function getMaxVolume(analyser: AnalyserNode, fftBins: Float32Array) {
-  let maxVolume = Number.NEGATIVE_INFINITY;
-  analyser.getFloatFrequencyData(fftBins);
-
-  for (let i = 4, ii = fftBins.length; i < ii; i++) {
-    if (fftBins[i] > maxVolume && fftBins[i] < 0) {
-      maxVolume = fftBins[i];
-    }
-  }
-
-  return maxVolume;
-}

plugins/sponsorblock/back.ts

@@ -1,52 +0,0 @@
-import { BrowserWindow, ipcMain } from 'electron';
-import is from 'electron-is';
-
-import { sortSegments } from './segments';
-
-import { SkipSegment } from './types';
-
-import defaultConfig from '../../config/defaults';
-
-import type { GetPlayerResponse } from '../../types/get-player-response';
-import type { ConfigType } from '../../config/dynamic';
-
-export default (win: BrowserWindow, options: ConfigType<'sponsorblock'>) => {
-  const { apiURL, categories } = {
-    ...defaultConfig.plugins.sponsorblock,
-    ...options,
-  };
-
-  ipcMain.on('video-src-changed', async (_, data: GetPlayerResponse) => {
-    const segments = await fetchSegments(apiURL, categories, data?.videoDetails?.videoId);
-    win.webContents.send('sponsorblock-skip', segments);
-  });
-};
-
-const fetchSegments = async (apiURL: string, categories: string[], videoId: string) => {
-  const sponsorBlockURL = `${apiURL}/api/skipSegments?videoID=${videoId}&categories=${JSON.stringify(
-    categories,
-  )}`;
-  try {
-    const resp = await fetch(sponsorBlockURL, {
-      method: 'GET',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      redirect: 'follow',
-    });
-    if (resp.status !== 200) {
-      return [];
-    }
-
-    const segments = await resp.json() as SkipSegment[];
-    return sortSegments(
-      segments.map((submission) => submission.segment),
-    );
-  } catch (error) {
-    if (is.dev()) {
-      console.log('error on sponsorblock request:', error);
-    }
-
-    return [];
-  }
-};

plugins/sponsorblock/front.ts

@@ -1,37 +0,0 @@
-import { ipcRenderer } from 'electron';
-import is from 'electron-is';
-
-import { Segment } from './types';
-
-let currentSegments: Segment[] = [];
-
-export default () => {
-  ipcRenderer.on('sponsorblock-skip', (_, segments: Segment[]) => {
-    currentSegments = segments;
-  });
-
-  document.addEventListener('apiLoaded', () => {
-    const video = document.querySelector<HTMLVideoElement>('video');
-    if (!video) return;
-
-    video.addEventListener('timeupdate', (e) => {
-      if (e.target instanceof HTMLVideoElement) {
-        const target = e.target;
-
-        for (const segment of currentSegments) {
-          if (
-            target.currentTime >= segment[0]
-            && target.currentTime < segment[1]
-          ) {
-            target.currentTime = segment[1];
-            if (is.dev()) {
-              console.log('SponsorBlock: skipping segment', segment);
-            }
-          }
-        }
-      }
-    });
-    // Reset segments on song end
-    video.addEventListener('emptied', () => currentSegments = []);
-  }, { once: true, passive: true });
-};

plugins/sponsorblock/types.ts

@@ -1,12 +0,0 @@
-export type Segment = [number, number];
-
-export interface SkipSegment { // Array of this object
-  segment: Segment; //[0, 15.23] start and end time in seconds
-  UUID: string,
-  category: string, // [1]
-  videoDuration: number // Duration of video when submission occurred (to be used to determine when a submission is out of date). 0 when unknown. +- 1 second
-  actionType: string, // [3]
-  locked: number, // if submission is locked
-  votes: number, // Votes on segment
-  description: string, // title for chapters, empty string for other segments
-}