Add lyrics server option

Closed #128

package.json

@@ -1,6 +1,6 @@
 {
   "name": "spotify-lyrics",
-  "version": "1.6.6",
+  "version": "1.6.7",
   "description": "Desktop Spotify Web Player Instant Synchronized Lyrics",
   "scripts": {
     "lint": "tsc --noEmit && eslint --ext .ts --fix src/",

public/_locales/en/messages.json

@@ -128,6 +128,10 @@
     "message": "Lyrics transform"
   },
 
+  "optionsLyricsServer": {
+    "message": "Lyrics server"
+  },
+
   "optionsLyricsTransformDetail": {
     "message": "When using simplified Chinese, try to load the translated lyrics"
   },

public/_locales/zh/messages.json

@@ -99,6 +99,10 @@
     "message": "歌词转换"
   },
 
+  "optionsLyricsServer": {
+    "message": "歌词服务"
+  },
+
   "optionsLyricsTransformDetail": {
     "message": "当使用简体中文时会尝试加载翻译的歌词"
   },

public/manifest.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/extend-chrome/manifest-json-schema/main/schema/manifest.schema.json",
   "name": "__MSG_extensionName__",
-  "version": "1.6.6",
+  "version": "1.6.7",
   "manifest_version": 3,
   "description": "__MSG_extensionDescription__",
   "default_locale": "en",

src/common/constants.ts

@@ -38,6 +38,7 @@ export const LyricsPositions = ['page', 'pip'] as const;
 export const LyricsAlign = ['left', 'center'] as const;
 export const LyricsFontFamily = ['CircularSp', 'Sans-Serif', 'Serif', 'Cursive'] as const;
 export const LyricsTransform = ['Origin', 'Simplified', 'Traditional'] as const;
+export const LyricsServer = ['NetEase', 'LRCLIB'] as const;
 export interface Options {
   cid: string;
   'font-size': string;
@@ -52,6 +53,7 @@ export interface Options {
   /**@deprecated */
   'traditional-chinese-lyrics': SwitchValue;
   'lyrics-transform': (typeof LyricsTransform)[number];
+  'lyrics-server': (typeof LyricsServer)[number];
   /**@deprecated */
   'lyrics-smooth-scroll'?: SwitchValue;
   'strict-mode'?: SwitchValue;

src/options/app.ts

@@ -7,6 +7,7 @@ import {
   LyricsAlign,
   LyricsFontFamily,
   LyricsTransform,
+  LyricsServer,
 } from '../common/constants';
 import { sendEvent, events } from '../common/ga';
 import { theme } from '../common/theme';
@@ -196,6 +197,13 @@ export class OptionsApp extends GemElement<State> {
             default-value=${options['use-unreviewed-lyrics']}
           ></ele-switch>
         </ele-form-item>
+        <ele-form-item label="${i18n.optionsLyricsServer()} *">
+          <ele-select
+            name=${'lyrics-server' as keyof Options}
+            default-value=${options['lyrics-server']}
+            .options=${LyricsServer.map((e) => ({ label: e, value: e }))}
+          ></ele-select>
+        </ele-form-item>
       </ele-form>
       <ul class="tip">
         <li>* ${i18n.optionsSaveTip1()}</li>

src/options/store.ts

@@ -18,6 +18,7 @@ const defaultOptions: Options = {
   'toggle-shortcut': 'l',
   'traditional-chinese-lyrics': uiLanguage === 'zh-TW' || uiLanguage === 'zh-HK' ? 'on' : 'off',
   'lyrics-transform': 'Origin',
+  'lyrics-server': 'NetEase',
 };
 
 export async function getOptions() {

src/page/share-data.ts

@@ -16,6 +16,8 @@ import { optionsPromise } from './options';
 import { captureException, querySelector } from './utils';
 import { audioPromise } from './element';
 import { configPromise } from './config';
+import { fetchNetEaseSongList } from './netease';
+import { fetchLRCLIBSongList } from './lrclib';
 
 interface CacheReq {
   name: string;
@@ -186,6 +188,8 @@ export class SharedData {
     const parseLyricsOptions = await this._getParseLyricsOptions();
     const [{ list, id }, remoteData] = await Promise.all([
       matchingLyrics(this.req, {
+        fetchSongList:
+          options['lyrics-server'] === 'NetEase' ? fetchNetEaseSongList : fetchLRCLIBSongList,
         getDuration: async () => {
           const audioMetadataLoaded = new Promise<any>((res) =>
             audio.addEventListener('loadedmetadata', res, { once: true }),

src/page/utils.ts

@@ -28,9 +28,10 @@ export function documentQueryHasSelector(s: string) {
 }
 
 export function querySelectorAll(selector: string) {
-  const [rootSelector, sub] = selector.split('>>');
-  if (sub) {
-    const root = querySelector(rootSelector);
+  const parts = selector.split('>>');
+  if (parts.length > 1) {
+    const sub = parts.pop()!;
+    const root = querySelector(parts.join('>>'));
     return root?.shadowRoot?.querySelectorAll(sub);
   }
   return document.querySelectorAll(selector);