feat: remove spotify built in lyrics

mantou132 · Jun 2, 2024 · f342697 · f342697
1 parent 83e2b99
commit f342697
Show file tree

Hide file tree

Showing 6 changed files with 126 additions and 135 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "spotify-lyrics",
-  "version": "1.6.3",
+  "version": "1.6.4",
   "description": "Desktop Spotify Web Player Instant Synchronized Lyrics",
   "scripts": {
     "lint": "tsc --noEmit && eslint --ext .ts --fix src/",

diff --git a/public/manifest.json b/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.3",
+  "version": "1.6.4",
   "manifest_version": 3,
   "description": "__MSG_extensionDescription__",
   "default_locale": "en",

diff --git a/src/page/lyrics.ts b/src/page/lyrics.ts
@@ -10,8 +10,6 @@ import { captureException } from './utils';
 export interface Query {
   name: string;
   artists: string;
-  /**sec */
-  duration?: number;
 }
 
 export interface Artist {
@@ -177,7 +175,7 @@ async function fetchSongList(s: string, fetchOptions?: RequestInit): Promise<Son
 
 interface MatchingLyricsOptions {
   onlySearchName?: boolean;
-  getAudioElement?: () => HTMLAudioElement | Promise<HTMLAudioElement>;
+  getDuration?: () => Promise<number>;
   fetchData?: (s: string, fetchOptions?: RequestInit) => Promise<Song[]>;
   fetchTransName?: (s: string, fetchOptions?: RequestInit) => Promise<Record<string, string>>;
   fetchOptions?: RequestInit;
@@ -188,21 +186,14 @@ export async function matchingLyrics(
 ): Promise<{ list: Song[]; id: number; score: number }> {
   const { name = '', artists = '' } = query;
   const {
-    getAudioElement,
+    getDuration,
     onlySearchName = false,
     fetchData = fetchSongList,
     fetchTransName = fetchChineseName,
     fetchOptions,
   } = options;
 
-  let duration = query.duration || 0;
-  if (getAudioElement && !duration) {
-    const audio = await getAudioElement();
-    if (!audio.duration) {
-      await new Promise((res) => audio.addEventListener('loadedmetadata', res, { once: true }));
-      duration = audio.duration;
-    }
-  }
+  const duration = (await getDuration?.()) || 0;
 
   const queryName = normalize(name);
   const queryName1 = queryName.toLowerCase();
@@ -361,7 +352,7 @@ export async function matchingLyrics(
       list: listForMissingName,
       score: scoreForMissingName,
     } = await matchingLyrics(query, {
-      getAudioElement,
+      getDuration,
       onlySearchName: true,
       fetchData,
       fetchTransName: async () => singerAlias,

diff --git a/src/page/observer.ts b/src/page/observer.ts
@@ -130,42 +130,43 @@ const originFetch = globalThis.fetch;
 
 let latestHeader = new Headers();
 
-// Priority to detect track switching through API
-// Priority to use build-in lyrics through API
 globalThis.fetch = async (...rest) => {
   const res = await originFetch(...rest);
   const url = new URL(rest[0] instanceof Request ? rest[0].url : rest[0], location.origin);
-  latestHeader = new Headers(rest[0] instanceof Request ? rest[0].headers : rest[1]?.headers);
   const spotifyAPI = 'https://spclient.wg.spotify.com';
   if (url.origin === spotifyAPI && url.pathname.startsWith('/metadata/4/track/')) {
-    const metadata: SpotifyTrackMetadata = await res.clone().json();
-    const { name = '', artist = [], duration = 0, canonical_uri, has_lyrics } = metadata || {};
-    const trackId = canonical_uri?.match(/spotify:track:([^:]*)/)?.[1];
-    // match artists element textContent
-    const artists = artist?.map((e) => e?.name).join(', ');
-    sharedData.cacheTrackAndLyrics({
-      name,
-      artists,
-      duration: duration / 1000,
-      getLyrics: has_lyrics
-        ? async () => {
-            const res = await fetch(`${spotifyAPI}/lyrics/v1/track/${trackId}?market=from_token`, {
-              headers: latestHeader,
-            });
-            const spLyrics: SpotifyTrackLyrics = await res.json();
-            if (spLyrics.kind === 'LINE') {
-              return spLyrics.lines
-                .map(({ time, words }) =>
-                  words.map(({ string }) => ({
-                    startTime: time / 1000,
-                    text: string,
-                  })),
-                )
-                .flat();
-            }
-          }
-        : undefined,
-    });
+    latestHeader = new Headers(rest[0] instanceof Request ? rest[0].headers : rest[1]?.headers);
+
+    // const metadata: SpotifyTrackMetadata = await res.clone().json();
+    // const { name = '', artist = [], duration = 0, canonical_uri, has_lyrics } = metadata || {};
+    // const trackId = canonical_uri?.match(/spotify:track:([^:]*)/)?.[1];
+    // // match artists element textContent
+    // const artists = artist?.map((e) => e?.name).join(', ');
+    // sharedData.cacheTrackAndLyrics({
+    //   name,
+    //   artists,
+    //   duration: duration / 1000,
+    //   getLyrics: has_lyrics
+    //     ? async ({ signal }) => {
+    //         const res = await fetch(`${spotifyAPI}/lyrics/v1/track/${trackId}?market=from_token`, {
+    //           headers: latestHeader,
+    //           signal,
+    //         });
+    //         if (!res.ok) return '';
+    //         const spLyrics: SpotifyTrackLyrics = await res.json();
+    //         if (spLyrics.kind !== 'LINE') return '';
+    //         return spLyrics.lines
+    //           .map(({ time, words }) =>
+    //             words.map(({ string }) => {
+    //               const sec = time / 1000;
+    //               return `[${Math.floor(sec / 60)}:${sec % 60}]\n${string}`;
+    //             }),
+    //           )
+    //           .flat()
+    //           .join('\n');
+    //       }
+    //     : undefined,
+    // });
   }
   return res;
 };
diff --git a/src/page/rate.ts b/src/page/rate.ts
@@ -267,16 +267,16 @@ const key = 'spotify.lyrics.test';
 
 const listPromise = new Promise<Query[]>((res, rej) => {
   const fn = () => {
-    const querys = [...document.querySelectorAll('.tracklist li')].map((item) => {
+    const queryList = [...document.querySelectorAll('.tracklist li')].map((item) => {
       return {
         name: item.querySelector('.tracklist-name')?.textContent || '',
         artists: item.querySelector('.TrackListRow__artists')?.textContent || '',
       };
     });
-    if (!querys.length) {
+    if (!queryList.length) {
       setTimeout(fn, 100);
     } else {
-      res(querys);
+      res(queryList);
     }
   };
   setTimeout(rej, 5000);
@@ -300,14 +300,14 @@ window.addEventListener('load', async () => {
         detail: [],
       };
 
-      const querys = await listPromise;
+      const queryList = await listPromise;
 
       // test
-      querys.length = 1;
+      queryList.length = 1;
 
       await Promise.all(
-        querys.map(async (query, i) => {
-          console.log(`${i + 1}/${querys.length} matching: `, query);
+        queryList.map(async (query, i) => {
+          console.log(`${i + 1}/${queryList.length} matching: `, query);
           const { id } = await matchingLyrics(query);
           if (id === 0) {
             data[location.pathname].noMatch++;