Bump version to 3.7.2

- fix #2863
- fix #2780

.editorconfig

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

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -0,0 +1,95 @@
+name: Bug Report
+description: Report a YouTube Music bug
+title: "[Bug]: "
+labels: "bug :beetle:"
+body:
+- type: checkboxes
+  attributes:
+    label: Preflight Checklist
+    description: Please ensure you've completed all of the following.
+    options:
+      - label: I use the latest version of YouTube Music (Application).
+        required: true
+      - label: I have searched the [issue tracker](https://github.com/th-ch/youtube-music/issues) for a bug report that matches the one I want to file, without success.
+        required: true
+      - 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 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 version of (WEB) YTM](https://music.youtube.com).
+- type: dropdown
+  attributes:
+    label: What operating system are you using?
+    options:
+      - Windows
+      - macOS
+      - Ubuntu
+      - Other Linux
+      - Other (specify below)
+  validations:
+    required: true
+- type: input
+  attributes:
+    label: Operating System Version
+    description: What operating system version are you using? On Windows, click 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 CPU architecture are you using?
+    options:
+      - x64
+      - ia32
+      - arm64 (including Apple Silicon)
+      - Other (specify below)
+  validations:
+    required: true
+- type: input
+  attributes:
+    label: Last Known Working YouTube Music (Application) version
+    description: (If applicable) What is the last version of YouTube Music this worked in?
+    placeholder: 1.20.0
+- type: textarea
+  attributes:
+    label: 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.
+  validations:
+    required: true
+- type: textarea
+  attributes:
+    label: Actual Behavior
+    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
+    description: If your problem needs further explanation, or if the issue you're seeing cannot be reproduced in a gist, please add more information here. 

.github/ISSUE_TEMPLATE/feature_request.yml

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

.github/workflows/build.yml

@@ -6,7 +6,7 @@ on:
   pull_request:
 
 env:
-  NODE_VERSION: "16.x"
+  NODE_VERSION: "20.x"
 
 jobs:
   build:
@@ -15,95 +15,75 @@ jobs:
     strategy:
       fail-fast: true
       matrix:
-        os: [macos-latest, ubuntu-latest, windows-latest]
+        os: [ macos-latest, ubuntu-latest, windows-latest ]
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9
+          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 }}
 
-      - name: Expose yarn config as "$GITHUB_OUTPUT"
-        id: yarn-config
-        shell: bash
-        run: |
-          echo "CACHE_FOLDER=$(yarn config get cacheFolder)" >> $GITHUB_OUTPUT
-
-      # Yarn rotates the downloaded cache archives, @see https://github.com/actions/setup-node/issues/325
-      # Yarn cache is also reusable between arch and os.
-      - name: Restore yarn cache
-        uses: actions/cache@v3
-        id: yarn-download-cache
-        with:
-          path: ${{ steps.yarn-config.outputs.CACHE_FOLDER }}
-          key: yarn-download-cache-${{ hashFiles('yarn.lock') }}
-          restore-keys: |
-            yarn-download-cache-
-
-      # Invalidated on yarn.lock changes
-      - name: Restore yarn install state
-        id: yarn-install-state-cache
-        uses: actions/cache@v3
-        with:
-          path: .yarn/ci-cache/
-          key: ${{ runner.os }}-yarn-install-state-cache-${{ hashFiles('yarn.lock', '.yarnrc.yml') }}
-
       - name: Install dependencies
-        shell: bash
+        run: 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: |
-          yarn install --immutable --inline-builds
+          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:
-          # CI optimizations. Overrides yarnrc.yml options (or their defaults) in the CI action.
-          YARN_ENABLE_GLOBAL_CACHE: "false" # Use local cache folder to keep downloaded archives
-          YARN_NM_MODE: "hardlinks-local" # Hardlinks-(local|global) reduces io / node_modules size
-          YARN_INSTALL_STATE_PATH: .yarn/ci-cache/install-state.gz # Very small speedup when lock does not change
+          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: |
+          sudo snap install snapcraft --classic
+          sudo apt update
+          sudo apt install -y flatpak flatpak-builder
+          sudo flatpak remote-add --if-not-exists --system flathub https://flathub.org/repo/flathub.flatpakrepo
+          sudo flatpak install -y flathub org.freedesktop.Platform/x86_64/24.08
+          sudo flatpak install -y flathub org.freedesktop.Sdk/x86_64/24.08
+          sudo flatpak install -y flathub org.electronjs.Electron2.BaseApp/x86_64/24.08
+          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: yarn 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.GH_TOKEN }}
-        run: |
-          yarn run release:mac
-
-      - name: Build and release on Linux
-        if: startsWith(matrix.os, 'ubuntu') && github.repository == 'th-ch/youtube-music'
-        env:
-          GH_TOKEN: ${{ secrets.GH_TOKEN }}
-        run: |
-          yarn run release:linux
-
-      - name: Build and release on Windows
-        if: startsWith(matrix.os, 'windows') && github.repository == 'th-ch/youtube-music'
-        env:
-          GH_TOKEN: ${{ secrets.GH_TOKEN }}
-        run: |
-          yarn run release:win
-
-      # Only build without release if it is a fork
-      - name: Build on Mac
-        if: startsWith(matrix.os, 'macOS') && github.repository != 'th-ch/youtube-music'
-        run: |
-          yarn run build:mac
-
-      - name: Build on Linux
-        if: startsWith(matrix.os, 'ubuntu') && github.repository != 'th-ch/youtube-music'
-        run: |
-          yarn run build:linux
-
-      - name: Build on Windows
-        if: startsWith(matrix.os, 'windows') && github.repository != 'th-ch/youtube-music'
-        run: |
-          yarn run build:win
 
   release:
     runs-on: ubuntu-latest
@@ -111,49 +91,31 @@ jobs:
     if: github.repository == 'th-ch/youtube-music' && github.ref == 'refs/heads/master'
     needs: build
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 0
 
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9
+          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 }}
 
-      - name: Expose yarn config as "$GITHUB_OUTPUT"
-        id: yarn-config
-        shell: bash
-        run: |
-          echo "CACHE_FOLDER=$(yarn config get cacheFolder)" >> $GITHUB_OUTPUT
-
-      # Yarn rotates the downloaded cache archives, @see https://github.com/actions/setup-node/issues/325
-      # Yarn cache is also reusable between arch and os.
-      - name: Restore yarn cache
-        uses: actions/cache@v3
-        id: yarn-download-cache
-        with:
-          path: ${{ steps.yarn-config.outputs.CACHE_FOLDER }}
-          key: yarn-download-cache-${{ hashFiles('yarn.lock') }}
-          restore-keys: |
-            yarn-download-cache-
-
-      # Invalidated on yarn.lock changes
-      - name: Restore yarn install state
-        id: yarn-install-state-cache
-        uses: actions/cache@v3
-        with:
-          path: .yarn/ci-cache/
-          key: ${{ runner.os }}-yarn-install-state-cache-${{ hashFiles('yarn.lock', '.yarnrc.yml') }}
-
       - name: Install dependencies
-        shell: bash
-        run: |
-          yarn install --immutable --inline-builds
-        env:
-          # CI optimizations. Overrides yarnrc.yml options (or their defaults) in the CI action.
-          YARN_ENABLE_GLOBAL_CACHE: "false" # Use local cache folder to keep downloaded archives
-          YARN_NM_MODE: "hardlinks-local" # Hardlinks-(local|global) reduces io / node_modules size
-          YARN_INSTALL_STATE_PATH: .yarn/ci-cache/install-state.gz # Very small speedup when lock does not change
+        run: pnpm install --frozen-lockfile
 
       - name: Get version
         run: |
@@ -169,7 +131,7 @@ jobs:
         uses: cardinalby/git-get-release-action@v1
         id: get_draft_release
         env:
-          GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:
           latest: true
           draft: true
@@ -191,14 +153,16 @@ 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: |
-          yarn changelog
+          pnpm changelog
 
       - name: Commit changelog
         if: ${{ env.VERSION_HASH == '' }}
-        uses: stefanzweifel/git-auto-commit-action@v4
+        uses: stefanzweifel/git-auto-commit-action@v5
         with:
           commit_message: Update changelog for ${{ env.VERSION_TAG }}
           file_pattern: "changelog.md"

.github/workflows/dependency-review.yml

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

.github/workflows/winget-cla.yml

@@ -0,0 +1,20 @@
+name: Submit CLA to Winget PR
+
+on:
+  workflow_dispatch:
+    inputs:
+      pr_url:
+        description: "Specific PR URL"
+        required: true
+        type: string
+
+jobs:
+  comment:
+    name: Comment to PR
+    runs-on: ubuntu-latest
+    steps:
+      - name: Submit CLA to Windows Package Manager Community Repository Pull Request
+        run: gh pr comment $PR_URL --body "@microsoft-github-policy-service agree"
+        env:
+          GITHUB_TOKEN: ${{ secrets.WINGET_ACC_TOKEN }}
+          PR_URL: ${{ inputs.pr_url }}

.github/workflows/winget-submission.yml

@@ -2,7 +2,7 @@ name: Submit to Windows Package Manager Community Repository
 
 on:
   release:
-    types: [released]
+    types: [ released ]
   workflow_dispatch:
     inputs:
       tag_name:
@@ -13,14 +13,18 @@ on:
 jobs:
   winget:
     name: Publish winget package
-    runs-on: windows-latest
+    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-Setup-[\d\.]+\.exe$'
-          version: ${{ inputs.tag_name || github.event.release.tag_name }}
+          installers-regex: '^YouTube-Music-Web-Setup-[\d\.]+\.exe$'
+          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

@@ -1,5 +1,6 @@
 node_modules
 /dist
+/pack
 electron-builder.yml
 .vscode/settings.json
 .idea
@@ -11,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
+}

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

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

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

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

.yarnrc.yml

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

README.md

@@ -0,0 +1,405 @@
+<div align="center">
+
+# YouTube Music
+
+[![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/eslint.config.mjs)
+[![Build status](https://img.shields.io/github/actions/workflow/status/th-ch/youtube-music/build.yml?branch=master&style=for-the-badge&logo=youtube-music)](https://GitHub.com/th-ch/youtube-music/releases/)
+[![GitHub All Releases](https://img.shields.io/github/downloads/th-ch/youtube-music/total?style=for-the-badge&logo=youtube-music)](https://GitHub.com/th-ch/youtube-music/releases/)
+[![AUR](https://img.shields.io/aur/version/youtube-music-bin?color=blueviolet&style=for-the-badge&logo=youtube-music)](https://aur.archlinux.org/packages/youtube-music-bin)
+[![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.png "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>
+
+Read this in other languages: [🇰🇷](./docs/readme/README-ko.md), [🇮🇸](./docs/readme/README-is.md), [🇨🇱 🇪🇸](./docs/readme/README-es.md), [🇷🇺](./docs/readme/README-ru.md), [🇭🇺](./docs/readme/README-hu.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)|
+
+## Content
+
+- [Features](#features)
+- [Available plugins](#available-plugins)
+- [Translation](#translation)
+- [Download](#download)
+  - [Arch Linux](#arch-linux)
+  - [MacOS](#macos)
+  - [Windows](#windows)
+    - [How to install without a network connection? (in Windows)](#how-to-install-without-a-network-connection-in-windows)
+- [Themes](#themes)
+- [Dev](#dev)
+- [Build your own plugins](#build-your-own-plugins)
+  - [Creating a plugin](#creating-a-plugin)
+  - [Common use cases](#common-use-cases)
+- [Build](#build)
+- [Production Preview](#production-preview)
+- [Tests](#tests)
+- [License](#license)
+- [FAQ](#faq)
+
+## 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 Navigation Bar**: makes navigation bar transparent and blurry
+
+- **Bypass Age Restrictions**: bypass YouTube's age verification
+
+- **Captions Selector**: Enable captions
+
+- **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/) 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
+  MP3 [directly from the interface](https://user-images.githubusercontent.com/61631665/129977677-83a7d067-c192-45e1-98ae-b5a4927393be.png) [(youtube-dl)](https://github.com/ytdl-org/youtube-dl)
+
+- **Equalizer**: add filters to boost or cut specific range of frequencies (e.g. bass booster)
+
+- **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
+
+- **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)
+
+- **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
+
+- **Notifications**: Display a notification when a song starts
+  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
+
+- **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)
+
+- **Precise Volume**: Control the volume precisely using mousewheel/hotkeys, with a custom hud and customizable volume
+  steps
+
+- **Shortcuts (& MPRIS)**: 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 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
+
+- **Synced Lyrics**: Provides synced lyrics to songs, using providers like [LRClib](https://lrclib.net).
+
+- **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
+
+- **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
+
+
+## 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
+latest version.
+
+### Arch Linux
+
+Install the [`youtube-music-bin`](https://aur.archlinux.org/packages/youtube-music-bin) package from the AUR. For AUR installation instructions, take a look at
+this [wiki page](https://wiki.archlinux.org/index.php/Arch_User_Repository#Installing_packages).
+
+### macOS
+
+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
+/usr/bin/xattr -cr /Applications/YouTube\ Music.app
+```
+
+### Windows
+
+You can use the [Scoop package manager](https://scoop.sh) to install the `youtube-music` package from
+the [`extras` bucket](https://github.com/ScoopInstaller/Extras).
+
+```bash
+scoop bucket add extras
+scoop install extras/youtube-music
+```
+
+Alternately you can use [Winget](https://learn.microsoft.com/en-us/windows/package-manager/winget/), Windows 11s
+official CLI package manager to install the `th-ch.YouTubeMusic` package.
+
+*Note: Microsoft Defender SmartScreen might block the installation since it is from an "unknown publisher". This is also
+true for the manual installation when trying to run the executable(.exe) after a manual download here on github (same
+file).*
+
+```bash
+winget install th-ch.YouTubeMusic
+```
+
+#### How to install without a network connection? (in Windows)
+
+- Download the `*.nsis.7z` file for _your device architecture_ in [release page](https://github.com/th-ch/youtube-music/releases/latest).
+  - `x64` for 64-bit Windows
+  - `ia32` for 32-bit Windows
+  - `arm64` for ARM64 Windows
+- Download installer in release page. (`*-Setup.exe`)
+- Place them in the **same directory**.
+- Run the installer.
+
+## Themes
+
+You can load CSS files to change the look of the application (Options > Visual Tweaks > Themes).
+
+Some predefined themes are available in https://github.com/kerichdev/themes-for-ytmdesktop-player.
+
+## Dev
+
+```bash
+git clone https://github.com/th-ch/youtube-music
+cd youtube-music
+pnpm install --frozen-lockfile
+pnpm dev
+```
+
+## Build your own plugins
+
+Using plugins, you can:
+
+- manipulate the app - the `BrowserWindow` from electron is passed to the plugin handler
+- change the front by manipulating the HTML/CSS
+
+### Creating a plugin
+
+Create a folder in `src/plugins/YOUR-PLUGIN-NAME`:
+
+- `index.ts`: the main file of the plugin
+```typescript
+import style from './style.css?inline'; // import style as inline
+
+import { createPlugin } from '@/utils';
+
+export default createPlugin({
+  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', () => {
+        return 'hello';
+      });
+    },
+    // it fired when config changed
+    onConfigChange(newConfig) { /* ... */ },
+    // it fired when plugin disabled
+    stop(context) { /* ... */ },
+  },
+  renderer: {
+    async start(context) {
+      console.log(await context.ipc.invoke('some-event'));
+    },
+    // Only renderer available hook
+    onPlayerApiReady(api: YoutubePlayer, context: RendererContext) {
+      // set plugin config easily
+      context.setConfig({ myConfig: api.getVolume() });
+    },
+    onConfigChange(newConfig) { /* ... */ },
+    stop(_context) { /* ... */ },
+  },
+  preload: {
+    async start({ getConfig }) {
+      const config = await getConfig();
+    },
+    onConfigChange(newConfig) {},
+    stop(_context) {},
+  },
+});
+```
+
+### Common use cases
+
+- injecting custom CSS: create a `style.css` file in the same folder then:
+
+```typescript
+// index.ts
+import style from './style.css?inline'; // import style as inline
+
+import { createPlugin } from '@/utils';
+
+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
+});
+```
+
+- If you want to change the HTML:
+
+```typescript
+import { createPlugin } from '@/utils';
+
+export default createPlugin({
+  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 `index.ts` file and
+  example in `sponsorblock` plugin.
+
+## Build
+
+1. Clone the repo
+2. Follow [this guide](https://pnpm.io/installation) to install `pnpm`
+3. Run `pnpm install --frozen-lockfile` to install dependencies
+4. Run `pnpm build:OS`
+
+- `pnpm dist:win` - Windows
+- `pnpm dist:linux` - Linux (amd64)
+- `pnpm dist:linux:deb-arm64` - Linux (arm64 for Debian)
+- `pnpm dist:linux:rpm-arm64` - Linux (arm64 for Fedora)
+- `pnpm dist:mac` - macOS (amd64)
+- `pnpm dist:mac:arm64` - macOS (arm64)
+
+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
+pnpm test
+```
+
+Uses [Playwright](https://playwright.dev/) to test the app.
+
+## License
+
+MIT © [th-ch](https://github.com/th-ch/youtube-music)
+
+## FAQ
+
+### 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)

assets/error.html

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

assets/youtube-music.svg

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

config/defaults.js

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

config/dynamic.js

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

config/index.js

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

config/plugins.js

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

config/store.js

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

docs/img/adblock.svg

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

docs/img/bg-bottom.svg

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

docs/img/bg-top.svg

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

docs/img/code.svg

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

docs/img/download.svg

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

docs/img/footer.svg

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

docs/img/plugins.svg

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

docs/img/youtube-music.svg

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

docs/index.html

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

docs/js/main.js

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

docs/readme/README-es.md

@@ -0,0 +1,390 @@
+<div align="center">
+
+# YouTube Music
+
+[![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.png "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 wrapper de YouTube Music con las siguientes características:**
+
+- Apariencia y sensación nativa, tiene como objetivo mantener la interfaz original
+- Framework para plugins personalizados: cambia YouTube Music según tus necesidades (estilo, contenido, funciones), habilita/deshabilita plugins con un solo clic
+
+## Imagen de demostración
+
+|                  Pantalla del reproductor (color del álbum como tema y luz ambiental)                     |
+|:---------------------------------------------------------------------------------------------------------:|
+|![Screenshot1](https://github.com/th-ch/youtube-music/assets/16558115/53efdf73-b8fa-4d7b-a235-b96b91ea77fc)|
+
+## Contenido
+
+- [Características](#características)
+- [Plugins disponibles](#plugins-disponibles)
+- [Traducción](#traducción)
+- [Descarga](#descarga)
+    - [Arch Linux](#arch-linux)
+    - [macOS](#macos)
+    - [Windows](#windows)
+        - [Cómo instalar sin conexión a internet? (en Windows)](#cómo-instalar-sin-conexión-a-internet-en-windows)
+- [Temas](#temas)
+- [Dev](#dev)
+- [Crea tus propios plugins](#crea-tus-propios-plugins)
+    - [Creación de un plugin](#creación-de-un-plugin)
+    - [Casos de uso comunes](#casos-de-uso-comunes)
+- [Compilar](#compilar)
+- [Vista previa de producción](#vista-previa-de-producción)
+- [Tests](#tests)
+- [Licencia](#licencia)
+- [Preguntas frecuentes](#preguntas-frecuentes)
+
+## Características:
+
+- **Confirmación automática al pausar** (Siempre habilitado): desactiva
+    el mensaje emergente ["¿Continuar reproduciendo?"](https://user-images.githubusercontent.com/61631665/129977894-01c60740-7ec6-4bf0-9a2c-25da24491b0e.png)
+    que pausa la música después de cierto tiempo
+
+- Y más ...
+
+## Plugins disponibles:
+
+- **Bloqueador de Anuncios**: Bloquea todos los anuncios y rastreadores de forma predeterminada
+
+- **Acciones de Álbum**: Agrega botones de deshacer No me gusta, No me gusta, Me gusta, y Deshacer me gusta a todas las canciones de una lista de reproducción o álbum
+
+- **Tema de Color del Álbum**: Aplica un tema dinámico y efectos visuales basados en la paleta de colores del álbum
+
+- **Modo Ambiente**: Aplica un efecto de iluminación proyectando colores suaves del video en el fondo de tu pantalla
+
+- **Compresor de Audio**: Aplica compresión al audio (reduce el volumen de las partes más fuertes de la señal y aumenta el
+    volumen de las partes más suaves)
+
+- **Barra de Navegación Difuminada**: hace que la barra de navegación sea transparente y borrosa
+
+- **Omitir Restricciones de Edades**: omite la verificación de edad de YouTube
+
+- **Selector de Subtítulos**: Habilita los subtítulos
+
+- **Barra Lateral Compacta**: Siempre muestra la barra lateral en modo compacto
+
+- **Crossfade**: Transición suave entre canciones
+
+- **Desactivar Reproducción Automática**: Hace que cada canción comience en modo "pausado"
+
+- **[Discord](https://discord.com/) Rich Presence**: Muestra a tus amigos lo que estás escuchando
+    con [Rich Presence](https://user-images.githubusercontent.com/28219076/104362104-a7a0b980-5513-11eb-9744-bb89eabe0016.png)
+
+- **Descargador**: Descarga
+    MP3 [directamente desde la interfaz](https://user-images.githubusercontent.com/61631665/129977677-83a7d067-c192-45e1-98ae-b5a4927393be.png) [(youtube-dl)](https://github.com/ytdl-org/youtube-dl)
+
+- **Volumen Exponencial**: Hace que el control de volumen
+    sea [exponencial](https://greasyfork.org/en/scripts/397686-youtube-music-fix-volume-ratio/) para facilitar la
+    selección de volúmenes más bajos
+
+- **Menú en la Aplicación**: [da a las barras un aspecto elegante y oscuro](https://user-images.githubusercontent.com/78568641/112215894-923dbf00-8c29-11eb-95c3-3ce15db27eca.png)
+
+    > (consulta [esta publicación](https://github.com/th-ch/youtube-music/issues/410#issuecomment-952060709) si tienes problemas
+    para acceder al menú después de habilitar este plugin y la opción hide-menu)
+
+- **Scrobbler**: Agrega soporte para scrobbling en [Last.fm](https://www.last.fm/) y [ListenBrainz](https://listenbrainz.org/)
+
+- **Lumia Stream**: Agrega soporte para [Lumia Stream](https://lumiastream.com/)
+
+- **Letras Genius**: Agrega soporte de letras para la mayoría de las canciones
+
+- **Music Together**: Comparte una lista de reproducción con otros. Cuando el anfitrión reproduce una canción, todos los demás escucharán la misma canción
+
+- **Navegación**: Flechas de siguiente/anterior integradas directamente en la interfaz, como en tu navegador favorito
+
+- **Sin Inicio de Sesión de Google**: Elimina los botones y enlaces de inicio de sesión de Google de la interfaz
+
+- **Notificaciones**: Muestra una notificación cuando comienza una canción
+    a reproducirse ([notificaciones interactivas](https://user-images.githubusercontent.com/78568641/114102651-63ce0e00-98d0-11eb-9dfe-c5a02bb54f9c.png)
+    están disponibles en Windows)
+
+- **Picture-in-picture**: permite cambiar la aplicación al modo picture-in-picture
+
+- **Velocidad de Reproducción**: Escucha rápido, escucha
+    lento! [Agrega un deslizador que controla la velocidad de reproducción de las canciones](https://user-images.githubusercontent.com/61631665/129976003-e55db5ba-bf42-448c-a059-26a009775e68.png)
+
+- **Volumen Preciso**: Controla el volumen de forma precisa utilizando la rueda del mouse/atajos de teclado, con un HUD personalizado y pasos de volumen personalizables
+
+- **Atajos (& MPRIS)**: Permite configurar atajos globales para la reproducción (reproducir/pausar/siguiente/anterior) +
+    desactivar [osd multimedia](https://user-images.githubusercontent.com/84923831/128601225-afa38c1f-dea8-4209-9f72-0f84c1dd8b54.png)
+    al anular las teclas multimedia + habilitar Ctrl/CMD + F para buscar + habilitar el soporte mpris de Linux para
+    teclas multimedia + [atajos personalizados](https://github.com/Araxeus/youtube-music/blob/1e591d6a3df98449bcda6e63baab249b28026148/providers/song-controls.js#L13-L50)
+    para [usuarios avanzados](https://github.com/th-ch/youtube-music/issues/106#issuecomment-952156902)
+
+- **Saltar Canción no Gustada**: Salta las canciones que no te gustan
+
+- **Saltar Silencios**: Salta automáticamente las secciones de silencio
+
+- [**SponsorBlock**](https://github.com/ajayyy/SponsorBlock): Salta automáticamente las partes que no son de música, como la introducción/final o
+    partes de videos musicales donde no se reproduce la canción
+
+- **Control Multimedia en la Barra de Tareas**: Controla la reproducción desde
+    la [barra de tareas de Windows](https://user-images.githubusercontent.com/78568641/111916130-24a35e80-8a82-11eb-80c8-5021c1aa27f4.png)
+
+- **TouchBar**: Diseño personalizado de TouchBar para macOS
+
+- **Tuna OBS**: Integración con el complemento [Tuna](https://obsproject.com/forum/resources/tuna.843/) de [OBS](https://obsproject.com/)
+
+- **Cambiador de Calidad de Video**: Permite cambiar la calidad del video con
+    un [botón](https://user-images.githubusercontent.com/78568641/138574366-70324a5e-2d64-4f6a-acdd-dc2a2b9cecc5.png) en
+    la superposición de video
+
+- **Alternar Video**: Agrega
+    un [botón](https://user-images.githubusercontent.com/28893833/173663950-63e6610e-a532-49b7-9afa-54cb57ddfc15.png) para
+    alternar entre el modo de video/canción. también puede eliminar opcionalmente toda la pestaña de video
+
+- **Visualizador**: Diferentes visualizadores de música
+
+## Traducción
+
+Puedes ayudar con la traducción en [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="estado de traducción" />
+  <img src="https://hosted.weblate.org/widget/youtube-music/i18n/287x66-black.png" alt="estado de traducción 2" />
+</a>
+
+## Descarga
+
+Puedes consultar la [última versión](https://github.com/th-ch/youtube-music/releases/latest) para encontrar rápidamente la versión más reciente.
+
+### Arch Linux
+
+Instala el paquete [`youtube-music-bin`](https://aur.archlinux.org/packages/youtube-music-bin) desde AUR. Para obtener instrucciones de instalación de AUR, consulta esta [página del wiki](https://wiki.archlinux.org/index.php/Arch_User_Repository#Installing_packages).
+
+### macOS
+
+Puedes instalar la aplicación usando Homebrew (consulta la [definición de cask](https://github.com/th-ch/homebrew-youtube-music)):
+
+```bash
+brew install th-ch/youtube-music/youtube-music
+```
+
+Si instalas la aplicación manualmente y obtienes un error "está dañado y no se puede abrir" al iniciar la aplicación, ejecuta lo siguiente en la Terminal:
+
+```bash
+/usr/bin/xattr -cr /Applications/YouTube\ Music.app
+```
+
+### Windows
+
+Puedes usar el [administrador de paquetes Scoop](https://scoop.sh) para instalar el paquete `youtube-music` desde
+el [`extras` bucket](https://github.com/ScoopInstaller/Extras).
+
+```bash
+scoop bucket add extras
+scoop install extras/youtube-music
+```
+
+Alternativamente, puedes usar [Winget](https://learn.microsoft.com/en-us/windows/package-manager/winget/), el administrador de paquetes CLI oficial de Windows 11 para instalar el paquete `th-ch.YouTubeMusic`.
+
+*Nota: Microsoft Defender SmartScreen podría bloquear la instalación ya que proviene de un "editor desconocido". Esto también esválido para la instalación manual al intentar ejecutar el ejecutable (.exe) después de una descarga manual aquí en GitHub (mismo archivo).*
+
+```bash
+winget install th-ch.YouTubeMusic
+```
+
+#### Cómo instalar sin conexión a Internet? (en Windows)
+
+- Descarga el archivo `*.nsis.7z` para _la arquitectura de tu dispositivo_ en la [página de lanzamientos](https://github.com/th-ch/youtube-music/releases/latest).
+    - `x64` para Windows de 64 bits
+    - `ia32` para Windows de 32 bits
+    - `arm64` para Windows ARM64
+- Descarga el instalador en la página de lanzamientos. (`*-Setup.exe`)
+- Colócalos en el **mismo directorio**.
+- Ejecuta el instalador.
+
+## Temas
+
+Puedes cargar archivos CSS para cambiar la apariencia de la aplicación (Opciones > Ajustes visuales > Tema).
+
+Algunos temas predefinidos están disponibles en https://github.com/kerichdev/themes-for-ytmdesktop-player.
+
+## Dev
+
+```bash
+git clone https://github.com/th-ch/youtube-music
+cd youtube-music
+pnpm install --frozen-lockfile
+pnpm dev
+```
+
+## Crea tus propios plugins
+
+Usando plugins, puedes:
+
+- manipular la aplicación - se pasa el `BrowserWindow` de electron al controlador del plugin
+- cambiar la interfaz manipulando el HTML/CSS
+
+### Creación de un plugin
+
+Crea una carpeta en `src/plugins/NOMBRE-DEL-PLUGIN`:
+
+- `index.ts`: el archivo principal del plugin
+```typescript
+import style from './style.css?inline'; // importar estilo como inline
+
+import { createPlugin } from '@/utils';
+
+export default createPlugin({
+  name: "Plugin Label",
+  restartNeeded: true, // si el valor es true, ytmusic muestra el diálogo de reinicio
+  config: {
+    enabled: false,
+  }, // tu configuración personalizada
+  stylesheets: [style], // tu estilo personalizado,
+  menu: async ({ getConfig, setConfig }) => {
+    // Todos los métodos *Config están envueltos en 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();
+
+      // puedes comunicarte con el plugin de renderizado
+      ipc.handle("some-event", () => {
+        return "hello";
+      });
+    },
+    // se activa cuando cambia la configuración
+    onConfigChange(newConfig) { /* ... */ },
+    // se activa cuando se desactiva el plugin
+    stop(context) { /* ... */ },
+  },
+  renderer: {
+    async start(context) {
+      console.log(await context.ipc.invoke("some-event"));
+    },
+    // Solo disponible en el plugin de renderizado
+    onPlayerApiReady(api: YoutubePlayer, context: RendererContext) {
+      // establecer la configuración del plugin fácilmente
+      context.setConfig({ myConfig: api.getVolume() });
+    },
+    onConfigChange(newConfig) { /* ... */ },
+    stop(_context) { /* ... */ },
+  },
+  preload: {
+    async start({ getConfig }) {
+      const config = await getConfig();
+    },
+    onConfigChange(newConfig) {},
+    stop(_context) {},
+  },
+});
+
+```
+
+### Casos de uso comunes
+
+- inyectar CSS personalizado: crea un archivo `style.css` en la misma carpeta y luego:
+
+```typescript
+// index.ts
+import style from './style.css?inline'; // importar estilo como inline
+
+import { createPlugin } from '@/utils';
+
+export default createPlugin({
+    name: 'Plugin Label',
+    restartNeeded: true, // si el valor es true, ytmusic mostrará el diálogo de reinicio
+    config: {
+        enabled: false,
+    }, // tu configuración personalizada
+    stylesheets: [style], // tu estilo personalizado
+    renderer() {} // define el hook del renderizador
+});
+```
+
+- Si quieres cambiar el HTML:
+
+```typescript
+import { createPlugin } from '@/utils';
+
+export default createPlugin({
+    name: 'Plugin Label',
+    restartNeeded: true, // si el valor es true, ytmusic mostrará el diálogo de reinicio
+    config: {
+        enabled: false,
+    }, // tu configuración personalizada
+    renderer() {
+        // Elimina el botón de inicio de sesión
+        document.querySelector(".sign-in-link.ytmusic-nav-bar").remove();
+    } // define el hook del renderizador
+});
+```
+
+- comunicación entre el front y el back: se puede hacer utilizando el módulo ipcMain de electron. Ver archivo `index.ts` y
+    ejemplo en el plugin `sponsorblock`.
+
+## Compilar
+
+1. Clonar el repositorio
+2. Seguir [esta guía](https://pnpm.io/es/installation) para instalar `pnpm`
+3. Ejecutar `pnpm install --frozen-lockfile` para instalar las dependencias
+4. Ejecutar `pnpm build:OS`
+
+- `pnpm dist:win` - Windows
+- `pnpm dist:linux` - Linux (amd64)
+- `pnpm dist:linux:deb-arm64` - Linux (arm64 para Debian)
+- `pnpm dist:linux:rpm-arm64` - Linux (arm64 para Fedora)
+- `pnpm dist:mac` - macOS (amd64)
+- `pnpm dist:mac:arm64` - macOS (arm64)
+
+Construye la aplicación para macOS, Linux y Windows,
+utilizando [electron-builder](https://github.com/electron-userland/electron-builder).
+
+## Vista previa de producción
+
+```bash
+pnpm start
+```
+
+## Tests
+
+```bash
+pnpm test
+```
+
+Utiliza [Playwright](https://playwright.dev/) para probar la aplicación.
+
+## Licencia
+
+MIT © [th-ch](https://github.com/th-ch/youtube-music)
+
+## Preguntas frecuentes
+
+### ¿Por qué no se muestra el menú de aplicaciones?
+
+Si la opción `Ocultar menú` está activada - puedes mostrar el menú con la tecla <kbd>alt</kbd> (o <kbd>\`</kbd> [acento grave] si estás utilizando el plugin in-app-menu)

docs/readme/README-fr.md

@@ -0,0 +1,388 @@
+<div align="center">
+
+# YouTube Music
+
+[![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/)
+[![Licence GitHub](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)
+[![style de code eslint](https://img.shields.io/badge/style_de_code-eslint-5ed9c7.svg?style=for-the-badge)](https://github.com/th-ch/youtube-music/blob/master/.eslintrc.js)
+[![Statut de la construction](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/)
+[![Toutes les versions GitHub](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)
+[![Vulnérabilités connues](https://snyk.io/test/github/th-ch/youtube-music/badge.svg)](https://snyk.io/test/github/th-ch/youtube-music)
+
+</div>
+
+![Capture d'écran](/web/screenshot.png "Capture d'écran")
+
+
+<div align="center">
+	<a href="https://github.com/th-ch/youtube-music/releases/latest">
+		<img src="https://github.com/th-ch/youtube-music/raw/master/web/youtube-music.svg" width="400" height="100" alt="SVG YouTube Music">
+	</a>
+</div>
+
+
+**Enveloppe Electron autour de YouTube Music offrant :**
+
+- Aspect & sensation naturels, vise à conserver l'interface originale
+- Cadre pour les plugins personnalisés : modifiez YouTube Music selon vos besoins (style, contenu, fonctionnalités), activez/désactivez les plugins en
+  un clic
+
+## Image de démonstration
+
+|                          Écran du lecteur (thème de couleur de l'album & lumière ambiante)                                |
+|:---------------------------------------------------------------------------------------------------------:|
+|![Capture d'écran1](https://github.com/th-ch/youtube-music/assets/16558115/53efdf73-b8fa-4d7b-a235-b96b91ea77fc)|
+
+## Contenu
+
+- [Fonctionnalités](#fonctionnalités)
+- [Plugins disponibles](#plugins-disponibles)
+- [Traduction](#traduction)
+- [Téléchargement](#téléchargement)
+  - [Arch Linux](#arch-linux)
+  - [MacOS](#macos)
+  - [Windows](#windows)
+    - [Comment installer sans connexion réseau ? (sous Windows)](#comment-installer-sans-connexion-réseau-sous-windows)
+- [Thèmes](#thèmes)
+- [Dev](#dev)
+- [Créez vos propres plugins](#créez-vos-propres-plugins)
+  - [Créer un plugin](#créer-un-plugin)
+  - [Cas d'utilisation courants](#cas-dutilisation-courants)
+- [Construction](#construction)
+- [Aperçu de la production](#aperçu-de-la-production)
+- [Tests](#tests)
+- [Licence](#licence)
+- [FAQ](#faq)
+
+## Fonctionnalités :
+
+- **Confirmation automatique lors de la pause** (Toujours activé) : désactiver
+  la pop-up ["Continuer à regarder ?"](https://user-images.githubusercontent.com/61631665/129977894-01c60740-7ec6-4bf0-9a2c-25da24491b0e.png)
+  qui pause la musique après un certain temps
+
+ - Et plus encore ...
+
+## Plugins disponibles :
+
+- **Bloqueur de publicités** : Bloquez toutes les publicités et le suivi dès le départ
+
+- **Actions d'album** : Ajoute des boutons Je n'aime pas, Dislike, J'aime, et Unlike pour appliquer cela à toutes les chansons dans une playlist ou un album
+
+- **Thème de couleur d'album** : Applique un thème dynamique et des effets visuels basés sur la palette de couleurs de l'album
+
+- **Mode Ambiant** : Applique un effet d'éclairage en projetant des couleurs douces de la vidéo, sur l'arrière-plan de votre écran
+
+- **Compresseur Audio** : Appliquer une compression audio (diminue le volume des parties les plus fortes du signal et augmente le
+  volume des parties les plus douces)
+
+- **Barre de navigation floue** : rend la barre de navigation transparente et floue
+
+- **Contournement des restrictions d'âge** : contourner la vérification d'âge de YouTube
+
+- **Sélecteur de sous-titres** : Activer les sous-titres
+
+- **Barre latérale compacte** : Toujours définir la barre latérale en mode compact
+
+- **Fondu enchaîné** : Fondu enchaîné entre les chansons
+
+- **Désactiver la lecture automatique** : Fait démarrer chaque chanson en mode "pause"
+
+- **[Discord](https://discord.com/) Présence riche** : Montrez à vos amis ce que vous écoutez
+  avec [Présence riche](https://user-images.githubusercontent.com/28219076/104362104-a7a0b980-5513-11eb-9744-bb89eabe0016.png)
+
+- **Téléchargeur** : télécharge des
+  MP3 [directement depuis l'interface](https://user-images.githubusercontent.com/61631665/129977677-83a7d067-c192-45e1-98ae-b5a4927393be.png) [(youtube-dl)](https://github.com/ytdl-org/youtube-dl)
+
+- **Volume exponentiel** : Rend le curseur de volume
+  [exponentiel](https://greasyfork.org/en/scripts/397686-youtube-music-fix-volume-ratio/) afin qu'il soit plus facile de
+  sélectionner des volumes plus bas
+
+- **Menu In-App** : [donne aux barres un aspect chic et sombre](https://user-images.githubusercontent.com/78568641/112215894-923dbf00-8c29-11eb-95c3-3ce15db27eca.png)
+
+  > (voir [ce poste](https://github.com/th-ch/youtube-music/issues/410#issuecomment-952060709) si vous avez des problèmes
+  pour accéder au menu après avoir activé ce plugin et l'option masquer-menu)
+
+- **Scrobbler** : Ajoute le support de scrobbling pour [Last.fm](https://www.last.fm/) et [ListenBrainz](https://listenbrainz.org/)
+
+- **Lumia Stream** : Ajoute le support de [Lumia Stream](https://lumiastream.com/)
+
+- **Lyrics Genius** : Ajoute le support des paroles pour la plupart des chansons
+
+- **Musique Ensemble** : Partagez une playlist avec d'autres. Lorsque l'hôte joue une chanson, tout le monde entendra la même chanson
+
+- **Navigation** : Flèches de navigation Suivant/Retour directement intégrées dans l'interface, comme dans votre navigateur préféré
+
+- **Pas de connexion Google** : Supprime les boutons et les liens de connexion Google de l'interface
+
+- **Notifications** : Affiche une notification lorsqu'une chanson commence à jouer ([notifications interactives](https://user-images.githubusercontent.com/78568641/114102651-63ce0e00-98d0-11eb-9dfe-c5a02bb54f9c.png)
+  sont disponibles sur Windows)
+
+- **Image dans l'image** : permet de passer l'application en mode image dans l'image
+
+- **Vitesse de lecture** : Écoutez rapidement, écoutez lentement ! [Ajoute un curseur qui contrôle la vitesse des chansons](https://user-images.githubusercontent.com/61631665/129976003-e55db5ba-bf42-448c-a059-26a009775e68.png)
+
+- **Volume précis** : Contrôlez le volume précisément en utilisant la molette de la souris/raccourcis clavier, avec un hud personnalisé et des étapes de volume personnalisables
+
+- **Raccourcis (& MPRIS)** : Permet de définir des raccourcis globaux pour la lecture (lecture/pause/suivant/précédent) +
+  désactive [osd média](https://user-images.githubusercontent.com/84923831/128601225-afa38c1f-dea8-4209-9f72-0f84c1dd8b54.png)
+  en remplaçant les touches multimédias + activer Ctrl/CMD + F pour rechercher + activer le support mpris linux pour
+  les touches multimédias + [raccourcis personnalisés](https://github.com/Araxeus/youtube-music/blob/1e591d6a3df98449bcda6e63baab249b28026148/providers/song-controls.js#L13-L50)
+  pour [utilisateurs avancés](https://github.com/th-ch/youtube-music/issues/106#issuecomment-952156902)
+
+- **Passer la chanson non aimée** : passe les chansons non aimées
+
+- **Passer les silences** : passe automatiquement les sections silencieuses
+
+- [**SponsorBlock**](https://github.com/ajayyy/SponsorBlock) : Saute automatiquement les parties non musicales comme les intros/outros ou
+  les parties des clips vidéo où la chanson n'est pas jouée
+
+- **Contrôle multimédia de la barre des tâches** : Contrôlez la lecture depuis
+  votre [barre des tâches Windows](https://user-images.githubusercontent.com/78568641/111916130-24a35e80-8a82-11eb-80c8-5021c1aa27f4.png)
+
+- **TouchBar** : Disposition personnalisée de la TouchBar pour macOS
+
+- **Tuna OBS** : Intégration avec le
+  plugin [Tuna](https://obsproject.com/forum/resources/tuna.843/) d'[OBS](https://obsproject.com/)
+
+- **Changeur de qualité vidéo** : Permet de changer la qualité vidéo avec
+  un [bouton](https://user-images.githubusercontent.com/78568641/138574366-70324a5e-2d64-4f6a-acdd-dc2a2b9cecc5.png) sur
+  l'overlay vidéo
+
+- **Bascule vidéo** : Ajoute
+  un [bouton](https://user-images.githubusercontent.com/28893833/173663950-63e6610e-a532-49b7-9afa-54cb57ddfc15.png) pour
+  basculer entre le mode Vidéo/Chanson. peut également supprimer l'onglet vidéo entier
+
+- **Visualiseur** : Différents visualiseurs musicaux
+
+## Traduction
+
+Vous pouvez aider à la traduction sur [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="statut de la traduction" />
+  <img src="https://hosted.weblate.org/widget/youtube-music/i18n/287x66-black.png" alt="statut de la traduction 2" />
+</a>
+
+## Téléchargement
+
+Vous pouvez consulter la [dernière sortie](https://github.com/th-ch/youtube-music/releases/latest) pour trouver rapidement la
+dernière version.
+
+### Arch Linux
+
+Installez le paquet [`youtube-music-bin`](https://aur.archlinux.org/packages/youtube-music-bin) depuis l'AUR. Pour les instructions d'installation de l'AUR, consultez
+cette [page wiki](https://wiki.archlinux.org/index.php/Arch_User_Repository#Installing_packages).
+
+### MacOS
+
+Vous pouvez installer l'application en utilisant Homebrew (voir la [définition du fût](https://github.com/th-ch/homebrew-youtube-music)) :
+
+```bash
+brew install th-ch/youtube-music/youtube-music
+```
+
+Si vous installez l'application manuellement et obtenez une erreur "est endommagé et ne peut pas être ouvert." lors du lancement de l'application, exécutez ce qui suit dans le Terminal :
+
+```bash
+/usr/bin/xattr -cr /Applications/YouTube\ Music.app
+```
+
+### Windows
+
+Vous pouvez utiliser le [gestionnaire de paquets Scoop](https://scoop.sh) pour installer le paquet `youtube-music` depuis le [seau `extras`](https://github.com/ScoopInstaller/Extras).
+
+```bash
+scoop bucket add extras
+scoop install extras/youtube-music
+```
+
+Alternativement, vous pouvez utiliser [Winget](https://learn.microsoft.com/fr-fr/windows/package-manager/winget/), le gestionnaire de paquets CLI officiel de Windows 11, pour installer le paquet `th-ch.YouTubeMusic`.
+
+*Note : Microsoft Defender SmartScreen pourrait bloquer l'installation car elle provient d'un "éditeur inconnu". Ceci est également vrai pour l'installation manuelle lors de l'essai d'exécution de l'exécutable (.exe) après un téléchargement manuel ici sur GitHub (même fichier).*
+
+```bash
+winget install th-ch.YouTubeMusic
+```
+
+#### Comment installer sans connexion réseau ? (sous Windows)
+
+- Téléchargez le fichier `*.nsis.7z` pour _l'architecture de votre appareil_ sur la [page des versions](https://github.com/th-ch/youtube-music/releases/latest).
+  - `x64` pour Windows 64 bits
+  - `ia32` pour Windows 32 bits
+  - `arm64` pour Windows ARM64
+- Téléchargez l'installeur sur la page des versions. (`*-Setup.exe`)
+- Placez-les dans le **même dossier**.
+- Exécutez l'installeur.
+
+## Thèmes
+
+Vous pouvez charger des fichiers CSS pour changer l'apparence de l'application (Options > Ajustements visuels > Thèmes).
+
+Certains thèmes prédéfinis sont disponibles sur [https://github.com/kerichdev/themes-for-ytmdesktop-player](https://github.com/kerichdev/themes-for-ytmdesktop-player).
+
+## Dev
+
+```bash
+git clone https://github.com/th-ch/youtube-music
+cd youtube-music
+pnpm install --frozen-lockfile
+pnpm dev
+```
+## Créez vos propres plugins
+
+En utilisant des plugins, vous pouvez :
+
+- manipuler l'application - la `BrowserWindow` d'Electron est passée au gestionnaire de plugin
+- changer le front en manipulant le HTML/CSS
+
+### Créer un plugin
+
+Créez un dossier dans `src/plugins/NOM-DE-VOTRE-PLUGIN` :
+
+- `index.ts` : le fichier principal du plugin
+```typescript
+import style from './style.css?inline'; // importez le style comme inline
+
+import { createPlugin } from '@/utils';
+
+export default createPlugin({
+  name: 'Étiquette du plugin',
+  restartNeeded: true, // si la valeur est vraie, ytmusic affichera la boîte de dialogue de redémarrage
+  config: {
+    enabled: false,
+  }, // votre configuration personnalisée
+  stylesheets: [style], // votre style personnalisé,
+  menu: async ({ getConfig, setConfig }) => {
+    // Toutes les méthodes *Config sont des promesses encapsulées <T>
+    const config = await getConfig();
+    return [
+      {
+        label: 'menu',
+        submenu: [1, 2, 3].map((value) => ({
+          label: `valeur ${value}`,
+          type: 'radio',
+          checked: config.value === value,
+          click() {
+            setConfig({ value });
+          },
+        })),
+      },
+    ];
+  },
+  backend: {
+    start({ window, ipc }) {
+      window.maximize();
+
+      // vous pouvez communiquer avec le plugin du rendu
+      ipc.handle('un événement', () => {
+        return 'bonjour';
+      });
+    },
+    // il est déclenché lorsque la configuration change
+    onConfigChange(newConfig) { /* ... */ },
+    // il est déclenché lorsque le plugin est désactivé
+    stop(context) { /* ... */ },
+  },
+  renderer: {
+    async start(context) {
+      console.log(await context.ipc.invoke('un événement'));
+    },
+    // Seul le crochet disponible pour le rendu
+    onPlayerApiReady(api: YoutubePlayer, context: RendererContext) {
+      // définir facilement la configuration du plugin
+      context.setConfig({ myConfig: api.getVolume() });
+    },
+    onConfigChange(newConfig) { /* ... */ },
+    stop(_context) { /* ... */ },
+  },
+  preload: {
+    async start({ getConfig }) {
+      const config is obtained by `getConfig` method.
+    },
+    onConfigChange(newConfig) {},
+    stop(_context) {},
+  },
+});
+
+```
+
+### Cas d'utilisation courants
+
+- **Injection de CSS personnalisé** : créez un fichier `style.css` dans le même dossier puis :
+
+```typescript
+// index.ts
+import style from './style.css?inline'; // importez le style comme en ligne
+
+import { createPlugin } from '@/utils';
+
+export default createPlugin({
+  name: 'Étiquette du plugin',
+  restartNeeded: true, // si la valeur est vraie, ytmusic affichera la boîte de dialogue de redémarrage
+  config: {
+    enabled: false,
+  }, // votre configuration personnalisée
+  stylesheets: [style], // votre style personnalisé
+  renderer() {} // définissez le crochet de rendu
+});
+```
+
+- **Si vous voulez modifier le HTML** :
+
+```typescript
+import { createPlugin } from '@/utils';
+
+export default createPlugin({
+  name: 'Étiquette du plugin',
+  restartNeeded: true, // si la valeur est vraie, ytmusic affichera la boîte de dialogue de redémarrage
+  config: {
+    enabled: false,
+  }, // votre configuration personnalisée
+  renderer() {
+    // Supprimez le bouton de connexion
+    document.querySelector(".sign-in-link.ytmusic-nav-bar").remove();
+  } // définissez le crochet de rendu
+});
+
+```
+
+- **Communication entre le front et le back** : cela peut se faire en utilisant le module ipcMain d'Electron. Voir le fichier `index.ts` et l'exemple dans le plugin `sponsorblock`.
+
+## Construction
+
+1. Clonez le dépôt
+2. Suivez [ce guide](https://pnpm.io/installation) pour installer `pnpm`
+3. Exécutez `pnpm install --frozen-lockfile` pour installer les dépendances
+4. Exécutez `pnpm build:OS`
+
+- `pnpm dist:win` - pour Windows
+- `pnpm dist:linux` - pour Linux
+- `pnpm dist:mac` - pour MacOS
+
+Construit l'application pour macOS, Linux et Windows,
+en utilisant [electron-builder](https://github.com/electron-userland/electron-builder).
+
+## Aperçu de la production
+
+```bash
+pnpm start
+```
+
+## Tests
+
+```bash
+pnpm test
+```
+
+Utilise [Playwright](https://playwright.dev/) pour tester l'application.
+
+## Licence
+
+MIT © [th-ch](https://github.com/th-ch/youtube-music)
+
+## FAQ
+
+### Pourquoi le menu de l'application ne s'affiche-t-il pas ?
+
+Si l'option `Masquer le menu` est activée - vous pouvez afficher le menu avec la touche <kbd>alt</kbd> (ou <kbd>\`</kbd> [backtick] si vous utilisez le plugin du menu intégré)

docs/readme/README-hu.md

@@ -0,0 +1,374 @@
+<div align="center">
+
+# YouTube Music
+
+[![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/eslint.config.mjs)
+[![Build status](https://img.shields.io/github/actions/workflow/status/th-ch/youtube-music/build.yml?branch=master&style=for-the-badge&logo=youtube-music)](https://GitHub.com/th-ch/youtube-music/releases/)
+[![GitHub All Releases](https://img.shields.io/github/downloads/th-ch/youtube-music/total?style=for-the-badge&logo=youtube-music)](https://GitHub.com/th-ch/youtube-music/releases/)
+[![AUR](https://img.shields.io/aur/version/youtube-music-bin?color=blueviolet&style=for-the-badge&logo=youtube-music)](https://aur.archlinux.org/packages/youtube-music-bin)
+[![Known Vulnerabilities](https://snyk.io/test/github/th-ch/youtube-music/badge.svg)](https://snyk.io/test/github/th-ch/youtube-music)
+
+</div>
+
+![Bannerkep](https://i.imgur.com/UaZPHqX.png)
+
+
+<div align="center">
+	<a href="https://github.com/th-ch/youtube-music/releases/latest">
+		<img src="../../web/youtube-music-hu.svg" width="400" height="100" alt="YouTube Music SVG">
+	</a>
+</div>
+
+Olvasd el más nyelveken: [🏴 Angol](./blob/master/README.md), [🇰🇷 Korea](./docs/readme/README-ko.md), [🇮🇸 Izland](./docs/readme/README-is.md), [🇪🇸 Spanyol](./docs/readme/README-es.md), [🇷🇺 Orosz](./docs/readme/README-ru.md)
+
+**Electron keretrendszerre épülő alkalmazás a YouTube Music számára, amely a következőket kínálja:**
+
+- Natív megjelenés és élmény, amely az eredeti felület megtartására törekszik
+- Egyedi bővítmények keretrendszere: alakítsd át a YouTube Music-ot igényeid szerint (stílus, tartalom, funkciók), engedélyezd/tiltsd le a bővítményeket egy kattintással
+
+## Bemutató kép
+
+|                        Lejátszó ablak (album színtéma és környezeti fény)                              |
+|:---------------------------------------------------------------------------------------------------------:|
+|![Bemutatókép1](https://i.imgur.com/Tj4LBwf.png)|
+
+## Tartalom
+
+- [Funkciók](#Funkciók)
+- [Elérhető bővítmények](#Elérhető-bővítmények)
+- [Fordítás](#Fordítás)
+- [Letöltés](#Letöltés)
+  - [Arch Linux](#arch-linux)
+  - [MacOS](#macos)
+  - [Windows](#windows)
+    - [Hogyan telepítsük hálózati kapcsolat nélkül? (Windows alatt)](#Hogyan-telepítsd-hálózati-kapcsolat-nélkül-Windows)
+- [Témák](#Témák)
+- [Fejlesztés](#Fejlesztés)
+- [Saját bővítmények készítése](#Saját-bővítmények-készítése)
+  - [Bővítmény létrehozása](#Bővítmény-létrehozása)
+  - [Gyakori használati esetek](#Gyakori-használati-esetek)
+- [Build](#build)
+- [Gyártás előnézete](#Gyártás-előnézete)
+- [Tesztelés](#Tesztelés)
+- [Licenc](#Licenc)
+- [GYIK](#GYIK)
+
+## Funkciók:
+
+- **Automatikus megerősítés a lejátszás szüneteltetésekor** (Alapból engedélyezve): Kikapcsolja a ["Folytatja a nézést?"](https://i.imgur.com/z2mG0QN.png)
+  felugró ablakot, amely bizonyos idő után leállítja a zenét.
+
+ - És még sok más ...
+
+## Elérhető bővítmények:
+
+- **Reklámblokkoló**: Blokkolja az összes hirdetést és nyomkövetőt.
+
+- **Album műveletek**: Dislike, Undislike, Like, Unlike gombok hozzáadása, amivel ezt a lejátszási listán vagy albumban lévő összes dalra alkalmazza.
+
+- **Album színtéma**: Dinamikus téma és vizuális effektek alkalmazása az album színpalettája alapján.
+
+- **Ambient mód**: Fényhatás alkalmazása a videóból származó lágy színek vetítésével a képernyő hátterére.
+
+- **Hangtömörítő**: Hang tömörítés alkalmazása. (csökkenti a jel legzajosabb részeinek hangerősségét, és emeli a legcsendesebb részek hangerősségét)
+
+- **Navigációs sáv elmosása**: Átlátszóvá és elmosódottá teszi a navigációs sávot.
+
+- **Korellenőrzés kihagyása**: A YouTube korellenőrzését kihagyja, ezáltal nem kel meg erősíteni a zene meghallgatása elött. (automatikusan megerősítve lesz)
+
+- **Feliratválasztó**: Felirat választó a YouTube Music zenékhez.
+
+- **Kompakt oldalsáv**: Mindig becsukva tartja a bal oldali sávot, ahol a Kezdőlap, Felfedezés, Könyvtár és egyebek láthatók. (amit bármikor ki lehet nyitni)
+
+- **Áttünés**: Áttünést biztosít a dalok között, ami folytonossá teszi a zenehallgatást anélkül, hogy érezhető lenne a váltás.
+
+- **Automatikus lejátszás letiltása**: Ez a funkció kikapcsolja az automatikus lejátszást, így a zenék nem indulnak el maguktól. Amikor egy album vagy egy dal lejátszása véget ér, a következő szám nem kezdődik el automatikusan. (a bővítmény használata során minden zenét manuálisan kell elindítani)
+
+- **[Discord](https://discord.com/) Rich Presence**: Mutassa meg barátainak, hogy mit hallgat a [Rich Presence](https://i.imgur.com/nCeVQB2.png) segítségével. (Ehez a Discord-on is engedélyezve kel lennie a Tevékenységállapot megosztásának [DC Beállítások -> Tevékenyég-adatvédelem -> Megoszthatod az észlelt tevékenységeidet másokkal])
+
+- **Letöltő**: MP3/forrás hanganyag letöltése [közvetlenül az interfészről](https://i.imgur.com/ghqBNVe.png). [(youtube-dl)](https://github.com/ytdl-org/youtube-dl)
+
+- **Hangszínszabályzó**: Szűrőket ad hozzá, hogy erősítsd vagy csökkentsd bizonyos frekvenciatartományokat. (pl. basszuskiemelés)
+
+- **Exponenciális hangerő**: A hangerő csúszka [exponenciálissá](https://greasyfork.org/en/scripts/397686-youtube-music-fix-volume-ratio/) tételével könnyebbé válik az alacsony hangerő kiválasztása.
+
+- **Alkalmazáson belüli menü**: [A Menüsáv stílusos, sötét vagy album-színű megjelenítése](https://i.imgur.com/vWvO7Xt.png).
+
+  > (Lásd ezt a [bejegyzést](https://github.com/th-ch/youtube-music/issues/410#issuecomment-952060709), ha problémád van a menü elérésével, miután engedélyezted ezt a bővítményt és a "menü elrejtése" opciót.
+
+- **Scrobbler**: Scrobbling támogatást biztosít [Last.fm](https://www.last.fm/) és [ListenBrainz](https://listenbrainz.org/) számára.
+
+- **Lumia Stream**: [Lumia Stream](https://lumiastream.com/) támogatás hozzáadása.
+
+- **Lyrics Genius**: Dalszöveg támogatást nyújt a legtöbb dalhoz.
+
+- **Zene együtt**: Lehetővé teszi a lejátszási listák, dalok megosztását másokkal. Amikor a házigazda lejátszik egy dalt, mindenki ugyanazt a dalt fogja hallani.
+
+- **Navigáció**: Következő/Vissza navigációs nyilak közvetlenül az interfészbe integrálva, mint a kedvenc böngésződben.
+
+- **Nincs Google bejelentkezés**: A Bejelentkezés gomb eltávolítása az interfészről (Jobb fentről eltünik a bejelentkezés gomb.)
+
+- **Értesítések**: Értesítés megjelenítése, amikor egy dal elindul. ([interaktív értesítések](https://user-images.githubusercontent.com/78568641/114102651-63ce0e00-98d0-11eb-9dfe-c5a02bb54f9c.png) elérhetők Windows-on)
+
+- **Kép a képben**: Lehetővé teszi az alkalmazás kép a képben módra váltását.
+
+- **Lejátszás sebessége**: Hallgassd gyorsan, hallgassd lassan! [Hozzáad egy csúszkát, amely szabályozza a dal sebességét](https://i.imgur.com/uaNOWOt.png)
+
+- **Precíz hangerő**: A hangerő precíz szabályozása egérgörgővel/gyorsbillentyűkkel, egy egyedi HUD és testreszabható hangerő csuszka segítségével.
+
+- **Gyorsbillentyűk (& MPRIS)**: Lehetővé teszi globális gyorsbillentyűk beállítását a lejátszáshoz (lejátszás/szünet/következő/előző), valamint a [média OSD](https://i.imgur.com/o13SpAE.png) kikapcsolását a médiagombok felülírásával. Bekapcsolja a Ctrl/CMD + F billentyűkombinációt a kereséshez, a Linux MPRIS támogatását a médiagombokhoz, és [egyedi gyorsbillentyűket](https://github.com/Araxeus/youtube-music/blob/1e591d6a3df98449bcda6e63baab249b28026148/providers/song-controls.js#L13-L50) a [haladó felhasználók](https://github.com/th-ch/youtube-music/issues/106#issuecomment-952156902) számára.
+
+- **Nem kedvelt dal kihagyása**: Kihagyja a nem kedvelt dalokat.
+
+- **Csend kihagyása**: Automatikusan átugorja a csendes szakaszokat.
+
+- [**SzponzorBlokk**](https://github.com/ajayyy/SponsorBlock): Automatikusan átugorja a nem zenei részeket, például az intrókat/outrokat vagy a zenei videók azon részeit, ahol a dal nem szól.
+
+- **Szinkronizált dalszövegek**: Szinkronizált dalszövegeket biztosít dalokhoz, [LRClib](https://lrclib.net)-hez hasonló szolgáltatókat használva.
+
+- **Médiavezérlés a tálcán**: Lejátszás vezérlése a [Windows tálcáról](https://i.imgur.com/eolQfnA.png).
+
+- **TouchBar**: Egyedi TouchBar elrendezés macOS-hoz.
+
+- **Tuna OBS**: Integráció az [OBS](https://obsproject.com/) [Tuna](https://obsproject.com/forum/resources/tuna.843/) pluginjával.
+
+- **Videóminőség modosító**: Lehetővé teszi a videó minőségének megváltoztatását egy [gombbal](https://i.imgur.com/UgpgtHL.png) a videó fedvényen.
+
+- **Videó váltó**: Hozzáad egy [gombot](https://i.imgur.com/288QE1k.png) a Videó/Dal mód közötti váltáshoz. (opcionálisan teljesen eltávolíthatja a videó fület is)
+
+- **Vizualizáció**: Különböző zenei vizualizációk.
+
+
+## Fordítás
+
+Segíthetsz a fordításban a [Hosted Weblate](https://hosted.weblate.org/projects/youtube-music/) oldalán.
+
+<a href="https://hosted.weblate.org/engage/youtube-music/">
+<img src="https://hosted.weblate.org/widget/youtube-music/i18n/multi-auto.svg" alt="Fordítás állapota" />
+<img src="https://hosted.weblate.org/widget/youtube-music/i18n/287x66-black.png" alt="Fordítás állapota" />
+<img src="https://hosted.weblate.org/widget/youtube-music/i18n/hu/287x66-white.png" alt="Fordítás állapota" />
+</a>
+
+## Letöltés
+
+A [legfrissebb kiadás](https://github.com/th-ch/youtube-music/releases/latest) megtekintésével gyorsan megtalálhatod a legújabb verziót.
+
+### Arch Linux
+
+Telepítsd a [`youtube-music-bin`](https://aur.archlinux.org/packages/youtube-music-bin) csomagot az AUR-ból. Az AUR telepítési útmutatóját megtalálod ezen a [wiki oldalon](https://wiki.archlinux.org/index.php/Arch_User_Repository#Installing_packages).
+
+### macOS
+
+Telepítheted az alkalmazást Homebrew segítségével (lásd a [cask definíciót](https://github.com/th-ch/homebrew-youtube-music)):
+
+```bash
+brew install th-ch/youtube-music/youtube-music
+```
+
+Ha manuálisan telepítetted az alkalmazást, és a következő hibát kapod indításkor: "sérült, és nem nyitható meg./is damaged and can’t be opened.", futtasd az alábbi parancsot a Terminálban:
+
+```bash
+/usr/bin/xattr -cr /Applications/YouTube\ Music.app
+```
+
+### Windows
+
+A [Scoop csomagkezelő](https://scoop.sh) segítségével telepítheted a `youtube-music` csomagot az [`extras` tárolóból](https://github.com/ScoopInstaller/Extras).
+
+```bash
+scoop bucket add extras
+scoop install extras/youtube-music
+```
+
+Alternatívaként használhatod a [Winget](https://learn.microsoft.com/en-us/windows/package-manager/winget/) eszközt, a Windows 11 hivatalos CLI csomagkezelőjét, hogy telepítsd a `th-ch.YouTubeMusic` csomagot.
+
+*Megjegyzés: A Microsoft Defender SmartScreen figyelmeztethet vagy blokkolhatja a telepítést, mivel az alkalmazás "ismeretlen kiadótól" származik. Ez a figyelmeztetés akkor is megjelenhet, ha manuálisan töltöd le és próbálod futtatni a GitHubról letöltött (.exe) fájlt. Ebben az esetben kattints a "További információ" gombra, majd válaszd a "Futtatás mindenképp" opciót a telepítés folytatásához.*
+
+```bash
+winget install th-ch.YouTubeMusic
+```
+
+#### Hogyan telepítsd hálózati kapcsolat nélkül? (Windows)
+
+- Töltsd le a `*.nsis.7z` fájlt a [kiadás oldal](https://github.com/th-ch/youtube-music/releases/latest)ról, amely megfelel az eszközöd architektúrájának:
+  - `x64` 64 bites Windows-hoz
+  - `ia32` 32 bites Windows-hoz
+  - `arm64` ARM64 Windows-hoz
+- Töltsd le a telepítőt a [kiadás oldal](https://github.com/th-ch/youtube-music/releases/latest)ról. (`*-Setup.exe`)
+- Helyezd mindkét fájlt **ugyanabba a könyvtárba**.
+- Futtasd a telepítőt.
+
+## Témák
+
+CSS fájlokat tölthetsz be az alkalmazás megjelenésének megváltoztatásához. (Beállítások > Kinézeti beállítások > Téma)
+
+Néhány előre definiált téma elérhető itt: https://github.com/kerichdev/themes-for-ytmdesktop-player.
+
+## Fejlesztés
+
+```bash
+git clone https://github.com/th-ch/youtube-music
+cd youtube-music
+pnpm install --frozen-lockfile
+pnpm dev
+```
+
+## Saját bővítmények készítése
+
+A bővítmények segítségével a következőket teheted:
+
+- Az alkalmazás manipulálása: Az Electron `BrowserWindow` objektuma átadásra kerül a bővítménykezelőnek.
+- Az interfész módosítása: HTML és CSS manipulációval megváltoztathatod az alkalmazás kinézetét.
+
+### Bővítmény létrehozása
+
+Hozz létre egy mappát a `src/plugins/YOUR-PLUGIN-NAME` útvonalon:
+
+- `index.ts`: a bővítmény fő fájlja
+```typescript
+import style from './style.css?inline'; // import style as inline
+
+import { createPlugin } from '@/utils';
+
+export default createPlugin({
+  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', () => {
+        return 'hello';
+      });
+    },
+    // it fired when config changed
+    onConfigChange(newConfig) { /* ... */ },
+    // it fired when plugin disabled
+    stop(context) { /* ... */ },
+  },
+  renderer: {
+    async start(context) {
+      console.log(await context.ipc.invoke('some-event'));
+    },
+    // Only renderer available hook
+    onPlayerApiReady(api: YoutubePlayer, context: RendererContext) {
+      // set plugin config easily
+      context.setConfig({ myConfig: api.getVolume() });
+    },
+    onConfigChange(newConfig) { /* ... */ },
+    stop(_context) { /* ... */ },
+  },
+  preload: {
+    async start({ getConfig }) {
+      const config = await getConfig();
+    },
+    onConfigChange(newConfig) {},
+    stop(_context) {},
+  },
+});
+```
+
+### Gyakori használati esetek
+
+- Egyedi CSS injektálása: hozz létre egy `style.css` fájlt ugyanabban a mappában, majd:
+
+```typescript
+// index.ts
+import style from './style.css?inline'; // import style as inline
+
+import { createPlugin } from '@/utils';
+
+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
+});
+```
+
+- Ha módosítani szeretnéd a HTML-t:
+
+```typescript
+import { createPlugin } from '@/utils';
+
+export default createPlugin({
+  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
+});
+```
+
+- Az elülső és hátsó rész közötti kommunikáció: Az Electron ipcMain moduljának használatával valósítható meg. Lásd az `index.ts` fájlt és a `sponsorblock` bővítmény példáját.
+
+## Build
+
+1. Klónozd a repót
+2. Kövesd ezt az [útmutatót](https://pnpm.io/installation), hogy telepítsd a `pnpm` csomagkezelőt.
+3. Futtasd a következő parancsot `pnpm install --frozen-lockfile` a kellékek telepítéséhez.
+4. Építsd meg az alkalmazást az operációs rendszerednek megfelelő paranccsal: `pnpm build:OS`
+
+- `pnpm dist:win` - Windows
+- `pnpm dist:linux` - Linux (amd64)
+- `pnpm dist:linux:deb-arm64` - Linux (arm64 Debiánhoz)
+- `pnpm dist:linux:rpm-arm64` - Linux (arm64 Fedorához)
+- `pnpm dist:mac` - macOS (amd64)
+- `pnpm dist:mac:arm64` - macOS (arm64)
+
+Az alkalmazás építéséhez a [electron-builder](https://github.com/electron-userland/electron-builder) eszközt használáld, amely támogatja a macOS, Linux és Windows platformokat.
+
+## Gyártás előnézete
+
+```bash
+pnpm start
+```
+
+## Tesztelés
+
+```bash
+pnpm test
+```
+
+A [Playwright](https://playwright.dev/) tesztelési keretrendszert használd az alkalmazás teszteléséhez.
+
+## Licenc
+
+MIT © [th-ch](https://github.com/th-ch/youtube-music)
+
+## GYIK
+
+### Miért nem jelenik meg az alkalmazás menüje?
+
+Ha a `menü elrejtése` opció be van kapcsolva, a menüt az <kbd>alt</kbd> billentyűvel jelenítheted meg (vagy az <kbd>`</kbd> [fordított idézőjel] billentyűvel, ha az alkalmazáson belüli menü bővítményt használod).

docs/readme/README-is.md

@@ -0,0 +1,388 @@
+<div align="center">
+
+# YouTube Tónlist
+
+[![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.png "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 umbúðir utan um YouTube Tónlist sem inniheldur:**
+
+- Innfæddur útlit og tilfinning, miðar að því að halda upprunalegu viðmótinu
+- Rammi fyrir sérsniðnar tengiforrit: breyttu YouTube Tónlist að þínum þörfum (stíl, efni, eiginleikar), virkjaðu/slökktu á viðbætur í
+   einn smellur
+
+## Sýnishornsmynd
+
+|                          Spilaraskjár (albúmslitaþema & umhverfisljós)                                         |
+|:---------------------------------------------------------------------------------------------------------:|
+|![Screenshot1](https://github.com/th-ch/youtube-music/assets/16558115/53efdf73-b8fa-4d7b-a235-b96b91ea77fc)|
+
+## Efni
+
+- [Eiginleikar](#eiginleikar)
+- [Tiltæk tengiforrit](#tiltæk-tengiforrit)
+- [Þýðing](#þýðing)
+- [Sækja](#sækja)
+  - [Arch Linux](#arch-linux)
+  - [MacOS](#macos)
+  - [Windows](#windows)
+    - [Hvernig á að setja upp án nettengingar? (í Windows)](#hvernig-á-að-setja-upp-án-nettengingar-í-windows)
+- [Þemu](#þemu)
+- [Þróun](#þróun)
+- [Búðu til þín eigin viðbætur](#búðu-til-þín-eigin-viðbætur)
+  - [Er að búa til viðbót](#er-að-búa-til-viðbót)
+  - [Algeng notkunartilvik](#algeng-notkunartilvik)
+- [Byggja](#byggja)
+- [Framleiðsluforskoðun](#framleiðsluforskoðun)
+- [Prófanir](#prófanir)
+- [Leyfi](#leyfi)
+- [Algengustu spurningar](#algengustu-spurningar)
+
+## Eiginleikar:
+
+- **Sjálfvirk staðfesting þegar gert er hlé** (Alltaf virkt): slökkva á
+   ["Halda áfram að horfa?"](https://user-images.githubusercontent.com/61631665/129977894-01c60740-7ec6-4bf0-9a2c-25da24491b0e.png)
+   popup sem gerir hlé á tónlist eftir ákveðinn tíma
+
+ - Og meira...
+
+## Tiltæk tengiforrit:
+
+- **Auglýsingablokkari**: Lokaðu fyrir allar auglýsingar og rakningar úr kassanum
+
+- **Albúmsaðgerðir**: Bætir Ódíslika, Mislíkt, Líkt, og Ólíkt til að nota þetta á öll lög á spilunarlista eða albúm
+
+- **Albúmslitaþema**: Beitir kraftmikið þema og sjónrænum áhrifum sem byggjast á litavali albúmsins
+
+- **Umhverfishamur**: Beitir lýsingaráhrifum með því að varpa mildum litum úr myndbandinu í bakgrunn skjásins
+
+- **Hljóðþjöppur**: Notaðu þjöppun á hljóð (lækkar hljóðstyrk háværustu hluta merkis og hækkar hljóðstyrk í mýkstu hlutunum)
+
+- **Þoka Leiðsagnarstika**: Gerir leiðsögustikuna gagnsæja og óskýrt
+
+- **Farið Framhjá Aldurstakmörkunum**: Framhjá aldursstaðfestingu YouTube
+
+- **Yfirskriftarval**: Virkja skjátexta
+
+- **Fyrirferðarlítillhliðarstika**: Stilltu hliðarstikuna alltaf í þétta stillingu
+
+- **Krossfæra**: Krossfæra á milli lög
+
+- **Slökkva á Sjálfvirkri Spilun**: Gerir lag að byrja í "hlé" ham
+
+- **[Discord](https://discord.com/) Rík Nærveru**: Sýndu vinum þínum hvað þú hlustar á
+   með [Rík Nærveru](https://user-images.githubusercontent.com/28219076/104362104-a7a0b980-5513-11eb-9744-bb89eabe0016.png)
+
+- **Niðurhalari**: Niðurhalum
+MP3 [beint úr viðmótinu](https://user-images.githubusercontent.com/61631665/129977677-83a7d067-c192-45e1-98ae-b5a4927393be.png) [(youtube-dl)](https://github.com/ytdl-org/youtube-dl)
+
+- **Veldibundiðrúmmál**: Gerir hljóðstyrkssleðann [veldisvísis](https://greasyfork.org/en/scripts/397686-youtube-music-fix-volume-ratio/)
+  svo það er auðveldara að velja lægra hljóðstyrk.
+
+- **Valmynd í Forriti**: [Gefur börum flott, dökkt útlit](https://user-images.githubusercontent.com/78568641/112215894-923dbf00-8c29-11eb-95c3-3ce15db27eca.png)
+
+  > (sjá [þessa færslu](https://github.com/th-ch/youtube-music/issues/410#issuecomment-952060709) ef þú átt í vandræðum
+  með að fá aðgang að valmyndinni eftir að hafa virkjað þessa viðbót og fela valmyndarvalkostinn)
+
+- **Scrobbler**: Bætir við scrobbling stuðningi fyrir [Last.fm](https://www.last.fm/) og [ListenBrainz](https://listenbrainz.org/)
+
+- **Lumia Stream**: Bætir við [Lumia Stream](https://lumiastream.com/) stuðningi
+
+- **Söngtexti Snilld**: Bætir stuðningi við texta fyrir flest lög
+
+- **Tónlist Saman**: Deila spilunarlista með öðrum. Þegar gestgjafinn spilar lag munu allir aðrir heyra sama lagið
+
+- **Leiðsögn**: Næsta/Til baka leiðsagnarörvar beint samþættar í viðmótinu, eins og í uppáhalds vafranum þínum
+
+- **Engin Google Innskráning**: Fjarlægðu Google innskráningarhnappa og tengla úr viðmótinu
+
+- **Tilkynningar**: Birta tilkynningu þegar lag byrjar að spila
+  ([gagnvirkartilkynningar](https://user-images.githubusercontent.com/78568641/114102651-63ce0e00-98d0-11eb-9dfe-c5a02bb54f9c.png) eru fáanlegar á Windows)
+
+- **Mynd-í-Mynd**: Gerir kleift að skipta forritinu yfir í mynd-í-mynd stillingu
+
+- **Spilunarhraði**: Hlustaðu hratt, hlustaðu hægt!
+  [Bætir við sleða sem stjórnar lagahraðanum](https://user-images.githubusercontent.com/61631665/129976003-e55db5ba-bf42-448c-a059-26a009775e68.png)
+
+- **Nákvæmshljóðstyrkur**: Stjórnaðu hljóðstyrknum nákvæmlega með músarhjóli/hraðtökkum, með sérsniðnum HUD og sérsniðnum hljóðstyrksþrepum
+
+- **Flýtileiðir (og MPRIS)**: Leyfir að stilla alþjóðlegarflýtilyklar fyrir spilun (spila/gera hlé/næsta/fyrri) +
+   óvirkja [media osd](https://user-images.githubusercontent.com/84923831/128601225-afa38c1f-dea8-4209-9f72-0f84c1dd8b54.png)
+   með því að hnekkja miðlunarlyklum + virkja Ctrl/CMD + F til að leita + virkja linux mpris stuðning fyrir
+   miðlunarlyklar + [sérsniðnir flýtilyklar](https://github.com/Araxeus/youtube-music/blob/1e591d6a3df98449bcda6e63baab249b28026148/providers/song-controls.js#L13-L50)
+   fyrir [háþróaða notendur](https://github.com/th-ch/youtube-music/issues/106#issuecomment-952156902)
+- **Slepptu Lögum sem Mislíkuðust**: Sleppir mislíkaði lög
+
+- **Slepptu Þögnum**: Slepptu sjálfkrafa þagnarköflum í lögum
+
+- [**Styrktarblokk**](https://github.com/ajayyy/SponsorBlock): Sleppur sjálfkrafa hlutum sem ekki eru tónlist, eins og inngangur/lok
+  eða hlutar af tónlistarmyndböndum þar sem lag er ekki að spila
+
+- **Miðlunarstýringarverkefnastikunnar**: Stjórnaðu spilun frá [Windows verkefnastikunni þinni](https://user-images.githubusercontent.com/78568641/111916130-24a35e80-8a82-11eb-80c8-5021c1aa27f4.png)
+
+- **Snertistiku**: Sérsniðið Snertistikuútlit fyrir macOS
+
+- **Tuna OBS**: Samþætting við [OBS](https://obsproject.com/)
+  viðbótina [Tuna](https://obsproject.com/forum/resources/tuna.843/)
+
+- **Myndbandgæðisbreyting**: Leyfir að breyta myndbandgæðum með
+  [hnappi](https://user-images.githubusercontent.com/78568641/138574366-70324a5e-2d64-4f6a-acdd-dc2a2b9cecc5.png) á
+  myndbandsyfirlaginu
+
+- **Myndbandsrofi**: Bætir við [hnappi](https://user-images.githubusercontent.com/28893833/173663950-63e6610e-a532-49b7-9afa-54cb57ddfc15.png) til
+  að skipta á milli myndbands/lagshams. Getur einnig valfrjálst fjarlægt allan myndbandsflipann
+
+- **Sjónrænir**: Mismunandi tónlist sjónrænir
+
+## Þýðing
+
+Þú getur aðstoðað við þýðingar á [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>
+
+## Sækja
+
+Þú getur skoðað [nýjustu útgáfuna](https://github.com/th-ch/youtube-music/releases/latest) til að finna fljótt
+nýjustu útgáfuna.
+
+### Arch Linux
+
+Settu upp [`youtube-music-bin`](https://aur.archlinux.org/packages/youtube-music-bin) pakkann frá AUR. Fyrir AUR uppsetningarleiðbeiningar skaltu skoða
+þessa [wiki síðu](https://wiki.archlinux.org/index.php/Arch_User_Repository#Installing_packages).
+
+### MacOS
+
+Þú getur sett upp appið með því að nota Homebrew (sjá [cask skilgreiningu](https://github.com/th-ch/homebrew-youtube-music))
+
+```bash
+brew install th-ch/youtube-music/youtube-music
+```
+
+Ef þú setur upp forritið handvirkt og færð villu "er skemmd og ekki er hægt að opna það," þegar þú ræsir forritið skaltu keyra eftirfarandi í flugstöðinni:
+
+```bash
+/usr/bin/xattr -cr /Applications/YouTube\ Music.app
+```
+
+### Windows
+
+Þú getur notað [Scoop pakkastjórnun](https://scoop.sh) til að setja upp `youtube-music` pakkann frá
+[`extras` fötunni](https://github.com/ScoopInstaller/Extras).
+
+```bash
+scoop bucket add extras
+scoop install extras/youtube-music
+```
+
+Að öðrum kosti geturðu notað [Winget](https://learn.microsoft.com/en-us/windows/package-manager/winget/), Windows 11s
+opinber CLI pakkastjóri til að setja upp `th-ch.YouTubeMusic` pakkann.
+
+*Athugið: Microsoft Defender SmartScreen gæti lokað uppsetningunni þar sem hún er frá „óþekktum útgefanda“. Þetta er einnig
+satt fyrir handvirka uppsetningu þegar reynt er að keyra executable(.exe) eftir handvirkt niðurhal hér á github (sama
+skrá).*
+
+```bash
+winget install th-ch.YouTubeMusic
+```
+
+#### Hvernig á að setja upp án nettengingar? (í Windows)
+
+- Sæktu `*.nsis.7z` skrána fyrir _arkitektúr tækisins þíns_ á [útgáfusíðu](https://github.com/th-ch/youtube-music/releases/latest).
+   - `x64` fyrir 64-bita Windows
+   - `ia32` fyrir 32-bita Windows
+   - `arm64` fyrir ARM64 Windows
+- Sæktu uppsetningarforrit á útgáfusíðu. (`*-Setup.exe`)
+- Settu þær í **sömu möppuna**.
+- Keyrðu uppsetningarforritið.
+
+## Þemu
+
+Þú getur hlaðið CSS skrám til að breyta útliti forritsins (Valkostir > Sjónræn klip > Þemu).
+
+Sum fyrirframskilgreind þemu eru fáanleg á https://github.com/kerichdev/themes-for-ytmdesktop-player.
+
+## Þróun
+
+```bash
+git clone https://github.com/th-ch/youtube-music
+cd youtube-music
+pnpm install --frozen-lockfile
+pnpm dev
+```
+
+## Búðu til þín eigin tengiforrit
+
+Með því að nota tengiforrit geturðu:
+
+- vinna með appið - `BrowserWindow` frá electron er sent til tengiforritsstjórans
+- breyttu framhliðinni með því að vinna með HTML/CSS
+
+### Er að búa til tengiforrit
+
+Búðu til möppu í `src/plugins/YOUR-PLUGIN-NAME`:
+
+- `index.ts`: aðal skránni af tengiforritið
+```typescript
+import style from './style.css?inline'; // flytja inn stíl sem inline
+
+import { createPlugin } from '@/utils';
+
+export default createPlugin({
+  name: 'Plugin Label',
+  restartNeeded: true, // ef gildi er satt, ytmusic sjá endurræsa gluggann
+  config: {
+    enabled: false,
+  }, // sérsniðnastillingar þinn
+  stylesheets: [style], // sérsniðnastílinn þinn
+  menu: async ({ getConfig, setConfig }) => {
+    // Allar *stillingaraðferðir eru umvafnar Lofor<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();
+
+      // þú getur tengst við renderer tengiforritið
+      ipc.handle('some-event', () => {
+        return 'hello';
+      });
+    },
+    // það kviknaði þegar stillingum var breytt
+    onConfigChange(newConfig) { /* ... */ },
+    // it fired when plugin disabled
+    stop(context) { /* ... */ },
+  },
+  renderer: {
+    async start(context) {
+      console.log(await context.ipc.invoke('some-event'));
+    },
+    // Aðeins krókur sem er í boði fyrir renderer
+    onPlayerApiReady(api: YoutubePlayer, context: RendererContext) {
+      // stilltu stillingar viðbótarinnar auðveldlega
+      context.setConfig({ myConfig: api.getVolume() });
+    },
+    onConfigChange(newConfig) { /* ... */ },
+    stop(_context) { /* ... */ },
+  },
+  preload: {
+    async start({ getConfig }) {
+      const config = await getConfig();
+    },
+    onConfigChange(newConfig) {},
+    stop(_context) {},
+  },
+});
+```
+
+### Algeng notkunartilvik
+
+- er að sprauta sérsniðnum CSS: búðu til `style.css` skrá í sömu möppu þá:
+
+```typescript
+// index.ts
+import style from './style.css?inline'; // flytja inn stíl sem inline
+
+import { createPlugin } from '@/utils';
+
+export default createPlugin({
+  name: 'Plugin Label',
+  restartNeeded: true, // ef gildi er satt, ytmusic sjá endurræsa gluggann
+  config: {
+    enabled: false,
+  }, // sérsniðnastillingar þinn
+  stylesheets: [style], // sérsniðnastílinn þinn
+  renderer() {} // skilgreina renderer krók
+});
+```
+
+- Ef þú vilt breyta HTML:
+
+```typescript
+import { createPlugin } from '@/utils';
+
+export default createPlugin({
+  name: 'Plugin Label',
+  restartNeeded: true, // ef gildi er satt, ytmusic sjá endurræsa gluggann
+  config: {
+    enabled: false,
+  }, // sérsniðnastillingar þinn
+  renderer() {
+    // Fjarlægðu innskráningarhnappinn
+    document.querySelector(".sign-in-link.ytmusic-nav-bar").remove();
+  } // skilgreina renderer krók
+});
+```
+
+- samskipti á milli að framan og aftan: hægt að gera með því að nota ipcMain eininguna frá electron. Sjá `index.ts` skrá og
+   dæmi í 'styrktarblokk' tengiforritinu.
+
+## Byggja
+
+1. Klóna geymsluna
+2. Fylgdu [þessa handbók](https://pnpm.io/installation) til að setja upp 'pnpm'
+3. Keyrðu `pnpm install --frozen-lockfile` til að setja upp ósjálfstæði
+4. Keyrðu `pnpm build:OS`
+
+- `pnpm dist:win` - Windows
+- `pnpm dist:linux` - Linux
+- `pnpm dist:mac` - MacOS
+
+Byggir appið fyrir macOS, Linux og Windows,
+með því að nota [electron-builder](https://github.com/electron-userland/electron-builder).
+
+## Framleiðsluforskoðun
+
+```bash
+pnpm start
+```
+
+## Prófanir
+
+```bash
+pnpm test
+```
+
+Notar [Playwright](https://playwright.dev/) til að prófa forritið.
+
+## Leyfi
+
+MIT © [th-ch](https://github.com/th-ch/youtube-music)
+
+## Algengustu Spurningar
+
+### Hvers vegna forritavalmynd birtist ekki?
+
+Ef valmöguleikinn „Fela valmynd“ er á - þú getur sýnt valmyndina með <kbd>alt</kbd> lyklinum (eða <kbd>\`</kbd> [bakka]
+ef þú notar viðbótina fyrir valmynd í forriti)

docs/readme/README-ko.md

@@ -0,0 +1,348 @@
+<div align="center">
+
+# 유튜브 뮤직 (YouTube Music)
+
+[![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.png "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 래퍼; 기능:**
+
+- 원래의 인터페이스를 유지하는 것을 목표로 하는 네이티브 디자인 및 느낌
+- 맞춤 플러그인을 위한 프레임워크: 스타일, 콘텐츠, 기능 등 필요에 따라 유튜브 뮤직을 변경하고, 클릭 한 번으로 플러그인을 활성화/비활성화할 수 있습니다.
+
+## Content
+
+- [기능](#기능)
+- [사용 가능한 플러그인](#사용-가능한-플러그인)
+- [번역](#번역)
+- [다운로드](#다운로드)
+  - [Arch Linux](#arch-linux)
+  - [MacOS](#macos)
+  - [Windows](#windows)
+    - [(Windows에서) 네트워크에 연결하지 않고 설치하는 방법은 무엇인가요?](#windows에서-네트워크에-연결하지-않고-설치하는-방법은-무엇인가요)
+- [테마](#테마)
+- [개발](#개발)
+- [나만의 플러그인 만들기](#나만의-플러그인-만들기)
+  - [플러그인 만들기](#플러그인-만들기)
+  - [일반적인 사용 예](#일반적인-사용-예)
+- [빌드](#빌드)
+- [프로덕션 빌드 미리보기](#프로덕션-빌드-미리보기)
+- [테스트](#테스트)
+- [라이선스](#라이선스)
+- [자주 묻는 질문](#자주-묻는-질문)
+
+## 기능:
+
+- **일시 정지 시 자동 확인** (항상 활성화 됨): 일정 시간이 지나면 음악을 일시 정지하는 ["계속 시청하시겠습니까?"](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)을 추가합니다. 선택적으로 전체 영상 탭을 제거할 수도 있습니다
+
+- **비주얼라이저**: 플레이어에 시각화 도구 추가
+
+## 번역
+
+[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`](https://aur.archlinux.org/packages/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
+/usr/bin/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`)
+- 두 파일을 **동일한 위치**에 놓아주세요.
+- 설치기를 실행하세요.
+
+## 테마
+
+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> [백틱] 키)로 메뉴를 표시할 수 있습니다.

docs/readme/README-ru.md

@@ -0,0 +1,374 @@
+<div align="center">
+
+# YouTube Music
+
+[![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.png "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>
+
+
+
+**Клиент для YouTube Music основанный на Electron с поддержкой:**
+
+- Нативный вид приложения, нацелен на сохранение оригинального интерфейса
+- Фреймворк для пользовательских плагинов: изменяйте YouTube Music под ваши нужды (внешний вид, контент, возможности), включайте/выключайте плагины в один клик
+
+## Демо-изображение
+
+|                          Экран плеера (цветовая тема альбома & режим Ambient)                                |
+|:---------------------------------------------------------------------------------------------------------:|
+|![Screenshot1](https://github.com/th-ch/youtube-music/assets/16558115/53efdf73-b8fa-4d7b-a235-b96b91ea77fc)|
+
+## Содержание
+
+- [Возможности](#Возможности)
+- [Доступные плагины](#Доступные-плагины)
+- [Перевод](#Перевод)
+- [Скачать](#Скачать)
+  - [Arch Linux](#arch-linux)
+  - [MacOS](#macos)
+  - [Windows](#windows)
+    - [Как установить без подключения к интернету? (в Windows)](#Установка-без-подключения-к-Интернету-в-Windows)
+- [Темы](#Темы)
+- [Для разработчиков](#Для-разработчиков)
+- [Создайте свои собственные плагины](#Создайте-свои-собственные-плагины)
+  - [Создание плагина](#Создание-плагина)
+  - [Примеры использования](#Примеры-использования)
+- [Сборка](#Сборка)
+- [Предварительный просмотр](#Предварительный-просмотр)
+- [Тестирование](#Тестирование)
+- [Лицензия](#Лицензия)
+- [Часто задаваемые вопросы](#Часто-задаваемые-вопросы)
+
+## Возможности:
+
+- **Авто-подтверждение при паузе** (Всегда включено): отключает всплывающие уведомление ["Продолжить просмотр?"](https://user-images.githubusercontent.com/61631665/129977894-01c60740-7ec6-4bf0-9a2c-25da24491b0e.png),
+    которое  приостанавливает воспроизведение через определённое время
+
+ - И больше ...
+
+## Доступные плагины:
+
+- **Блокировщик рекламы**: Блокирует всю рекламу и трекеры
+
+- **Действия с альбомом**: Добавляет кнопки "Убрать дизлайк", "Дизлайк", "Лайк", "Убрать лайк" и применяет их действия ко всем трекам в плейлисте или альбоме
+
+- **Цветовая тема альбома**: Применяет динамическую тему и эффекты, основываясь на цветовой палитре альбома
+
+- **Режим Ambient**: Применяет световой эффект, проецируя нежные цвета из видео на задний фон вашего экрана
+
+- **Нормализация аудио**: Применяет нормализацию к аудио (уменьшает громкость громких частей трека и повышает громкость тихих частей трека)
+
+- **Размытие панели навигации**: Делает панель навигации прозрачной и размытой
+
+- **Обход возрастных ограничений**: Обходит проверку возраста YouTube
+
+- **Выбор субтитров**: Включить субтитры
+
+- **Компактная боковая панель**: Всегда показывать боковую панель компактно
+
+- **Плавный переход**: Плавный переход между треками
+
+- **Отключить автопроигрыш**: Каждый трек начинается в режиме паузы
+
+- **[Discord](https://discord.com/) Rich Presence**: Показывает вашим друзьям, что вы слушаете с помощью [Rich Presence](https://user-images.githubusercontent.com/28219076/104362104-a7a0b980-5513-11eb-9744-bb89eabe0016.png)
+
+- **Загрузчик**: Загрузка MP3 [напрямую из интерфейса](https://user-images.githubusercontent.com/61631665/129977677-83a7d067-c192-45e1-98ae-b5a4927393be.png) [(youtube-dl)](https://github.com/ytdl-org/youtube-dl)
+
+- **Расширенная громкость**: Делает слайдер громкости [расширенным](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/) и [ListenBrainz](https://listenbrainz.org/)
+
+- **Lumia Stream**: Добавляет поддержку [Lumia Stream](https://lumiastream.com/)
+
+- **Тесты песен Genius**: Добавляет поддержку текстов для большинства песен
+
+- **Music Together**: Делитесь плейлистом с другими. Когда ведущий воспроизводит трек, все остальные будут слушать этот же трек.
+
+- **Навигация**: Кнопки Назад/Вперед интегрированы в интерфейс, как в вашем любимом браузере
+
+- **Без входа в систему Google**: Убирает из интерфейса кнопки и ссылки для входа через Google
+
+- **Уведомления**: Показывает уведомление, когда трек начинает играть ([интерактивные уведомления](https://user-images.githubusercontent.com/78568641/114102651-63ce0e00-98d0-11eb-9dfe-c5a02bb54f9c.png) доступны только для Windows)
+
+- **Картинка в картинке**: Позволяет переключить приложение в режим "картинка в картинке"
+
+- **Скорость воспроизведения**: Слушайте быстрее, слушайте медленнее! [Добавляет слайдер для контроля скорости трека](https://user-images.githubusercontent.com/61631665/129976003-e55db5ba-bf42-448c-a059-26a009775e68.png)
+
+- **Точная громкость**: Точечно управляйте громкостью с помощью колеса мыши/горячих клавиш, с кастомным интерфейсом и настраиваемыми шагами громкости
+
+- **Ярлыки (и MPRIS)**: Позволяет настроить глобальные горячие клавиши управления воспроизведением (плей/пауза/следующий/предыдущий) + отключает [отображение медиа на экране,](https://user-images.githubusercontent.com/84923831/128601225-afa38c1f-dea8-4209-9f72-0f84c1dd8b54.png) переопределяя клавиши управления + включает Ctrl/CMD + F для поиска + включает поддержку linux mpris для клавиш управления медиа + [настраиваемые сочетания клавиш](https://github.com/Araxeus/youtube-music/blob/1e591d6a3df98449bcda6e63baab249b28026148/providers/song-controls.js#L13-L50) для [продвинутых пользователей](https://github.com/th-ch/youtube-music/issues/106#issuecomment-952156902)
+
+- **Пропускать непонравившиеся треки**: Пропускает непонравившиеся треки
+
+- **Пропуск тишины**: Автоматически пропускает тихие моменты в песнях
+
+- [**SponsorBlock**](https://github.com/ajayyy/SponsorBlock): Автоматически пропускает немузыкальные части, такие как интро/аутро музыкальных видео, где трек не играет
+
+- **Управление воспроизведением из панели задач**: Управляйте воспроизведением из [панели задач Windows](https://user-images.githubusercontent.com/78568641/111916130-24a35e80-8a82-11eb-80c8-5021c1aa27f4.png)
+
+- **TouchBar**: Кастомная раскладка TouchBar для MacOS
+
+- **Tuna OBS**: Интеграция с [OBS](https://obsproject.com/) плагином [Tuna](https://obsproject.com/forum/resources/tuna.843/)
+
+- **Изменение качества видео**: Позволяет менять качество видео [кнопкой](https://user-images.githubusercontent.com/78568641/138574366-70324a5e-2d64-4f6a-acdd-dc2a2b9cecc5.png) на медиаплеере видео
+
+- **Переключатель видео**: Добавляет
+  [кнопку](https://user-images.githubusercontent.com/28893833/173663950-63e6610e-a532-49b7-9afa-54cb57ddfc15.png) переключения режимов Трек/Видео. Также может удалять вкладку "Видео" полностью
+
+- **Визуализатор**: Различные визуализаторы музыки
+
+- **Synced Lyrics**:
+Предоставляет синхронизированные слова для песен из таких источников, как [LRClib](https://lrclib.net).
+
+## Перевод
+
+Вы можете помочь с переводом на ваш язык на [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>
+
+## Скачать
+
+Вы можете посмотреть [latest release,](https://github.com/th-ch/youtube-music/releases/latest) чтобы быстро найти новую версию.
+
+### Arch Linux
+
+Установите пакет [`youtube-music-bin`](https://aur.archlinux.org/packages/youtube-music-bin) из AUR. Инструкции по установке из AUR можете найти на этой [вики-странице](https://wiki.archlinux.org/index.php/Arch_User_Repository#Installing_packages).
+
+### macOS
+
+Вы можете установить приложение с помощью Homebrew (сморите [cask definition](https://github.com/th-ch/homebrew-youtube-music)):
+
+```bash
+brew install th-ch/youtube-music/youtube-music
+```
+
+Если вы устанавливаете приложение вручную и получаете ошибку "is damaged and can’t be opened.", запустите в терминале следующую команду:
+
+```bash
+/usr/bin/xattr -cr /Applications/YouTube\ Music.app
+```
+
+### Windows
+
+Вы можете использовать [пакетный менеджер Scoop](https://scoop.sh) для установки пакета `youtube-music` из [`extras` bucket](https://github.com/ScoopInstaller/Extras).
+
+```bash
+scoop bucket add extras
+scoop install extras/youtube-music
+```
+
+Также для установки вы можете использовать [Winget](https://learn.microsoft.com/en-us/windows/package-manager/winget/), официальный пакетный менеджер командной строки Windows 11, для установки пакета `th-ch.YouTubeMusic`.
+
+*К сведению: SmartScreen защитника Windows может блокировать установку, так как она от "неизвестного издателя". Это также применимо к методу ручной установки, когда вы пытаетесь запустить исполняемый файл(.exe) после загрузки здесь, на GitHub (тот же файл).*
+
+```bash
+winget install th-ch.YouTubeMusic
+```
+
+#### Установка без подключения к Интернету? (в Windows)
+
+- Скачайте файл `*.nsis.7z` из _архетиктура вашего устройства_ на [release page](https://github.com/th-ch/youtube-music/releases/latest).
+  - `x64` для 64-bit Windows
+  - `ia32` для 32-bit Windows
+  - `arm64` для ARM64 Windows
+- Скачайте установщик в release page. (`*-Setup.exe`)
+- Поместите их в **одной директории**.
+- Запустите установщик.
+
+## Темы
+
+Вы можете загрузить файл 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
+```
+
+## Создайте свои собственные плагины
+
+Используя плагины вы можете:
+
+- Манипулировать приложением - `BrowserWindow` из electron проброшен обработчику плагинов
+- Изменять внешний вид, манипулируя HTML/CSS
+
+### Создание плагина
+
+Создайте директорию в `src/plugins/YOUR-PLUGIN-NAME`:
+
+- `index.ts`: основной файл плагина
+```typescript
+import style from './style.css?inline'; // import style as inline
+
+import { createPlugin } from '@/utils';
+
+export default createPlugin({
+  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', () => {
+        return 'hello';
+      });
+    },
+    // it fired when config changed
+    onConfigChange(newConfig) { /* ... */ },
+    // it fired when plugin disabled
+    stop(context) { /* ... */ },
+  },
+  renderer: {
+    async start(context) {
+      console.log(await context.ipc.invoke('some-event'));
+    },
+    // Only renderer available hook
+    onPlayerApiReady(api: YoutubePlayer, context: RendererContext) {
+      // set plugin config easily
+      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 style as inline
+
+import { createPlugin } from '@/utils';
+
+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
+});
+```
+
+- Если вы хотите изменить HTML:
+
+```typescript
+import { createPlugin } from '@/utils';
+
+export default createPlugin({
+  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
+});
+```
+
+- обмен между фронтом и бэком может быть выполнен с помощью модуля ipcMain из electron. Смотрите файл `index.ts` и
+  пример в плагине `sponsorblock`.
+
+## Сборка
+
+1. Склонируйте репозиторий
+2. Следуйте [этой инструкции,](https://pnpm.io/installation) чтобы установить `pnpm`
+3. Запустите `pnpm install --frozen-lockfile` для установки зависимостей
+4. Запустите `pnpm build:OS`
+
+- `pnpm dist:win` - Windows
+- `pnpm dist:linux` - Linux (amd64)
+- `pnpm dist:linux:deb-arm64` - Linux (arm64 for Debian)
+- `pnpm dist:linux:rpm-arm64` - Linux (arm64 for Fedora)
+- `pnpm dist:mac` - macOS (amd64)
+- `pnpm dist:mac:arm64` - macOS (arm64)
+
+Сборка приложения для macOS, Linux, и Windows,
+используя [electron-builder](https://github.com/electron-userland/electron-builder).
+
+## Предварительный просмотр
+
+```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> [обратный апостроф], если используете плагин "Меню в приложении")

docs/style/fonts.css

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

electron.vite.config.mts

@@ -0,0 +1,172 @@
+import { resolve, dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import { UserConfig } from 'vite';
+import { defineConfig, defineViteConfig } from 'electron-vite';
+import builtinModules from 'builtin-modules';
+import viteResolve from 'vite-plugin-resolve';
+import Inspect from 'vite-plugin-inspect';
+import solidPlugin from 'vite-plugin-solid';
+
+import { pluginVirtualModuleGenerator } from './vite-plugins/plugin-importer.mjs';
+import pluginLoader from './vite-plugins/plugin-loader.mjs';
+
+import { i18nImporter } from './vite-plugins/i18n-importer.mjs';
+
+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.build!.sourcemap = 'inline';
+      commonConfig.plugins?.push(
+        Inspect({
+          build: true,
+          outputDir: join(__dirname, '.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.build!.sourcemap = 'inline';
+      commonConfig.plugins?.push(
+        Inspect({
+          build: true,
+          outputDir: join(__dirname, '.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.build!.sourcemap = 'inline';
+      commonConfig.plugins?.push(
+        Inspect({
+          build: true,
+          outputDir: join(__dirname, '.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 href="#" class="button" onclick="reload()">Retry</a>
-		</div>
-	</body>
-</html>

eslint.config.mjs

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

index.js

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

menu.js

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

package.json

@@ -1,178 +1,346 @@
 {
-	"name": "youtube-music",
-	"productName": "YouTube Music",
-	"version": "1.20.0",
-	"description": "YouTube Music Desktop App - including custom plugins",
-	"license": "MIT",
-	"repository": "th-ch/youtube-music",
-	"author": {
-		"name": "th-ch",
-		"email": "th-ch@users.noreply.github.com",
-		"url": "https://github.com/th-ch/youtube-music"
-	},
-	"build": {
-		"appId": "com.github.th-ch.youtube-music",
-		"productName": "YouTube Music",
-		"mac": {
-			"identity": null,
-			"files": [
-				"!plugins/taskbar-mediacontrol${/*}"
-			],
-			"target": [
-				{
-					"target": "dmg",
-					"arch": [
-						"x64",
-						"arm64"
-					]
-				}
-			],
-			"icon": "assets/generated/icons/mac/icon.icns"
-		},
-		"win": {
-			"icon": "assets/generated/icons/win/icon.ico",
-			"files": [
-				"!plugins/touchbar${/*}"
-			],
-			"target": [
-				{
-					"target": "nsis",
-					"arch": [
-						"x64",
-						"arm64"
-					]
-				},
-				{
-					"target": "portable",
-					"arch": [
-						"x64",
-						"arm64"
-					]
-				}
-			]
-		},
-		"nsis": {
-			"runAfterFinish": false
-		},
-		"linux": {
-			"icon": "assets/generated/icons/png",
-			"files": [
-				"!plugins/{touchbar,taskbar-mediacontrol}${/*}"
-			],
-			"category": "AudioVideo",
-			"target": [
-				"AppImage",
-				"snap",
-				"freebsd",
-				"deb",
-				"rpm"
-			]
-		},
-		"snap": {
-			"slots": [
-				{
-					"mpris": {
-						"interface": "mpris"
-					}
-				}
-			]
-		}
-	},
-	"scripts": {
-		"test": "playwright test",
-		"test:debug": "DEBUG=pw:browser* playwright test",
-		"start": "electron .",
-		"start:debug": "ELECTRON_ENABLE_LOGGING=1 electron .",
-		"generate:package": "node utils/generate-package-json.js",
-		"postinstall": "yarn run plugins",
-		"clean": "del-cli dist",
-		"build": "yarn run clean && electron-builder --win --mac --linux -p never",
-		"build:linux": "yarn run clean && electron-builder --linux -p never",
-		"build:mac": "yarn run clean && electron-builder --mac dmg:x64 -p never",
-		"build:mac:arm64": "yarn run clean && electron-builder --mac dmg:arm64 -p never",
-		"build:win": "yarn run clean && electron-builder --win -p never",
-		"lint": "xo",
-		"changelog": "auto-changelog",
-		"plugins": "yarn run plugin:adblocker && yarn run plugin:bypass-age-restrictions",
-		"plugin:adblocker": "del-cli plugins/adblocker/ad-blocker-engine.bin && node plugins/adblocker/blocker.js",
-		"plugin:bypass-age-restrictions": "del-cli node_modules/simple-youtube-age-restriction-bypass/package.json && yarn run generate:package simple-youtube-age-restriction-bypass",
-		"release:linux": "yarn run clean && electron-builder --linux -p always -c.snap.publish=github",
-		"release:mac": "yarn run clean && electron-builder --mac -p always",
-		"release:win": "yarn run clean && electron-builder --win -p always"
-	},
-	"engines": {
-		"node": ">=16.0.0",
-		"npm": "Please use yarn instead"
-	},
-	"dependencies": {
-		"@cliqz/adblocker-electron": "^1.26.5",
-		"@ffmpeg/core": "^0.11.0",
-		"@ffmpeg/ffmpeg": "^0.11.6",
-		"@foobar404/wave": "^2.0.4",
-		"@xhayper/discord-rpc": "^1.0.16",
-		"async-mutex": "^0.4.0",
-		"browser-id3-writer": "^5.0.0",
-		"butterchurn": "^2.6.7",
-		"butterchurn-presets": "^2.4.7",
-		"custom-electron-prompt": "^1.5.7",
-		"custom-electron-titlebar": "^4.1.6",
-		"electron-better-web-request": "^1.0.1",
-		"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": "^5.3.0",
-		"filenamify": "^4.3.0",
-		"howler": "^2.2.3",
-		"html-to-text": "^9.0.5",
-		"keyboardevent-from-electron-accelerator": "^2.0.0",
-		"keyboardevents-areequal": "^0.2.2",
-		"md5": "^2.3.0",
-		"mpris-service": "^2.1.2",
-		"node-fetch": "^2.6.9",
-		"simple-youtube-age-restriction-bypass": "https://gitpkg.now.sh/api/pkg.tgz?url=zerodytrash/Simple-YouTube-Age-Restriction-Bypass&commit=v2.5.4",
-		"vudio": "^2.1.1",
-		"youtubei.js": "^4.3.0",
-		"ytpl": "^2.3.0"
-	},
-	"resolutions": {
-		"xml2js": "^0.5.0",
-		"@electron/universal": "^1.3.4",
-		"electron-is-dev": "patch:electron-is-dev@npm%3A2.0.0#./.yarn/patches/electron-is-dev-npm-2.0.0-9d41637d91.patch"
-	},
-	"devDependencies": {
-		"@playwright/test": "^1.29.2",
-		"auto-changelog": "^2.4.0",
-		"del-cli": "^5.0.0",
-		"electron": "^22.3.6",
-		"electron-builder": "^23.6.0",
-		"electron-devtools-installer": "^3.2.0",
-		"node-gyp": "^9.3.1",
-		"playwright": "^1.29.2",
-		"xo": "^0.53.1"
-	},
-	"auto-changelog": {
-		"hideCredit": true,
-		"package": true,
-		"unreleased": true,
-		"output": "changelog.md"
-	},
-	"xo": {
-		"envs": [
-			"node",
-			"browser"
-		],
-		"rules": {
-			"quotes": [
-				"error",
-				"double",
-				{
-					"avoidEscape": true,
-					"allowTemplateLiterals": true
-				}
-			]
-		}
-	},
-	"packageManager": "yarn@3.4.1"
+  "name": "youtube-music",
+  "desktopName": "com.github.th_ch.youtube_music",
+  "productName": "YouTube Music",
+  "version": "3.7.2",
+  "description": "YouTube Music Desktop App - including custom plugins",
+  "main": "./dist/main/index.js",
+  "license": "MIT",
+  "repository": "th-ch/youtube-music",
+  "author": {
+    "name": "th-ch",
+    "email": "th-ch@users.noreply.github.com",
+    "url": "https://github.com/th-ch/youtube-music"
+  },
+  "build": {
+    "appId": "com.github.th-ch.youtube-music",
+    "productName": "YouTube Music",
+    "files": [
+      "!*",
+      "dist",
+      "assets",
+      "license",
+      "!node_modules",
+      "node_modules/custom-electron-prompt/**",
+      "node_modules/@ghostery/adblocker-electron-preload/**",
+      "node_modules/@ffmpeg.wasm/core-mt/**",
+      "!node_modules/**/*.map",
+      "!node_modules/**/*.ts"
+    ],
+    "asarUnpack": [
+      "assets"
+    ],
+    "mac": {
+      "identity": null,
+      "target": [
+        {
+          "target": "dmg",
+          "arch": [
+            "x64",
+            "arm64"
+          ]
+        }
+      ],
+      "icon": "assets/generated/icons/mac/icon.icns",
+      "compression": "maximum"
+    },
+    "win": {
+      "icon": "assets/generated/icons/win/icon.ico",
+      "target": [
+        {
+          "target": "nsis-web",
+          "arch": [
+            "x64",
+            "ia32",
+            "arm64"
+          ]
+        },
+        {
+          "target": "portable",
+          "arch": [
+            "x64",
+            "ia32",
+            "arm64"
+          ]
+        }
+      ],
+      "compression": "maximum"
+    },
+    "nsisWeb": {
+      "runAfterFinish": false
+    },
+    "linux": {
+      "icon": "assets/generated/icons/png",
+      "category": "AudioVideo",
+      "desktop": {
+        "entry": {
+          "StartupWMClass": "com.github.th_ch.youtube_music"
+        }
+      },
+      "target": [
+        {
+          "target": "AppImage",
+          "arch": [
+            "x64",
+            "arm64",
+            "armv7l"
+          ]
+        },
+        {
+          "target": "flatpak",
+          "arch": [
+            "x64"
+          ]
+        },
+        {
+          "target": "deb",
+          "arch": [
+            "x64",
+            "arm64",
+            "armv7l"
+          ]
+        },
+        {
+          "target": "rpm",
+          "arch": [
+            "x64",
+            "arm64"
+          ]
+        },
+        {
+          "target": "snap",
+          "arch": [
+            "x64"
+          ]
+        },
+        {
+          "target": "freebsd",
+          "arch": [
+            "x64",
+            "arm64",
+            "armv7l"
+          ]
+        },
+        {
+          "target": "tar.gz",
+          "arch": [
+            "x64",
+            "arm64",
+            "armv7l"
+          ]
+        }
+      ]
+    },
+    "appImage": {
+      "description": "YouTube Music Desktop App bundled with custom plugins (and built-in ad blocker / downloader)",
+      "category": "AudioVideo"
+    },
+    "flatpak": {
+      "description": "YouTube Music Desktop App bundled with custom plugins (and built-in ad blocker / downloader)",
+      "category": "AudioVideo",
+      "runtimeVersion": "24.08",
+      "baseVersion": "24.08",
+      "finishArgs": [
+        "--socket=wayland",
+        "--socket=x11",
+        "--share=ipc",
+        "--device=dri",
+        "--socket=pulseaudio",
+        "--share=network",
+        "--filesystem=xdg-music:rw",
+        "--talk-name=org.freedesktop.Notifications",
+        "--talk-name=org.gnome.SessionManager",
+        "--talk-name=org.kde.StatusNotifierWatcher",
+        "--own-name=org.mpris.MediaPlayer2.YoutubeMusic.*"
+      ]
+    },
+    "deb": {
+      "depends": [
+        "libgtk-3-0",
+        "libnotify4",
+        "libnss3",
+        "libxss1",
+        "libxtst6",
+        "xdg-utils",
+        "libatspi2.0-0",
+        "libuuid1",
+        "libasound2",
+        "libgbm1"
+      ]
+    },
+    "rpm": {
+      "depends": [
+        "/usr/lib64/libuuid.so.1"
+      ],
+      "fpm": [
+        "--rpm-rpmbuild-define",
+        "_build_id_links none"
+      ]
+    },
+    "snap": {
+      "slots": [
+        {
+          "mpris": {
+            "interface": "mpris"
+          }
+        }
+      ]
+    },
+    "directories": {
+      "output": "./pack/"
+    }
+  },
+  "scripts": {
+    "test": "playwright test",
+    "test:debug": "cross-env DEBUG=pw:*,-pw:test:protocol playwright test",
+    "build": "electron-vite build",
+    "vite:inspect": "pnpm clean && electron-vite build --mode development && pnpm exec serve .vite-inspect",
+    "start": "electron-vite preview",
+    "start:debug": "cross-env ELECTRON_ENABLE_LOGGING=1 pnpm start",
+    "dev": "cross-env NODE_OPTIONS=--enable-source-maps electron-vite dev --watch",
+    "dev:renderer": "cross-env NODE_OPTIONS=--enable-source-maps electron-vite dev",
+    "dev:debug": "cross-env ELECTRON_ENABLE_LOGGING=1 pnpm dev",
+    "clean": "del-cli dist && del-cli pack && del-cli .vite-inspect",
+    "dist": "pnpm clean && pnpm build && pnpm electron-builder --win --mac --linux -p never",
+    "dist:linux": "pnpm clean && pnpm build && pnpm electron-builder --linux -p never",
+    "dist:linux:deb-arm64": "pnpm clean && pnpm build && pnpm electron-builder --linux deb:arm64 -p never",
+    "dist:linux:rpm-arm64": "pnpm clean && pnpm build && pnpm electron-builder --linux rpm:arm64 -p never",
+    "dist:mac": "pnpm clean && pnpm build && pnpm electron-builder --mac dmg:x64 -p never",
+    "dist:mac:arm64": "pnpm clean && pnpm build && pnpm electron-builder --mac dmg:arm64 -p never",
+    "dist:win": "pnpm clean && pnpm build && pnpm electron-builder --win -p never",
+    "dist:win:x64": "pnpm clean && pnpm build && pnpm electron-builder --win nsis-web:x64 -p never",
+    "lint": "eslint .",
+    "changelog": "npx --yes auto-changelog",
+    "release:linux": "pnpm clean && pnpm build && pnpm electron-builder --linux -p always -c.snap.publish=github",
+    "release:mac": "pnpm clean && pnpm build && pnpm electron-builder --mac -p always",
+    "release:win": "pnpm clean && pnpm build && pnpm electron-builder --win -p always",
+    "typecheck": "tsc -p tsconfig.json --noEmit"
+  },
+  "engines": {
+    "node": ">=18",
+    "pnpm": ">=8"
+  },
+  "pnpm": {
+    "overrides": {
+      "vite": "6.0.7",
+      "node-gyp": "11.0.0",
+      "xml2js": "0.6.2",
+      "node-fetch": "3.3.2",
+      "@electron/universal": "2.0.1",
+      "@babel/runtime": "7.26.0"
+    },
+    "patchedDependencies": {
+      "vudio@2.1.1": "patches/vudio@2.1.1.patch",
+      "app-builder-lib@26.0.0-alpha.9": "patches/app-builder-lib@26.0.0-alpha.9.patch",
+      "@malept/flatpak-bundler": "patches/@malept__flatpak-bundler.patch"
+    }
+  },
+  "dependencies": {
+    "@electron-toolkit/tsconfig": "1.0.1",
+    "@electron/remote": "2.1.2",
+    "@ffmpeg.wasm/core-mt": "0.12.0",
+    "@ffmpeg.wasm/main": "0.12.0",
+    "@floating-ui/dom": "1.6.13",
+    "@foobar404/wave": "2.0.5",
+    "@ghostery/adblocker-electron": "2.3.1",
+    "@ghostery/adblocker-electron-preload": "2.3.1",
+    "@hono/node-server": "1.13.7",
+    "@hono/swagger-ui": "0.5.0",
+    "@hono/zod-openapi": "0.18.3",
+    "@hono/zod-validator": "0.4.2",
+    "@jellybrick/dbus-next": "0.10.3",
+    "@jellybrick/electron-better-web-request": "1.0.4",
+    "@jellybrick/mpris-service": "2.1.5",
+    "@jimp/plugin-color": "1.6.0",
+    "@skyra/jaro-winkler": "1.1.1",
+    "@xhayper/discord-rpc": "1.2.0",
+    "async-mutex": "0.5.0",
+    "bgutils-js": "3.1.2",
+    "butterchurn": "3.0.0-beta.4",
+    "butterchurn-presets": "3.0.0-beta.4",
+    "color": "4.2.3",
+    "conf": "13.1.0",
+    "custom-electron-prompt": "1.5.8",
+    "deepmerge-ts": "7.1.3",
+    "electron-debug": "4.1.0",
+    "electron-is": "3.0.0",
+    "electron-localshortcut": "3.2.1",
+    "electron-store": "10.0.0",
+    "electron-unhandled": "4.0.1",
+    "electron-updater": "6.3.9",
+    "fast-average-color": "9.4.0",
+    "fast-equals": "5.2.2",
+    "filenamify": "6.0.0",
+    "happy-dom": "16.6.0",
+    "hono": "4.6.16",
+    "howler": "2.2.4",
+    "html-to-text": "9.0.5",
+    "i18next": "24.2.1",
+    "jimp": "1.6.0",
+    "keyboardevent-from-electron-accelerator": "2.0.0",
+    "keyboardevents-areequal": "0.2.2",
+    "node-html-parser": "7.0.1",
+    "node-id3": "0.2.6",
+    "peerjs": "1.5.4",
+    "semver": "7.6.3",
+    "serve": "14.2.4",
+    "simple-youtube-age-restriction-bypass": "github:organization/Simple-YouTube-Age-Restriction-Bypass#v2.5.9",
+    "solid-floating-ui": "0.3.1",
+    "solid-js": "1.9.4",
+    "solid-styled-components": "0.28.5",
+    "solid-transition-group": "0.2.3",
+    "ts-morph": "25.0.0",
+    "vudio": "2.1.1",
+    "x11": "2.3.0",
+    "youtubei.js": "12.2.0",
+    "zod": "3.24.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "9.18.0",
+    "@playwright/test": "1.49.1",
+    "@stylistic/eslint-plugin-js": "2.13.0",
+    "@total-typescript/ts-reset": "0.6.1",
+    "@types/color": "4.2.0",
+    "@types/electron-localshortcut": "3.1.3",
+    "@types/eslint__js": "8.42.3",
+    "@types/howler": "2.2.12",
+    "@types/html-to-text": "9.0.4",
+    "@types/semver": "7.5.8",
+    "@types/trusted-types": "2.0.7",
+    "bufferutil": "4.0.9",
+    "builtin-modules": "4.0.0",
+    "cross-env": "7.0.3",
+    "del-cli": "6.0.0",
+    "discord-api-types": "0.37.116",
+    "electron": "34.0.0",
+    "electron-builder": "26.0.0-alpha.9",
+    "electron-builder-squirrel-windows": "26.0.0-alpha.9",
+    "electron-devtools-installer": "4.0.0",
+    "electron-vite": "2.3.0",
+    "esbuild": "0.24.2",
+    "eslint": "9.18.0",
+    "eslint-config-prettier": "10.0.1",
+    "eslint-import-resolver-exports": "1.0.0-beta.5",
+    "eslint-import-resolver-typescript": "3.7.0",
+    "eslint-plugin-import": "2.31.0",
+    "eslint-plugin-prettier": "5.2.2",
+    "glob": "11.0.1",
+    "node-gyp": "11.0.0",
+    "playwright": "1.49.1",
+    "rollup": "4.30.1",
+    "typescript": "5.7.3",
+    "typescript-eslint": "8.20.0",
+    "utf-8-validate": "6.0.5",
+    "vite": "6.0.7",
+    "vite-plugin-inspect": "10.0.6",
+    "vite-plugin-resolve": "2.5.2",
+    "vite-plugin-solid": "2.11.0",
+    "ws": "8.18.0"
+  },
+  "auto-changelog": {
+    "hideCredit": true,
+    "package": true,
+    "unreleased": true,
+    "output": "changelog.md"
+  }
 }

patches/@malept__flatpak-bundler.patch

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

patches/app-builder-lib@26.0.0-alpha.9.patch

@@ -0,0 +1,21 @@
+diff --git a/out/targets/snap.js b/out/targets/snap.js
+index f72c36355d27cd2d69fc5fdf2d8bb2451db0287f..baae112fe25ebb49ab8e25aaa48efd6bc43b598f 100644
+--- a/out/targets/snap.js
++++ b/out/targets/snap.js
+@@ -212,14 +212,14 @@ class SnapTarget extends core_1.Target {
+             args.push("--template-url", `electron4:${snapArch}`);
+         }
+         await (0, builder_util_1.executeAppBuilder)(args);
+-        const publishConfig = findSnapPublishConfig(this.packager.config);
++
+         await packager.info.callArtifactBuildCompleted({
+             file: artifactPath,
+             safeArtifactName: packager.computeSafeArtifactName(artifactName, "snap", arch, false),
+             target: this,
+             arch,
+             packager,
+-            publishConfig: publishConfig == null ? { provider: "snapStore" } : publishConfig,
++            publishConfig: options.publish == null ? { provider: "snapStore" } : null,
+         });
+     }
+     isElectronVersionGreaterOrEqualThan(version) {

patches/eslint-plugin-import@2.29.1.patch

@@ -0,0 +1,161 @@
+diff --git a/lib/importDeclaration.js b/lib/importDeclaration.js
+index afb4de779034cfea080825a5f4320661c48bee32..f10b0a11a39577fbd42569e6b0e768255c1ef276 100644
+--- a/lib/importDeclaration.js
++++ b/lib/importDeclaration.js
+@@ -1,5 +1,5 @@
+-"use strict";Object.defineProperty(exports, "__esModule", { value: true });exports["default"] = importDeclaration;function importDeclaration(context) {
+-  var ancestors = context.getAncestors();
++"use strict";Object.defineProperty(exports, "__esModule", { value: true });exports["default"] = importDeclaration;function importDeclaration(context, node) {
++  var ancestors = context.getSourceCode().getAncestors(node);
+   return ancestors[ancestors.length - 1];
+ }
+ //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9pbXBvcnREZWNsYXJhdGlvbi5qcyJdLCJuYW1lcyI6WyJpbXBvcnREZWNsYXJhdGlvbiIsImNvbnRleHQiLCJhbmNlc3RvcnMiLCJnZXRBbmNlc3RvcnMiLCJsZW5ndGgiXSwibWFwcGluZ3MiOiJnR0FBd0JBLGlCLENBQVQsU0FBU0EsaUJBQVQsQ0FBMkJDLE9BQTNCLEVBQW9DO0FBQ2pELE1BQU1DLFlBQVlELFFBQVFFLFlBQVIsRUFBbEI7QUFDQSxTQUFPRCxVQUFVQSxVQUFVRSxNQUFWLEdBQW1CLENBQTdCLENBQVA7QUFDRCIsImZpbGUiOiJpbXBvcnREZWNsYXJhdGlvbi5qcyIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCBkZWZhdWx0IGZ1bmN0aW9uIGltcG9ydERlY2xhcmF0aW9uKGNvbnRleHQpIHtcbiAgY29uc3QgYW5jZXN0b3JzID0gY29udGV4dC5nZXRBbmNlc3RvcnMoKTtcbiAgcmV0dXJuIGFuY2VzdG9yc1thbmNlc3RvcnMubGVuZ3RoIC0gMV07XG59XG4iXX0=
+\ No newline at end of file
+diff --git a/lib/rules/first.js b/lib/rules/first.js
+index a77168660cf32c8c3e96f3ff4b8240a36d7de3a6..c0e00d75f9989916057fef3999eeee8d21820292 100644
+--- a/lib/rules/first.js
++++ b/lib/rules/first.js
+@@ -66,7 +66,7 @@ module.exports = {
+                   }
+                 }
+                 if (nonImportCount > 0) {var _iteratorNormalCompletion = true;var _didIteratorError = false;var _iteratorError = undefined;try {
+-                    for (var _iterator = context.getDeclaredVariables(node)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {var variable = _step.value;
++                    for (var _iterator = sourceCode.getDeclaredVariables(node)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {var variable = _step.value;
+                       if (!shouldSort) {break;}
+                       var references = variable.references;
+                       if (references.length) {var _iteratorNormalCompletion2 = true;var _didIteratorError2 = false;var _iteratorError2 = undefined;try {
+diff --git a/lib/rules/namespace.js b/lib/rules/namespace.js
+index 574d89a60d15c7e0e712956ea6a3ad2d0eac7f08..82e7cb3cff4246592d762cce86323f2b72de92e4 100644
+--- a/lib/rules/namespace.js
++++ b/lib/rules/namespace.js
+@@ -86,7 +86,7 @@ module.exports = {
+ 
+         // same as above, but does not add names to local map
+         ExportNamespaceSpecifier: function () {function ExportNamespaceSpecifier(namespace) {
+-            var declaration = (0, _importDeclaration2['default'])(context);
++            var declaration = (0, _importDeclaration2['default'])(context, namespace);
+ 
+             var imports = _ExportMap2['default'].get(declaration.source.value, context);
+             if (imports == null) {return null;}
+diff --git a/lib/rules/newline-after-import.js b/lib/rules/newline-after-import.js
+index 6cc15686464a17803a0b976c35b99627cdbfabee..520eec6d9a375527ab72c459960fe4416c046c17 100644
+--- a/lib/rules/newline-after-import.js
++++ b/lib/rules/newline-after-import.js
+@@ -194,7 +194,7 @@ module.exports = {
+           }return CallExpression;}(),
+         'Program:exit': function () {function ProgramExit() {
+             log('exit processing for', context.getPhysicalFilename ? context.getPhysicalFilename() : context.getFilename());
+-            var scopeBody = getScopeBody(context.getScope());
++            var scopeBody = getScopeBody(context.getSourceCode().getScope(node));
+             log('got scope:', scopeBody);
+ 
+             requireCalls.forEach(function (node, index) {
+diff --git a/lib/rules/no-amd.js b/lib/rules/no-amd.js
+index 7ac108bf812ca4f78bfa6fe5ae8b9cf38e2ff497..346c3105dc70f72c4d76fcc6b96b946d1d4ec6d5 100644
+--- a/lib/rules/no-amd.js
++++ b/lib/rules/no-amd.js
+@@ -23,7 +23,7 @@ module.exports = {
+   create: function () {function create(context) {
+       return {
+         CallExpression: function () {function CallExpression(node) {
+-            if (context.getScope().type !== 'module') {return;}
++            if (context.getSourceCode().getScope(node).type !== 'module') {return;}
+ 
+             if (node.callee.type !== 'Identifier') {return;}
+             if (node.callee.name !== 'require' && node.callee.name !== 'define') {return;}
+diff --git a/lib/rules/no-commonjs.js b/lib/rules/no-commonjs.js
+index befeff0026d61d3ac1e6bbcea29f5c471dc1d353..e91c5ed34e968d5867e884ea800e166cda345aef 100644
+--- a/lib/rules/no-commonjs.js
++++ b/lib/rules/no-commonjs.js
+@@ -107,7 +107,7 @@ module.exports = {
+ 
+             // exports.
+             if (node.object.name === 'exports') {
+-              var isInScope = context.getScope().
++              var isInScope = context.getSourceCode().getScope(node).
+               variables.
+               some(function (variable) {return variable.name === 'exports';});
+               if (!isInScope) {
+@@ -117,7 +117,7 @@ module.exports = {
+ 
+           }return MemberExpression;}(),
+         CallExpression: function () {function CallExpression(call) {
+-            if (!validateScope(context.getScope())) {return;}
++            if (!validateScope(context.getSourceCode().getScope(call))) {return;}
+ 
+             if (call.callee.type !== 'Identifier') {return;}
+             if (call.callee.name !== 'require') {return;}
+diff --git a/lib/rules/no-mutable-exports.js b/lib/rules/no-mutable-exports.js
+index 40bd1b4cfa95d41732bb13bba0ed1969a91cc7ff..8a25abfbfadb299204b36a6cbf283259bcc2e790 100644
+--- a/lib/rules/no-mutable-exports.js
++++ b/lib/rules/no-mutable-exports.js
+@@ -32,7 +32,7 @@ module.exports = {
+       }
+ 
+       function handleExportDefault(node) {
+-        var scope = context.getScope();
++        var scope = context.getSourceCode().getScope(node);
+ 
+         if (node.declaration.name) {
+           checkDeclarationsInScope(scope, node.declaration.name);
+@@ -40,7 +40,7 @@ module.exports = {
+       }
+ 
+       function handleExportNamed(node) {
+-        var scope = context.getScope();
++        var scope = context.getSourceCode().getScope(node);
+ 
+         if (node.declaration) {
+           checkDeclaration(node.declaration);
+diff --git a/lib/rules/no-named-as-default-member.js b/lib/rules/no-named-as-default-member.js
+index 0c15051e027ad7d1d45f1b51c20be1c000b0af01..5b3d6ba415511b7f9f83a52e1acfebe5a1045a7b 100644
+--- a/lib/rules/no-named-as-default-member.js
++++ b/lib/rules/no-named-as-default-member.js
+@@ -35,7 +35,7 @@ module.exports = {
+ 
+       return {
+         ImportDefaultSpecifier: function () {function ImportDefaultSpecifier(node) {
+-            var declaration = (0, _importDeclaration2['default'])(context);
++            var declaration = (0, _importDeclaration2['default'])(context, node);
+             var exportMap = _ExportMap2['default'].get(declaration.source.value, context);
+             if (exportMap == null) {return;}
+ 
+diff --git a/lib/rules/no-named-as-default.js b/lib/rules/no-named-as-default.js
+index 63378a33a1c7da004c57a524cec1a1cddf23e210..c81b1f93b11628676158b79f1c4015911943cc7d 100644
+--- a/lib/rules/no-named-as-default.js
++++ b/lib/rules/no-named-as-default.js
+@@ -18,7 +18,7 @@ module.exports = {
+         // #566: default is a valid specifier
+         if (defaultSpecifier[nameKey].name === 'default') {return;}
+ 
+-        var declaration = (0, _importDeclaration2['default'])(context);
++        var declaration = (0, _importDeclaration2['default'])(context, defaultSpecifier);
+ 
+         var imports = _ExportMap2['default'].get(declaration.source.value, context);
+         if (imports == null) {return;}
+diff --git a/lib/rules/no-namespace.js b/lib/rules/no-namespace.js
+index 2b0c783adea788101b779b17f977bbcb582cfd3f..a7f7b202ac7c4a342febef2a993586c4cc84fc7a 100644
+--- a/lib/rules/no-namespace.js
++++ b/lib/rules/no-namespace.js
+@@ -43,7 +43,7 @@ var _docsUrl = require('../docsUrl');var _docsUrl2 = _interopRequireDefault(_doc
+               return;
+             }
+ 
+-            var scopeVariables = context.getScope().variables;
++            var scopeVariables = context.getSourceCode().getScope(node).variables;
+             var namespaceVariable = scopeVariables.find(function (variable) {return variable.defs[0].node === node;});
+             var namespaceReferences = namespaceVariable.references;
+             var namespaceIdentifiers = namespaceReferences.map(function (reference) {return reference.identifier;});
+diff --git a/package.json b/package.json
+index 5c0af48543483a21791fa23a4a583071d3551772..5deeac3d0accc3878ef0fc93dfb52a8ca7c46e84 100644
+--- a/package.json
++++ b/package.json
+@@ -72,7 +72,7 @@
+     "chai": "^4.3.10",
+     "cross-env": "^4.0.0",
+     "escope": "^3.6.0",
+-    "eslint": "^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8",
++    "eslint": "^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8 || ^9",
+     "eslint-doc-generator": "^1.6.1",
+     "eslint-import-resolver-node": "file:./resolvers/node",
+     "eslint-import-resolver-typescript": "^1.0.2 || ^1.1.1",

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) {

plugins/adblocker/back.js

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

plugins/adblocker/blocker.js

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

plugins/adblocker/config.js

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

plugins/adblocker/inject.js

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

plugins/adblocker/menu.js

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

plugins/adblocker/preload.js

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

plugins/audio-compressor/front.js

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

plugins/blur-nav-bar/back.js

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

plugins/blur-nav-bar/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.js

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

plugins/captions-selector/back.js

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

plugins/captions-selector/config.js

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

plugins/captions-selector/front.js

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

plugins/captions-selector/menu.js

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

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

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

plugins/crossfade/back.js

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

plugins/crossfade/config.js

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

plugins/crossfade/fader.js

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

plugins/crossfade/front.js

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

plugins/crossfade/menu.js

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

plugins/disable-autoplay/front.js

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

plugins/discord/back.js

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

plugins/discord/menu.js

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

plugins/downloader/back.js

@@ -1,519 +0,0 @@
-const {
-  existsSync,
-  mkdirSync,
-  createWriteStream,
-  writeFileSync,
-} = require('fs');
-const { join } = require('path');
-
-const { fetchFromGenius } = require('../lyrics-genius/back');
-const { isEnabled } = require('../../config/plugins');
-const { getImage, cleanupName } = require('../../providers/song-info');
-const { injectCSS } = require('../utils');
-const { cache } = require("../../providers/decorators")
-const {
-  presets,
-  cropMaxWidth,
-  getFolder,
-  setBadge,
-  sendFeedback: sendFeedback_,
-} = require('./utils');
-
-const { ipcMain, app, dialog } = require('electron');
-const is = require('electron-is');
-const { Innertube, UniversalCache, Utils, ClientType } = require('youtubei.js');
-const ytpl = require('ytpl'); // REPLACE with youtubei getplaylist https://github.com/LuanRT/YouTube.js#getplaylistid
-
-const filenamify = require('filenamify');
-const ID3Writer = require('browser-id3-writer');
-const { randomBytes } = require('crypto');
-const Mutex = require('async-mutex').Mutex;
-const ffmpeg = require('@ffmpeg/ffmpeg').createFFmpeg({
-  log: false,
-  logger: () => {}, // console.log,
-  progress: () => {}, // console.log,
-});
-const ffmpegMutex = new Mutex();
-
-const config = require('./config');
-
-/** @type {Innertube} */
-let yt;
-let win;
-let playingUrl = undefined;
-
-const sendError = (error, source) => {
-  win.setProgressBar(-1); // close progress bar
-  setBadge(0); // close badge
-  sendFeedback_(win); // reset feedback
-
-  const songNameMessage = source ? `\nin ${source}` : '';
-  const cause = error.cause ? `\n\n${error.cause.toString()}` : '';
-  const message = `${error.toString()}${songNameMessage}${cause}`;
-
-  console.error(message);
-  dialog.showMessageBox({
-    type: 'info',
-    buttons: ['OK'],
-    title: 'Error in download!',
-    message: 'Argh! Apologies, download failed…',
-    detail: message,
-  });
-};
-
-module.exports = async (win_) => {
-  win = win_;
-  injectCSS(win.webContents, join(__dirname, 'style.css'));
-
-  yt = await Innertube.create({
-    cache: new UniversalCache(false),
-    generate_session_locally: true,
-  });
-  ipcMain.on('download-song', (_, url) => downloadSong(url));
-  ipcMain.on('video-src-changed', async (_, data) => {
-    playingUrl =
-      JSON.parse(data)?.microformat?.microformatDataRenderer?.urlCanonical;
-  });
-  ipcMain.on('download-playlist-request', async (_event, url) =>
-    downloadPlaylist(url),
-  );
-};
-
-module.exports.downloadSong = downloadSong;
-module.exports.downloadPlaylist = downloadPlaylist;
-
-async function downloadSong(
-  url,
-  playlistFolder = undefined,
-  trackId = undefined,
-  increasePlaylistProgress = () => {},
-) {
-  let resolvedName = undefined;
-  try {
-    await downloadSongUnsafe(
-      url,
-      name=>resolvedName=name,
-      playlistFolder,
-      trackId,
-      increasePlaylistProgress,
-    );
-  } catch (error) {
-    sendError(error, resolvedName || url);
-  }
-}
-
-async function downloadSongUnsafe(
-  url,
-  setName,
-  playlistFolder = undefined,
-  trackId = undefined,
-  increasePlaylistProgress = () => {},
-) {
-  const sendFeedback = (message, progress) => {
-    if (!playlistFolder) {
-      sendFeedback_(win, message);
-      if (!isNaN(progress)) {
-        win.setProgressBar(progress);
-      }
-    }
-  };
-
-  sendFeedback('Downloading...', 2);
-
-  const id = getVideoId(url);
-  let info = await yt.music.getInfo(id);
-
-  if (!info) {
-    throw new Error('Video not found');
-  }
-
-  const metadata = getMetadata(info);
-  if (metadata.album === 'N/A') metadata.album = '';
-  metadata.trackId = trackId;
-
-  const dir =
-    playlistFolder || config.get('downloadFolder') || app.getPath('downloads');
-  const name = `${metadata.artist ? `${metadata.artist} - ` : ''}${
-    metadata.title
-  }`;
-  setName(name);
-
-	let playabilityStatus = info.playability_status;
-	let bypassedResult = null;
-	if (playabilityStatus.status === "LOGIN_REQUIRED") {
-		// try to bypass the age restriction
-		bypassedResult = await getAndroidTvInfo(id);
-		playabilityStatus = bypassedResult.playability_status;
-
-		if (playabilityStatus.status === "LOGIN_REQUIRED") {
-			throw new Error(
-				`[${playabilityStatus.status}] ${playabilityStatus.reason}`,
-			);
-		}
-
-		info = bypassedResult;
-	}
-
-	if (playabilityStatus.status === "UNPLAYABLE") {
-		/**
-		 * @typedef {import('youtubei.js/dist/src/parser/classes/PlayerErrorMessage').default} PlayerErrorMessage
-		 * @type {PlayerErrorMessage}
-		 */
-		const errorScreen = playabilityStatus.error_screen;
-		throw new Error(
-			`[${playabilityStatus.status}] ${errorScreen.reason.text}: ${errorScreen.subreason.text}`,
-		);
-	}
-
-  const extension = presets[config.get('preset')]?.extension || 'mp3';
-
-  const filename = filenamify(`${name}.${extension}`, {
-    replacement: '_',
-    maxLength: 255,
-  });
-  const filePath = join(dir, filename);
-
-  if (config.get('skipExisting') && existsSync(filePath)) {
-    sendFeedback(null, -1);
-    return;
-  }
-
-  const download_options = {
-    type: 'audio', // audio, video or video+audio
-    quality: 'best', // best, bestefficiency, 144p, 240p, 480p, 720p and so on.
-    format: 'any', // media container format
-  };
-
-  const format = info.chooseFormat(download_options);
-  const stream = await info.download(download_options);
-
-  console.info(
-    `Downloading ${metadata.artist} - ${metadata.title} [${metadata.id}]`,
-  );
-
-  const iterableStream = Utils.streamToIterable(stream);
-
-  if (!existsSync(dir)) {
-    mkdirSync(dir);
-  }
-
-  if (!presets[config.get('preset')]) {
-    const fileBuffer = await iterableStreamToMP3(
-      iterableStream,
-      metadata,
-      format.content_length,
-      sendFeedback,
-      increasePlaylistProgress,
-    );
-    writeFileSync(filePath, await writeID3(fileBuffer, metadata, sendFeedback));
-  } else {
-    const file = createWriteStream(filePath);
-    let downloaded = 0;
-    const total = format.content_length;
-
-    for await (const chunk of iterableStream) {
-      downloaded += chunk.length;
-      const ratio = downloaded / total;
-      const progress = Math.floor(ratio * 100);
-      sendFeedback(`Download: ${progress}%`, ratio);
-      increasePlaylistProgress(ratio);
-      file.write(chunk);
-    }
-    await ffmpegWriteTags(
-      filePath,
-      metadata,
-      presets[config.get('preset')]?.ffmpegArgs,
-    );
-    sendFeedback(null, -1);
-  }
-
-  sendFeedback(null, -1);
-  console.info(`Done: "${filePath}"`);
-}
-
-async function iterableStreamToMP3(
-  stream,
-  metadata,
-  content_length,
-  sendFeedback,
-  increasePlaylistProgress = () => {},
-) {
-  const chunks = [];
-  let downloaded = 0;
-  const total = content_length;
-  for await (const chunk of stream) {
-    downloaded += chunk.length;
-    chunks.push(chunk);
-    const ratio = downloaded / total;
-    const progress = Math.floor(ratio * 100);
-    sendFeedback(`Download: ${progress}%`, ratio);
-    // 15% for download, 85% for conversion
-    // This is a very rough estimate, trying to make the progress bar look nice
-    increasePlaylistProgress(ratio * 0.15);
-  }
-  sendFeedback('Loading…', 2); // indefinite progress bar after download
-
-  const buffer = Buffer.concat(chunks);
-  const safeVideoName = randomBytes(32).toString('hex');
-  const releaseFFmpegMutex = await ffmpegMutex.acquire();
-
-  try {
-    if (!ffmpeg.isLoaded()) {
-      await ffmpeg.load();
-    }
-
-    sendFeedback('Preparing file…');
-    ffmpeg.FS('writeFile', safeVideoName, buffer);
-
-    sendFeedback('Converting…');
-
-    ffmpeg.setProgress(({ ratio }) => {
-      sendFeedback(`Converting: ${Math.floor(ratio * 100)}%`, ratio);
-      increasePlaylistProgress(0.15 + ratio * 0.85);
-    });
-
-    await ffmpeg.run(
-      '-i',
-      safeVideoName,
-      ...getFFmpegMetadataArgs(metadata),
-      `${safeVideoName}.mp3`,
-    );
-
-    sendFeedback('Saving…');
-
-    return ffmpeg.FS('readFile', `${safeVideoName}.mp3`);
-  } catch (e) {
-    sendError(e, safeVideoName);
-  } finally {
-    releaseFFmpegMutex();
-  }
-}
-
-const getCoverBuffer = cache(async (url) => {
-  const nativeImage = cropMaxWidth(await getImage(url));
-  return nativeImage && !nativeImage.isEmpty() ? nativeImage.toPNG() : null;
-});
-
-async function writeID3(buffer, metadata, sendFeedback) {
-  try {
-    sendFeedback('Writing ID3 tags...');
-
-    const coverBuffer = await getCoverBuffer(metadata.image);
-
-    const writer = new ID3Writer(buffer);
-
-    // Create the metadata tags
-    writer.setFrame('TIT2', metadata.title).setFrame('TPE1', [metadata.artist]);
-    if (metadata.album) {
-      writer.setFrame('TALB', metadata.album);
-    }
-    if (coverBuffer) {
-      writer.setFrame('APIC', {
-        type: 3,
-        data: coverBuffer,
-        description: '',
-      });
-    }
-    if (isEnabled('lyrics-genius')) {
-      const lyrics = await fetchFromGenius(metadata);
-      if (lyrics) {
-        writer.setFrame('USLT', {
-          description: '',
-          lyrics: lyrics,
-        });
-      }
-    }
-    if (metadata.trackId) {
-      writer.setFrame('TRCK', metadata.trackId);
-    }
-    writer.addTag();
-    return Buffer.from(writer.arrayBuffer);
-  } catch (e) {
-    sendError(e, `${metadata.artist} - ${metadata.title}`);
-  }
-}
-
-async function downloadPlaylist(givenUrl) {
-  try {
-    givenUrl = new URL(givenUrl);
-  } catch {
-    givenUrl = undefined;
-  }
-  const playlistId =
-    getPlaylistID(givenUrl) ||
-    getPlaylistID(new URL(win.webContents.getURL())) ||
-    getPlaylistID(new URL(playingUrl));
-
-  if (!playlistId) {
-    sendError(new Error('No playlist ID found'));
-    return;
-  }
-
-  const sendFeedback = (message) => sendFeedback_(win, message);
-
-  console.log(`trying to get playlist ID: '${playlistId}'`);
-  sendFeedback('Getting playlist info…');
-  let playlist;
-  try {
-    playlist = await ytpl(playlistId, {
-      limit: config.get('playlistMaxItems') || Infinity,
-    });
-  } catch (e) {
-    sendError(
-      `Error getting playlist info: make sure it isn\'t a private or "Mixed for you" playlist\n\n${e}`,
-    );
-    return;
-  }
-  if (playlist.items.length === 0) sendError(new Error('Playlist is empty'));
-  if (playlist.items.length === 1) {
-    sendFeedback('Playlist has only one item, downloading it directly');
-    await downloadSong(playlist.items[0].url);
-    return;
-  }
-  const isAlbum = playlist.title.startsWith('Album - ');
-  if (isAlbum) {
-    playlist.title = playlist.title.slice(8);
-  }
-  const safePlaylistTitle = filenamify(playlist.title, { replacement: ' ' });
-
-  const folder = getFolder(config.get('downloadFolder'));
-  const playlistFolder = join(folder, safePlaylistTitle);
-  if (existsSync(playlistFolder)) {
-    if (!config.get('skipExisting')) {
-      sendError(new Error(`The folder ${playlistFolder} already exists`));
-      return;
-    }
-  } else {
-    mkdirSync(playlistFolder, { recursive: true });
-  }
-
-  dialog.showMessageBox({
-    type: 'info',
-    buttons: ['OK'],
-    title: 'Started Download',
-    message: `Downloading Playlist "${playlist.title}"`,
-    detail: `(${playlist.items.length} songs)`,
-  });
-
-  if (is.dev()) {
-    console.log(
-      `Downloading playlist "${playlist.title}" - ${playlist.items.length} songs (${playlistId})`,
-    );
-  }
-
-  win.setProgressBar(2); // starts with indefinite bar
-
-  setBadge(playlist.items.length);
-
-  let counter = 1;
-
-  const progressStep = 1 / playlist.items.length;
-
-  const increaseProgress = (itemPercentage) => {
-    const currentProgress = (counter - 1) / playlist.items.length;
-    const newProgress = currentProgress + progressStep * itemPercentage;
-    win.setProgressBar(newProgress);
-  };
-
-  try {
-    for (const song of playlist.items) {
-      sendFeedback(`Downloading ${counter}/${playlist.items.length}...`);
-      const trackId = isAlbum ? counter : undefined;
-      await downloadSong(
-        song.url,
-        playlistFolder,
-        trackId,
-        increaseProgress,
-      ).catch((e) =>
-        sendError(
-          `Error downloading "${song.author.name} - ${song.title}":\n  ${e}`,
-        ),
-      );
-
-      win.setProgressBar(counter / playlist.items.length);
-      setBadge(playlist.items.length - counter);
-      counter++;
-    }
-  } catch (e) {
-    sendError(e);
-  } finally {
-    win.setProgressBar(-1); // close progress bar
-    setBadge(0); // close badge counter
-    sendFeedback(); // clear feedback
-  }
-}
-
-async function ffmpegWriteTags(filePath, metadata, ffmpegArgs = []) {
-  const releaseFFmpegMutex = await ffmpegMutex.acquire();
-
-  try {
-    if (!ffmpeg.isLoaded()) {
-      await ffmpeg.load();
-    }
-
-    await ffmpeg.run(
-      '-i',
-      filePath,
-      ...getFFmpegMetadataArgs(metadata),
-      ...ffmpegArgs,
-      filePath,
-    );
-  } catch (e) {
-    sendError(e);
-  } finally {
-    releaseFFmpegMutex();
-  }
-}
-
-function getFFmpegMetadataArgs(metadata) {
-  if (!metadata) {
-    return;
-  }
-
-  return [
-    ...(metadata.title ? ['-metadata', `title=${metadata.title}`] : []),
-    ...(metadata.artist ? ['-metadata', `artist=${metadata.artist}`] : []),
-    ...(metadata.album ? ['-metadata', `album=${metadata.album}`] : []),
-    ...(metadata.trackId ? ['-metadata', `track=${metadata.trackId}`] : []),
-  ];
-}
-
-// Playlist radio modifier needs to be cut from playlist ID
-const INVALID_PLAYLIST_MODIFIER = 'RDAMPL';
-
-const getPlaylistID = (aURL) => {
-  const result =
-    aURL?.searchParams.get('list') || aURL?.searchParams.get('playlist');
-  if (result?.startsWith(INVALID_PLAYLIST_MODIFIER)) {
-    return result.slice(INVALID_PLAYLIST_MODIFIER.length);
-  }
-  return result;
-};
-
-const getVideoId = (url) => {
-  if (typeof url === 'string') {
-    url = new URL(url);
-  }
-  return url.searchParams.get('v');
-};
-
-const getMetadata = (info) => ({
-  id: info.basic_info.id,
-  title: cleanupName(info.basic_info.title),
-  artist: cleanupName(info.basic_info.author),
-  album: info.player_overlays?.browser_media_session?.album?.text,
-  image: info.basic_info.thumbnail?.find((t) => !t.url.endsWith('.webp'))?.url,
-});
-
-// This is used to bypass age restrictions
-const getAndroidTvInfo = async (id) => {
-  const innertube = await Innertube.create({
-    clientType: ClientType.TV_EMBEDDED,
-    generate_session_locally: true,
-    retrieve_player: true,
-  });
-  const info = await innertube.getBasicInfo(id, 'TV_EMBEDDED');
-  // getInfo 404s with the bypass, so we use getBasicInfo instead
-  // that's fine as we only need the streaming data
-  return info;
-}

plugins/downloader/config.js

@@ -1,3 +0,0 @@
-const { PluginConfig } = require('../../config/dynamic');
-const config = new PluginConfig('downloader');
-module.exports = { ...config };

plugins/downloader/front.js

@@ -1,69 +0,0 @@
-const { ipcRenderer } = require("electron");
-
-const { defaultConfig } = require("../../config");
-const { getSongMenu } = require("../../providers/dom-elements");
-const { ElementFromFile, templatePath } = require("../utils");
-
-let menu = null;
-let progress = null;
-const downloadButton = ElementFromFile(
-	templatePath(__dirname, "download.html")
-);
-
-let doneFirstLoad = false;
-
-const menuObserver = new MutationObserver(() => {
-	if (!menu) {
-		menu = getSongMenu();
-		if (!menu) return;
-	}
-	if (menu.contains(downloadButton)) return;
-	const menuUrl = document.querySelector('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: () => {
-global.download = () => {
-	let videoUrl = getSongMenu()
-		// selector of first button which is always "Start Radio"
-		?.querySelector('ytmusic-menu-navigation-item-renderer[tabindex="0"] #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 = global.songInfo.url || window.location.href;
-	}
-
-	ipcRenderer.send('download-song', videoUrl);
-};
-
-module.exports = () => {
-	document.addEventListener('apiLoaded', () => {
-		menuObserver.observe(document.querySelector('ytmusic-popup-container'), {
-			childList: true,
-			subtree: true,
-		});
-	}, { once: true, passive: true })
-
-	ipcRenderer.on('downloader-feedback', (_, feedback) => {
-		if (!progress) {
-			console.warn("Cannot update progress");
-		} else {
-			progress.innerHTML = feedback || "Download";
-		}
-	});
-};

plugins/downloader/menu.js

@@ -1,45 +0,0 @@
-const { dialog } = require("electron");
-
-const { downloadPlaylist } = require("./back");
-const { defaultMenuDownloadLabel, getFolder, presets } = require("./utils");
-const config = require("./config");
-
-module.exports = () => {
-	return [
-		{
-			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(presets).map((preset) => ({
-				label: preset,
-				type: "radio",
-				checked: config.get("preset") === preset,
-				click: () => {
-					config.set("preset", preset);
-				},
-			})),
-		},
-		{
-			label: "Skip existing files",
-			type: "checkbox",
-			checked: config.get("skipExisting"),
-			click: (item) => {
-				config.set("skipExisting", item.checked);
-			},
-		},
-	];
-};

plugins/downloader/style.css

@@ -1,21 +0,0 @@
-.menu-item {
-	display: var(--ytmusic-menu-item_-_display);
-	height: var(--ytmusic-menu-item_-_height);
-	align-items: var(--ytmusic-menu-item_-_align-items);
-	padding: var(--ytmusic-menu-item_-_padding);
-	cursor: pointer;
-}
-
-.menu-item > .yt-simple-endpoint:hover {
-	background-color: var(--ytmusic-menu-item-hover-background-color);
-}
-
-.menu-icon {
-	flex: var(--ytmusic-menu-item-icon_-_flex);
-	margin: var(--ytmusic-menu-item-icon_-_margin);
-	fill: var(--ytmusic-menu-item-icon_-_fill);
-	stroke: var(--iron-icon-stroke-color, none);
-	width: var(--iron-icon-width, 24px);
-	height: var(--iron-icon-height, 24px);
-	animation: var(--iron-icon_-_animation);
-}

plugins/downloader/templates/download.html

@@ -1,45 +0,0 @@
-<div
-	class="style-scope menu-item ytmusic-menu-popup-renderer"
-	role="option"
-	tabindex="-1"
-	aria-disabled="false"
-	aria-selected="false"
-	onclick="download()"
->
-	<div
-		id="navigation-endpoint"
-		class="yt-simple-endpoint style-scope ytmusic-menu-navigation-item-renderer"
-		tabindex="-1"
-	>
-		<div
-			class="icon menu-icon style-scope ytmusic-menu-navigation-item-renderer"
-		>
-			<svg
-				viewBox="0 0 24 24"
-				preserveAspectRatio="xMidYMid meet"
-				focusable="false"
-				class="style-scope yt-icon"
-				style="pointer-events: none; display: block; width: 100%; height: 100%"
-			>
-				<g class="style-scope yt-icon">
-					<path
-						d="M25.462,19.105v6.848H4.515v-6.848H0.489v8.861c0,1.111,0.9,2.012,2.016,2.012h24.967c1.115,0,2.016-0.9,2.016-2.012v-8.861H25.462z"
-						class="style-scope yt-icon"
-						fill="#aaaaaa"
-					/>
-					<path
-						d="M14.62,18.426l-5.764-6.965c0,0-0.877-0.828,0.074-0.828s3.248,0,3.248,0s0-0.557,0-1.416c0-2.449,0-6.906,0-8.723c0,0-0.129-0.494,0.615-0.494c0.75,0,4.035,0,4.572,0c0.536,0,0.524,0.416,0.524,0.416c0,1.762,0,6.373,0,8.742c0,0.768,0,1.266,0,1.266s1.842,0,2.998,0c1.154,0,0.285,0.867,0.285,0.867s-4.904,6.51-5.588,7.193C15.092,18.979,14.62,18.426,14.62,18.426z"
-						class="style-scope yt-icon"
-						fill="#aaaaaa"
-					/>
-				</g>
-			</svg>
-		</div>
-		<div
-			class="text style-scope ytmusic-menu-navigation-item-renderer"
-			id="ytmcustom-download"
-		>
-			Download
-		</div>
-	</div>
-</div>

plugins/downloader/utils.js

@@ -1,38 +0,0 @@
-const { app } = require("electron");
-const is = require('electron-is');
-
-module.exports.getFolder = customFolder => customFolder || app.getPath("downloads");
-module.exports.defaultMenuDownloadLabel = "Download playlist";
-
-module.exports.sendFeedback = (win, message) => {
-	win.webContents.send("downloader-feedback", message);
-};
-
-module.exports.cropMaxWidth = (image) => {
-	const imageSize = image.getSize();
-	// standart youtube artwork width with margins from both sides is 280 + 720 + 280
-	if (imageSize.width === 1280 && imageSize.height === 720) {
-		return image.crop({
-			x: 280,
-			y: 0,
-			width: 720,
-			height: 720
-		});
-	}
-	return image;
-}
-
-// Presets for FFmpeg
-module.exports.presets = {
-	"None (defaults to mp3)": undefined,
-	opus: {
-		extension: "opus",
-		ffmpegArgs: ["-acodec", "libopus"],
-	},
-};
-
-module.exports.setBadge = n => {
-	if (is.linux() || is.macOS()) {
-		app.setBadgeCount(n);
-	}
-}

plugins/exponential-volume/front.js

@@ -1,47 +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();
-	const { get, set } = Object.getOwnPropertyDescriptor(
-		HTMLMediaElement.prototype,
-		"volume"
-	);
-	Object.defineProperty(HTMLMediaElement.prototype, "volume", {
-		get() {
-			const lowVolume = get.call(this);
-			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);
-			const storedDeviation = Math.abs(
-				storedOriginalVolume - calculatedOriginalVolume
-			);
-
-			const originalVolume =
-				storedDeviation < 0.01
-					? storedOriginalVolume
-					: calculatedOriginalVolume;
-			return originalVolume;
-		},
-		set(originalVolume) {
-			const lowVolume = originalVolume ** EXPONENT;
-			storedOriginalVolumes.set(this, originalVolume);
-			set.call(this, lowVolume);
-		},
-	});
-};
-
-module.exports = () =>
-	document.addEventListener("apiLoaded", exponentialVolume, {
-		once: true,
-		passive: true,
-	});

plugins/in-app-menu/back.js

@@ -1,23 +0,0 @@
-const path = require("path");
-
-const electronLocalshortcut = require("electron-localshortcut");
-
-const { injectCSS } = require("../utils");
-
-const { setupTitlebar, attachTitlebarToWindow } = require('custom-electron-titlebar/main');
-setupTitlebar();
-
-//tracks menu visibility
-
-module.exports = (win) => {
-	// css for custom scrollbar + disable drag area(was causing bugs)
-	injectCSS(win.webContents, path.join(__dirname, "style.css"));
-
-	win.once("ready-to-show", () => {
-		attachTitlebarToWindow(win);
-
-		electronLocalshortcut.register(win, "`", () => {
-			win.webContents.send("toggleMenu");
-		});
-	});
-};

plugins/in-app-menu/front.js

@@ -1,74 +0,0 @@
-const { ipcRenderer } = require("electron");
-const config = require("../../config");
-const { Titlebar, Color } = require("custom-electron-titlebar");
-const { isEnabled } = require("../../config/plugins");
-function $(selector) { return document.querySelector(selector); }
-
-module.exports = (options) => {
-	let visible = () => !!$('.cet-menubar').firstChild;
-	const bar = new Titlebar({
-		icon: "https://cdn-icons-png.flaticon.com/512/5358/5358672.png",
-		backgroundColor: Color.fromHex("#050505"),
-		itemBackgroundColor: Color.fromHex("#1d1d1d"),
-		svgColor: Color.WHITE,
-		menu: config.get("options.hideMenu") ? null : undefined
-	});
-	bar.updateTitle(" ");
-	document.title = "Youtube Music";
-
-	const toggleMenu = () => {
-		if (visible()) {
-			bar.updateMenu(null);
-		} else {
-			bar.refreshMenu();
-		}
-	};
-
-	$('.cet-window-icon').addEventListener('click', toggleMenu);
-	ipcRenderer.on("toggleMenu", toggleMenu);
-
-	ipcRenderer.on("refreshMenu", () => {
-		if (visible()) {
-			bar.refreshMenu();
-		}
-	});
-
-	if (isEnabled("picture-in-picture")) {
-		ipcRenderer.on("pip-toggle", (_, pipEnabled) => {
-			bar.refreshMenu();
-		});
-	}
-
-	// 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', () => {
-		setNavbarMargin();
-		const playPageObserver = new MutationObserver(setNavbarMargin);
-		playPageObserver.observe($('ytmusic-app-layout'), { attributeFilter: ['player-page-open_', 'playerPageOpen_'] })
-		setupSearchOpenObserver();
-		setupMenuOpenObserver();
-	}, { once: true, passive: true })
-};
-
-function setupSearchOpenObserver() {
-	const searchOpenObserver = new MutationObserver(mutations => {
-		$('#nav-bar-background').style.webkitAppRegion =
-			mutations[0].target.opened ? 'no-drag' : 'drag';
-	});
-	searchOpenObserver.observe($('ytmusic-search-box'), { attributeFilter: ["opened"] })
-}
-
-function setupMenuOpenObserver() {
-	const menuOpenObserver = new MutationObserver(mutations => {
-		$('#nav-bar-background').style.webkitAppRegion =
-			Array.from($('.cet-menubar').childNodes).some(c => c.classList.contains('open')) ?
-				'no-drag' : 'drag';
-	});
-	menuOpenObserver.observe($('.cet-menubar'), { subtree: true, attributeFilter: ["class"] })
-}
-
-function setNavbarMargin() {
-	$('#nav-bar-background').style.right =
-		$('ytmusic-app-layout').playerPageOpen_ ?
-			'0px' :
-			'12px';
-}

plugins/in-app-menu/style.css

@@ -1,111 +0,0 @@
-/* increase font size for menu and menuItems */
-.titlebar,
-.menubar-menu-container .action-label {
-	font-size: 14px !important;
-}
-
-/* fixes nav-bar-background opacity bug, reposition it, and allows clicking scrollbar through it */
-#nav-bar-background {
-	opacity: 1 !important;
-	pointer-events: none !important;
-	top: 30px !important;
-	height: 75px !important;
-}
-
-/* fix top gap between nav-bar and browse-page */
-#browse-page {
-	padding-top: 0 !important;
-}
-
-/* fix navbar hiding library items */
-ytmusic-section-list-renderer[page-type="MUSIC_PAGE_TYPE_LIBRARY_CONTENT_LANDING_PAGE"],
-ytmusic-section-list-renderer[page-type="MUSIC_PAGE_TYPE_PRIVATELY_OWNED_CONTENT_LANDING_PAGE"] {
-	top: 50px;
-    position: relative;
-}
-
-/* remove window dragging for nav bar (conflict with titlebar drag) */
-ytmusic-nav-bar,
-.tab-titleiron-icon,
-ytmusic-pivot-bar-item-renderer {
-	-webkit-app-region: unset !important;
-}
-
-/* move up item selection renderers */
-ytmusic-item-section-renderer.stuck #header.ytmusic-item-section-renderer,
-ytmusic-tabs.stuck {
-	top: calc(var(--ytmusic-nav-bar-height) - 15px) !important;
-}
-
-/* fix weird positioning in search screen*/
-ytmusic-header-renderer.ytmusic-search-page {
-	position: unset !important;
-}
-
-/* Move navBar downwards */
-ytmusic-nav-bar[slot="nav-bar"] {
-	top: 17px !important;
-}
-
-/* fix page progress bar position*/
-yt-page-navigation-progress,
-#progress.yt-page-navigation-progress {
-	top: 30px !important;
-}
-
-/* custom scrollbar */
-::-webkit-scrollbar {
-	width: 12px;
-	background-color: #030303;
-	border-radius: 100px;
-	-moz-border-radius: 100px;
-	-webkit-border-radius: 100px;
-}
-/* hover effect for both scrollbar area, and scrollbar 'thumb' */
-::-webkit-scrollbar:hover {
-	background-color: rgba(15, 15, 15, 0.699);
-}
-
-/* the scrollbar 'thumb' ...that marque oval shape in a scrollbar */
-::-webkit-scrollbar-thumb:vertical {
-	border: 2px solid rgba(0, 0, 0, 0);
-
-	background: #3a3a3a;
-	background-clip: padding-box;
-	border-radius: 100px;
-	-moz-border-radius: 100px;
-	-webkit-border-radius: 100px;
-}
-::-webkit-scrollbar-thumb:vertical:active {
-	background: #4d4c4c; /* some darker color when you click it */
-	border-radius: 100px;
-	-moz-border-radius: 100px;
-	-webkit-border-radius: 100px;
-}
-
-.cet-menubar-menu-container .cet-action-item {
-	background-color: inherit
-}
-
-/** hideMenu toggler **/
-.cet-window-icon {
-	-webkit-app-region: no-drag;
-}
-
-.cet-window-icon img {
-	-webkit-user-drag: none;
-    filter: invert(50%);
-}
-
-/** make navbar draggable **/
-#nav-bar-background {
-    -webkit-app-region: drag;
-}
-
-ytmusic-nav-bar input,
-ytmusic-nav-bar span,
-ytmusic-nav-bar [role="button"],
-ytmusic-nav-bar yt-icon,
-tp-yt-iron-dropdown {
-    -webkit-app-region: no-drag;
-}

plugins/last-fm/back.js

@@ -1,161 +0,0 @@
-const fetch = require('node-fetch');
-const md5 = require('md5');
-const { shell } = require('electron');
-const { setOptions } = require('../../config/plugins');
-const registerCallback = require('../../providers/song-info');
-const defaultConfig = require('../../config/defaults');
-
-const createFormData = params => {
-	// creates the body for in the post request
-	const formData = new URLSearchParams();
-	for (const key in params) {
-		formData.append(key, params[key]);
-	}
-	return formData;
-}
-const createQueryString = (params, api_sig) => {
-	// creates a querystring
-	const queryData = [];
-	params.api_sig = api_sig;
-	for (const key in params) {
-		queryData.push(`${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`);
-	}
-	return '?'+queryData.join('&');
-}
-
-const createApiSig = (params, secret) => { 
-	// this function creates the api signature, see: https://www.last.fm/api/authspec
-	const keys = [];
-	for (const key in params) {
-		keys.push(key);
-	}
-	keys.sort();
-	let sig = '';
-	for (const key of keys) {
-		if (String(key) === 'format')
-			continue
-		sig += `${key}${params[key]}`;
-	}
-	sig += secret;
-	sig = md5(sig);
-	return sig;
-}
-
-const createToken = async ({ api_key, api_root, secret }) => {
-	// creates and stores the auth token
-	const data = {
-		method: 'auth.gettoken',
-		api_key: api_key,
-		format: 'json'
-	};
-	const api_sig = createApiSig(data, secret);
-	let response = await fetch(`${api_root}${createQueryString(data, api_sig)}`);
-	response = await response.json();
-	return response?.token;
-}
-
-const authenticate = async config => {
-	// asks the user for authentication
-	config.token = await createToken(config);
-	setOptions('last-fm', config);
-	shell.openExternal(`https://www.last.fm/api/auth/?api_key=${config.api_key}&token=${config.token}`);
-	return config;
-}
-
-const getAndSetSessionKey = async config => {
-	// get and store the session key
-	const data = {
-		api_key: config.api_key,
-		format: 'json',
-		method: 'auth.getsession',
-		token: config.token,
-	};
-	const api_sig = createApiSig(data, config.secret);
-	let res = await fetch(`${config.api_root}${createQueryString(data, api_sig)}`);
-	res = await res.json();
-	if (res.error)
-		await authenticate(config);
-	config.session_key = res?.session?.key;
-	setOptions('last-fm', config);
-	return config;
-}
-
-const postSongDataToAPI = async (songInfo, config, data) => {
-	// this sends a post request to the api, and adds the common data
-	if (!config.session_key)
-		await getAndSetSessionKey(config);
-
-	const postData = {
-		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);
-	fetch('https://ws.audioscrobbler.com/2.0/', {method: 'POST', body: createFormData(postData)})
-		.catch(res => {
-			if (res.response.data.error == 9) {
-				// session key is invalid, so remove it from the config and reauthenticate
-				config.session_key = undefined;
-				setOptions('last-fm', config);
-				authenticate(config);
-			}
-		});
-}
-
-const addScrobble = (songInfo, config) => {
-	// this adds one scrobbled song to last.fm
-	const data = {
-		method: 'track.scrobble',
-		timestamp: ~~((Date.now() - songInfo.elapsedSeconds) / 1000),
-	};
-	postSongDataToAPI(songInfo, config, data);
-}
-
-const setNowPlaying = (songInfo, config) => {
-	// 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 = undefined;
-
-const lastfm = async (_win, config) => {
-	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 half way through, or has passed the 4 minute mark
-			const scrobbleTime = Math.min(Math.ceil(songInfo.songDuration / 2), 4 * 60);
-			if (scrobbleTime > songInfo.elapsedSeconds) {
-				// scrobble still needs to happen
-				const timeToWait = (scrobbleTime - songInfo.elapsedSeconds) * 1000;
-				scrobbleTimer = setTimeout(addScrobble, timeToWait, songInfo, config);
-			}
-		}
-	});
-}
-
-module.exports = lastfm;

plugins/lyrics-genius/back.js

@@ -1,117 +0,0 @@
-const { join } = require("path");
-
-const { ipcMain } = require("electron");
-const is = require("electron-is");
-const { convert } = require("html-to-text");
-const fetch = require("node-fetch");
-
-const { cleanupName } = require("../../providers/song-info");
-const { injectCSS } = require("../utils");
-let eastAsianChars = /\p{Script=Han}|\p{Script=Katakana}|\p{Script=Hiragana}|\p{Script=Hangul}|\p{Script=Han}/u;
-let revRomanized = false; 
-
-module.exports = async (win, options) => {
-	if(options.romanizedLyrics) {
-		revRomanized = true;
-	}
-	injectCSS(win.webContents, join(__dirname, "style.css"));
-
-	ipcMain.on("search-genius-lyrics", async (event, extractedSongInfo) => {
-		const metadata = JSON.parse(extractedSongInfo);
-		event.returnValue = await fetchFromGenius(metadata);
-	});
-};
-
-const toggleRomanized = () => {
-	revRomanized = !revRomanized;
-};
-
-const fetchFromGenius = async (metadata) => {
-	const songTitle = `${cleanupName(metadata.title)}`;
-	const songArtist = `${cleanupName(metadata.artist)}`;
-	let lyrics;
-
-	/* Uses Regex to test the title and artist first for said characters if romanization is enabled. Otherwise normal
-	Genius Lyrics behavior is observed.
-	*/
-	let hasAsianChars = false;
-	if (revRomanized && (eastAsianChars.test(songTitle) || eastAsianChars.test(songArtist))) {
-		lyrics = await getLyricsList(`${songArtist} ${songTitle} Romanized`);
-		hasAsianChars = true;
-	} else {
-		lyrics = await getLyricsList(`${songArtist} ${songTitle}`);
-	}
-
-	/* If the romanization toggle is on, and we did not detect any characters in the title or artist, we do a check
-	for characters in the lyrics themselves. If this check proves true, we search for Romanized lyrics.
-	*/
-	if(revRomanized && !hasAsianChars && eastAsianChars.test(lyrics)) {
-		lyrics = await getLyricsList(`${songArtist} ${songTitle} Romanized`);
-	}
-	return lyrics;
-};
-
-/**
- * Fetches a JSON of songs which is then parsed and passed into getLyrics to get the lyrical content of the first song 
- * @param {*} queryString 
- * @returns The lyrics of the first song found using the Genius-Lyrics API
- */
-const getLyricsList = async (queryString) => {
-	let response = await fetch(
-		`https://genius.com/api/search/multi?per_page=5&q=${encodeURIComponent(queryString)}`
-	);
-	if (!response.ok) {
-		return null;
-	}
-
-	/* Fetch the first URL with the api, giving a collection of song results.
-	Pick the first song, parsing the json given by the API.
-	*/
-	const info = await response.json();
-	let url = "";
-	try {
-		url = info.response.sections.filter((section) => section.type === "song")[0]
-			.hits[0].result.url;
-	} catch {
-		return null;
-	}
-	let lyrics = await getLyrics(url);
-	return lyrics;
-}
-
-/**
- *  
- * @param {*} url 
- * @returns The lyrics of the song URL provided, null if none
- */
-const getLyrics = async (url) => {
-	response = await fetch(url);
-	if (!response.ok) {
-		return null;
-	}
-	if (is.dev()) {
-		console.log("Fetching lyrics from Genius:", url);
-	}
-	const html = await response.text();
-	const lyrics = convert(html, {
-		baseElements: {
-			selectors: ['[class^="Lyrics__Container"]', ".lyrics"],
-		},
-		selectors: [
-			{
-				selector: "a",
-				format: "linkFormatter",
-			},
-		],
-		formatters: {
-			// Remove links by keeping only the content
-			linkFormatter: (elem, walk, builder) => {
-				walk(elem.children, builder);
-			},
-		},
-	});
-	return lyrics;
-};
-
-module.exports.toggleRomanized = toggleRomanized;
-module.exports.fetchFromGenius = fetchFromGenius;

plugins/lyrics-genius/front.js

@@ -1,94 +0,0 @@
-const { ipcRenderer } = require("electron");
-const is = require("electron-is");
-
-module.exports = () => {
-	ipcRenderer.on("update-song-info", (_, extractedSongInfo) => setTimeout(() => {
-		const tabList = document.querySelectorAll("tp-yt-paper-tab");
-		const tabs = {
-			upNext: tabList[0],
-			lyrics: tabList[1],
-			discover: tabList[2],
-		}
-
-		// Check if disabled
-		if (!tabs.lyrics?.hasAttribute("disabled")) {
-			return;
-		}
-
-		let hasLyrics = true;
-
-		const lyrics = ipcRenderer.sendSync(
-			"search-genius-lyrics",
-			extractedSongInfo
-		);
-		if (!lyrics) {
-			// Delete previous lyrics if tab is open and couldn't get new lyrics
-			checkLyricsContainer(() => {
-				hasLyrics = false;
-				setTabsOnclick(undefined);
-			});
-			return;
-		}
-
-		if (is.dev()) {
-			console.log("Fetched lyrics from Genius");
-		}
-
-		enableLyricsTab();
-
-		setTabsOnclick(enableLyricsTab);
-
-		checkLyricsContainer();
-
-		tabs.lyrics.onclick = () => {
-			const tabContainer = document.querySelector("ytmusic-tab-renderer");
-			const observer = new MutationObserver((_, observer) => {
-				checkLyricsContainer(() => observer.disconnect());
-			});
-			observer.observe(tabContainer, {
-				attributes: true,
-				childList: true,
-				subtree: true,
-			});
-		};
-
-		function checkLyricsContainer(callback = () => {}) {
-			const lyricsContainer = document.querySelector(
-				'[page-type="MUSIC_PAGE_TYPE_TRACK_LYRICS"] > ytmusic-message-renderer'
-			);
-			if (lyricsContainer) {
-				callback();
-				setLyrics(lyricsContainer)
-			}
-		}
-
-		function setLyrics(lyricsContainer) {
-			lyricsContainer.innerHTML = `<div id="contents" class="style-scope ytmusic-section-list-renderer description ytmusic-description-shelf-renderer genius-lyrics">
-			 		${
-						hasLyrics
-							? lyrics.replace(/(?:\r\n|\r|\n)/g, "<br/>")
-							: "Could not retrieve lyrics from genius"
-					}
-
-				</div>
-				<yt-formatted-string class="footer style-scope ytmusic-description-shelf-renderer" style="align-self: baseline"></yt-formatted-string>`;
-			if (hasLyrics) {
-				lyricsContainer.querySelector('.footer').textContent = 'Source: Genius';
-				enableLyricsTab();
-			}
-		}
-
-		function setTabsOnclick(callback) {
-			for (const tab of [tabs.upNext, tabs.discover]) {
-				if (tab) {
-					tab.onclick = callback;
-				}
-			}
-		}
-
-		function enableLyricsTab() {
-			tabs.lyrics.removeAttribute("disabled");
-			tabs.lyrics.removeAttribute("aria-disabled");
-		}
-	}, 500));
-};

plugins/lyrics-genius/menu.js

@@ -1,17 +0,0 @@
-const { setOptions } = require("../../config/plugins");
-const { toggleRomanized } = require("./back");
-
-module.exports = (win, options, refreshMenu) => {
-	return [
-		{
-			label: "Romanized Lyrics",
-			type: "checkbox",
-			checked: options.romanizedLyrics,
-			click: (item) => {
-				options.romanizedLyrics = item.checked;
-				setOptions('lyrics-genius', options);
-				toggleRomanized();
-			},
-		},
-	];
-};

plugins/lyrics-genius/style.css

@@ -1,12 +0,0 @@
-/* Disable links in Genius lyrics */
-.genius-lyrics a {
-	color: var(--ytmusic-text-primary);
-	display: inline-block;
-	pointer-events: none;
-	text-decoration: none;
-}
-
-.description {
-	font-size: clamp(1.4rem, 1.1vmax, 3rem) !important;
-	text-align: center !important;
-}

plugins/navigation/actions.js

@@ -1,24 +0,0 @@
-const { triggerAction } = require("../utils");
-
-const CHANNEL = "navigation";
-const ACTIONS = {
-	NEXT: "next",
-	BACK: "back",
-};
-
-function goToNextPage() {
-	triggerAction(CHANNEL, ACTIONS.NEXT);
-}
-
-function goToPreviousPage() {
-	triggerAction(CHANNEL, ACTIONS.BACK);
-}
-
-module.exports = {
-	CHANNEL: CHANNEL,
-	ACTIONS: ACTIONS,
-	actions: {
-		goToNextPage: goToNextPage,
-		goToPreviousPage: goToPreviousPage,
-	},
-};

plugins/navigation/back.js

@@ -1,29 +0,0 @@
-const path = require("path");
-
-const { injectCSS, listenAction } = require("../utils");
-const { ACTIONS, CHANNEL } = require("./actions.js");
-
-function handle(win) {
-	injectCSS(win.webContents, path.join(__dirname, "style.css"), () => {
-		win.webContents.send("navigation-css-ready");
-	});
-
-	listenAction(CHANNEL, (event, action) => {
-		switch (action) {
-			case ACTIONS.NEXT:
-				if (win.webContents.canGoForward()) {
-					win.webContents.goForward();
-				}
-				break;
-			case ACTIONS.BACK:
-				if (win.webContents.canGoBack()) {
-					win.webContents.goBack();
-				}
-				break;
-			default:
-				console.log("Unknown action: " + action);
-		}
-	});
-}
-
-module.exports = handle;

plugins/navigation/front.js

@@ -1,19 +0,0 @@
-const { ipcRenderer } = require("electron");
-
-const { ElementFromFile, templatePath } = require("../utils");
-
-function run() {
-	ipcRenderer.on("navigation-css-ready", () => {
-		const forwardButton = ElementFromFile(
-			templatePath(__dirname, "forward.html")
-		);
-		const backButton = ElementFromFile(templatePath(__dirname, "back.html"));
-		const menu = document.querySelector("ytmusic-pivot-bar-renderer");
-
-		if (menu) {
-			menu.prepend(backButton, forwardButton);
-		}
-	});
-}
-
-module.exports = run;

plugins/navigation/style.css

@@ -1,35 +0,0 @@
-.navigation-item {
-	font-family: Roboto, Noto Naskh Arabic UI, Arial, sans-serif;
-	font-size: 20px;
-	line-height: var(--ytmusic-title-1_-_line-height);
-	font-weight: 500;
-	--yt-endpoint-color: #fff;
-	--yt-endpoint-hover-color: #fff;
-	--yt-endpoint-visited-color: #fff;
-	display: inline-flex;
-	align-items: center;
-	color: rgba(255, 255, 255, 0.5);
-	cursor: pointer;
-	margin: 0 var(--ytmusic-pivot-bar-tab-margin);
-}
-
-.navigation-item:hover {
-	color: #fff;
-}
-
-.navigation-icon {
-	display: inline-flex;
-	-ms-flex-align: center;
-	-webkit-align-items: center;
-	align-items: center;
-	-ms-flex-pack: center;
-	-webkit-justify-content: center;
-	justify-content: center;
-	position: relative;
-	vertical-align: middle;
-	fill: var(--iron-icon-fill-color, currentcolor);
-	stroke: none;
-	width: var(--iron-icon-width, 24px);
-	height: var(--iron-icon-height, 24px);
-	animation: var(--iron-icon_-_animation);
-}