chore(deps): update dependency @stylistic/eslint-plugin to v5.6.1

.devcontainer/devcontainer.json

@@ -1,16 +0,0 @@
-// For format details, see https://aka.ms/devcontainer.json. For config options, see the
-// README at: https://github.com/devcontainers/templates/tree/main/src/typescript-node
-{
-	"name": "Pear Desktop - Dev Container",
-	// Keep in sync with `.github/workflows/build.yml`
-	"image": "mcr.microsoft.com/devcontainers/typescript-node:24",
-	// Features to add to the dev container. More info: https://containers.dev/features.
-	"features": {},
-	"postCreateCommand": "pnpm install --frozen-lockfile"
-	// Use 'forwardPorts' to make a list of ports inside the container available locally.
-	// "forwardPorts": [],
-	// Configure tool-specific properties.
-	// "customizations": {},
-	// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
-	// "remoteUser": "root"
-}

.github/workflows/build.yml

@@ -16,7 +16,7 @@ jobs:
     strategy:
       fail-fast: true
       matrix:
-        os: [ macos-26, ubuntu-latest, windows-latest ]
+        os: [ macos-latest, ubuntu-latest, windows-latest ]
 
     steps:
       - uses: actions/checkout@v5
@@ -29,14 +29,14 @@ jobs:
 
       - name: Setup NodeJS
         if: startsWith(matrix.os, 'macOS') != true
-        uses: actions/setup-node@v6
+        uses: actions/setup-node@v5
         with:
           node-version: ${{ env.NODE_VERSION }}
           cache: 'pnpm'
 
       - name: Setup NodeJS for macOS
         if: startsWith(matrix.os, 'macOS')
-        uses: actions/setup-node@v6
+        uses: actions/setup-node@v5
         with:
           node-version: ${{ env.NODE_VERSION }}
 
@@ -104,14 +104,14 @@ jobs:
 
       - name: Setup NodeJS
         if: startsWith(matrix.os, 'macOS') != true
-        uses: actions/setup-node@v6
+        uses: actions/setup-node@v5
         with:
           node-version: ${{ env.NODE_VERSION }}
           cache: 'pnpm'
 
       - name: Setup NodeJS for macOS
         if: startsWith(matrix.os, 'macOS')
-        uses: actions/setup-node@v6
+        uses: actions/setup-node@v5
         with:
           node-version: ${{ env.NODE_VERSION }}
 

.github/workflows/pr-build-artifacts.yml

@@ -43,14 +43,14 @@ jobs:
 
       - name: Setup NodeJS
         if: startsWith(matrix.os, 'macOS') != true
-        uses: actions/setup-node@v6
+        uses: actions/setup-node@v5
         with:
           node-version: ${{ env.NODE_VERSION }}
           cache: 'pnpm'
 
       - name: Setup NodeJS for macOS
         if: startsWith(matrix.os, 'macOS')
-        uses: actions/setup-node@v6
+        uses: actions/setup-node@v5
         with:
           node-version: ${{ env.NODE_VERSION }}
 
@@ -103,7 +103,7 @@ jobs:
       pull-requests: write
     steps:
       - name: Create comment
-        uses: actions/github-script@v8
+        uses: actions/github-script@v7
         with:
           script: |
             const runId = context.runId;

.github/workflows/reviewdog.yml

@@ -26,7 +26,7 @@ jobs:
           run_install: false
 
       - name: Setup NodeJS
-        uses: actions/setup-node@v6
+        uses: actions/setup-node@v5
         with:
           node-version: ${{ env.NODE_VERSION }}
           cache: 'pnpm'

.gitignore

@@ -5,7 +5,6 @@ node_modules
 .idea
 
 .pnp.*
-.pnpm-store
 .yarn/*
 !.yarn/patches
 !.yarn/plugins

.vscode/launch.json

@@ -1,15 +0,0 @@
-{
-    // Use IntelliSense to learn about possible attributes.
-    // Hover to view descriptions of existing attributes.
-    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-    "version": "0.2.0",
-    "configurations": [
-        {
-            "type": "node-terminal",
-            "name": "Run Script: dev (pear-desktop)",
-            "request": "launch",
-            "command": "pnpm run dev",
-            "cwd": "${workspaceFolder}"
-        }
-    ]
-}

README.md

@@ -69,7 +69,7 @@
 
 You can help with translation on [Hosted Weblate](https://bit.ly/48n5YF7).
 
-<a href="https://bit.ly/48n5YF7">
+<a href="https://bit.ly/48n5YF7/">
   <img src="https://bit.ly/4q83L6S" alt="translation status" />
   <img src="https://bit.ly/4h3zBxo" alt="translation status 2" />
 </a>
@@ -86,10 +86,10 @@ this [wiki page](https://wiki.archlinux.org/index.php/Arch_User_Repository#Insta
 
 ### macOS
 
-You can install the app using Homebrew (see the [cask definition](https://github.com/pear-devs/homebrew-pear)):
+You can install the app using Homebrew (see the [cask definition](https://github.com/pear-devs/pear-desktop-homebrew)):
 
 ```bash
-brew install pear-devs/pear/pear-desktop
+brew install pear-devs/pear-desktop
 ```
 
 If you install the app manually and get an error "is damaged and can’t be opened." when launching the app, run the following in the Terminal:
@@ -144,10 +144,6 @@ pnpm install --frozen-lockfile
 pnpm dev
 ```
 
-Instead of installing pnpm on your system, you can also use [devcontainers](https://containers.dev/). You can use devcontainers either as a development environment in VS Code, or as a way to easily build the project without installing dependencies on your host system.
-
-Note that this has it's own limitations (for example, GUI doesn't work on, at least some, Linux hosts).
-
 ## Build your own plugins
 
 Using plugins, you can:
@@ -283,16 +279,6 @@ export default createPlugin({
 Builds the app for macOS, Linux, and Windows,
 using [electron-builder](https://github.com/electron-userland/electron-builder).
 
-### Building in devcontainer
-
-1. Clone the repo;
-2. Open the folder in VS Code;
-3. Reopen in container when prompted;
-4. Run `pnpm build` as above (choosing the desired target);
-5. Collect the built files from the `dist` folder.
-
-Since devcontainer uses a mount for the workspace, the built files will be available on the host system as well.
-
 ## Production Preview
 
 ```bash

electron-builder.yml

@@ -109,7 +109,7 @@ deb:
     - libgbm1
 rpm:
   depends:
-    - libuuid
+    - /usr/lib64/libuuid.so.1
   fpm:
     - '--rpm-rpmbuild-define'
     - _build_id_links none

electron.vite.config.mts

@@ -1,7 +1,7 @@
 import { dirname, join, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
 
-import { defineConfig } from 'electron-vite';
+import { defineConfig, defineViteConfig } from 'electron-vite';
 import builtinModules from 'builtin-modules';
 
 import Inspect from 'vite-plugin-inspect';
@@ -21,141 +21,168 @@ const resolveAlias = {
   '@assets': resolve(__dirname, './assets'),
 };
 
-export default defineConfig(({ mode }) => {
-  const isDev = mode === 'development';
+export default defineConfig({
+  main: defineViteConfig(({ mode }) => {
+    const commonConfig: UserConfig = {
+      experimental: {
+        enableNativePlugin: true,
+      },
+      plugins: [
+        pluginLoader('backend'),
+        viteResolve({
+          'virtual:i18n': i18nImporter(),
+          'virtual:plugins': pluginVirtualModuleGenerator('main'),
+        }),
+      ],
+      publicDir: 'assets',
+      define: {
+        '__dirname': 'import.meta.dirname',
+        '__filename': 'import.meta.filename',
+      },
+      build: {
+        lib: {
+          entry: 'src/index.ts',
+          formats: ['es'],
+        },
+        outDir: 'dist/main',
+        rolldownOptions: {
+          external: ['electron', 'custom-electron-prompt', ...builtinModules],
+          input: './src/index.ts',
+        },
+      },
+      resolve: {
+        alias: resolveAlias,
+      },
+    };
 
-  const mainConfig: UserConfig = {
-    experimental: {
-      enableNativePlugin: true,
-    },
-    plugins: [
-      pluginLoader('backend'),
-      viteResolve({
-        'virtual:i18n': i18nImporter(),
-        'virtual:plugins': pluginVirtualModuleGenerator('main'),
-      }),
-    ],
-    publicDir: 'assets',
-    define: {
-      __dirname: 'import.meta.dirname',
-      __filename: 'import.meta.filename',
-    },
-    build: {
-      lib: {
-        entry: 'src/index.ts',
-        formats: ['es'],
-      },
-      outDir: 'dist/main',
-      rolldownOptions: {
-        external: ['electron', 'custom-electron-prompt', ...builtinModules],
-        input: './src/index.ts',
-      },
-      minify: !isDev,
-      cssMinify: !isDev,
-      sourcemap: isDev ? 'inline' : undefined,
-    },
-    resolve: {
-      alias: resolveAlias,
-    },
-  };
+    if (mode === 'development') {
+      commonConfig.build!.sourcemap = 'inline';
+      commonConfig.plugins?.push(
+        Inspect({
+          build: true,
+          outputDir: join(__dirname, '.vite-inspect/backend'),
+        }),
+      );
+      return commonConfig;
+    }
 
-  const preloadConfig: UserConfig = {
-    experimental: {
-      enableNativePlugin: true,
-    },
-    plugins: [
-      pluginLoader('preload'),
-      viteResolve({
-        'virtual:i18n': i18nImporter(),
-        'virtual:plugins': pluginVirtualModuleGenerator('preload'),
-      }),
-    ],
-    build: {
-      lib: {
-        entry: 'src/preload.ts',
-        formats: ['cjs'],
+    return {
+      ...commonConfig,
+      build: {
+        ...commonConfig.build,
+        minify: true,
+        cssMinify: true,
       },
-      outDir: 'dist/preload',
-      commonjsOptions: {
-        ignoreDynamicRequires: true,
+    };
+  }),
+  preload: defineViteConfig(({ mode }) => {
+    const commonConfig: UserConfig = {
+      experimental: {
+        enableNativePlugin: true,
       },
-      rolldownOptions: {
-        external: ['electron', 'custom-electron-prompt', ...builtinModules],
-        input: './src/preload.ts',
+      plugins: [
+        pluginLoader('preload'),
+        viteResolve({
+          'virtual:i18n': i18nImporter(),
+          'virtual:plugins': pluginVirtualModuleGenerator('preload'),
+        }),
+      ],
+      build: {
+        lib: {
+          entry: 'src/preload.ts',
+          formats: ['cjs'],
+        },
+        outDir: 'dist/preload',
+        commonjsOptions: {
+          ignoreDynamicRequires: true,
+        },
+        rolldownOptions: {
+          external: ['electron', 'custom-electron-prompt', ...builtinModules],
+          input: './src/preload.ts',
+        },
       },
-      minify: !isDev,
-      cssMinify: !isDev,
-      sourcemap: isDev ? 'inline' : undefined,
-    },
-    resolve: {
-      alias: resolveAlias,
-    },
-  };
+      resolve: {
+        alias: resolveAlias,
+      },
+    };
 
-  const rendererConfig: UserConfig = {
-    experimental: {
-      enableNativePlugin: !isDev, // Disable native plugin in development mode to avoid issues with HMR (bug in rolldown-vite)
-    },
-    plugins: [
-      pluginLoader('renderer'),
-      viteResolve({
-        'virtual:i18n': i18nImporter(),
-        'virtual:plugins': pluginVirtualModuleGenerator('renderer'),
-      }),
-      withFilter(solidPlugin(), {
-        load: { id: [/\.(tsx|jsx)$/, '/@solid-refresh'] },
-      }),
-    ],
-    root: './src/',
-    build: {
-      lib: {
-        entry: 'src/index.html',
-        formats: ['iife'],
-        name: 'renderer',
-      },
-      outDir: 'dist/renderer',
-      rolldownOptions: {
-        external: ['electron', ...builtinModules],
-        input: './src/index.html',
-      },
-      minify: !isDev,
-      cssMinify: !isDev,
-      sourcemap: isDev ? 'inline' : undefined,
-    },
-    resolve: {
-      alias: resolveAlias,
-    },
-    server: {
-      cors: {
-        origin: 'https://music.\u0079\u006f\u0075\u0074\u0075\u0062\u0065.com',
-      },
-    },
-  };
+    if (mode === 'development') {
+      commonConfig.build!.sourcemap = 'inline';
+      commonConfig.plugins?.push(
+        Inspect({
+          build: true,
+          outputDir: join(__dirname, '.vite-inspect/preload'),
+        }),
+      );
+      return commonConfig;
+    }
 
-  if (isDev) {
-    mainConfig.plugins?.push(
-      Inspect({
-        build: true,
-        outputDir: join(__dirname, '.vite-inspect/backend'),
-      }),
-    );
-    preloadConfig.plugins?.push(
-      Inspect({
-        build: true,
-        outputDir: join(__dirname, '.vite-inspect/preload'),
-      }),
-    );
-    rendererConfig.plugins?.push(
-      Inspect({
-        build: true,
-        outputDir: join(__dirname, '.vite-inspect/renderer'),
-      }),
-    );
-  }
+    return {
+      ...commonConfig,
+      build: {
+        ...commonConfig.build,
+        minify: true,
+        cssMinify: true,
+      },
+    };
+  }),
+  renderer: defineViteConfig(({ mode }) => {
+    const commonConfig: UserConfig = {
+      experimental: {
+        enableNativePlugin: mode !== 'development', // Disable native plugin in development mode to avoid issues with HMR (bug in rolldown-vite)
+      },
+      plugins: [
+        pluginLoader('renderer'),
+        viteResolve({
+          'virtual:i18n': i18nImporter(),
+          'virtual:plugins': pluginVirtualModuleGenerator('renderer'),
+        }),
+        withFilter(solidPlugin(), {
+          load: { id: [/\.(tsx|jsx)$/, '/@solid-refresh'] },
+        }),
+      ],
+      root: './src/',
+      build: {
+        lib: {
+          entry: 'src/index.html',
+          formats: ['iife'],
+          name: 'renderer',
+        },
+        outDir: 'dist/renderer',
+        rolldownOptions: {
+          external: ['electron', ...builtinModules],
+          input: './src/index.html',
+        },
+      },
+      resolve: {
+        alias: resolveAlias,
+      },
+      server: {
+        cors: {
+          origin:
+            'https://music.\u0079\u006f\u0075\u0074\u0075\u0062\u0065.com',
+        },
+      },
+    };
 
-  return {
-    main: mainConfig,
-    preload: preloadConfig,
-    renderer: rendererConfig,
-  };
+    if (mode === 'development') {
+      commonConfig.build!.sourcemap = 'inline';
+      commonConfig.plugins?.push(
+        Inspect({
+          build: true,
+          outputDir: join(__dirname, '.vite-inspect/renderer'),
+        }),
+      );
+      return commonConfig;
+    }
+
+    return {
+      ...commonConfig,
+      build: {
+        ...commonConfig.build,
+        minify: true,
+        cssMinify: true,
+      },
+    };
+  }),
 });

package.json

@@ -45,12 +45,12 @@
   },
   "pnpm": {
     "overrides": {
-      "vite": "npm:rolldown-vite@7.3.1",
-      "node-gyp": "11.5.0",
+      "vite": "npm:rolldown-vite@7.3.0",
+      "node-gyp": "11.4.2",
       "xml2js": "0.6.2",
       "node-fetch": "3.3.2",
       "@electron/universal": "3.0.2",
-      "@babel/runtime": "7.28.6"
+      "@babel/runtime": "7.28.4"
     },
     "patchedDependencies": {
       "vudio@2.1.1": "patches/vudio@2.1.1.patch",
@@ -68,13 +68,13 @@
     "@electron/remote": "2.1.3",
     "@ffmpeg.wasm/core-mt": "0.12.0",
     "@ffmpeg.wasm/main": "0.12.0",
-    "@floating-ui/dom": "1.7.5",
+    "@floating-ui/dom": "1.7.4",
     "@foobar404/wave": "2.0.5",
-    "@ghostery/adblocker-electron": "2.13.4",
-    "@ghostery/adblocker-electron-preload": "2.13.4",
-    "@hono/node-server": "1.19.9",
-    "@hono/node-ws": "1.3.0",
-    "@hono/swagger-ui": "0.5.3",
+    "@ghostery/adblocker-electron": "2.11.6",
+    "@ghostery/adblocker-electron-preload": "2.11.6",
+    "@hono/node-server": "1.19.7",
+    "@hono/node-ws": "1.2.0",
+    "@hono/swagger-ui": "0.5.2",
     "@hono/zod-openapi": "1.2.0",
     "@hono/zod-validator": "0.7.6",
     "@jellybrick/dbus-next": "0.10.3",
@@ -90,7 +90,7 @@
     "butterchurn-presets": "3.0.0-beta.4",
     "color": "5.0.3",
     "conf": "14.0.0",
-    "custom-electron-prompt": "1.6.1",
+    "custom-electron-prompt": "1.5.8",
     "deepmerge-ts": "7.1.5",
     "delay": "6.0.0",
     "electron-debug": "4.1.0",
@@ -98,15 +98,15 @@
     "electron-localshortcut": "3.2.1",
     "electron-store": "10.1.0",
     "electron-unhandled": "5.0.0",
-    "electron-updater": "6.7.3",
+    "electron-updater": "6.6.2",
     "es-hangul": "2.3.8",
     "fast-average-color": "9.5.0",
-    "fast-equals": "5.4.0",
+    "fast-equals": "5.2.2",
     "fflate": "0.8.2",
     "filenamify": "6.0.0",
     "hanja": "1.1.5",
-    "happy-dom": "20.4.0",
-    "hono": "4.11.7",
+    "happy-dom": "20.0.11",
+    "hono": "4.10.3",
     "howler": "2.2.4",
     "html-to-text": "9.0.5",
     "i18next": "25.5.2",
@@ -118,7 +118,7 @@
     "kuroshiro-analyzer-kuromoji": "1.1.0",
     "lazy-var": "2.2.2",
     "mdui": "2.1.4",
-    "node-html-parser": "7.0.2",
+    "node-html-parser": "7.0.1",
     "node-id3": "0.2.9",
     "peerjs": "1.5.5",
     "semver": "7.7.3",
@@ -126,12 +126,12 @@
     "socks": "2.8.7",
     "solid-element": "1.9.1",
     "solid-floating-ui": "0.3.1",
-    "solid-js": "1.9.11",
+    "solid-js": "1.9.9",
     "solid-styled-components": "0.28.5",
     "solid-transition-group": "0.3.0",
     "tiny-pinyin": "1.3.2",
     "tinyld": "1.3.4",
-    "virtua": "0.48.5",
+    "virtua": "0.48.2",
     "vudio": "2.1.1",
     "x11": "2.3.0",
     "youtubei.js": "^16.0.1",
@@ -139,44 +139,44 @@
   },
   "devDependencies": {
     "@electron-toolkit/tsconfig": "1.0.1",
-    "@eslint/js": "9.39.2",
+    "@eslint/js": "9.35.0",
     "@malept/flatpak-bundler": "0.4.0",
-    "@playwright/test": "1.58.0",
-    "@stylistic/eslint-plugin": "5.7.1",
+    "@playwright/test": "1.55.0",
+    "@stylistic/eslint-plugin": "5.6.1",
     "@total-typescript/ts-reset": "0.6.1",
     "@types/electron-localshortcut": "3.1.3",
     "@types/howler": "2.2.12",
     "@types/html-to-text": "9.0.4",
     "@types/semver": "7.7.1",
     "@types/trusted-types": "2.0.7",
-    "bufferutil": "4.1.0",
+    "bufferutil": "4.0.9",
     "builtin-modules": "5.0.0",
-    "cross-env": "10.1.0",
+    "cross-env": "10.0.0",
     "del-cli": "6.0.0",
-    "discord-api-types": "0.38.38",
-    "electron": "38.8.0",
+    "discord-api-types": "0.38.37",
+    "electron": "38.7.2",
     "electron-builder": "26.4.0",
-    "electron-builder-squirrel-windows": "26.4.0",
+    "electron-builder-squirrel-windows": "26.0.12",
     "electron-devtools-installer": "4.0.0",
-    "electron-vite": "5.0.0",
-    "eslint": "9.39.2",
+    "electron-vite": "4.0.1",
+    "eslint": "9.35.0",
     "eslint-config-prettier": "10.1.8",
     "eslint-import-resolver-exports": "1.0.0-beta.5",
     "eslint-import-resolver-typescript": "4.4.4",
     "eslint-plugin-import": "2.32.0",
-    "eslint-plugin-prettier": "5.5.5",
+    "eslint-plugin-prettier": "5.5.4",
     "eslint-plugin-solid": "0.14.5",
     "glob": "11.1.0",
-    "node-gyp": "11.5.0",
+    "node-gyp": "11.4.2",
     "ts-morph": "27.0.2",
     "typescript": "5.9.3",
-    "typescript-eslint": "8.53.1",
+    "typescript-eslint": "8.43.0",
     "utf-8-validate": "6.0.6",
-    "vite": "npm:rolldown-vite@7.3.1",
+    "vite": "npm:rolldown-vite@7.3.0",
     "vite-plugin-inspect": "11.3.3",
     "vite-plugin-resolve": "2.5.2",
     "vite-plugin-solid": "2.11.10",
-    "ws": "8.19.0"
+    "ws": "8.18.3"
   },
   "auto-changelog": {
     "hideCredit": true,
@@ -184,4 +184,4 @@
     "unreleased": true,
     "output": "changelog.md"
   }
-}
+}

src/config/defaults.ts

@@ -29,7 +29,6 @@ export interface DefaultConfig {
     autoResetAppCache: boolean;
     resumeOnStart: boolean;
     likeButtons: string;
-    swapLikeButtonsOrder: boolean;
     proxy: string;
     startingPage: string;
     backgroundMaterial?: 'none' | 'mica' | 'acrylic' | 'tabbed';
@@ -67,7 +66,6 @@ export const defaultConfig: DefaultConfig = {
     autoResetAppCache: false,
     resumeOnStart: true,
     likeButtons: '',
-    swapLikeButtonsOrder: false,
     proxy: '',
     startingPage: '',
     overrideUserAgent: false,

src/i18n/resources/ca.json

@@ -321,22 +321,6 @@
         "hostname": {
           "label": "Nom del host"
         },
-        "https": {
-          "label": "HTTPS i Certificats",
-          "submenu": {
-            "cert": {
-              "dialogTitle": "Seleccionar arxiu de certificat HTTPS",
-              "label": "Arxiu de certificat (.crt/.pem)"
-            },
-            "enable-https": {
-              "label": "Activa HTTPS"
-            },
-            "key": {
-              "dialogTitle": "Selecciona arxiu de clau HTTPS privada",
-              "label": "Arxiu de clau privada (.key/.pem)"
-            }
-          }
-        },
         "port": {
           "label": "Port"
         }
@@ -478,8 +462,8 @@
         "set-status-display-type": {
           "label": "Text d'estat",
           "submenu": {
-            "application": "Escoltant {{applicationName}}",
             "artist": "Escoltant {artist}",
+            "application": "Escoltant {{applicationName}}",
             "title": "Escoltant {song title}"
           }
         }

src/i18n/resources/en.json

@@ -154,7 +154,6 @@
                 "default": "Default",
                 "force-show": "Force show",
                 "hide": "Hide",
-                "swap": "Swap like buttons order",
                 "label": "Like buttons"
               },
               "custom-window-title": {
@@ -413,17 +412,6 @@
         "no-captions": "No captions available for this song"
       }
     },
-    "clock": {
-      "description": "Add a clock to the navigation bar",
-      "name": "Clock",
-      "menu": {
-        "format": {
-          "label": "Format",
-          "display-seconds": "Display Seconds",
-          "24-hour-format": "24-Hour Format"
-        }
-      }
-    },
     "compact-sidebar": {
       "description": "Always set the sidebar in compact mode",
       "name": "Compact Sidebar"

src/i18n/resources/et.json

@@ -128,7 +128,7 @@
             },
             "label": "Keel",
             "submenu": {
-              "to-help-translate": "Soovid aidata tõlkimisel? Klõpsa siin"
+              "to-help-translate": "Soovid aidata tõlkimisel? Klõpsi siin"
             }
           },
           "resume-on-start": "Rakenduse käivitamisel jätka viimatiesitatud loo esitamist",
@@ -139,7 +139,7 @@
             "unset": "Määramata"
           },
           "tray": {
-            "label": "Tasku",
+            "label": "Trey",
             "submenu": {
               "disabled": "Välja lülitatud",
               "enabled-and-hide-app": "Sisse lülitatud ja rakendus peidetud",
@@ -227,7 +227,7 @@
     },
     "album-actions": {
       "description": "Lisab Undislike, Ebameeldiv, Meeldiv ja Unlike nupud selle rakendamiseks kõikidele loendisse või albumisse kuuluvatele lauludele.",
-      "name": "Albumi toimingud"
+      "name": "Albumi aktsioonid"
     },
     "album-color-theme": {
       "description": "Rakendab dünaamilist teemat ja visuaalseid efekte, mis põhinevad albumi värvipalettil",
@@ -237,8 +237,7 @@
           "submenu": {
             "percent": "{{suhe}}%"
           }
-        },
-        "enable-seekbar": "Luba kerimisriba kujundamine"
+        }
       },
       "name": "Albumi värviteema"
     },
@@ -246,19 +245,9 @@
       "description": "Rakendab valgusefekti, projitseerides videost õrnad värvid ekraani taustale",
       "menu": {
         "blur-amount": {
-          "label": "Hägusus",
-          "submenu": {
-            "pixels": "{{blurAmount}} pikslit"
-          }
-        },
-        "buffer": {
-          "label": "Puhver",
-          "submenu": {
-            "buffer": "{{buffer}}"
-          }
+          "label": "Hägusus"
         },
         "opacity": {
-          "label": "Läbipaistmatus",
           "submenu": {
             "percent": "{{opacity}}%"
           }
@@ -274,15 +263,8 @@
           "submenu": {
             "percent": "{{size}}%"
           }
-        },
-        "smoothness-transition": {
-          "label": "Sujuv üleminek"
-        },
-        "use-fullscreen": {
-          "label": "Kasutamas täisekraani"
         }
-      },
-      "name": "Ümbritsev režiim"
+      }
     },
     "blur-nav-bar": {
       "description": "Muudab navigatsiooniriba läbipaistavaks ja hägusaks",

src/i18n/resources/nl.json

@@ -237,8 +237,7 @@
           "submenu": {
             "percent": "{{ratio}}%"
           }
-        },
-        "enable-seekbar": "Schakel thema's voor de schuifbalk in"
+        }
       },
       "name": "Albumkleurthema"
     },
@@ -321,22 +320,6 @@
         "hostname": {
           "label": "Hostnaam"
         },
-        "https": {
-          "label": "HTTPS & Certificaten",
-          "submenu": {
-            "cert": {
-              "dialogTitle": "Selecteer HTTPS certificaat",
-              "label": "Certificaatbestand (.crt/.pem)"
-            },
-            "enable-https": {
-              "label": "HTTPS aanzetten"
-            },
-            "key": {
-              "dialogTitle": "Selecteer HTTPS privésleutel",
-              "label": "Privésleutelbestand (.key/.pem)"
-            }
-          }
-        },
         "port": {
           "label": "Poort"
         }

src/i18n/resources/pl.json

@@ -209,7 +209,7 @@
       "show": "Pokaż okno",
       "tooltip": {
         "default": "{{applicationName}}",
-        "with-song-info": "{{title}} (autorstwa {{artist}}) - {{applicationName}}"
+        "with-song-info": "{{artist}} - (autorstwa {{artist}}) - {{applicationName}}"
       }
     }
   },
@@ -295,7 +295,7 @@
       }
     },
     "api-server": {
-      "description": "Steruj odtwarzaczem przez specjalny serwer API",
+      "description": "Pozwala na kontrolowanie {{applicationName}} poprzez podłączenie specjalnego serwera API",
       "dialog": {
         "request": {
           "buttons": {

src/i18n/resources/tr.json

@@ -321,22 +321,6 @@
         "hostname": {
           "label": "Ana bilgisayar adı"
         },
-        "https": {
-          "label": "HTTPS & Sertifikalar",
-          "submenu": {
-            "cert": {
-              "dialogTitle": "HTTPS sertifika dosyası seç",
-              "label": "Sertifika dosyası (.crt/.pem)"
-            },
-            "enable-https": {
-              "label": "HTTPS'i aktifleştir"
-            },
-            "key": {
-              "dialogTitle": "HTTPS özel anahtar dosyası seç",
-              "label": "Özel anahtar dosyası (.key/.pem)"
-            }
-          }
-        },
         "port": {
           "label": "Port"
         }
@@ -478,8 +462,8 @@
         "set-status-display-type": {
           "label": "Durum metni",
           "submenu": {
-            "application": "{{applicationName}} Dinleniyor",
             "artist": "{artist} Dinleniyor",
+            "application": "{{applicationName}} Dinleniyor",
             "title": "{song title} Dinleniyor"
           }
         }

src/menu.ts

@@ -285,19 +285,6 @@ export const mainMenuTemplate = async (
                     config.set('options.likeButtons', 'hide');
                   },
                 },
-                {
-                  label: t(
-                    'main.menu.options.submenu.visual-tweaks.submenu.like-buttons.swap',
-                  ),
-                  type: 'checkbox',
-                  checked: config.get('options.swapLikeButtonsOrder'),
-                  click(item: MenuItem) {
-                    config.setMenuOption(
-                      'options.swapLikeButtonsOrder',
-                      item.checked,
-                    );
-                  },
-                },
               ],
             },
             {

src/plugins/clock/index.tsx

@@ -1,109 +0,0 @@
-import { render } from 'solid-js/web';
-import { createSignal, onMount } from 'solid-js';
-
-import style from './style.css?inline';
-
-import { createPlugin } from '@/utils';
-import { type MenuTemplate } from '@/menu';
-import { t } from '@/i18n';
-import { type ClockPluginConfig } from './types';
-
-const defaultConfig: ClockPluginConfig = {
-  enabled: false,
-  displaySeconds: false,
-  hour12: false,
-};
-
-export default createPlugin({
-  name: () => t('plugins.clock.name'),
-  description: () => t('plugins.clock.description'),
-  restartNeeded: false,
-  config: defaultConfig,
-  stylesheets: [style],
-  menu: async ({ getConfig, setConfig }): Promise<MenuTemplate> => {
-    const config = await getConfig();
-
-    return [
-      {
-        label: t('plugins.clock.menu.format.label'),
-        submenu: [
-          {
-            label: t('plugins.clock.menu.format.display-seconds'),
-            type: 'checkbox',
-            checked: config.displaySeconds,
-            click(item) {
-              setConfig({ displaySeconds: item.checked });
-            },
-          },
-          {
-            label: t('plugins.clock.menu.format.24-hour-format'),
-            type: 'checkbox',
-            checked: !config.hour12,
-            click(item) {
-              setConfig({ hour12: !item.checked });
-            },
-          },
-        ],
-      },
-    ];
-  },
-  renderer: {
-    displaySeconds: defaultConfig.displaySeconds,
-    hour12: defaultConfig.hour12,
-
-    interval: null as NodeJS.Timeout | null,
-    clockContainer: document.createElement('div'),
-    updateTime: null as unknown as () => void,
-
-    async start({ getConfig }) {
-      const config = await getConfig();
-      this.displaySeconds = config.displaySeconds;
-      this.hour12 = config.hour12;
-
-      if (!this.clockContainer) {
-        this.clockContainer = document.createElement('div');
-      }
-
-      const [time, setTime] = createSignal<string>();
-
-      const updateTime = () => {
-        const timeFormat: Intl.DateTimeFormatOptions = {
-          hour12: this.hour12,
-          hour: 'numeric',
-          minute: 'numeric',
-          second: this.displaySeconds ? 'numeric' : undefined,
-        };
-        const now = new Date();
-        setTime(now.toLocaleTimeString('en', timeFormat));
-      };
-      this.updateTime = updateTime;
-
-      onMount(() => {
-        this.interval = setInterval(updateTime, 1000);
-      });
-
-      render(
-        () => (
-          <>
-            <h1 class="clock"> {time()} </h1>
-          </>
-        ),
-        this.clockContainer,
-      );
-      const menu = document.querySelector('.center-content');
-      menu?.append(this.clockContainer);
-    },
-    onConfigChange(newConfig) {
-      this.displaySeconds = newConfig.displaySeconds;
-      this.hour12 = newConfig.hour12;
-      this.updateTime();
-    },
-    stop() {
-      this.clockContainer.remove();
-      this.clockContainer.replaceChildren();
-      if (this.interval) {
-        clearInterval(this.interval);
-      }
-    },
-  },
-});

src/plugins/clock/style.css

@@ -1,6 +0,0 @@
-.clock {
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
-  align-self: center;
-}

src/plugins/clock/types.ts

@@ -1,5 +0,0 @@
-export type ClockPluginConfig = {
-  enabled: boolean;
-  displaySeconds: boolean;
-  hour12: boolean;
-};

src/plugins/discord/discord-service.ts

@@ -9,7 +9,7 @@ import { TimerManager } from './timer-manager';
 import {
   buildDiscordButtons,
   padHangulFields,
-  sanitizeActivityText,
+  truncateString,
   isSeek,
 } from './utils';
 
@@ -22,7 +22,7 @@ export class DiscordService {
   /**
    * Discord RPC client instance.
    */
-  rpc!: DiscordClient;
+  rpc = new DiscordClient({ clientId });
   /**
    * Indicates if the service is ready to send activity updates.
    */
@@ -62,21 +62,6 @@ export class DiscordService {
     this.mainWindow = mainWindow;
     this.autoReconnect = config?.autoReconnect ?? true; // Default autoReconnect to true
 
-    this.initializeRpc();
-  }
-
-  private initializeRpc() {
-    if (this.rpc) {
-      try {
-        this.rpc.destroy();
-      } catch {
-        // ignored
-      }
-      this.rpc.removeAllListeners();
-    }
-
-    this.rpc = new DiscordClient({ clientId });
-
     this.rpc.on('connected', () => {
       if (dev()) {
         console.log(LoggerPrefix, t('plugins.discord.backend.connected'));
@@ -114,17 +99,13 @@ export class DiscordService {
     const activityInfo: SetActivity = {
       type: ActivityType.Listening,
       statusDisplayType: config.statusDisplayType,
-      details: sanitizeActivityText(
-        songInfo.alternativeTitle ?? songInfo.title
-      ), // Song title
+      details: truncateString(songInfo.alternativeTitle ?? songInfo.title, 128), // Song title
       detailsUrl: songInfo.url ?? undefined,
-      state: sanitizeActivityText(
-        songInfo.tags?.at(0) ?? songInfo.artist
-      ), // Artist name
+      state: truncateString(songInfo.tags?.at(0) ?? songInfo.artist, 128), // Artist name
       stateUrl: songInfo.artistUrl,
       largeImageKey: songInfo.imageSrc ?? undefined,
       largeImageText: songInfo.album
-        ? sanitizeActivityText(songInfo.album)
+        ? truncateString(songInfo.album, 128)
         : undefined,
       buttons: buildDiscordButtons(config, songInfo),
     };
@@ -211,7 +192,6 @@ export class DiscordService {
               resolve();
             })
             .catch(() => {
-              this.initializeRpc();
               this.connectRecursive();
             });
         },
@@ -256,9 +236,6 @@ export class DiscordService {
       this.resetInfo();
 
       if (this.autoReconnect) {
-        // For some reason @xhayper/discord-rpc leaves a dangling listener on connection failure
-        // so we destroy and recreate the RPC client before reconnecting.
-        this.initializeRpc();
         this.connectRecursive();
       } else if (showErrorDialog && this.mainWindow) {
         // connection failed
@@ -273,11 +250,12 @@ export class DiscordService {
     this.autoReconnect = false;
     this.timerManager.clear(TimerKey.DiscordConnectRetry);
     this.timerManager.clear(TimerKey.ClearActivity);
-    try {
-      this.rpc.removeAllListeners();
-      this.rpc.destroy();
-    } catch {
-      // ignored
+    if (this.rpc.isConnected) {
+      try {
+        this.rpc.destroy();
+      } catch {
+        // ignored
+      }
     }
     this.resetInfo(); // Reset internal state
   }

src/plugins/discord/utils.ts

@@ -19,27 +19,6 @@ export const truncateString = (str: string, length: number): string => {
   return str;
 };
 
-/**
- * Sanitizes a string for Discord Rich Presence activity, ensuring it meets length requirements.
- * @param input - The string to sanitize.
- * @param fallback - A fallback string to use if the input is empty or whitespace. Defaults to 'undefined'.
- * @returns The sanitized string, compliant with Discord's requirements.
- */
-export function sanitizeActivityText(input: string | undefined, fallback: string = 'undefined'): string {
-  const text = (input && input.trim()) ? input.trim() : fallback.trim();
-  let safeString = truncateString(text, 128);
-
-  if (safeString.length === 0) {
-    return fallback;
-  }
-
-  if (safeString.length < 2) {
-    safeString = safeString.padEnd(2, '⠀'); // change if necessary
-  }
-
-  return safeString;
-}
-
 /**
  * Builds the array of buttons for the Discord Rich Presence activity.
  * @param config - The plugin configuration.

src/plugins/synced-lyrics/parsers/lrc.test.ts

@@ -1,144 +0,0 @@
-import { test, expect } from '@playwright/test';
-
-import { LRC } from './lrc';
-
-test('empty string', () => {
-  const lrc = LRC.parse('');
-  expect(lrc).toStrictEqual({ lines: [], tags: [] });
-});
-
-test('chorus', () => {
-  const lrc = LRC.parse(`\
-[00:12.00]Line 1 lyrics
-[00:17.20]Line 2 lyrics
-[00:21.10][00:45.10]Repeating lyrics (e.g. chorus)
-[mm:ss.xx]Last lyrics line\
-`);
-
-  expect(lrc).toStrictEqual({
-    lines: [
-      { duration: 12000, text: '', words: [], time: '00:00:00', timeInMs: 0 },
-      {
-        duration: 5020,
-        text: 'Line 1 lyrics',
-        words: [],
-        time: '00:12:00',
-        timeInMs: 12000,
-      },
-      {
-        duration: 3990,
-        text: 'Line 2 lyrics',
-        words: [],
-        time: '00:17:20',
-        timeInMs: 17020,
-      },
-      {
-        duration: 24000,
-        text: 'Repeating lyrics (e.g. chorus)',
-        words: [],
-        time: '00:21:10',
-        timeInMs: 21010,
-      },
-      {
-        duration: Infinity,
-        text: 'Repeating lyrics (e.g. chorus)',
-        words: [],
-        time: '00:45:10',
-        timeInMs: 45010,
-      },
-    ],
-    tags: [],
-  });
-});
-
-test('attributes', () => {
-  const lrc = LRC.parse(
-    `[ar:Chubby Checker oppure  Beatles, The]
-[al:Hits Of The 60's - Vol. 2 – Oldies]
-[ti:Let's Twist Again]
-[au:Written by Kal Mann / Dave Appell, 1961]
-[length: 2:23]
-
-[00:12.00]Naku Penda Piya-Naku Taka Piya-Mpenziwe
-[00:15.30]Some more lyrics ...`,
-  );
-
-  expect(lrc).toStrictEqual({
-    lines: [
-      { duration: 12000, text: '', words: [], time: '00:00:00', timeInMs: 0 },
-      {
-        duration: 3030,
-        text: 'Naku Penda Piya-Naku Taka Piya-Mpenziwe',
-        words: [],
-        time: '00:12:00',
-        timeInMs: 12000,
-      },
-      {
-        duration: Infinity,
-        text: 'Some more lyrics ...',
-        words: [],
-        time: '00:15:30',
-        timeInMs: 15030,
-      },
-    ],
-    tags: [
-      { tag: 'ar', value: 'Chubby Checker oppure  Beatles, The' },
-      { tag: 'al', value: "Hits Of The 60's - Vol. 2 – Oldies" },
-      { tag: 'ti', value: "Let's Twist Again" },
-      { tag: 'au', value: 'Written by Kal Mann / Dave Appell, 1961' },
-      { tag: 'length', value: '2:23' },
-    ],
-  });
-});
-
-test('karaoke', () => {
-  const lrc = LRC.parse(
-    '[00:00.00] <00:00.04> When <00:00.16> the <00:00.82> truth <00:01.29> is <00:01.63> found <00:03.09> to <00:03.37> be <00:05.92> lies',
-  );
-
-  expect(lrc).toStrictEqual({
-    lines: [
-      {
-        duration: Infinity,
-        text: 'When the truth is found to be lies',
-        time: '00:00:00',
-        timeInMs: 0,
-        words: [
-          {
-            timeInMs: 4,
-            word: 'When',
-          },
-          {
-            timeInMs: 16,
-            word: 'the',
-          },
-          {
-            timeInMs: 82,
-            word: 'truth',
-          },
-          {
-            timeInMs: 1029,
-            word: 'is',
-          },
-          {
-            timeInMs: 1063,
-            word: 'found',
-          },
-          {
-            timeInMs: 3009,
-            word: 'to',
-          },
-          {
-            timeInMs: 3037,
-            word: 'be',
-          },
-          {
-            timeInMs: 5092,
-            word: 'lies',
-          },
-        ],
-      },
-    ],
-    tags: [],
-  });
-});

src/plugins/synced-lyrics/parsers/lrc.ts

@@ -8,7 +8,6 @@ interface LRCLine {
   timeInMs: number;
   duration: number;
   text: string;
-  words: { timeInMs: number; word: string }[];
 }
 
 interface LRC {
@@ -18,10 +17,7 @@ interface LRC {
 
 const tagRegex = /^\[(?<tag>\w+):\s*(?<value>.+?)\s*\]$/;
 // prettier-ignore
-const timestampRegex = /^\[(?<minutes>\d+):(?<seconds>\d+)\.(?<milliseconds>\d+)\]/m;
-
-// prettier-ignore
-const wordRegex = /<(?<minutes>\d+):(?<seconds>\d+)\.(?<milliseconds>\d+)> *(?<word>\w+)/g;
+const lyricRegex = /^\[(?<minutes>\d+):(?<seconds>\d+)\.(?<milliseconds>\d+)\](?<text>.+)$/;
 
 export const LRC = {
   parse: (text: string): LRC => {
@@ -31,29 +27,13 @@ export const LRC = {
     };
 
     let offset = 0;
+    let previousLine: LRCLine | null = null;
 
-    for (let line of text.split('\n')) {
-      line = line.trim();
-      if (!line.startsWith('[')) continue;
+    for (const line of text.split('\n')) {
+      if (!line.trim().startsWith('[')) continue;
 
-      const timestamps = [];
-      let match: Record<string, string> | undefined;
-      while ((match = line.match(timestampRegex)?.groups)) {
-        const { minutes, seconds, milliseconds } = match;
-        const timeInMs =
-          parseInt(minutes) * 60 * 1000 +
-          parseInt(seconds) * 1000 +
-          parseInt(milliseconds);
-
-        timestamps.push({
-          time: `${minutes}:${seconds}:${milliseconds}`,
-          timeInMs,
-        });
-
-        line = line.replace(timestampRegex, '');
-      }
-
-      if (!timestamps.length) {
+      const lyric = line.match(lyricRegex)?.groups;
+      if (!lyric) {
         const tag = line.match(tagRegex)?.groups;
         if (tag) {
           if (tag.tag === 'offset') {
@@ -69,52 +49,38 @@ export const LRC = {
         continue;
       }
 
-      let text = line.trim();
-      const words = Array.from(text.matchAll(wordRegex), ({ groups }) => {
-        const { minutes, seconds, milliseconds, word } = groups!;
-        const timeInMs =
-          parseInt(minutes) * 60 * 1000 +
-          parseInt(seconds) * 1000 +
-          parseInt(milliseconds);
+      const { minutes, seconds, milliseconds, text } = lyric;
+      const timeInMs =
+        parseInt(minutes) * 60 * 1000 +
+        parseInt(seconds) * 1000 +
+        parseInt(milliseconds);
 
-        return { timeInMs, word };
-      });
+      const currentLine: LRCLine = {
+        time: `${minutes}:${seconds}:${milliseconds}`,
+        timeInMs,
+        text: text.trim(),
+        duration: Infinity,
+      };
 
-      if (words.length) {
-        text = words.map(({ word }) => word).join(' ');
+      if (previousLine) {
+        previousLine.duration = timeInMs - previousLine.timeInMs;
       }
 
-      for (const { time, timeInMs } of timestamps) {
-        lrc.lines.push({
-          time,
-          timeInMs,
-          text,
-          words,
-          duration: Infinity,
-        });
-      }
+      previousLine = currentLine;
+      lrc.lines.push(currentLine);
     }
 
-    lrc.lines.sort(({ timeInMs: timeA }, { timeInMs: timeB }) => timeA - timeB);
-    for (let i = 0; i < lrc.lines.length; i++) {
-      const current = lrc.lines[i];
-      const next = lrc.lines[i + 1];
-
-      current.timeInMs += offset;
-
-      if (next) {
-        current.duration = next.timeInMs - current.timeInMs;
-      }
+    for (const line of lrc.lines) {
+      line.timeInMs += offset;
     }
 
     const first = lrc.lines.at(0);
     if (first && first.timeInMs > 300) {
       lrc.lines.unshift({
-        time: '00:00:00',
+        time: '0:0:0',
         timeInMs: 0,
         duration: first.timeInMs,
         text: '',
-        words: [],
       });
     }
 

src/plugins/visualizer/index.ts

@@ -18,6 +18,7 @@ export type VisualizerPluginConfig = {
   type: 'butterchurn' | 'vudio' | 'wave';
   butterchurn: {
     preset: string;
+    renderingFrequencyInMs: number;
     blendTimeInSeconds: number;
   };
   vudio: {
@@ -56,23 +57,17 @@ export type VisualizerPluginConfig = {
   };
 };
 
-type RenderProps = {
-  visualizerInstance: Visualizer | null;
-  audioContext: AudioContext | null;
-  audioSource: MediaElementAudioSourceNode | null;
-  observer: ResizeObserver | null;
-};
-
 export default createPlugin({
   name: () => t('plugins.visualizer.name'),
   description: () => t('plugins.visualizer.description'),
-  restartNeeded: false,
+  restartNeeded: true,
   config: {
     enabled: false,
     type: 'butterchurn',
     // Config per visualizer
     butterchurn: {
       preset: 'martin [shadow harlequins shape code] - fata morgana',
+      renderingFrequencyInMs: 500,
       blendTimeInSeconds: 2.7,
     },
     vudio: {
@@ -153,91 +148,81 @@ export default createPlugin({
   },
 
   renderer: {
-    props: {
-      visualizerInstance: null,
-      audioContext: null,
-      audioSource: null,
-      observer: null,
-    } as RenderProps,
+    async onPlayerApiReady(_, { getConfig }) {
+      const config = await getConfig();
 
-    createVisualizer(
-      this: { props: RenderProps },
-      config: VisualizerPluginConfig,
-    ) {
-      this.props.visualizerInstance?.destroy();
-      this.props.visualizerInstance = null;
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      let visualizerType: { new (...args: any[]): Visualizer<unknown> } = vudio;
 
-      if (!this.props.audioContext || !this.props.audioSource) return;
-      if (!config.enabled) return;
-
-      const video = document.querySelector<
-        HTMLVideoElement & { captureStream(): MediaStream }
-      >('video');
-      if (!video) {
-        return;
-      }
-
-      const visualizerContainer =
-        document.querySelector<HTMLElement>('#player');
-      if (!visualizerContainer) {
-        return;
-      }
-
-      let canvas = document.querySelector<HTMLCanvasElement>('#visualizer');
-      if (!canvas) {
-        canvas = document.createElement('canvas');
-        canvas.id = 'visualizer';
-        visualizerContainer?.prepend(canvas);
-      }
-
-      const gainNode = this.props.audioContext.createGain();
-      gainNode.gain.value = 1.25;
-      this.props.audioSource.connect(gainNode);
-
-      let visualizerType: {
-        new (...args: ConstructorParameters<typeof vudio>): Visualizer;
-      } = vudio;
       if (config.type === 'wave') {
         visualizerType = wave;
       } else if (config.type === 'butterchurn') {
         visualizerType = butterchurn;
       }
-      this.props.visualizerInstance = new visualizerType(
-        this.props.audioContext,
-        this.props.audioSource,
-        canvas,
-        gainNode,
-        video.captureStream(),
-        config,
-      );
 
-      const resizeVisualizer = () => {
-        if (canvas && visualizerContainer) {
-          const { width, height } =
-            window.getComputedStyle(visualizerContainer);
-          canvas.width = Math.ceil(parseFloat(width));
-          canvas.height = Math.ceil(parseFloat(height));
-        }
-        this.props.visualizerInstance?.resize(canvas.width, canvas.height);
-      };
-      resizeVisualizer();
-
-      this.props.observer?.disconnect();
-      this.props.observer = new ResizeObserver(resizeVisualizer);
-      this.props.observer.observe(visualizerContainer);
-    },
-
-    onConfigChange(newConfig) {
-      this.createVisualizer(newConfig);
-    },
-
-    onPlayerApiReady(_, { getConfig }) {
       document.addEventListener(
         'peard:audio-can-play',
-        async (e) => {
-          this.props.audioContext = e.detail.audioContext;
-          this.props.audioSource = e.detail.audioSource;
-          this.createVisualizer(await getConfig());
+        (e) => {
+          const video = document.querySelector<
+            HTMLVideoElement & { captureStream(): MediaStream }
+          >('video');
+          if (!video) {
+            return;
+          }
+
+          const visualizerContainer =
+            document.querySelector<HTMLElement>('#player');
+          if (!visualizerContainer) {
+            return;
+          }
+
+          let canvas = document.querySelector<HTMLCanvasElement>('#visualizer');
+          if (!canvas) {
+            canvas = document.createElement('canvas');
+            canvas.id = 'visualizer';
+            visualizerContainer?.prepend(canvas);
+          }
+
+          const resizeCanvas = () => {
+            if (canvas) {
+              canvas.width = visualizerContainer.clientWidth;
+              canvas.height = visualizerContainer.clientHeight;
+            }
+          };
+
+          resizeCanvas();
+
+          const gainNode = e.detail.audioContext.createGain();
+          gainNode.gain.value = 1.25;
+          e.detail.audioSource.connect(gainNode);
+
+          const visualizer = new visualizerType(
+            e.detail.audioContext,
+            e.detail.audioSource,
+            visualizerContainer,
+            canvas,
+            gainNode,
+            video.captureStream(),
+            config,
+          );
+
+          const resizeVisualizer = (width: number, height: number) => {
+            resizeCanvas();
+            visualizer.resize(width, height);
+          };
+
+          resizeVisualizer(canvas.width, canvas.height);
+          const visualizerContainerObserver = new ResizeObserver((entries) => {
+            for (const entry of entries) {
+              resizeVisualizer(
+                entry.contentRect.width,
+                entry.contentRect.height,
+              );
+            }
+          });
+          visualizerContainerObserver.observe(visualizerContainer);
+
+          visualizer.render();
         },
         { passive: true },
       );

src/plugins/visualizer/visualizers/butterchurn.ts

@@ -5,49 +5,54 @@ import { Visualizer } from './visualizer';
 
 import type { VisualizerPluginConfig } from '../index';
 
-class ButterchurnVisualizer extends Visualizer {
-  private readonly visualizer: ReturnType<typeof Butterchurn.createVisualizer>;
-  private destroyed: boolean = false;
-  private animFrameHandle: number | null;
+class ButterchurnVisualizer extends Visualizer<Butterchurn> {
+  name = 'butterchurn';
+
+  visualizer: ReturnType<typeof Butterchurn.createVisualizer>;
+  private readonly renderingFrequencyInMs: number;
 
   constructor(
     audioContext: AudioContext,
     audioSource: MediaElementAudioSourceNode,
+    visualizerContainer: HTMLElement,
     canvas: HTMLCanvasElement,
     audioNode: GainNode,
-    _stream: MediaStream,
-    config: VisualizerPluginConfig,
+    stream: MediaStream,
+    options: VisualizerPluginConfig,
   ) {
-    super(audioSource, audioNode);
-
-    const preset = ButterchurnPresets[config.butterchurn.preset];
-    const renderVisualizer = () => {
-      if (this.destroyed) return;
-      this.visualizer.render();
-      this.animFrameHandle = requestAnimationFrame(renderVisualizer);
-    };
+    super(
+      audioContext,
+      audioSource,
+      visualizerContainer,
+      canvas,
+      audioNode,
+      stream,
+      options,
+    );
 
     this.visualizer = Butterchurn.createVisualizer(audioContext, canvas, {
       width: canvas.width,
       height: canvas.height,
     });
-    this.visualizer.loadPreset(preset, config.butterchurn.blendTimeInSeconds);
+
+    const preset = ButterchurnPresets[options.butterchurn.preset];
+    this.visualizer.loadPreset(preset, options.butterchurn.blendTimeInSeconds);
+
     this.visualizer.connectAudio(audioNode);
 
-    // Start animation request loop. Do not use setInterval!
-    this.animFrameHandle = requestAnimationFrame(renderVisualizer);
+    this.renderingFrequencyInMs = options.butterchurn.renderingFrequencyInMs;
   }
 
   resize(width: number, height: number) {
     this.visualizer.setRendererSize(width, height);
   }
 
-  destroy() {
-    if (this.animFrameHandle) cancelAnimationFrame(this.animFrameHandle);
-    this.destroyed = true;
-    try {
-      this.audioSource.disconnect(this.audioNode);
-    } catch {}
+  render() {
+    const renderVisualizer = () => {
+      requestAnimationFrame(renderVisualizer);
+      this.visualizer.render();
+    };
+    setTimeout(renderVisualizer, this.renderingFrequencyInMs);
   }
 }
 

src/plugins/visualizer/visualizers/visualizer.ts

@@ -1,15 +1,22 @@
-export abstract class Visualizer {
-  protected audioNode: GainNode;
-  protected audioSource: MediaElementAudioSourceNode;
+import type { VisualizerPluginConfig } from '../index';
+
+export abstract class Visualizer<T> {
+  /**
+   * The name must be the same as the file name.
+   */
+  abstract name: string;
+  abstract visualizer: T;
 
   protected constructor(
+    _audioContext: AudioContext,
     _audioSource: MediaElementAudioSourceNode,
+    _visualizerContainer: HTMLElement,
+    _canvas: HTMLCanvasElement,
     _audioNode: GainNode,
-  ) {
-    this.audioNode = _audioNode;
-    this.audioSource = _audioSource;
-  }
+    _stream: MediaStream,
+    _options: VisualizerPluginConfig,
+  ) {}
 
   abstract resize(width: number, height: number): void;
-  abstract destroy(): void;
+  abstract render(): void;
 }

src/plugins/visualizer/visualizers/vudio.ts

@@ -4,24 +4,35 @@ import { Visualizer } from './visualizer';
 
 import type { VisualizerPluginConfig } from '../index';
 
-class VudioVisualizer extends Visualizer {
-  private readonly visualizer: Vudio;
+class VudioVisualizer extends Visualizer<Vudio> {
+  name = 'vudio';
+
+  visualizer: Vudio;
 
   constructor(
-    _audioContext: AudioContext,
+    audioContext: AudioContext,
     audioSource: MediaElementAudioSourceNode,
+    visualizerContainer: HTMLElement,
     canvas: HTMLCanvasElement,
     audioNode: GainNode,
     stream: MediaStream,
-    config: VisualizerPluginConfig,
+    options: VisualizerPluginConfig,
   ) {
-    super(audioSource, audioNode);
+    super(
+      audioContext,
+      audioSource,
+      visualizerContainer,
+      canvas,
+      audioNode,
+      stream,
+      options,
+    );
 
     this.visualizer = new Vudio(stream, canvas, {
       width: canvas.width,
       height: canvas.height,
       // Visualizer config
-      ...config,
+      ...options,
     });
 
     this.visualizer.dance();
@@ -34,12 +45,7 @@ class VudioVisualizer extends Visualizer {
     });
   }
 
-  destroy() {
-    this.visualizer.pause();
-    try {
-      this.audioSource.disconnect(this.audioNode);
-    } catch {}
-  }
+  render() {}
 }
 
 export default VudioVisualizer;

src/plugins/visualizer/visualizers/wave.ts

@@ -4,24 +4,35 @@ import { Visualizer } from './visualizer';
 
 import type { VisualizerPluginConfig } from '../index';
 
-class WaveVisualizer extends Visualizer {
-  private readonly visualizer: Wave;
+class WaveVisualizer extends Visualizer<Wave> {
+  name = 'wave';
+
+  visualizer: Wave;
 
   constructor(
     audioContext: AudioContext,
     audioSource: MediaElementAudioSourceNode,
+    visualizerContainer: HTMLElement,
     canvas: HTMLCanvasElement,
     audioNode: GainNode,
-    _stream: MediaStream,
-    config: VisualizerPluginConfig,
+    stream: MediaStream,
+    options: VisualizerPluginConfig,
   ) {
-    super(audioSource, audioNode);
+    super(
+      audioContext,
+      audioSource,
+      visualizerContainer,
+      canvas,
+      audioNode,
+      stream,
+      options,
+    );
 
     this.visualizer = new Wave(
       { context: audioContext, source: audioSource },
       canvas,
     );
-    for (const animation of config.wave.animations) {
+    for (const animation of options.wave.animations) {
       const TargetVisualizer =
         this.visualizer.animations[
           animation.type as keyof typeof this.visualizer.animations
@@ -35,12 +46,7 @@ class WaveVisualizer extends Visualizer {
 
   resize(_: number, __: number) {}
 
-  destroy() {
-    this.visualizer.clearAnimations();
-    try {
-      this.audioSource.disconnect(this.audioNode);
-    } catch {}
-  }
+  render() {}
 }
 
 export default WaveVisualizer;

src/renderer.ts

@@ -406,18 +406,6 @@ async function onApiLoaded() {
 
     document.head.appendChild(style);
   }
-
-  // Swap like button order
-  if (window.mainConfig.get('options.swapLikeButtonsOrder')) {
-    const style = document.createElement('style');
-    style.textContent = `
-      #like-button-renderer {
-        display: inline-flex;
-        flex-direction: row-reverse;
-      }`;
-
-    document.head.appendChild(style);
-  }
 }
 
 /**