release 3.3.2

Co-authored-by: JellyBrick <shlee1503@naver.com>
Co-authored-by: Totto <32566573+Totto16@users.noreply.github.com>

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -26,9 +26,10 @@ body:
     required: true
 - type: checkboxes
   attributes:
-    label: Are you using the portable version of the YouTube Music Application?
+    label: Checklists
     options:
       - label: I use the portable version of the YouTube Music Application.
+      - label: I can reproduce this issue in the [official YTM web version](https://music.youtube.com).
 - type: dropdown
   attributes:
     label: What operating system are you using?
@@ -49,7 +50,7 @@ body:
     required: true
 - type: dropdown
   attributes:
-    label: What arch are you using?
+    label: What CPU architecture are you using?
     options:
       - x64
       - ia32

.github/ISSUE_TEMPLATE/feature_request.yml

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

.github/workflows/dependency-review.yml

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

README.md

@@ -14,6 +14,7 @@
 
 ![Screenshot](web/screenshot.jpg "Screenshot")
 
+
 <div align="center">
 	<a href="https://github.com/th-ch/youtube-music/releases/latest">
 		<img src="web/youtube-music.svg" width="400" height="100" alt="YouTube Music SVG">
@@ -28,6 +29,12 @@ Read this in other languages: [🇰🇷](./docs/readme/README-ko.md)
 - Framework for custom plugins: change YouTube Music to your needs (style, content, features), enable/disable plugins in
   one click
 
+## Demo Image
+
+|                          Player Screen (album color theme & ambient light)                                |
+|:---------------------------------------------------------------------------------------------------------:|
+|![Screenshot1](https://github.com/th-ch/youtube-music/assets/16558115/53efdf73-b8fa-4d7b-a235-b96b91ea77fc)|
+
 ## Translation
 
 You can help with translation on [Hosted Weblate](https://hosted.weblate.org/projects/youtube-music/).
@@ -104,26 +111,28 @@ winget install th-ch.YouTubeMusic
 
 - **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.
+- **Ambient Mode**: Applies a lighting effect by casting gentle colors from the video, into your screen’s background
 
 - **Audio Compressor**: Apply compression to audio (lowers the volume of the loudest parts of the signal and raises the
   volume of the softest parts)
 
-- **Blur Nav Bar**: makes navigation bar transparent and blurry
+- **Blur Navigation Bar**: makes navigation bar transparent and blurry
 
-- **Bypass age restrictions**: bypass YouTube's age verification
+- **Bypass Age Restrictions**: bypass YouTube's age verification
 
-- **Captions selector**: Enable captions
+- **Captions Selector**: Enable captions
 
-- **Compact sidebar**: Always set the sidebar in compact mode
+- **Compact Sidebar**: Always set the sidebar in compact mode
 
 - **Crossfade**: Crossfade between songs
 
 - **Disable Autoplay**: Makes every song start in "paused" mode
 
-- [**Discord**](https://discord.com/): Show your friends what you listen to
+- **[Discord](https://discord.com/) Rich Presence**: Show your friends what you listen to
   with [Rich Presence](https://user-images.githubusercontent.com/28219076/104362104-a7a0b980-5513-11eb-9744-bb89eabe0016.png)
 
 - **Downloader**: downloads
@@ -131,19 +140,21 @@ winget install th-ch.YouTubeMusic
 
 - **Exponential Volume**: Makes the volume
   slider [exponential](https://greasyfork.org/en/scripts/397686-youtube-music-fix-volume-ratio/) so it's easier to
-  select lower volumes.
+  select lower volumes
 
 - **In-App Menu**: [gives bars a fancy, dark look](https://user-images.githubusercontent.com/78568641/112215894-923dbf00-8c29-11eb-95c3-3ce15db27eca.png)
 
   > (see [this post](https://github.com/th-ch/youtube-music/issues/410#issuecomment-952060709) if you have problem
   accessing the menu after enabling this plugin and hide-menu option)
 
-- [**Last.fm**](https://www.last.fm/): Scrobbles support
+- **Scrobbler**: Adds scrobbling support for [Last.fm](https://www.last.fm/) and [ListenBrainz](https://listenbrainz.org/)
 
 - **Lumia Stream**: Adds [Lumia Stream](https://lumiastream.com/) support
 
 - **Lyrics Genius**: Adds lyrics support for most songs
 
+- **Music Together**: Share a playlist with others. When the host plays a song, everyone else will hear the same song
+
 - **Navigation**: Next/Back navigation arrows directly integrated in the interface, like in your favorite browser
 
 - **No Google Login**: Remove Google login buttons and links from the interface
@@ -152,7 +163,7 @@ winget install th-ch.YouTubeMusic
   playing ([interactive notifications](https://user-images.githubusercontent.com/78568641/114102651-63ce0e00-98d0-11eb-9dfe-c5a02bb54f9c.png)
   are available on windows)
 
-- **Picture in picture**: allows to switch the app to picture-in-picture mode
+- **Picture-in-picture**: allows to switch the app to picture-in-picture mode
 
 - **Playback Speed**: Listen fast, listen
   slow! [Adds a slider that controls song speed](https://user-images.githubusercontent.com/61631665/129976003-e55db5ba-bf42-448c-a059-26a009775e68.png)
@@ -160,17 +171,15 @@ winget install th-ch.YouTubeMusic
 - **Precise Volume**: Control the volume precisely using mousewheel/hotkeys, with a custom hud and customizable volume
   steps
 
-- **Quality Changer**: Allows changing the video quality with
+- **Shortcuts (& MPRIS)**: Allows setting global hotkeys for playback (play/pause/next/previous) +
-  a [button](https://user-images.githubusercontent.com/78568641/138574366-70324a5e-2d64-4f6a-acdd-dc2a2b9cecc5.png) on
-  the video overlay
-
-- **Shortcuts**: Allows setting global hotkeys for playback (play/pause/next/previous) +
   disable [media osd](https://user-images.githubusercontent.com/84923831/128601225-afa38c1f-dea8-4209-9f72-0f84c1dd8b54.png)
   by overriding media keys + enable Ctrl/CMD + F to search + enable linux mpris support for
   mediakeys + [custom hotkeys](https://github.com/Araxeus/youtube-music/blob/1e591d6a3df98449bcda6e63baab249b28026148/providers/song-controls.js#L13-L50)
   for [advanced users](https://github.com/th-ch/youtube-music/issues/106#issuecomment-952156902)
 
-- **Skip-Silences** - Automatically skip silenced sections
+- **Skip Disliked Song**: Skips disliked songs
+
+- **Skip Silences**: Automatically skip silenced sections
 
 - [**SponsorBlock**](https://github.com/ajayyy/SponsorBlock): Automatically Skips non-music parts like intro/outro or
   parts of music videos where the song isn't playing
@@ -178,11 +187,15 @@ winget install th-ch.YouTubeMusic
 - **Taskbar Media Control**: Control playback from
   your [Windows taskbar](https://user-images.githubusercontent.com/78568641/111916130-24a35e80-8a82-11eb-80c8-5021c1aa27f4.png)
 
-- **Touchbar**: Custom TouchBar layout for macOS
+- **TouchBar**: Custom TouchBar layout for macOS
 
-- **Tuna-OBS**: Integration with [OBS](https://obsproject.com/)'s
+- **Tuna OBS**: Integration with [OBS](https://obsproject.com/)'s
   plugin [Tuna](https://obsproject.com/forum/resources/tuna.843/)
 
+- **Video Quality Changer**: Allows changing the video quality with
+  a [button](https://user-images.githubusercontent.com/78568641/138574366-70324a5e-2d64-4f6a-acdd-dc2a2b9cecc5.png) on
+  the video overlay
+
 - **Video Toggle**: Adds
   a [button](https://user-images.githubusercontent.com/28893833/173663950-63e6610e-a532-49b7-9afa-54cb57ddfc15.png) to
   switch between Video/Song mode. can also optionally remove the whole video tab
@@ -213,7 +226,7 @@ Using plugins, you can:
 
 ### Creating a plugin
 
-Create a folder in `plugins/YOUR-PLUGIN-NAME`:
+Create a folder in `src/plugins/YOUR-PLUGIN-NAME`:
 
 - `index.ts`: the main file of the plugin
 ```typescript

changelog.md

@@ -2,8 +2,124 @@
 
 All notable changes to this project will be documented in this file. Dates are displayed in UTC.
 
+#### [v3.3.1](https://github.com/th-ch/youtube-music/compare/v3.3.0...v3.3.1)
+
+- Update changelog for v3.3.0 [`6d9bb8e`](https://github.com/th-ch/youtube-music/commit/6d9bb8eb1cc2d892a5552ffb1f7c20859aa80f67)
+- hotfix: in-app-menu position issue [`87acf4c`](https://github.com/th-ch/youtube-music/commit/87acf4cf042ba32a000a4aeaec5c17c93501d333)
+- release 3.3.1 (HOTFIX) [`a6ed8bf`](https://github.com/th-ch/youtube-music/commit/a6ed8bf3aa20ca8e950e85d88f981ccf9edc7498)
+
+#### [v3.3.0](https://github.com/th-ch/youtube-music/compare/v3.2.2...v3.3.0)
+
+> 18 February 2024
+
+- fix(deps): update dependency i18next to v23.8.3 [`#1751`](https://github.com/th-ch/youtube-music/pull/1751)
+- import fixed ./constants [`#1748`](https://github.com/th-ch/youtube-music/pull/1748)
+- chore(deps): update dependency rollup to v4.12.0 [`#1743`](https://github.com/th-ch/youtube-music/pull/1743)
+- chore(deps): bump undici from 5.28.2 to 5.28.3 [`#1747`](https://github.com/th-ch/youtube-music/pull/1747)
+- chore(deps): update dependency vite to v5.1.3 [`#1742`](https://github.com/th-ch/youtube-music/pull/1742)
+- chore(deps): update dependency vite-plugin-solid to v2.10.1 [`#1734`](https://github.com/th-ch/youtube-music/pull/1734)
+- chore(deps): update dependency discord-api-types to v0.37.70 [`#1740`](https://github.com/th-ch/youtube-music/pull/1740)
+- chore(deps): update dependency electron to v28.2.3 [`#1736`](https://github.com/th-ch/youtube-music/pull/1736)
+- chore(deps): update pnpm to v8.15.3 [`#1739`](https://github.com/th-ch/youtube-music/pull/1739)
+- chore(deps): update dependency rollup to v4.11.0 [`#1738`](https://github.com/th-ch/youtube-music/pull/1738)
+- fix(deps): update dependency solid-js to v1.8.15 [`#1735`](https://github.com/th-ch/youtube-music/pull/1735)
+- chore(deps): update dependency vite to v5.1.2 [`#1733`](https://github.com/th-ch/youtube-music/pull/1733)
+- chore(deps): update dependency vite-plugin-solid to v2.10.0 [`#1732`](https://github.com/th-ch/youtube-music/pull/1732)
+- chore(deps): update pnpm to v8.15.2 [`#1729`](https://github.com/th-ch/youtube-music/pull/1729)
+- Update Copyright - 2024 [`#1730`](https://github.com/th-ch/youtube-music/pull/1730)
+- chore(deps): update dependency @typescript-eslint/eslint-plugin to v7 [`#1728`](https://github.com/th-ch/youtube-music/pull/1728)
+- fix(deps): update dependency @floating-ui/dom to v1.6.3 [`#1727`](https://github.com/th-ch/youtube-music/pull/1727)
+- chore(deps): update dependency electron to v28.2.2 [`#1717`](https://github.com/th-ch/youtube-music/pull/1717)
+- chore(deps): update dependency vite to v5.1.1 [`#1718`](https://github.com/th-ch/youtube-music/pull/1718)
+- chore(deps): update dependency @types/semver to v7.5.7 [`#1724`](https://github.com/th-ch/youtube-music/pull/1724)
+- fix(deps): update dependency @floating-ui/dom to v1.6.2 [`#1725`](https://github.com/th-ch/youtube-music/pull/1725)
+- chore(deps): update dependency rollup to v4.10.0 [`#1719`](https://github.com/th-ch/youtube-music/pull/1719)
+- fix(deps): update dependency solid-js to v1.8.14 [`#1713`](https://github.com/th-ch/youtube-music/pull/1713)
+- chore(deps): update dependency @typescript-eslint/eslint-plugin to v6.21.0 [`#1711`](https://github.com/th-ch/youtube-music/pull/1711)
+- fix(deps): update dependency semver to v7.6.0 [`#1712`](https://github.com/th-ch/youtube-music/pull/1712)
+- refactor(in-app-menu): refactor `in-app-menu` plugin [`#1710`](https://github.com/th-ch/youtube-music/pull/1710)
+- chore(deps): update playwright monorepo to v1.41.2 [`#1706`](https://github.com/th-ch/youtube-music/pull/1706)
+- chore(deps): update dependency electron to v29.0.0-beta.5 [`#1707`](https://github.com/th-ch/youtube-music/pull/1707)
+- feat(album-color-theme): support album color theme in all pages [`#1685`](https://github.com/th-ch/youtube-music/pull/1685)
+- fix(deps): update dependency youtubei.js to v9.0.2 [`#1704`](https://github.com/th-ch/youtube-music/pull/1704)
+- fix(deps): update dependency i18next to v23.8.2 [`#1702`](https://github.com/th-ch/youtube-music/pull/1702)
+- feat: Support disabling scrobbling for non-music content [`#1665`](https://github.com/th-ch/youtube-music/pull/1665)
+- fix(deps): update dependency youtubei.js to v9 [`#1682`](https://github.com/th-ch/youtube-music/pull/1682)
+- chore(deps): update dependency electron to v29.0.0-beta.4 [`#1698`](https://github.com/th-ch/youtube-music/pull/1698)
+- fix(deps): update dependency i18next to v23.8.1 [`#1694`](https://github.com/th-ch/youtube-music/pull/1694)
+- chore(deps): update dependency @typescript-eslint/eslint-plugin to v6.20.0 [`#1700`](https://github.com/th-ch/youtube-music/pull/1700)
+- chore(deps): update pnpm to v8.15.1 [`#1699`](https://github.com/th-ch/youtube-music/pull/1699)
+- chore(deps): update dependency esbuild to v0.20.0 [`#1691`](https://github.com/th-ch/youtube-music/pull/1691)
+- chore(deps): update pnpm to v8.15.0 [`#1692`](https://github.com/th-ch/youtube-music/pull/1692)
+- fix(deps): update dependency i18next to v23.7.20 [`#1684`](https://github.com/th-ch/youtube-music/pull/1684)
+- chore(deps): update dependency electron to v29.0.0-beta.3 [`#1683`](https://github.com/th-ch/youtube-music/pull/1683)
+- chore(deps): update dependency electron to v29.0.0-beta.2 [`#1681`](https://github.com/th-ch/youtube-music/pull/1681)
+- chore(deps): update dependency rollup to v4.9.6 [`#1663`](https://github.com/th-ch/youtube-music/pull/1663)
+- chore(deps): update dependency electron to v29.0.0-beta.1 [`#1670`](https://github.com/th-ch/youtube-music/pull/1670)
+- fix(deps): update dependency i18next to v23.7.19 [`#1680`](https://github.com/th-ch/youtube-music/pull/1680)
+- chore(deps): update dependency @typescript-eslint/eslint-plugin to v6.19.1 [`#1669`](https://github.com/th-ch/youtube-music/pull/1669)
+- chore(deps): update pnpm to v8.14.3 [`#1668`](https://github.com/th-ch/youtube-music/pull/1668)
+- chore(deps): update dependency vite-plugin-inspect to v0.8.3 [`#1672`](https://github.com/th-ch/youtube-music/pull/1672)
+- chore(deps): update dependency esbuild to v0.19.12 [`#1673`](https://github.com/th-ch/youtube-music/pull/1673)
+- fix(deps): update dependency @electron/remote to v2.1.2 [`#1676`](https://github.com/th-ch/youtube-music/pull/1676)
+- chore: Update issue templates [`#1661`](https://github.com/th-ch/youtube-music/pull/1661)
+- chore(deps): update playwright monorepo to v1.41.1 [`#1660`](https://github.com/th-ch/youtube-music/pull/1660)
+- fix(deps): update dependency i18next to v23.7.18 [`#1662`](https://github.com/th-ch/youtube-music/pull/1662)
+- chore(deps): update actions/dependency-review-action action to v4 [`#1654`](https://github.com/th-ch/youtube-music/pull/1654)
+- chore(deps): update dependency electron to v29.0.0-alpha.11 [`#1656`](https://github.com/th-ch/youtube-music/pull/1656)
+- chore(deps): update dependency vite to v5.0.12 [security] [`#1659`](https://github.com/th-ch/youtube-music/pull/1659)
+- fix(deps): update dependency async-mutex to v0.4.1 [`#1653`](https://github.com/th-ch/youtube-music/pull/1653)
+- chore(deps): update playwright monorepo to v1.41.0 [`#1651`](https://github.com/th-ch/youtube-music/pull/1651)
+- feat: Better Scrobbler Plugin [`#1640`](https://github.com/th-ch/youtube-music/pull/1640)
+- chore(deps): update dependency electron to v29.0.0-alpha.10 [`#1645`](https://github.com/th-ch/youtube-music/pull/1645)
+- chore(deps): update dependency @typescript-eslint/eslint-plugin to v6.19.0 [`#1643`](https://github.com/th-ch/youtube-music/pull/1643)
+- chore(README): Fix plugins names and add plugins in/to Readme (in menu too) [`#1624`](https://github.com/th-ch/youtube-music/pull/1624)
+- fix(album-actions): Fixed album actions [`#1639`](https://github.com/th-ch/youtube-music/pull/1639)
+- chore(deps): update playwright monorepo to v1.41.0-beta-1705101589000 [`#1638`](https://github.com/th-ch/youtube-music/pull/1638)
+- fix(#1543): fix song control doesn't work [`#1637`](https://github.com/th-ch/youtube-music/pull/1637)
+- chore(deps): update playwright monorepo to v1.41.0-beta-1705092460000 [`#1635`](https://github.com/th-ch/youtube-music/pull/1635)
+- chore(deps): update dependency rollup to v4.9.5 [`#1629`](https://github.com/th-ch/youtube-music/pull/1629)
+- chore(deps): update dependency electron to v29.0.0-alpha.9 [`#1627`](https://github.com/th-ch/youtube-music/pull/1627)
+- chore(deps): update dependency electron to v29.0.0-alpha.8 [`#1608`](https://github.com/th-ch/youtube-music/pull/1608)
+- fix(deps): update dependency @cliqz/adblocker-electron to v1.26.15 [`#1615`](https://github.com/th-ch/youtube-music/pull/1615)
+- chore(deps): update dependency rollup to v4.9.4 [`#1591`](https://github.com/th-ch/youtube-music/pull/1591)
+- fix(deps): update dependency @cliqz/adblocker-electron-preload to v1.26.15 [`#1616`](https://github.com/th-ch/youtube-music/pull/1616)
+- chore(deps): update pnpm to v8.14.1 [`#1619`](https://github.com/th-ch/youtube-music/pull/1619)
+- chore(deps): update dependency eslint-plugin-prettier to v5.1.3 [`#1618`](https://github.com/th-ch/youtube-music/pull/1618)
+- chore(deps): update dependency @typescript-eslint/eslint-plugin to v6.18.1 [`#1612`](https://github.com/th-ch/youtube-music/pull/1612)
+- fix(deps): update dependency youtubei.js to v8.2.0 [`#1614`](https://github.com/th-ch/youtube-music/pull/1614)
+- chore(deps): update dependency electron-vite to v2.0.0 [`#1609`](https://github.com/th-ch/youtube-music/pull/1609)
+- chore(deps): update dependency @typescript-eslint/eslint-plugin to v6.18.0 [`#1603`](https://github.com/th-ch/youtube-music/pull/1603)
+- chore(deps): update dependency electron-vite to v2.0.0-beta.4 [`#1602`](https://github.com/th-ch/youtube-music/pull/1602)
+- fix: fix upgrade button [`#1199`](https://github.com/th-ch/youtube-music/issues/1199)
+- fix(mpris): fix mpris invalid position [`#1726`](https://github.com/th-ch/youtube-music/issues/1726)
+- fix: discord RPC (fix #1664) [`#1664`](https://github.com/th-ch/youtube-music/issues/1664)
+- fix: remove sign-in button (fix #1199) [`#1199`](https://github.com/th-ch/youtube-music/issues/1199)
+- Fix #1617 [`#1617`](https://github.com/th-ch/youtube-music/issues/1617)
+- fix(crossfade): fix #1633 [`#1633`](https://github.com/th-ch/youtube-music/issues/1633)
+- fix: fix #1621 [`#1621`](https://github.com/th-ch/youtube-music/issues/1621)
+- fix(tuna-obs): partially fix #1596 [`#1596`](https://github.com/th-ch/youtube-music/issues/1596)
+- fix(discord): fix hide duration button [`#1644`](https://github.com/th-ch/youtube-music/issues/1644)
+- fix(in-app-menu): fix invalid `margin-top` [`#1597`](https://github.com/th-ch/youtube-music/issues/1597)
+- fix(README): fix `plugins` path [`#1598`](https://github.com/th-ch/youtube-music/issues/1598)
+- chore(i18n): Translated using Weblate (Vietnamese) [`0528637`](https://github.com/th-ch/youtube-music/commit/05286371353e8b4c36a5b9fe9011ae5dfdc7ee82)
+- chore: update pnpm-lock [`fd8d59b`](https://github.com/th-ch/youtube-music/commit/fd8d59bada56dab4e156d22394fe0c5efec5abc4)
+- fix(in-app-menu): fix app crash in production [`febc63e`](https://github.com/th-ch/youtube-music/commit/febc63edef375bd82db48b7fb460ec5a601ab872)
+
+#### [v3.2.2](https://github.com/th-ch/youtube-music/compare/v3.2.1...v3.2.2)
+
+> 5 January 2024
+
+- feat(tray): Add song info and paused icon [`#1592`](https://github.com/th-ch/youtube-music/pull/1592)
+- fix(skip-silences): fix audio distorted [`#1141`](https://github.com/th-ch/youtube-music/issues/1141)
+- chore(deps): update dependency rollup to v4.9.3 [`0c3c380`](https://github.com/th-ch/youtube-music/commit/0c3c3805918adf2a185a7f1dc67ea3af8135863d)
+- chore(i18n): Translated using Weblate (Turkish) [`64ea1fd`](https://github.com/th-ch/youtube-music/commit/64ea1fdb58fdf2766ae3284ac1a51bfac8894b36)
+- fix(music-together): typing [`895386f`](https://github.com/th-ch/youtube-music/commit/895386f6f8c649f77ea15c88f6fb7ecc5b775554)
+
 #### [v3.2.1](https://github.com/th-ch/youtube-music/compare/v3.2.0...v3.2.1)
 
+> 1 January 2024
+
 - fix: fix #1574 [`#1574`](https://github.com/th-ch/youtube-music/issues/1574)
 - fix: fix #1575 [`#1575`](https://github.com/th-ch/youtube-music/issues/1575)
 - chore(i18n): Translated using Weblate [`f5aa179`](https://github.com/th-ch/youtube-music/commit/f5aa179cd639eb4b8f70f1264b5b459ebcc16695)

docs/index.html

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

electron.vite.config.mts

@@ -11,6 +11,7 @@ import pluginLoader from './vite-plugins/plugin-loader.mjs';
 
 import type { UserConfig } from 'vite';
 import { i18nImporter } from './vite-plugins/i18n-importer.mjs';
+import solidPlugin from 'vite-plugin-solid';
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 
@@ -117,6 +118,7 @@ export default defineConfig({
           'virtual:i18n': i18nImporter(),
           'virtual:plugins': pluginVirtualModuleGenerator('renderer'),
         }),
+        solidPlugin(),
       ],
       root: './src/',
       build: {

package.json

@@ -1,7 +1,7 @@
 {
   "name": "youtube-music",
   "productName": "YouTube Music",
-  "version": "3.2.2",
+  "version": "3.3.2",
   "description": "YouTube Music Desktop App - including custom plugins",
   "main": "./dist/main/index.js",
   "license": "MIT",
@@ -123,31 +123,31 @@
   },
   "pnpm": {
     "overrides": {
-      "esbuild": "0.19.11",
       "usocket": "1.0.1",
-      "rollup": "4.9.3",
       "node-gyp": "10.0.1",
       "xml2js": "0.6.2",
       "node-fetch": "3.3.2",
       "@electron/universal": "2.0.1",
-      "@babel/runtime": "7.23.7"
+      "@babel/runtime": "7.23.8"
     },
     "patchedDependencies": {
-      "vudio@2.1.1": "patches/vudio@2.1.1.patch"
+      "vudio@2.1.1": "patches/vudio@2.1.1.patch",
+      "@xhayper/discord-rpc@1.1.2": "patches/@xhayper__discord-rpc@1.1.2.patch"
     }
   },
   "dependencies": {
-    "@cliqz/adblocker-electron": "1.26.12",
+    "@cliqz/adblocker-electron": "1.26.15",
-    "@cliqz/adblocker-electron-preload": "1.26.12",
+    "@cliqz/adblocker-electron-preload": "1.26.15",
     "@electron-toolkit/tsconfig": "1.0.1",
-    "@electron/remote": "2.1.1",
+    "@electron/remote": "2.1.2",
     "@ffmpeg.wasm/core-mt": "0.12.0",
     "@ffmpeg.wasm/main": "0.12.0",
+    "@floating-ui/dom": "1.6.3",
     "@foobar404/wave": "2.0.5",
     "@jellybrick/electron-better-web-request": "1.0.4",
     "@jellybrick/mpris-service": "2.1.4",
-    "@xhayper/discord-rpc": "1.1.1",
+    "@xhayper/discord-rpc": "1.1.2",
-    "async-mutex": "0.4.0",
+    "async-mutex": "0.4.1",
     "butterchurn": "3.0.0-beta.4",
     "butterchurn-presets": "3.0.0-beta.4",
     "color": "4.2.3",
@@ -160,58 +160,64 @@
     "electron-localshortcut": "3.2.1",
     "electron-store": "8.1.0",
     "electron-unhandled": "4.0.1",
-    "electron-updater": "6.1.7",
+    "electron-updater": "6.1.8",
     "fast-average-color": "9.4.0",
     "fast-equals": "5.0.1",
     "filenamify": "6.0.0",
     "howler": "2.2.4",
     "html-to-text": "9.0.5",
-    "i18next": "23.7.16",
+    "i18next": "23.9.0",
     "keyboardevent-from-electron-accelerator": "2.0.0",
     "keyboardevents-areequal": "0.2.2",
     "node-html-parser": "6.1.12",
     "node-id3": "0.2.6",
     "peerjs": "1.5.2",
-    "semver": "7.5.4",
+    "semver": "7.6.0",
     "serve": "14.2.1",
     "simple-youtube-age-restriction-bypass": "github:organization/Simple-YouTube-Age-Restriction-Bypass#v2.5.9",
+    "solid-floating-ui": "0.3.1",
+    "solid-js": "1.8.15",
+    "solid-styled-components": "0.28.5",
+    "solid-transition-group": "0.2.3",
     "ts-morph": "21.0.1",
     "vudio": "2.1.1",
     "x11": "2.3.0",
-    "youtubei.js": "8.1.0"
+    "youtubei.js": "9.0.2"
   },
   "devDependencies": {
-    "@playwright/test": "1.41.0-alpha-jan-5-2024",
+    "@playwright/test": "1.41.2",
     "@total-typescript/ts-reset": "0.5.1",
     "@types/color": "3.0.6",
     "@types/electron-localshortcut": "3.1.3",
     "@types/howler": "2.2.11",
     "@types/html-to-text": "9.0.4",
-    "@types/semver": "7.5.6",
+    "@types/semver": "7.5.7",
-    "@typescript-eslint/eslint-plugin": "6.17.0",
+    "@typescript-eslint/eslint-plugin": "7.0.2",
     "bufferutil": "4.0.8",
     "builtin-modules": "3.3.0",
     "cross-env": "7.0.3",
     "del-cli": "5.1.0",
-    "electron": "29.0.0-alpha.7",
+    "discord-api-types": "0.37.70",
+    "electron": "28.2.3",
     "electron-builder": "24.9.1",
     "electron-devtools-installer": "3.2.0",
-    "electron-vite": "2.0.0-beta.3",
+    "electron-vite": "2.0.0",
-    "esbuild": "0.19.11",
+    "esbuild": "0.20.1",
     "eslint": "8.56.0",
     "eslint-import-resolver-exports": "1.0.0-beta.5",
     "eslint-import-resolver-typescript": "3.6.1",
     "eslint-plugin-import": "2.29.1",
-    "eslint-plugin-prettier": "5.1.2",
+    "eslint-plugin-prettier": "5.1.3",
     "glob": "10.3.10",
     "node-gyp": "10.0.1",
-    "playwright": "1.41.0-alpha-jan-5-2024",
+    "playwright": "1.41.2",
-    "rollup": "4.9.3",
+    "rollup": "4.12.0",
     "typescript": "5.3.3",
     "utf-8-validate": "6.0.3",
-    "vite": "5.0.11",
+    "vite": "5.1.3",
-    "vite-plugin-inspect": "0.8.1",
+    "vite-plugin-inspect": "0.8.3",
     "vite-plugin-resolve": "2.5.1",
+    "vite-plugin-solid": "2.10.1",
     "ws": "8.16.0"
   },
   "auto-changelog": {
@@ -220,5 +226,5 @@
     "unreleased": true,
     "output": "changelog.md"
   },
-  "packageManager": "pnpm@8.14.0"
+  "packageManager": "pnpm@8.15.3"
 }

patches/@xhayper__discord-rpc@1.1.2.patch

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

src/config/defaults.ts

@@ -32,6 +32,7 @@ export interface DefaultConfig {
     proxy: string;
     startingPage: string;
     overrideUserAgent: boolean;
+    usePodcastParticipantAsArtist: boolean;
     themes: string[];
   };
   plugins: Record<string, unknown>;
@@ -66,6 +67,7 @@ const defaultConfig: DefaultConfig = {
     proxy: '',
     startingPage: '',
     overrideUserAgent: false,
+    usePodcastParticipantAsArtist: false,
     themes: [],
   },
   'plugins': {},

src/config/index.ts

@@ -1,5 +1,5 @@
 import Store from 'electron-store';
-import { deepmerge } from 'deepmerge-ts';
+import { deepmergeCustom } from 'deepmerge-ts';
 
 import defaultConfig from './defaults';
 
@@ -8,6 +8,10 @@ import plugins from './plugins';
 
 import { restart } from '@/providers/app-controls';
 
+const deepmerge = deepmergeCustom({
+  mergeArrays: false,
+});
+
 const set = (key: string, value: unknown) => {
   store.set(key, value);
 };

src/config/store.ts

@@ -6,6 +6,56 @@ import defaults from './defaults';
 import { DefaultPresetList, type Preset } from '@/plugins/downloader/types';
 
 const migrations = {
+  '>=3.3.0'(store: Conf<Record<string, unknown>>) {
+    const lastfmConfig = store.get('plugins.lastfm') as {
+      enabled?: boolean;
+      token?: string;
+      session_key?: string;
+      api_root?: string;
+      api_key?: string;
+      secret?: string;
+    };
+    if (lastfmConfig) {
+      let scrobblerConfig = store.get(
+        'plugins.scrobbler',
+      ) as {
+        enabled?: boolean;
+        scrobblers?: {
+          lastfm?: {
+            enabled?: boolean;
+            token?: string;
+            sessionKey?: string;
+            apiRoot?: string;
+            apiKey?: string;
+            secret?: string;
+          };
+        };
+      } | undefined;
+
+      if (!scrobblerConfig) {
+        scrobblerConfig = {
+          enabled: lastfmConfig.enabled,
+        };
+      }
+
+      if (!scrobblerConfig.scrobblers) {
+        scrobblerConfig.scrobblers = {
+          lastfm: {},
+        };
+      }
+
+      scrobblerConfig.scrobblers.lastfm = {
+        enabled: lastfmConfig.enabled,
+        token: lastfmConfig.token,
+        sessionKey: lastfmConfig.session_key,
+        apiRoot: lastfmConfig.api_root,
+        apiKey: lastfmConfig.api_key,
+        secret: lastfmConfig.secret,
+      };
+      store.set('plugins.scrobbler', scrobblerConfig);
+      store.delete('plugins.lastfm');
+    }
+  },
   '>=3.0.0'(store: Conf<Record<string, unknown>>) {
     const discordConfig = store.get('plugins.discord') as Record<
       string,

src/i18n/resources/bg.json

@@ -0,0 +1,46 @@
+{
+  "common": {
+    "console": {
+      "plugins": {
+        "execute-failed": "Неуспешно изпълнение на плъгин {{pluginName}}::{{contextName}}",
+        "executed-at-ms": "Плъгин {{pluginName}}::{{contextName}} изпълнет в {{ms}}ms",
+        "initialize-failed": "Неуспешна инициализация на плъгин \"{{pluginName}}\"",
+        "load-all": "Зареждане на всички плъгини",
+        "load-failed": "Неуспешно зареждане на плъгин \"{{pluginName}}\"",
+        "loaded": "Плъгин \"{{pluginName}}\" зареден",
+        "unload-failed": "Неуспешне разрездане на плъгин \"{{pluginName}}\"",
+        "unloaded": "Плъгин \"{{pluginName}}\" разреден"
+      }
+    }
+  },
+  "language": {
+    "code": "bg",
+    "local-name": "Български",
+    "name": "Bulgarian"
+  },
+  "main": {
+    "console": {
+      "did-finish-load": {
+        "dev-tools": "Завърши зареждането. DevTools отворени"
+      },
+      "i18n": {
+        "loaded": "i18n заредено"
+      },
+      "second-instance": {
+        "receive-command": "Получена команда чрез протокол: \"{{command}}\""
+      },
+      "theme": {
+        "css-file-not-found": "CSS файл \"{{cssFile}}\" не съществува, ингнорира се"
+      },
+      "unresponsive": {
+        "details": "Грешка без отговор!\n{{error}}"
+      },
+      "when-ready": {
+        "clearing-cache-after-20s": "Изчистване на кешът на аппа"
+      },
+      "window": {
+        "tried-to-render-offscreen": "Прозореца се опита да се изрисува извън екрана, windowSize={{windowSize}}, displaySize={{displaySize}}, position={{position}}"
+      }
+    }
+  }
+}

src/i18n/resources/cs.json

@@ -8,7 +8,8 @@
         "load-all": "Načítání všech pluginů",
         "load-failed": "Selhalo načtení \"{{pluginName}}\" pluginu",
         "loaded": "Plugin \"{{pluginName}}\" načten",
-        "unload-failed": "Selhalo unload \"{{pluginName}}\" pluginu"
+        "unload-failed": "Selhalo unload \"{{pluginName}}\" pluginu",
+        "unloaded": "Plugin {{pluginName}} byl odnačten"
       }
     }
   },
@@ -407,10 +408,6 @@
         "hide-dom-window-controls": "Skrýt DOM window controls"
       }
     },
-    "last-fm": {
-      "description": "Přidat scrobbling podporu pro Last.fm",
-      "name": "Last.fm"
-    },
     "lumiastream": {
       "description": "Přidává Lumia Stream podporu",
       "name": "Lumia Stream [Beta]"

src/i18n/resources/de.json

@@ -46,7 +46,7 @@
       "hide-menu-enabled": {
         "detail": "Das Menü ist versteckt, nutze 'Alt', um es zu aufzurufen (oder 'Escape' beim Verwenden des In-App-Menüs)",
         "message": "Menü verstecken ist aktiviert",
-        "title": "Menü Verstecken Aktiviert"
+        "title": "Menü verstecken aktiviert"
       },
       "need-to-restart": {
         "buttons": {
@@ -55,7 +55,7 @@
         },
         "detail": "\"{{pluginName}}\"-Erweiterung erfordert einen Neustart, um in Kraft zu treten",
         "message": "\"{{pluginName}}\" muss neugestartet werden",
-        "title": "Neustart Erforderlich"
+        "title": "Neustart erforderlich"
       },
       "unresponsive": {
         "buttons": {
@@ -75,7 +75,7 @@
         },
         "detail": "Eine neue Version ist verfügbar und kann unter {{downloadLink}} heruntergeladen werden",
         "message": "Eine neue Version ist verfügbar",
-        "title": "Aktualisierung Verfügbar"
+        "title": "Aktualisierung verfügbar"
       }
     },
     "menu": {
@@ -87,7 +87,7 @@
           "go-back": "Zurück gehen",
           "go-forward": "Vorwärts gehen",
           "quit": "Beenden",
-          "restart": "Anwendung Neustarten"
+          "restart": "Anwendung neustarten"
         }
       },
       "options": {
@@ -124,7 +124,7 @@
           "language": {
             "dialog": {
               "message": "Sprache wird nach Neustart geändert",
-              "title": "Sprache Geändert"
+              "title": "Sprache geändert"
             },
             "label": "Sprache",
             "submenu": {
@@ -170,7 +170,8 @@
       },
       "plugins": {
         "enabled": "Aktiviert",
-        "label": "Erweiterungen"
+        "label": "Erweiterungen",
+        "new": "NEU"
       },
       "view": {
         "label": "Ansicht",
@@ -190,7 +191,11 @@
       "previous": "Vorheriges",
       "quit": "Beenden",
       "restart": "Anwendung neu starten",
-      "show": "Fenster anzeigen"
+      "show": "Fenster anzeigen",
+      "tooltip": {
+        "default": "YouTube Musik",
+        "with-song-info": "YouTube Musik: {{artist}} - {{title}}"
+      }
     }
   },
   "plugins": {
@@ -201,12 +206,24 @@
       },
       "name": "Werbeblocker"
     },
+    "album-actions": {
+      "description": "Fügt Undislike, Dislike, Like und Unlike-Knöpfe hinzu, welche sich auf alle Lieder in einer Playlist oder Album auswirken",
+      "name": "Album-Aktionen"
+    },
     "album-color-theme": {
       "description": "Wendet ein dynamisches Farbthema und visuelle Effekte auf Basis der Farbpalette des Albumcovers an",
+      "menu": {
+        "color-mix-ratio": {
+          "label": "Farbmischungsverhältnis",
+          "submenu": {
+            "percent": "{{ratio}}%"
+          }
+        }
+      },
       "name": "Thema aus Albumfarbe"
     },
     "ambient-mode": {
-      "description": "Fügt einen Lichteffekt durch sanftes Abstreifen der Farben des Videos in deinen Bildschirmhintergrund hinzu.",
+      "description": "Fügt einen Lichteffekt durch sanftes Abstreifen der Farben des Videos in deinen Bildschirmhintergrund hinzu",
       "menu": {
         "blur-amount": {
           "label": "Unschärfemenge",
@@ -221,7 +238,7 @@
           }
         },
         "opacity": {
-          "label": "Durchsichtigkeit",
+          "label": "Transparenz",
           "submenu": {
             "percent": "{{opacity}}%"
           }
@@ -266,7 +283,7 @@
       "description": "Untertitelwähler für YouTube Music-Audio-Lieder",
       "menu": {
         "autoload": "Wähle automatisch den zuletzt verwendeten Untertitel",
-        "disable-captions": "Standartmäßig keine Untertitel"
+        "disable-captions": "Standardmäßig keine Untertitel"
       },
       "name": "Untertitelwähler",
       "prompt": {
@@ -408,10 +425,6 @@
       },
       "name": "In-App Menü"
     },
-    "last-fm": {
-      "description": "Scrobbling-Unterstützung für Last.fm hinzufügen",
-      "name": "Last.fm"
-    },
     "lumiastream": {
       "description": "Fügt Unterstützung für Lumia Stream hinzu",
       "name": "Lumia Stream [Beta]"
@@ -426,6 +439,52 @@
         "fetched-lyrics": "Liedtexte für Genius abgerufen"
       }
     },
+    "music-together": {
+      "description": "Teile eine Wiedergabeliste mit anderen. Wenn der Host ein Lied abspielt, hören alle anderen das gleiche Lied",
+      "dialog": {
+        "enter-host": "Host ID eingeben"
+      },
+      "internal": {
+        "save": "Speichern",
+        "track-source": "Quelle verfolgen",
+        "unknown-user": "Unbekannter Nutzer"
+      },
+      "menu": {
+        "click-to-copy-id": "Host ID kopieren",
+        "close": "Music Together schließen",
+        "connected-users": "Verbundene Benutzer",
+        "disconnect": "Verbindung zu Music Together trennen",
+        "empty-user": "Keine verbundenen Benutzer",
+        "host": "Host für Music Together",
+        "join": "Music Together beitreten",
+        "permission": {
+          "all": "Gästen erlauben, Wiederhabeliste und Player zu bedienen",
+          "host-only": "Nur der Host kann die Playlist und den Player kontrollieren",
+          "playlist": "Gäste das Kontrollieren der Playlist erlauben"
+        },
+        "set-permission": "Kontrollberechtigung ändern",
+        "status": {
+          "disconnected": "Verbindung getrennt",
+          "guest": "Als Gast verbunden",
+          "host": "Als Host verbunden"
+        }
+      },
+      "name": "Music Together [Beta]",
+      "toast": {
+        "add-song-failed": "Song hinzufügen gescheitert",
+        "closed": "Music Together geschlossen",
+        "disconnected": "Verbindung zu Music Together getrennt",
+        "host-failed": "Hosten von Music Together gescheitert",
+        "id-copied": "Host ID in die Zwischenablage kopiert",
+        "id-copy-failed": "Kopieren der Host ID in die Zwischenablage gescheitert",
+        "join-failed": "Beitreten zu Music Together gescheitert",
+        "joined": "Music Together beigetreten",
+        "permission-changed": "Music Together-Berechtigung zu \"{{permission}}\" geändert",
+        "remove-song-failed": "Entfernen des Liedes gescheitert",
+        "user-connected": "{{name}} ist Music Together beigetreten",
+        "user-disconnected": "{{name}} hat Music Together verlassen"
+      }
+    },
     "navigation": {
       "description": "Vorwärts/Zurück Navigationspfeile direkt in die Oberfläche integriert - wie in deinem geliebten Browser",
       "name": "Navigation"
@@ -518,8 +577,33 @@
       "description": "Erlaubt die Videoqualität über einen Knopf auf dem Video",
       "name": "Videoqualitätsänderer"
     },
+    "scrobbler": {
+      "description": "Scrobbling-Unterstützung aktivieren (z.B. für last.fm, Listenbrainz)",
+      "menu": {
+        "lastfm": {
+          "api-settings": "Last.fm API Einstellungen"
+        },
+        "listenbrainz": {
+          "token": "ListenBrainz-Benutzer-Token eintragen"
+        },
+        "scrobble-other-media": "Andere Medien scrobbeln"
+      },
+      "name": "Scrobbler",
+      "prompt": {
+        "lastfm": {
+          "api-key": "Last.fm API-Schlüssel",
+          "api-secret": "Last.fm API-Kennwort"
+        },
+        "listenbrainz": {
+          "token": {
+            "label": "ListenBrainz-Benutzer-Token eintragen:",
+            "title": "ListenBrainz-Token"
+          }
+        }
+      }
+    },
     "shortcuts": {
-      "description": "Ermöglicht das Festlegen globaler Hotkeys für die Wiedergabe (Abspielen/Pause/Nächster/Vorheriger) + Deaktivieren des Medien-OSD durch Überschreiben der Medientasten + Aktivieren von Strg/CMD + F zum Suchen + Aktivieren der Linux mpris-Unterstützung für Medientasten + Angepasste Tastenkürzel für fortgeschrittene Benutzer.",
+      "description": "Ermöglicht das Festlegen globaler Hotkeys für die Wiedergabe (Abspielen/Pause/Nächster/Vorheriger) + Deaktivieren des Medien-OSD durch Überschreiben der Medientasten + Aktivieren von Strg/CMD + F zum Suchen + Aktivieren der Linux mpris-Unterstützung für Medientasten + Angepasste Tastenkürzel für fortgeschrittene Benutzer",
       "menu": {
         "override-media-keys": "Medientasten überschreiben",
         "set-keybinds": "Globale Liedsteuerung setzen"

src/i18n/resources/el.json

@@ -199,9 +199,6 @@
         "button": "Download"
       }
     },
-    "last-fm": {
-      "name": "Last.fm"
-    },
     "navigation": {
       "name": "Navigation"
     },

src/i18n/resources/en.json

@@ -186,16 +186,16 @@
       }
     },
     "tray": {
-      "tooltip": {
-        "default": "YouTube Music",
-        "with-song-info": "YouTube Music: {{artist}} - {{title}}"
-      },
       "next": "Next",
       "play-pause": "Play/Pause",
       "previous": "Previous",
       "quit": "Exit",
       "restart": "Restart App",
-      "show": "Show window"
+      "show": "Show window",
+      "tooltip": {
+        "default": "YouTube Music",
+        "with-song-info": "YouTube Music: {{artist}} - {{title}}"
+      }
     }
   },
   "plugins": {
@@ -204,18 +204,26 @@
       "menu": {
         "blocker": "Blocker"
       },
-      "name": "Adblocker"
+      "name": "Ad Blocker"
     },
     "album-actions": {
-      "description": "Adds Undislike, Dislike, Like, and Unlike buttons to apply this to all songs in a playlist or album.",
+      "description": "Adds Undislike, Dislike, Like, and Unlike buttons to apply this to all songs in a playlist or album",
-      "name": "Album actions"
+      "name": "Album Actions"
     },
     "album-color-theme": {
       "description": "Applies a dynamic theme and visual effects based on the album color palette",
-      "name": "Album Color Theme"
+      "name": "Album Color Theme",
+      "menu": {
+        "color-mix-ratio": {
+          "label": "Color mix ratio",
+          "submenu": {
+            "percent": "{{ratio}}%"
+          }
+        }
+      }
     },
     "ambient-mode": {
-      "description": "Applies a lighting effect by casting gentle colors from the video, into your screen’s background.",
+      "description": "Applies a lighting effect by casting gentle colors from the video, into your screen’s background",
       "menu": {
         "blur-amount": {
           "label": "Blur amount",
@@ -417,10 +425,6 @@
       },
       "name": "In-App Menu"
     },
-    "last-fm": {
-      "description": "Add scrobbling support for Last.fm",
-      "name": "Last.fm"
-    },
     "lumiastream": {
       "description": "Adds Lumia Stream support",
       "name": "Lumia Stream [Beta]"
@@ -573,8 +577,41 @@
       "description": "Allows changing the video quality with a button on the video overlay",
       "name": "Video Quality Changer"
     },
+    "scrobbler": {
+      "description": "Add scrobbling support (etc. last.fm, Listenbrainz)",
+      "dialog": {
+        "lastfm": {
+          "auth-failed": {
+            "title": "Authentication Failed",
+            "message": "Failed to authenticate with Last.fm\nHide the popup until the next restart."
+          }
+        }
+      },
+      "menu": {
+        "scrobble-other-media": "Scrobble other media",
+        "lastfm": {
+          "api-settings": "Last.fm API Settings"
+        },
+        "listenbrainz": {
+          "token": "Enter ListenBrainz user token"
+        }
+      },
+      "name": "Scrobbler",
+      "prompt": {
+        "lastfm": {
+          "api-key": "Last.fm API key",
+          "api-secret": "Last.fm API secret"
+        },
+        "listenbrainz": {
+          "token": {
+            "label": "Enter your ListenBrainz user token:",
+            "title": "ListenBrainz token"
+          }
+        }
+      }
+    },
     "shortcuts": {
-      "description": "Allows setting global hotkeys for playback (play/pause/next/previous) and turning off media OSD by overriding media keys, turning on Ctrl/CMD + F to search, turning on Linux MPRIS support for media keys, and custom hotkeys for advanced users.",
+      "description": "Allows setting global hotkeys for playback (play/pause/next/previous) and turning off media OSD by overriding media keys, turning on Ctrl/CMD + F to search, turning on Linux MPRIS support for media keys, and custom hotkeys for advanced users",
       "menu": {
         "override-media-keys": "Override Media Keys",
         "set-keybinds": "Set Global Song Controls"

src/i18n/resources/es.json

@@ -204,18 +204,26 @@
       "menu": {
         "blocker": "Bloqueador"
       },
-      "name": "Adblocker"
+      "name": "Bloqueador de anuncios"
     },
     "album-actions": {
-      "description": "Añade los botones \"No me gusta\", \"No me gusta\", \"Me gusta\" y \"No me gusta\" para aplicarlos a todas las canciones de una lista de reproducción o un álbum.",
+      "description": "Añade los botones \"No me gusta\", \"No me gusta\", \"Me gusta\" y \"No me gusta\" para aplicarlos a todas las canciones de una lista de reproducción o un álbum",
-      "name": "Acciones del álbum"
+      "name": "Acciones en el álbum"
     },
     "album-color-theme": {
       "description": "Aplica un tema dinámico y efectos visuales basados en la paleta de colores del álbum",
+      "menu": {
+        "color-mix-ratio": {
+          "label": "Proporción de la mezcla de color",
+          "submenu": {
+            "percent": "{{ratio}}%"
+          }
+        }
+      },
       "name": "Color del álbum"
     },
     "ambient-mode": {
-      "description": "Aplica un efecto de iluminación proyectando colores suaves del vídeo en el fondo de la pantalla.",
+      "description": "Aplica un efecto de iluminación mediante la proyección de colores suaves del vídeo en el fondo de la pantalla",
       "menu": {
         "blur-amount": {
           "label": "Cantidad de desenfoque",
@@ -417,10 +425,6 @@
       },
       "name": "Menú de aplicación"
     },
-    "last-fm": {
-      "description": "Añade soporte de scrobbling para Last.fm",
-      "name": "Last.fm"
-    },
     "lumiastream": {
       "description": "Agrega soporte para Lumia Stream",
       "name": "Lumia Stream [Beta]"
@@ -472,6 +476,7 @@
         "disconnected": "Music Together desconectados",
         "host-failed": "Fallo el host de Music Together",
         "id-copied": "ID del host copiado en el portapapeles",
+        "id-copy-failed": "No se ha podido copiar el ID del host en el portapapeles",
         "join-failed": "Fallo en la unión a Music Together",
         "joined": "Unido a Music Together",
         "permission-changed": "Permiso de Music Together cambiado a \"{{permission}}\"",
@@ -572,8 +577,33 @@
       "description": "Permite cambiar la calidad del vídeo con un botón sobre puesto en el vídeo",
       "name": "Ajustador de calidad de vídeo"
     },
+    "scrobbler": {
+      "description": "Añadir soporte para scrobbling (last.fm, Listenbrainz, etc.)",
+      "menu": {
+        "lastfm": {
+          "api-settings": "Ajustes de la API de Last.fm"
+        },
+        "listenbrainz": {
+          "token": "Introduzca el token de usuario de ListenBrainz"
+        },
+        "scrobble-other-media": "Scrobble en otros medios"
+      },
+      "name": "Scrobbler",
+      "prompt": {
+        "lastfm": {
+          "api-key": "Clave de la API de Last.fm",
+          "api-secret": "Clave secreta de la API de Last.fm"
+        },
+        "listenbrainz": {
+          "token": {
+            "label": "Introduzca su token de usuario de ListenBrainz:",
+            "title": "Token de ListenBrainz"
+          }
+        }
+      }
+    },
     "shortcuts": {
-      "description": "Permite configurar teclas de acceso rápido globales para la reproducción (reproducir/pausa/siguiente/anterior) y desactivar el OSD multimedia anulando las teclas multimedia, activar Ctrl/CMD + F para buscar, activar la compatibilidad con MPRIS de Linux para las teclas multimedia y teclas de acceso rápido personalizadas para usuarios avanzados.",
+      "description": "Permite configurar teclas de acceso rápido globales para la reproducción (reproducir/pausa/siguiente/anterior) y desactivar la OSD multimedia anulando las teclas multimedia, activar Ctrl/CMD + F para buscar, activar la compatibilidad con MPRIS de Linux para las teclas multimedia y teclas de acceso rápido personalizadas para usuarios avanzados",
       "menu": {
         "override-media-keys": "Anular teclas de medios",
         "set-keybinds": "Configurar controles globales de canciones"

src/i18n/resources/fr.json

@@ -170,7 +170,8 @@
       },
       "plugins": {
         "enabled": "Activé",
-        "label": "Extensions"
+        "label": "Extensions",
+        "new": "NOUVELLE"
       },
       "view": {
         "label": "Vue",
@@ -190,7 +191,11 @@
       "previous": "Précédent",
       "quit": "Quitter",
       "restart": "Redémarrer l'application",
-      "show": "Afficher la fenêtre"
+      "show": "Afficher la fenêtre",
+      "tooltip": {
+        "default": "YouTube Music",
+        "with-song-info": "YouTube Music: {{artist}} - {{title}}"
+      }
     }
   },
   "plugins": {
@@ -201,6 +206,10 @@
       },
       "name": "Bloqueur de publicités"
     },
+    "album-actions": {
+      "description": "Ajoute les boutons Dislike, Undislike, Like, et Unlike à appliquer sur toutes les chansons dans un playlist ou un album.",
+      "name": "Actions d'Album"
+    },
     "album-color-theme": {
       "description": "Applique un thème dynamique et des effets visuels basés sur la palette des couleurs de l'album",
       "name": "Thème de couleur d'album"
@@ -408,10 +417,6 @@
       },
       "name": "Menu intégré à l'application"
     },
-    "last-fm": {
-      "description": "Ajouter le support du scrobbling pour Last.fm",
-      "name": "Last.fm"
-    },
     "lumiastream": {
       "description": "Ajoute la prise en charge de Lumia Stream",
       "name": "Lumia Stream [Bêta]"
@@ -538,7 +543,8 @@
       }
     },
     "skip-disliked-songs": {
-      "description": "Passer les musiques que je n'aime pas"
+      "description": "Passer les musiques que je n'aime pas",
+      "name": "Passer Chansons Déplaisantes"
     },
     "skip-silences": {
       "description": "Ignorer automatiquement les sections de silence dans les chansons",

src/i18n/resources/id.json

@@ -17,5 +17,666 @@
     "code": "id",
     "local-name": "Bahasa Indonesia",
     "name": "Indonesian"
+  },
+  "main": {
+    "console": {
+      "did-finish-load": {
+        "dev-tools": "Selesai memuat. DevTools terbuka"
+      },
+      "i18n": {
+        "loaded": "i18n selesai dimuat"
+      },
+      "second-instance": {
+        "receive-command": "Menerima instruksi lewat protokol: \"{{command}}\""
+      },
+      "theme": {
+        "css-file-not-found": "CSS file \"{{cssFile}}\" tidak ada, mengabaikan"
+      },
+      "unresponsive": {
+        "details": "Kesalahan Tidak Responsif!\n{{error}}"
+      },
+      "when-ready": {
+        "clearing-cache-after-20s": "Menghapus cache aplikasi"
+      },
+      "window": {
+        "tried-to-render-offscreen": "Window mencoba membuat render di luar layar, windowUkuran={{windowSize}}, displaySize={{displaySize}}, posisi={{position}}"
+      }
+    },
+    "dialog": {
+      "hide-menu-enabled": {
+        "detail": "Menu tersembunyi, gunakan 'Alt' untuk menampilkannya (atau 'Escape' jika menggunakan Menu Dalam Aplikasi)",
+        "message": "Menu Sembunyikan diaktifkan",
+        "title": "Sembunyikan Menu Diaktifkan"
+      },
+      "need-to-restart": {
+        "buttons": {
+          "later": "Kemudian",
+          "restart-now": "Restart Sekarang"
+        },
+        "detail": "\"{{pluginName}}\" Plugin memerlukan pengaktifan ulang agar dapat diterapkan",
+        "message": "\"{{pluginName}}\" harus dimulai ulang",
+        "title": "Diperlukan Restart"
+      },
+      "unresponsive": {
+        "buttons": {
+          "quit": "Keluar",
+          "relaunch": "Luncurkan kembali",
+          "wait": "Tunggu"
+        },
+        "detail": "Kami mohon maaf atas ketidaknyamanan ini. silakan pilih apa yang harus dilakukan:",
+        "message": "Aplikasi Tidak Responsif",
+        "title": "Jendela Tidak Responsif"
+      },
+      "update-available": {
+        "buttons": {
+          "disable": "Nonaktifkan Pembaruan",
+          "download": "Unduh",
+          "ok": "OK"
+        },
+        "detail": "Versi baru tersedia dan dapat diunduh di {{downloadLink}}",
+        "message": "Versi baru tersedia",
+        "title": "Pembaruan Tersedia"
+      }
+    },
+    "menu": {
+      "about": "Tentang",
+      "navigation": {
+        "label": "Navigasi",
+        "submenu": {
+          "copy-current-url": "Salin URL saat ini",
+          "go-back": "Kembali",
+          "go-forward": "Maju",
+          "quit": "Keluar",
+          "restart": "Restart Aplikasi"
+        }
+      },
+      "options": {
+        "label": "Option",
+        "submenu": {
+          "advanced-options": {
+            "label": "Opsi lanjutan",
+            "submenu": {
+              "auto-reset-app-cache": "Mengatur ulang cache aplikasi saat aplikasi dimulai",
+              "disable-hardware-acceleration": "Menonaktifkan akselerasi perangkat keras",
+              "edit-config-json": "Ubah config.json",
+              "override-user-agent": "Mengesampingkan User-Agent",
+              "restart-on-config-changes": "Mulai ulang pada perubahan konfigurasi",
+              "set-proxy": {
+                "label": "Atur Proxy",
+                "prompt": {
+                  "label": "Masukkan Alamat Proxy: (biarkan kosong untuk menonaktifkan)",
+                  "placeholder": "Contoh: SOCKS5://127.0.0.1:9999",
+                  "title": "Atur proxy"
+                }
+              },
+              "toggle-dev-tools": "Beralih ke DevTools"
+            }
+          },
+          "always-on-top": "Selalu di atas",
+          "auto-update": "Pembaruan Otomatis",
+          "hide-menu": {
+            "dialog": {
+              "message": "Menu akan disembunyikan pada peluncuran berikutnya, gunakan [Alt] untuk menampilkannya (atau centang [`] jika menggunakan menu dalam aplikasi)",
+              "title": "Sembunyikan Menu Diaktifkan"
+            },
+            "label": "Sembunyikan Menu"
+          },
+          "language": {
+            "dialog": {
+              "message": "Bahasa akan berubah setelah restart",
+              "title": "Bahasa Berubah"
+            },
+            "label": "Bahasa",
+            "submenu": {
+              "to-help-translate": "Ingin membantu menerjemahkan? Klik di sini"
+            }
+          },
+          "resume-on-start": "Melanjutkan lagu terakhir saat aplikasi dimulai",
+          "single-instance-lock": "Kunci Instance Tunggal",
+          "start-at-login": "Mulai saat masuk",
+          "starting-page": {
+            "label": "Halaman awal",
+            "unset": "Tidak ditetapkan"
+          },
+          "tray": {
+            "label": "Bilah",
+            "submenu": {
+              "disabled": "Dinonaktifkan",
+              "enabled-and-hide-app": "Mengaktifkan dan menyembunyikan aplikasi",
+              "enabled-and-show-app": "Mengaktifkan dan menampilkan aplikasi",
+              "play-pause-on-click": "Putar/Jeda dengan klik"
+            }
+          },
+          "visual-tweaks": {
+            "label": "Penyesuaian Visual",
+            "submenu": {
+              "like-buttons": {
+                "default": "Standar",
+                "force-show": "Pertunjukan paksa",
+                "hide": "Sembunyikan",
+                "label": "Tombol suka"
+              },
+              "remove-upgrade-button": "Hapus tombol peningkatan",
+              "theme": {
+                "label": "Tema",
+                "submenu": {
+                  "import-css-file": "Impor file CSS khusus",
+                  "no-theme": "Tidak ada tema"
+                }
+              }
+            }
+          }
+        }
+      },
+      "plugins": {
+        "enabled": "Diaktifkan",
+        "label": "Plugin",
+        "new": "Baru"
+      },
+      "view": {
+        "label": "Lihat",
+        "submenu": {
+          "force-reload": "Paksa Reload",
+          "reload": "Muat ulang",
+          "reset-zoom": "Ukuran sebenarnya",
+          "toggle-fullscreen": "Alihkan Layar Penuh",
+          "zoom-in": "Perbesar",
+          "zoom-out": "Perkecil"
+        }
+      }
+    },
+    "tray": {
+      "next": "Selanjutnya",
+      "play-pause": "Putar/Jeda",
+      "previous": "Sebelumnya",
+      "quit": "Keluar",
+      "restart": "Restart aplikasi",
+      "show": "Tampilkan jendela",
+      "tooltip": {
+        "default": "YouTube Musik",
+        "with-song-info": "YouTube Music: {{artist}} - {{title}}"
+      }
+    }
+  },
+  "plugins": {
+    "adblocker": {
+      "description": "Blokir semua iklan dan pelacakan di luar kotak",
+      "menu": {
+        "blocker": "Pemblokir"
+      },
+      "name": "Pemblokir Iklan"
+    },
+    "album-actions": {
+      "description": "Tambah tombol Suka, Batal Suka, Tidak Suka dan Batal Tidak Suka untuk diterapkan ke semua lagu dalam daftar putar atau album",
+      "name": "Tindakan Album"
+    },
+    "album-color-theme": {
+      "description": "Menerapkan tema dinamis dan efek visual berdasarkan palet warna album",
+      "menu": {
+        "color-mix-ratio": {
+          "label": "Rasio campuran warna",
+          "submenu": {
+            "percent": "{{ratio}}%"
+          }
+        }
+      },
+      "name": "Tema Warna Album"
+    },
+    "ambient-mode": {
+      "description": "Menerapkan efek pencahayaan dengan memancarkan warna-warna lembut dari video, ke dalam latar belakang layar Anda",
+      "menu": {
+        "blur-amount": {
+          "label": "Jumlah kabur",
+          "submenu": {
+            "pixels": "{{blurAmount}} piksel"
+          }
+        },
+        "buffer": {
+          "label": "Buffer",
+          "submenu": {
+            "buffer": "{{buffer}}"
+          }
+        },
+        "opacity": {
+          "label": "Keburaman",
+          "submenu": {
+            "percent": "{{opacity}}%"
+          }
+        },
+        "quality": {
+          "label": "Kualitas",
+          "submenu": {
+            "pixels": "{{quality}} piksel"
+          }
+        },
+        "size": {
+          "label": "Ukuran",
+          "submenu": {
+            "percent": "{{size}}%"
+          }
+        },
+        "smoothness-transition": {
+          "label": "Kehalusan transisi",
+          "submenu": {
+            "during": "Selama {{interpolationTime}} s"
+          }
+        },
+        "use-fullscreen": {
+          "label": "Gunakan layar penuh"
+        }
+      },
+      "name": "Mode ambient"
+    },
+    "audio-compressor": {
+      "description": "Menerapkan kompresi pada audio (mengurangi volume pada bagian paling keras dari sinyal dan meningkatkan volume pada bagian paling lembut)",
+      "name": "Kompresi suara"
+    },
+    "blur-nav-bar": {
+      "description": "Jadikan bar navigasi blur dan transparan",
+      "name": "buramkan bar navigasi"
+    },
+    "bypass-age-restrictions": {
+      "description": "Lewati verifikasi umur dari YouTube",
+      "name": "Lewati batasan umur"
+    },
+    "captions-selector": {
+      "description": "pemilih caption untuk trek audio YouTube Music",
+      "menu": {
+        "autoload": "pilih caption terakhir secara otomatis",
+        "disable-captions": "bawaannya tanpa caption"
+      },
+      "name": "pemilih caption",
+      "prompt": {
+        "selector": {
+          "label": "bahasa caption yang dipakai sekarang: {{language}}",
+          "none": "tidak ada",
+          "title": "pilih bahasa caption"
+        }
+      },
+      "templates": {
+        "title": "buka pemilih caption"
+      }
+    },
+    "compact-sidebar": {
+      "description": "Selalu atur sidebar dalam mode kompak",
+      "name": "sidebar ringkas"
+    },
+    "crossfade": {
+      "description": "Crossfade antar lagu",
+      "menu": {
+        "advanced": "Lanjutan"
+      },
+      "name": "Crossfade [Beta]",
+      "prompt": {
+        "options": {
+          "multi-input": {
+            "fade-in-duration": "durasi fade in (ms)",
+            "fade-out-duration": "durasi fade out (ms)",
+            "fade-scaling": {
+              "label": "redup perlahan",
+              "linear": "Linear",
+              "logarithmic": "Logaritmik"
+            },
+            "seconds-before-end": "Crossfade N detik sebelum berakhir"
+          },
+          "title": "Pilihan crossfade"
+        }
+      }
+    },
+    "disable-autoplay": {
+      "description": "Buat lagu mulai dalam mode \"jeda\"",
+      "menu": {
+        "apply-once": "Hanya terapkan pada saat startup"
+      },
+      "name": "Matikan Autoplay"
+    },
+    "discord": {
+      "backend": {
+        "already-connected": "Percobaan untuk terhubung dengan koneksi yang aktif",
+        "connected": "Terhubung dengan Discord",
+        "disconnected": "Terputus dari Discord"
+      },
+      "description": "tunjukan apa yang kamu dengarkan dengan Rich Presence",
+      "menu": {
+        "auto-reconnect": "Reconnect otomatis",
+        "clear-activity": "Hapus riwayat aktifitas",
+        "clear-activity-after-timeout": "hapus riwayat aktifitas setelah timeout",
+        "connected": "terhubung",
+        "disconnected": "tidak terhubung",
+        "hide-duration-left": "sembunyikan sisa durasi",
+        "hide-github-button": "sembunyikan tombol link GitHub",
+        "play-on-youtube-music": "Mainkan di YouTube Music",
+        "set-inactivity-timeout": "Tetapkan batas waktu tidak aktif"
+      },
+      "name": "Rich Presence Discord",
+      "prompt": {
+        "set-inactivity-timeout": {
+          "label": "Masukkan batas waktu tidak aktif dalam detik:",
+          "title": "Tetapkan batas waktu tidak aktif"
+        }
+      }
+    },
+    "downloader": {
+      "backend": {
+        "dialog": {
+          "error": {
+            "buttons": {
+              "ok": "Oke"
+            },
+            "message": "Argh! Maaf, dowloadnya gagal…",
+            "title": "Downloadnya error!"
+          },
+          "start-download-playlist": {
+            "buttons": {
+              "ok": "Oke"
+            },
+            "detail": "({{playlistSize}} lagu-lagu)",
+            "message": "Mengunduh Playlist {{playlistTitle}}",
+            "title": "Download dimulai"
+          }
+        },
+        "feedback": {
+          "conversion-progress": "Konversi: {{percent}}%",
+          "converting": "Mengkonversi…",
+          "done": "Selesai: {{filePath}}",
+          "download-info": "Mengunduh {{artist}} - {{title}} {{videoId}}",
+          "download-progress": "Mengunduh: {{percent}}%",
+          "downloading": "Mengunduh…",
+          "downloading-counter": "Mengunduh {{current}}/{{total}}…",
+          "downloading-playlist": "Mengunduh playlist \"{{playlistTitle}}\" - {{playlistSize}} lagu ({{playlistId}})",
+          "error-while-downloading": "Gagal mengunduh \"{{author}} - {{title}}\": {{error}}",
+          "folder-already-exists": "Folder {{playlistFolder}} sudah ada",
+          "getting-playlist-info": "Mendapatkan informasi playlist…",
+          "loading": "Memuat…",
+          "playlist-has-only-one-song": "Daftar putar hanya memiliki satu item, mengunduhnya secara langsung",
+          "playlist-id-not-found": "ID playlist tidak ditemukan",
+          "playlist-is-empty": "Playlist kosong",
+          "playlist-is-mix-or-private": "Kesalahan mendapatkan info playlist: pastikan bukan playlist pribadi atau \"Campuran untuk Anda\"\n\n{{error}}",
+          "preparing-file": "Menyiapkan file…",
+          "saving": "Menyimpan…",
+          "trying-to-get-playlist-id": "Mencoba mendapatkan ID playlist: {{playlistId}}",
+          "video-id-not-found": "Video tidak ditemukan",
+          "writing-id3": "Menulis tanda ID3…"
+        }
+      },
+      "description": "Unduh MP3 / sumber suara secara langsung via antarmuka",
+      "menu": {
+        "choose-download-folder": "Pilih folder unduhan",
+        "download-playlist": "Unduh daftar putar",
+        "presets": "Prasetel",
+        "skip-existing": "Lewati berkas yang sudah ada"
+      },
+      "name": "Pengunduh",
+      "renderer": {
+        "can-not-update-progress": "Tidak dapat memperbarui proses"
+      },
+      "templates": {
+        "button": "Unduh"
+      }
+    },
+    "exponential-volume": {
+      "description": "Buat penggeser volume menjadi eksponen sehingga memudahkan memilih volume yang lebih rendah.",
+      "name": "Volume Eksponen"
+    },
+    "in-app-menu": {
+      "description": "Buat bilah-menu terlihat indah, gelap atau serupa dengan album",
+      "menu": {
+        "hide-dom-window-controls": "Sembunyikan DOM pengendali jendela"
+      },
+      "name": "Menu di Aplikasi"
+    },
+    "lumiastream": {
+      "description": "Tambah dukungan Lumia Stream",
+      "name": "Lumia Stream [Beta]"
+    },
+    "lyrics-genius": {
+      "description": "Tambah dukungan lirik untuk kebanyakan lagu",
+      "menu": {
+        "romanized-lyrics": "Romanisasi Lirik"
+      },
+      "name": "Lirik Genius",
+      "renderer": {
+        "fetched-lyrics": "Lirik yang diambil untuk Genius"
+      }
+    },
+    "music-together": {
+      "description": "Bagikan daftar putar dengan yang lain. Saat host memainkan lagu, semua orang akan mendengarkan lagu yang sama",
+      "dialog": {
+        "enter-host": "Masukkan ID Host"
+      },
+      "internal": {
+        "save": "Simpan",
+        "track-source": "Sumber Trek",
+        "unknown-user": "Pengguna Tidak Diketahui"
+      },
+      "menu": {
+        "click-to-copy-id": "Salin ID Host",
+        "close": "Tutup Musik Bersama",
+        "connected-users": "Pengguna Terhubung",
+        "disconnect": "Putuskan Musik Bersama",
+        "empty-user": "Tidak ada pengguna terhubung",
+        "host": "Host Musik Bersama",
+        "join": "Gabung Musik Bersama",
+        "permission": {
+          "all": "Izinkan tamu untuk mengendalikan daftar putar dan pemutar",
+          "host-only": "Hanya host yang dapat mengendalikan daftar putar dan pemutar",
+          "playlist": "Izinkan tamu untuk mengendalikan daftar putar"
+        },
+        "set-permission": "Ubah Pengendali Izin",
+        "status": {
+          "disconnected": "Terputus",
+          "guest": "Terhubung sebagai Tamu",
+          "host": "Terhubung sebagai Host"
+        }
+      },
+      "name": "Musik Bersama [Beta]",
+      "toast": {
+        "add-song-failed": "Gagal untuk menambahkan lagu",
+        "closed": "Musik Bersama ditutup",
+        "disconnected": "Musik Bersama terputus",
+        "host-failed": "Gagal untuk memulai Musik Bersama",
+        "id-copied": "ID Host tersalin ke papan klip",
+        "id-copy-failed": "Gagal menyalin ID Host ke papan klip",
+        "join-failed": "Gagal untuk bergabung ke Musik Bersama",
+        "joined": "Bergabung ke Musik Bersama",
+        "permission-changed": "Perizinan Musik Bersama diubah ke \"{{permission}}\"",
+        "remove-song-failed": "Gagal menghapus lagu",
+        "user-connected": "{{name}} bergabung ke Musik Bersama",
+        "user-disconnected": "{{name}} meninggalkan Musik Bersama"
+      }
+    },
+    "navigation": {
+      "description": "panah navigasi Selanjutnya/Sebelumnya terintegrasi pada antarmuka, layaknya peramban kesukaan Anda",
+      "name": "Navigasi"
+    },
+    "no-google-login": {
+      "description": "Hapus tombol dan tautan masuk Google dari antarmuka",
+      "name": "Tanpa Google Login"
+    },
+    "notifications": {
+      "description": "Tampilkan pemberitahuan saat lagu dimainkan (pemberitahuan interaktif tersedia di Windows)",
+      "menu": {
+        "interactive": "Pemberitahuan Interaktif",
+        "interactive-settings": {
+          "label": "Pengaturan Interaktif",
+          "submenu": {
+            "hide-button-text": "Sembunyikan teks tombol",
+            "refresh-on-play-pause": "Segarkan saat Putar/Jeda",
+            "tray-controls": "Buka/Tutup saat baki ditekan"
+          }
+        },
+        "priority": "Prioritas Pemberitahuan",
+        "toast-style": "Gaya Toast",
+        "unpause-notification": "Tampilkan pemberitahuan saat tidak dijeda"
+      },
+      "name": "Pemberitahuan"
+    },
+    "picture-in-picture": {
+      "description": "Izinkan untuk memindahkan aplikasi ke mode gambar-dalam-gambar",
+      "menu": {
+        "always-on-top": "Selalu di atas",
+        "hotkey": {
+          "label": "Pintasan",
+          "prompt": {
+            "keybind-options": {
+              "hotkey": "Pintasan"
+            },
+            "label": "Pilih pintasan untuk beralih ke gambar-dalam-gambar",
+            "title": "Pintasan gambar-dalam-gambar"
+          }
+        },
+        "save-window-position": "Simpan posisi jendela",
+        "save-window-size": "Simpan ukuran jendela",
+        "use-native-pip": "Gunakan PiP bawaan peramban"
+      },
+      "name": "Gambar-dalam-gambar",
+      "templates": {
+        "button": "Gambar-dalam-gambar"
+      }
+    },
+    "playback-speed": {
+      "description": "Dengarkan cepat, dengarkan perlahan! Tambahkan penggeser untuk mengendalikan kecepatan lagu",
+      "name": "Kecepatan Pemutar",
+      "templates": {
+        "button": "Kecepatan"
+      }
+    },
+    "precise-volume": {
+      "description": "Kendalikan volume secara presisi menggunakan roda tetikus/pintasan, dengan HUD kustom dan langkah volume yang dapat diatur",
+      "menu": {
+        "arrows-shortcuts": "Kendali Tombol Panah Lokal",
+        "custom-volume-steps": "Atur Langkah Volume Kustom",
+        "global-shortcuts": "Pintasan Global"
+      },
+      "name": "Volume Presisi",
+      "prompt": {
+        "global-shortcuts": {
+          "keybind-options": {
+            "decrease": "Kurangi Volume",
+            "increase": "Tingkatkan Volume"
+          },
+          "label": "Pilih Pintasan Volume Global:",
+          "title": "Pintasan Volume Global"
+        },
+        "volume-steps": {
+          "label": "Pilih Langkah Peningkatan/Pengurangan Volume",
+          "title": "Langkah Volume"
+        }
+      }
+    },
+    "quality-changer": {
+      "backend": {
+        "dialog": {
+          "quality-changer": {
+            "detail": "Kualitas Terkini: {{quality}}",
+            "message": "Pilih Kualitas Video:",
+            "title": "Pilih Kualitas Video"
+          }
+        }
+      },
+      "description": "Izinkan untuk mengubah kualitas video dengan tombol pada hamparan video",
+      "name": "Pengubah Kualitas Video"
+    },
+    "scrobbler": {
+      "description": "Tambahkan dukungan scrobbling (mis. last.fm, Listenbrainz)",
+      "menu": {
+        "lastfm": {
+          "api-settings": "Pengaturan API Last.fm"
+        },
+        "listenbrainz": {
+          "token": "Masukkan token pengguna ListenBrainz"
+        },
+        "scrobble-other-media": "Scrobble media lain"
+      },
+      "name": "Scrobbler",
+      "prompt": {
+        "lastfm": {
+          "api-key": "Kunci API Last.fm",
+          "api-secret": "Secret API Last.fm"
+        },
+        "listenbrainz": {
+          "token": {
+            "label": "Masukkan token pengguna ListenBrainz Anda:",
+            "title": "Token ListenBrainz"
+          }
+        }
+      }
+    },
+    "shortcuts": {
+      "description": "Izinkan pengaturan pintasan global untuk pemutar (main/jeda/selanjutnya/sebelumnya) dan mematikan OSD media dengan mengesampingkan tombol media, mengaktifkan Ctrl/CMD + F untuk pencarian, mengaktifkan dukungan MPRIS Linux untuk tombol media, dan tombol pintasan kustom untuk pengguna lanjutan",
+      "menu": {
+        "override-media-keys": "Timpa Tombol Media",
+        "set-keybinds": "Atur Pengendali Lagu Global"
+      },
+      "name": "Pintasan (& MPRIS)",
+      "prompt": {
+        "keybind": {
+          "keybind-options": {
+            "next": "Selanjutnya",
+            "play-pause": "Main / Jeda",
+            "previous": "Sebelumnya"
+          },
+          "label": "Pilih Pintasan Global untuk Pengendali Lagu:",
+          "title": "Pintasan Global"
+        }
+      }
+    },
+    "skip-disliked-songs": {
+      "description": "Lewati lagu yang tidak disukai",
+      "name": "Lewati Lagu yang Tidak Disukai"
+    },
+    "skip-silences": {
+      "description": "Otomatis lewati bagian hening dari lagu",
+      "name": "Lewati Keheningan"
+    },
+    "sponsorblock": {
+      "description": "Otomatis Melewati bagian yang bukan musik seperti intro/outro atau bagian dari video musik di mana lagu tidak dimainkan",
+      "name": "SponsorBlock"
+    },
+    "taskbar-mediacontrol": {
+      "description": "Kendalikan pemutaran dari bilah alat Windows",
+      "name": "Pengendali Media di Bilah Alat"
+    },
+    "touchbar": {
+      "description": "Tambahkan widget TouchBar untuk pengguna macOS",
+      "name": "TouchBar"
+    },
+    "tuna-obs": {
+      "description": "Integrasi dengan plugin Tuna OBS",
+      "name": "Tuna OBS"
+    },
+    "video-toggle": {
+      "description": "Tambahkan tombol untuk beralih antara mode Lagu/Video. secara opsional juga dapat menghapus keseluruhan tab video",
+      "menu": {
+        "align": {
+          "label": "Perataan",
+          "submenu": {
+            "left": "Kiri",
+            "middle": "Tengah",
+            "right": "Kanan"
+          }
+        },
+        "force-hide": "Paksa hapus tab video",
+        "mode": {
+          "label": "Mode",
+          "submenu": {
+            "custom": "Peralih kustom",
+            "disabled": "Mati",
+            "native": "Peralih bawaan"
+          }
+        }
+      },
+      "name": "Peralih Video",
+      "templates": {
+        "button": "Lagu"
+      }
+    },
+    "visualizer": {
+      "description": "Tambahkan visualisator ke pemutar",
+      "menu": {
+        "visualizer-type": "Tipe Visualisator"
+      },
+      "name": "Visualisator"
+    }
   }
 }

src/i18n/resources/it.json

@@ -191,7 +191,11 @@
       "previous": "Precedente",
       "quit": "Esci",
       "restart": "Riavvia l'app",
-      "show": "Mostra finestra"
+      "show": "Mostra finestra",
+      "tooltip": {
+        "default": "YouTube Music",
+        "with-song-info": "YouTube Music: {{artist}} - {{title}}"
+      }
     }
   },
   "plugins": {
@@ -203,15 +207,23 @@
       "name": "Ad blocker"
     },
     "album-actions": {
-      "description": "Aggiunge i pulsanti Undislike, Dislike, Like e Unlike a tutti i brani di una playlist o di un album.",
+      "description": "Aggiunge i pulsanti Undislike, Dislike, Like e Unlike a tutti i brani di una playlist o di un album",
       "name": "Azioni album"
     },
     "album-color-theme": {
       "description": "Applica un tema dinamico e degli effetti visivi basandosi sul colore dell'album",
+      "menu": {
+        "color-mix-ratio": {
+          "label": "Percentiuale colore",
+          "submenu": {
+            "percent": "{{ratio}}%"
+          }
+        }
+      },
       "name": "Tema abbinato a colore album"
     },
     "ambient-mode": {
-      "description": "Applica un effetto di illuminazione proiettando i colori delicati del video sullo sfondo dello schermo.",
+      "description": "Applica un effetto di illuminazione proiettando i colori delicati del video sullo sfondo dello schermo",
       "menu": {
         "blur-amount": {
           "label": "Intensità sfocatura",
@@ -413,10 +425,6 @@
       },
       "name": "Menu In-App"
     },
-    "last-fm": {
-      "description": "Aggiungi supporto per lo scrobbling su Last.fm",
-      "name": "Last.fm"
-    },
     "lumiastream": {
       "description": "Aggiungi supporto per Lumia Stream",
       "name": "Lumia Stream [Beta]"
@@ -468,6 +476,7 @@
         "disconnected": "Music Together disconnesso",
         "host-failed": "Impossibile ospitare Music Together",
         "id-copied": "L'ID dell Host è stato copiato negli appunti",
+        "id-copy-failed": "Impossibile copiare l'ID dell'host negli appunti",
         "join-failed": "Impossibile unirsi a Music Together",
         "joined": "Unito a Music Together",
         "permission-changed": "L'autorizzazione di Music Together è cambiata in {{permission}}",
@@ -568,8 +577,33 @@
       "description": "Permette di cambiare la qualità del video con un pulsante in sovrimpressione",
       "name": "Cambia qualità video"
     },
+    "scrobbler": {
+      "description": "Aggiunge il supporto per lo scrobbling (Last.fm, Listenbrainz ecc.)",
+      "menu": {
+        "lastfm": {
+          "api-settings": "Impostazione Last.fm API"
+        },
+        "listenbrainz": {
+          "token": "Inserire il token utente per ListenBrainz"
+        },
+        "scrobble-other-media": "Scrobble altri media"
+      },
+      "name": "Scrobbler",
+      "prompt": {
+        "lastfm": {
+          "api-key": "API key per Last.fm",
+          "api-secret": "API secret per Last.fm"
+        },
+        "listenbrainz": {
+          "token": {
+            "label": "Inserisci il tuo token utente ListenBrainz:",
+            "title": "Token ListenBrainz"
+          }
+        }
+      }
+    },
     "shortcuts": {
-      "description": "Consente di impostare tasti di scelta rapida globali per la riproduzione (riproduci/pausa/successivo/precedente) + disabilita l'OSD multimediale sovrascrivendo i tasti multimediali + abilita Ctrl/CMD + F per la ricerca + abilita il supporto Linux MPRIS per i tasti multimediali + tasti di scelta rapida personalizzati per utenti avanzati.",
+      "description": "Consente di impostare tasti di scelta rapida globali per la riproduzione (riproduci/pausa/successivo/precedente) + disabilita l'OSD multimediale sovrascrivendo i tasti multimediali + abilita Ctrl/CMD + F per la ricerca + abilita il supporto Linux MPRIS per i tasti multimediali + tasti di scelta rapida personalizzati per utenti avanzati",
       "menu": {
         "override-media-keys": "Ridefinisci i tasti multimediali",
         "set-keybinds": "Imposta i controlli brano globali"

src/i18n/resources/ja.json

@@ -170,7 +170,8 @@
       },
       "plugins": {
         "enabled": "有効",
-        "label": "プラグイン"
+        "label": "プラグイン",
+        "new": "新着"
       },
       "view": {
         "label": "表示",
@@ -190,7 +191,11 @@
       "previous": "前の曲",
       "quit": "終了",
       "restart": "アプリを再起動",
-      "show": "ウィンドウを表示"
+      "show": "ウィンドウを表示",
+      "tooltip": {
+        "default": "YouTube ミュージック",
+        "with-song-info": "YouTube ミュージック: {{artist}} - {{title}}"
+      }
     }
   },
   "plugins": {
@@ -199,14 +204,26 @@
       "menu": {
         "blocker": "ブロッカー"
       },
-      "name": "Adblocker"
+      "name": "広告ブロッカー"
+    },
+    "album-actions": {
+      "description": "「Undislike（嫌いではない）」「Dislike（嫌い）」「Like（好き）」「Unlike（好きではない）」ボタンを追加し、プレイリストやアルバム内のすべての曲にこれらを適用します",
+      "name": "アルバムアクション"
     },
     "album-color-theme": {
       "description": "アルバムカバーの色をベースにして動的テーマと視覚効果を適用します",
+      "menu": {
+        "color-mix-ratio": {
+          "label": "カラー混合比率",
+          "submenu": {
+            "percent": "{{ratio}}%"
+          }
+        }
+      },
       "name": "アルバムカラーベースのテーマ"
     },
     "ambient-mode": {
-      "description": "動画の間接照明を画面背景に投射します。",
+      "description": "動画の内容に合った淡い色に画面の背景を変化させるライティング効果を適応します",
       "menu": {
         "blur-amount": {
           "label": "ぼかしの強さ",
@@ -239,9 +256,9 @@
           }
         },
         "smoothness-transition": {
-          "label": "スムーズな切り替えり",
+          "label": "スムーズな切り替え",
           "submenu": {
-            "during": "{{interpolationTime}}秒間切り替えり"
+            "during": "{{interpolationTime}}秒間切り替え"
           }
         },
         "use-fullscreen": {
@@ -408,10 +425,6 @@
       },
       "name": "アプリ内メニュー"
     },
-    "last-fm": {
-      "description": "Last.fmのscrobblingサポートを追加",
-      "name": "Last.fm"
-    },
     "lumiastream": {
       "description": "Lumia Streamのサポートを追加",
       "name": "Lumia Stream [ベータ]"
@@ -426,6 +439,52 @@
         "fetched-lyrics": "Geniusから歌詞取得完了"
       }
     },
+    "music-together": {
+      "description": "プレイリストを他の人と共有します。 ホストが曲を再生すると、他の全員にも同じ曲が聞こえます",
+      "dialog": {
+        "enter-host": "ホストIDを入力"
+      },
+      "internal": {
+        "save": "保存",
+        "track-source": "トラックソース",
+        "unknown-user": "不明なユーザー"
+      },
+      "menu": {
+        "click-to-copy-id": "ホストIDをコピー",
+        "close": "一緒に音楽を閉じる",
+        "connected-users": "接続されているユーザー",
+        "disconnect": "一緒に音楽を切断する",
+        "empty-user": "接続中のユーザーはいません",
+        "host": "Music Together ホスト",
+        "join": "一緒に音楽に参加",
+        "permission": {
+          "all": "ゲストがプレイリストとプレーヤーを制御できるようにする",
+          "host-only": "ホストのみがプレイリストとプレーヤーを制御できます",
+          "playlist": "ゲストによるプレイリストの制御を許可する"
+        },
+        "set-permission": "制御権限を変更",
+        "status": {
+          "disconnected": "切断されました",
+          "guest": "ゲストとして接続しました",
+          "host": "ホストとして接続されています"
+        }
+      },
+      "name": "一緒に音楽 [ベータ版]",
+      "toast": {
+        "add-song-failed": "曲の追加に失敗しました",
+        "closed": "一緒に音楽が閉じられました",
+        "disconnected": "一緒に音楽が切断されました",
+        "host-failed": "一緒に音楽のホストに失敗しました",
+        "id-copied": "ホストIDがクリップボードにコピーされました",
+        "id-copy-failed": "ホストIDをクリップボードにコピー出来ませんでした",
+        "join-failed": "一緒に音楽に参加出来ませんでした",
+        "joined": "一緒に音楽に参加しました",
+        "permission-changed": "一緒に音楽の権限が \"{{permission}}\" に変更されました",
+        "remove-song-failed": "曲の削除に失敗しました",
+        "user-connected": "{{name}} が一緒に音楽に参加しました",
+        "user-disconnected": "{{name}} が一緒に音楽を退出しました"
+      }
+    },
     "navigation": {
       "description": "ブラウザの戻る・進むボタンのようにUIからコントロールできるボタン",
       "name": "ナビゲーション"
@@ -518,6 +577,31 @@
       "description": "ビデオオーバーレイのボタンを使用してビデオ品質を変更できるようにします",
       "name": "ビデオ品質チェンジャー"
     },
+    "scrobbler": {
+      "description": "スクロブリング対応を追加します（例：last.fm、Listenbrainzなど）",
+      "menu": {
+        "lastfm": {
+          "api-settings": "Last.fm API 設定"
+        },
+        "listenbrainz": {
+          "token": "ListenBrainzユーザートークンを入力してください"
+        },
+        "scrobble-other-media": "他のメディアをScrobbleする"
+      },
+      "name": "スクロブラー",
+      "prompt": {
+        "lastfm": {
+          "api-key": "Last.fm APIキー",
+          "api-secret": "Last.fm API シークレット"
+        },
+        "listenbrainz": {
+          "token": {
+            "label": "ListenBrainzのユーザートークンを入力してください:",
+            "title": "ListenBrainzトークン"
+          }
+        }
+      }
+    },
     "shortcuts": {
       "description": "再生用のグローバル ホットキー (再生/一時停止/次/前) の設定、メディア キーをオーバーライドしてメディア OSD を無効にする、Ctrl/CMD + F による検索を有効にする、 メディアキーの Linux mpris サポートを有効にする、 上級ユーザー向けのカスタム ホットキー を可能にします",
       "menu": {
@@ -551,7 +635,7 @@
     },
     "taskbar-mediacontrol": {
       "description": "Windowsタスクバーから再生をコントロール",
-      "name": "Taskbar Media Control"
+      "name": "タスクバーメディアコントロール"
     },
     "touchbar": {
       "description": "masOSユーザー向けにTouchBarウィジェットを追加",

src/i18n/resources/ko.json

@@ -207,15 +207,23 @@
       "name": "광고 차단기"
     },
     "album-actions": {
-      "description": "좋아요, 싫어요 버튼을 추가하고, 결과를 재생 목록 또는 앨범의 모든 노래에 적용합니다.",
+      "description": "좋아요, 싫어요 버튼을 추가하고, 결과를 재생 목록 또는 앨범의 모든 노래에 적용합니다",
       "name": "앨범 액션"
     },
     "album-color-theme": {
       "description": "앨범 색상 팔레트를 기반으로 동적 테마 및 시각 효과를 적용합니다",
+      "menu": {
+        "color-mix-ratio": {
+          "label": "색상 혼합 비율",
+          "submenu": {
+            "percent": "{{ratio}}%"
+          }
+        }
+      },
       "name": "앨범 컬러 기반 테마"
     },
     "ambient-mode": {
-      "description": "영상의 간접 조명을 화면 배경에 투사합니다.",
+      "description": "영상의 간접 조명을 화면 배경에 투사합니다",
       "menu": {
         "blur-amount": {
           "label": "흐림 효과 강도",
@@ -417,10 +425,6 @@
       },
       "name": "인앱 메뉴"
     },
-    "last-fm": {
-      "description": "Last.fm에 대한 스크러블 지원을 추가합니다",
-      "name": "Last.fm"
-    },
     "lumiastream": {
       "description": "Lumia Stream 지원을 추가합니다",
       "name": "Lumia Stream [베타]"
@@ -573,8 +577,41 @@
       "description": "영상 오버레이의 버튼으로 영상 품질을 변경할 수 있습니다",
       "name": "영상 품질 체인저"
     },
+    "scrobbler": {
+      "description": "스크로블링 지원을 추가합니다 (예: last.fm, Listenbrainz)",
+      "dialog": {
+        "lastfm": {
+          "auth-failed": {
+            "message": "Last.fm 인증에 실패했습니다\n다음에 다시 시작할 때까지 팝업을 숨깁니다.",
+            "title": "인증 실패"
+          }
+        }
+      },
+      "menu": {
+        "lastfm": {
+          "api-settings": "Last.fm API 설정"
+        },
+        "listenbrainz": {
+          "token": "ListenBrainz 유저 토큰 입력"
+        },
+        "scrobble-other-media": "다른 미디어 스크로블하기"
+      },
+      "name": "스크로블러",
+      "prompt": {
+        "lastfm": {
+          "api-key": "Last.fm API 키",
+          "api-secret": "Last.fm API 비밀 키"
+        },
+        "listenbrainz": {
+          "token": {
+            "label": "ListenBrainz 유저 토큰을 입력하세요:",
+            "title": "ListenBrainz 토큰"
+          }
+        }
+      }
+    },
     "shortcuts": {
-      "description": "재생을 위한 전역 단축키 설정 허용 (재생/일시 정지/다음/이전), 미디어 키를 재정의하여 미디어 OSD 비활성화, Ctrl/CMD + F 검색을 활성화, 미디어키 지원을 위해 리눅스 MPRIS 지원 활성화, 고급 사용자를 위한 사용자 지정 단축키 지원 추가.",
+      "description": "재생을 위한 전역 단축키 설정 허용 (재생/일시 정지/다음/이전), 미디어 키를 재정의하여 미디어 OSD 비활성화, Ctrl/CMD + F 검색을 활성화, 미디어키 지원을 위해 리눅스 MPRIS 지원 활성화, 고급 사용자를 위한 사용자 지정 단축키 지원 추가",
       "menu": {
         "override-media-keys": "미디어 키 재정의",
         "set-keybinds": "전역 노래 제어 설정"

src/i18n/resources/lt.json

@@ -408,10 +408,6 @@
       },
       "name": "Programos Meniu"
     },
-    "last-fm": {
-      "description": "Pridėkite Last.fm scrobble palaikymą",
-      "name": "Last.fm"
-    },
     "lumiastream": {
       "description": "Prideda \"Lumia Stream\" palaikymą",
       "name": "Lumia Stream [Beta]"

src/i18n/resources/nb.json

@@ -406,10 +406,6 @@
       },
       "name": "Meny i programmet"
     },
-    "last-fm": {
-      "description": "Legg til lyttestatistikkstøtte for Last.fm",
-      "name": "Last.fm"
-    },
     "lumiastream": {
       "description": "Legger til Lumia Stream-støtte",
       "name": "Lumia Stream [Beta]"

src/i18n/resources/pl.json

@@ -170,7 +170,8 @@
       },
       "plugins": {
         "enabled": "Włączone",
-        "label": "Wtyczki"
+        "label": "Wtyczki",
+        "new": "NOWOŚĆ"
       },
       "view": {
         "label": "Widok",
@@ -190,7 +191,11 @@
       "previous": "Poprzedni",
       "quit": "Wyjdź",
       "restart": "Uruchom ponownie aplikację",
-      "show": "Pokaż okno"
+      "show": "Pokaż okno",
+      "tooltip": {
+        "default": "YouTube Music",
+        "with-song-info": "{{title}} (autorstwa {{artist}}) - YT Music"
+      }
     }
   },
   "plugins": {
@@ -201,12 +206,23 @@
       },
       "name": "Blokowanie reklam"
     },
+    "album-actions": {
+      "description": "Dodaje przyciski łapek w górę i dół do wszystkich piosenek podczas w albumach lub listach odtwarzania",
+      "name": "Akcje albumu"
+    },
     "album-color-theme": {
       "description": "Stosuje dynamiczny motyw i efekty wizualne w oparciu o paletę kolorów albumu",
+      "menu": {
+        "color-mix-ratio": {
+          "submenu": {
+            "percent": "{{ratio}}%"
+          }
+        }
+      },
       "name": "Motyw kolorów albumu"
     },
     "ambient-mode": {
-      "description": "Stosuje efekt świetlny, rzucając delikatne kolory z wideo na tło ekranu.",
+      "description": "Stosuje efekt świetlny, rzucając delikatne kolory z wideo na tło ekranu",
       "menu": {
         "blur-amount": {
           "label": "Ilość rozmycia",
@@ -289,7 +305,7 @@
       "menu": {
         "advanced": "Zaawansowane"
       },
-      "name": "Przenikanie [Beta]",
+      "name": "Płynne przejście [Beta]",
       "prompt": {
         "options": {
           "multi-input": {
@@ -408,10 +424,6 @@
       },
       "name": "Menu w aplikacji"
     },
-    "last-fm": {
-      "description": "Dodanie obsługi scrobblingu dla Last.fm",
-      "name": "Last.fm"
-    },
     "lumiastream": {
       "description": "Dodaje obsługę Lumia Stream",
       "name": "Lumia Stream [Beta]"
@@ -426,6 +438,52 @@
         "fetched-lyrics": "Tekst dostarczony przez Genius"
       }
     },
+    "music-together": {
+      "description": "Pozwala na udostępnianie listy odtwarzania w taki sposób, że osoby po wejściu w link słuchają tego samego utworu co host (jeżeli słucha jej z owej listy odtwarzania)",
+      "dialog": {
+        "enter-host": "Wpisz ID hosta"
+      },
+      "internal": {
+        "save": "Zapisz",
+        "track-source": "Źródło utworu",
+        "unknown-user": "Nieznany użytkownik"
+      },
+      "menu": {
+        "click-to-copy-id": "Kopiuj ID hosta",
+        "close": "Zakończ host",
+        "connected-users": "Połączeni użytkownicy",
+        "disconnect": "Rozłącz z hosta",
+        "empty-user": "Brak połączonych użytkowników",
+        "host": "Host słuchania razem",
+        "join": "Połącz z hostem",
+        "permission": {
+          "all": "Połączeni użytkownicy mają kontrolę nad listą odtwarzania oraz playerem",
+          "host-only": "Tylko host może kontrolować listę odtwarzania oraz playera",
+          "playlist": "Połączeni użytkownicy maja kontrolę tylko nad listą odtwarzania"
+        },
+        "set-permission": "Zmień permisję kontroli",
+        "status": {
+          "disconnected": "Rozłączony",
+          "guest": "Połączony jako Użytkownik",
+          "host": "Połączony jako Host"
+        }
+      },
+      "name": "Słuchanie razem [Beta]",
+      "toast": {
+        "add-song-failed": "Wystąpił błąd z dodaniem muzyki",
+        "closed": "Host słuchania razem został zamknięty pomyślnie",
+        "disconnected": "Pomyślnie rozłączono z hosta słuchania razem",
+        "host-failed": "Wystąpił błąd z hostem słuchania razem",
+        "id-copied": "ID hosta został wklejony do schowka",
+        "id-copy-failed": "Wystąpił błąd z próbą skopiowania ID do schowka",
+        "join-failed": "Wystąpił błąd z dołączeniem do hosta",
+        "joined": "Dołączono pomyślnie do hosta słuchania razem",
+        "permission-changed": "Permisja hosta została zmieniona na \"{{permission}}\"",
+        "remove-song-failed": "Wystąpił błąd z usunięciem utworu",
+        "user-connected": "Do hosta dołączył {{name}}",
+        "user-disconnected": "{{name}} właśnie wyszedł z hosta"
+      }
+    },
     "navigation": {
       "description": "Strzałki nawigacyjne Dalej/Wstecz zintegrowane bezpośrednio z interfejsem, tak jak w Twojej ulubionej przeglądarce",
       "name": "Nawigacja"
@@ -518,8 +576,26 @@
       "description": "Umożliwia zmianę jakości wideo za pomocą przycisku na nakładce wideo",
       "name": "Zmieniacz jakości wideo"
     },
+    "scrobbler": {
+      "menu": {
+        "listenbrainz": {
+          "token": "Podaj token użytkownika ListenBrainz"
+        }
+      },
+      "prompt": {
+        "lastfm": {
+          "api-key": "klucz API Last.fm"
+        },
+        "listenbrainz": {
+          "token": {
+            "label": "Podaj swój token użytkownika ListenBrainz:",
+            "title": "Token ListenBrainz"
+          }
+        }
+      }
+    },
     "shortcuts": {
-      "description": "Umożliwia ustawienie globalnych skrótów klawiszowych do odtwarzania (odtwarzanie/pauza/następny/poprzedni) + wyłączanie OSD multimediów poprzez zastąpienie klawiszy multimediów, włączając kombinację klawiszy Ctrl/CMD + F w celu wyszukiwania, obsługę Linux MPRIS dla klawiszy multimediów oraz niestandardowe skróty klawiszowe dla zaawansowanych użytkowników.",
+      "description": "Umożliwia ustawienie globalnych skrótów klawiszowych do odtwarzania (odtwarzanie/pauza/następny/poprzedni) + wyłączanie OSD multimediów poprzez zastąpienie klawiszy multimediów, włączając kombinację klawiszy Ctrl/CMD + F w celu wyszukiwania, obsługę Linux MPRIS dla klawiszy multimediów oraz niestandardowe skróty klawiszowe dla zaawansowanych użytkowników",
       "menu": {
         "override-media-keys": "Zastąp klawisze multimediów",
         "set-keybinds": "Ustaw globalne sterowanie utworem"

src/i18n/resources/pt.json

@@ -170,7 +170,8 @@
       },
       "plugins": {
         "enabled": "Ativado",
-        "label": "Plugins"
+        "label": "Plugins",
+        "new": "NOVO"
       },
       "view": {
         "label": "Ver",
@@ -190,7 +191,11 @@
       "previous": "Anterior",
       "quit": "Sair",
       "restart": "Reiniciar aplicativo",
-      "show": "Mostrar janela"
+      "show": "Mostrar janela",
+      "tooltip": {
+        "default": "YouTube Music",
+        "with-song-info": "YouTube Music: {{artist}} - {{title}}"
+      }
     }
   },
   "plugins": {
@@ -201,6 +206,10 @@
       },
       "name": "Bloqueador de anúncios"
     },
+    "album-actions": {
+      "description": "Adiciona os botões Gostei e Não Gostei para ser aplicado a todas as músicas em uma lista de reprodução ou álbum.",
+      "name": "Ações no álbum"
+    },
     "album-color-theme": {
       "description": "Aplica um tema dinâmico e efeitos visuais com base na paleta de cores do álbum",
       "name": "Tema de cores do álbum"
@@ -408,10 +417,6 @@
       },
       "name": "Menu no aplicativo"
     },
-    "last-fm": {
-      "description": "Adiciona suporte de scrobbling para Last.fm",
-      "name": "Last.fm"
-    },
     "lumiastream": {
       "description": "Adiciona suporte Lumia Stream",
       "name": "Lumia Stream [Beta]"
@@ -426,6 +431,52 @@
         "fetched-lyrics": "Buscar letras no Genius"
       }
     },
+    "music-together": {
+      "description": "Compartilha a playlist com outros. Quando o host tocar uma música, todos poderão ouvir a mesma canção",
+      "dialog": {
+        "enter-host": "Digite o ID do Host"
+      },
+      "internal": {
+        "save": "Salvar",
+        "track-source": "Fonte da faixa",
+        "unknown-user": "Usuário Desconhecido"
+      },
+      "menu": {
+        "click-to-copy-id": "Copiar ID do Host",
+        "close": "Fechar o Música Juntos",
+        "connected-users": "Usuários Conectados",
+        "disconnect": "Desconectar do Música Juntos",
+        "empty-user": "Sem usuários conectados",
+        "host": "Host do Música Juntos",
+        "join": "Juntar ao Música Juntos",
+        "permission": {
+          "all": "Permita que outros controlem a playlist e ao player",
+          "host-only": "Apenas o host pode controlar a playlist e ao player",
+          "playlist": "Permitir que outros controlem a playlist"
+        },
+        "set-permission": "Alterar permissões de controle",
+        "status": {
+          "disconnected": "Desconectado",
+          "guest": "Conectado como Convidado",
+          "host": "Conectado como Host"
+        }
+      },
+      "name": "Música Juntos [Beta]",
+      "toast": {
+        "add-song-failed": "Falha ao adicionar canção",
+        "closed": "Música Juntos encerrado",
+        "disconnected": "Música Juntos foi desconectado",
+        "host-failed": "Falha ao hospedar o Música Juntos",
+        "id-copied": "ID de anfitrião copiado para a área de transferência",
+        "id-copy-failed": "Falha ao copiar o ID de anfitrião para a área de transferência",
+        "join-failed": "Falha ao entrar em Música Juntos",
+        "joined": "Entrou em Música Juntos",
+        "permission-changed": "A permissão do Música Juntos foi alterada para \"{{permission}}\"",
+        "remove-song-failed": "Falha ao remover música",
+        "user-connected": "{{name}} entrou em Música Juntos",
+        "user-disconnected": "{{name}} saiu do Música Juntos"
+      }
+    },
     "navigation": {
       "description": "Setas de navegação Próximo/Voltar integradas diretamente na interface, como no seu navegador favorito",
       "name": "Navegação"

src/i18n/resources/ru.json

@@ -33,7 +33,7 @@
         "css-file-not-found": "CSS файл \"{{cssFile}}\" не существует, игнорирую"
       },
       "unresponsive": {
-        "details": "Приложение не отвечает\n{{error}}"
+        "details": "Приложение не отвечает!\n{{error}}"
       },
       "when-ready": {
         "clearing-cache-after-20s": "Очищаю кеш приложения"
@@ -63,7 +63,7 @@
           "relaunch": "Перезапустить",
           "wait": "Подождать"
         },
-        "detail": "Извиняемся за неувязку! пожалуйста выберите что вы хотите сделать:",
+        "detail": "Извините за причиненные неудобства! Пожалуйста, выберите, что делать:",
         "message": "Приложение не отвечает",
         "title": "Окно не отвечает"
       },
@@ -170,14 +170,15 @@
       },
       "plugins": {
         "enabled": "Включено",
-        "label": "Плагины"
+        "label": "Плагины",
+        "new": "НОВИНКА"
       },
       "view": {
         "label": "Вид",
         "submenu": {
           "force-reload": "Принудительная перезагрузка",
           "reload": "Перезагрузить",
-          "reset-zoom": "Настоящий размер",
+          "reset-zoom": "Текущий размер",
           "toggle-fullscreen": "Включить полноэкранный режим",
           "zoom-in": "Приблизить",
           "zoom-out": "Отдалить"
@@ -190,7 +191,11 @@
       "previous": "Предыдущий",
       "quit": "Выйти",
       "restart": "Перезагрузить приложение",
-      "show": "Показать окно"
+      "show": "Показать окно",
+      "tooltip": {
+        "default": "YouTube Music",
+        "with-song-info": "YouTube Music: {{artist}} - {{title}}"
+      }
     }
   },
   "plugins": {
@@ -201,12 +206,24 @@
       },
       "name": "Блокировщик рекламы"
     },
+    "album-actions": {
+      "description": "Добавляет кнопки Undislike, Dislike и Unlike, чтобы применять их на все композиции в плейлисте или альбоме",
+      "name": "Действия с альбомом"
+    },
     "album-color-theme": {
       "description": "Применяет динамическую тему и визуальные эффекты на основе цветовой палитры альбома",
+      "menu": {
+        "color-mix-ratio": {
+          "label": "Соотношение цветов",
+          "submenu": {
+            "percent": "{{ratio}}%"
+          }
+        }
+      },
       "name": "Цветовая тема альбома"
     },
     "ambient-mode": {
-      "description": "Применяет световой эффект, отбрасывая мягкие цвета из видео на задний фон вашего экрана.",
+      "description": "Применяет световой эффект, отбрасывая мягкие цвета из видео на задний фон вашего экрана",
       "menu": {
         "blur-amount": {
           "label": "Степень размытия",
@@ -394,26 +411,104 @@
         "can-not-update-progress": "Невозможно обновить прогресс"
       },
       "templates": {
-        "button": "Download"
+        "button": "Скачать"
       }
     },
     "exponential-volume": {
-      "description": "Делает слайдер громкости расширенным чтобы было легче выбирать низкие уровни.",
+      "description": "Делает слайдер громкости расширенным чтобы было легче понижать громкость.",
       "name": "Расширенная громкость"
     },
     "in-app-menu": {
-      "description": "Придает меню модный вид"
+      "description": "Придает меню цветовую схему альбома",
+      "menu": {
+        "hide-dom-window-controls": "Скрыть элементы управления окном DOM"
       },
-    "last-fm": {
+      "name": "Меню в приложении"
-      "name": "Last.fm"
+    },
+    "lumiastream": {
+      "description": "Добавляет поддержку Lumia Stream",
+      "name": "Lumia Stream [бета]"
+    },
+    "lyrics-genius": {
+      "description": "Добавляет поддержку текстов для большинства композиций",
+      "menu": {
+        "romanized-lyrics": "Романизированный текст (any -> en)"
+      },
+      "name": "Тексты песен от Genius",
+      "renderer": {
+        "fetched-lyrics": "Текст от Genius был получен"
+      }
+    },
+    "music-together": {
+      "description": "Поделитесь плейлистом с другими. Когда хост играет песню, все остальные слышат ту же песню",
+      "dialog": {
+        "enter-host": "Введите ID хоста"
+      },
+      "internal": {
+        "save": "Сохранить",
+        "track-source": "Источник трека",
+        "unknown-user": "Неизвестный пользователь"
+      },
+      "menu": {
+        "click-to-copy-id": "Копировать ID хоста",
+        "close": "Закрыть Music Together",
+        "connected-users": "Подключенные пользователи",
+        "disconnect": "Отключиться от Music Together",
+        "empty-user": "Нет подключенных пользователей",
+        "host": "Хост Music Together",
+        "join": "Подключиться к Music Together",
+        "permission": {
+          "all": "Позволить гостям управлять плейлистом и плеером",
+          "host-only": "Только хост может управлять плейлистом и плеером",
+          "playlist": "Позволить гостям управлять плейлистом"
+        },
+        "set-permission": "Изменить разрешения на управление разрешениями",
+        "status": {
+          "disconnected": "Отключено",
+          "guest": "Подключен как гость",
+          "host": "Подключен как хост"
+        }
+      },
+      "name": "Music Together [Beta]",
+      "toast": {
+        "add-song-failed": "Не удалось добавить песню",
+        "closed": "Music Together закрыт",
+        "disconnected": "Music Together отключен",
+        "host-failed": "Не удалось запустить Music Together",
+        "id-copied": "ID хоста скопирован в буфер обмена",
+        "id-copy-failed": "Не удалось скопировать айди хоста в буфер обмена",
+        "join-failed": "Не удалось присоединиться к Music Together",
+        "joined": "Присоединился к Music Together",
+        "permission-changed": "Разрешения Music Together изменены на \"{{permission}}\"",
+        "remove-song-failed": "Не удалось удалить песню",
+        "user-connected": "{{name}} присоединился к Music Together",
+        "user-disconnected": "{{name}} отключился от Music Together"
+      }
     },
     "navigation": {
+      "description": "Стрелки навигации \"вперед/назад\" интегрированы в интерфейс, как в вашем любимом браузере",
       "name": "Навигация"
     },
     "no-google-login": {
-      "name": "No Google Login"
+      "description": "Убрать из интерфейса кнопки и ссылки для входа через Google",
+      "name": "Нет входа в систему Google"
     },
     "notifications": {
+      "description": "Показывать уведомления о начале воспроизведения песни (интерактивные уведомления доступны в Windows)",
+      "menu": {
+        "interactive": "Интерактивные уведомления",
+        "interactive-settings": {
+          "label": "Интерактивные настройки",
+          "submenu": {
+            "hide-button-text": "Скрыть текст кнопки",
+            "refresh-on-play-pause": "Перезагрузка при воспроизведении/паузе",
+            "tray-controls": "Открывать/закрывать по нажатию в трее"
+          }
+        },
+        "priority": "Приоритет уведомлений",
+        "toast-style": "Стиль уведомления",
+        "unpause-notification": "Показывать уведомление при снятии с паузы"
+      },
       "name": "Уведомления"
     },
     "picture-in-picture": {
@@ -426,42 +521,144 @@
             "keybind-options": {
               "hotkey": "Горячая клавиша"
             },
-            "label": "Выберите горячую клавишу для переключения режима изображения в изображении"
+            "label": "Выберите горячую клавишу для переключения режима изображения в изображении",
+            "title": "Горячая клавиша для картинки в картинке"
           }
         },
         "save-window-position": "Сохранить положение окна",
-        "save-window-size": "Сохранить размер окна"
+        "save-window-size": "Сохранить размер окна",
+        "use-native-pip": "Использовать нативный PiP браузера"
+      },
+      "name": "Картинка в картинке",
+      "templates": {
+        "button": "Картинка в картинке"
+      }
+    },
+    "playback-speed": {
+      "description": "Слушайте быстро, слушайте медленно! Добавляет ползунок, регулирующий скорость композиции",
+      "name": "Скорость воспроизведения",
+      "templates": {
+        "button": "Скорость"
+      }
+    },
+    "precise-volume": {
+      "description": "Точное управление громкостью с помощью колеса мышки/горячих клавиш, пользовательский HUD и настраиваемые ступени громкости",
+      "menu": {
+        "arrows-shortcuts": "Локальное управление со стрелками",
+        "custom-volume-steps": "Настройка пользовательских шагов громкости",
+        "global-shortcuts": "Глобальные горячие клавиши"
+      },
+      "name": "Точная громкость",
+      "prompt": {
+        "global-shortcuts": {
+          "keybind-options": {
+            "decrease": "Уменьшение громкости",
+            "increase": "Увеличение громкости"
+          },
+          "label": "Выберите глобальные привязки клавиш к громкости:",
+          "title": "Глобальные привязки клавиш громкости"
+        },
+        "volume-steps": {
+          "label": "Выберите шаги увеличения/уменьшения громкости",
+          "title": "Ступени громкости"
+        }
+      }
+    },
+    "quality-changer": {
+      "backend": {
+        "dialog": {
+          "quality-changer": {
+            "detail": "Текущее качество: {{quality}}",
+            "message": "Выберите качество видео:",
+            "title": "Выберите качество видео"
+          }
+        }
+      },
+      "description": "Позволяет изменять качество видео с помощью кнопки на оверлее видео",
+      "name": "Изменение качества видео"
+    },
+    "scrobbler": {
+      "description": "Добавьте поддержку скробблинга (например, last.fm, Listenbrainz)",
+      "menu": {
+        "lastfm": {
+          "api-settings": "Настройки API Last.fm"
+        },
+        "listenbrainz": {
+          "token": "Введите токен пользователя ListenBrainz"
+        },
+        "scrobble-other-media": "Скробблинг других медиа"
+      },
+      "name": "Скробблер",
+      "prompt": {
+        "lastfm": {
+          "api-key": "Ключ API Last.fm",
+          "api-secret": "Секрет API Last.fm"
+        },
+        "listenbrainz": {
+          "token": {
+            "label": "Введите токен пользователя ListenBrainz:",
+            "title": "Токен ListenBrainz"
+          }
+        }
       }
     },
     "shortcuts": {
+      "description": "Позволяет задать глобальные горячие клавиши для воспроизведения (play/pause/next/previous) и отключить экранное мультимедийное меню, изменяя мультимедийные клавиши, также включает Ctrl/CMD + F для поиска, добавляет поддержку Linux MPRIS для мультимедийных клавиш, а также пользовательские горячие клавиши для опытных пользователей",
+      "menu": {
+        "override-media-keys": "Переопределение мультимедийных клавиш",
+        "set-keybinds": "Настройка глобальных элементов управления песней"
+      },
+      "name": "Ярлыки (и MPRIS)",
       "prompt": {
         "keybind": {
           "keybind-options": {
-            "next": "Next"
+            "next": "Следующая",
-          }
+            "play-pause": "Воспроизведение / Пауза",
+            "previous": "Предыдущая"
+          },
+          "label": "Выберите глобальные привязки клавиш для управления песнями:",
+          "title": "Глобальные привязки клавиш"
         }
       }
     },
+    "skip-disliked-songs": {
+      "description": "Пропускает непонравившиеся песни",
+      "name": "Пропустить непонравившиеся песни"
+    },
+    "skip-silences": {
+      "description": "Автоматически пропускает тихие моменты в песнях",
+      "name": "Пропустить тишину"
+    },
     "sponsorblock": {
+      "description": "Автоматически пропускает не музыкальные фрагменты, например интро/аутро или фрагменты музыкальных клипов, в которых песня не звучит (тишина)",
       "name": "SponsorBlock"
     },
+    "taskbar-mediacontrol": {
+      "description": "Управляйте воспроизведением с панели задач Windows",
+      "name": "Управление мультимедиа на панели задач"
+    },
     "touchbar": {
+      "description": "Добавляет виджет тачбара для пользователей macOS",
       "name": "Тачбар"
     },
     "tuna-obs": {
+      "description": "Интеграция с плагином Tuna от OBS",
       "name": "Tuna OBS"
     },
     "video-toggle": {
+      "description": "Добавляет кнопку для переключения между режимами видео и песни. Также можно удалить всю вкладку с видео",
       "menu": {
         "align": {
+          "label": "Выравнивание",
           "submenu": {
-            "middle": "Middle",
+            "left": "Слева",
-            "right": "Right"
+            "middle": "По центру",
+            "right": "Справа"
           }
         },
-        "force-hide": "Скрыть обложку",
+        "force-hide": "Принудительное скрыть видео",
         "mode": {
-          "label": "Mode",
+          "label": "Режим",
           "submenu": {
             "custom": "Кастомный переключатель",
             "disabled": "Отключен",
@@ -471,7 +668,7 @@
       },
       "name": "Переключатель видео",
       "templates": {
-        "button": "Song"
+        "button": "Песня"
       }
     },
     "visualizer": {

src/i18n/resources/th.json

@@ -1,7 +1,128 @@
 {
+  "common": {
+    "console": {
+      "plugins": {
+        "execute-failed": "ปลั๊กอิน {{pluginName}}::{{contextName}} ไม่สามารถทำงานได้",
+        "executed-at-ms": "ปลั๊กอิน {{pluginName}}::{{contextName}} ทำงานแล้วที่ {{ms}}ms",
+        "initialize-failed": "ไม่สามารถเริ่มต้นปลั๊กอิน \"{{pluginName}}\"",
+        "load-all": "กำลังโหลดปลั๊กอินทั้งหมด",
+        "load-failed": "ไม่สามารถโหลดปลั๊กอิน \"{{pluginName}}\"",
+        "loaded": "โหลดปลั๊กอิน \"{{pluginName}}\" แล้ว",
+        "unload-failed": "ล้มเหลวในการยกเลิกการโหลดปลั๊กอิน \"{{pluginName}}\"",
+        "unloaded": "ยกเลิกการโหลดปลั๊กอิน \"{{pluginName}}\" แล้ว"
+      }
+    }
+  },
   "language": {
     "code": "th",
     "local-name": "ภาษาไทย",
     "name": "Thai"
+  },
+  "main": {
+    "console": {
+      "did-finish-load": {
+        "dev-tools": "การโหลดเสร็จสิ้น DevTools ได้ถูกเปิดแล้ว"
+      },
+      "i18n": {
+        "loaded": "โหลด i18n แล้ว"
+      },
+      "second-instance": {
+        "receive-command": "คำสั่งที่ได้รับผ่านโปรโตคอล: \"{{command}}\""
+      },
+      "theme": {
+        "css-file-not-found": "กำลังเพิกเฉยไฟล์ CSS \"{{cssFile}}\" เนื่องจากไม่มีอยู่"
+      },
+      "unresponsive": {
+        "details": "มีข้อผิดพลาดจากไม่การตอบสนอง!\n{{error}}"
+      },
+      "when-ready": {
+        "clearing-cache-after-20s": "กำลังล้างแคชของแอป"
+      },
+      "window": {
+        "tried-to-render-offscreen": "หน้าต่างพยายามแสดงผลเกินขนาดหน้าจอ windowSize={{windowSize}}, displaySize={{displaySize}}, position={{position}}"
+      }
+    },
+    "dialog": {
+      "unresponsive": {
+        "buttons": {
+          "quit": "เลิก"
+        }
+      },
+      "update-available": {
+        "buttons": {
+          "disable": "ปิดใช้งานการอัปเดต",
+          "download": "ดาวน์โหลด",
+          "ok": "ตกลง"
+        },
+        "detail": "มีเวอร์ชันใหม่ให้ดาวน์โหลดแล้วที่ {{downloadLink}}",
+        "message": "มีเวอร์ชันใหม่ให้ใช้งานแล้ว",
+        "title": "อัปเดตพร้อมใช้งาน"
+      }
+    },
+    "menu": {
+      "about": "เกี่ยวกับ",
+      "navigation": {
+        "submenu": {
+          "copy-current-url": "คัดลอก URL ปัจจุบัน",
+          "go-back": "ก่อนหน้า",
+          "go-forward": "ถัดไป",
+          "quit": "ออก",
+          "restart": "รีสตาร์ทแอป"
+        }
+      },
+      "options": {
+        "label": "ตัวเลือก",
+        "submenu": {
+          "advanced-options": {
+            "label": "ตัวเลือกขั้นสูง",
+            "submenu": {
+              "auto-reset-app-cache": "รีเซตแอปแคชเมื่อเริ่มแอป",
+              "disable-hardware-acceleration": "ปิดการใช้งานตัวเร่งประสิทธิภาพด้วยฮาร์ดแวร์",
+              "edit-config-json": "แก้ไข config.json",
+              "override-user-agent": "แทนที่ User-Agent"
+            }
+          }
+        }
+      }
+    }
+  },
+  "plugins": {
+    "downloader": {
+      "backend": {
+        "feedback": {
+          "download-info": "กำลังดาวน์โหลด {{artist}} - {{title}} [{{videoId}}",
+          "download-progress": "ดาวน์โหลด: {{percent}}%",
+          "downloading": "กำลังดาวน์โหลด…",
+          "downloading-counter": "กำลังดาวน์โหลด {{current}}/{{total}}…",
+          "downloading-playlist": "กำลังดาวน์โหลดเพลย์ลีสต์ \"{{playlistTitle}}\" - {{playlistSize}} เพลง ({{playlistId}})",
+          "error-while-downloading": "เกิดข้อผิดพลาดในการดาวน์โหลด \"{{author}} - {{title}}\": {{error}}",
+          "folder-already-exists": "มีโฟลเดอร์ {{playlistFolder}} อยู่แล้ว",
+          "getting-playlist-info": "กำลังรับข้อมูลเพลย์ลิสต์…",
+          "loading": "กำลังโหลด…",
+          "playlist-has-only-one-song": "เพลย์ลิสต์มีเพียงเพลงเดียวเท่านั้น กำลังดาวน์โหลดเพลงนั้นโดยตรง",
+          "playlist-id-not-found": "ไม่พบ ID เพลย์ลิสต์",
+          "playlist-is-empty": "เพลย์ลิสต์ว่างเปล่า",
+          "playlist-is-mix-or-private": "เกิดข้อผิดพลาดในการรับข้อมูลเพลย์ลิสต์: ตรวจสอบให้แน่ใจว่าไม่ใช่เพลย์ลิสต์ส่วนตัวหรือเพลย์ลิสต์ \"มิกซ์สำหรับคุณ\"\n\n{{error}}",
+          "preparing-file": "กำลังเตรียมไฟล์…",
+          "saving": "กำลังบันทึก…",
+          "trying-to-get-playlist-id": "กำลังพยายามรับ ID เพลย์ลิสต์: {{playlistId}}",
+          "video-id-not-found": "ไม่พบวิดีโอ",
+          "writing-id3": "กำลังเขียนแท็ก ID3…"
+        }
+      },
+      "description": "ดาวน์โหลด MP3 / เสียงต้นฉบับโดยตรงจากอินเทอร์เฟซ",
+      "menu": {
+        "choose-download-folder": "เลือกโฟลเดอร์ดาวน์โหลด",
+        "download-playlist": "ดาวน์โหลดเพลย์ลิสต์",
+        "skip-existing": "ข้ามไฟล์ที่มีอยู่แล้ว"
+      },
+      "name": "ตัวดาวน์โหลด",
+      "renderer": {
+        "can-not-update-progress": "ไม่สามารถอัปเดตความคืบหน้าได้"
+      },
+      "templates": {
+        "button": "ดาวน์โหลด"
+      }
+    }
   }
 }

src/i18n/resources/tr.json

@@ -9,7 +9,7 @@
         "load-failed": "\"{{pluginName}}\" eklentisi yüklenemedi",
         "loaded": "\"{{pluginName}}\" eklentisi yüklendi",
         "unload-failed": "\"{{pluginName}}\" eklentisi çıkartılamadı",
-        "unloaded": "\"{{pluginName}}\" eklentisi kaldırıldı"
+        "unloaded": "\"{{pluginName}}\" eklentisi çıkartıldı"
       }
     }
   },
@@ -60,7 +60,7 @@
       "unresponsive": {
         "buttons": {
           "quit": "Çıkış",
-          "relaunch": "Yeniden Başlat",
+          "relaunch": "Tekrar Başlat",
           "wait": "Bekle"
         },
         "detail": "Rahatsızlık için özür dileriz! Lütfen ne yapacağınızı seçin:",
@@ -191,7 +191,11 @@
       "previous": "Önceki",
       "quit": "Çıkış",
       "restart": "Yeniden başlat",
-      "show": "Pencereyi görüntüle"
+      "show": "Pencereyi görüntüle",
+      "tooltip": {
+        "default": "YouTube Müzik",
+        "with-song-info": "YouTube Müzik: {{artist}} - {{title}}"
+      }
     }
   },
   "plugins": {
@@ -203,15 +207,23 @@
       "name": "Reklam Engelleyici"
     },
     "album-actions": {
-      "description": "Çalma listesindeki veya albümdeki tüm şarkılara Beğendim ve Beğenmedim düğmeleri ekler.",
+      "description": "Çalma listesindeki veya albümdeki tüm şarkılara Beğendim ve Beğenmedim düğmeleri ekler",
       "name": "Albüm Eylemleri"
     },
     "album-color-theme": {
       "description": "Albümün renk paletine dayalı dinamik bir tema ve efektler uygular",
+      "menu": {
+        "color-mix-ratio": {
+          "label": "Renk karışım oranı",
+          "submenu": {
+            "percent": "{{ratio}}%"
+          }
+        }
+      },
       "name": "Albüm Renk Teması"
     },
     "ambient-mode": {
-      "description": "Videodaki yumuşak renkleri ekranınızın arka planına yansıtarak bir ışık efekti uygular..",
+      "description": "Videodaki yumuşak renkleri ekranınızın arka planına yansıtarak bir ışık efekti uygular",
       "menu": {
         "blur-amount": {
           "label": "Bulanıklık miktarı",
@@ -336,7 +348,7 @@
         "play-on-youtube-music": "YouTube Music de oynat",
         "set-inactivity-timeout": "Hareketsizlik zaman aşımını ayarla"
       },
-      "name": "Discord Rich Presence",
+      "name": "Discord Etkinlik Durumu",
       "prompt": {
         "set-inactivity-timeout": {
           "label": "Hareketsizlik zaman aşımını saniye cinsinden girin:",
@@ -413,10 +425,6 @@
       },
       "name": "Uygulama İçi Menü"
     },
-    "last-fm": {
-      "description": "Last.fm için scrobbling desteği ekler",
-      "name": "Last.fm"
-    },
     "lumiastream": {
       "description": "Lumia Stream desteği ekler",
       "name": "Lumia Stream [Beta]"
@@ -450,7 +458,7 @@
         "host": "Birlikte Müzik Sunucusu",
         "join": "Birlikte Müziğe Katıl",
         "permission": {
-          "all": "Konukların oynatma listesini ve oynatıcıyı kontrol etmesine izin verin",
+          "all": "Konukların oynatma listesini ve oynatıcıyı kontrol etmesine izin ver",
           "host-only": "Çalma listesini ve oynatıcıyı yalnızca yönetici kontrol edebilir",
           "playlist": "Konukların oynatma listesini kontrol etmesine izin ver"
         },
@@ -458,7 +466,7 @@
         "status": {
           "disconnected": "Bağlantı kesildi",
           "guest": "Misafir olarak bağlandı",
-          "host": "Ev Sahibi olarak bağlandı"
+          "host": "Sunucu Sahibi olarak bağlandı"
         }
       },
       "name": "Birlikte Müzik [Beta]",
@@ -468,6 +476,7 @@
         "disconnected": "Birlikte Müzik bağlantı kesildi",
         "host-failed": "Birlikte Müzik sunucusu kurulamadı",
         "id-copied": "Sunucu ID'si kopyalandı",
+        "id-copy-failed": "Sunucu ID'si panoya kopyalanamadı",
         "join-failed": "Birlikte Müziğe katılırken bir hata meydana geldi",
         "joined": "Birlikte Müziğe Katıldı",
         "permission-changed": "Birlikte Müzik yetkisi \"{{permission}}\" olarak değiştirildi",
@@ -568,8 +577,33 @@
       "description": "Video katmanı üzerindeki bir düğme ile video kalitesinin değiştirilmesine izin verir",
       "name": "Video Kalitesi Değiştirici"
     },
+    "scrobbler": {
+      "description": "Listeleme desteği ekler (lastfm, listenbrainz ve benzeri)",
+      "menu": {
+        "lastfm": {
+          "api-settings": "Last.fm API Ayarları"
+        },
+        "listenbrainz": {
+          "token": "ListenBrainz kullanıcı kimliğinizi girin"
+        },
+        "scrobble-other-media": "Diğer medya ortamlarında listele"
+      },
+      "name": "Listeleyici",
+      "prompt": {
+        "lastfm": {
+          "api-key": "Last.fm API anahtarı",
+          "api-secret": "Last.fm API gizli anahtar"
+        },
+        "listenbrainz": {
+          "token": {
+            "label": "ListenBrainz kullanıcı kimliğinizi girin:",
+            "title": "ListenBrainz kimliği"
+          }
+        }
+      }
+    },
     "shortcuts": {
-      "description": "Oynatma için global kısayol tuşları (oynat/duraklat/sonraki/önceki) ayarlamaya ve medya tuşlarını geçersiz kılarak medya OSD'sini kapatmaya, arama yapmak için Ctrl/CMD + F tuşlarını açmaya, medya tuşları için Linux MPRIS desteğini açmaya ve ileri düzey kullanıcılar için özel kısayol tuşlarına izin verir.",
+      "description": "Oynatma için global kısayol tuşları (oynat/duraklat/sonraki/önceki) ayarlamaya ve medya tuşlarını geçersiz kılarak medya OSD'sini kapatmaya, arama yapmak için Ctrl/CMD + F tuşlarını açmaya, medya tuşları için Linux MPRIS desteğini açmaya ve ileri düzey kullanıcılar için özel kısayol tuşlarına izin verir",
       "menu": {
         "override-media-keys": "Medya Tuşlarını Geçersiz Kıl",
         "set-keybinds": "Global Şarkı Kontrollerini Ayarla"

src/i18n/resources/uk.json

@@ -170,7 +170,8 @@
       },
       "plugins": {
         "enabled": "Увімкнено",
-        "label": "Плагіни"
+        "label": "Плагіни",
+        "new": "НОВЕ"
       },
       "view": {
         "label": "Вид",
@@ -190,7 +191,11 @@
       "previous": "Попередній",
       "quit": "Вихід",
       "restart": "Перезапустити програму",
-      "show": "Показати вікно"
+      "show": "Показати вікно",
+      "tooltip": {
+        "default": "YouTube Music",
+        "with-song-info": "YouTube Music: {{artist}} - {{title}}"
+      }
     }
   },
   "plugins": {
@@ -201,12 +206,24 @@
       },
       "name": "Блокувальник реклами"
     },
+    "album-actions": {
+      "description": "Додати андізлайк, дізлайк, лайк та анлайк кнопки щоб застосувати це до всіх пісень в плейлисті або альбомі",
+      "name": "Дії з альбомами"
+    },
     "album-color-theme": {
       "description": "Застосовує динамічну тему та візуальні ефекти на основі колірної палітри альбому",
+      "menu": {
+        "color-mix-ratio": {
+          "label": "Співвідношення змішування кольорів",
+          "submenu": {
+            "percent": "{{ratio}}%"
+          }
+        }
+      },
       "name": "Кольорова тема альбому"
     },
     "ambient-mode": {
-      "description": "Застосовує ефект освітлення, накладаючи ніжні кольори з відео на фон екрана.",
+      "description": "Застосовує ефект освітлення, накладаючи ніжні кольори з відео на фон екрана",
       "menu": {
         "blur-amount": {
           "label": "Обсяг розмиття",
@@ -289,7 +306,7 @@
       "menu": {
         "advanced": "Розширене"
       },
-      "name": "Плавний перехід[бета-версія]",
+      "name": "Плавний перехід[Бета]",
       "prompt": {
         "options": {
           "multi-input": {
@@ -331,7 +348,7 @@
         "play-on-youtube-music": "Слухати на YouTube Music",
         "set-inactivity-timeout": "Встановити тайм-аут бездіяльності"
       },
-      "name": "Discord Rich Presence",
+      "name": "Активність Discord",
       "prompt": {
         "set-inactivity-timeout": {
           "label": "Введіть тайм-аут бездіяльності в секундах:",
@@ -399,33 +416,81 @@
     },
     "exponential-volume": {
       "description": "Робить регулятор гучності експоненціальним, що полегшує вибір тихих рівнів гучності.",
-      "name": "Експоненціальний обсяг"
+      "name": "Експоненціальна гучність"
     },
     "in-app-menu": {
-      "description": "Надає меню-барам вишуканого, темного або кольору альбому вигляду",
+      "description": "Надає панелям меню вишуканий темний або кольоровий вигляд, схожий на альбом",
       "menu": {
         "hide-dom-window-controls": "Сховати елементи керування вікном DOM"
       },
       "name": "Меню в програмі"
     },
-    "last-fm": {
-      "description": "Додати підтримку прокрутки для Last.fm",
-      "name": "Last.fm"
-    },
     "lumiastream": {
       "description": "Додано підтримку для Lumia Stream",
-      "name": "Lumia Stream [бета-версія]"
+      "name": "Lumia Stream [Бета]"
     },
     "lyrics-genius": {
       "description": "Додає підтримку текстів для більшості пісень",
       "menu": {
-        "romanized-lyrics": "Романізована лірика"
+        "romanized-lyrics": "Романізовані тексти"
+      },
+      "name": "Тексти з Genius",
+      "renderer": {
+        "fetched-lyrics": "Тексти надано Genius"
+      }
+    },
+    "music-together": {
+      "description": "Поділитись музикою. Коли хост включає пісню, всі інші будуть чути ту ж пісню",
+      "dialog": {
+        "enter-host": "Введіть ID хоста"
+      },
+      "internal": {
+        "save": "Зберегти",
+        "track-source": "Джерело композиції",
+        "unknown-user": "Невідомий користувач"
+      },
+      "menu": {
+        "click-to-copy-id": "Скопіювати хост ID",
+        "close": "Вимкнути сумісне прослуховування",
+        "connected-users": "Підключені користувачі",
+        "disconnect": "Відключитись від Music Together",
+        "empty-user": "Немає підключених користувачів",
+        "host": "Хост Music Together",
+        "join": "Приєднатися до Music Together",
+        "permission": {
+          "all": "Дозволити гостям керувати списком відтворення та плеєром",
+          "host-only": "Лише хост може керувати списком відтворення та плеєром",
+          "playlist": "Дозволити гостям керувати списком відтворення"
+        },
+        "set-permission": "Змінити дозвіл на керування",
+        "status": {
+          "disconnected": "Відключено",
+          "guest": "Підключено як гість",
+          "host": "Підключено як хост"
+        }
+      },
+      "name": "Music Together [Бета]",
+      "toast": {
+        "add-song-failed": "Не вдалося додати пісню",
+        "closed": "Music Together закритий",
+        "disconnected": "Music Together відключено",
+        "host-failed": "Не вдалося увімкнути Music Together",
+        "id-copied": "ID хоста скопійовано в буфер обміну",
+        "id-copy-failed": "Не вдалося скопіювати ID хоста в буфер обміну",
+        "join-failed": "Не вдалося приєднатися до Music Together",
+        "joined": "Приєднано до Music Together",
+        "permission-changed": "Дозвіл Music Together змінено на \"{{permission}}\"",
+        "remove-song-failed": "Не вдалося видалити пісню",
+        "user-connected": "{{name}} приєднався до Music Together",
+        "user-disconnected": "{{name}} вийшов з Music Together"
       }
     },
     "navigation": {
+      "description": "Стрілки навігації Вперед/Назад безпосередньо інтегровані в інтерфейс, як у вашому браузері, який ви використовуєте",
       "name": "Навігація"
     },
     "no-google-login": {
+      "description": "Видалити кнопки та посилання для входу через Google з інтерфейсу",
       "name": "Без входу в Google"
     },
     "notifications": {
@@ -435,10 +500,15 @@
         "interactive-settings": {
           "label": "Інтерактивні налаштування",
           "submenu": {
-            "hide-button-text": "Сховати текст кнопки"
+            "hide-button-text": "Сховати текст кнопки",
-          }
+            "refresh-on-play-pause": "Оновлення при відтворенні/паузі",
+            "tray-controls": "Відкриття/закриття при натисканні на значок в області повідомлень (tray)"
           }
         },
+        "priority": "Пріоритет повідомлень",
+        "toast-style": "Стиль спливаючих повідомлень",
+        "unpause-notification": "Показувати повідомлення при відновленні відтворення після паузи"
+      },
       "name": "Сповіщення"
     },
     "picture-in-picture": {
@@ -456,9 +526,157 @@
           }
         },
         "save-window-position": "Зберегти положення вікна",
-        "save-window-size": "Зберегти розмір вікна"
+        "save-window-size": "Зберегти розмір вікна",
+        "use-native-pip": "Використовувати вбудований режим \"картинка-у-картинці\" браузера"
       },
-      "name": "Зображення в зображенні"
+      "name": "Картинка-у-картинці",
+      "templates": {
+        "button": "Картинка-у-картинці"
+      }
+    },
+    "playback-speed": {
+      "description": "Додає слайдер, який керує швидкістю відтворення пісні",
+      "name": "Швидкість відтворення",
+      "templates": {
+        "button": "Швидкість"
+      }
+    },
+    "precise-volume": {
+      "description": "Точне керування гучністю за допомогою колеса миші/гарячих клавіш, з власним інтерфейсом користувача та настроюваними кроками гучності",
+      "menu": {
+        "arrows-shortcuts": "Локальне керування за допомогою клавіш зі стрілками",
+        "custom-volume-steps": "Встановити власні кроки гучності",
+        "global-shortcuts": "Глобальні гарячі клавіші"
+      },
+      "name": "Точна гучність",
+      "prompt": {
+        "global-shortcuts": {
+          "keybind-options": {
+            "decrease": "Зменшити гучність",
+            "increase": "Збільшити гучність"
+          },
+          "label": "Вибрати глобальні комбінації клавіш для зміни гучності:",
+          "title": "Глобальні комбінації клавіш для регулювання гучності"
+        },
+        "volume-steps": {
+          "label": "Вибрати кроки збільшення/зменшення гучності",
+          "title": "Кроки гучності"
+        }
+      }
+    },
+    "quality-changer": {
+      "backend": {
+        "dialog": {
+          "quality-changer": {
+            "detail": "Поточна якість: {{quality}}",
+            "message": "Вибрати якість відео:",
+            "title": "Виберіть якість відео"
+          }
+        }
+      },
+      "description": "Дозволяє змінювати якість відео за допомогою кнопки на відео оверлеї",
+      "name": "Зміна якості відео"
+    },
+    "scrobbler": {
+      "description": "Додає підтримку скроблінгу (last.fm, Listenbrainz тощо)",
+      "menu": {
+        "lastfm": {
+          "api-settings": "Налаштування API Last.fm"
+        },
+        "listenbrainz": {
+          "token": "Ввести токен користувача ListenBrainz"
+        },
+        "scrobble-other-media": "Скробилити інші медіа"
+      },
+      "name": "Скроблер",
+      "prompt": {
+        "lastfm": {
+          "api-key": "Ключ API Last.fm",
+          "api-secret": "Секрет API Last.fm"
+        },
+        "listenbrainz": {
+          "token": {
+            "label": "Введіть ваш токен користувача ListenBrainz:",
+            "title": "Токен ListenBrainz"
+          }
+        }
+      }
+    },
+    "shortcuts": {
+      "description": "Дозволяє встановлювати глобальні гарячі клавіші для управління відтворенням (відтворення/пауза/наступний/попередній), вимикаючи OSD для мультимедійних клавіш, увімкнення пошуку за допомогою Ctrl/CMD + F, увімкнення підтримки Linux MPRIS для мультимедійних клавіш та власних гарячих клавіш для досвідчених користувачів",
+      "menu": {
+        "override-media-keys": "Перевизначити мультимедійні клавіші",
+        "set-keybinds": "Встановити глобальні комбінації клавіш"
+      },
+      "name": "Гарячі клавіші (і MPRIS)",
+      "prompt": {
+        "keybind": {
+          "keybind-options": {
+            "next": "Наступний",
+            "play-pause": "Відтворення / Пауза",
+            "previous": "Попередній"
+          },
+          "label": "Виберіть глобальні комбінації клавіш для керування піснями:",
+          "title": "Глобальні комбінації клавіш"
+        }
+      }
+    },
+    "skip-disliked-songs": {
+      "description": "Пропускає пісні що не сподобались",
+      "name": "Пропускати пісні що не сподобались"
+    },
+    "skip-silences": {
+      "description": "Автоматично пропускати тишу в піснях",
+      "name": "Пропуск тиші"
+    },
+    "sponsorblock": {
+      "description": "Автоматично пропускати немузичні частини, такі як вступ/закінчення або частини музичних відеороликів, де не відтворюється музика",
+      "name": "SponsorBlock"
+    },
+    "taskbar-mediacontrol": {
+      "description": "Керування відтворенням з панелі завдань Windows",
+      "name": "Керування медіа на панелі завдань"
+    },
+    "touchbar": {
+      "description": "Додає віджет TouchBar для користувачів macOS",
+      "name": "TouchBar"
+    },
+    "tuna-obs": {
+      "description": "Інтеграція з плагіном Tuna для OBS",
+      "name": "Tuna OBS"
+    },
+    "video-toggle": {
+      "description": "Додає кнопку для перемикання між режимом відео і режимом пісні. Також може опціонально видаляти вкладку відео",
+      "menu": {
+        "align": {
+          "label": "Вирівнювання",
+          "submenu": {
+            "left": "Зліва",
+            "middle": "По центру",
+            "right": "Справа"
+          }
+        },
+        "force-hide": "Примусово видалити вкладку відео",
+        "mode": {
+          "label": "Режим",
+          "submenu": {
+            "custom": "Власний перемикач",
+            "disabled": "Вимкнено",
+            "native": "Вбудований перемикач"
+          }
+        }
+      },
+      "name": "Перемикач відео",
+      "templates": {
+        "button": "Пісня"
+      }
+    },
+    "visualizer": {
+      "description": "Додати візуалізацію до плеєра",
+      "menu": {
+        "visualizer-type": "Тип візуалізації"
+      },
+      "name": "Візуалізація"
     }
   }
 }

src/i18n/resources/vi.json

@@ -17,5 +17,657 @@
     "code": "vi",
     "local-name": "Tiếng Việt",
     "name": "Vietnamese"
+  },
+  "main": {
+    "console": {
+      "did-finish-load": {
+        "dev-tools": "Đã tải xong. Đã mở Công cụ dành cho nhà phát triển"
+      },
+      "i18n": {
+        "loaded": "i18n đã được tải"
+      },
+      "second-instance": {
+        "receive-command": "Đã nhận được lệnh qua giao thức: \"{{command}}\""
+      },
+      "theme": {
+        "css-file-not-found": "Tệp tin CSS \"{{cssFile}}\"không tồn tại, đang bỏ qua"
+      },
+      "unresponsive": {
+        "details": "Lỗi không phản hồi!\n{{error}}"
+      },
+      "when-ready": {
+        "clearing-cache-after-20s": "Xóa bộ nhớ đệm ứng dụng"
+      },
+      "window": {
+        "tried-to-render-offscreen": "Cửa sổ đã cố gắng hiển thị ngoài màn hình, windowSize={{windowSize}}, displaySize={{displaySize}}, location={{position}}"
+      }
+    },
+    "dialog": {
+      "hide-menu-enabled": {
+        "detail": "Menu đã ẩn, ấn phím 'Alt' để hiện menu (hoặc ấn 'Escape' nếu bạn đang bật In-app Menu)",
+        "message": "Ẩn Menu đã được bật",
+        "title": "Ẩn Menu đã được bật"
+      },
+      "need-to-restart": {
+        "buttons": {
+          "later": "Để sau",
+          "restart-now": "Khởi động lại ngay"
+        },
+        "detail": "Tiện ích mở rộng \"{{pluginName}}\" yêu cầu khởi động lại ứng dụng để áp dụng",
+        "message": "\"{{pluginName}}\" cần khởi động lại",
+        "title": "Yêu cầu khởi động lại"
+      },
+      "unresponsive": {
+        "buttons": {
+          "quit": "Thoát",
+          "relaunch": "Khởi chạy lại",
+          "wait": "Đợi"
+        },
+        "detail": "Chúng tôi xin lỗi về sự bất tiện này! hãy chọn việc cần làm:",
+        "message": "Ứng dụng không phản hồi",
+        "title": "Cửa sổ không phản hồi"
+      },
+      "update-available": {
+        "buttons": {
+          "disable": "Tắt cập nhật",
+          "download": "Tải xuống",
+          "ok": "Đồng ý"
+        },
+        "detail": "Đã có phiên bản mới hơn, bạn có thể tải xuống tại {{downloadLink}}",
+        "message": "Đã có phiên bản mới",
+        "title": "Cập nhật có sẵn"
+      }
+    },
+    "menu": {
+      "about": "Giới thiệu",
+      "navigation": {
+        "label": "Điều hướng",
+        "submenu": {
+          "copy-current-url": "Copy URL hiện tại",
+          "go-back": "Quay lại",
+          "go-forward": "Tiến về trước",
+          "quit": "Thoát",
+          "restart": "Khởi động lại ứng dụng"
+        }
+      },
+      "options": {
+        "label": "Tùy chọn",
+        "submenu": {
+          "advanced-options": {
+            "label": "Tùy chọn nâng cao",
+            "submenu": {
+              "auto-reset-app-cache": "Làm mới bộ nhớ đệm khi khởi động ứng dụng",
+              "disable-hardware-acceleration": "Vô hiệu hóa tăng tốc phần cứng",
+              "edit-config-json": "Chỉnh sửa config.json",
+              "override-user-agent": "Ghi đè User-Agent",
+              "restart-on-config-changes": "Khởi động lại khi thay đổi cấu hình",
+              "set-proxy": {
+                "label": "Cài đặt proxy",
+                "prompt": {
+                  "label": "Nhập địa chỉ Proxy: (để trống nếu muốn tắt)",
+                  "placeholder": "Ví dụ: SOCKS5://127.0.0.1:9999",
+                  "title": "Cài proxy"
+                }
+              },
+              "toggle-dev-tools": "Bật/tắt DevTools"
+            }
+          },
+          "always-on-top": "Luôn ở trên cùng",
+          "auto-update": "Tự động cập nhật",
+          "hide-menu": {
+            "dialog": {
+              "message": "Menu sẽ bị ẩn khi ứng dụng được chạy vào lần tới, dùng phím [Alt] để hiện nó (hoặc phím [`] nếu sử dụng in-app-menu)",
+              "title": "Ẩn Menu đã được bật"
+            },
+            "label": "Ẩn Menu"
+          },
+          "language": {
+            "dialog": {
+              "message": "Ngôn ngữ sẽ được thay đổi sau khi ứng dụng khởi động lại",
+              "title": "Ngôn ngữ đã thay đổi"
+            },
+            "label": "Ngôn ngữ",
+            "submenu": {
+              "to-help-translate": "Bạn muốn giúp dịch? Bấm vào đây"
+            }
+          },
+          "resume-on-start": "Tiếp tục bài hát cuối cùng khi ứng dụng khởi động",
+          "single-instance-lock": "Khóa một trường hợp",
+          "start-at-login": "Bắt đầu lúc đăng nhập",
+          "starting-page": {
+            "label": "Trang bắt đầu",
+            "unset": "Bỏ thiết đặt"
+          },
+          "tray": {
+            "label": "Khay",
+            "submenu": {
+              "disabled": "Vô hiệu hóa",
+              "enabled-and-hide-app": "Đã bật và ẩn ứng dụng",
+              "enabled-and-show-app": "Đã bật và hiển thị ứng dụng",
+              "play-pause-on-click": "Phát/Tạm dừng khi nhấp chuột"
+            }
+          },
+          "visual-tweaks": {
+            "label": "Tinh chỉnh hình ảnh",
+            "submenu": {
+              "like-buttons": {
+                "default": "Mặc định",
+                "force-show": "Tập trung hiển thị",
+                "hide": "Ẩn",
+                "label": "Nút thích"
+              },
+              "remove-upgrade-button": "Xóa nút nâng cấp",
+              "theme": {
+                "label": "Chủ đề",
+                "submenu": {
+                  "import-css-file": "Nhập tệp CSS tùy chỉnh",
+                  "no-theme": "Không có chủ đề"
+                }
+              }
+            }
+          }
+        }
+      },
+      "plugins": {
+        "enabled": "Đã bật",
+        "label": "Trình bổ sung",
+        "new": "MỚI"
+      },
+      "view": {
+        "label": "Xem",
+        "submenu": {
+          "force-reload": "Buộc tải lại",
+          "reload": "Tải lại",
+          "reset-zoom": "Kích thước thực",
+          "toggle-fullscreen": "Bật chế độ toàn màn hình",
+          "zoom-in": "Phóng to",
+          "zoom-out": "Thu nhỏ"
+        }
+      }
+    },
+    "tray": {
+      "next": "Tiếp theo",
+      "play-pause": "Phát/Tạm Dừng",
+      "previous": "Trước",
+      "quit": "Thoát",
+      "restart": "Khởi động lại ứng dụng",
+      "show": "Hiện cửa sổ",
+      "tooltip": {
+        "default": "YouTube Music",
+        "with-song-info": "YouTube Music: {{artist}} - {{title}}"
+      }
+    }
+  },
+  "plugins": {
+    "adblocker": {
+      "description": "Chặn toàn bộ quảng cáo và trình theo dõi",
+      "menu": {
+        "blocker": "Trình chặn"
+      },
+      "name": "Chặn quảng cáo"
+    },
+    "album-actions": {
+      "description": "Thêm nút hủy không thích, không thích, thích và không thích để áp dụng cho tất cả danh sách phát hoặc album",
+      "name": "Tác vụ với album"
+    },
+    "album-color-theme": {
+      "description": "Áp dụng chủ đề động và hiệu ứng hình ảnh dựa trên bảng màu của album",
+      "name": "Màu nền album"
+    },
+    "ambient-mode": {
+      "description": "Áp dụng hiệu ứng ánh sáng bằng cách truyền các màu nhẹ từ video vào nền màn hình của bạn",
+      "menu": {
+        "blur-amount": {
+          "label": "Lượng mờ",
+          "submenu": {
+            "pixels": "{{blurAmount}} điểm ảnh"
+          }
+        },
+        "buffer": {
+          "label": "Bộ đệm",
+          "submenu": {
+            "buffer": "{{buffer}}"
+          }
+        },
+        "opacity": {
+          "label": "Độ mờ",
+          "submenu": {
+            "percent": "{{opacity}}%"
+          }
+        },
+        "quality": {
+          "label": "Chất lượng",
+          "submenu": {
+            "pixels": "{{quality}} điểm ảnh"
+          }
+        },
+        "size": {
+          "label": "Kích thước",
+          "submenu": {
+            "percent": "{{size}}%"
+          }
+        },
+        "smoothness-transition": {
+          "label": "Độ mượt chuyển cảnh",
+          "submenu": {
+            "during": "Trong {{interpolationTime}} s"
+          }
+        },
+        "use-fullscreen": {
+          "label": "Dùng chế độ toàn màn hình"
+        }
+      },
+      "name": "Chế độ Môi trường xung quanh"
+    },
+    "audio-compressor": {
+      "description": "Áp dụng tính năng nén cho âm thanh (giảm âm lượng của phần to nhất của tín hiệu và tăng âm lượng của phần nhỏ nhất)",
+      "name": "Bộ nén âm thanh"
+    },
+    "blur-nav-bar": {
+      "description": "Làm mờ và trong suốt thanh điều hướng",
+      "name": "Thanh điều hướng mờ"
+    },
+    "bypass-age-restrictions": {
+      "description": "Bỏ qua xác minh độ tuổi của YouTube",
+      "name": "Bỏ qua hạn chế độ tuổi"
+    },
+    "captions-selector": {
+      "description": "Bộ lựa chọn phụ đề cho các bài hát trên Youtube Music",
+      "menu": {
+        "autoload": "Tự động chọn phụ đề vừa sử dụng",
+        "disable-captions": "Không có phụ đề đặt làm mặc định"
+      },
+      "name": "Bộ lựa chọn phụ đề",
+      "prompt": {
+        "selector": {
+          "label": "Ngôn ngữ phụ đề hiện tại: {{language}}",
+          "none": "Không có",
+          "title": "Chọn ngôn ngữ phụ đề"
+        }
+      },
+      "templates": {
+        "title": "Mở lựa chọn phụ đề"
+      }
+    },
+    "compact-sidebar": {
+      "description": "Luôn đặt thanh bên cạnh ở chế độ thu gọn",
+      "name": "Thanh bên thu gọn"
+    },
+    "crossfade": {
+      "description": "Chuyển tiếp giữa các bài hát",
+      "menu": {
+        "advanced": "Nâng cao"
+      },
+      "name": "Xen kẽ [thử nghiệm]",
+      "prompt": {
+        "options": {
+          "multi-input": {
+            "fade-in-duration": "Xuất hiện mờ dần trong khoảng thời gian (ms)",
+            "fade-out-duration": "Khoảng thời gian hoát ra mờ dần (ms)",
+            "fade-scaling": {
+              "label": "Làm mờ theo tỉ lệ",
+              "linear": "Trực tuyến",
+              "logarithmic": "Logarit"
+            },
+            "seconds-before-end": "Xen kẽ N giây trước khi kết thúc"
+          },
+          "title": "Tùy chọn xen kẽ"
+        }
+      }
+    },
+    "disable-autoplay": {
+      "description": "Bắt đầu bài hát khi ở chế độ \"tạm dừng\"",
+      "menu": {
+        "apply-once": "Áp dụng khi khởi động"
+      },
+      "name": "Tắt tự động phát"
+    },
+    "discord": {
+      "backend": {
+        "already-connected": "Đã cố gắng kết nối với kết nối khả dụng",
+        "connected": "Đã kết nối với Discord",
+        "disconnected": "Đã ngắt kết nối với Discord"
+      },
+      "description": "Cho bạn bè của bạn thấy những gì bạn nghe với Rich Presence",
+      "menu": {
+        "auto-reconnect": "Tự động kết nối lại",
+        "clear-activity": "Xoá hoạt động",
+        "clear-activity-after-timeout": "Xóa hoạt động sau khi hết thời gian chờ",
+        "connected": "Đã kết nối",
+        "disconnected": "Đã ngắt kết nối",
+        "hide-duration-left": "Ẩn thời lượng còn lại",
+        "hide-github-button": "Ẩn nút liên kết GitHub",
+        "play-on-youtube-music": "Phát trong Youtube Music",
+        "set-inactivity-timeout": "Đặt thời gian chờ không hoạt động"
+      },
+      "name": "Discord Rich Presence",
+      "prompt": {
+        "set-inactivity-timeout": {
+          "label": "Nhập thời gian chờ không hoạt động tính bằng giây:",
+          "title": "Đặt thời gian chờ không hoạt động"
+        }
+      }
+    },
+    "downloader": {
+      "backend": {
+        "dialog": {
+          "error": {
+            "buttons": {
+              "ok": "Đồng ý"
+            },
+            "message": "Argh! Xin lỗi, tải xuống thất bại…",
+            "title": "Lỗi khi tải xuống!"
+          },
+          "start-download-playlist": {
+            "buttons": {
+              "ok": "Đồng ý"
+            },
+            "detail": "({{playlistSize}} bài hát)",
+            "message": "Đang tải danh sách phát {{playlistTitle}}",
+            "title": "Đã bắt đầu tải xuống"
+          }
+        },
+        "feedback": {
+          "conversion-progress": "Chuyển đổi: {{percent}}%",
+          "converting": "Đang chuyển đổi…",
+          "done": "Đã xong: {{filePath}}",
+          "download-info": "Đang tải {{artist}} - {{title}} [{{videoId}}",
+          "download-progress": "Đang tải: {{percent}}%",
+          "downloading": "Đang tải…",
+          "downloading-counter": "Đang tải {{current}}/{{total}}…",
+          "downloading-playlist": "Đang tải danh sách phát \"{{playlistTitle}}\" - {{playlistSize}} bài hát ({{playlistId}})",
+          "error-while-downloading": "Lỗi tải xuống \"{{author}} - {{title}}\": {{error}}",
+          "folder-already-exists": "Thư mục {{playlistFolder}} đã tồn tại",
+          "getting-playlist-info": "Đang lấy thông tin danh sách phát…",
+          "loading": "Đang tải…",
+          "playlist-has-only-one-song": "Danh sách phát chỉ có một mục, tải trực tiếp",
+          "playlist-id-not-found": "Không tìm thấy ID danh sách phát",
+          "playlist-is-empty": "Danh sách phát trống",
+          "playlist-is-mix-or-private": "Lỗi lấy thông tin danh sách phát: đảm bảo danh sách phát không ở chế độ riêng tư hoặc là danh sách phát \"Dành cho bạn\"\n\n{{error}}",
+          "preparing-file": "Đang chuẩn bị thư mục…",
+          "saving": "Đang lưu…",
+          "trying-to-get-playlist-id": "Đang lấy ID danh sách phát: {{playlistId}}",
+          "video-id-not-found": "Không tìm thấy video",
+          "writing-id3": "Đang ghi thẻ ID3…"
+        }
+      },
+      "description": "Tải xuống MP3 / âm thanh nguồn trực tiếp từ giao diện",
+      "menu": {
+        "choose-download-folder": "Chọn thư mục tải xuống",
+        "download-playlist": "Tải danh sách phát",
+        "presets": "Cài đặt sẵn",
+        "skip-existing": "Bỏ qua các tập tin hiện có"
+      },
+      "name": "Trình tải xuống",
+      "renderer": {
+        "can-not-update-progress": "Không thể cập nhật tiến độ"
+      },
+      "templates": {
+        "button": "Tải xuống"
+      }
+    },
+    "exponential-volume": {
+      "description": "Làm cho thanh trượt âm lượng theo cấp số nhân để dễ dàng chọn âm lượng thấp hơn.",
+      "name": "Âm lượng theo cấp số nhân"
+    },
+    "in-app-menu": {
+      "description": "Mang lại cho thanh menu một giao diện lạ mắt, tối màu hoặc màu album",
+      "menu": {
+        "hide-dom-window-controls": "Ẩn cửa sổ điều khiển DOM"
+      },
+      "name": "Menu trong ứng dụng"
+    },
+    "lumiastream": {
+      "description": "Thêm hỗ trợ Lumia Stream",
+      "name": "Lumia Stream [Thử nghiệm]"
+    },
+    "lyrics-genius": {
+      "description": "Thêm hỗ trợ lời bài hát cho hầu hết các bài hát",
+      "menu": {
+        "romanized-lyrics": "Lời bài hát La Mã"
+      },
+      "name": "Lời bài hát từ Genius",
+      "renderer": {
+        "fetched-lyrics": "Lời bài hát được tìm nạp cho Genius"
+      }
+    },
+    "music-together": {
+      "description": "Chia sẻ danh sách phát với người khác. Khi máy chủ phát một bài hát, những người khác cũng sẽ nghe bài hát đó",
+      "dialog": {
+        "enter-host": "Nhập ID máy chủ"
+      },
+      "internal": {
+        "save": "Lưu",
+        "track-source": "Nguồn âm thanh",
+        "unknown-user": "Người dùng không rõ"
+      },
+      "menu": {
+        "click-to-copy-id": "Sao chép ID máy chủ",
+        "close": "Đóng Music Together",
+        "connected-users": "Người dùng đã kết nối",
+        "disconnect": "Ngắt kết nối Music Together",
+        "empty-user": "Không có người dùng đã kết nối",
+        "host": "Máy chủ Music Together",
+        "join": "Tham gia Music Together",
+        "permission": {
+          "all": "Cho phép người tham gia kiểm soát danh sách phát và trình phát",
+          "host-only": "Chỉ người tạo máy chủ có quyền điều khiển danh sách phát và trình phát",
+          "playlist": "Cho phép người tham gia điều khiển danh sách phát"
+        },
+        "set-permission": "Thay đổi quyền điều khiển",
+        "status": {
+          "disconnected": "Đã ngắt kết nối",
+          "guest": "Đã kết nối với tư cách Người tham gia",
+          "host": "Đã kết nối với tư cách Máy chủ"
+        }
+      },
+      "name": "Music Together [Thử nghiệm]",
+      "toast": {
+        "add-song-failed": "Thêm bài hát thất bại",
+        "closed": "Đã đóng Music Together",
+        "disconnected": "Đã ngắt kết nối Music Together",
+        "host-failed": "Không thể tổ chức Music Together",
+        "id-copied": "Đã sao chép ID máy chủ vào bộ nhớ tạm",
+        "id-copy-failed": "Sao chepd ID máy chủ vào bộ nhớ tạm không thành công",
+        "join-failed": "Không thể tham gia Music Together",
+        "joined": "Đã tham gia Music Together",
+        "permission-changed": "Quyền của Music Together đã thay đổi thành \"{{permission}}\"",
+        "remove-song-failed": "Không thể xoá bài hát",
+        "user-connected": "{{name}} đã tham gia Music Together",
+        "user-disconnected": "{{name}} đã rời khỏi Music Together"
+      }
+    },
+    "navigation": {
+      "description": "Mũi tên điều hướng Tiếp theo/Quay lại được tích hợp trực tiếp trong giao diện, giống như trong trình duyệt yêu thích của bạn",
+      "name": "Điều hướng"
+    },
+    "no-google-login": {
+      "description": "Xóa các nút và liên kết đăng nhập Google khỏi giao diện",
+      "name": "Không đăng nhập Google"
+    },
+    "notifications": {
+      "description": "Hiển thị thông báo khi bài hát bắt đầu phát (thông báo tương tác có sẵn trên Windows)",
+      "menu": {
+        "interactive": "Thông báo tương tác",
+        "interactive-settings": {
+          "label": "Cài đặt tương tác",
+          "submenu": {
+            "hide-button-text": "Ẩn tên nút",
+            "refresh-on-play-pause": "Làm mới khi phát/tạm dừng",
+            "tray-controls": "Mở/Đóng khi nhấp vào khay"
+          }
+        },
+        "priority": "Ưu tiên thông báo",
+        "toast-style": "Kiểu toast",
+        "unpause-notification": "Hiển thị thông báo khi bỏ tạm dừng"
+      },
+      "name": "Thông báo"
+    },
+    "picture-in-picture": {
+      "description": "Cho phép chuyển ứng dụng sang chế độ ảnh trong ảnh",
+      "menu": {
+        "always-on-top": "Luôn ở trên cùng",
+        "hotkey": {
+          "label": "Phím nóng",
+          "prompt": {
+            "keybind-options": {
+              "hotkey": "Phím nóng"
+            },
+            "label": "Chọn phím nóng để chuyển đổi ảnh trong ảnh",
+            "title": "Phím nóng ảnh trong ảnh"
+          }
+        },
+        "save-window-position": "Lưu vị trí cửa sổ",
+        "save-window-size": "Lưu kích thước cửa sổ",
+        "use-native-pip": "Sử dụng PiP gốc của trình duyệt"
+      },
+      "name": "Ảnh trong ảnh",
+      "templates": {
+        "button": "Ảnh trong ảnh"
+      }
+    },
+    "playback-speed": {
+      "description": "Nghe nhanh, nghe chậm! Thêm thanh trượt kiểm soát tốc độ bài hát",
+      "name": "Tốc độ phát lại",
+      "templates": {
+        "button": "Tốc độ"
+      }
+    },
+    "precise-volume": {
+      "description": "Kiểm soát âm lượng chính xác bằng con lăn chuột/phím nóng, với HUD tùy chỉnh và các bước âm lượng có thể tùy chỉnh",
+      "menu": {
+        "arrows-shortcuts": "Điều khiển phím mũi tên cục bộ",
+        "custom-volume-steps": "Đặt các bước âm lượng tùy chỉnh",
+        "global-shortcuts": "Phím nóng chung"
+      },
+      "name": "Âm lượng chính xác",
+      "prompt": {
+        "global-shortcuts": {
+          "keybind-options": {
+            "decrease": "Giảm âm lượng",
+            "increase": "Tăng âm lượng"
+          },
+          "label": "Chọn tổ hợp phím âm lượng chung:",
+          "title": "Liên kết phím âm lượng chung"
+        },
+        "volume-steps": {
+          "label": "Chọn các bước tăng/giảm âm lượng",
+          "title": "Bước âm lượng"
+        }
+      }
+    },
+    "quality-changer": {
+      "backend": {
+        "dialog": {
+          "quality-changer": {
+            "detail": "Chất lượng hiện tại: {{quality}}",
+            "message": "Chọn chất lượng video:",
+            "title": "Chọn chất lượng video:"
+          }
+        }
+      },
+      "description": "Cho phép thay đổi chất lượng video bằng một nút trên lớp phủ video",
+      "name": "Thay đổi chất lượng video"
+    },
+    "scrobbler": {
+      "description": "Thêm hỗ trợ scrobbling (v.v. Last.fm, Listenbrainz)",
+      "menu": {
+        "lastfm": {
+          "api-settings": "Cài đặt API Last.fm"
+        },
+        "listenbrainz": {
+          "token": "Nhập mã người dùng ListenBrainz"
+        }
+      },
+      "name": "Scrobbler",
+      "prompt": {
+        "lastfm": {
+          "api-key": "Khóa API Last.fm",
+          "api-secret": "API Last.fm bảo mật"
+        },
+        "listenbrainz": {
+          "token": {
+            "label": "Nhập mã người dùng ListenBrainz của bạn:",
+            "title": "Mã ListenBrainz"
+          }
+        }
+      }
+    },
+    "shortcuts": {
+      "description": "Cho phép thiết lập các phím nóng chung để phát lại (phát/tạm dừng/tiếp theo/trước) và tắt OSD media bằng cách ghi đè các phím media, bật Ctrl/CMD + F để tìm kiếm, bật hỗ trợ Linux MPRIS cho các phím media và các phím nóng tùy chỉnh cho người dùng nâng cao",
+      "menu": {
+        "override-media-keys": "Ghi đè khóa phương tiện",
+        "set-keybinds": "Đặt điều khiển bài hát chung"
+      },
+      "name": "Phím tắt (& MPRIS)",
+      "prompt": {
+        "keybind": {
+          "keybind-options": {
+            "next": "Tiếp theo",
+            "play-pause": "Phát / Tạm dừng",
+            "previous": "Trước đó"
+          },
+          "label": "Chọn tổ hợp phím chung để kiểm soát bài hát:",
+          "title": "Tổ hợp phím chung"
+        }
+      }
+    },
+    "skip-disliked-songs": {
+      "description": "Bỏ qua những bài hát không thích",
+      "name": "Bỏ qua những bài hát không thích"
+    },
+    "skip-silences": {
+      "description": "Tự động bỏ qua các đoạn im lặng trong bài hát",
+      "name": "Bỏ qua đoạn im lặng"
+    },
+    "sponsorblock": {
+      "description": "Tự động bỏ qua các phần không phải âm nhạc như phần giới thiệu/kết thúc hoặc các phần của video nhạc mà bài hát không được phát",
+      "name": "SponsorBlock"
+    },
+    "taskbar-mediacontrol": {
+      "description": "Kiểm soát phát lại từ thanh tác vụ Windows của bạn",
+      "name": "Kiểm soát phương tiện trên thanh tác vụ"
+    },
+    "touchbar": {
+      "description": "Thêm tiện ích TouchBar cho người dùng macOS",
+      "name": "TouchBar"
+    },
+    "tuna-obs": {
+      "description": "Tích hợp với plugin Tuna của OBS",
+      "name": "Tuna OBS"
+    },
+    "video-toggle": {
+      "description": "Thêm nút để chuyển giữa chế độ Video/Bài hát. Cũng có thể tùy ý xóa toàn bộ tab video",
+      "menu": {
+        "align": {
+          "label": "Căn chỉnh",
+          "submenu": {
+            "left": "Trái",
+            "middle": "Giữa",
+            "right": "Phải"
+          }
+        },
+        "force-hide": "Buộc loại bỏ tab video",
+        "mode": {
+          "label": "Chế độ",
+          "submenu": {
+            "custom": "Chuyển đổi tùy chỉnh",
+            "disabled": "Vô hiệu hoá",
+            "native": "Chuyển đổi gốc"
+          }
+        }
+      },
+      "name": "Chuyển đổi video",
+      "templates": {
+        "button": "Bài hát"
+      }
+    },
+    "visualizer": {
+      "description": "Thêm trình hiển thị cho trình phát",
+      "menu": {
+        "visualizer-type": "Loại trình hiển thị"
+      },
+      "name": "Trình hiển thị"
+    }
   }
 }

src/i18n/resources/zh-CN.json

@@ -171,7 +171,7 @@
       "plugins": {
         "enabled": "已启用",
         "label": "插件",
-        "new": "新建"
+        "new": "新增"
       },
       "view": {
         "label": "视图",
@@ -191,7 +191,11 @@
       "previous": "上一首",
       "quit": "退出",
       "restart": "重启应用",
-      "show": "显示窗口"
+      "show": "显示窗口",
+      "tooltip": {
+        "default": "YouTube Music",
+        "with-song-info": "YouTube Music: {{artist}} - {{title}}"
+      }
     }
   },
   "plugins": {
@@ -203,15 +207,23 @@
       "name": "广告屏蔽器"
     },
     "album-actions": {
-      "description": "添加作用于播放列表或专辑中所有歌曲的全局“点赞/取消点赞”与“喜欢/取消喜欢”按钮。",
+      "description": "添加作用于播放列表或专辑中所有歌曲的全局“点赞/取消点赞”与“喜欢/取消喜欢”按钮",
       "name": "专辑操作"
     },
     "album-color-theme": {
       "description": "根据专辑封面配色动态改变主题与视觉效果",
+      "menu": {
+        "color-mix-ratio": {
+          "label": "颜色混合比例",
+          "submenu": {
+            "percent": "{{ratio}}%"
+          }
+        }
+      },
       "name": "专辑配色主题"
     },
     "ambient-mode": {
-      "description": "将视频中的浅配色作为光效投射到背景中，以增加沉浸感。",
+      "description": "将视频中的浅配色作为光效投射到背景中，以增加沉浸感",
       "menu": {
         "blur-amount": {
           "label": "模糊等级",
@@ -413,10 +425,6 @@
       },
       "name": "应用内菜单"
     },
-    "last-fm": {
-      "description": "添加 Last.fm 记录支持",
-      "name": "Last.fm"
-    },
     "lumiastream": {
       "description": "添加 Lumia Stream 支持",
       "name": "Lumia Stream [测试]"
@@ -468,6 +476,7 @@
         "disconnected": "Music Together 已断开连接",
         "host-failed": "发起 Music Together 失败",
         "id-copied": "已将发起者 ID 复制到剪切板",
+        "id-copy-failed": "复制发起者 ID 到剪贴板时失败",
         "join-failed": "加入 Music Together 失败",
         "joined": "已加入 Music Together",
         "permission-changed": "Music Together 权限已改为 \"{{permission}}\"",
@@ -568,8 +577,33 @@
       "description": "允许在视频上显示切换画质按钮",
       "name": "视频画质切换器"
     },
+    "scrobbler": {
+      "description": "添加歌曲追踪支持（如 Last.fm 和 Listenbrainz）",
+      "menu": {
+        "lastfm": {
+          "api-settings": "Last.fm API 设置"
+        },
+        "listenbrainz": {
+          "token": "输入 ListenBrainz 用户令牌"
+        },
+        "scrobble-other-media": "记录其他媒体文件"
+      },
+      "name": "歌曲记录器",
+      "prompt": {
+        "lastfm": {
+          "api-key": "Last.fm API 密钥（Key）",
+          "api-secret": "Last.fm API 密文（Secret）"
+        },
+        "listenbrainz": {
+          "token": {
+            "label": "输入您的v ListenBrainz 用户令牌：",
+            "title": "ListenBrainz 令牌"
+          }
+        }
+      }
+    },
     "shortcuts": {
-      "description": "允许为音频回放（播放/暂停/上一曲/下一曲）设置全局热键，兼具覆盖物理键以禁用 OSD、启用 Ctrl/CMD + F 搜索、为物理键启用 Linux MPRIS 支持及自定义热键等高级功能。",
+      "description": "允许为音频回放操作（播放/暂停/上一曲/下一曲）设置全局热键，兼具覆盖物理键以禁用 OSD、启用 Ctrl/CMD + F 搜索、为物理键启用 Linux MPRIS 支持及自定义热键等高级功能",
       "menu": {
         "override-media-keys": "覆盖物理媒体热键",
         "set-keybinds": "设置全局歌曲控件"

src/i18n/resources/zh-TW.json

@@ -170,7 +170,8 @@
       },
       "plugins": {
         "enabled": "啟用",
-        "label": "外掛功能"
+        "label": "外掛功能",
+        "new": "新的"
       },
       "view": {
         "label": "視窗",
@@ -190,7 +191,11 @@
       "previous": "上一首",
       "quit": "關閉",
       "restart": "重啟程式",
-      "show": "顯示視窗"
+      "show": "顯示視窗",
+      "tooltip": {
+        "default": "Youtube Music",
+        "with-song-info": "YouTube Music: {{artist}} - {{title}}"
+      }
     }
   },
   "plugins": {
@@ -199,14 +204,26 @@
       "menu": {
         "blocker": "阻擋方式"
       },
-      "name": "廣告阻擋"
+      "name": "廣告攔截器"
+    },
+    "album-actions": {
+      "description": "新增支援對整個播放清單或專輯\"喜歡／不喜歡\"\"取消喜歡／取消不喜歡\"的按鈕",
+      "name": "進階專輯操作"
     },
     "album-color-theme": {
       "description": "依歌曲色調自動更改應用程式主題",
+      "menu": {
+        "color-mix-ratio": {
+          "label": "顏色混合程度",
+          "submenu": {
+            "percent": "{{ratio}}%"
+          }
+        }
+      },
       "name": "隨歌曲色調變更主題"
     },
     "ambient-mode": {
-      "description": "將影片內容的淺色畫面投放至螢幕背景, 讓觀眾在觀賞影片時更有臨場感。",
+      "description": "影片周圍背景根據影片內容改變顏色, 讓觀眾在觀賞影片時更有臨場感",
       "menu": {
         "blur-amount": {
           "label": "模糊等級",
@@ -408,10 +425,6 @@
       },
       "name": "程式內選單列"
     },
-    "last-fm": {
-      "description": "新增對Last.fm的scrobbling支援",
-      "name": "Last.fm"
-    },
     "lumiastream": {
       "description": "新增對 Lumia Stream 的支援",
       "name": "Lumia Stream [Beta]"
@@ -426,6 +439,52 @@
         "fetched-lyrics": "為Genius獲取字幕"
       }
     },
+    "music-together": {
+      "description": "與他人共享播放清單。當發起人播放歌曲時，其他成員也會同步收聽",
+      "dialog": {
+        "enter-host": "輸入發起人 ID"
+      },
+      "internal": {
+        "save": "儲存",
+        "track-source": "追蹤來源",
+        "unknown-user": "未知使用者"
+      },
+      "menu": {
+        "click-to-copy-id": "複製發起人 ID",
+        "close": "同步關閉音樂",
+        "connected-users": "已連接的使用者",
+        "disconnect": "斷開連接共享音樂",
+        "empty-user": "無已連接的使用者",
+        "host": "發起共享音樂",
+        "join": "加入共享音樂",
+        "permission": {
+          "all": "允許加入的使用者控制播放清單及播放控制",
+          "host-only": "不允許加入的使用者控制播放清單及播放控制",
+          "playlist": "只允許加入的使用者控制播放清單"
+        },
+        "set-permission": "切換共享音樂播放權限",
+        "status": {
+          "disconnected": "已斷開連接",
+          "guest": "以使用者身份加入",
+          "host": "以發起人身份加入"
+        }
+      },
+      "name": "共享音樂 [Beta]",
+      "toast": {
+        "add-song-failed": "歌曲加入失敗",
+        "closed": "關閉共享音樂",
+        "disconnected": "共享音樂已斷開連接",
+        "host-failed": "發起共享音樂失敗",
+        "id-copied": "已複製發起人 ID",
+        "id-copy-failed": "複製發起人 ID 失敗",
+        "join-failed": "加入共享音樂失敗",
+        "joined": "加入共享音樂",
+        "permission-changed": "共享音樂播放權限已切換至 \"{{permission}}\"",
+        "remove-song-failed": "歌曲移除失敗",
+        "user-connected": "{{name}} 已加入共享音樂",
+        "user-disconnected": "{{name}} 離開了共享音樂"
+      }
+    },
     "navigation": {
       "description": "將上一頁／下一頁按鈕新增至應用程式上方, 就像你最熟悉的瀏覽器",
       "name": "導覽列"
@@ -518,8 +577,33 @@
       "description": "允許在影片內進行畫質更改",
       "name": "允許變更影片畫質"
     },
+    "scrobbler": {
+      "description": "額外新增 scrobbling 支援 (例如：last.fm, Listenbrainz)",
+      "menu": {
+        "lastfm": {
+          "api-settings": "Last.fm API 設定"
+        },
+        "listenbrainz": {
+          "token": "輸入 ListenBrainz 使用者憑證"
+        },
+        "scrobble-other-media": "紀錄其他媒體文件"
+      },
+      "name": "Scrobbler",
+      "prompt": {
+        "lastfm": {
+          "api-key": "Last.fm API 金鑰",
+          "api-secret": "Last.fm API 密鑰"
+        },
+        "listenbrainz": {
+          "token": {
+            "label": "輸入您的 ListenBrainz 使用者憑證：",
+            "title": "ListenBrainz 使用者憑證"
+          }
+        }
+      }
+    },
     "shortcuts": {
-      "description": "使用全域快捷鍵控制音樂 (播放／暫停／下一首／上一首) + 透過覆寫媒體快捷鍵停用媒體OSD + 允許Ctrl/CMD + F來搜尋 + 支援Linux MPRIS媒體快捷鍵 + 更多自訂快捷鍵給進階使用者。",
+      "description": "使用全域快捷鍵控制音樂 (播放／暫停／下一首／上一首) + 透過覆寫媒體快捷鍵停用媒體OSD + 允許Ctrl/CMD + F來搜尋 + 支援Linux MPRIS媒體快捷鍵 + 更多自訂快捷鍵給進階使用者",
       "menu": {
         "override-media-keys": "覆寫媒體快捷鍵",
         "set-keybinds": "設定全域歌曲控制"

src/index.ts

@@ -53,8 +53,17 @@ import {
 import { LoggerPrefix } from '@/utils';
 import { loadI18n, setLanguage, t } from '@/i18n';
 
+import ErrorHtmlAsset from '@assets/error.html?asset';
+
 import type { PluginConfig } from '@/types/plugins';
 
+if (!is.macOS()) {
+  delete allPlugins['touchbar'];
+}
+if (!is.windows()) {
+  delete allPlugins['taskbar-mediacontrol'];
+}
+
 // Catch errors and log them
 unhandled({
   logger: console.error,
@@ -114,18 +123,18 @@ function onClosed() {
   mainWindow = null;
 }
 
-ipcMain.handle('get-main-plugin-names', () => Object.keys(mainPlugins));
+ipcMain.handle('ytmd:get-main-plugin-names', () => Object.keys(mainPlugins));
 
 const initHook = (win: BrowserWindow) => {
   ipcMain.handle(
-    'get-config',
+    'ytmd:get-config',
     (_, id: string) =>
       deepmerge(
         allPlugins[id].config ?? { enabled: false },
         config.get(`plugins.${id}`) ?? {},
       ) as PluginConfig,
   );
-  ipcMain.handle('set-config', (_, name: string, obj: object) =>
+  ipcMain.handle('ytmd:set-config', (_, name: string, obj: object) =>
     config.setPartial(`plugins.${name}`, obj, allPlugins[name].config),
   );
 
@@ -258,7 +267,7 @@ async function createMainWindow() {
   const windowPosition: Electron.Point = config.get('window-position');
   const useInlineMenu = config.plugins.isEnabled('in-app-menu');
 
-  const defaultTitleBarOverlayOptions: Electron.TitleBarOverlayOptions = {
+  const defaultTitleBarOverlayOptions: Electron.TitleBarOverlay = {
     color: '#00000000',
     symbolColor: '#ffffff',
     height: 32,
@@ -413,6 +422,18 @@ async function createMainWindow() {
       });
     }
   });
+  win.webContents.on('will-redirect', (event) => {
+    const url = new URL(event.url);
+
+    // Workarounds for regions where YTM is restricted
+    if (url.hostname.endsWith('youtube.com') && url.pathname === '/premium') {
+      event.preventDefault();
+
+      win.webContents.loadURL(
+        'https://accounts.google.com/ServiceLogin?ltmpl=music&service=youtube&continue=https%3A%2F%2Fwww.youtube.com%2Fsignin%3Faction_handle_signin%3Dtrue%26next%3Dhttps%253A%252F%252Fmusic.youtube.com%252F'
+      );
+    }
+  });
 
   win.webContents.loadURL(urlToLoad);
 
@@ -486,7 +507,7 @@ app.once('browser-window-created', (_event, win) => {
       if (errorCode !== -3) {
         // -3 is a false positive
         win.webContents.send('log', log);
-        win.webContents.loadFile(path.join(__dirname, 'error.html'));
+        win.webContents.loadFile(ErrorHtmlAsset);
       }
     },
   );
@@ -567,7 +588,7 @@ app.whenReady().then(async () => {
       );
       try {
         // Check if shortcut is registered and valid
-        const shortcutDetails = shell.readShortcutLink(shortcutPath); // Throw error if doesn't exist yet
+        const shortcutDetails = shell.readShortcutLink(shortcutPath); // Throw error if it doesn't exist yet
         if (
           shortcutDetails.target !== appLocation ||
           shortcutDetails.appUserModelId !== appID
@@ -652,7 +673,9 @@ app.whenReady().then(async () => {
         );
       }
 
-      handleProtocol(command);
+      const splited = decodeURIComponent(command).split(' ');
+
+      handleProtocol(splited.shift()!, splited);
       return;
     }
 

src/loader/renderer.ts

@@ -18,9 +18,9 @@ const loadedPluginMap: Record<
 export const createContext = <Config extends PluginConfig>(
   id: string,
 ): RendererContext<Config> => ({
-  getConfig: async () => window.ipcRenderer.invoke('get-config', id),
+  getConfig: async () => window.ipcRenderer.invoke('ytmd:get-config', id),
   setConfig: async (newConfig) => {
-    await window.ipcRenderer.invoke('set-config', id, newConfig);
+    await window.ipcRenderer.invoke('ytmd:set-config', id, newConfig);
   },
   ipc: {
     send: (event: string, ...args: unknown[]) => {

src/plugins/album-actions/index.ts

@@ -7,7 +7,22 @@ import dislikeHTML from './templates/dislike.html?raw';
 import likeHTML from './templates/like.html?raw';
 import unlikeHTML from './templates/unlike.html?raw';
 
-export default createPlugin({
+export default createPlugin<
+  unknown,
+  unknown,
+  {
+    observer?: MutationObserver;
+    loadObserver?: MutationObserver;
+    changeObserver?: MutationObserver;
+    waiting: boolean;
+    onPageChange(): void;
+    waitForElem(selector: string): Promise<HTMLElement>;
+    loadFullList: (event: MouseEvent) => void;
+    applyToList(id: string, loader: HTMLElement): void;
+    start(): void;
+    stop(): void;
+  }
+>({
   name: () => t('plugins.album-actions.name'),
   description: () => t('plugins.album-actions.description'),
   restartNeeded: false,
@@ -16,32 +31,29 @@ export default createPlugin({
     enabled: false,
   },
   renderer: {
-    observer: null as MutationObserver | null,
+    waiting: false,
-    loadObserver: null as MutationObserver | null,
-    changeObserver: null as MutationObserver | null,
-    waiting: false as boolean,
     start() {
       // Waits for pagechange
       this.onPageChange();
       this.observer = new MutationObserver(() => {
         this.onPageChange();
       });
-      this.observer.observe(document.querySelector('#browse-page'), {
+      this.observer.observe(document.querySelector('#browse-page')!, {
         attributes: false,
         childList: true,
         subtree: true,
       });
     },
-    onPageChange() {
+    async onPageChange() {
       if (this.waiting) {
         return;
       } else {
         this.waiting = true;
       }
-      this.waitForElem('#continuations').then((continuations: HTMLElement) => {
+      const continuations = await this.waitForElem('#continuations');
       this.waiting = false;
       //Gets the for buttons
-        let buttons: Array<HTMLElement> = [
+      const buttons: Array<HTMLElement> = [
         ElementFromHtml(undislikeHTML),
         ElementFromHtml(dislikeHTML),
         ElementFromHtml(likeHTML),
@@ -50,8 +62,8 @@ export default createPlugin({
       //Finds the playlist
       const playlist =
         document.querySelector('ytmusic-shelf-renderer') ??
-          document.querySelector('ytmusic-playlist-shelf-renderer');
+        document.querySelector('ytmusic-playlist-shelf-renderer')!;
-        //Adds an observer for every button so it gets updated when one is clicked
+      // Adds an observer for every button, so it gets updated when one is clicked
       this.changeObserver?.disconnect();
       this.changeObserver = new MutationObserver(() => {
         this.stop();
@@ -60,12 +72,13 @@ export default createPlugin({
       const allButtons = playlist.querySelectorAll(
         'yt-button-shape.ytmusic-like-button-renderer',
       );
-        for (const btn of allButtons)
+      for (const btn of allButtons) {
         this.changeObserver.observe(btn, {
           attributes: true,
           childList: false,
           subtree: false,
         });
+      }
       //Determine if button is needed and colors the percentage
       const listsLength = playlist.querySelectorAll(
         '#button-shape-dislike > button',
@@ -91,9 +104,9 @@ export default createPlugin({
             buttons.splice(i, 1);
             i--;
           } else {
-              buttons[i].children[0].children[0].style.setProperty(
+            (buttons[i].children[0].children[0] as HTMLElement).style.setProperty(
               '-webkit-mask-size',
-                `100% ${100 - (count / listsLength) * 100}%`,
+              `100% ${100 - ((count / listsLength) * 100)}%`,
             );
           }
           i++;
@@ -106,12 +119,12 @@ export default createPlugin({
           button.addEventListener('click', this.loadFullList);
         }
       }
-      });
     },
-    loadFullList(event) {
+    loadFullList(event: MouseEvent) {
+      if (event.currentTarget instanceof Element) {
         event.stopPropagation();
-      const id: string = event.currentTarget.id,
+        const id = event.currentTarget.id;
-        loader = document.getElementById('continuations');
+        const loader = document.getElementById('continuations')!;
         this.loadObserver = new MutationObserver(() => {
           this.applyToList(id, loader);
         });
@@ -124,32 +137,33 @@ export default createPlugin({
         loader?.style.setProperty('top', '0');
         loader?.style.setProperty('left', '50%');
         loader?.style.setProperty('position', 'absolute');
+      }
     },
     applyToList(id: string, loader: HTMLElement) {
       if (loader.children.length != 0) return;
       this.loadObserver?.disconnect();
-      let playlistbuttons: NodeListOf<Element> | undefined;
+      let playlistButtons: NodeListOf<HTMLElement> | undefined;
       const playlist = document.querySelector('ytmusic-shelf-renderer')
         ? document.querySelector('ytmusic-shelf-renderer')
         : document.querySelector('ytmusic-playlist-shelf-renderer');
       switch (id) {
         case 'allundislike':
-          playlistbuttons = playlist?.querySelectorAll(
+          playlistButtons = playlist?.querySelectorAll(
             '#button-shape-dislike[aria-pressed=true] > button',
           );
           break;
         case 'alldislike':
-          playlistbuttons = playlist?.querySelectorAll(
+          playlistButtons = playlist?.querySelectorAll(
             '#button-shape-dislike[aria-pressed=false] > button',
           );
           break;
         case 'alllike':
-          playlistbuttons = playlist?.querySelectorAll(
+          playlistButtons = playlist?.querySelectorAll(
             '#button-shape-like[aria-pressed=false] > button',
           );
           break;
         case 'allunlike':
-          playlistbuttons = playlist?.querySelectorAll(
+          playlistButtons = playlist?.querySelectorAll(
             '#button-shape-like[aria-pressed=true] > button',
           );
           break;
@@ -167,7 +181,7 @@ export default createPlugin({
     waitForElem(selector: string) {
       return new Promise((resolve) => {
         const interval = setInterval(() => {
-          const elem = document.querySelector(selector);
+          const elem = document.querySelector<HTMLElement>(selector);
           if (!elem) return;
 
           clearInterval(interval);

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

@@ -8,28 +8,73 @@ import { t } from '@/i18n';
 
 const COLOR_KEY = '--ytmusic-album-color';
 const DARK_COLOR_KEY = '--ytmusic-album-color-dark';
+const RATIO_KEY = '--ytmusic-album-color-ratio';
 
-export default createPlugin({
+export default createPlugin<
+  unknown,
+  unknown,
+  {
+    color?: Color;
+    darkColor?: Color;
+
+    playerPage: HTMLElement | null;
+    navBarBackground: HTMLElement | null;
+    ytmusicPlayerBar: HTMLElement | null;
+    playerBarBackground: HTMLElement | null;
+    sidebarBig: HTMLElement | null;
+    sidebarSmall: HTMLElement | null;
+    ytmusicAppLayout: HTMLElement | null;
+
+    getMixedColor(color: string, key: string, alpha?: number, ratioMultiply?: number): string;
+    updateColor(): void;
+  },
+  {
+    enabled: boolean;
+    ratio: number;
+  }
+>({
   name: () => t('plugins.album-color-theme.name'),
   description: () => t('plugins.album-color-theme.description'),
-  restartNeeded: true,
+  restartNeeded: false,
   config: {
     enabled: false,
+    ratio: 0.5,
   },
   stylesheets: [style],
+  menu: async ({ getConfig, setConfig }) => {
+    const ratioList = [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1];
+
+    const config = await getConfig();
+
+    return [
+      {
+        label: t('plugins.album-color-theme.menu.color-mix-ratio.label'),
+        submenu: ratioList.map((ratio) => ({
+          label: t(
+            'plugins.album-color-theme.menu.color-mix-ratio.submenu.percent',
+            {
+              ratio: ratio * 100,
+            },
+          ),
+          type: 'radio',
+          checked: config.ratio === ratio,
+          click() {
+            setConfig({ ratio });
+          },
+        })),
+      },
+    ];
+  },
   renderer: {
-    color: null as Color | null,
+    playerPage: null,
-    darkColor: null as Color | null,
+    navBarBackground: null,
+    ytmusicPlayerBar: null,
+    playerBarBackground: null,
+    sidebarBig: null,
+    sidebarSmall: null,
+    ytmusicAppLayout: null,
 
-    playerPage: null as HTMLElement | null,
+    async start({ getConfig }) {
-    navBarBackground: null as HTMLElement | null,
-    ytmusicPlayerBar: null as HTMLElement | null,
-    playerBarBackground: null as HTMLElement | null,
-    sidebarBig: null as HTMLElement | null,
-    sidebarSmall: null as HTMLElement | null,
-    ytmusicAppLayout: null as HTMLElement | null,
-
-    start() {
       this.playerPage = document.querySelector<HTMLElement>('#player-page');
       this.navBarBackground = document.querySelector<HTMLElement>(
         '#nav-bar-background',
@@ -44,6 +89,9 @@ export default createPlugin({
         '#mini-guide-background',
       );
       this.ytmusicAppLayout = document.querySelector<HTMLElement>('#layout');
+
+      const config = await getConfig();
+      document.documentElement.style.setProperty(RATIO_KEY, `${~~(config.ratio * 100)}%`);
     },
     onPlayerApiReady(playerApi) {
       const fastAverageColor = new FastAverageColor();
@@ -82,28 +130,62 @@ export default createPlugin({
         this.updateColor();
       });
     },
-    getColor(key: string, alpha = 1) {
+    onConfigChange(config) {
-      return `rgba(var(${key}), ${alpha})`;
+      document.documentElement.style.setProperty(RATIO_KEY, `${~~(config.ratio * 100)}%`);
+    },
+    getMixedColor(color: string, key: string, alpha = 1, ratioMultiply) {
+      const keyColor = `rgba(var(${key}), ${alpha})`;
+
+      let colorRatio = `var(${RATIO_KEY}, 50%)`;
+      let originalRatio = `calc(100% - var(${RATIO_KEY}, 50%))`;
+      if (ratioMultiply) {
+        colorRatio = `calc(var(${RATIO_KEY}, 50%) * ${ratioMultiply})`;
+        originalRatio = `calc(100% - calc(var(${RATIO_KEY}, 50%) * ${ratioMultiply}))`;
+      }
+      return `color-mix(in srgb, ${color} ${originalRatio}, ${keyColor} ${colorRatio})`;
     },
     updateColor() {
-      const change = (element: HTMLElement | null, color: string) => {
+      const variableMap = {
-        if (element) {
+        '--ytmusic-color-black1': '#212121',
-          element.style.backgroundColor = color;
+        '--ytmusic-color-black2': '#181818',
-        }
+        '--ytmusic-color-black3': '#030303',
+        '--ytmusic-color-black4': '#030303',
+        '--ytmusic-color-blackpure': '#000',
+        '--dark-theme-background-color': '#212121',
+        '--yt-spec-base-background': '#0f0f0f',
+        '--yt-spec-raised-background': '#212121',
+        '--yt-spec-menu-background': '#282828',
+        '--yt-spec-static-brand-black': '#212121',
+        '--yt-spec-static-overlay-background-solid': '#000',
+        '--yt-spec-static-overlay-background-heavy': 'rgba(0,0,0,0.8)',
+        '--yt-spec-static-overlay-background-medium': 'rgba(0,0,0,0.6)',
+        '--yt-spec-static-overlay-background-medium-light': 'rgba(0,0,0,0.3)',
+        '--yt-spec-static-overlay-background-light': 'rgba(0,0,0,0.1)',
+        '--yt-spec-general-background-a': '#181818',
+        '--yt-spec-general-background-b': '#0f0f0f',
+        '--yt-spec-general-background-c': '#030303',
+        '--yt-spec-snackbar-background': '#030303',
+        '--yt-spec-filled-button-text': '#030303',
+        '--yt-spec-black-1': '#282828',
+        '--yt-spec-black-2': '#1f1f1f',
+        '--yt-spec-black-3': '#161616',
+        '--yt-spec-black-4': '#0d0d0d',
+        '--yt-spec-black-pure': '#000',
+        '--yt-spec-black-pure-alpha-5': 'rgba(0,0,0,0.05)',
+        '--yt-spec-black-pure-alpha-10': 'rgba(0,0,0,0.1)',
+        '--yt-spec-black-pure-alpha-15': 'rgba(0,0,0,0.15)',
+        '--yt-spec-black-pure-alpha-30': 'rgba(0,0,0,0.3)',
+        '--yt-spec-black-pure-alpha-60': 'rgba(0,0,0,0.6)',
+        '--yt-spec-black-pure-alpha-80': 'rgba(0,0,0,0.8)',
+        '--yt-spec-black-1-alpha-98': 'rgba(40,40,40,0.98)',
+        '--yt-spec-black-1-alpha-95': 'rgba(40,40,40,0.95)',
       };
+      Object.entries(variableMap).map(([variable, color]) => {
+        document.documentElement.style.setProperty(variable, this.getMixedColor(color, COLOR_KEY), 'important');
+      });
 
-      change(this.playerPage, this.getColor(DARK_COLOR_KEY));
+      document.body.style.setProperty('background', this.getMixedColor('#030303', COLOR_KEY), 'important');
-      change(this.navBarBackground, this.getColor(COLOR_KEY));
+      document.documentElement.style.setProperty('--ytmusic-background', this.getMixedColor('#030303', DARK_COLOR_KEY), 'important');
-      change(this.ytmusicPlayerBar, this.getColor(COLOR_KEY));
-      change(this.playerBarBackground, this.getColor(COLOR_KEY));
-      change(this.sidebarBig, this.getColor(COLOR_KEY));
-
-      if (this.ytmusicAppLayout?.hasAttribute('player-page-open')) {
-        change(this.sidebarSmall, this.getColor(DARK_COLOR_KEY));
-      }
-
-      const ytRightClickList = document.querySelector<HTMLElement>('tp-yt-paper-listbox');
-      change(ytRightClickList, this.getColor(COLOR_KEY));
     },
   },
 });

src/plugins/album-color-theme/style.css

@@ -53,15 +53,37 @@ ytmusic-app-layout > [slot='player-page'] {
 .icon.ytmusic-menu-navigation-item-renderer {
   color: rgba(255, 255, 255, 0.5) !important;
 }
+
 .menu.ytmusic-player-bar {
   --iron-icon-fill-color: rgba(255, 255, 255, 0.5) !important;
 }
+
 ytmusic-player-bar {
   color: rgba(255, 255, 255, 0.5) !important;
 }
+
 .time-info.ytmusic-player-bar {
   color: rgba(255, 255, 255, 0.5) !important;
 }
+
 .volume-slider.ytmusic-player-bar, .expand-volume-slider.ytmusic-player-bar {
   --paper-slider-container-color: rgba(255, 255, 255, 0.5) !important;
 }
+
+/* fix background image */
+ytmusic-fullbleed-thumbnail-renderer img {
+  mask: linear-gradient(to bottom, #000 0%, #000 50%, transparent 100%);
+}
+
+.background-gradient.style-scope,
+ytmusic-app-layout[is-bauhaus-sidenav-enabled] #mini-guide-background.ytmusic-app-layout {
+  background: var(--ytmusic-background) !important;
+}
+
+ytmusic-browse-response[has-background]:not([disable-gradient]) .background-gradient.ytmusic-browse-response {
+  background: unset !important;
+}
+
+#background.immersive-background.style-scope.ytmusic-browse-response {
+  opacity: 0.6;
+}

src/plugins/audio-compressor.ts

@@ -7,7 +7,7 @@ export default createPlugin({
 
   renderer() {
     document.addEventListener(
-      'audioCanPlay',
+      'ytmd:audio-can-play',
       ({ detail: { audioSource, audioContext } }) => {
         const compressor = audioContext.createDynamicsCompressor();
 

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

@@ -1,11 +1,24 @@
 import { createPlugin } from '@/utils';
-import style from './style.css?inline';
+
 import { t } from '@/i18n';
 
+import style from './style.css?inline';
+
 export default createPlugin({
   name: () => t('plugins.blur-nav-bar.name'),
   description: () => t('plugins.blur-nav-bar.description'),
-  restartNeeded: true,
+  restartNeeded: false,
-  stylesheets: [style],
+  renderer: {
-  renderer() {},
+    styleSheet: null as CSSStyleSheet | null,
+
+    async start() {
+      this.styleSheet = new CSSStyleSheet();
+      await this.styleSheet.replace(style);
+
+      document.adoptedStyleSheets = [...document.adoptedStyleSheets, this.styleSheet];
+    },
+    async stop() {
+      await this.styleSheet?.replace('');
+    },
+  },
 });

src/plugins/blur-nav-bar/style.css

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

src/plugins/captions-selector/renderer.ts

@@ -121,7 +121,7 @@ export default createRenderer<
       ?.unloadModule('captions');
     document
       .querySelector('video')
-      ?.removeEventListener('srcChanged', this.videoChangeListener);
+      ?.removeEventListener('ytmd:src-changed', this.videoChangeListener);
     this.captionsSettingsButton.removeEventListener(
       'click',
       this.captionsButtonClickListener,
@@ -139,7 +139,7 @@ export default createRenderer<
 
     document
       .querySelector('video')
-      ?.addEventListener('srcChanged', this.videoChangeListener);
+      ?.addEventListener('ytmd:src-changed', this.videoChangeListener);
     this.captionsSettingsButton.addEventListener(
       'click',
       this.captionsButtonClickListener,

src/plugins/crossfade/index.ts

@@ -26,8 +26,8 @@ export default createPlugin<
   unknown,
   unknown,
   {
-    config: CrossfadePluginConfig | null;
+    config?: CrossfadePluginConfig;
-    ipc: RendererContext<CrossfadePluginConfig>['ipc'] | null;
+    ipc?: RendererContext<CrossfadePluginConfig>['ipc'];
   },
   CrossfadePluginConfig
 >({
@@ -178,10 +178,8 @@ export default createPlugin<
   },
 
   renderer: {
-    config: null,
+    async start({ ipc, getConfig }) {
-    ipc: null,
+      this.config = await getConfig();
-
-    start({ ipc }) {
       this.ipc = ipc;
     },
     onConfigChange(newConfig) {
@@ -271,7 +269,7 @@ export default createPlugin<
         const transitionBeforeEnd = () => {
           if (
             video.currentTime >=
-              video.duration - this.config!.secondsBeforeEnd &&
+              video.duration - (this.config?.secondsBeforeEnd ?? 0) &&
             isReadyToCrossfade()
           ) {
             video.removeEventListener('timeupdate', transitionBeforeEnd);

src/plugins/discord/main.ts

@@ -2,14 +2,12 @@ import { app, dialog, ipcMain } from 'electron';
 import { Client as DiscordClient } from '@xhayper/discord-rpc';
 import { dev } from 'electron-is';
 
-import { SetActivity } from '@xhayper/discord-rpc/dist/structures/ClientUser';
-
 import registerCallback, { type SongInfo } from '@/providers/song-info';
-
 import { createBackend, LoggerPrefix } from '@/utils';
-
 import { t } from '@/i18n';
 
+import type { GatewayActivityButton } from 'discord-api-types/v10';
+import type { SetActivity } from '@xhayper/discord-rpc/dist/structures/ClientUser';
 import type { DiscordPluginConfig } from './index';
 
 // Application ID registered by @th-ch/youtube-music dev team
@@ -163,24 +161,30 @@ export const backend = createBackend<
       );
     }
 
+    // see https://github.com/th-ch/youtube-music/issues/1664
+    let buttons: GatewayActivityButton[] | undefined = [];
+    if (config.playOnYouTubeMusic) {
+      buttons.push({
+        label: 'Play on YouTube Music',
+        url: songInfo.url ?? 'https://music.youtube.com',
+      });
+    }
+    if (!config.hideGitHubButton) {
+      buttons.push({
+        label: 'View App On GitHub',
+        url: 'https://github.com/th-ch/youtube-music',
+      });
+    }
+    if (buttons.length === 0) {
+      buttons = undefined;
+    }
+
     const activityInfo: SetActivity = {
       details: songInfo.title,
       state: songInfo.artist,
       largeImageKey: songInfo.imageSrc ?? '',
       largeImageText: songInfo.album ?? '',
-      buttons: [
+      buttons,
-        ...(config.playOnYouTubeMusic
-          ? [{ label: 'Play on YouTube Music', url: songInfo.url ?? '' }]
-          : []),
-        ...(config.hideGitHubButton
-          ? []
-          : [
-              {
-                label: 'View App On GitHub',
-                url: 'https://github.com/th-ch/youtube-music',
-              },
-            ]),
-      ],
     };
 
     if (songInfo.isPaused) {
@@ -244,7 +248,7 @@ export const backend = createBackend<
       });
       connect();
       let lastSent = Date.now();
-      ipcMain.on('timeChanged', (_, t: number) => {
+      ipcMain.on('ytmd:time-changed', (_, t: number) => {
         const currentTime = Date.now();
         // if lastSent is more than 5 seconds ago, send the new time
         if (currentTime - lastSent > 5000) {

src/plugins/discord/menu.ts

@@ -84,7 +84,7 @@ export const onMenu = async ({
       checked: config.hideDurationLeft,
       click(item: Electron.MenuItem) {
         setConfig({
-          hideGitHubButton: item.checked,
+          hideDurationLeft: item.checked,
         });
       },
     },

src/plugins/downloader/main/index.ts

@@ -30,7 +30,7 @@ import {
 
 import { fetchFromGenius } from '@/plugins/lyrics-genius/main';
 import { isEnabled } from '@/config/plugins';
-import { cleanupName, getImage, SongInfo } from '@/providers/song-info';
+import { cleanupName, getImage, MediaType, type SongInfo } from '@/providers/song-info';
 import { getNetFetchAsFetch } from '@/plugins/utils/main';
 import { cache } from '@/providers/decorators';
 
@@ -110,7 +110,7 @@ export const onMainLoad = async ({
     fetch: getNetFetchAsFetch(),
   });
   ipc.handle('download-song', (url: string) => downloadSong(url));
-  ipc.on('video-src-changed', (data: GetPlayerResponse) => {
+  ipc.on('ytmd:video-src-changed', (data: GetPlayerResponse) => {
     playingUrl = data.microformat.microformatDataRenderer.urlCanonical;
   });
   ipc.handle('download-playlist-request', async (url: string) =>
@@ -686,6 +686,7 @@ const getMetadata = (info: TrackInfo): CustomSongInfo => ({
     ?.url,
   views: info.basic_info.view_count!,
   songDuration: info.basic_info.duration!,
+  mediaType: MediaType.Audio,
 });
 
 // This is used to bypass age restrictions

src/plugins/downloader/renderer.ts

@@ -32,10 +32,22 @@ const menuObserver = new MutationObserver(() => {
     return;
   }
 
-  const menuUrl = document.querySelector<HTMLAnchorElement>(
+  // check for video (or music)
+  let menuUrl = document.querySelector<HTMLAnchorElement>(
     'tp-yt-paper-listbox [tabindex="0"] #navigation-endpoint',
   )?.href;
-  if (!menuUrl?.includes('watch?') && doneFirstLoad) {
+  if (!menuUrl?.includes('watch?')) {
+    menuUrl = undefined;
+    // check for podcast
+    for (const it of document.querySelectorAll('tp-yt-paper-listbox [tabindex="-1"] #navigation-endpoint')) {
+      if (it.getAttribute('href')?.includes('podcast/')) {
+        menuUrl = it.getAttribute('href')!;
+        break;
+      }
+    }
+  }
+
+  if (!menuUrl && doneFirstLoad) {
     return;
   }
 
@@ -51,17 +63,32 @@ export const onRendererLoad = ({
   ipc,
 }: RendererContext<DownloaderPluginConfig>) => {
   window.download = () => {
-    let videoUrl = getSongMenu()
+    const songMenu = getSongMenu();
+    let videoUrl = songMenu
       // Selector of first button which is always "Start Radio"
       ?.querySelector(
         'ytmusic-menu-navigation-item-renderer[tabindex="0"] #navigation-endpoint',
       )
       ?.getAttribute('href');
+
+    if (!videoUrl && songMenu) {
+      for (const it of songMenu.querySelectorAll('ytmusic-menu-navigation-item-renderer[tabindex="-1"] #navigation-endpoint')) {
+        if (it.getAttribute('href')?.includes('podcast/')) {
+          videoUrl = it.getAttribute('href');
+          break;
+        }
+      }
+    }
+
     if (videoUrl) {
       if (videoUrl.startsWith('watch?')) {
         videoUrl = defaultConfig.url + '/' + videoUrl;
       }
 
+      if (videoUrl.startsWith('podcast/')) {
+        videoUrl = defaultConfig.url + '/watch?' + videoUrl.replace('podcast/', 'v=');
+      }
+
       if (videoUrl.includes('?playlist=')) {
         ipc.invoke('download-playlist-request', videoUrl);
         return;

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -2,24 +2,15 @@ import titlebarStyle from './titlebar.css?inline';
 import { createPlugin } from '@/utils';
 import { onMainLoad } from './main';
 import { onMenu } from './menu';
-import { onPlayerApiReady, onRendererLoad } from './renderer';
+import { onConfigChange, onPlayerApiReady, onRendererLoad } from './renderer';
 import { t } from '@/i18n';
+import { defaultInAppMenuConfig } from './constants';
 
-export interface InAppMenuConfig {
-  enabled: boolean;
-  hideDOMWindowControls: boolean;
-}
 export default createPlugin({
   name: () => t('plugins.in-app-menu.name'),
   description: () => t('plugins.in-app-menu.description'),
   restartNeeded: true,
-  config: {
+  config: defaultInAppMenuConfig,
-    enabled:
-      (typeof window !== 'undefined' &&
-        !window.navigator?.userAgent?.includes('mac')) ||
-      (typeof global !== 'undefined' && global.process?.platform !== 'darwin'),
-    hideDOMWindowControls: false,
-  } as InAppMenuConfig,
   stylesheets: [titlebarStyle],
   menu: onMenu,
 
@@ -27,5 +18,6 @@ export default createPlugin({
   renderer: {
     start: onRendererLoad,
     onPlayerApiReady,
+    onConfigChange,
   },
 });

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

@@ -3,7 +3,7 @@ import { register } from 'electron-localshortcut';
 import { BrowserWindow, Menu, MenuItem, ipcMain, nativeImage } from 'electron';
 
 import type { BackendContext } from '@/types/contexts';
-import type { InAppMenuConfig } from './index';
+import type { InAppMenuConfig } from './constants';
 
 export const onMainLoad = ({
   window: win,
@@ -47,7 +47,7 @@ export const onMainLoad = ({
     return target;
   };
 
-  ipcMain.handle('menu-event', (event, commandId: number) => {
+  ipcMain.handle('ytmd:menu-event', (event, commandId: number) => {
     const target = getMenuItemById(commandId);
     if (target)
       target.click(

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

@@ -2,7 +2,7 @@ import is from 'electron-is';
 
 import { t } from '@/i18n';
 
-import type { InAppMenuConfig } from './index';
+import type { InAppMenuConfig } from './constants';
 import type { MenuContext } from '@/types/contexts';
 import type { MenuTemplate } from '@/menu';
 

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

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

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

@@ -1,220 +0,0 @@
-import Icons from './icons';
-
-import { ElementFromHtml } from '../../utils/renderer';
-
-import type { MenuItem } from 'electron';
-
-interface PanelOptions {
-  placement?: 'bottom' | 'right';
-  order?: number;
-  openOnHover?: boolean;
-}
-
-export const createPanel = (
-  parent: HTMLElement,
-  anchor: HTMLElement,
-  items: MenuItem[],
-  options: PanelOptions = { placement: 'bottom', order: 0, openOnHover: false },
-) => {
-  const childPanels: HTMLElement[] = [];
-  const panel = document.createElement('menu-panel');
-  panel.style.zIndex = `${options.order}`;
-
-  const updateIconState = async (iconWrapper: HTMLElement, item: MenuItem) => {
-    if (item.type === 'checkbox') {
-      if (item.checked) iconWrapper.innerHTML = Icons.checkbox;
-      else iconWrapper.innerHTML = '';
-    } else if (item.type === 'radio') {
-      if (item.checked) iconWrapper.innerHTML = Icons.radio.checked;
-      else iconWrapper.innerHTML = Icons.radio.unchecked;
-    } else {
-      const iconURL =
-        typeof item.icon === 'string'
-          ? ((await window.ipcRenderer.invoke(
-              'image-path-to-data-url',
-            )) as string)
-          : item.icon?.toDataURL();
-
-      if (iconURL) iconWrapper.style.background = `url(${iconURL})`;
-    }
-  };
-
-  const radioGroups: [MenuItem, HTMLElement][] = [];
-  items.map((item) => {
-    if (!item.visible) return;
-    if (item.type === 'separator')
-      return panel.appendChild(document.createElement('menu-separator'));
-
-    const menu = document.createElement('menu-item');
-    const iconWrapper = document.createElement('menu-icon');
-
-    updateIconState(iconWrapper, item);
-    menu.appendChild(iconWrapper);
-    menu.append(item.label);
-
-    if (item.sublabel) {
-      menu.classList.add('badge');
-      const menuBadge = document.createElement('menu-item-badge');
-      menuBadge.append(item.sublabel);
-      menu.append(menuBadge);
-    }
-    if (item.toolTip) {
-      const menuTooltip = document.createElement('menu-item-tooltip');
-      menuTooltip.append(item.toolTip);
-
-      menu.addEventListener('mouseenter', () => {
-        const rect = menu.getBoundingClientRect();
-        menuTooltip.style.setProperty('max-width', `${rect.width - 8}px`);
-        menuTooltip.style.setProperty('--x', `${rect.left}px`);
-        menuTooltip.style.setProperty('--y', `${rect.top + rect.height}px`);
-        menuTooltip.classList.add('show');
-      });
-      menu.addEventListener('mouseleave', () => {
-        menuTooltip.classList.remove('show');
-      });
-      parent.append(menuTooltip);
-    }
-
-    menu.addEventListener('click', async () => {
-      await window.ipcRenderer.invoke('menu-event', item.commandId);
-      const menuItem = (await window.ipcRenderer.invoke(
-        'get-menu-by-id',
-        item.commandId,
-      )) as MenuItem | null;
-
-      if (menuItem) {
-        updateIconState(iconWrapper, menuItem);
-
-        if (menuItem.type === 'radio') {
-          await Promise.all(
-            radioGroups.map(async ([item, iconWrapper]) => {
-              if (item.commandId === menuItem.commandId) return;
-              const newItem = (await window.ipcRenderer.invoke(
-                'get-menu-by-id',
-                item.commandId,
-              )) as MenuItem | null;
-
-              if (newItem) updateIconState(iconWrapper, newItem);
-            }),
-          );
-        }
-      }
-    });
-
-    if (item.type === 'radio') {
-      radioGroups.push([item, iconWrapper]);
-    }
-
-    if (item.type === 'submenu') {
-      const subMenuIcon = document.createElement('menu-icon');
-      subMenuIcon.appendChild(ElementFromHtml(Icons.submenu));
-      menu.appendChild(subMenuIcon);
-
-      const [child, , children] = createPanel(
-        parent,
-        menu,
-        item.submenu?.items ?? [],
-        {
-          placement: 'right',
-          order: (options?.order ?? 0) + 1,
-          openOnHover: true,
-        },
-      );
-
-      childPanels.push(child);
-      childPanels.push(...children);
-    }
-
-    return panel.appendChild(menu);
-  });
-
-  /* methods */
-  const isOpened = () => panel.getAttribute('open') === 'true';
-  const close = () => panel.setAttribute('open', 'false');
-  const open = () => {
-    const rect = anchor.getBoundingClientRect();
-
-    if (options.placement === 'bottom') {
-      panel.style.setProperty('--x', `${rect.x}px`);
-      panel.style.setProperty('--y', `${rect.y + rect.height}px`);
-    } else {
-      panel.style.setProperty('--x', `${rect.x + rect.width}px`);
-      panel.style.setProperty('--y', `${rect.y}px`);
-    }
-
-    panel.setAttribute('open', 'true');
-
-    // Children are placed below their parent item, which can cause
-    // long lists to squeeze their children at the bottom of the screen
-    // (This needs to be done *after* setAttribute)
-    panel.classList.remove('position-by-bottom');
-    if (
-      options.placement === 'right' &&
-      panel.scrollHeight > panel.clientHeight
-    ) {
-      panel.style.setProperty('--y', `${rect.y + rect.height}px`);
-      panel.classList.add('position-by-bottom');
-    }
-  };
-
-  if (options.openOnHover) {
-    let timeout: number | null = null;
-    anchor.addEventListener('mouseenter', () => {
-      if (timeout) window.clearTimeout(timeout);
-      timeout = window.setTimeout(() => {
-        if (!isOpened()) open();
-      }, 225);
-    });
-    anchor.addEventListener('mouseleave', () => {
-      if (timeout) window.clearTimeout(timeout);
-      let mouseX = 0, mouseY = 0;
-      const onMouseMove = (event: MouseEvent) => {
-        mouseX = event.clientX;
-        mouseY = event.clientY;
-      };
-      document.addEventListener('mousemove', onMouseMove);
-      timeout = window.setTimeout(() => {
-        document.removeEventListener('mousemove', onMouseMove);
-        const now = document.elementFromPoint(mouseX, mouseY);
-        if (now === panel || panel.contains(now)) {
-          const onLeave = () => {
-            document.addEventListener('mousemove', onMouseMove);
-            timeout = window.setTimeout(() => {
-              document.removeEventListener('mousemove', onMouseMove);
-              const now = document.elementFromPoint(mouseX, mouseY);
-              if (now === panel || panel.contains(now) || childPanels.some((it) => it.contains(now))) return;
-
-              if (isOpened()) close();
-              panel.removeEventListener('mouseleave', onLeave);
-            }, 225);
-          };
-          panel.addEventListener('mouseleave', onLeave);
-          return;
-        }
-
-        if (isOpened()) close();
-      }, 225);
-    });
-  }
-
-  anchor.addEventListener('click', () => {
-    if (isOpened()) close();
-    else open();
-  });
-
-  document.body.addEventListener('click', (event) => {
-    const path = event.composedPath();
-    const isInside = path.some(
-      (it) =>
-        it === panel ||
-        it === anchor ||
-        childPanels.includes(it as HTMLElement),
-    );
-
-    if (!isInside) close();
-  });
-
-  parent.appendChild(panel);
-
-  return [panel, { isOpened, close, open }, childPanels] as const;
-};

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

@@ -1,219 +0,0 @@
-import { createPanel } from './menu/panel';
-
-import logoRaw from './assets/menu.svg?inline';
-import closeRaw from './assets/close.svg?inline';
-import minimizeRaw from './assets/minimize.svg?inline';
-import maximizeRaw from './assets/maximize.svg?inline';
-import unmaximizeRaw from './assets/unmaximize.svg?inline';
-
-import type { Menu } from 'electron';
-
-import type { RendererContext } from '@/types/contexts';
-import type { InAppMenuConfig } from '@/plugins/in-app-menu/index';
-
-const isMacOS = navigator.userAgent.includes('Macintosh');
-const isNotWindowsOrMacOS =
-  !navigator.userAgent.includes('Windows') && !isMacOS;
-
-export const onRendererLoad = async ({
-  getConfig,
-  ipc: { invoke, on },
-}: RendererContext<InAppMenuConfig>) => {
-  const config = await getConfig();
-
-  const hideDOMWindowControls = config.hideDOMWindowControls;
-
-  let hideMenu = window.mainConfig.get('options.hideMenu');
-  const titleBar = document.createElement('title-bar');
-  const navBar = document.querySelector<HTMLDivElement>('#nav-bar-background');
-  let maximizeButton: HTMLButtonElement;
-  let panelClosers: (() => void)[] = [];
-  if (isMacOS) titleBar.style.setProperty('--offset-left', '70px');
-
-  const logo = document.createElement('img');
-  const close = document.createElement('img');
-  const minimize = document.createElement('img');
-  const maximize = document.createElement('img');
-  const unmaximize = document.createElement('img');
-
-  if (window.ELECTRON_RENDERER_URL) {
-    logo.src = window.ELECTRON_RENDERER_URL + '/' + logoRaw;
-    close.src = window.ELECTRON_RENDERER_URL + '/' + closeRaw;
-    minimize.src = window.ELECTRON_RENDERER_URL + '/' + minimizeRaw;
-    maximize.src = window.ELECTRON_RENDERER_URL + '/' + maximizeRaw;
-    unmaximize.src = window.ELECTRON_RENDERER_URL + '/' + unmaximizeRaw;
-  } else {
-    logo.src = logoRaw;
-    close.src = closeRaw;
-    minimize.src = minimizeRaw;
-    maximize.src = maximizeRaw;
-    unmaximize.src = unmaximizeRaw;
-  }
-
-  logo.classList.add('title-bar-icon');
-  const logoClick = () => {
-    hideMenu = !hideMenu;
-    let visibilityStyle: string;
-    if (hideMenu) {
-      visibilityStyle = 'hidden';
-    } else {
-      visibilityStyle = 'visible';
-    }
-    const menus = document.querySelectorAll<HTMLElement>('menu-button');
-    menus.forEach((menu) => {
-      menu.style.visibility = visibilityStyle;
-    });
-  };
-  logo.onclick = logoClick;
-
-  on('toggle-in-app-menu', logoClick);
-
-  if (!isMacOS) titleBar.appendChild(logo);
-  document.body.appendChild(titleBar);
-
-  titleBar.appendChild(logo);
-
-  const addWindowControls = async () => {
-    // Create window control buttons
-    const minimizeButton = document.createElement('button');
-    minimizeButton.classList.add('window-control');
-    minimizeButton.appendChild(minimize);
-    minimizeButton.onclick = () => invoke('window-minimize');
-
-    maximizeButton = document.createElement('button');
-    if (await invoke('window-is-maximized')) {
-      maximizeButton.classList.add('window-control');
-      maximizeButton.appendChild(unmaximize);
-    } else {
-      maximizeButton.classList.add('window-control');
-      maximizeButton.appendChild(maximize);
-    }
-    maximizeButton.onclick = async () => {
-      if (await invoke('window-is-maximized')) {
-        // change icon to maximize
-        maximizeButton.removeChild(maximizeButton.firstChild!);
-        maximizeButton.appendChild(maximize);
-
-        // call unmaximize
-        await invoke('window-unmaximize');
-      } else {
-        // change icon to unmaximize
-        maximizeButton.removeChild(maximizeButton.firstChild!);
-        maximizeButton.appendChild(unmaximize);
-
-        // call maximize
-        await invoke('window-maximize');
-      }
-    };
-
-    const closeButton = document.createElement('button');
-    closeButton.classList.add('window-control');
-    closeButton.appendChild(close);
-    closeButton.onclick = () => invoke('window-close');
-
-    // Create a container div for the window control buttons
-    const windowControlsContainer = document.createElement('div');
-    windowControlsContainer.classList.add('window-controls-container');
-    windowControlsContainer.appendChild(minimizeButton);
-    windowControlsContainer.appendChild(maximizeButton);
-    windowControlsContainer.appendChild(closeButton);
-
-    // Add window control buttons to the title bar
-    titleBar.appendChild(windowControlsContainer);
-  };
-
-  if (isNotWindowsOrMacOS && !hideDOMWindowControls) await addWindowControls();
-
-  if (navBar) {
-    const observer = new MutationObserver((mutations) => {
-      mutations.forEach(() => {
-        titleBar.style.setProperty(
-          '--titlebar-background-color',
-          navBar.style.backgroundColor,
-        );
-        document
-          .querySelector('html')!
-          .style.setProperty(
-            '--titlebar-background-color',
-            navBar.style.backgroundColor,
-          );
-      });
-    });
-
-    observer.observe(navBar, { attributes: true, attributeFilter: ['style'] });
-  }
-
-  const updateMenu = async () => {
-    const children = [...titleBar.children];
-    children.forEach((child) => {
-      if (child !== logo) child.remove();
-    });
-    panelClosers = [];
-
-    const menu = (await invoke('get-menu')) as Menu | null;
-    if (!menu) return;
-
-    menu.items.forEach((menuItem) => {
-      const menu = document.createElement('menu-button');
-      const [, { close: closer }] = createPanel(
-        titleBar,
-        menu,
-        menuItem.submenu?.items ?? [],
-      );
-      panelClosers.push(closer);
-
-      menu.append(menuItem.label);
-      titleBar.appendChild(menu);
-      if (hideMenu) {
-        menu.style.visibility = 'hidden';
-      }
-    });
-    if (isNotWindowsOrMacOS && !hideDOMWindowControls)
-      await addWindowControls();
-  };
-  await updateMenu();
-
-  document.title = 'Youtube Music';
-
-  on('close-all-in-app-menu-panel', () => {
-    panelClosers.forEach((closer) => closer());
-  });
-  on('refresh-in-app-menu', () => updateMenu());
-  on('window-maximize', () => {
-    if (
-      isNotWindowsOrMacOS &&
-      !hideDOMWindowControls &&
-      maximizeButton.firstChild
-    ) {
-      maximizeButton.removeChild(maximizeButton.firstChild);
-      maximizeButton.appendChild(unmaximize);
-    }
-  });
-  on('window-unmaximize', () => {
-    if (
-      isNotWindowsOrMacOS &&
-      !hideDOMWindowControls &&
-      maximizeButton.firstChild
-    ) {
-      maximizeButton.removeChild(maximizeButton.firstChild);
-      maximizeButton.appendChild(unmaximize);
-    }
-  });
-
-  if (window.mainConfig.plugins.isEnabled('picture-in-picture')) {
-    on('pip-toggle', () => {
-      updateMenu();
-    });
-  }
-};
-
-export const onPlayerApiReady = () => {
-  const htmlHeadStyle = document.querySelector('head > div > style');
-  if (htmlHeadStyle) {
-    // HACK: This is a hack to remove the scrollbar width
-    htmlHeadStyle.innerHTML = htmlHeadStyle.innerHTML.replace(
-      'html::-webkit-scrollbar {width: var(--ytmusic-scrollbar-width);',
-      'html::-webkit-scrollbar {',
-    );
-  }
-};

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

@@ -0,0 +1,57 @@
+import { createSignal } from 'solid-js';
+import { render } from 'solid-js/web';
+
+import { TitleBar } from './renderer/TitleBar';
+import { defaultInAppMenuConfig, InAppMenuConfig } from './constants';
+
+import type { RendererContext } from '@/types/contexts';
+
+const scrollStyle = `
+  html::-webkit-scrollbar {
+    background-color: red;
+  }
+`;
+
+const isMacOS = navigator.userAgent.includes('Macintosh');
+const isNotWindowsOrMacOS =
+  !navigator.userAgent.includes('Windows') && !isMacOS;
+
+
+const [config, setConfig] = createSignal<InAppMenuConfig>(defaultInAppMenuConfig);
+export const onRendererLoad = async ({
+  getConfig,
+  ipc,
+}: RendererContext<InAppMenuConfig>) => {
+  setConfig(await getConfig());
+
+  document.title = 'YouTube Music';
+  const stylesheet = new CSSStyleSheet();
+  stylesheet.replaceSync(scrollStyle);
+  document.adoptedStyleSheets = [...document.adoptedStyleSheets, stylesheet];
+
+  render(() => (
+    <TitleBar
+      ipc={ipc}
+      isMacOS={isMacOS}
+      enableController={isNotWindowsOrMacOS && !config().hideDOMWindowControls}
+      initialCollapsed={window.mainConfig.get('options.hideMenu')}
+    />
+  ), document.body);
+};
+
+export const onPlayerApiReady = () => {
+  // NOT WORKING AFTER YTM UPDATE (last checked 2024-02-04)
+  //
+  // const htmlHeadStyle = document.querySelector('head > div > style');
+  // if (htmlHeadStyle) {
+  //   // HACK: This is a hack to remove the scrollbar width
+  //   htmlHeadStyle.innerHTML = htmlHeadStyle.innerHTML.replace(
+  //     'html::-webkit-scrollbar {width: var(--ytmusic-scrollbar-width);',
+  //     'html::-webkit-scrollbar { width: 0;',
+  //   );
+  // }
+};
+
+export const onConfigChange = (newConfig: InAppMenuConfig) => {
+  setConfig(newConfig);
+};

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

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

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

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

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

@@ -0,0 +1,151 @@
+import { createSignal, JSX, Show, splitProps } from 'solid-js';
+import { mergeProps, Portal } from 'solid-js/web';
+import { css } from 'solid-styled-components';
+import { Transition } from 'solid-transition-group';
+import { autoUpdate, flip, offset, OffsetOptions, size } from '@floating-ui/dom';
+import { useFloating } from 'solid-floating-ui';
+
+import { cache } from '@/providers/decorators';
+
+const panelStyle = cache(() => css`
+  position: fixed;
+  top: var(--offset-y, 0);
+  left: var(--offset-x, 0);
+
+  max-width: var(--max-width, 100%);
+  max-height: var(--max-height, 100%);
+
+  z-index: 10000;
+  width: fit-content;
+  height: fit-content;
+
+  padding: 4px;
+  box-sizing: border-box;
+  border-radius: 8px;
+  overflow: auto;
+
+  background-color: color-mix(
+    in srgb,
+    var(--titlebar-background-color, #030303) 50%,
+    rgba(0, 0, 0, 0.1)
+  );
+  backdrop-filter: blur(8px);
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05),
+  0 2px 8px rgba(0, 0, 0, 0.2);
+
+  transform-origin: var(--origin-x, 50%) var(--origin-y, 50%);
+`);
+
+const animationStyle = cache(() => ({
+  enter: css`
+    opacity: 0;
+    transform: scale(0.9);
+  `,
+  enterActive: css`
+    transition: opacity 0.225s cubic-bezier(0.33, 1, 0.68, 1), transform 0.225s cubic-bezier(0.33, 1, 0.68, 1);
+  `,
+  exitTo: css`
+    opacity: 0;
+    transform: scale(0.9);
+  `,
+  exitActive: css`
+    transition: opacity 0.225s cubic-bezier(0.32, 0, 0.67, 0), transform 0.225s cubic-bezier(0.32, 0, 0.67, 0);
+  `,
+}));
+
+export type Placement =
+  'top'
+  | 'bottom'
+  | 'left'
+  | 'right'
+  | 'top-start'
+  | 'top-end'
+  | 'bottom-start'
+  | 'bottom-end'
+  | 'right-start'
+  | 'right-end'
+  | 'left-start'
+  | 'left-end';
+export type PanelProps = JSX.HTMLAttributes<HTMLUListElement> & {
+  open?: boolean;
+  anchor?: HTMLElement | null;
+  children: JSX.Element;
+
+  placement?: Placement;
+  offset?: OffsetOptions;
+};
+export const Panel = (props: PanelProps) => {
+  const [elements, local, leftProps] = splitProps(
+    mergeProps({ placement: 'bottom' }, props),
+    ['anchor', 'children'],
+    ['open', 'placement', 'offset'],
+  );
+
+  const [panel, setPanel] = createSignal<HTMLElement | null>(null);
+
+  const position = useFloating(() => elements.anchor, panel, {
+    whileElementsMounted: autoUpdate,
+    placement: local.placement as Placement,
+    strategy: 'fixed',
+    middleware: [
+      offset(local.offset),
+      size({
+        padding: 8,
+        apply({ elements, availableWidth, availableHeight }) {
+          elements.floating.style.setProperty('--max-width', `${Math.max(200, availableWidth)}px`);
+          elements.floating.style.setProperty('--max-height', `${Math.max(200, availableHeight)}px`);
+        }
+      }),
+      flip({ fallbackStrategy: 'initialPlacement' }),
+    ],
+  });
+
+  const originX = () => {
+    if (position.placement.includes('left')) return '100%';
+    if (position.placement.includes('right')) return '0';
+    if (position.placement.includes('top') || position.placement.includes('bottom')) {
+      if (position.placement.includes('start')) return '0';
+      if (position.placement.includes('end')) return '100%';
+    }
+
+    return '50%';
+  };
+  const originY = () => {
+    if (position.placement.includes('top')) return '100%';
+    if (position.placement.includes('bottom')) return '0';
+    if (position.placement.includes('left') || position.placement.includes('right')) {
+      if (position.placement.includes('start')) return '0';
+      if (position.placement.includes('end')) return '100%';
+    }
+    return '50%';
+  };
+
+  return (
+    <Portal>
+      <Transition
+        appear
+        enterClass={animationStyle().enter}
+        enterActiveClass={animationStyle().enterActive}
+        exitToClass={animationStyle().exitTo}
+        exitActiveClass={animationStyle().exitActive}
+      >
+        <Show when={local.open}>
+          <ul
+            {...leftProps}
+            data-ytmd-sub-panel={true}
+            ref={setPanel}
+            class={panelStyle()}
+            style={{
+              '--offset-x': `${position.x}px`,
+              '--offset-y': `${position.y}px`,
+              '--origin-x': originX(),
+              '--origin-y': originY(),
+            }}
+          >
+            {elements.children}
+          </ul>
+        </Show>
+      </Transition>
+    </Portal>
+  );
+};

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

@@ -0,0 +1,335 @@
+import { createSignal, Match, Show, Switch } from 'solid-js';
+import { JSX } from 'solid-js/jsx-runtime';
+import { css } from 'solid-styled-components';
+import { Portal } from 'solid-js/web';
+
+import { Transition } from 'solid-transition-group';
+import { useFloating } from 'solid-floating-ui';
+import { autoUpdate, offset, size } from '@floating-ui/dom';
+
+import { Panel } from './Panel';
+import { cache } from '@/providers/decorators';
+
+const itemStyle = cache(() => css`
+  position: relative;
+
+  -webkit-app-region: none;
+  min-height: 32px;
+  height: 32px;
+
+  display: grid;
+  grid-template-columns: 32px 1fr auto minmax(32px, auto);
+  justify-content: flex-start;
+  align-items: center;
+
+  border-radius: 4px;
+  cursor: pointer;
+  box-sizing: border-box;
+  user-select: none;
+  -webkit-user-drag: none;
+
+  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+
+  &:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+
+  &:active {
+    background-color: rgba(255, 255, 255, 0.2);
+  }
+
+  &[data-selected="true"] {
+    background-color: rgba(255, 255, 255, 0.2);
+  }
+
+  & * {
+    box-sizing: border-box;
+  }
+`);
+
+const itemIconStyle = cache(() => css`
+  height: 32px;
+  padding: 4px;
+  color: white;
+`);
+
+const itemLabelStyle = cache(() => css`
+  font-size: 12px;
+  color: white;
+`);
+
+const itemChipStyle = cache(() => css`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  min-width: 16px;
+  height: 16px;
+  padding: 0 4px;
+  margin-left: 8px;
+
+  border-radius: 4px;
+  background-color: rgba(255, 255, 255, 0.2);
+  color: #f1f1f1;
+  font-size: 10px;
+  font-weight: 500;
+  line-height: 1;
+`);
+
+const toolTipStyle = cache(() => css`
+  min-width: 32px;
+  width: 100%;
+  height: 100%;
+
+  padding: 4px;
+
+  max-width: calc(var(--max-width, 100%) - 8px);
+  max-height: calc(var(--max-height, 100%) - 8px);
+
+  border-radius: 4px;
+  background-color: rgba(25, 25, 25, 0.8);
+  color: #f1f1f1;
+  font-size: 10px;
+`);
+
+const popupStyle = cache(() => css`
+  position: fixed;
+  top: var(--offset-y, 0);
+  left: var(--offset-x, 0);
+
+  max-width: var(--max-width, 100%);
+  max-height: var(--max-height, 100%);
+
+  z-index: 100000000;
+  pointer-events: none;
+
+`);
+
+const animationStyle = cache(() => ({
+  enter: css`
+    opacity: 0;
+    transform: scale(0.9);
+  `,
+  enterActive: css`
+    transition: opacity 0.225s cubic-bezier(0.33, 1, 0.68, 1), transform 0.225s cubic-bezier(0.33, 1, 0.68, 1);
+  `,
+  exitTo: css`
+    opacity: 0;
+    transform: scale(0.9);
+  `,
+  exitActive: css`
+    transition: opacity 0.225s cubic-bezier(0.32, 0, 0.67, 0), transform 0.225s cubic-bezier(0.32, 0, 0.67, 0);
+  `,
+}));
+
+const getParents = (element: Element | null): (HTMLElement | null)[] => {
+  const parents: (HTMLElement | null)[] = [];
+  let now = element;
+
+  while (now) {
+    parents.push(now as HTMLElement | null);
+    now = now.parentElement;
+  }
+
+  return parents;
+};
+
+type BasePanelItemProps = {
+  name: string;
+  label?: string;
+  chip?: string;
+  toolTip?: string;
+  commandId?: number;
+};
+type NormalPanelItemProps = BasePanelItemProps & {
+  type: 'normal';
+  onClick?: () => void;
+};
+type SubmenuItemProps = BasePanelItemProps & {
+  type: 'submenu';
+  level: number[];
+  children: JSX.Element;
+};
+type RadioPanelItemProps = BasePanelItemProps & {
+  type: 'radio';
+  checked: boolean;
+  onChange?: (checked: boolean) => void;
+};
+type CheckboxPanelItemProps = BasePanelItemProps & {
+  type: 'checkbox';
+  checked: boolean;
+  onChange?: (checked: boolean) => void;
+};
+export type PanelItemProps = NormalPanelItemProps | SubmenuItemProps | RadioPanelItemProps | CheckboxPanelItemProps;
+export const PanelItem = (props: PanelItemProps) => {
+  const [open, setOpen] = createSignal(false);
+  const [toolTipOpen, setToolTipOpen] = createSignal(false);
+  const [toolTip, setToolTip] = createSignal<HTMLElement | null>(null);
+  const [anchor, setAnchor] = createSignal<HTMLElement | null>(null);
+  const [child, setChild] = createSignal<HTMLElement | null>(null);
+
+  const position = useFloating(anchor, toolTip, {
+    whileElementsMounted: autoUpdate,
+    placement: 'bottom-start',
+    strategy: 'fixed',
+    middleware: [
+      offset({ mainAxis: 8 }),
+      size({
+        apply({ rects, elements }) {
+          elements.floating.style.setProperty('--max-width', `${rects.reference.width}px`);
+        }
+      }),
+    ],
+  });
+
+  const handleHover = (event: MouseEvent) => {
+    setToolTipOpen(true);
+    event.target?.addEventListener('mouseleave', () => {
+      setToolTipOpen(false);
+    }, { once: true });
+
+    if (props.type === 'submenu') {
+      const timer = setTimeout(() => {
+        setOpen(true);
+
+        let mouseX = event.clientX;
+        let mouseY = event.clientY;
+        const onMouseMove = (event: MouseEvent) => {
+          mouseX = event.clientX;
+          mouseY = event.clientY;
+        };
+        document.addEventListener('mousemove', onMouseMove);
+
+        event.target?.addEventListener('mouseleave', () => {
+          setTimeout(() => {
+            document.removeEventListener('mousemove', onMouseMove);
+            const parents = getParents(document.elementFromPoint(mouseX, mouseY));
+
+            if (!parents.includes(child())) {
+              setOpen(false);
+            } else {
+              const onOtherHover = (event: MouseEvent) => {
+                const parents = getParents(event.target as HTMLElement);
+                const closestLevel = parents.find((it) => it?.dataset?.level)?.dataset.level ?? '';
+                const path = event.composedPath();
+
+                const isOtherItem = path.some((it) => it instanceof HTMLElement && it.classList.contains(itemStyle()));
+                const isChild = closestLevel.startsWith(props.level.join('/'));
+
+                if (isOtherItem && !isChild) {
+                  setOpen(false);
+                  document.removeEventListener('mousemove', onOtherHover);
+                }
+              };
+              document.addEventListener('mousemove', onOtherHover);
+            }
+          }, 225);
+        }, { once: true });
+      }, 225);
+
+      event.target?.addEventListener('mouseleave', () => {
+        clearTimeout(timer);
+      }, { once: true });
+    }
+  };
+
+  const handleClick = async () => {
+    await window.ipcRenderer.invoke('ytmd:menu-event', props.commandId);
+    if (props.type === 'radio') {
+      props.onChange?.(!props.checked);
+    } else if (props.type === 'checkbox') {
+      props.onChange?.(!props.checked);
+    } else if (props.type === 'normal') {
+      props.onClick?.();
+    }
+  };
+
+
+  return (
+    <li
+      ref={setAnchor}
+      class={itemStyle()}
+      onMouseEnter={handleHover}
+      onClick={handleClick}
+      data-selected={open()}
+    >
+      <Switch fallback={<div class={itemIconStyle()}/>}>
+        <Match when={props.type === 'checkbox' && props.checked}>
+          <svg class={itemIconStyle()} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5"
+               stroke="currentColor" fill="none"
+               stroke-linecap="round" stroke-linejoin="round">
+            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+            <path d="M5 12l5 5l10 -10"/>
+          </svg>
+        </Match>
+        <Match when={props.type === 'radio' && props.checked}>
+          <svg class={itemIconStyle()} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
+               style={{ padding: '6px' }}>
+            <path fill="currentColor"
+                  d="M10,5 C7.2,5 5,7.2 5,10 C5,12.8 7.2,15 10,15 C12.8,15 15,12.8 15,10 C15,7.2 12.8,5 10,5 L10,5 Z M10,0 C4.5,0 0,4.5 0,10 C0,15.5 4.5,20 10,20 C15.5,20 20,15.5 20,10 C20,4.5 15.5,0 10,0 L10,0 Z M10,18 C5.6,18 2,14.4 2,10 C2,5.6 5.6,2 10,2 C14.4,2 18,5.6 18,10 C18,14.4 14.4,18 10,18 L10,18 Z"/>
+          </svg>
+        </Match>
+        <Match when={props.type === 'radio' && !props.checked}>
+          <svg class={itemIconStyle()} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
+               style={{ padding: '6px' }}>
+            <path fill="currentColor"
+                  d="M10,0 C4.5,0 0,4.5 0,10 C0,15.5 4.5,20 10,20 C15.5,20 20,15.5 20,10 C20,4.5 15.5,0 10,0 L10,0 Z M10,18 C5.6,18 2,14.4 2,10 C2,5.6 5.6,2 10,2 C14.4,2 18,5.6 18,10 C18,14.4 14.4,18 10,18 L10,18 Z"/>
+          </svg>
+        </Match>
+      </Switch>
+      <span class={itemLabelStyle()}>
+        {props.name}
+      </span>
+      <Show when={props.chip} fallback={<div/>}>
+        <span class={itemChipStyle()}>
+          {props.chip}
+        </span>
+      </Show>
+      <Show when={props.type === 'submenu'}>
+        <svg class={itemIconStyle()} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5"
+             stroke="currentColor"
+             fill="none"
+             stroke-linecap="round" stroke-linejoin="round">
+          <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+          <polyline points="9 6 15 12 9 18"/>
+        </svg>
+        <Panel
+          ref={setChild}
+          open={open()}
+          anchor={anchor()}
+          placement={'right-start'}
+          data-level={props.type === 'submenu' && props.level.join('/')}
+          offset={{ mainAxis: 8 }}
+        >
+          {props.type === 'submenu' && props.children}
+        </Panel>
+      </Show>
+      <Show when={props.toolTip}>
+        <Portal>
+          <div
+            ref={setToolTip}
+            class={popupStyle()}
+            style={{
+              '--offset-x': `${position.x}px`,
+              '--offset-y': `${position.y}px`,
+            }}
+          >
+            <Transition
+              appear
+              enterClass={animationStyle().enter}
+              enterActiveClass={animationStyle().enterActive}
+              exitToClass={animationStyle().exitTo}
+              exitActiveClass={animationStyle().exitActive}
+            >
+              <Show when={toolTipOpen()}>
+                <div class={toolTipStyle()}>
+                  {props.toolTip}
+                </div>
+              </Show>
+            </Transition>
+          </div>
+        </Portal>
+      </Show>
+    </li>
+  );
+};

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

@@ -0,0 +1,357 @@
+import { Menu, MenuItem } from 'electron';
+import { createEffect, createResource, createSignal, Index, Match, onMount, Show, Switch } from 'solid-js';
+import { css } from 'solid-styled-components';
+import { TransitionGroup } from 'solid-transition-group';
+
+import { MenuButton } from './MenuButton';
+import { Panel } from './Panel';
+import { PanelItem } from './PanelItem';
+import { IconButton } from './IconButton';
+import { WindowController } from './WindowController';
+
+import { cache } from '@/providers/decorators';
+
+import type { RendererContext } from '@/types/contexts';
+import type { InAppMenuConfig } from '../constants';
+
+const titleStyle = cache(() => css`
+  -webkit-app-region: drag;
+  box-sizing: border-box;
+
+  position: fixed;
+  top: 0;
+  z-index: 10000000;
+
+  width: 100%;
+  height: var(--menu-bar-height, 32px);
+
+  display: flex;
+  flex-flow: row;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 4px;
+
+  color: #f1f1f1;
+  font-size: 12px;
+  padding: 4px 4px 4px var(--offset-left, 4px);
+  background-color: var(--titlebar-background-color, #030303);
+  user-select: none;
+
+  transition: opacity 200ms ease 0s,
+  background-color 300ms cubic-bezier(0.2, 0, 0.6, 1) 0s;
+
+  &[data-macos="true"] {
+    padding: 4px 4px 4px 74px;
+  }
+`);
+
+const separatorStyle = cache(() => css`
+  min-height: 1px;
+  height: 1px;
+  margin: 4px 0;
+
+  background-color: rgba(255, 255, 255, 0.2);
+`);
+
+const animationStyle = cache(() => ({
+  enter: css`
+    opacity: 0;
+    transform: translateX(-50%) scale(0.8);
+  `,
+  enterActive: css`
+    transition: opacity 0.1s cubic-bezier(0.33, 1, 0.68, 1), transform 0.1s cubic-bezier(0.33, 1, 0.68, 1);
+  `,
+  exitTo: css`
+    opacity: 0;
+    transform: translateX(-50%) scale(0.8);
+  `,
+  exitActive: css`
+    transition: opacity 0.1s cubic-bezier(0.32, 0, 0.67, 0), transform 0.1s cubic-bezier(0.32, 0, 0.67, 0);
+  `,
+  move: css`
+    transition: all 0.1s cubic-bezier(0.65, 0, 0.35, 1);
+  `,
+  fakeTarget: css`
+    position: absolute;
+    opacity: 0;
+  `,
+  fake: css`
+    transition: all 0.00000000001s;
+  `,
+}));
+
+export type PanelRendererProps = {
+  items: Electron.Menu['items'];
+  level?: number[];
+  onClick?: (commandId: number, radioGroup?: MenuItem[]) => void;
+}
+const PanelRenderer = (props: PanelRendererProps) => {
+  const radioGroup = () => props.items.filter((it) => it.type === 'radio');
+
+  return (
+    <Index each={props.items}>
+      {(subItem) => (
+        <Show when={subItem().visible}>
+          <Switch>
+            <Match when={subItem().type === 'normal'}>
+              <PanelItem
+                type={'normal'}
+                name={subItem().label}
+                chip={subItem().sublabel}
+                toolTip={subItem().toolTip}
+                commandId={subItem().commandId}
+                onClick={() => props.onClick?.(subItem().commandId)}
+              />
+            </Match>
+            <Match when={subItem().type === 'submenu'}>
+              <PanelItem
+                type={'submenu'}
+                name={subItem().label}
+                chip={subItem().sublabel}
+                toolTip={subItem().toolTip}
+                level={[...props.level ?? [], subItem().commandId]}
+                commandId={subItem().commandId}
+              >
+                <PanelRenderer
+                  items={subItem().submenu?.items ?? []}
+                  level={[...props.level ?? [], subItem().commandId]}
+                  onClick={props.onClick}
+                />
+              </PanelItem>
+            </Match>
+            <Match when={subItem().type === 'checkbox'}>
+              <PanelItem
+                type={'checkbox'}
+                name={subItem().label}
+                checked={subItem().checked}
+                chip={subItem().sublabel}
+                toolTip={subItem().toolTip}
+                commandId={subItem().commandId}
+                onChange={() => props.onClick?.(subItem().commandId)}
+              />
+            </Match>
+            <Match when={subItem().type === 'radio'}>
+              <PanelItem
+                type={'radio'}
+                name={subItem().label}
+                checked={subItem().checked}
+                chip={subItem().sublabel}
+                toolTip={subItem().toolTip}
+                commandId={subItem().commandId}
+                onChange={() => props.onClick?.(subItem().commandId, radioGroup())}
+              />
+            </Match>
+            <Match when={subItem().type === 'separator'}>
+              <hr class={separatorStyle()}/>
+            </Match>
+          </Switch>
+        </Show>
+      )}
+    </Index>
+  );
+};
+
+export type TitleBarProps = {
+  ipc: RendererContext<InAppMenuConfig>['ipc'];
+  isMacOS?: boolean;
+  enableController?: boolean;
+  initialCollapsed?: boolean;
+};
+export const TitleBar = (props: TitleBarProps) => {
+  const [collapsed, setCollapsed] = createSignal(props.initialCollapsed);
+  const [ignoreTransition, setIgnoreTransition] = createSignal(false);
+  const [openTarget, setOpenTarget] = createSignal<HTMLElement | null>(null);
+  const [menu, setMenu] = createSignal<Menu | null>(null);
+
+  const [data, { refetch }] = createResource(async () => await props.ipc.invoke('get-menu') as Promise<Menu | null>);
+  const [isMaximized, { refetch: refetchMaximize }] = createResource(async () => await props.ipc.invoke('window-is-maximized') as Promise<boolean>);
+
+  const handleToggleMaximize = async () => {
+    if (isMaximized()) {
+      await props.ipc.invoke('window-unmaximize');
+    } else {
+      await props.ipc.invoke('window-maximize');
+    }
+    await refetchMaximize();
+  };
+  const handleMinimize = async () => {
+    await props.ipc.invoke('window-minimize');
+  };
+  const handleClose = async () => {
+    await props.ipc.invoke('window-close');
+  };
+
+  const refreshMenuItem = async (originalMenu: Menu, commandId: number) => {
+    const menuItem = (await window.ipcRenderer.invoke(
+      'get-menu-by-id',
+      commandId,
+    )) as MenuItem | null;
+
+    const newMenu = structuredClone(originalMenu);
+    const stack = [...newMenu?.items ?? []];
+    let now: MenuItem | undefined = stack.pop();
+    while (now) {
+      const index = now?.submenu?.items?.findIndex((it) => it.commandId === commandId) ?? -1;
+
+      if (index >= 0) {
+        if (menuItem) now?.submenu?.items?.splice(index, 1, menuItem);
+        else now?.submenu?.items?.splice(index, 1);
+      }
+      if (now?.submenu) {
+        stack.push(...now.submenu.items);
+      }
+
+      now = stack.pop();
+    }
+
+    return newMenu;
+  };
+
+  const handleItemClick = async (commandId: number, radioGroup?: MenuItem[]) => {
+    const menuData = menu();
+    if (!menuData) return;
+
+    if (Array.isArray(radioGroup)) {
+      let newMenu = menuData;
+      for await (const item of radioGroup) {
+        newMenu = await refreshMenuItem(newMenu, item.commandId);
+      }
+
+      setMenu(newMenu);
+      return;
+    }
+
+    setMenu(await refreshMenuItem(menuData, commandId));
+  };
+
+  onMount(() => {
+    props.ipc.on('close-all-in-app-menu-panel', async () => {
+      setIgnoreTransition(true);
+      setMenu(null);
+      await refetch();
+      setMenu(data() ?? null);
+      setIgnoreTransition(false);
+    });
+    props.ipc.on('refresh-in-app-menu', async () => {
+      setIgnoreTransition(true);
+      await refetch();
+      setMenu(data() ?? null);
+      setIgnoreTransition(false);
+    });
+    props.ipc.on('toggle-in-app-menu', () => {
+      setCollapsed(!collapsed());
+    });
+
+    props.ipc.on('window-maximize', refetchMaximize);
+    props.ipc.on('window-unmaximize', refetchMaximize);
+
+    // close menu when the outside of the panel or sub-panel is clicked
+    document.body.addEventListener('click', (e) => {
+      if (
+        e.target instanceof HTMLElement &&
+        !(
+          e.target.closest('nav[data-ytmd-main-panel]') ||
+          e.target.closest('ul[data-ytmd-sub-panel]')
+        )
+      ) {
+        setOpenTarget(null);
+      }
+    });
+  });
+
+  createEffect(() => {
+    if (!menu() && data()) {
+      setMenu(data() ?? null);
+    }
+  });
+
+  return (
+    <nav data-ytmd-main-panel={true} class={titleStyle()} data-macos={props.isMacOS}>
+      <IconButton
+        onClick={() => setCollapsed(!collapsed())}
+        style={{
+          'border-top-left-radius': '4px',
+        }}
+      >
+        <svg width={16} height={16} viewBox={'0 0 24 24'}>
+          <path
+            d="M3 17h12a1 1 0 0 1 .117 1.993L15 19H3a1 1 0 0 1-.117-1.993L3 17h12H3Zm0-6h18a1 1 0 0 1 .117 1.993L21 13H3a1 1 0 0 1-.117-1.993L3 11h18H3Zm0-6h15a1 1 0 0 1 .117 1.993L18 7H3a1 1 0 0 1-.117-1.993L3 5h15H3Z"
+            fill="currentColor"
+          />
+        </svg>
+      </IconButton>
+      <TransitionGroup
+        enterClass={ignoreTransition() ? animationStyle().fakeTarget : animationStyle().enter}
+        enterActiveClass={ignoreTransition() ? animationStyle().fake : animationStyle().enterActive}
+        exitToClass={ignoreTransition() ? animationStyle().fakeTarget : animationStyle().exitTo}
+        exitActiveClass={ignoreTransition() ? animationStyle().fake : animationStyle().exitActive}
+        onBeforeEnter={(element) => {
+          if (ignoreTransition()) return;
+          const index = Number(element.getAttribute('data-index') ?? 0);
+
+          (element as HTMLElement).style.setProperty('transition-delay', `${(index * 0.025)}s`);
+        }}
+        onAfterEnter={(element) => {
+          (element as HTMLElement).style.removeProperty('transition-delay');
+        }}
+        onBeforeExit={(element) => {
+          if (ignoreTransition()) return;
+          const index = Number(element.getAttribute('data-index') ?? 0);
+          const length = Number(element.getAttribute('data-length') ?? 1);
+
+          (element as HTMLElement).style.setProperty('transition-delay', `${(length * 0.025) - (index * 0.025)}s`);
+        }}
+      >
+        <Show when={!collapsed()}>
+          <Index each={menu()?.items}>
+            {(item, index) => {
+              const [anchor, setAnchor] = createSignal<HTMLElement | null>(null);
+
+              const handleClick = () => {
+                if (openTarget() === anchor()) {
+                  setOpenTarget(null);
+                } else {
+                  setOpenTarget(anchor());
+                }
+              };
+
+              return (
+                <>
+                  <MenuButton
+                    ref={setAnchor}
+                    text={item().label}
+                    onClick={handleClick}
+                    selected={openTarget() === anchor()}
+                    data-index={index}
+                    data-length={data()?.items.length}
+                  />
+                  <Panel
+                    open={openTarget() === anchor()}
+                    anchor={anchor()}
+                    placement={'bottom-start'}
+                    offset={{ mainAxis: 8 }}
+                  >
+                    <PanelRenderer
+                      items={item().submenu?.items ?? []}
+                      onClick={handleItemClick}
+                    />
+                  </Panel>
+                </>
+              );
+            }}
+          </Index>
+        </Show>
+      </TransitionGroup>
+      <Show when={props.enableController}>
+        <div style={{ flex: 1 }}/>
+        <WindowController
+          isMaximize={isMaximized()}
+          onToggleMaximize={handleToggleMaximize}
+          onMinimize={handleMinimize}
+          onClose={handleClose}
+        />
+      </Show>
+    </nav>
+  );
+};
+

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

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

src/plugins/in-app-menu/titlebar.css

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

src/plugins/last-fm/index.ts

@@ -1,80 +0,0 @@
-import { createPlugin } from '@/utils';
-import registerCallback from '@/providers/song-info';
-import { addScrobble, getAndSetSessionKey, setNowPlaying } from './main';
-import { t } from '@/i18n';
-
-export interface LastFmPluginConfig {
-  enabled: boolean;
-  /**
-   * Token used for authentication
-   */
-  token?: string;
-  /**
-   * Session key used for scrabbling
-   */
-  session_key?: string;
-  /**
-   * Root of the Last.fm API
-   *
-   * @default 'http://ws.audioscrobbler.com/2.0/'
-   */
-  api_root: string;
-  /**
-   * Last.fm api key registered by @semvis123
-   *
-   * @default '04d76faaac8726e60988e14c105d421a'
-   */
-  api_key: string;
-  /**
-   * Last.fm api secret registered by @semvis123
-   *
-   * @default 'a5d2a36fdf64819290f6982481eaffa2'
-   */
-  secret: string;
-}
-
-export default createPlugin({
-  name: () => t('plugins.last-fm.name'),
-  description: () => t('plugins.last-fm.description'),
-  restartNeeded: true,
-  config: {
-    enabled: false,
-    api_root: 'http://ws.audioscrobbler.com/2.0/',
-    api_key: '04d76faaac8726e60988e14c105d421a',
-    secret: 'a5d2a36fdf64819290f6982481eaffa2',
-  } as LastFmPluginConfig,
-  async backend({ getConfig, setConfig }) {
-    let config = await getConfig();
-    // This will store the timeout that will trigger addScrobble
-    let scrobbleTimer: number | undefined;
-
-    if (!config.api_root) {
-      config.enabled = true;
-      setConfig(config);
-    }
-
-    if (!config.session_key) {
-      // Not authenticated
-      config = await getAndSetSessionKey(config, setConfig);
-    }
-
-    registerCallback((songInfo) => {
-      // Set remove the old scrobble timer
-      clearTimeout(scrobbleTimer);
-      if (!songInfo.isPaused) {
-        setNowPlaying(songInfo, config, setConfig);
-        // Scrobble when the song is halfway through, or has passed the 4-minute mark
-        const scrobbleTime = Math.min(
-          Math.ceil(songInfo.songDuration / 2),
-          4 * 60,
-        );
-        if (scrobbleTime > (songInfo.elapsedSeconds ?? 0)) {
-          // Scrobble still needs to happen
-          const timeToWait =
-            (scrobbleTime - (songInfo.elapsedSeconds ?? 0)) * 1000;
-          scrobbleTimer = setTimeout(addScrobble, timeToWait, songInfo, config);
-        }
-      }
-    });
-  },
-});

src/plugins/last-fm/main.ts

@@ -1,207 +0,0 @@
-import crypto from 'node:crypto';
-
-import { net, shell } from 'electron';
-
-import type { LastFmPluginConfig } from './index';
-import type { SongInfo } from '@/providers/song-info';
-
-interface LastFmData {
-  method: string;
-  timestamp?: number;
-}
-
-interface LastFmSongData {
-  track?: string;
-  duration?: number;
-  artist?: string;
-  album?: string;
-  api_key: string;
-  sk?: string;
-  format: string;
-  method: string;
-  timestamp?: number;
-  api_sig?: string;
-}
-
-const createFormData = (parameters: LastFmSongData) => {
-  // Creates the body for in the post request
-  const formData = new URLSearchParams();
-  for (const key in parameters) {
-    formData.append(key, String(parameters[key as keyof LastFmSongData]));
-  }
-
-  return formData;
-};
-
-const createQueryString = (
-  parameters: Record<string, unknown>,
-  apiSignature: string,
-) => {
-  // Creates a querystring
-  const queryData = [];
-  parameters.api_sig = apiSignature;
-  for (const key in parameters) {
-    queryData.push(
-      `${encodeURIComponent(key)}=${encodeURIComponent(
-        String(parameters[key]),
-      )}`,
-    );
-  }
-
-  return '?' + queryData.join('&');
-};
-
-const createApiSig = (parameters: LastFmSongData, secret: string) => {
-  // This function creates the api signature, see: https://www.last.fm/api/authspec
-  const keys = Object.keys(parameters);
-
-  keys.sort();
-  let sig = '';
-  for (const key of keys) {
-    if (key === 'format') {
-      continue;
-    }
-
-    sig += `${key}${parameters[key as keyof LastFmSongData]}`;
-  }
-
-  sig += secret;
-  sig = crypto.createHash('md5').update(sig, 'utf-8').digest('hex');
-  return sig;
-};
-
-const createToken = async ({
-  api_key: apiKey,
-  api_root: apiRoot,
-  secret,
-}: LastFmPluginConfig) => {
-  // Creates and stores the auth token
-  const data = {
-    method: 'auth.gettoken',
-    api_key: apiKey,
-    format: 'json',
-  };
-  const apiSigature = createApiSig(data, secret);
-  const response = await net.fetch(
-    `${apiRoot}${createQueryString(data, apiSigature)}`,
-  );
-  const json = (await response.json()) as Record<string, string>;
-  return json?.token;
-};
-
-const authenticate = async (config: LastFmPluginConfig) => {
-  // Asks the user for authentication
-  await shell.openExternal(
-    `https://www.last.fm/api/auth/?api_key=${config.api_key}&token=${config.token}`,
-  );
-};
-
-type SetConfType = (
-  conf: Partial<Omit<LastFmPluginConfig, 'enabled'>>,
-) => void | Promise<void>;
-
-export const getAndSetSessionKey = async (
-  config: LastFmPluginConfig,
-  setConfig: SetConfType,
-) => {
-  // Get and store the session key
-  const data = {
-    api_key: config.api_key,
-    format: 'json',
-    method: 'auth.getsession',
-    token: config.token,
-  };
-  const apiSignature = createApiSig(data, config.secret);
-  const response = await net.fetch(
-    `${config.api_root}${createQueryString(data, apiSignature)}`,
-  );
-  const json = (await response.json()) as {
-    error?: string;
-    session?: {
-      key: string;
-    };
-  };
-  if (json.error) {
-    config.token = await createToken(config);
-    await authenticate(config);
-    setConfig(config);
-  }
-  if (json.session) {
-    config.session_key = json.session.key;
-  }
-  setConfig(config);
-  return config;
-};
-
-const postSongDataToAPI = async (
-  songInfo: SongInfo,
-  config: LastFmPluginConfig,
-  data: LastFmData,
-  setConfig: SetConfType,
-) => {
-  // This sends a post request to the api, and adds the common data
-  if (!config.session_key) {
-    await getAndSetSessionKey(config, setConfig);
-  }
-
-  const postData: LastFmSongData = {
-    track: songInfo.title,
-    duration: songInfo.songDuration,
-    artist: songInfo.artist,
-    ...(songInfo.album ? { album: songInfo.album } : undefined), // Will be undefined if current song is a video
-    api_key: config.api_key,
-    sk: config.session_key,
-    format: 'json',
-    ...data,
-  };
-
-  postData.api_sig = createApiSig(postData, config.secret);
-  const formData = createFormData(postData);
-  net
-    .fetch('https://ws.audioscrobbler.com/2.0/', {
-      method: 'POST',
-      body: formData,
-    })
-    .catch(
-      async (error: {
-        response?: {
-          data?: {
-            error: number;
-          };
-        };
-      }) => {
-        if (error?.response?.data?.error === 9) {
-          // Session key is invalid, so remove it from the config and reauthenticate
-          config.session_key = undefined;
-          config.token = await createToken(config);
-          await authenticate(config);
-          setConfig(config);
-        }
-      },
-    );
-};
-
-export const addScrobble = (
-  songInfo: SongInfo,
-  config: LastFmPluginConfig,
-  setConfig: SetConfType,
-) => {
-  // This adds one scrobbled song to last.fm
-  const data = {
-    method: 'track.scrobble',
-    timestamp: Math.trunc((Date.now() - (songInfo.elapsedSeconds ?? 0)) / 1000),
-  };
-  postSongDataToAPI(songInfo, config, data, setConfig);
-};
-
-export const setNowPlaying = (
-  songInfo: SongInfo,
-  config: LastFmPluginConfig,
-  setConfig: SetConfType,
-) => {
-  // This sets the now playing status in last.fm
-  const data = {
-    method: 'track.updateNowPlaying',
-  };
-  postSongDataToAPI(songInfo, config, data, setConfig);
-};

src/plugins/lyrics-genius/main.ts

@@ -38,7 +38,7 @@ export const fetchFromGenius = async (metadata: SongInfo) => {
   const songArtist = `${cleanupName(metadata.artist)}`;
   let lyrics: string | null;
 
-  /* Uses Regex to test the title and artist first for said characters if romanization is enabled. Otherwise normal
+  /* Uses Regex to test the title and artist first for said characters if romanization is enabled. Otherwise, normal
   Genius Lyrics behavior is observed.
   */
   let hasAsianChars = false;

src/plugins/lyrics-genius/renderer.ts

@@ -32,7 +32,7 @@ export const onRendererLoad = ({
 
   let unregister: (() => void) | null = null;
 
-  on('update-song-info', (extractedSongInfo: SongInfo) => {
+  on('ytmd:update-song-info', (extractedSongInfo: SongInfo) => {
     unregister?.();
 
     setTimeout(async () => {

src/plugins/music-together/connection.ts

@@ -74,7 +74,7 @@ export class Connection {
     return conn;
   }
 
-  async disconnect() {
+  disconnect() {
     if (this._mode === 'disconnected') throw new Error('Already disconnected');
 
     this._mode = 'disconnected';

src/plugins/music-together/index.ts

@@ -6,9 +6,9 @@ import { t } from '@/i18n';
 import { createPlugin } from '@/utils';
 import promptOptions from '@/providers/prompt-options';
 
-import { AppAPI, getDefaultProfile, Permission, Profile, VideoData } from './types';
+import { getDefaultProfile, type Permission, type Profile, type VideoData } from './types';
 import { Queue } from './queue';
-import { Connection, ConnectionEventUnion } from './connection';
+import { Connection, type ConnectionEventUnion } from './connection';
 import { createHostPopup } from './ui/host';
 import { createGuestPopup } from './ui/guest';
 import { createSettingPopup } from './ui/setting';
@@ -19,6 +19,7 @@ import style from './style.css?inline';
 import type { YoutubePlayer } from '@/types/youtube-player';
 import type { RendererContext } from '@/types/contexts';
 import type { VideoDataChanged } from '@/types/video-data-changed';
+import type { AppElement } from '@/types/queue';
 
 type RawAccountData = {
   accountName: {
@@ -41,7 +42,7 @@ export default createPlugin<
   {
     connection?: Connection;
     ipc?: RendererContext<never>['ipc'];
-    api: HTMLElement & AppAPI | null;
+    api: AppElement | null;
     queue?: Queue;
     playerApi?: YoutubePlayer;
     showPrompt: (title: string, label: string) => Promise<string>;
@@ -557,7 +558,7 @@ export default createPlugin<
     start({ ipc }) {
       this.ipc = ipc;
       this.showPrompt = async (title: string, label: string) => ipc.invoke('music-together:prompt', title, label) as Promise<string>;
-      this.api = document.querySelector<HTMLElement & AppAPI>('ytmusic-app');
+      this.api = document.querySelector<AppElement>('ytmusic-app');
 
       /* setup */
       document.querySelector('#right-content > ytmusic-settings-button')?.insertAdjacentHTML('beforebegin', settingHTML);

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

@@ -1,11 +1,12 @@
 import { getMusicQueueRenderer } from './song';
 import { mapQueueItem } from './utils';
 
-import { ConnectionEventUnion } from '@/plugins/music-together/connection';
 import { t } from '@/i18n';
 
-import type { Profile, QueueAPI, VideoData } from '../types';
+import type { ConnectionEventUnion } from '@/plugins/music-together/connection';
+import type { Profile, VideoData } from '../types';
 import type { QueueItem } from '@/types/datahost-get-state';
+import type { QueueElement } from '@/types/queue';
 
 const getHeaderPayload = (() => {
   let payload: {
@@ -103,26 +104,29 @@ const getHeaderPayload = (() => {
 export type QueueOptions = {
   videoList?: VideoData[];
   owner?: Profile;
-  queue?: HTMLElement & QueueAPI;
+  queue?: QueueElement;
   getProfile: (id: string) => Profile | undefined;
 }
 export type QueueEventListener = (event: ConnectionEventUnion) => void;
 
 export class Queue {
-  private queue: (HTMLElement & QueueAPI);
+  private readonly queue: QueueElement;
+
   private originalDispatch?: (obj: {
     type: string;
     payload?: { items?: QueueItem[] | undefined; };
   }) => void;
+
   private internalDispatch = false;
   private ignoreFlag = false;
   private listeners: QueueEventListener[] = [];
-  private owner: Profile | null = null;
+
-  private getProfile: (id: string) => Profile | undefined;
+  private owner: Profile | null;
+  private readonly getProfile: (id: string) => Profile | undefined;
 
   constructor(options: QueueOptions) {
     this.getProfile = options.getProfile;
-    this.queue = options.queue ?? document.querySelector<HTMLElement & QueueAPI>('#queue')!;
+    this.queue = options.queue ?? (document.querySelector<QueueElement>('#queue')!);
     this.owner = options.owner ?? null;
     this._videoList = options.videoList ?? [];
   }
@@ -135,11 +139,11 @@ export class Queue {
   }
 
   get selectedIndex() {
-    return mapQueueItem((it) => it?.selected, this.queue.store.getState().queue.items).findIndex(Boolean) ?? 0;
+    return mapQueueItem((it) => it?.selected, this.queue.queue.store.store.getState().queue.items).findIndex(Boolean) ?? 0;
   }
 
   get rawItems() {
-    return this.queue?.store.getState().queue.items;
+    return this.queue?.queue.store.store.getState().queue.items;
   }
 
   get flatItems() {
@@ -169,8 +173,8 @@ export class Queue {
     this.queue?.dispatch({
       type: 'ADD_ITEMS',
       payload: {
-        nextQueueItemId: this.queue.store.getState().queue.nextQueueItemId,
+        nextQueueItemId: this.queue.queue.store.store.getState().queue.nextQueueItemId,
-        index: index ?? this.queue.store.getState().queue.items.length ?? 0,
+        index: index ?? this.queue.queue.store.store.getState().queue.items.length ?? 0,
         items,
         shuffleEnabled: false,
         shouldAssignIds: true
@@ -249,7 +253,7 @@ export class Queue {
       return;
     }
 
-    if (this.originalDispatch) this.queue.store.dispatch = this.originalDispatch;
+    if (this.originalDispatch) this.queue.queue.store.store.dispatch = this.originalDispatch;
   }
 
   injection() {
@@ -258,8 +262,8 @@ export class Queue {
       return;
     }
 
-    this.originalDispatch = this.queue.store.dispatch;
+    this.originalDispatch = this.queue.queue.store.store.dispatch;
-    this.queue.store.dispatch = (event) => {
+    this.queue.queue.store.store.dispatch = (event) => {
       if (!this.queue || !this.owner) {
         console.error('Queue is not initialized!');
         return;
@@ -361,10 +365,13 @@ export class Queue {
 
       const fakeContext = {
         ...this.queue,
+        queue: {
+          ...this.queue.queue,
           store: {
-          ...this.queue.store,
+            ...this.queue.queue.store,
-          dispatch: this.originalDispatch
+            dispatch: this.originalDispatch,
           }
+        },
       };
       this.originalDispatch?.call(fakeContext, event);
     };
@@ -400,7 +407,7 @@ export class Queue {
       type: 'UPDATE_ITEMS',
       payload: {
         items: items,
-        nextQueueItemId: this.queue.store.getState().queue.nextQueueItemId,
+        nextQueueItemId: this.queue.queue.store.store.getState().queue.nextQueueItemId,
         shouldAssignIds: true,
         currentIndex: -1
       }

src/plugins/music-together/types.ts

@@ -1,37 +1,3 @@
-import { YoutubePlayer } from '@/types/youtube-player';
-import { GetState, QueueItem } from '@/types/datahost-get-state';
-
-type StoreState = GetState;
-type Store = {
-  dispatch: (obj: {
-    type: string;
-    payload?: {
-      items?: QueueItem[];
-    };
-  }) => void;
-
-  getState: () => StoreState;
-  replaceReducer: (param1: unknown) => unknown;
-  subscribe: (callback: () => void) => unknown;
-}
-export type QueueAPI = {
-  dispatch(obj: {
-    type: string;
-    payload?: unknown;
-  }): void;
-  getItems(): unknown[];
-  store: Store;
-  continuation?: string;
-  autoPlaying?: boolean;
-};
-export type AppAPI = {
-  queue_: QueueAPI;
-  playerApi_: YoutubePlayer;
-  openToast: (message: string) => void;
-
-  // TODO: Add more
-};
-
 export type Profile = {
   id: string;
   handleId: string;

src/plugins/notifications/interactive.ts

@@ -50,6 +50,9 @@ export default (
       toastXml: getXml(songInfo, icon),
     });
 
+    // To fix the notification not closing
+    setTimeout(() => savedNotification?.close(), 5000);
+
     savedNotification.on('close', () => {
       savedNotification = undefined;
     });
@@ -253,9 +256,9 @@ export default (
   songControls = getSongControls(win);
 
   let currentSeconds = 0;
-  on('ytmd:player-api-loaded', () => send('setupTimeChangedListener'));
+  on('ytmd:player-api-loaded', () => send('ytmd:setup-time-changed-listener'));
 
-  on('timeChanged', (t: number) => {
+  on('ytmd:time-changed', (t: number) => {
     currentSeconds = t;
   });
 
@@ -304,9 +307,9 @@ export default (
     savedNotification?.close();
   });
 
-  changeProtocolHandler((cmd) => {
+  changeProtocolHandler((cmd, args) => {
     if (Object.keys(songControls).includes(cmd)) {
-      songControls[cmd as keyof typeof songControls]();
+      songControls[cmd as keyof typeof songControls](args as never);
       if (
         config().refreshOnPlayPause &&
         (cmd === 'pause' || (cmd === 'play' && !config().unpauseNotification))

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

@@ -10,7 +10,7 @@ export const onMainLoad = async ({
   window,
   getConfig,
   setConfig,
-  ipc: { send, handle, on },
+  ipc: { send, on },
 }: BackendContext<PictureInPicturePluginConfig>) => {
   let isInPiP = false;
   let originalPosition: number[];
@@ -40,7 +40,7 @@ export const onMainLoad = async ({
       originalPosition = window.getPosition();
       originalSize = window.getSize();
 
-      handle('before-input-event', blockShortcutsInPiP);
+      window.webContents.addListener('before-input-event', blockShortcutsInPiP);
 
       window.setMaximizable(false);
       window.setFullScreenable(false);
@@ -101,7 +101,7 @@ export const onMainLoad = async ({
 
   config ??= await getConfig();
   setConfig({ isInPiP });
-  on('picture-in-picture', () => {
+  on('plugin:toggle-picture-in-picture', () => {
     togglePiP();
   });
 

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

@@ -60,10 +60,23 @@ const observer = new MutationObserver(() => {
     return;
   }
 
-  const menuUrl = $<HTMLAnchorElement>(
+  // check for video (or music)
+  let menuUrl = $<HTMLAnchorElement>(
     'tp-yt-paper-listbox [tabindex="0"] #navigation-endpoint',
   )?.href;
-  if (!menuUrl?.includes('watch?') && doneFirstLoad) {
+
+  if (!menuUrl?.includes('watch?')) {
+    menuUrl = undefined;
+    // check for podcast
+    for (const it of document.querySelectorAll('tp-yt-paper-listbox [tabindex="-1"] #navigation-endpoint')) {
+      if (it.getAttribute('href')?.includes('podcast/')) {
+        menuUrl = it.getAttribute('href')!;
+        break;
+      }
+    }
+  }
+
+  if (!menuUrl && doneFirstLoad) {
     return;
   }
 
@@ -90,7 +103,7 @@ const togglePictureInPicture = async () => {
     } catch {}
   }
 
-  window.ipcRenderer.send('picture-in-picture');
+  window.ipcRenderer.send('plugin:toggle-picture-in-picture');
   return false;
 };
 // For UI (HTML)

src/plugins/playback-speed/renderer.ts

@@ -78,7 +78,7 @@ const observeVideo = () => {
   const video = document.querySelector<HTMLVideoElement>('video');
   if (video) {
     video.addEventListener('ratechange', forcePlaybackRate);
-    video.addEventListener('srcChanged', forcePlaybackRate);
+    video.addEventListener('ytmd:src-changed', forcePlaybackRate);
   }
 };
 
@@ -128,7 +128,7 @@ export const onUnload = () => {
   const video = document.querySelector<HTMLVideoElement>('video');
   if (video) {
     video.removeEventListener('ratechange', forcePlaybackRate);
-    video.removeEventListener('srcChanged', forcePlaybackRate);
+    video.removeEventListener('ytmd:src-changed', forcePlaybackRate);
   }
   slider.removeEventListener('wheel', wheelEventListener);
   getSongMenu()?.removeChild(slider);

src/plugins/precise-volume/renderer.ts

@@ -71,7 +71,7 @@ export const onPlayerApiReady = async (
         const videoMode = () =>
           api.getPlayerResponse().videoDetails?.musicVideoType !==
           'MUSIC_VIDEO_TYPE_ATV';
-        $('video')?.addEventListener('srcChanged', () =>
+        $('video')?.addEventListener('ytmd:src-changed', () =>
           moveVolumeHud(videoMode()),
         );
       }

src/plugins/scrobbler/index.ts

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

src/plugins/scrobbler/main.ts

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

src/plugins/scrobbler/menu.ts

@@ -0,0 +1,134 @@
+import prompt from 'custom-electron-prompt';
+
+import { BrowserWindow } from 'electron';
+
+import { t } from '@/i18n';
+import promptOptions from '@/providers/prompt-options';
+
+import { ScrobblerPluginConfig } from './index';
+import { SetConfType, backend } from './main';
+
+import type { MenuContext } from '@/types/contexts';
+import type { MenuTemplate } from '@/menu';
+
+async function promptLastFmOptions(options: ScrobblerPluginConfig, setConfig: SetConfType, window: BrowserWindow) {
+  const output = await prompt(
+    {
+      title: t('plugins.scrobbler.menu.lastfm.api-settings'),
+      label: t('plugins.scrobbler.menu.lastfm.api-settings'),
+      type: 'multiInput',
+      multiInputOptions: [
+        {
+          label: t('plugins.scrobbler.prompt.lastfm.api-key'),
+          value: options.scrobblers.lastfm?.apiKey,
+          inputAttrs: {
+            type: 'text'
+          }
+        },
+        {
+          label: t('plugins.scrobbler.prompt.lastfm.api-secret'),
+          value: options.scrobblers.lastfm?.secret,
+          inputAttrs: {
+            type: 'text'
+          }
+        }
+      ],
+      resizable: true,
+      height: 360,
+      ...promptOptions(),
+    },
+    window,
+  );
+
+  if (output) {
+    if (output[0]) {
+      options.scrobblers.lastfm.apiKey = output[0];
+    }
+
+    if (output[1]) {
+      options.scrobblers.lastfm.secret = output[1];
+    }
+
+    setConfig(options);
+  }
+}
+
+async function promptListenbrainzOptions(options: ScrobblerPluginConfig, setConfig: SetConfType, window: BrowserWindow) {
+  const output = await prompt(
+    {
+      title: t('plugins.scrobbler.prompt.listenbrainz.token.title'),
+      label: t('plugins.scrobbler.prompt.listenbrainz.token.label'),
+      type: 'input',
+      value: options.scrobblers.listenbrainz?.token,
+      ...promptOptions(),
+    },
+    window,
+  );
+
+  if (output) {
+    options.scrobblers.listenbrainz.token = output;
+    setConfig(options);
+  }
+}
+
+export const onMenu = async ({
+  window,
+  getConfig,
+  setConfig,
+}: MenuContext<ScrobblerPluginConfig>): Promise<MenuTemplate> => {
+  const config = await getConfig();
+
+  return [
+    {
+      label: t('plugins.scrobbler.menu.scrobble-other-media'),
+      type: 'checkbox',
+      checked: Boolean(config.scrobbleOtherMedia),
+      click(item) {
+        config.scrobbleOtherMedia = item.checked;
+        setConfig(config);
+      },
+    },
+    {
+      label: 'Last.fm',
+      submenu: [
+        {
+          label: t('main.menu.plugins.enabled'),
+          type: 'checkbox',
+          checked: Boolean(config.scrobblers.lastfm?.enabled),
+          click(item) {
+            backend.toggleScrobblers(config, window);
+            config.scrobblers.lastfm.enabled = item.checked;
+            setConfig(config);
+          },
+        },
+        {
+          label: t('plugins.scrobbler.menu.lastfm.api-settings'),
+          click() {
+            promptLastFmOptions(config, setConfig, window);
+          },
+        },
+      ],
+    },
+    {
+      label: 'ListenBrainz',
+      submenu: [
+        {
+          label: t('main.menu.plugins.enabled'),
+          type: 'checkbox',
+          checked: Boolean(config.scrobblers.listenbrainz?.enabled),
+          click(item) {
+            backend.toggleScrobblers(config, window);
+            config.scrobblers.listenbrainz.enabled = item.checked;
+            setConfig(config);
+          },
+        },
+        {
+          label: t('plugins.scrobbler.menu.listenbrainz.token'),
+          click() {
+            promptListenbrainzOptions(config, setConfig, window);
+          },
+        },
+      ],
+    },
+  ];
+};

src/plugins/scrobbler/services/base.ts

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

src/plugins/scrobbler/services/lastfm.ts

@@ -0,0 +1,304 @@
+import crypto from 'node:crypto';
+
+import { BrowserWindow, dialog, net } from 'electron';
+
+import { ScrobblerBase } from './base';
+
+import { t } from '@/i18n';
+
+import type { ScrobblerPluginConfig } from '../index';
+import type { SetConfType } from '../main';
+import type { SongInfo } from '@/providers/song-info';
+
+interface LastFmData {
+  method: string;
+  timestamp?: number;
+}
+
+interface LastFmSongData {
+  track?: string;
+  duration?: number;
+  artist?: string;
+  album?: string;
+  api_key: string;
+  sk?: string;
+  format: string;
+  method: string;
+  timestamp?: number;
+  api_sig?: string;
+}
+
+export class LastFmScrobbler extends ScrobblerBase {
+  mainWindow: BrowserWindow;
+
+  constructor(mainWindow: BrowserWindow) {
+    super();
+
+    this.mainWindow = mainWindow;
+  }
+
+  override isSessionCreated(config: ScrobblerPluginConfig): boolean {
+    return !!config.scrobblers.lastfm.sessionKey;
+  }
+
+  override async createSession(
+    config: ScrobblerPluginConfig,
+    setConfig: SetConfType,
+  ): Promise<ScrobblerPluginConfig> {
+    // Get and store the session key
+    const data = {
+      api_key: config.scrobblers.lastfm.apiKey,
+      format: 'json',
+      method: 'auth.getsession',
+      token: config.scrobblers.lastfm.token,
+    };
+    const apiSignature = createApiSig(data, config.scrobblers.lastfm.secret);
+    const response = await net.fetch(
+      `${config.scrobblers.lastfm.apiRoot}${createQueryString(data, apiSignature)}`,
+    );
+    const json = (await response.json()) as {
+      error?: string;
+      session?: {
+        key: string;
+      };
+    };
+    if (json.error) {
+      config.scrobblers.lastfm.token = await createToken(config);
+      // If is successful, we need retry the request
+      authenticate(config, this.mainWindow).then((it) => {
+        if (it) {
+          this.createSession(config, setConfig);
+        } else {
+          // failed
+          setConfig(config);
+        }
+      });
+    }
+    if (json.session) {
+      config.scrobblers.lastfm.sessionKey = json.session.key;
+    }
+    setConfig(config);
+    return config;
+  }
+
+  override setNowPlaying(songInfo: SongInfo, config: ScrobblerPluginConfig, setConfig: SetConfType): void {
+    if (!config.scrobblers.lastfm.sessionKey) {
+      return;
+    }
+
+    // This sets the now playing status in last.fm
+    const data = {
+      method: 'track.updateNowPlaying',
+    };
+    this.postSongDataToAPI(songInfo, config, data, setConfig);
+  }
+
+  override addScrobble(songInfo: SongInfo, config: ScrobblerPluginConfig, setConfig: SetConfType): void {
+    if (!config.scrobblers.lastfm.sessionKey) {
+      return;
+    }
+
+    // This adds one scrobbled song to last.fm
+    const data = {
+      method: 'track.scrobble',
+      timestamp: Math.trunc((Date.now() - (songInfo.elapsedSeconds ?? 0)) / 1000),
+    };
+    this.postSongDataToAPI(songInfo, config, data, setConfig);
+  }
+
+  private async postSongDataToAPI(
+    songInfo: SongInfo,
+    config: ScrobblerPluginConfig,
+    data: LastFmData,
+    setConfig: SetConfType,
+  ): Promise<void> {
+    // This sends a post request to the api, and adds the common data
+    if (!config.scrobblers.lastfm.sessionKey) {
+      await this.createSession(config, setConfig);
+    }
+
+    const postData: LastFmSongData = {
+      track: songInfo.title,
+      duration: songInfo.songDuration,
+      artist: songInfo.artist,
+      ...(songInfo.album ? { album: songInfo.album } : undefined), // Will be undefined if current song is a video
+      api_key: config.scrobblers.lastfm.apiKey,
+      sk: config.scrobblers.lastfm.sessionKey,
+      format: 'json',
+      ...data,
+    };
+
+    postData.api_sig = createApiSig(postData, config.scrobblers.lastfm.secret);
+    const formData = createFormData(postData);
+    net
+      .fetch('https://ws.audioscrobbler.com/2.0/', {
+        method: 'POST',
+        body: formData,
+      })
+      .catch(
+        async (error: {
+          response?: {
+            data?: {
+              error: number;
+            };
+          };
+        }) => {
+          if (error?.response?.data?.error === 9) {
+            // Session key is invalid, so remove it from the config and reauthenticate
+            config.scrobblers.lastfm.sessionKey = undefined;
+            config.scrobblers.lastfm.token = await createToken(config);
+            authenticate(config, this.mainWindow).then((it) => {
+              if (it) {
+                this.createSession(config, setConfig);
+              } else {
+                // failed
+                setConfig(config);
+              }
+            });
+          } else {
+            console.error(error);
+          }
+        },
+      );
+  }
+}
+
+const createFormData = (parameters: LastFmSongData) => {
+  // Creates the body for in the post request
+  const formData = new URLSearchParams();
+  for (const key in parameters) {
+    formData.append(key, String(parameters[key as keyof LastFmSongData]));
+  }
+
+  return formData;
+};
+
+const createQueryString = (
+  parameters: Record<string, unknown>,
+  apiSignature: string,
+) => {
+  // Creates a querystring
+  const queryData = [];
+  parameters.api_sig = apiSignature;
+  for (const key in parameters) {
+    queryData.push(
+      `${encodeURIComponent(key)}=${encodeURIComponent(
+        String(parameters[key]),
+      )}`,
+    );
+  }
+
+  return '?' + queryData.join('&');
+};
+
+const createApiSig = (parameters: LastFmSongData, secret: string) => {
+  // This function creates the api signature, see: https://www.last.fm/api/authspec
+  let sig = '';
+
+  Object
+    .entries(parameters)
+    .sort(([a], [b]) => a.localeCompare(b))
+    .forEach(([key, value]) => {
+      if (key === 'format') {
+        return;
+      }
+      sig += key + value;
+    });
+
+  sig += secret;
+  sig = crypto.createHash('md5').update(sig, 'utf-8').digest('hex');
+  return sig;
+};
+
+const createToken = async ({
+  scrobblers: {
+    lastfm: {
+      apiKey,
+      apiRoot,
+      secret,
+    }
+  }
+}: ScrobblerPluginConfig) => {
+  // Creates and stores the auth token
+  const data: {
+    method: string;
+    api_key: string;
+    format: string;
+  } = {
+    method: 'auth.gettoken',
+    api_key: apiKey,
+    format: 'json',
+  };
+  const apiSigature = createApiSig(data, secret);
+  const response = await net.fetch(
+    `${apiRoot}${createQueryString(data, apiSigature)}`,
+  );
+  const json = (await response.json()) as Record<string, string>;
+  return json?.token;
+};
+
+let authWindowOpened = false;
+let latestAuthResult = false;
+
+const authenticate = async (config: ScrobblerPluginConfig, mainWindow: BrowserWindow) => {
+  return new Promise<boolean>((resolve) => {
+    if (!authWindowOpened) {
+      authWindowOpened = true;
+      const url = `https://www.last.fm/api/auth/?api_key=${config.scrobblers.lastfm.apiKey}&token=${config.scrobblers.lastfm.token}`;
+      const browserWindow = new BrowserWindow({
+        width: 500,
+        height: 600,
+        show: false,
+        webPreferences: {
+          nodeIntegration: false,
+        },
+        autoHideMenuBar: true,
+        parent: mainWindow,
+        minimizable: false,
+        maximizable: false,
+        paintWhenInitiallyHidden: true,
+        modal: true,
+        center: true,
+      });
+      browserWindow.loadURL(url).then(() => {
+        browserWindow.show();
+        browserWindow.webContents.on('did-navigate', async (_, newUrl) => {
+          const url = new URL(newUrl);
+          if (url.hostname.endsWith('last.fm')) {
+            if (url.pathname === '/api/auth') {
+              const isApproveScreen = await browserWindow.webContents.executeJavaScript(
+                '!!document.getElementsByName(\'confirm\').length'
+              ) as boolean;
+              // successful authentication
+              if (!isApproveScreen) {
+                resolve(true);
+                latestAuthResult = true;
+                browserWindow.close();
+              }
+            } else if (url.pathname === '/api/None') {
+              resolve(false);
+              latestAuthResult = false;
+              browserWindow.close();
+            }
+          }
+        });
+        browserWindow.on('closed', () => {
+          if (!latestAuthResult) {
+            dialog.showMessageBox({
+              title: t('plugins.scrobbler.dialog.lastfm.auth-failed.title'),
+              message: t('plugins.scrobbler.dialog.lastfm.auth-failed.message'),
+              type: 'error'
+            });
+          }
+          authWindowOpened = false;
+        });
+      });
+    } else {
+      // wait for the previous window to close
+      while (authWindowOpened) {
+        // wait
+      }
+      resolve(latestAuthResult);
+    }
+  });
+};

src/plugins/scrobbler/services/listenbrainz.ts

@@ -0,0 +1,90 @@
+import { net } from 'electron';
+
+import { ScrobblerBase } from './base';
+
+import type { SetConfType } from '../main';
+import type { SongInfo } from '@/providers/song-info';
+import type { ScrobblerPluginConfig } from '../index';
+
+interface ListenbrainzRequestBody {
+  listen_type?: string;
+  payload: {
+    track_metadata?: {
+      artist_name?: string;
+      track_name?: string;
+      release_name?: string;
+      additional_info?: {
+        media_player?: string;
+        submission_client?: string;
+        origin_url?: string;
+        duration?: number;
+      };
+    };
+    listened_at?: number;
+  }[];
+}
+
+export class ListenbrainzScrobbler extends ScrobblerBase {
+  override isSessionCreated(): boolean {
+    return true;
+  }
+
+  override createSession(config: ScrobblerPluginConfig, _setConfig: SetConfType): Promise<ScrobblerPluginConfig> {
+    return Promise.resolve(config);
+  }
+
+  override setNowPlaying(songInfo: SongInfo, config: ScrobblerPluginConfig, _setConfig: SetConfType): void {
+    if (!config.scrobblers.listenbrainz.apiRoot || !config.scrobblers.listenbrainz.token) {
+      return;
+    }
+
+    const body = createRequestBody('playing_now', songInfo);
+    submitListen(body, config);
+  }
+
+  override addScrobble(songInfo: SongInfo, config: ScrobblerPluginConfig, _setConfig: SetConfType): void {
+    if (!config.scrobblers.listenbrainz.apiRoot || !config.scrobblers.listenbrainz.token) {
+      return;
+    }
+
+    const body = createRequestBody('single', songInfo);
+    body.payload[0].listened_at = Math.trunc(Date.now() / 1000);
+
+    submitListen(body, config);
+  }
+}
+
+function createRequestBody(listenType: string, songInfo: SongInfo): ListenbrainzRequestBody {
+  const trackMetadata = {
+    artist_name: songInfo.artist,
+    track_name: songInfo.title,
+    release_name: songInfo.album ?? undefined,
+    additional_info: {
+      media_player: 'YouTube Music Desktop App',
+      submission_client: 'YouTube Music Desktop App - Scrobbler Plugin',
+      origin_url: songInfo.url,
+      duration: songInfo.songDuration,
+    }
+  };
+
+  return {
+    listen_type: listenType,
+    payload: [
+      {
+        track_metadata: trackMetadata,
+      }
+    ]
+  };
+}
+
+function submitListen(body: ListenbrainzRequestBody, config: ScrobblerPluginConfig) {
+  net.fetch(config.scrobblers.listenbrainz.apiRoot + 'submit-listens',
+    {
+      method: 'POST',
+      body: JSON.stringify(body),
+      headers: {
+        'Authorization': 'Token ' + config.scrobblers.listenbrainz.token,
+        'Content-Type': 'application/json',
+      }
+    }).catch(console.error);
+}

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

@@ -4,10 +4,10 @@ declare module '@jellybrick/mpris-service' {
   import { interface as dbusInterface } from 'dbus-next';
 
   interface RootInterfaceOptions {
-    identity: string;
+    identity?: string;
-    supportedUriSchemes: string[];
+    supportedUriSchemes?: string[];
-    supportedMimeTypes: string[];
+    supportedMimeTypes?: string[];
-    desktopEntry: string;
+    desktopEntry?: string;
   }
 
   export interface Track {
@@ -35,6 +35,32 @@ declare module '@jellybrick/mpris-service' {
     'xesam:userRating'?: number;
   }
 
+  export type PlayBackStatus = 'Playing' | 'Paused' | 'Stopped';
+
+  export type LoopStatus = 'None' | 'Track' | 'Playlist';
+
+  export const PLAYBACK_STATUS_PLAYING: 'Playing';
+  export const PLAYBACK_STATUS_PAUSED: 'Paused';
+  export const PLAYBACK_STATUS_STOPPED: 'Stopped';
+
+  export const LOOP_STATUS_NONE: 'None';
+  export const LOOP_STATUS_TRACK: 'Track';
+  export const LOOP_STATUS_PLAYLIST: 'Playlist';
+
+  export type Interfaces = 'player' | 'trackList' | 'playlists';
+
+  export interface AdditionalPlayerOptions {
+    name: string;
+    supportedInterfaces: Interfaces[];
+  }
+
+  export type PlayerOptions = RootInterfaceOptions & AdditionalPlayerOptions;
+
+  export interface Position {
+    trackId: string;
+    position: number;
+  }
+
   declare class Player extends EventEmitter {
     constructor(opts: {
       name: string;
@@ -43,20 +69,46 @@ declare module '@jellybrick/mpris-service' {
       supportedInterfaces?: string[];
     });
 
+    //RootInterface
+    on(event: 'quit', listener: () => void): this;
+    on(event: 'raise', listener: () => void): this;
+    on(
+      event: 'fullscreen',
+      listener: (fullscreenEnabled: boolean) => void,
+    ): this;
+
+    emit(type: string, ...args: unknown[]): unknown;
+
     name: string;
     identity: string;
-    fullscreen: boolean;
+    fullscreen?: boolean;
     supportedUriSchemes: string[];
     supportedMimeTypes: string[];
     canQuit: boolean;
     canRaise: boolean;
-    canSetFullscreen: boolean;
+    canSetFullscreen?: boolean;
+    desktopEntry?: string;
     hasTrackList: boolean;
-    desktopEntry: string;
+
-    playbackStatus: string;
+    // PlayerInterface
-    loopStatus: string;
+    on(event: 'next', listener: () => void): this;
+    on(event: 'previous', listener: () => void): this;
+    on(event: 'pause', listener: () => void): this;
+    on(event: 'playpause', listener: () => void): this;
+    on(event: 'stop', listener: () => void): this;
+    on(event: 'play', listener: () => void): this;
+    on(event: 'seek', listener: (offset: number) => void): this;
+    on(event: 'open', listener: ({ uri: string }) => void): this;
+    on(event: 'loopStatus', listener: (status: LoopStatus) => void): this;
+    on(event: 'rate', listener: () => void): this;
+    on(event: 'shuffle', listener: (enableShuffle: boolean) => void): this;
+    on(event: 'volume', listener: (newVolume: number) => void): this;
+    on(event: 'position', listener: (position: Position) => void): this;
+
+    playbackStatus: PlayBackStatus;
+    loopStatus: LoopStatus;
     shuffle: boolean;
-    metadata: object;
+    metadata: Track;
     volume: number;
     canControl: boolean;
     canPause: boolean;
@@ -67,9 +119,40 @@ declare module '@jellybrick/mpris-service' {
     rate: number;
     minimumRate: number;
     maximumRate: number;
-    playlists: unknown[];
+
+    abstract getPosition(): number;
+
+    seeked(position: number): void;
+
+    // TracklistInterface
+    on(event: 'addTrack', listener: () => void): this;
+    on(event: 'removeTrack', listener: () => void): this;
+    on(event: 'goTo', listener: () => void): this;
+
+    tracks: Track[];
+    canEditTracks: boolean;
+
+    on(event: '*', a: unknown[]): this;
+
+    addTrack(track: string): void;
+
+    removeTrack(trackId: string): void;
+
+    // PlaylistsInterface
+    on(event: 'activatePlaylist', listener: () => void): this;
+
+    playlists: Playlist[];
     activePlaylist: string;
 
+    setPlaylists(playlists: Playlist[]): void;
+
+    setActivePlaylist(playlistId: string): void;
+
+    // Player methods
+    constructor(opts: PlayerOptions);
+
+    on(event: 'error', listener: (error: Error) => void): this;
+
     init(opts: RootInterfaceOptions): void;
 
     objectPath(subpath?: string): string;
@@ -91,13 +174,6 @@ declare module '@jellybrick/mpris-service' {
     setPlaylists(playlists: Track[]): void;
 
     setActivePlaylist(playlistId: string): void;
-
-    static PLAYBACK_STATUS_PLAYING: 'Playing';
-    static PLAYBACK_STATUS_PAUSED: 'Paused';
-    static PLAYBACK_STATUS_STOPPED: 'Stopped';
-    static LOOP_STATUS_NONE: 'None';
-    static LOOP_STATUS_TRACK: 'Track';
-    static LOOP_STATUS_PLAYLIST: 'Playlist';
   }
 
   interface MprisInterface extends dbusInterface.Interface {

src/plugins/shortcuts/mpris.ts

@@ -1,112 +1,264 @@
 import { BrowserWindow, ipcMain } from 'electron';
 
-import mpris, { Track } from '@jellybrick/mpris-service';
+import MprisPlayer, {
+  Track,
+  LoopStatus,
+  type PlayBackStatus,
+  type PlayerOptions,
+  PLAYBACK_STATUS_STOPPED,
+  PLAYBACK_STATUS_PAUSED,
+  PLAYBACK_STATUS_PLAYING,
+  LOOP_STATUS_NONE,
+  LOOP_STATUS_PLAYLIST,
+  LOOP_STATUS_TRACK,
+  type Position,
+} from '@jellybrick/mpris-service';
 
-import registerCallback from '@/providers/song-info';
+import registerCallback, { type SongInfo } from '@/providers/song-info';
 import getSongControls from '@/providers/song-controls';
 import config from '@/config';
+import { LoggerPrefix } from '@/utils';
+
+import type { RepeatMode } from '@/types/datahost-get-state';
+import type { QueueResponse } from '@/types/youtube-music-desktop-internal';
+
+class YTPlayer extends MprisPlayer {
+  /**
+   * @type {number} The current position in microseconds
+   * @private
+   */
+  private currentPosition: number;
+
+  constructor(opts: PlayerOptions) {
+    super(opts);
+
+    this.currentPosition = 0;
+  }
+
+  setPosition(t: number) {
+    this.currentPosition = t;
+  }
+
+  override getPosition(): number {
+    return this.currentPosition;
+  }
+
+  setLoopStatus(status: LoopStatus) {
+    this.loopStatus = status;
+  }
+
+  isPlaying(): boolean {
+    return this.playbackStatus === PLAYBACK_STATUS_PLAYING;
+  }
+
+  isPaused(): boolean {
+    return this.playbackStatus === PLAYBACK_STATUS_PAUSED;
+  }
+
+  isStopped(): boolean {
+    return this.playbackStatus === PLAYBACK_STATUS_STOPPED;
+  }
+
+  setPlaybackStatus(status: PlayBackStatus) {
+    this.playbackStatus = status;
+  }
+}
 
 function setupMPRIS() {
-  const instance = new mpris({
+  const instance = new YTPlayer({
-    name: 'youtube-music',
+    name: 'YoutubeMusic',
     identity: 'YouTube Music',
     supportedMimeTypes: ['audio/mpeg'],
     supportedInterfaces: ['player'],
   });
+
   instance.canRaise = true;
-  instance.supportedUriSchemes = ['https'];
+  instance.canQuit = false;
+  instance.canSetFullscreen = true;
+  instance.supportedUriSchemes = ['http', 'https'];
   instance.desktopEntry = 'youtube-music';
   return instance;
 }
 
 function registerMPRIS(win: BrowserWindow) {
   const songControls = getSongControls(win);
-  const { playPause, next, previous, volumeMinus10, volumePlus10, shuffle } =
+  const {
-    songControls;
+    playPause,
+    next,
+    previous,
+    setVolume,
+    shuffle,
+    switchRepeat,
+    setFullscreen,
+    requestFullscreenInformation,
+    requestQueueInformation,
+  } = songControls;
   try {
-    // TODO: "Typing" for this arguments
+    let currentSongInfo: SongInfo | null = null;
-    const secToMicro = (n: unknown) => Math.round(Number(n) * 1e6);
+    const secToMicro = (n: number) => Math.round(Number(n) * 1e6);
-    const microToSec = (n: unknown) => Math.round(Number(n) / 1e6);
+    const microToSec = (n: number) => Math.round(Number(n) / 1e6);
 
-    const seekTo = (e: { position: unknown }) =>
+    const correctId = (videoId: string) => {
-      win.webContents.send('seekTo', microToSec(e.position));
+      return videoId.replace('-', '_MINUS_');
-    const seekBy = (o: unknown) =>
+    };
-      win.webContents.send('seekBy', microToSec(o));
+
+    const seekTo = (event: Position) => {
+      if (
+        currentSongInfo?.videoId &&
+        event.trackId.endsWith(correctId(currentSongInfo.videoId))
+      ) {
+        win.webContents.send('ytmd:seek-to', microToSec(event.position ?? 0));
+      }
+    };
+    const seekBy = (offset: number) =>
+      win.webContents.send('ytmd:seek-by', microToSec(offset));
 
     const player = setupMPRIS();
 
     ipcMain.on('ytmd:player-api-loaded', () => {
-      win.webContents.send('setupSeekedListener', 'mpris');
+      win.webContents.send('ytmd:setup-seeked-listener', 'mpris');
-      win.webContents.send('setupTimeChangedListener', 'mpris');
+      win.webContents.send('ytmd:setup-time-changed-listener', 'mpris');
-      win.webContents.send('setupRepeatChangedListener', 'mpris');
+      win.webContents.send('ytmd:setup-repeat-changed-listener', 'mpris');
-      win.webContents.send('setupVolumeChangedListener', 'mpris');
+      win.webContents.send('ytmd:setup-volume-changed-listener', 'mpris');
+      win.webContents.send('ytmd:setup-fullscreen-changed-listener', 'mpris');
+      win.webContents.send('ytmd:setup-autoplay-changed-listener', 'mpris');
+      requestFullscreenInformation();
+      requestQueueInformation();
     });
 
-    ipcMain.on('seeked', (_, t: number) => player.seeked(secToMicro(t)));
+    ipcMain.on('ytmd:seeked', (_, t: number) => player.seeked(secToMicro(t)));
 
-    let currentSeconds = 0;
+    ipcMain.on('ytmd:time-changed', (_, t: number) => {
-    ipcMain.on('timeChanged', (_, t: number) => (currentSeconds = t));
+      player.setPosition(secToMicro(t));
+    });
 
-    ipcMain.on('repeatChanged', (_, mode: string) => {
+    ipcMain.on('ytmd:repeat-changed', (_, mode: RepeatMode) => {
       switch (mode) {
         case 'NONE': {
-          player.loopStatus = mpris.LOOP_STATUS_NONE;
+          player.setLoopStatus(LOOP_STATUS_NONE);
           break;
         }
         case 'ONE': {
-          player.loopStatus = mpris.LOOP_STATUS_TRACK;
+          player.setLoopStatus(LOOP_STATUS_TRACK);
           break;
         }
         case 'ALL': {
-          player.loopStatus = mpris.LOOP_STATUS_PLAYLIST;
+          player.setLoopStatus(LOOP_STATUS_PLAYLIST);
           // No default
           break;
         }
       }
+      requestQueueInformation();
     });
-    player.on('loopStatus', (status: string) => {
+
+    ipcMain.on('ytmd:fullscreen-changed', (_, changedTo: boolean) => {
+      if (player.fullscreen === undefined || !player.canSetFullscreen) {
+        return;
+      }
+
+      player.fullscreen =
+        changedTo !== undefined ? changedTo : !player.fullscreen;
+    });
+
+    ipcMain.on(
+      'ytmd:set-fullscreen',
+      (_, isFullscreen: boolean | undefined) => {
+        if (!player.canSetFullscreen || isFullscreen === undefined) {
+          return;
+        }
+
+        player.fullscreen = isFullscreen;
+      },
+    );
+
+    ipcMain.on(
+      'ytmd:fullscreen-changed-supported',
+      (_, isFullscreenSupported: boolean) => {
+        player.canSetFullscreen = isFullscreenSupported;
+      },
+    );
+    ipcMain.on('ytmd:autoplay-changed', (_) => {
+      requestQueueInformation();
+    });
+
+    ipcMain.on('ytmd:get-queue-response', (_, queue: QueueResponse) => {
+      if (!queue) {
+        return;
+      }
+
+      const currentPosition = queue.items?.findIndex((it) =>
+        it?.playlistPanelVideoRenderer?.selected ||
+        it?.playlistPanelVideoWrapperRenderer?.primaryRenderer?.playlistPanelVideoRenderer?.selected
+      ) ?? 0;
+      player.canGoPrevious = currentPosition !== 0;
+
+      let hasNext: boolean;
+      if (queue.autoPlaying) {
+        hasNext = true;
+      } else if (player.loopStatus === LOOP_STATUS_PLAYLIST) {
+        hasNext = true;
+      } else {
+        // Example: currentPosition = 0, queue.items.length = 29 -> hasNext = true
+        hasNext = !!(currentPosition - (queue?.items?.length ?? 0 - 1));
+      }
+
+      player.canGoNext = hasNext;
+    });
+
+    player.on('loopStatus', (status: LoopStatus) => {
       // SwitchRepeat cycles between states in that order
       const switches = [
-        mpris.LOOP_STATUS_NONE,
+        LOOP_STATUS_NONE,
-        mpris.LOOP_STATUS_PLAYLIST,
+        LOOP_STATUS_PLAYLIST,
-        mpris.LOOP_STATUS_TRACK,
+        LOOP_STATUS_TRACK,
       ];
       const currentIndex = switches.indexOf(player.loopStatus);
       const targetIndex = switches.indexOf(status);
 
       // Get a delta in the range [0,2]
       const delta = (targetIndex - currentIndex + 3) % 3;
-      songControls.switchRepeat(delta);
+      switchRepeat(delta);
     });
-    player.getPosition = () => secToMicro(currentSeconds);
 
     player.on('raise', () => {
+      if (!player.canRaise) {
+        return;
+      }
+
       win.setSkipTaskbar(false);
       win.show();
     });
 
+    player.on('fullscreen', (fullscreenEnabled: boolean) => {
+      setFullscreen(fullscreenEnabled);
+    });
+
     player.on('play', () => {
-      if (player.playbackStatus !== mpris.PLAYBACK_STATUS_PLAYING) {
+      if (!player.isPlaying()) {
-        player.playbackStatus = mpris.PLAYBACK_STATUS_PLAYING;
+        player.setPlaybackStatus(PLAYBACK_STATUS_PLAYING);
         playPause();
       }
     });
     player.on('pause', () => {
-      if (player.playbackStatus !== mpris.PLAYBACK_STATUS_PAUSED) {
+      if (!player.isPaused()) {
-        player.playbackStatus = mpris.PLAYBACK_STATUS_PAUSED;
+        player.setPlaybackStatus(PLAYBACK_STATUS_PAUSED);
         playPause();
       }
     });
     player.on('playpause', () => {
-      player.playbackStatus =
+      player.setPlaybackStatus(
-        player.playbackStatus === mpris.PLAYBACK_STATUS_PLAYING
+        player.isPlaying() ? PLAYBACK_STATUS_PAUSED : PLAYBACK_STATUS_PLAYING,
-          ? mpris.PLAYBACK_STATUS_PAUSED
+      );
-          : mpris.PLAYBACK_STATUS_PLAYING;
       playPause();
     });
 
-    player.on('next', next);
+    player.on('next', () => {
-    player.on('previous', previous);
+      next();
+    });
+
+    player.on('previous', () => {
+      previous();
+    });
 
     player.on('seek', seekBy);
     player.on('position', seekTo);
@@ -114,15 +266,23 @@ function registerMPRIS(win: BrowserWindow) {
     player.on('shuffle', (enableShuffle) => {
       if (enableShuffle) {
         shuffle();
+        requestQueueInformation();
       }
     });
     player.on('open', (args: { uri: string }) => {
-      win.loadURL(args.uri);
+      win.loadURL(args.uri).then(() => {
+        requestQueueInformation();
+      });
+    });
+
+    player.on('error', (error: Error) => {
+      console.error(LoggerPrefix, 'Error in MPRIS');
+      console.trace(error);
     });
 
     let mprisVolNewer = false;
     let autoUpdate = false;
-    ipcMain.on('volumeChanged', (_, newVol) => {
+    ipcMain.on('ytmd:volume-changed', (_, newVol) => {
       if (~~(player.volume * 100) !== newVol) {
         if (mprisVolNewer) {
           mprisVolNewer = false;
@@ -136,7 +296,7 @@ function registerMPRIS(win: BrowserWindow) {
       }
     });
 
-    player.on('volume', (newVolume) => {
+    player.on('volume', (newVolume: number) => {
       if (config.plugins.isEnabled('precise-volume')) {
         // With precise volume we can set the volume to the exact value.
         const newVol = ~~(newVolume * 100);
@@ -146,45 +306,46 @@ function registerMPRIS(win: BrowserWindow) {
           win.webContents.send('setVolume', newVol);
         }
       } else {
-        // With keyboard shortcuts we can only change the volume in increments of 10, so round it.
+        setVolume(newVolume * 100);
-        let deltaVolume = Math.round((newVolume - player.volume) * 10);
-        while (deltaVolume !== 0 && deltaVolume > 0) {
-          volumePlus10();
-          player.volume += 0.1;
-          deltaVolume--;
-        }
-
-        while (deltaVolume !== 0 && deltaVolume < 0) {
-          volumeMinus10();
-          player.volume -= 0.1;
-          deltaVolume++;
-        }
       }
     });
 
-    registerCallback((songInfo) => {
+    registerCallback((songInfo: SongInfo) => {
       if (player) {
         const data: Track = {
           'mpris:length': secToMicro(songInfo.songDuration),
-          'mpris:artUrl': songInfo.imageSrc ?? undefined,
+          ...(songInfo.imageSrc
+            ? { 'mpris:artUrl': songInfo.imageSrc }
+            : undefined),
           'xesam:title': songInfo.title,
           'xesam:url': songInfo.url,
           'xesam:artist': [songInfo.artist],
-          'mpris:trackid': '/',
+          'mpris:trackid': player.objectPath(
+            `Track/${correctId(songInfo.videoId)}`,
+          ),
         };
         if (songInfo.album) {
           data['xesam:album'] = songInfo.album;
         }
+        currentSongInfo = songInfo;
 
         player.metadata = data;
-        player.seeked(secToMicro(songInfo.elapsedSeconds));
+
-        player.playbackStatus = songInfo.isPaused
+        const currentElapsedMicroSeconds = secToMicro(
-          ? mpris.PLAYBACK_STATUS_PAUSED
+          songInfo.elapsedSeconds ?? 0,
-          : mpris.PLAYBACK_STATUS_PLAYING;
+        );
+        player.setPosition(currentElapsedMicroSeconds);
+        player.seeked(currentElapsedMicroSeconds);
+
+        player.setPlaybackStatus(
+          songInfo.isPaused ? PLAYBACK_STATUS_PAUSED : PLAYBACK_STATUS_PLAYING,
+        );
       }
+      requestQueueInformation();
     });
   } catch (error) {
-    console.warn('Error in MPRIS', error);
+    console.error(LoggerPrefix, 'Error in MPRIS');
+    console.trace(error);
   }
 }
 

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

@@ -1,18 +1,37 @@
 import { t } from '@/i18n';
 import { createPlugin } from '@/utils';
 
-export default createPlugin({
+export default createPlugin<
+  unknown,
+  unknown,
+  {
+    observer?: MutationObserver;
+    waitForElem(selector: string): Promise<HTMLElement>;
+    start(): void;
+    stop(): void;
+  }
+>({
   name: () => t('plugins.skip-disliked-songs.name'),
   description: () => t('plugins.skip-disliked-songs.description'),
   restartNeeded: false,
   renderer: {
-    observer: null as MutationObserver | null,
+    waitForElem(selector: string) {
+      return new Promise<HTMLElement>((resolve) => {
+        const interval = setInterval(() => {
+          const elem = document.querySelector<HTMLElement>(selector);
+          if (!elem) return;
+
+          clearInterval(interval);
+          resolve(elem);
+        });
+      });
+    },
     start() {
       this.waitForElem('#like-button-renderer').then((likeBtn) => {
         this.observer = new MutationObserver(() => {
           if (likeBtn?.getAttribute('like-status') == 'DISLIKE') {
             document
-              .querySelector('tp-yt-paper-icon-button.next-button')
+              .querySelector<HTMLButtonElement>('tp-yt-paper-icon-button.next-button')
               ?.click();
           }
         });
@@ -26,16 +45,5 @@ export default createPlugin({
     stop() {
       this.observer?.disconnect();
     },
-    waitForElem(selector) {
-      return new Promise((resolve) => {
-        const interval = setInterval(() => {
-          const elem = document.querySelector(selector);
-          if (!elem) return;
-
-          clearInterval(interval);
-          resolve(elem);
-        });
-      });
-    },
   },
 });

src/plugins/skip-silences/renderer.ts

@@ -115,13 +115,13 @@ export const onRendererLoad = async ({
 }: RendererContext<SkipSilencesPluginConfig>) => {
   config = await getConfig();
 
-  document.addEventListener('audioCanPlay', audioCanPlayListener, {
+  document.addEventListener('ytmd:audio-can-play', audioCanPlayListener, {
     passive: true,
   });
 };
 
 export const onRendererUnload = () => {
-  document.removeEventListener('audioCanPlay', audioCanPlayListener);
+  document.removeEventListener('ytmd:audio-can-play', audioCanPlayListener);
 
   if (playOrSeekHandler) {
     const video = document.querySelector('video');

src/plugins/sponsorblock/index.ts

@@ -76,7 +76,7 @@ export default createPlugin({
 
     const { apiURL, categories } = config;
 
-    ipc.on('video-src-changed', async (data: GetPlayerResponse) => {
+    ipc.on('ytmd:video-src-changed', async (data: GetPlayerResponse) => {
       const segments = await fetchSegments(
         apiURL,
         categories,

src/plugins/tuna-obs/index.ts

@@ -26,6 +26,7 @@ export default createPlugin({
     enabled: false,
   },
   backend: {
+    liteMode: false,
     data: {
       cover: '',
       cover_url: '',
@@ -51,25 +52,36 @@ export default createPlugin({
         const url = `http://127.0.0.1:${port}/`;
         net
           .fetch(url, {
-            method: 'POST',
+            method: this.liteMode ? 'OPTIONS' : 'POST',
             headers,
-            body: JSON.stringify({ data }),
+            keepalive: true,
+            body: this.liteMode ? undefined : JSON.stringify({ data }),
+          })
+          .then(() => {
+            if (this.liteMode) {
+              this.liteMode = false;
+              console.debug(
+                `obs-tuna webserver at port ${port} is now accessible. disable lite mode`,
+              );
+              post(data);
+            }
           })
           .catch((error: { code: number; errno: number }) => {
-            if (is.dev()) {
+            if (!this.liteMode && is.dev()) {
               console.debug(
                 `Error: '${
                   error.code || error.errno
-                }' - when trying to access obs-tuna webserver at port ${port}`,
+                }' - when trying to access obs-tuna webserver at port ${port}. enable lite mode`,
               );
+              this.liteMode = true;
             }
           });
       };
 
       ipc.on('ytmd:player-api-loaded', () =>
-        ipc.send('setupTimeChangedListener'),
+        ipc.send('ytmd:setup-time-changed-listener'),
       );
-      ipc.on('timeChanged', (t: number) => {
+      ipc.on('ytmd:time-changed', (t: number) => {
         if (!this.data.title) {
           return;
         }

src/plugins/video-toggle/index.ts

@@ -305,7 +305,7 @@ export default createPlugin({
           setVideoState(target.checked);
         });
 
-        video?.addEventListener('srcChanged', videoStarted);
+        video?.addEventListener('ytmd:src-changed', videoStarted);
 
         observeThumbnail();
 

src/plugins/visualizer/index.ts

@@ -161,7 +161,7 @@ export default createPlugin({
       }
 
       document.addEventListener(
-        'audioCanPlay',
+        'ytmd:audio-can-play',
         (e) => {
           const video = document.querySelector<
             HTMLVideoElement & { captureStream(): MediaStream }

src/preload.ts

@@ -48,7 +48,7 @@ contextBridge.exposeInMainWorld('ipcRenderer', {
   sendToHost: (channel: string, ...args: unknown[]) =>
     ipcRenderer.sendToHost(channel, ...args),
 });
-contextBridge.exposeInMainWorld('reload', () => ipcRenderer.send('reload'));
+contextBridge.exposeInMainWorld('reload', () => ipcRenderer.send('ytmd:reload'));
 contextBridge.exposeInMainWorld(
   'ELECTRON_RENDERER_URL',
   process.env.ELECTRON_RENDERER_URL,

src/providers/app-controls.ts

@@ -7,14 +7,14 @@ import config from '@/config';
 export const restart = () => restartInternal();
 
 export const setupAppControls = () => {
-  ipcMain.on('restart', restart);
+  ipcMain.on('ytmd:restart', restart);
-  ipcMain.handle('getDownloadsFolder', () => app.getPath('downloads'));
+  ipcMain.handle('ytmd:get-downloads-folder', () => app.getPath('downloads'));
   ipcMain.on(
-    'reload',
+    'ytmd:reload',
     () =>
       BrowserWindow.getFocusedWindow()?.webContents.loadURL(config.get('url')),
   );
-  ipcMain.handle('getPath', (_, ...args: string[]) => path.join(...args));
+  ipcMain.handle('ytmd:get-path', (_, ...args: string[]) => path.join(...args));
 };
 
 function restartInternal() {

src/providers/decorators.ts

@@ -74,22 +74,23 @@ function memoize<T extends (...params: unknown[]) => unknown>(fn: T): T {
   }) as T;
 }
 
-function retry<T extends (...params: unknown[]) => unknown>(
+function retry<T extends (...params: unknown[]) => Promise<unknown>>(
   fn: T,
   { retries = 3, delay = 1000 } = {},
-): T {
+) {
-  return ((...args) => {
+  return async (...args: unknown[]) => {
+    let latestError: unknown;
+    while (retries > 0) {
       try {
-      return fn(...args);
+        return await fn(...args);
       } catch (error) {
-      if (retries > 0) {
         retries--;
-        setTimeout(() => retry(fn, { retries, delay })(...args), delay);
+        await new Promise((resolve) => setTimeout(resolve, delay));
-      } else {
+        latestError = error;
-        throw error;
       }
     }
-  }) as T;
+    throw latestError;
+  };
 }
 
 export default {