feat: code splitting (#3593)

Co-authored-by: Angelos Bouklis <me@arjix.dev>

.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

.gitattributes

@@ -1,2 +1,2 @@
-* text=auto
-*.js text eol=lf
+* text=auto eol=lf
+*.js text

.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

@@ -1,7 +1,12 @@
 name: Build YouTube Music
 
 on:
-  - push
+  push:
+    branches: [ master ]
+  pull_request:
+
+env:
+  NODE_VERSION: "22.x"
 
 jobs:
   build:
@@ -10,53 +15,156 @@ jobs:
     strategy:
       fail-fast: true
       matrix:
-        os: [macos-latest, ubuntu-latest, windows-latest]
+        os: [ macos-latest, ubuntu-latest, windows-latest ]
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
+          run_install: false
 
       - name: Setup NodeJS
-        uses: actions/setup-node@v1
+        if: startsWith(matrix.os, 'macOS') != true
+        uses: actions/setup-node@v4
         with:
-          node-version: "14.x"
+          node-version: ${{ env.NODE_VERSION }}
+          cache: 'pnpm'
 
-      - name: Get yarn cache directory path
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
-
-      - uses: actions/cache@v2
-        id: yarn-cache
+      - name: Setup NodeJS for macOS
+        if: startsWith(matrix.os, 'macOS')
+        uses: actions/setup-node@v4
         with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-
+          node-version: ${{ env.NODE_VERSION }}
 
       - name: Install dependencies
-        run: yarn --frozen-lockfile
+        run: pnpm install --frozen-lockfile
+
+      # Only vite build without release if it is a fork, or it is a pull-request
+      - name: Vite Build
+        if: github.repository == 'th-ch/youtube-music' && github.event_name == 'pull_request'
+        run: |
+          pnpm build
+
+      # Build and release if it's the main repository and is not pull-request
+      - name: Build and release on Mac
+        if: startsWith(matrix.os, 'macOS') && (github.repository == 'th-ch/youtube-music' && github.event_name != 'pull_request')
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          pnpm release:mac
+
+      - name: Build and release on Linux
+        if: startsWith(matrix.os, 'ubuntu') && (github.repository == 'th-ch/youtube-music' && github.event_name != 'pull_request')
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          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
 
-      - name: Build on Mac
+
+  release:
+    runs-on: ubuntu-latest
+    name: Release YouTube Music
+    if: github.repository == 'th-ch/youtube-music' && github.ref == 'refs/heads/master'
+    needs: build
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
+          run_install: false
+
+      - name: Setup NodeJS
+        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')
-        env:
-          GH_TOKEN: ${{ secrets.GH_TOKEN }}
-        run: |
-          yarn run release:mac
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
 
-      - name: Build on Linux
-        if: startsWith(matrix.os, 'ubuntu')
-        env:
-          GH_TOKEN: ${{ secrets.GH_TOKEN }}
-        run: |
-          yarn run release:linux
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
 
-      - name: Build on Windows
-        if: startsWith(matrix.os, 'windows')
-        env:
-          GH_TOKEN: ${{ secrets.GH_TOKEN }}
+      - name: Get version
         run: |
-          yarn run release:win
+          echo "VERSION_TAG=v$(node -pe "require('./package.json').version")" >> $GITHUB_ENV
+
+      - name: Check if version already exists in tags
+        run: |
+          echo "VERSION_HASH=$(git rev-parse -q --verify 'refs/tags/${{ env.VERSION_TAG }}')" >> $GITHUB_ENV
+          echo "CHANGELOG_ANCHOR=$(echo $VERSION_TAG | sed -e 's/\.//g')" >> $GITHUB_ENV
+
+      - name: Fetch draft release
+        if: ${{ env.VERSION_HASH == '' }}
+        uses: cardinalby/git-get-release-action@v1
+        id: get_draft_release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          latest: true
+          draft: true
+          searchLimit: 1
+
+      - name: Publish Release (if it does not exist)
+        if: ${{ env.VERSION_HASH == '' }}
+        uses: irongut/EditRelease@v1.2.0
+        with:
+          token: ${{ secrets.GH_TOKEN }}
+          id: ${{ steps.get_draft_release.outputs.id }}
+          draft: false
+          prerelease: false
+          replacename: true
+          name: ${{ env.VERSION_TAG }}
+          replacebody: true
+          body: |
+            See [changelog](https://github.com/th-ch/youtube-music/blob/master/changelog.md#${{ env.CHANGELOG_ANCHOR }}) for the list of updates and the full diff.
+
+            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: |
+          pnpm changelog
+
+      - name: Commit changelog
+        if: ${{ env.VERSION_HASH == '' }}
+        uses: stefanzweifel/git-auto-commit-action@v6
+        with:
+          commit_message: Update changelog for ${{ env.VERSION_TAG }}
+          file_pattern: "changelog.md"
+          commit_user_name: CI
+          commit_user_email: th-ch@users.noreply.github.com

.github/workflows/dependency-review.yml

@@ -0,0 +1,20 @@
+# Dependency Review Action
+#
+# This Action will scan dependency manifest files that change as part of a Pull Reqest, surfacing known-vulnerable versions of the packages declared or updated in the PR. Once installed, if the workflow run is marked as required, PRs introducing known-vulnerable packages will be blocked from merging.
+#
+# 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 ]
+
+permissions:
+  contents: read
+
+jobs:
+  dependency-review:
+    runs-on: ubuntu-latest
+    steps:
+      - name: "Checkout Repository"
+        uses: actions/checkout@v4
+      - name: "Dependency Review"
+        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

@@ -0,0 +1,30 @@
+name: Submit to Windows Package Manager Community Repository
+
+on:
+  release:
+    types: [ released ]
+  workflow_dispatch:
+    inputs:
+      tag_name:
+        description: "Specific tag name"
+        required: true
+        type: string
+
+jobs:
+  winget:
+    name: Publish winget package
+    runs-on: ubuntu-latest
+    steps:
+      - name: Set winget version env
+        env:
+          TAG_NAME: ${{ inputs.tag_name || github.event.release.tag_name }}
+        run: echo "WINGET_TAG_NAME=$(echo ${TAG_NAME#v})" >> $GITHUB_ENV
+      - name: Submit package to Windows Package Manager Community Repository
+        uses: vedantmgoyal2009/winget-releaser@main
+        with:
+          identifier: th-ch.YouTubeMusic
+          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,4 +1,16 @@
 node_modules
 /dist
-/assets/generated
-electron-builder.yml
+/pack
+.vscode/settings.json
+.idea
+
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+.vite-inspect
+
+.DS_Store

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "tabWidth": 2,
+  "useTabs": false,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "quoteProps": "consistent"
+}

README.md

@@ -0,0 +1,407 @@
+<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), [Française](./docs/readme/README-fr.md), [Íslenska](./docs/readme/README-is.md), [Español](./docs/readme/README-es.md), [Pусский](./docs/readme/README-ru.md), [Українська](./docs/readme/README-uk.md), [Magyar](./docs/readme/README-hu.md), [Português](./docs/readme/README-pt.md), [日本語](./docs/readme/README-ja.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/)
+
+- **Unobtrusive Player**: Prevents the player from popping up when playing a song
+
+- **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,88 +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: "",
-	},
-	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,
-			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
-		},
-		notifications: {
-			enabled: false,
-			unpauseNotification: false,
-			urgency: "normal", //has effect only on Linux 
-			interactive: false //has effect only on Windows
-		},
-		"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,
-			forceHide: false,
-		},
-	},
-};
-
-module.exports = defaultConfig;

config/index.js

@@ -1,23 +0,0 @@
-const defaultConfig = require("./defaults");
-const plugins = require("./plugins");
-const store = require("./store");
-
-const set = (key, value) => {
-	store.set(key, value);
-};
-
-const get = (key) => {
-	return store.get(key);
-};
-
-module.exports = {
-	defaultConfig,
-	get,
-	set,
-	edit: () => store.openInEditor(),
-	watch: (cb) => {
-		store.onDidChange("options", cb);
-		store.onDidChange("plugins", cb);
-	},
-	plugins,
-};

config/plugins.js

@@ -1,46 +0,0 @@
-const store = require("./store");
-
-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 getOptions(plugin) {
-	return store.get("plugins")[plugin];
-}
-
-function enable(plugin) {
-	setOptions(plugin, { enabled: true });
-}
-
-function disable(plugin) {
-	setOptions(plugin, { enabled: false });
-}
-
-module.exports = {
-	isEnabled,
-	getEnabled,
-	enable,
-	disable,
-	setOptions,
-	getOptions,
-};

config/store.js

@@ -1,83 +0,0 @@
-const Store = require("electron-store");
-
-const defaults = require("./defaults");
-
-const migrations = {
-	">=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,392 @@
+<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>
+
+Lee esto en otros idiomas: [🏴 Inglés](../../README.md), [🇰🇷 Coreano](./README-ko.md), [🇫🇷 Francés](./README-fr.md), [🇮🇸 Islandés](./README-is.md), [🇪🇸 Español](./README-es.md), [🇷🇺 Ruso](./README-ru.md), [🇺🇦 Ucraniano](./README-uk.md), [🇧🇷 Portugués](./README-pt.md), [🇯🇵 Japonés](./README-ja.md)
+
+**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)
+
+- **Omitir Canciones No Deseadas**: 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,389 @@
+<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>
+
+Lisez ceci dans d'autres langues: [🏴 Anglais](../../README.md), [🇰🇷 Coréen](./README-ko.md), [🇫🇷 Français](./README-fr.md), [🇮🇸 Islandais](./README-is.md), [🇪🇸 Espagnol](./README-es.md), [🇷🇺 Russe](./README-ru.md), [🇺🇦 Ukrainien](./README-uk.md), [🇧🇷 Portugais](./README-pt.md), [🇯🇵 Japonais](./README-ja.md)
+
+**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](../../README.md), [🇰🇷 Korea](./README-ko.md), [🇫🇷 Francia](./README-fr.md), [🇮🇸 Izland](./README-is.md), [🇪🇸 Spanyol](./README-es.md), [🇷🇺 Orosz](./README-ru.md), [🇺🇦 Ukrán](./README-uk.md), [🇧🇷 Portugál](./README-pt.md), [🇯🇵 Japán](./README-ja.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,390 @@
+<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>
+
+Lestu þetta á öðrum tungumálum: [🏴 Ensku](../../README.md), [🇰🇷 Kóreska](./README-ko.md), [🇫🇷 Franska](./README-fr.md), [🇮🇸 Íslenskur](./README-is.md), [🇪🇸 Spænska](./README-es.md), [🇷🇺 Rússneska](./README-ru.md), [🇺🇦 Úkraínska](./README-uk.md), [🇧🇷 Portúgalska](./README-pt.md), [🇯🇵 Japanska](./README-ja.md)
+
+**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-ja.md

@@ -0,0 +1,371 @@
+<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>
+
+他の言語で読む: [🏴 英語](../../README.md), [🇰🇷 韓国語](./README-ko.md), [🇫🇷 フランス語](./README-fr.md), [🇮🇸 アイスランド語](./README-is.md), [🇪🇸 スペイン語](./README-es.md), [🇷🇺 ロシア語](./README-ru.md), [🇺🇦 ウクライナ語](./README-uk.md)
+
+**YouTube MusicのElectronラッパーには以下の機能があります:**
+
+- ネイティブの外観と操作感、元のインターフェースを維持することを目指しています
+- カスタムプラグインのフレームワーク: スタイル、コンテンツ、機能など、YouTube Musicをニーズに合わせて変更し、ワンクリックでプラグインを有効/無効にできます
+
+## デモ画像
+
+|                          プレーヤースクリーン (アルバムカラーテーマ & アンビエントライト)                                |
+|:---------------------------------------------------------------------------------------------------------:|
+|![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)
+- [テーマ](#テーマ)
+- [開発](#開発)
+- [独自のプラグインを作成する](#独自のプラグインを作成する)
+  - [プラグインの作成](#プラグインの作成)
+  - [一般的な使用例](#一般的な使用例)
+- [ビルド](#ビルド)
+- [プロダクションプレビュー](#プロダクションプレビュー)
+- [テスト](#テスト)
+- [ライセンス](#ライセンス)
+- [FAQ](#faq)
+
+## 機能:
+
+- **一時停止時の自動確認** (常に有効): 一定時間後に音楽を一時停止する["視聴を続けますか？"](https://user-images.githubusercontent.com/61631665/129977894-01c60740-7ec6-4bf0-9a2c-25da24491b0e.png)ポップアップを無効にします
+
+ - その他の機能...
+
+## 利用可能なプラグイン:
+
+- **広告ブロッカー**: すべての広告とトラッキングをブロックします
+
+- **アルバムアクション**: プレイリストやアルバム内のすべての曲に「嫌いではない」「嫌い」「好き」「好きではない」ボタンを追加します
+
+- **アルバムカラーテーマ**: アルバムのカラーパレットに基づいて動的なテーマと視覚効果を適用します
+
+- **アンビエントモード**: 動画から柔らかい色を画面の背景に投影するライティング効果を適用します
+
+- **<2A><><EFBFBD>ーディオコンプレッサー**: オーディオにコンプレッションを適用します（信号の最も大きな部分の音量を下げ、最も小さな部分の音量を上げます）
+
+- **ナビゲーションバーのぼかし**: ナビゲーションバーを透明でぼやけたものにします
+
+- **年齢制限の回避**: YouTubeの年齢確認を回避します
+
+- **字幕選択**: 字幕を有効にします
+
+- **コンパクトサイドバー**: サイドバーを常にコンパクトモードに設定します
+
+- **クロスフェード**: 曲間にクロスフェードを適用します
+
+- **自動再生の無効化**: すべての曲を「一時停止」モードで開始します
+
+- **[Discord](https://discord.com/) リッチプレゼンス**: [リッチプレゼンス](https://user-images.githubusercontent.com/28219076/104362104-a7a0b980-5513-11eb-9744-bb89eabe0016.png)を使用して、友達にあなたが聴いている曲を表示します
+
+- **ダウンローダー**: UIから直接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/)や[ListenBrainz](https://listenbrainz.org/)のスクロブリングサポートを追加します
+
+- **Lumia Stream**: [Lumia Stream](https://lumiastream.com/)のサポートを追加します
+
+- **Genius 歌詞**: ほとんどの曲に歌詞サポートを追加します
+
+- **Music Together**: プレイリストを他の人と共有します。ホストが曲を再生すると、他の全員が同じ曲を聴くことができます
+
+- **ナビゲーション**: お気に入りのブラウザのように、UIに直接統合された次/前のナビゲーション矢印を追加します
+
+- **Googleログインなし**: インターフェースからGoogleログインボタンとリンクを削除します
+
+- **通知**: 曲の再生が開始されると通知を表示します（Windowsでは[インタラクティブ通知](https://user-images.githubusercontent.com/78568641/114102651-63ce0e00-98d0-11eb-9dfe-c5a02bb54f9c.png)が利用可能です）
+
+- **ピクチャーインピクチャー**: アプリをピクチャーインピクチャーモードに切り替えることができます
+
+- **再生速度**: 速く聴いたり、遅く聴いたりできます！曲の速度を制御するスライダーを追加します
+
+- **正確な音量**: カスタムHUDとカスタマイズ可能な音量ステップを使用して、マウスホイール/ホットキーで音量を正確に制御します
+
+- **ショートカット (& MPRIS)**: 再生用のグローバルホットキー（再生/一時停止/次/前）を設定し、メディアキーをオーバーライドしてメディアOSDを無効にし、Ctrl/CMD + Fで検索を有効にし、Linuxの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): イントロ/アウトロなどの音楽以外の部分や、曲が再生されていないミュージックビデオの部分を自動的にスキップします
+
+- **同期歌詞**: [LRClib](https://lrclib.net)のようなプロバイダーを使用して、曲に同期した歌詞を提供します
+
+- **タスクバーメディアコントロール**: [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/78568641/138574366-70324a5e-2d64-4f6a-acdd-dc2a2b9cecc5.png)を使用してビデオ品質を変更できます
+
+- **ビデオ切り替え**: ビデオ/ソングモードを切り替える[ボタン](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のインストール手順については、この[wikiページ](https://wiki.archlinux.org/index.php/Arch_User_Repository#Installing_packages)を参照してください。
+
+### macOS
+
+Homebrewを使用してアプリをインストールできます（[cask定義](https://github.com/th-ch/homebrew-youtube-music)を参照）。
+
+```bash
+brew install th-ch/youtube-music/youtube-music
+```
+
+アプリを手動でインストールし、アプリの起動時に「破損しているため開けません」というエラーが表示される場合は、ターミナルで次のコマンドを実行します。
+
+```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を操作してフロントエンドを変更する
+
+### プラグインの作成
+
+`src/plugins/YOUR-PLUGIN-NAME`にフォルダーを作成します。
+
+- `index.ts`: プラグインのメインファイル
+```typescript
+import style from './style.css?inline'; // スタイルをインラインとしてインポート
+
+import { createPlugin } from '@/utils';
+
+export default createPlugin({
+  name: 'プラグインラベル',
+  restartNeeded: true, // 値がtrueの場合、ytmusicは再起動ダイアログを表示します
+  config: {
+    enabled: false,
+  }, // カスタム設定
+  stylesheets: [style], // カスタムスタイル
+  menu: async ({ getConfig, setConfig }) => {
+    // すべての*ConfigメソッドはPromise<T>でラップされています
+    const config = await getConfig();
+    return [
+      {
+        label: 'メニュー',
+        submenu: [1, 2, 3].map((value) => ({
+          label: `値 ${value}`,
+          type: 'radio',
+          checked: config.value === value,
+          click() {
+            setConfig({ value });
+          }, 
+        })),
+      },
+    ];
+  },
+  backend: {
+    start({ window, ipc }) {
+      window.maximize();
+
+      // レンダラープラグインと通信できます
+      ipc.handle('some-event', () => {
+        return 'hello';
+      });
+    },
+    // 設定が変更されたときに発生します
+    onConfigChange(newConfig) { /* ... */ },
+    // プラグインが無効になったときに発生します
+    stop(context) { /* ... */ },
+  },
+  renderer: {
+    async start(context) {
+      console.log(await context.ipc.invoke('some-event'));
+    },
+    // レンダラーでのみ使用可能なフック
+    onPlayerApiReady(api: YoutubePlayer, context: RendererContext) {
+      // プラグイン設定を簡単に設定
+      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: 'プラグインラベル',
+  restartNeeded: true, // 値がtrueの場合、ytmusicは再起動ダイアログを表示します
+  config: {
+    enabled: false,
+  }, // カスタム設定
+  stylesheets: [style], // カスタムスタイル
+  renderer() {} // レンダラーフックを定義
+});
+```
+
+- HTMLを変更したい場合:
+
+```typescript
+import { createPlugin } from '@/utils';
+
+export default createPlugin({
+  name: 'プラグインラベル',
+  restartNeeded: true, // 値がtrueの場合、ytmusicは再起動ダイアログを表示します
+  config: {
+    enabled: false,
+  }, // カスタム設定
+  renderer() {
+    // ログインボタンを削除
+    document.querySelector(".sign-in-link.ytmusic-nav-bar").remove();
+  } // レンダラーフックを定義
+});
+```
+
+- フロントエンドとバックエンドの通信: ElectronのipcMainモジュールを使用して行うことができます。`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 (Debian用arm64)
+- `pnpm dist:linux:rpm-arm64` - Linux (Fedora用arm64)
+- `pnpm dist:mac` - macOS (amd64)
+- `pnpm dist:mac:arm64` - macOS (arm64)
+
+[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)
+
+## FAQ
+
+### アプリのメニューが表示されないのはなぜですか？
+
+`メニューを非表示`オプションがオンの場合 - <kbd>alt</kbd>キー（またはアプリ内メニュープラグインを使用している場合は<kbd>\`</kbd> [バックティック]キー）でメニューを表示できます

docs/readme/README-ko.md

@@ -0,0 +1,350 @@
+<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>
+
+다른 언어로 읽어보세요: [🏴 영어](../../README.md), [🇰🇷 한국인](./README-ko.md), [🇫🇷 프랑스 국민](./README-fr.md), [🇮🇸 아이슬란드어](./README-is.md), [🇪🇸 스페인 사람](./README-es.md), [🇷🇺 러시아인](./README-ru.md), [🇺🇦 우크라이나어](./README-uk.md), [🇧🇷 포르투갈어](./README-pt.md), [🇯🇵 일본어](./README-ja.md)
+
+**유튜브 뮤직의 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-pt.md

@@ -0,0 +1,375 @@
+<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>
+
+Leia em outros idiomas: [🏴 Inglês](../../README.md), [🇰🇷 Coreano](./README-ko.md), [🇫🇷 Francês](./README-fr.md), [🇮🇸 Islandês](./README-is.md), [🇪🇸 Espanhol](./README-es.md), [🇷🇺 Russo](./README-ru.md), [🇺🇦 Ucraniano](./README-uk.md), [🇧🇷 Português](./README-pt.md)
+
+**Wrapper do Electron para o YouTube Music com os seguintes recursos:**
+
+- Visual e comportamento nativos: Mantém a interface original do YouTube Music.
+- Estrutura para plugins personalizados: Adapte o YouTube Music às suas necessidades (estilo, conteúdo, funcionalidades). Ative/desative plugins com um clique.
+
+## Imagem de demonstração
+
+|                  Tela do Player (tema de cores do álbum e luz ambiente)                     |
+|:---------------------------------------------------------------------------------------------------------:|
+|![Screenshot1](https://github.com/th-ch/youtube-music/assets/16558115/53efdf73-b8fa-4d7b-a235-b96b91ea77fc)|
+
+## Conteúdo
+
+- [Recursos](#recursos)
+- [Plugins disponíveis](#plugins-disponíveis)
+- [Tradução](#tradução)
+- [Download](#download)
+  - [Arch Linux](#arch-linux)
+  - [MacOS](#macos)
+  - [Windows](#windows)
+    - [Como instalar sem conexão à internet? (no Windows)](#como-instalar-sem-conexão-à-internet-no-windows)
+- [Temas](#temas)
+- [Dev](#dev)
+- [Crie seus próprios plugins](#crie-seus-próprios-plugins)
+  - [Criando um plugin](#criando-um-plugin)
+  - [Casos de uso comuns](#casos-de-uso-comuns)
+- [Compilar](#compilar)
+- [Prévia de produção](#prévia-de-produção)
+- [Testes](#testes)
+- [Licença](#licença)
+- [Perguntas Frequentes](#perguntas-frequentes)
+
+## Recursos:
+
+- **Confirmação automática quando pausado** (Sempre ativado): desativa
+  o popup ["Continuar assistindo?"](https://user-images.githubusercontent.com/61631665/129977894-01c60740-7ec6-4bf0-9a2c-25da24491b0e.png)
+  que pausa a música após um certo tempo
+
+- E mais...
+
+## Plugins disponíveis:
+
+- **Bloqueador de anúncios**: Bloqueia todos os anúncios e rastreamentos automaticamente
+
+- **Ações de Álbum**: Adiciona botões para Remover dislike, Dar dislike, Curtir e Remover curtida em todas as músicas de uma playlist ou álbum
+
+- **Tema de cores do álbum**: Aplica um tema dinâmico e efeitos visuais baseados na paleta de cores do álbum
+
+- **Modo ambiente**: Cria um efeito de iluminação projetando cores suaves do vídeo no fundo da tela
+
+- **Compressor de áudio**: Aplica compressão ao áudio (reduz o volume das partes mais altas e aumenta o das mais baixas)
+
+- **Barra de navegação desfocada**: Torna a barra de navegação transparente e desfocada
+
+- **Contornar restrições de idade**: Ignora a verificação de idade do YouTube
+
+- **Seletor de legendas**: Ativa legendas
+
+- **Barra lateral compacta**: Mantém a barra lateral sempre no modo compacto
+
+- **Crossfade**: Transição suave entre músicas
+
+- **Desativar reprodução automática**: Faz com que todas as músicas iniciem no modo "pausado"
+
+- **[Discord](https://discord.com/) Rich Presence**: Mostra para seus amigos o que você está ouvindo com [Rich Presence](https://user-images.githubusercontent.com/28219076/104362104-a7a0b980-5513-11eb-9744-bb89eabe0016.png)
+
+- **Downloader**: Baixa MP3 [diretamente da interface](https://user-images.githubusercontent.com/61631665/129977677-83a7d067-c192-45e1-98ae-b5a4927393be.png) [(youtube-dl)](https://github.com/ytdl-org/youtube-dl)
+
+- **Equalizador**: Adiciona filtros para aumentar ou reduzir faixas específicas de frequência (ex: reforço de graves)
+
+- **Volume exponencial**: Torna o controle de volume [exponencial](https://greasyfork.org/en/scripts/397686-youtube-music-fix-volume-ratio/) para facilitar a seleção de volumes mais baixos
+
+- **Menu integrado**: [Dá às barras um visual elegante e escuro](https://user-images.githubusercontent.com/78568641/112215894-923dbf00-8c29-11eb-95c3-3ce15db27eca.png)
+
+  > (veja [este post](https://github.com/th-ch/youtube-music/issues/410#issuecomment-952060709) se tiver problemas para acessar o menu após ativar este plugin e a opção de ocultar menu)
+
+- **Scrobbler**: Adiciona suporte para scrobbling no [Last.fm](https://www.last.fm/) e [ListenBrainz](https://listenbrainz.org/)
+
+- **Lumia Stream**: Adiciona suporte para [Lumia Stream](https://lumiastream.com/)
+
+- **Letras Genius**: Adiciona suporte a letras para a maioria das músicas
+
+- **Música Juntos**: Compartilhe uma playlist com outros. Quando o host toca uma música, todos ouvem a mesma música
+
+- **Navegação**: Botões de avançar/voltar integrados diretamente na interface, como no seu navegador favorito
+
+- **Sem login do Google**: Remove botões e links de login do Google da interface
+
+- **Notificações**: Exibe uma notificação quando uma música começa a tocar ([notificações interativas](https://user-images.githubusercontent.com/78568641/114102651-63ce0e00-98d0-11eb-9dfe-c5a02bb54f9c.png) disponíveis no Windows)
+
+- **Picture-in-picture**: Permite alternar o aplicativo para o modo picture-in-picture
+
+- **Velocidade de reprodução**: Ouça rápido, ouça devagar! [Adiciona um controle deslizante para ajustar a velocidade](https://user-images.githubusercontent.com/61631665/129976003-e55db5ba-bf42-448c-a059-26a009775e68.png)
+
+- **Volume preciso**: Controle o volume com precisão usando roda do mouse/atalhos, com HUD personalizado e níveis de volume customizáveis
+
+- **Atalhos (& MPRIS)**: Permite configurar teclas de atalho globais para controle (play/pause/próxima/anterior) + desativa [OSD de mídia](https://user-images.githubusercontent.com/84923831/128601225-afa38c1f-dea8-4209-9f72-0f84c1dd8b54.png) sobrescrevendo teclas de mídia + ativa Ctrl/CMD + F para busca + suporte a MPRIS no Linux para teclas de mídia + [atalhos personalizados](https://github.com/Araxeus/youtube-music/blob/1e591d6a3df98449bcda6e63baab249b28026148/providers/song-controls.js#L13-L50) para [usuários avançados](https://github.com/th-ch/youtube-music/issues/106#issuecomment-952156902)
+
+- **Pular músicas marcadas com "não gostei"**: Ignora automaticamente músicas que você deu dislike
+
+- **Pular silêncios**: Ignora automaticamente seções silenciosas
+
+- [**SponsorBlock**](https://github.com/ajayyy/SponsorBlock): Ignora automaticamente partes não musicais como introduções/outros ou partes de clipes onde a música não está tocando
+
+- **Letras sincronizadas**: Fornece letras sincronizadas para músicas, usando serviços como [LRClib](https://lrclib.net)
+
+- **Controle de mídia na barra de tarefas**: Controle a reprodução pela [barra de tarefas do Windows](https://user-images.githubusercontent.com/78568641/111916130-24a35e80-8a82-11eb-80c8-5021c1aa27f4.png)
+
+- **TouchBar**: Layout personalizado para a TouchBar do macOS
+
+- **Tuna OBS**: Integração com o plugin [Tuna](https://obsproject.com/forum/resources/tuna.843/) do [OBS](https://obsproject.com/)
+
+- **Seletor de qualidade de vídeo**: Permite alterar a qualidade do vídeo com um [botão](https://user-images.githubusercontent.com/78568641/138574366-70324a5e-2d64-4f6a-acdd-dc2a2b9cecc5.png) na sobreposição do vídeo
+
+- **Alternar vídeo**: Adiciona um [botão](https://user-images.githubusercontent.com/28893833/173663950-63e6610e-a532-49b7-9afa-54cb57ddfc15.png) para alternar entre modos Vídeo/Música. Pode também remover completamente a aba de vídeo
+
+- **Visualizador**: Diferentes visualizadores de música
+
+## Tradução
+
+Você pode ajudar com as traduções no [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="status da tradução" />
+  <img src="https://hosted.weblate.org/widget/youtube-music/i18n/287x66-black.png" alt="status da tradução 2" />
+</a>
+
+## Download
+
+Você pode verificar o [último lançamento](https://github.com/th-ch/youtube-music/releases/latest) para encontrar rapidamente a versão mais recente.
+
+### Arch Linux
+
+Instale o pacote [`youtube-music-bin`](https://aur.archlinux.org/packages/youtube-music-bin) do AUR. Para instruções de instalação do AUR, consulte esta [página da wiki](https://wiki.archlinux.org/index.php/Arch_User_Repository#Installing_packages).
+
+### macOS
+
+Você pode instalar o aplicativo usando Homebrew (veja a [definição do cask](https://github.com/th-ch/homebrew-youtube-music)):
+
+```bash
+brew install th-ch/youtube-music/youtube-music
+```
+
+Se você instalar o aplicativo manualmente e receber o erro "is damaged and can’t be opened." ao abrir o app, execute o seguinte no Terminal:
+
+```bash
+/usr/bin/xattr -cr /Applications/YouTube\ Music.app
+```
+
+### Windows
+
+Você pode usar o [gerenciador de pacotes Scoop](https://scoop.sh) para instalar o pacote `youtube-music` do [`extras bucket`](https://github.com/ScoopInstaller/Extras).
+
+```bash
+scoop bucket add extras
+scoop install extras/youtube-music
+```
+
+Alternativamente, você pode usar o [Winget](https://learn.microsoft.com/en-us/windows/package-manager/winget/), o gerenciador de pacotes CLI oficial do Windows 11, para instalar o pacote `th-ch.YouTubeMusic`.
+
+*Nota: O Microsoft Defender SmartScreen pode bloquear a instalação por ser de um "publicador desconhecido". Isso também acontece na instalação manual ao tentar executar o arquivo .exe após download manual aqui no GitHub (mesmo arquivo).*
+
+```bash
+winget install th-ch.YouTubeMusic
+```
+
+#### Como instalar sem conexão à internet? (no Windows)
+
+- Baixe o arquivo `*.nsis.7z` para _sua arquitetura de dispositivo_ na [página de lançamentos](https://github.com/th-ch/youtube-music/releases/latest).
+  - `x64` para Windows 64-bit
+  - `ia32` para Windows 32-bit
+  - `arm64` para Windows ARM64
+- Baixe o instalador na página de lançamentos (`*-Setup.exe`)
+- Coloque os arquivos no **mesmo diretório**
+- Execute o instalador
+
+## Temas
+
+Você pode carregar arquivos CSS para alterar a aparência do aplicativo (Opções > Ajustes Visuais > Temas).
+
+Alguns temas pré-definidos estão disponíveis em 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
+```
+
+## Crie seus próprios plugins
+
+Usando plugins, você pode:
+
+- Manipular o aplicativo - o `BrowserWindow` do electron é passado para o manipulador de plugins
+- Alterar a interface manipulando o HTML/CSS
+
+### Criando um plugin
+
+Crie uma pasta em `src/plugins/NOMBRE-DEL-PLUGIN`:
+
+- `index.ts`: o arquivo principal do plugin
+```typescript
+import style from './style.css?inline'; // importar estilo como inline
+
+import { createPlugin } from '@/utils';
+
+export default createPlugin({
+  name: "Plugin Label",
+  restartNeeded: true, // se true, o ytmusic mostra diálogo de reinício
+  config: {
+    enabled: false,
+  }, // sua configuração personalizada
+  stylesheets: [style], // seu estilo personalizado
+  menu: async ({ getConfig, setConfig }) => {
+    // Todos os métodos *Config são wrappers 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();
+
+      // você pode se comunicar com o plugin renderer
+      ipc.handle("some-event", () => {
+        return "hello";
+      });
+    },
+    // disparado quando a configuração muda
+    onConfigChange(newConfig) { /* ... */ },
+    // disparado quando o plugin é desativado
+    stop(context) { /* ... */ },
+  },
+  renderer: {
+    async start(context) {
+      console.log(await context.ipc.invoke("some-event"));
+    },
+    // Hook disponível apenas no renderer
+    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 comuns
+
+- **Injetar CSS personalizado**: crie um arquivo `style.css` na mesma pasta e então:
+
+```typescript
+// index.ts
+import style from './style.css?inline'; // importa estilo como inline
+
+import { createPlugin } from '@/utils';
+
+export default createPlugin({
+    name: 'Plugin Label',
+    restartNeeded: true, // se true, o ytmusic mostrará um diálogo de reinício
+    config: {
+        enabled: false,
+    }, // sua configuração personalizada
+    stylesheets: [style], // seu estilo personalizado
+    renderer() {} // define o hook renderer
+});
+```
+
+- Se quiser alterar o HTML:
+
+```typescript
+import { createPlugin } from '@/utils';
+
+export default createPlugin({
+    name: 'Plugin Label',
+    restartNeeded: true, // se true, o ytmusic mostrará o diálogo de reinício
+    config: {
+        enabled: false,
+    }, // sua configuração personalizada
+    renderer() {
+        // Remove o botão de login
+        document.querySelector(".sign-in-link.ytmusic-nav-bar").remove();
+    } // define o hook renderer
+});
+```
+
+- Comunicação entre front-end e back-end: pode ser feita usando o módulo ipcMain do Electron. Consulte o arquivo `index.ts` e o exemplo no plugin `sponsorblock`.
+
+## Compilar
+
+1. Clone o repositório
+2. Siga [este guia](https://pnpm.io/installation) para instalar o `pnpm`
+3. Execute `pnpm install --frozen-lockfile` para instalar as dependências
+4. Execute `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)
+
+Compila o aplicativo para macOS, Linux e Windows,
+usando [electron-builder](https://github.com/electron-userland/electron-builder).
+
+## Prévia de Produção
+
+```bash
+pnpm start
+```
+
+## Testes
+
+```bash
+pnpm test
+```
+
+Utiliza [Playwright](https://playwright.dev/) para testar o aplicativo.
+
+## Licença
+
+MIT © [th-ch](https://github.com/th-ch/youtube-music)
+
+## Perguntas Frequentes
+
+### Por que o menu do aplicativo não aparece?
+
+Se a opção `Ocultar menu` estiver ativada - você pode exibir o menu com a tecla <kbd>alt</kbd> (ou <kbd>\`</kbd> [acento grave] se estiver usando o plugin in-app-menu)

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>
+
+Прочтите это на других языках: [🏴 Английский](../../README.md), [🇰🇷 корейский](./README-ko.md), [🇫🇷 Французский](./README-fr.md), [🇮🇸 исландский](./README-is.md), [🇪🇸 испанский](./README-es.md), [🇷🇺 Русский](./README-ru.md), [🇺🇦 Украинский](./README-uk.md), [🇧🇷 Португальский](./README-pt.md)
+
+**Клиент для 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/readme/README-uk.md

@@ -0,0 +1,372 @@
+<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>
+
+![Знімок екрана](/web/screenshot.png "Знімок екрана")
+
+
+<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>
+
+Прочитайте це іншими мовами: [🏴 Англійська](../../README.md), [🇰🇷 Корейська](./README-ko.md), [🇫🇷 Французька](./README-fr.md), [🇮🇸 Ісландська](./README-is.md), [🇪🇸 Іспанська](./README-es.md), [🇷🇺 Російська](./README-ru.md), [🇺🇦 Українська](./README-uk.md), [🇭🇺 Угорська](./README-hu.md), [🇧🇷 Португальська](./README-pt.md), [🇯🇵 Японська](./README-ja.md)
+
+**Клієнт 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)
+- [Теми](#Теми)
+- [Розробка](#Розробка)
+- [Створіть власні плагіни](#Створіть-власні-плагіни)
+  - [Створення плагіна](#Створення-плагіна)
+  - [Поширені випадки використання](#Поширені-випадки-використання)
+- [Збірка](#Збірка)
+- [Попередній перегляд для producción](#Попередній-перегляд-для-production)
+- [Тести](#Тести)
+- [Ліцензія](#Ліцензія)
+- [Поширені запитання](#Поширені-запитання)
+
+## Можливості:
+
+- **Автоматичне підтвердження під час паузи** (Завжди ввімкнено): вимикає спливаюче вікно ["Продовжити перегляд?"](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**: Додає підтримку текстів для більшості пісень
+
+- **Музика разом**: Поділіться списком відтворення з іншими. Коли хост відтворює пісню, всі інші чутимуть ту саму пісню
+
+- **Навігація**: Стрілки навігації «Вперед»/«Назад» безпосередньо інтегровані в інтерфейс, як у вашому улюбленому браузері
+
+- **Без входу в 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)
+
+- **Точна гучність**: Точно керуйте гучністю за допомогою коліщатка миші/гарячих клавіш, з власним HUD та настроюваними кроками гучності
+
+- **Гарячі клавіші (та MPRIS)**: Дозволяє встановлювати глобальні гарячі клавіші для відтворення (відтворення/пауза/наступна/попередня) + вимкнути [екранне меню медіа](https://user-images.githubusercontent.com/84923831/128601225-afa38c1f-dea8-4209-9f72-0f84c1dd8b54.png) шляхом перевизначення медіаклавіш + увімкнути Ctrl/CMD + F для пошуку + увімкнути підтримку mpris у Linux для медіаклавіш + [власні гарячі клавіші](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**: Інтеграція з плагіном [Tuna](https://obsproject.com/forum/resources/tuna.843/) для [OBS](https://obsproject.com/)
+
+- **Зміна якості відео**: Дозволяє змінювати якість відео за допомогою [кнопки](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) для перемикання між режимом відео/пісні. Також може опціонально видалити всю вкладку відео
+
+- **Візуалізатор**: Різні музичні візуалізатори
+
+- **Синхронізовані тексти**: Надає синхронізовані тексти пісень, використовуючи такі джерела, як [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="статус перекладу" />
+  <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
+
+Встановіть пакет [`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](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`.
+
+*Примітка: Microsoft Defender SmartScreen може блокувати встановлення, оскільки воно від "невідомого видавця". Це також стосується ручного встановлення під час спроби запустити виконуваний файл (.exe) після ручного завантаження тут, на GitHub (той самий файл).*
+
+```bash
+winget install th-ch.YouTubeMusic
+```
+
+#### Як встановити без підключення до Інтернету? (у Windows)
+
+- Завантажте файл `*.nsis.7z` для _архітектури вашого пристрою_ зі [сторінки релізів](https://github.com/th-ch/youtube-music/releases/latest).
+  - `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
+```
+
+## Створіть власні плагіни
+
+Використовуючи плагіни, ви можете:
+
+- маніпулювати програмою - `BrowserWindow` з Electron передається обробнику плагінів
+- змінювати фронтенд, маніпулюючи HTML/CSS
+
+### Створення плагіна
+
+Створіть теку в `src/plugins/НАЗВА_ВАШОГО_ПЛАГІНА`:
+
+- `index.ts`: основний файл плагіна
+```typescript
+import style from './style.css?inline'; // імпортувати стиль як вбудований
+
+import { createPlugin } from '@/utils';
+
+export default createPlugin({
+  name: 'Назва плагіна',
+  restartNeeded: true, // якщо значення true, ytmusic покаже діалогове вікно перезапуску
+  config: {
+    enabled: false,
+  }, // ваша власна конфігурація
+  stylesheets: [style], // ваш власний стиль,
+  menu: async ({ getConfig, setConfig }) => {
+    // Усі методи *Config є обгорнутими Promise<T>
+    const config = await getConfig();
+    return [
+      {
+        label: 'меню',
+        submenu: [1, 2, 3].map((value) => ({
+          label: `значення ${value}`,
+          type: 'radio',
+          checked: config.value === value,
+          click() {
+            setConfig({ value });
+          },
+        })),
+      },
+    ];
+  },
+  backend: {
+    start({ window, ipc }) {
+      window.maximize();
+
+      // ви можете спілкуватися з плагіном рендерера
+      ipc.handle('some-event', () => {
+        return 'hello';
+      });
+    },
+    // викликається при зміні конфігурації
+    onConfigChange(newConfig) { /* ... */ },
+    // викликається при вимкненні плагіна
+    stop(context) { /* ... */ },
+  },
+  renderer: {
+    async start(context) {
+      console.log(await context.ipc.invoke('some-event'));
+    },
+    // Хук, доступний лише для рендерера
+    onPlayerApiReady(api: YoutubePlayer, context: RendererContext) {
+      // легко встановити конфігурацію плагіна
+      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: 'Назва плагіна',
+  restartNeeded: true, // якщо значення true, ytmusic покаже діалогове вікно перезапуску
+  config: {
+    enabled: false,
+  }, // ваша власна конфігурація
+  stylesheets: [style], // ваш власний стиль
+  renderer() {} // визначити хук рендерера
+});
+```
+
+- Якщо ви хочете змінити HTML:
+
+```typescript
+import { createPlugin } from '@/utils';
+
+export default createPlugin({
+  name: 'Назва плагіна',
+  restartNeeded: true, // якщо значення true, ytmusic покаже діалогове вікно перезапуску
+  config: {
+    enabled: false,
+  }, // ваша власна конфігурація
+  renderer() {
+    // Видалити кнопку входу
+    document.querySelector(".sign-in-link.ytmusic-nav-bar").remove();
+  } // визначити хук рендерера
+});
+```
+
+- зв'язок між фронтендом та бекендом: можна здійснити за допомогою модуля 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 для Debian)
+- `pnpm dist:linux:rpm-arm64` - Linux (arm64 для Fedora)
+- `pnpm dist:mac` - macOS (amd64)
+- `pnpm dist:mac:arm64` - macOS (arm64)
+
+Збирає програму для macOS, Linux та Windows,
+використовуючи [electron-builder](https://github.com/electron-userland/electron-builder).
+
+## Попередній перегляд для production
+
+```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-builder.yml

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

electron.vite.config.mts

@@ -0,0 +1,187 @@
+import { dirname, join, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import { defineConfig, defineViteConfig } from 'electron-vite';
+import builtinModules from 'builtin-modules';
+
+import Inspect from 'vite-plugin-inspect';
+import solidPlugin from 'vite-plugin-solid';
+import viteResolve from 'vite-plugin-resolve';
+
+import { withFilter, type UserConfig } from 'vite';
+
+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 = {
+      experimental: {
+        enableNativePlugin: true,
+      },
+      plugins: [
+        pluginLoader('backend'),
+        viteResolve({
+          'virtual:i18n': i18nImporter(),
+          'virtual:plugins': pluginVirtualModuleGenerator('main'),
+        }),
+      ],
+      publicDir: 'assets',
+      define: {
+        '__dirname': 'import.meta.dirname',
+        '__filename': 'import.meta.filename',
+      },
+      build: {
+        lib: {
+          entry: 'src/index.ts',
+          formats: ['es'],
+        },
+        outDir: 'dist/main',
+        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 = {
+      experimental: {
+        enableNativePlugin: true,
+      },
+      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 = {
+      experimental: {
+        enableNativePlugin: mode !== 'development', // Disable native plugin in development mode to avoid issues with HMR (bug in rolldown-vite)
+      },
+      plugins: [
+        pluginLoader('renderer'),
+        viteResolve({
+          'virtual:i18n': i18nImporter(),
+          'virtual:plugins': pluginVirtualModuleGenerator('renderer'),
+        }),
+        withFilter(solidPlugin(), {
+          load: { id: [/\.(tsx|jsx)$/, '/@solid-refresh'] },
+        }),
+      ],
+      root: './src/',
+      build: {
+        lib: {
+          entry: 'src/index.html',
+          formats: ['iife'],
+          name: 'renderer',
+        },
+        outDir: 'dist/renderer',
+        rollupOptions: {
+          external: ['electron', ...builtinModules],
+          input: './src/index.html',
+        },
+      },
+      resolve: {
+        alias: resolveAlias,
+      },
+      server: {
+        cors: {
+          origin: 'https://music.youtube.com',
+        },
+      },
+    };
+
+    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,82 @@
+//@ts-check
+
+import eslint from '@eslint/js';
+import prettier from 'eslint-plugin-prettier/recommended';
+import solid from 'eslint-plugin-solid/configs/recommended';
+import stylistic from '@stylistic/eslint-plugin';
+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,
+  solid,
+  { 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,436 +0,0 @@
-"use strict";
-const path = require("path");
-
-const electron = require("electron");
-const remote = require('@electron/remote/main');
-remote.initialize();
-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");
-
-// Catch errors and log them
-unhandled({
-	logger: console.error,
-	showDialog: false,
-});
-
-const app = electron.app;
-app.commandLine.appendSwitch(
-	"js-flags",
-	// WebAssembly flags
-	"--experimental-wasm-threads"
-);
-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 (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
-});
-
-// Prevent window being garbage collected
-let mainWindow;
-autoUpdater.autoDownload = false;
-
-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;
-}
-
-function loadPlugins(win) {
-	injectCSS(win.webContents, path.join(__dirname, "youtube-music.css"));
-	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,
-			nativeWindowOpen: true, // window.open return Window object(like in regular browsers), not BrowserWindowProxy
-			affinity: "main-window", // main window, and addition windows should work in one process
-			...(isTesting()
-				? {
-					// Only necessary when testing with Spectron
-					contextIsolation: false,
-					nodeIntegration: true,
-				}
-				: undefined),
-		},
-		frame: !is.macOS() && !useInlineMenu,
-		titleBarStyle: useInlineMenu
-			? "hidden"
-			: is.macOS()
-			? "hiddenInset"
-			: "default",
-		autoHideMenuBar: config.get("options.hideMenu"),
-	});
-	remote.enable(win.webContents);
-	if (windowPosition) {
-		const { x, y } = windowPosition;
-		win.setPosition(x, y);
-	}
-	if (windowMaximized) {
-		win.maximize();
-	}
-
-	const urlToLoad = config.get("options.resumeOnStart")
-		? config.get("url")
-		: config.defaultConfig.url;
-	win.webContents.loadURL(urlToLoad);
-	win.on("closed", onClosed);
-
-	win.on("move", () => {
-		let position = win.getPosition();
-		config.set("window-position", { x: position[0], y: position[1] });
-	});
-
-	win.on("resize", () => {
-		const windowSize = win.getSize();
-
-		config.set("window-maximized", win.isMaximized());
-		if (!win.isMaximized()) {
-			config.set("window-size", {
-				width: windowSize[0],
-				height: windowSize[1],
-			});
-		}
-	});
-
-	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) => {
-	// 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);
-	loadPlugins(win);
-
-	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();
-	});
-
-	win.webContents.on(
-		"new-window",
-		(e, url, frameName, disposition, options) => {
-			// hook on new opened window
-
-			// at now new window in mainWindow renderer process.
-			// Also, this will automatically get an option `nodeIntegration=false`(not override to true, like in iframe's) - like in regular browsers
-			options.webPreferences.affinity = "main-window";
-		}
-	);
-});
-
-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: appLocation.slice(0, appLocation.lastIndexOf(path.sep)),
-						description: "YouTube Music Desktop App - including custom plugins",
-						appUserModelId: appID
-					}
-				);
-			}
-		}
-	}
-
-	mainWindow = createMainWindow();
-	setApplicationMenu(mainWindow);
-	if (config.get("options.restartOnConfigChanges")) {
-		config.watch(() => {
-			app.relaunch();
-			app.exit();
-		});
-	}
-	setUpTray(app, mainWindow);
-
-	// 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: //if relaunch - relaunch+exit
-				app.relaunch();
-			case 2:
-				app.quit();
-				break;
-			default:
-				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) {
-		if (
-			!details.responseHeaders["content-security-policy-report-only"] &&
-			!details.responseHeaders["content-security-policy"]
-		)
-			return callback({ cancel: false });
-		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;
-	});
-}

jest.config.js

@@ -1,6 +0,0 @@
-module.exports = {
-	globals: {
-		__APP__: undefined, // A different app will be launched in each test environment
-	},
-	testTimeout: 30000, // 30s
-};

menu.js

@@ -1,324 +0,0 @@
-const { existsSync } = require("fs");
-const path = require("path");
-
-const { app, Menu, dialog } = require("electron");
-const is = require("electron-is");
-
-const { getAllPlugins } = require("./plugins/utils");
-const config = require("./config");
-
-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("updateMenu", true);
-		}
-	}
-	return [
-		{
-			label: "Plugins",
-			submenu: [
-				...getAllPlugins().map((plugin) => {
-					const pluginPath = path.join(__dirname, "plugins", plugin, "menu.js")
-					if (existsSync(pluginPath)) {
-						if (!config.plugins.isEnabled(plugin)) {
-							return pluginEnabledMenu(plugin, "", true, refreshMenu);
-						}
-						const getPluginMenu = require(pluginPath);
-						return {
-							label: plugin,
-							submenu: [
-								pluginEnabledMenu(plugin, "Enabled", true, refreshMenu),
-								...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.set("options.autoUpdates", item.checked);
-					},
-				},
-				{
-					label: "Resume last song when app starts",
-					type: "checkbox",
-					checked: config.get("options.resumeOnStart"),
-					click: (item) => {
-						config.set("options.resumeOnStart", item.checked);
-					},
-				},
-				{
-					label: "Remove upgrade button",
-					type: "checkbox",
-					checked: config.get("options.removeUpgradeButton"),
-					click: (item) => {
-						config.set("options.removeUpgradeButton", item.checked);
-					},
-				},
-				...(is.windows() || is.linux()
-					? [
-						{
-							label: "Hide menu",
-							type: "checkbox",
-							checked: config.get("options.hideMenu"),
-							click: (item) => {
-								config.set("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 'Escape' 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.set("options.startAtLogin", item.checked);
-							},
-						},
-					]
-					: []),
-				{
-					label: "Tray",
-					submenu: [
-						{
-							label: "Disabled",
-							type: "radio",
-							checked: !config.get("options.tray"),
-							click: () => {
-								config.set("options.tray", false);
-								config.set("options.appVisible", true);
-							},
-						},
-						{
-							label: "Enabled + app visible",
-							type: "radio",
-							checked:
-								config.get("options.tray") && config.get("options.appVisible"),
-							click: () => {
-								config.set("options.tray", true);
-								config.set("options.appVisible", true);
-							},
-						},
-						{
-							label: "Enabled + app hidden",
-							type: "radio",
-							checked:
-								config.get("options.tray") && !config.get("options.appVisible"),
-							click: () => {
-								config.set("options.tray", true);
-								config.set("options.appVisible", false);
-							},
-						},
-						{ type: "separator" },
-						{
-							label: "Play/Pause on click",
-							type: "checkbox",
-							checked: config.get("options.trayClickPlayPause"),
-							click: (item) => {
-								config.set("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: "Disable hardware acceleration",
-							type: "checkbox",
-							checked: config.get("options.disableHardwareAcceleration"),
-							click: (item) => {
-								config.set("options.disableHardwareAcceleration", item.checked);
-							},
-						},
-						{
-							label: "Restart on config changes",
-							type: "checkbox",
-							checked: config.get("options.restartOnConfigChanges"),
-							click: (item) => {
-								config.set("options.restartOnConfigChanges", item.checked);
-							},
-						},
-						{
-							label: "Reset App cache when app starts",
-							type: "checkbox",
-							checked: config.get("options.autoResetAppCache"),
-							click: (item) => {
-								config.set("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" },
-			],
-		},
-		{
-			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: "Restart App",
-					click: () => {
-						app.relaunch();
-						app.quit();
-					},
-				},
-				{ 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.set("options.proxy", output);
-		item.checked = output !== "";
-	} else { //user pressed cancel
-		item.checked = !item.checked; //reset checkbox
-	}
-}

package.json

@@ -1,132 +1,186 @@
 {
-	"name": "youtube-music",
-	"productName": "YouTube Music",
-	"version": "1.15.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,
-			"icon": "assets/generated/icons/mac/icon.icns"
-		},
-		"win": {
-			"icon": "assets/generated/icons/win/icon.ico",
-			"target": [
-				"nsis",
-				"portable"
-			]
-		},
-		"nsis": {
-			"runAfterFinish": false
-		},
-		"linux": {
-			"icon": "assets/generated/icons/png",
-			"category": "AudioVideo",
-			"target": [
-				"AppImage",
-				"snap",
-				"freebsd",
-				"deb",
-				"rpm"
-			]
-		},
-		"snap": {
-			"slots": [
-				{
-					"mpris": {
-						"interface": "mpris"
-					}
-				}
-			]
-		}
-	},
-	"scripts": {
-		"test": "jest",
-		"start": "NODE_OPTIONS= electron .",
-		"start:debug": "ELECTRON_ENABLE_LOGGING=1 electron .",
-		"icon": "rimraf assets/generated && electron-icon-maker --input=assets/youtube-music.png --output=assets/generated",
-		"generate:package": "node utils/generate-package-json.js",
-		"postinstall": "yarn run icon && yarn run plugins",
-		"clean": "rimraf dist",
-		"build": "yarn run clean && electron-builder --win --mac --linux",
-		"build:linux": "yarn run clean && electron-builder --linux",
-		"build:mac": "yarn run clean && electron-builder --mac",
-		"build:win": "yarn run clean && electron-builder --win",
-		"lint": "xo",
-		"plugins": "yarn run plugin:adblocker",
-		"plugin:adblocker": "rimraf plugins/adblocker/ad-blocker-engine.bin && node plugins/adblocker/blocker.js",
-		"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": ">=14.0.0",
-		"npm": "Please use yarn and not npm"
-	},
-	"dependencies": {
-		"@cliqz/adblocker-electron": "^1.23.1",
-		"@electron/remote": "^2.0.1",
-		"@ffmpeg/core": "^0.10.0",
-		"@ffmpeg/ffmpeg": "^0.10.0",
-		"async-mutex": "^0.3.2",
-		"browser-id3-writer": "^4.4.0",
-		"chokidar": "^3.5.2",
-		"custom-electron-prompt": "^1.4.0",
-		"custom-electron-titlebar": "^3.2.9",
-		"discord-rpc": "^3.2.0",
-		"electron-better-web-request": "^1.0.1",
-		"electron-debug": "^3.2.0",
-		"electron-is": "^3.0.0",
-		"electron-localshortcut": "^3.2.1",
-		"electron-store": "^7.0.3",
-		"electron-unhandled": "^3.0.2",
-		"electron-updater": "^4.6.3",
-		"filenamify": "^4.3.0",
-		"hark": "^1.2.3",
-		"md5": "^2.3.0",
-		"mpris-service": "^2.1.2",
-		"node-fetch": "^2.6.6",
-		"node-notifier": "^9.0.1",
-		"ytdl-core": "^4.9.2",
-		"ytpl": "^2.2.3"
-	},
-	"devDependencies": {
-		"electron": "^16.0.5",
-		"electron-builder": "^22.10.5",
-		"electron-devtools-installer": "^3.1.1",
-		"electron-icon-maker": "0.0.5",
-		"jest": "^27.3.1",
-		"playwright": "^1.17.1",
-		"rimraf": "^3.0.2",
-		"xo": "^0.45.0"
-	},
-	"resolutions": {
-		"glob-parent": "5.1.2",
-		"minimist": "1.2.5",
-		"yargs-parser": "18.1.3"
-	},
-	"xo": {
-		"envs": [
-			"node",
-			"browser"
-		],
-		"rules": {
-			"quotes": [
-				"error",
-				"double",
-				{
-					"avoidEscape": true,
-					"allowTemplateLiterals": true
-				}
-			]
-		}
-	}
+  "name": "youtube-music",
+  "desktopName": "com.github.th_ch.youtube_music",
+  "productName": "YouTube Music",
+  "version": "3.9.0",
+  "description": "YouTube Music Desktop App - including custom plugins",
+  "main": "./dist/main/index.js",
+  "type": "module",
+  "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"
+  },
+  "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": ">=22",
+    "pnpm": ">=10"
+  },
+  "pnpm": {
+    "overrides": {
+      "vite": "npm:rolldown-vite@7.0.8",
+      "node-gyp": "11.2.0",
+      "xml2js": "0.6.2",
+      "node-fetch": "3.3.2",
+      "@electron/universal": "3.0.0",
+      "@babel/runtime": "7.27.6",
+      "vitefu": "1.1.1"
+    },
+    "patchedDependencies": {
+      "vudio@2.1.1": "patches/vudio@2.1.1.patch",
+      "@malept/flatpak-bundler@0.4.0": "patches/@malept__flatpak-bundler@0.4.0.patch",
+      "kuromoji@0.1.2": "patches/kuromoji@0.1.2.patch",
+      "file-type@16.5.4": "patches/file-type@16.5.4.patch"
+    },
+    "neverBuiltDependencies": []
+  },
+  "dependencies": {
+    "@electron-toolkit/tsconfig": "1.0.1",
+    "@electron/remote": "2.1.3",
+    "@ffmpeg.wasm/core-mt": "0.12.0",
+    "@ffmpeg.wasm/main": "0.12.0",
+    "@floating-ui/dom": "1.7.2",
+    "@foobar404/wave": "2.0.5",
+    "@ghostery/adblocker-electron": "2.11.1",
+    "@ghostery/adblocker-electron-preload": "2.11.1",
+    "@hono/node-server": "1.15.0",
+    "@hono/swagger-ui": "0.5.2",
+    "@hono/zod-openapi": "0.19.9",
+    "@hono/zod-validator": "0.7.0",
+    "@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.2",
+    "async-mutex": "0.5.0",
+    "bgutils-js": "3.2.0",
+    "butterchurn": "3.0.0-beta.4",
+    "butterchurn-presets": "3.0.0-beta.4",
+    "color": "5.0.0",
+    "conf": "14.0.0",
+    "custom-electron-prompt": "1.5.8",
+    "deepmerge-ts": "7.1.5",
+    "delay": "6.0.0",
+    "electron-debug": "4.1.0",
+    "electron-is": "3.0.0",
+    "electron-localshortcut": "3.2.1",
+    "electron-store": "10.1.0",
+    "electron-unhandled": "5.0.0",
+    "electron-updater": "6.6.2",
+    "es-hangul": "2.3.5",
+    "fast-average-color": "9.5.0",
+    "fast-equals": "5.2.2",
+    "fflate": "0.8.2",
+    "filenamify": "6.0.0",
+    "hanja": "1.1.4",
+    "happy-dom": "18.0.1",
+    "hono": "4.8.4",
+    "howler": "2.2.4",
+    "html-to-text": "9.0.5",
+    "i18next": "25.3.2",
+    "jimp": "1.6.0",
+    "keyboardevent-from-electron-accelerator": "2.0.0",
+    "keyboardevents-areequal": "0.2.2",
+    "kuromoji": "0.1.2",
+    "kuroshiro": "1.2.0",
+    "kuroshiro-analyzer-kuromoji": "1.1.0",
+    "lazy-var": "2.2.2",
+    "node-html-parser": "7.0.1",
+    "node-id3": "0.2.9",
+    "peerjs": "1.5.5",
+    "segmentit": "2.0.3",
+    "semver": "7.7.2",
+    "serve": "14.2.4",
+    "simple-youtube-age-restriction-bypass": "github:organization/Simple-YouTube-Age-Restriction-Bypass#v2.5.9",
+    "socks": "2.8.6",
+    "solid-element": "1.9.1",
+    "solid-floating-ui": "0.3.1",
+    "solid-js": "1.9.7",
+    "solid-styled-components": "0.28.5",
+    "solid-transition-group": "0.3.0",
+    "tiny-pinyin": "1.3.2",
+    "tinyld": "1.3.4",
+    "ts-morph": "26.0.0",
+    "virtua": "0.41.5",
+    "vudio": "2.1.1",
+    "x11": "2.3.0",
+    "youtubei.js": "14.0.0",
+    "zod": "4.0.5"
+  },
+  "devDependencies": {
+    "@eslint/js": "9.30.1",
+    "@malept/flatpak-bundler": "0.4.0",
+    "@playwright/test": "1.54.1",
+    "@stylistic/eslint-plugin": "5.1.0",
+    "@total-typescript/ts-reset": "0.6.1",
+    "@types/electron-localshortcut": "3.1.3",
+    "@types/howler": "2.2.12",
+    "@types/html-to-text": "9.0.4",
+    "@types/semver": "7.7.0",
+    "@types/trusted-types": "2.0.7",
+    "bufferutil": "4.0.9",
+    "builtin-modules": "5.0.0",
+    "cross-env": "7.0.3",
+    "del-cli": "6.0.0",
+    "discord-api-types": "0.38.15",
+    "electron": "37.2.1",
+    "electron-builder": "26.0.12",
+    "electron-builder-squirrel-windows": "26.0.12",
+    "electron-devtools-installer": "4.0.0",
+    "electron-vite": "4.0.0",
+    "esbuild": "0.25.6",
+    "eslint": "9.30.1",
+    "eslint-config-prettier": "10.1.5",
+    "eslint-import-resolver-exports": "1.0.0-beta.5",
+    "eslint-import-resolver-typescript": "4.4.4",
+    "eslint-plugin-import": "2.32.0",
+    "eslint-plugin-prettier": "5.5.1",
+    "eslint-plugin-solid": "0.14.5",
+    "glob": "11.0.3",
+    "node-gyp": "11.2.0",
+    "playwright": "1.54.1",
+    "rollup": "4.44.2",
+    "typescript": "5.8.3",
+    "typescript-eslint": "8.36.0",
+    "utf-8-validate": "6.0.5",
+    "vite": "npm:rolldown-vite@7.0.8",
+    "vite-plugin-inspect": "11.3.0",
+    "vite-plugin-resolve": "2.5.2",
+    "vite-plugin-solid": "2.11.7",
+    "ws": "8.18.3"
+  },
+  "auto-changelog": {
+    "hideCredit": true,
+    "package": true,
+    "unreleased": true,
+    "output": "changelog.md"
+  }
 }

patches/@malept__flatpak-bundler@0.4.0.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/file-type@16.5.4.patch

@@ -0,0 +1,14 @@
+diff --git a/core.js b/core.js
+index d653e66a4056c27cca777d4e25222acae3b2ec85..a91741d67df85fd9627889a6c7197ac4e6a3a813 100644
+--- a/core.js
++++ b/core.js
+@@ -1415,8 +1415,7 @@ async function _fromTokenizer(tokenizer) {
+ }
+
+ const stream = readableStream => new Promise((resolve, reject) => {
+-	// Using `eval` to work around issues when bundling with Webpack
+-	const stream = eval('require')('stream'); // eslint-disable-line no-eval
++	const stream = require('node:stream');
+
+ 	readableStream.on('error', reject);
+ 	readableStream.once('readable', async () => {

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,8 +0,0 @@
-const { loadAdBlockerEngine } = require("./blocker");
-module.exports = (win, options) =>
-	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/front.js

@@ -1,4 +0,0 @@
-module.exports = () => {
-	// Preload adblocker to inject scripts/styles
-	require("@cliqz/adblocker-electron-preload/dist/preload.cjs");
-};

plugins/audio-compressor/front.js

@@ -1,17 +0,0 @@
-const applyCompressor = () => {
-	const audioContext = new 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;
-
-	const source = audioContext.createMediaElementSource(document.querySelector("video"));
-
-	source.connect(compressor);
-	compressor.connect(audioContext.destination);
-};
-
-module.exports = () => document.addEventListener('apiLoaded', applyCompressor, { once: true, 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/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,148 +0,0 @@
-const Discord = require("discord-rpc");
-const { dev } = require("electron-is");
-const { dialog, app } = require("electron");
-
-const registerCallback = require("../../providers/song-info");
-
-// Application ID registered by @semvis123
-const clientId = "790655993809338398";
-
-/**
- * @typedef {Object} Info
- * @property {import('discord-rpc').Client} rpc
- * @property {boolean} ready
- * @property {import('../../providers/song-info').SongInfo} lastSongInfo
- */
-/**
- * @type {Info}
- */
-const info = {
-	rpc: null,
-	ready: false,
-	lastSongInfo: null,
-};
-/**
- * @type {(() => void)[]}
- */
-const refreshCallbacks = [];
-const resetInfo = () => {
-	info.rpc = null;
-	info.ready = false;
-	clearTimeout(clearActivity);
-	if (dev()) console.log("discord disconnected");
-	refreshCallbacks.forEach(cb => cb());
-};
-
-let window;
-const connect = (showErr = false) => {
-	if (info.rpc) {
-		if (dev())
-			console.log('Attempted to connect with active RPC object');
-		return;
-	}
-
-	info.rpc = new Discord.Client({
-		transport: "ipc",
-	});
-	info.ready = false;
-
-	info.rpc.once("connected", () => {
-		if (dev()) console.log("discord connected");
-		refreshCallbacks.forEach(cb => cb());
-	});
-	info.rpc.once("ready", () => {
-		info.ready = true;
-		if (info.lastSongInfo) updateActivity(info.lastSongInfo)
-	});
-	info.rpc.once("disconnected", resetInfo);
-
-	// Startup the rpc client
-	info.rpc.login({ clientId }).catch(err => {
-		resetInfo();
-		if (dev()) console.error(err);
-		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, { activityTimoutEnabled, activityTimoutTime, listenAlong }) => {
-	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.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 = {
-			type: 2, // Listening, addressed in https://github.com/discordjs/RPC/pull/149
-			details: songInfo.title,
-			state: songInfo.artist,
-			largeImageKey: songInfo.imageSrc,
-			largeImageText: [
-				songInfo.uploadDate,
-				songInfo.views.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + " views",
-			].join(' || '),
-			buttons: listenAlong ? [
-				{ label: "Listen Along", url: songInfo.url },
-			] : undefined,
-		};
-
-		if (songInfo.isPaused) {
-			// Add an idle icon to show that the song is paused
-			activityInfo.smallImageKey = "idle";
-			activityInfo.smallImageText = "idle/paused";
-			// Set start the timer so the activity gets cleared after a while if enabled
-			if (activityTimoutEnabled)
-				clearActivity = setTimeout(() => info.rpc.clearActivity().catch(console.error), activityTimoutTime ?? 10000);
-		} else {
-			// 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.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.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,47 +0,0 @@
-const { setOptions } = require("../../config/plugins");
-const { edit } = require("../../config");
-const { clear, connect, registerRefresh, isConnected } = require("./back");
-
-let hasRegisterred = false;
-
-module.exports = (win, options, refreshMenu) => {
-	if (!hasRegisterred) {
-		registerRefresh(refreshMenu);
-		hasRegisterred = true;
-	}
-
-	return [
-		{
-			label: isConnected() ? "Connected" : "Reconnect",
-			enabled: !isConnected(),
-			click: connect,
-		},
-		{
-			label: "Clear activity",
-			click: clear,
-		},
-		{
-			label: "Clear activity after timeout",
-			type: "checkbox",
-			checked: options.activityTimoutEnabled,
-			click: (item) => {
-				options.activityTimoutEnabled = item.checked;
-				setOptions('discord', options);
-			},
-		},
-		{
-			label: "Listen Along",
-			type: "checkbox",
-			checked: options.listenAlong,
-			click: (item) => {
-				options.listenAlong = item.checked;
-				setOptions('discord', options);
-			},
-		},
-		{
-			label: "Set timeout time in config",
-			// open config.json
-			click: edit,
-		},
-	];
-};

plugins/downloader/actions.js

@@ -1,11 +0,0 @@
-const CHANNEL = "downloader";
-const ACTIONS = {
-	ERROR: "error",
-	METADATA: "metadata",
-	PROGRESS: "progress",
-};
-
-module.exports = {
-	CHANNEL: CHANNEL,
-	ACTIONS: ACTIONS,
-};

plugins/downloader/back.js

@@ -1,87 +0,0 @@
-const { writeFileSync } = require("fs");
-const { join } = require("path");
-
-const ID3Writer = require("browser-id3-writer");
-const { dialog, ipcMain } = require("electron");
-
-const registerCallback = require("../../providers/song-info");
-const { injectCSS, listenAction } = require("../utils");
-const { cropMaxWidth } = require("./utils");
-const { ACTIONS, CHANNEL } = require("./actions.js");
-const { getImage } = require("../../providers/song-info");
-
-const sendError = (win, error) => {
-	win.setProgressBar(-1); // close progress bar
-	dialog.showMessageBox({
-		type: "info",
-		buttons: ["OK"],
-		title: "Error in download!",
-		message: "Argh! Apologies, download failed…",
-		detail: error.toString(),
-	});
-};
-
-let nowPlayingMetadata = {};
-
-function handle(win) {
-	injectCSS(win.webContents, join(__dirname, "style.css"));
-	registerCallback((info) => {
-		nowPlayingMetadata = info;
-	});
-
-	listenAction(CHANNEL, (event, action, arg) => {
-		switch (action) {
-			case ACTIONS.ERROR: // arg = error
-				sendError(win, arg);
-				break;
-			case ACTIONS.METADATA:
-				event.returnValue = JSON.stringify(nowPlayingMetadata);
-				break;
-			case ACTIONS.PROGRESS: // arg = progress
-				win.setProgressBar(arg);
-				break;
-			default:
-				console.log("Unknown action: " + action);
-		}
-	});
-
-	ipcMain.on("add-metadata", async (event, filePath, songBuffer, currentMetadata) => {
-		let fileBuffer = songBuffer;
-		const songMetadata = currentMetadata.imageSrcYTPL ? // This means metadata come from ytpl.getInfo();
-			{
-				...currentMetadata,
-				image: cropMaxWidth(await getImage(currentMetadata.imageSrcYTPL))
-			} :
-			{ ...nowPlayingMetadata, ...currentMetadata };
-
-		try {
-			const coverBuffer = songMetadata.image && !songMetadata.image.isEmpty() ?
-				songMetadata.image.toPNG() : null;
-
-			const writer = new ID3Writer(songBuffer);
-
-			// Create the metadata tags
-			writer
-				.setFrame("TIT2", songMetadata.title)
-				.setFrame("TPE1", [songMetadata.artist]);
-			if (coverBuffer) {
-				writer.setFrame("APIC", {
-					type: 3,
-					data: coverBuffer,
-					description: ""
-				});
-			}
-			writer.addTag();
-			fileBuffer = Buffer.from(writer.arrayBuffer);
-		} catch (error) {
-			sendError(win, error);
-		}
-
-		writeFileSync(filePath, fileBuffer);
-		// Notify the youtube-dl file
-		event.reply("add-metadata-done");
-	});
-}
-
-module.exports = handle;
-module.exports.sendError = sendError;

plugins/downloader/front.js

@@ -1,87 +0,0 @@
-const { contextBridge } = require("electron");
-
-const { defaultConfig } = require("../../config");
-const { getSongMenu } = require("../../providers/dom-elements");
-const { ElementFromFile, templatePath, triggerAction } = require("../utils");
-const { ACTIONS, CHANNEL } = require("./actions.js");
-const { downloadVideoToMP3 } = require("./youtube-dl");
-
-let menu = null;
-let progress = null;
-const downloadButton = ElementFromFile(
-	templatePath(__dirname, "download.html")
-);
-let pluginOptions = {};
-
-const observer = new MutationObserver((mutations, observer) => {
-	if (!menu) {
-		menu = getSongMenu();
-	}
-
-	if (menu && !menu.contains(downloadButton)) {
-		menu.prepend(downloadButton);
-		progress = document.querySelector("#ytmcustom-download");
-	}
-});
-
-const reinit = () => {
-	triggerAction(CHANNEL, ACTIONS.PROGRESS, -1); // closes progress bar
-	if (!progress) {
-		console.warn("Cannot update progress");
-	} else {
-		progress.innerHTML = "Download";
-	}
-};
-
-const baseUrl = defaultConfig.url;
-
-// TODO: re-enable once contextIsolation is set to true
-// contextBridge.exposeInMainWorld("downloader", {
-// 	download: () => {
-global.download = () => {
-	triggerAction(CHANNEL, ACTIONS.PROGRESS, 2); // starts with indefinite progress bar
-	let metadata;
-	let videoUrl = getSongMenu()
-		// selector of first button which is always "Start Radio"
-		?.querySelector('ytmusic-menu-navigation-item-renderer.iron-selected[tabindex="0"] #navigation-endpoint')
-		?.getAttribute("href");
-	if (videoUrl) {
-		videoUrl = baseUrl + "/" + videoUrl;
-		metadata = null;
-	} else {
-		metadata = global.songInfo;
-		videoUrl = metadata.url || window.location.href;
-	}
-
-	downloadVideoToMP3(
-		videoUrl,
-		(feedback, ratio = undefined) => {
-			if (!progress) {
-				console.warn("Cannot update progress");
-			} else {
-				progress.innerHTML = feedback;
-			}
-			if (ratio) {
-				triggerAction(CHANNEL, ACTIONS.PROGRESS, ratio);
-			}
-		},
-		(error) => {
-			triggerAction(CHANNEL, ACTIONS.ERROR, error);
-			reinit();
-		},
-		reinit,
-		pluginOptions,
-		metadata
-	);
-};
-// });
-
-function observeMenu(options) {
-	pluginOptions = { ...pluginOptions, ...options };
-	observer.observe(document, {
-		childList: true,
-		subtree: true,
-	});
-}
-
-module.exports = observeMenu;

plugins/downloader/menu.js

@@ -1,125 +0,0 @@
-const { existsSync, mkdirSync } = require("fs");
-const { join } = require("path");
-
-const { dialog, ipcMain } = require("electron");
-const is = require("electron-is");
-const ytpl = require("ytpl");
-const chokidar = require('chokidar');
-
-const { setOptions } = require("../../config/plugins");
-const { sendError } = require("./back");
-const { defaultMenuDownloadLabel, getFolder, presets } = require("./utils");
-
-let downloadLabel = defaultMenuDownloadLabel;
-let playingPlaylistId = undefined;
-let callbackIsRegistered = false;
-
-module.exports = (win, options) => {
-	if (!callbackIsRegistered) {
-		ipcMain.on("video-src-changed", async (_, data) => {
-			playingPlaylistId = JSON.parse(data)?.videoDetails?.playlistId;
-		});
-		callbackIsRegistered = true;
-	}
-
-	return [
-		{
-			label: downloadLabel,
-			click: async () => {
-				const currentPagePlaylistId = new URL(win.webContents.getURL()).searchParams.get("list");
-				const playlistId = currentPagePlaylistId || playingPlaylistId;
-				if (!playlistId) {
-					sendError(win, new Error("No playlist ID found"));
-					return;
-				}
-
-				console.log(`trying to get playlist ID: '${playlistId}'`);
-				let playlist;
-				try {
-					playlist = await ytpl(playlistId, {
-						limit: options.playlistMaxItems || Infinity,
-					});
-				} catch (e) {
-					sendError(win, e);
-					return;
-				}
-				const playlistTitle = playlist.title;
-
-				const folder = getFolder(options.downloadFolder);
-				const playlistFolder = join(folder, playlistTitle);
-				if (existsSync(playlistFolder)) {
-					sendError(
-						win,
-						new Error(`The folder ${playlistFolder} already exists`)
-					);
-					return;
-				}
-				mkdirSync(playlistFolder, { recursive: true });
-
-				dialog.showMessageBox({
-					type: "info",
-					buttons: ["OK"],
-					title: "Started Download",
-					message: `Downloading Playlist "${playlistTitle}"`,
-					detail: `(${playlist.items.length} songs)`,
-				});
-
-				if (is.dev()) {
-					console.log(
-						`Downloading playlist "${playlistTitle}" (${playlist.items.length} songs)`
-					);
-				}
-
-				const steps = 1 / playlist.items.length;
-				let progress = 0;
-
-				win.setProgressBar(2); // starts with indefinite bar
-
-				let dirWatcher = chokidar.watch(playlistFolder);
-				dirWatcher.on('add', () => {
-					progress += steps;
-					if (progress >= 0.9999) {
-						win.setProgressBar(-1); // close progress bar
-						dirWatcher.close().then(() => dirWatcher = null);
-					} else {
-						win.setProgressBar(progress);
-					}
-				});
-
-				playlist.items.forEach((song) => {
-					win.webContents.send(
-						"downloader-download-playlist",
-						song.url,
-						playlistTitle,
-						options
-					);
-				});
-			},
-		},
-		{
-			label: "Choose download folder",
-			click: () => {
-				let result = dialog.showOpenDialogSync({
-					properties: ["openDirectory", "createDirectory"],
-					defaultPath: getFolder(options.downloadFolder),
-				});
-				if (result) {
-					options.downloadFolder = result[0];
-					setOptions("downloader", options);
-				} // else = user pressed cancel
-			},
-		},
-		{
-			label: "Presets",
-			submenu: Object.keys(presets).map((preset) => ({
-				label: preset,
-				type: "radio",
-				click: () => {
-					options.preset = preset;
-					setOptions("downloader", options);
-				},
-				checked: options.preset === preset || presets[preset] === undefined,
-			})),
-		},
-	];
-};

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,39 +0,0 @@
-const electron = require("electron");
-
-module.exports.getFolder = customFolder => customFolder || electron.app.getPath("downloads");
-module.exports.defaultMenuDownloadLabel = "Download playlist";
-
-const orderedQualityList = ["maxresdefault", "hqdefault", "mqdefault", "sdddefault"];
-module.exports.urlToJPG = (imgUrl, videoId) => {
-	if (!imgUrl || imgUrl.includes(".jpg")) return imgUrl;
-	//it will almost never get further than hqdefault
-	for (const quality of orderedQualityList) {
-		if (imgUrl.includes(quality)) {
-			return `https://img.youtube.com/vi/${videoId}/${quality}.jpg`;
-		}
-	}
-	return `https://img.youtube.com/vi/${videoId}/default.jpg`;
-}
-
-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"],
-	},
-};

plugins/downloader/youtube-dl.js

@@ -1,201 +0,0 @@
-const { randomBytes } = require("crypto");
-const { join } = require("path");
-
-const Mutex = require("async-mutex").Mutex;
-const { ipcRenderer } = require("electron");
-const remote = require('@electron/remote');
-const is = require("electron-is");
-const filenamify = require("filenamify");
-
-// Browser version of FFmpeg (in renderer process) instead of loading @ffmpeg/ffmpeg
-// because --js-flags cannot be passed in the main process when the app is packaged
-// See https://github.com/electron/electron/issues/22705
-const FFmpeg = require("@ffmpeg/ffmpeg/dist/ffmpeg.min");
-const ytdl = require("ytdl-core");
-
-const { triggerAction, triggerActionSync } = require("../utils");
-const { ACTIONS, CHANNEL } = require("./actions.js");
-const { presets, urlToJPG } = require("./utils");
-const { cleanupName } = require("../../providers/song-info");
-
-const { createFFmpeg } = FFmpeg;
-const ffmpeg = createFFmpeg({
-	log: false,
-	logger: () => {}, // console.log,
-	progress: () => {}, // console.log,
-});
-const ffmpegMutex = new Mutex();
-
-const downloadVideoToMP3 = async (
-	videoUrl,
-	sendFeedback,
-	sendError,
-	reinit,
-	options,
-	metadata = undefined,
-	subfolder = ""
-) => {
-	sendFeedback("Downloading…");
-
-	if (metadata === null) {
-		const { videoDetails } = await ytdl.getInfo(videoUrl);
-		const thumbnails = videoDetails?.thumbnails;
-		metadata = {
-			artist:
-				videoDetails?.media?.artist ||
-				cleanupName(videoDetails?.author?.name) ||
-				"",
-			title: videoDetails?.media?.song || videoDetails?.title || "",
-			imageSrcYTPL: thumbnails ? 
-				urlToJPG(thumbnails[thumbnails.length - 1].url, videoDetails?.videoId)
-				: ""
-		}
-	}
-
-	let videoName = "YouTube Music - Unknown title";
-	let videoReadableStream;
-	try {
-		videoReadableStream = ytdl(videoUrl, {
-			filter: "audioonly",
-			quality: "highestaudio",
-			highWaterMark: 32 * 1024 * 1024, // 32 MB
-			requestOptions: { maxRetries: 3 },
-		});
-	} catch (err) {
-		sendError(err);
-		return;
-	}
-
-	const chunks = [];
-	videoReadableStream
-		.on("data", (chunk) => {
-			chunks.push(chunk);
-		})
-		.on("progress", (_chunkLength, downloaded, total) => {
-			const ratio = downloaded / total;
-			const progress = Math.floor(ratio * 100);
-			sendFeedback("Download: " + progress + "%", ratio);
-		})
-		.on("info", (info, format) => {
-			videoName = info.videoDetails.title.replace("|", "").toString("ascii");
-			if (is.dev()) {
-				console.log(
-					"Downloading video - name:",
-					videoName,
-					"- quality:",
-					format.audioBitrate + "kbits/s"
-				);
-			}
-		})
-		.on("error", sendError)
-		.on("end", async () => {
-			const buffer = Buffer.concat(chunks);
-			await toMP3(
-				videoName,
-				buffer,
-				sendFeedback,
-				sendError,
-				reinit,
-				options,
-				metadata,
-				subfolder
-			);
-		});
-};
-
-const toMP3 = async (
-	videoName,
-	buffer,
-	sendFeedback,
-	sendError,
-	reinit,
-	options,
-	existingMetadata = undefined,
-	subfolder = ""
-) => {
-	const convertOptions = { ...presets[options.preset], ...options };
-	const safeVideoName = randomBytes(32).toString("hex");
-	const extension = convertOptions.extension || "mp3";
-	const releaseFFmpegMutex = await ffmpegMutex.acquire();
-
-	try {
-		if (!ffmpeg.isLoaded()) {
-			sendFeedback("Loading…", 2); // indefinite progress bar after download
-			await ffmpeg.load();
-		}
-
-		sendFeedback("Preparing file…");
-		ffmpeg.FS("writeFile", safeVideoName, buffer);
-
-		sendFeedback("Converting…");
-		const metadata = existingMetadata || getMetadata();
-		await ffmpeg.run(
-			"-i",
-			safeVideoName,
-			...getFFmpegMetadataArgs(metadata),
-			...(convertOptions.ffmpegArgs || []),
-			safeVideoName + "." + extension
-		);
-
-		const folder = options.downloadFolder || remote.app.getPath("downloads");
-		const name = metadata.title
-			? `${metadata.artist ? `${metadata.artist} - ` : ""}${metadata.title}`
-			: videoName;
-		const filename = filenamify(name + "." + extension, {
-			replacement: "_",
-			maxLength: 255,
-		});
-
-		const filePath = join(folder, subfolder, filename);
-		const fileBuffer = ffmpeg.FS("readFile", safeVideoName + "." + extension);
-
-		// Add the metadata
-		sendFeedback("Adding metadata…");
-		ipcRenderer.send("add-metadata", filePath, fileBuffer, {
-			artist: metadata.artist,
-			title: metadata.title,
-			imageSrcYTPL: metadata.imageSrcYTPL
-		});
-		ipcRenderer.once("add-metadata-done", reinit);
-	} catch (e) {
-		sendError(e);
-	} finally {
-		releaseFFmpegMutex();
-	}
-};
-
-const getMetadata = () => {
-	return JSON.parse(triggerActionSync(CHANNEL, ACTIONS.METADATA));
-};
-
-const getFFmpegMetadataArgs = (metadata) => {
-	if (!metadata) {
-		return;
-	}
-
-	return [
-		...(metadata.title ? ["-metadata", `title=${metadata.title}`] : []),
-		...(metadata.artist ? ["-metadata", `artist=${metadata.artist}`] : []),
-	];
-};
-
-module.exports = {
-	downloadVideoToMP3,
-};
-
-ipcRenderer.on(
-	"downloader-download-playlist",
-	(_, url, playlistFolder, options) => {
-		downloadVideoToMP3(
-			url,
-			() => {},
-			(error) => {
-				triggerAction(CHANNEL, ACTIONS.ERROR, error);
-			},
-			() => {},
-			options,
-			null,
-			playlistFolder
-		);
-	}
-);

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,33 +0,0 @@
-const path = require("path");
-
-const electronLocalshortcut = require("electron-localshortcut");
-
-const config = require("../../config");
-const { injectCSS } = require("../utils");
-
-//tracks menu visibility
-let visible = true;
-
-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", () => {
-		//register keyboard shortcut && hide menu if hideMenu is enabled
-		if (config.get("options.hideMenu")) {
-			electronLocalshortcut.register(win, "Esc", () => {
-				setMenuVisibility(!visible);
-			});
-		}
-	});
-
-	win.webContents.once("did-finish-load", () => {
-		// fix bug with menu not applying on start when no internet connection available
-		setMenuVisibility(!config.get("options.hideMenu"));
-	});
-
-	function setMenuVisibility(value) {
-		visible = value;
-		win.webContents.send("updateMenu", visible);
-	}
-};

plugins/in-app-menu/front.js

@@ -1,33 +0,0 @@
-const { ipcRenderer } = require("electron");
-const { Menu } = require("@electron/remote");
-
-
-const customTitlebar = require("custom-electron-titlebar");
-function $(selector) { return document.querySelector(selector); }
-
-module.exports = () => {
-	const bar = new customTitlebar.Titlebar({
-		backgroundColor: customTitlebar.Color.fromHex("#050505"),
-		itemBackgroundColor: customTitlebar.Color.fromHex("#121212"),
-	});
-	bar.updateTitle(" ");
-	document.title = "Youtube Music";
-
-	ipcRenderer.on("updateMenu", function (_event, showMenu) {
-		bar.updateMenu(showMenu ? Menu.getApplicationMenu() : null);
-	});
-
-	// 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_'] })
-	}, { once: true, passive: true })
-};
-
-function setNavbarMargin() {
-	$('#nav-bar-background').style.right =
-		$('ytmusic-app-layout').playerPageOpen_ ?
-			'0px' :
-			'12px';
-}

plugins/in-app-menu/style.css

@@ -1,73 +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;
-	position: sticky !important;
-	top: 0 !important;
-	height: 75px !important;
-}
-
-/* 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 {
-	background-clip: padding-box;
-	border: 2px solid rgba(0, 0, 0, 0);
-
-	background: #3a3a3a;
-	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;
-}

plugins/last-fm/back.js

@@ -1,160 +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,
-		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,52 +0,0 @@
-const { join } = require("path");
-
-const { ipcMain } = require("electron");
-const is = require("electron-is");
-const fetch = require("node-fetch");
-
-const { cleanupName } = require("../../providers/song-info");
-const { injectCSS } = require("../utils");
-
-module.exports = async (win) => {
-	injectCSS(win.webContents, join(__dirname, "style.css"));
-
-	ipcMain.on("search-genius-lyrics", async (event, extractedSongInfo) => {
-		const metadata = JSON.parse(extractedSongInfo);
-		const queryString = `${cleanupName(metadata.artist)} ${cleanupName(
-			metadata.title
-		)}`;
-
-		let response = await fetch(
-			`https://genius.com/api/search/multi?per_page=5&q=${encodeURI(
-				queryString
-			)}`
-		);
-		if (!response.ok) {
-			event.returnValue = null;
-			return;
-		}
-
-		const info = await response.json();
-		let url = "";
-		try {
-			url = info.response.sections.filter(
-				(section) => section.type === "song"
-			)[0].hits[0].result.url;
-		} catch {
-			event.returnValue = null;
-			return;
-		}
-
-		if (is.dev()) {
-			console.log("Fetching lyrics from Genius:", url);
-		}
-
-		response = await fetch(url);
-		if (!response.ok) {
-			event.returnValue = null;
-			return;
-		}
-
-		event.returnValue = await response.text();
-	});
-};

plugins/lyrics-genius/front.js

@@ -1,67 +0,0 @@
-const { ipcRenderer } = require("electron");
-const is = require("electron-is");
-
-module.exports = () => {
-	ipcRenderer.on("update-song-info", (_, extractedSongInfo) => {
-		const lyricsTab = document.querySelector('tp-yt-paper-tab[tabindex="-1"]');
-
-		// Check if disabled
-		if (!lyricsTab || !lyricsTab.hasAttribute("disabled")) {
-			return;
-		}
-
-		const html = ipcRenderer.sendSync(
-			"search-genius-lyrics",
-			extractedSongInfo
-		);
-		if (!html) {
-			return;
-		} else if (is.dev()) {
-			console.log("Fetched lyrics from Genius");
-		}
-
-		const wrapper = document.createElement("div");
-		wrapper.innerHTML = html;
-		const lyricsSelector1 = wrapper.querySelector(".lyrics");
-		const lyricsSelector2 = wrapper.querySelector(
-			'[class^="Lyrics__Container"]'
-		);
-		const lyrics = lyricsSelector1
-			? lyricsSelector1.innerHTML
-			: lyricsSelector2
-			? lyricsSelector2.innerHTML
-			: null;
-		if (!lyrics) {
-			return;
-		}
-
-		lyricsTab.removeAttribute("disabled");
-		lyricsTab.removeAttribute("aria-disabled");
-		document.querySelector("tp-yt-paper-tab").onclick = () => {
-			lyricsTab.removeAttribute("disabled");
-			lyricsTab.removeAttribute("aria-disabled");
-		};
-
-		lyricsTab.onclick = () => {
-			const tabContainer = document.querySelector("ytmusic-tab-renderer");
-			const observer = new MutationObserver((_, observer) => {
-				const lyricsContainer = document.querySelector(
-					'[page-type="MUSIC_PAGE_TYPE_TRACK_LYRICS"] > ytmusic-message-renderer'
-				);
-				if (lyricsContainer) {
-					lyricsContainer.innerHTML = `<div id="contents" class="style-scope ytmusic-section-list-renderer genius-lyrics">
-			 			${lyrics}
-
-			 			<yt-formatted-string class="footer style-scope ytmusic-description-shelf-renderer">Source&nbsp;: Genius</yt-formatted-string>
-					</div>`;
-					observer.disconnect();
-				}
-			});
-			observer.observe(tabContainer, {
-				attributes: true,
-				childList: true,
-				subtree: true,
-			});
-		};
-	});
-};

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;
-}
-
-#contents.genius-lyrics {
-    font-size: 1vw;
-    opacity: 0.9;
-}

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,36 +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;
-	color: #fff;
-	--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);
-}

plugins/navigation/templates/back.html

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

plugins/navigation/templates/forward.html

@@ -1,35 +0,0 @@
-<div
-	class="style-scope ytmusic-pivot-bar-renderer navigation-item"
-	tab-id="FEmusic_next"
-	role="tab"
-	onclick="goToNextPage()"
->
-	<div
-		class="search-icon style-scope ytmusic-search-box"
-		role="button"
-		tabindex="0"
-		aria-disabled="false"
-		title="Go to next page"
-	>
-		<div
-			id="icon"
-			class="tab-icon style-scope paper-icon-button navigation-icon"
-		>
-			<svg
-				viewBox="0 0 492 492"
-				preserveAspectRatio="xMidYMid meet"
-				focusable="false"
-				class="style-scope iron-icon"
-				style="pointer-events: none; display: block; width: 100%; height: 100%;"
-			>
-				<g class="style-scope iron-icon">
-					<path
-						d="M382.7,226.8L163.7,7.9c-5.1-5.1-11.8-7.9-19-7.9s-14,2.8-19,7.9L109.5,24c-10.5,10.5-10.5,27.6,0,38.1
-                    l183.9,183.9L109.3,430c-5.1,5.1-7.9,11.8-7.9,19c0,7.2,2.8,14,7.9,19l16.1,16.1c5.1,5.1,11.8,7.9,19,7.9s14-2.8,19-7.9L382.7,265
-                    c5.1-5.1,7.9-11.9,7.8-19.1C390.5,238.7,387.8,231.9,382.7,226.8z"
-					></path>
-				</g>
-			</svg>
-		</div>
-	</div>
-</div>