feat(synced-lyrics): multiple lyric sources (#2383)

Co-authored-by: JellyBrick <[email protected]>

Author: ArjixWasTaken

package.json

@@ -195,6 +195,7 @@
     "start": "electron-vite preview",
     "start:debug": "cross-env ELECTRON_ENABLE_LOGGING=1 pnpm start",
     "dev": "cross-env NODE_OPTIONS=--enable-source-maps electron-vite dev --watch",
+    "dev:renderer": "cross-env NODE_OPTIONS=--enable-source-maps electron-vite dev",
     "dev:debug": "cross-env ELECTRON_ENABLE_LOGGING=1 pnpm dev",
     "clean": "del-cli dist && del-cli pack && del-cli .vite-inspect",
     "dist": "pnpm clean && pnpm build && pnpm electron-builder --win --mac --linux -p never",

src/i18n/resources/en.json

@@ -714,8 +714,8 @@
     "synced-lyrics": {
       "description": "Provides synced lyrics to songs, using providers like LRClib.",
       "errors": {
-        "fetch": "⚠️ - An error occurred while fetching the lyrics. Please try again later.",
-        "not-found": "⚠️ - No lyrics found for this song."
+        "fetch": "⚠️\tAn error occurred while fetching the lyrics.\n\tPlease try again later.",
+        "not-found": "⚠️ No lyrics found for this song."
       },
       "menu": {
         "default-text-string": {

src/index.ts

@@ -132,7 +132,7 @@ if (config.get('options.disableHardwareAcceleration')) {
 
 if (is.linux()) {
   // Overrides WM_CLASS for X11 to correspond to icon filename
-  app.setName("com.github.th_ch.youtube_music");
+  app.setName('com.github.th_ch.youtube_music');
 
   // Workaround for issue #2248
   if (
@@ -904,9 +904,19 @@ function removeContentSecurityPolicy(
   betterSession.webRequest.onHeadersReceived((details, callback) => {
     details.responseHeaders ??= {};
 
-    // Remove the content security policy
-    delete details.responseHeaders['content-security-policy-report-only'];
-    delete details.responseHeaders['content-security-policy'];
+    // prettier-ignore
+    if (new URL(details.url).protocol === 'https:') {
+      // Remove the content security policy
+      delete details.responseHeaders['content-security-policy-report-only'];
+      delete details.responseHeaders['Content-Security-Policy-Report-Only'];
+      delete details.responseHeaders['content-security-policy'];
+      delete details.responseHeaders['Content-Security-Policy'];
+
+      // Only allow cross-origin requests from music.youtube.com
+      delete details.responseHeaders['access-control-allow-origin'];
+      delete details.responseHeaders['Access-Control-Allow-Origin'];
+      details.responseHeaders['access-control-allow-origin'] = ['https://music.youtube.com'];
+    }
 
     callback({ cancel: false, responseHeaders: details.responseHeaders });
   });

src/plugins/lyrics-genius/types.ts

@@ -18,8 +18,8 @@ export interface Section {
 
 export interface Hit {
   highlights: Highlight[];
-  index: Index;
-  type: Index;
+  index: ResultType;
+  type: ResultType;
   result: Result;
 }
 
@@ -35,14 +35,10 @@ export interface Range {
   end: number;
 }
 
-export enum Index {
-  Album = 'album',
-  Lyric = 'lyric',
-  Song = 'song',
-}
+export type ResultType = 'song' | 'album' | 'lyric';
 
 export interface Result {
-  _type: Index;
+  _type: ResultType;
   annotation_count?: number;
   api_path: string;
   artist_names?: string;

src/plugins/synced-lyrics/index.ts

@@ -20,7 +20,7 @@ export default createPlugin({
     showTimeCodes: false,
     defaultTextString: '♪',
     lineEffect: 'scale',
-  } satisfies SyncedLyricsPluginConfig,
+  } as SyncedLyricsPluginConfig,
 
   menu,
   renderer,

src/plugins/synced-lyrics/menu.ts

@@ -5,13 +5,10 @@ import { t } from '@/i18n';
 import type { MenuContext } from '@/types/contexts';
 import type { SyncedLyricsPluginConfig } from './types';
 
-export const menu = async ({
-  getConfig,
-  setConfig,
-}: MenuContext<SyncedLyricsPluginConfig>): Promise<
+export const menu = async (ctx: MenuContext<SyncedLyricsPluginConfig>): Promise<
   MenuItemConstructorOptions[]
 > => {
-  const config = await getConfig();
+  const config = await ctx.getConfig();
 
   return [
     {
@@ -20,7 +17,7 @@ export const menu = async ({
       type: 'checkbox',
       checked: config.preciseTiming,
       click(item) {
-        setConfig({
+        ctx.setConfig({
           preciseTiming: item.checked,
         });
       },
@@ -40,7 +37,7 @@ export const menu = async ({
           type: 'radio',
           checked: config.lineEffect === 'scale',
           click() {
-            setConfig({
+            ctx.setConfig({
               lineEffect: 'scale',
             });
           },
@@ -55,7 +52,7 @@ export const menu = async ({
           type: 'radio',
           checked: config.lineEffect === 'offset',
           click() {
-            setConfig({
+            ctx.setConfig({
               lineEffect: 'offset',
             });
           },
@@ -70,7 +67,7 @@ export const menu = async ({
           type: 'radio',
           checked: config.lineEffect === 'focus',
           click() {
-            setConfig({
+            ctx.setConfig({
               lineEffect: 'focus',
             });
           },
@@ -87,7 +84,7 @@ export const menu = async ({
           type: 'radio',
           checked: config.defaultTextString === '♪',
           click() {
-            setConfig({
+            ctx.setConfig({
               defaultTextString: '♪',
             });
           },
@@ -97,7 +94,7 @@ export const menu = async ({
           type: 'radio',
           checked: config.defaultTextString === ' ',
           click() {
-            setConfig({
+            ctx.setConfig({
               defaultTextString: ' ',
             });
           },
@@ -107,7 +104,7 @@ export const menu = async ({
           type: 'radio',
           checked: config.defaultTextString === '...',
           click() {
-            setConfig({
+            ctx.setConfig({
               defaultTextString: '...',
             });
           },
@@ -117,7 +114,7 @@ export const menu = async ({
           type: 'radio',
           checked: config.defaultTextString === '———',
           click() {
-            setConfig({
+            ctx.setConfig({
               defaultTextString: '———',
             });
           },
@@ -130,7 +127,7 @@ export const menu = async ({
       type: 'checkbox',
       checked: config.showTimeCodes,
       click(item) {
-        setConfig({
+        ctx.setConfig({
           showTimeCodes: item.checked,
         });
       },
@@ -143,7 +140,7 @@ export const menu = async ({
       type: 'checkbox',
       checked: config.showLyricsEvenIfInexact,
       click(item) {
-        setConfig({
+        ctx.setConfig({
           showLyricsEvenIfInexact: item.checked,
         });
       },

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

@@ -0,0 +1,89 @@
+interface LRCTag {
+  tag: string;
+  value: string;
+}
+
+interface LRCLine {
+  time: string;
+  timeInMs: number;
+  duration: number;
+  text: string;
+}
+
+interface LRC {
+  tags: LRCTag[];
+  lines: LRCLine[];
+}
+
+const tagRegex = /^\[(?<tag>\w+):\s*(?<value>.+?)\s*\]$/;
+// prettier-ignore
+const lyricRegex = /^\[(?<minutes>\d+):(?<seconds>\d+)\.(?<milliseconds>\d+)\](?<text>.+)$/;
+
+export const LRC = {
+  parse: (text: string): LRC => {
+    const lrc: LRC = {
+      tags: [],
+      lines: [],
+    };
+
+    let offset = 0;
+    let previousLine: LRCLine | null = null;
+
+    for (const line of text.split('\n')) {
+      if (!line.trim().startsWith('[')) continue;
+
+      const lyric = line.match(lyricRegex)?.groups;
+      if (!lyric) {
+        const tag = line.match(tagRegex)?.groups;
+        if (tag) {
+          if (tag.tag === 'offset') {
+            offset = parseInt(tag.value);
+            continue;
+          }
+
+          lrc.tags.push({
+            tag: tag.tag,
+            value: tag.value,
+          });
+        }
+        continue;
+      }
+
+      const { minutes, seconds, milliseconds, text } = lyric;
+      const timeInMs =
+        parseInt(minutes) * 60 * 1000 +
+        parseInt(seconds) * 1000 +
+        parseInt(milliseconds);
+
+      const currentLine: LRCLine = {
+        time: `${minutes}:${seconds}:${milliseconds}`,
+        timeInMs,
+        text: text.trim(),
+        duration: Infinity,
+      };
+
+      if (previousLine) {
+        previousLine.duration = timeInMs - previousLine.timeInMs;
+      }
+
+      previousLine = currentLine;
+      lrc.lines.push(currentLine);
+    }
+
+    for (const line of lrc.lines) {
+      line.timeInMs += offset;
+    }
+
+    const first = lrc.lines.at(0);
+    if (first && first.timeInMs > 300) {
+      lrc.lines.unshift({
+        time: '0:0:0',
+        timeInMs: 0,
+        duration: first.timeInMs,
+        text: '',
+      });
+    }
+
+    return lrc;
+  },
+};