plugin: Synced Lyrics

electron.vite.config.mts

@@ -1,17 +1,17 @@
 import { resolve, dirname, join } from 'node:path';
 import { fileURLToPath } from 'node:url';
 
+import { UserConfig } from 'vite';
 import { defineConfig, defineViteConfig } from 'electron-vite';
 import builtinModules from 'builtin-modules';
 import viteResolve from 'vite-plugin-resolve';
 import Inspect from 'vite-plugin-inspect';
+import solidPlugin from 'vite-plugin-solid';
 
 import { pluginVirtualModuleGenerator } from './vite-plugins/plugin-importer.mjs';
 import pluginLoader from './vite-plugins/plugin-loader.mjs';
 
-import 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));
 
@@ -52,7 +52,10 @@ export default defineConfig({
 
     if (mode === 'development') {
       commonConfig.plugins?.push(
-        Inspect({ build: true, outputDir: join(__dirname, '.vite-inspect/backend') }),
+        Inspect({
+          build: true,
+          outputDir: join(__dirname, '.vite-inspect/backend'),
+        }),
       );
       return commonConfig;
     }
@@ -96,7 +99,10 @@ export default defineConfig({
 
     if (mode === 'development') {
       commonConfig.plugins?.push(
-        Inspect({ build: true, outputDir: join(__dirname, '.vite-inspect/preload') }),
+        Inspect({
+          build: true,
+          outputDir: join(__dirname, '.vite-inspect/preload'),
+        }),
       );
       return commonConfig;
     }
@@ -143,7 +149,10 @@ export default defineConfig({
 
     if (mode === 'development') {
       commonConfig.plugins?.push(
-        Inspect({ build: true, outputDir: join(__dirname, '.vite-inspect/renderer') }),
+        Inspect({
+          build: true,
+          outputDir: join(__dirname, '.vite-inspect/renderer'),
+        }),
       );
       return commonConfig;
     }

package.json

@@ -164,6 +164,7 @@
     "@foobar404/wave": "2.0.5",
     "@jellybrick/electron-better-web-request": "1.0.4",
     "@jellybrick/mpris-service": "2.1.4",
+    "@skyra/jaro-winkler": "^1.1.1",
     "@xhayper/discord-rpc": "1.1.4",
     "async-mutex": "0.5.0",
     "butterchurn": "3.0.0-beta.4",

src/i18n/resources/en.json

@@ -418,19 +418,19 @@
         "presets": "Presets",
         "skip-existing": "Skip existing files",
         "download-finish-settings": {
-            "label": "Download on finish",
-            "submenu": {
-              "enabled": "Enabled",
-              "mode": "Time mode",
-              "seconds": "Seconds",
-              "percent": "Percent",
-              "advanced": "Advanced"
-            },
-            "prompt": {
-              "title": "Configure when to download",
-              "last-seconds": "Last x seconds",
-              "last-percent": "After x percent"
-            }
+          "label": "Download on finish",
+          "submenu": {
+            "enabled": "Enabled",
+            "mode": "Time mode",
+            "seconds": "Seconds",
+            "percent": "Percent",
+            "advanced": "Advanced"
+          },
+          "prompt": {
+            "title": "Configure when to download",
+            "last-seconds": "Last x seconds",
+            "last-percent": "After x percent"
+          }
         }
       },
       "name": "Downloader",
@@ -668,6 +668,23 @@
       "description": "Automatically Skips non-music parts like intro/outro or parts of music videos where the song isn't playing",
       "name": "SponsorBlock"
     },
+    "synced-lyrics": {
+      "description": "Provides synced lyrics to songs, using providers like LRClib.",
+      "name": "Synced Lyrics",
+      "errors": {
+        "fetch": "⚠️ - An error occurred while fetching the lyrics. Please try again later.",
+        "not-found": "⚠️ - No lyrics found for this song."
+      },
+      "warnings": {
+        "instrumental": "⚠️ - This is an instrumental song",
+        "inexact": "⚠️ - The lyrics for this song may not be exact",
+        "duration-mismatch": "⚠️ - The lyrics may be out of sync due to a duration mismatch."
+      },
+      "refetch-btn": {
+        "normal": "Refetch lyrics",
+        "fetching": "Fetching..."
+      }
+    },
     "taskbar-mediacontrol": {
       "description": "Control playback from your Windows taskbar",
       "name": "Taskbar Media Control"

src/plugins/lyrics-genius/renderer.ts

@@ -77,6 +77,7 @@ export const onRendererLoad = ({
           applyLyricsTabState();
         }
       };
+
       const applyLyricsTabState = () => {
         if (lyrics) {
           tabs.lyrics.removeAttribute('disabled');
@@ -86,6 +87,7 @@ export const onRendererLoad = ({
           tabs.lyrics.setAttribute('aria-disabled', '');
         }
       };
+
       const lyricsTabHandler = () => {
         const tabContainer = document.querySelector('ytmusic-tab-renderer');
         if (!tabContainer) return;

src/plugins/synced-lyrics/index.ts

@@ -0,0 +1,28 @@
+import style from './style.css?inline';
+import { createPlugin } from '@/utils';
+
+import { SyncedLyricsPluginConfig } from './types';
+
+import { menu } from './menu';
+import { renderer } from './renderer';
+
+import { t } from '@/i18n';
+
+export default createPlugin({
+  name: () => t('plugins.synced-lyrics.name'),
+  description: () => t('plugins.synced-lyrics.description'),
+  authors: ['Non0reo', 'ArjixWasTaken'],
+  restartNeeded: true,
+  addedVersion: '3.4.X',
+  config: {
+    preciseTiming: true,
+    showLyricsEvenIfInexact: true,
+    showTimeCodes: false,
+    defaultTextString: '♪',
+    lineEffect: 'scale',
+  } as SyncedLyricsPluginConfig,
+
+  menu,
+  renderer,
+  stylesheets: [style],
+});

src/plugins/synced-lyrics/menu.ts

@@ -0,0 +1,138 @@
+import { MenuItemConstructorOptions } from 'electron';
+
+import { MenuContext } from '@/types/contexts';
+import { SyncedLyricsPluginConfig } from './types';
+
+export const menu = async ({
+  getConfig,
+  setConfig,
+}: MenuContext<SyncedLyricsPluginConfig>): Promise<
+  MenuItemConstructorOptions[]
+> => {
+  const config = await getConfig();
+
+  return [
+    {
+      label: 'Make the lyrics perfectly synced',
+      toolTip:
+        'Calculate to the milisecond the display of the next line (can have a small impact on performance)',
+      type: 'checkbox',
+      checked: config.preciseTiming,
+      click(item) {
+        setConfig({
+          preciseTiming: item.checked,
+        });
+      },
+    },
+    {
+      label: 'Line effect',
+      toolTip: 'Choose the effect to apply to the current line',
+      type: 'submenu',
+      submenu: [
+        {
+          label: 'Scale',
+          toolTip: 'Scale the current line',
+          type: 'radio',
+          checked: config.lineEffect === 'scale',
+          click() {
+            setConfig({
+              lineEffect: 'scale',
+            });
+          },
+        },
+        {
+          label: 'Offset',
+          toolTip: 'Offset on the right the current line',
+          type: 'radio',
+          checked: config.lineEffect === 'offset',
+          click() {
+            setConfig({
+              lineEffect: 'offset',
+            });
+          },
+        },
+        {
+          label: 'Focus',
+          toolTip: 'Make only the current line white',
+          type: 'radio',
+          checked: config.lineEffect === 'focus',
+          click() {
+            setConfig({
+              lineEffect: 'focus',
+            });
+          },
+        },
+      ],
+    },
+    {
+      label: 'Default character between lyrics',
+      toolTip: 'Choose the default string to use for the gap between lyrics',
+      type: 'submenu',
+      submenu: [
+        {
+          label: '♪',
+          type: 'radio',
+          checked: config.defaultTextString === '♪',
+          click() {
+            setConfig({
+              defaultTextString: '♪',
+            });
+          },
+        },
+        {
+          label: '[SPACE]',
+          type: 'radio',
+          checked: config.defaultTextString === ' ',
+          click() {
+            setConfig({
+              defaultTextString: ' ',
+            });
+          },
+        },
+        {
+          label: '...',
+          type: 'radio',
+          checked: config.defaultTextString === '...',
+          click() {
+            setConfig({
+              defaultTextString: '...',
+            });
+          },
+        },
+        {
+          label: '———',
+          type: 'radio',
+          checked: config.defaultTextString === '———',
+          click() {
+            setConfig({
+              defaultTextString: '———',
+            });
+          },
+        },
+      ],
+    },
+    {
+      label: 'Show time codes',
+      toolTip: 'Show the time codes next to the lyrics',
+      type: 'checkbox',
+      checked: config.showTimeCodes,
+      click(item) {
+        setConfig({
+          showTimeCodes: item.checked,
+        });
+      },
+    },
+    {
+      label: 'Show lyrics even if inexact',
+      toolTip:
+        'If the song is not found, the plugin tries again with a different search query.\nThe result from the second attempt may not be exact.',
+      type: 'checkbox',
+      checked: config.showLyricsEvenIfInexact,
+      click(item) {
+        setConfig({
+          showLyricsEvenIfInexact: item.checked,
+        });
+      },
+    },
+  ];
+};