Enable spotify built-in lyrics

Closed #55

Author: mantou132

Diff for: src/page/lyrics.ts

@@ -12,12 +12,12 @@ export interface Query {
   artists: string;
 }
 
-export interface Artist {
+interface Artist {
   name: string;
   alias: string[];
   transNames?: string[];
 }
-export interface Album {
+interface Album {
   name: string;
 }
 export interface Song {
@@ -159,15 +159,14 @@ async function fetchSongList(s: string, fetchOptions?: RequestInit): Promise<Son
     limit: '100',
   });
   const options = await optionsPromise;
-  const fetchPromise = request(`${API_HOST}/search?${searchQuery}`, fetchOptions);
-  if (!options['use-unreviewed-lyrics']) {
-    const { result }: SearchSongsResult = await fetchPromise;
-    return result?.songs || [];
-  }
+  const fetchPromise: Promise<SearchSongsResult> = request(
+    `${API_HOST}/search?${searchQuery}`,
+    fetchOptions,
+  );
   try {
-    const { result }: SearchSongsResult = await fetchPromise;
-    return result?.songs || [];
+    return (await fetchPromise).result?.songs || [];
   } catch (err) {
+    if (!options['use-unreviewed-lyrics']) throw err;
     console.error(err);
     return [];
   }

Diff for: src/page/observer.ts

@@ -4,7 +4,7 @@ import { insetLyricsBtn } from './btn';
 import { sharedData } from './share-data';
 import { generateCover } from './cover';
 import { captureException, documentQueryHasSelector } from './utils';
-import { SpotifyTrackLyrics, SpotifyTrackMetadata } from './types';
+import type { SpotifyTrackMetadata, SpotifyTrackColorLyrics } from './types';
 
 let loginResolve: (value?: unknown) => void;
 export const loggedPromise = new Promise((res) => (loginResolve = res));
@@ -133,40 +133,44 @@ let latestHeader = new Headers();
 globalThis.fetch = async (...rest) => {
   const res = await originFetch(...rest);
   const url = new URL(rest[0] instanceof Request ? rest[0].url : rest[0], location.origin);
+
   const spotifyAPI = 'https://spclient.wg.spotify.com';
   if (url.origin === spotifyAPI && url.pathname.startsWith('/metadata/4/track/')) {
     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,
-    // });
+    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 }) => {
+            // https://github.com/mantou132/Spotify-Lyrics/issues/55
+            const res = await fetch(
+              `${spotifyAPI}/color-lyrics/v2/track/${trackId}?format=json&vocalRemoval=false&market=from_token`,
+              {
+                headers: latestHeader,
+                signal,
+              },
+            );
+            if (!res.ok) return '';
+            const { lyrics: spLyrics }: SpotifyTrackColorLyrics = await res.json();
+            console.log(spLyrics);
+            if (spLyrics.syncType !== 'LINE_SYNCED') return '';
+            return spLyrics.lines
+              .map(({ startTimeMs, words }) => {
+                const sec = Number(startTimeMs) / 1000;
+                return `[${Math.floor(sec / 60)}:${sec % 60}]\n${words}`;
+              })
+              .flat()
+              .join('\n');
+          }
+        : undefined,
+    });
   }
   return res;
 };

Diff for: src/page/share-data.ts

@@ -150,10 +150,8 @@ export class SharedData {
   }
 
   private async _getLyricsFromBuiltIn(fetchOptions: RequestInit) {
-    return parseLyrics(
-      await getCache(this.name, this.artists).getLyrics(fetchOptions),
-      await this._getParseLyricsOptions(),
-    );
+    const lrc = await getCache(this.name, this.artists).getLyrics(fetchOptions);
+    return parseLyrics(lrc, await this._getParseLyricsOptions());
   }
 
   private async _fetchHighlight(fetchOptions: RequestInit) {
@@ -204,22 +202,35 @@ export class SharedData {
     this._list = list;
     const reviewed = options['use-unreviewed-lyrics'] === 'on' || remoteData?.reviewed;
     const isSelf = remoteData?.user === options.cid;
+
+    // 1. use uploaded lyrics
     if (isSelf && remoteData?.lyric) {
       this._lyrics = parseLyrics(remoteData.lyric, parseLyricsOptions);
       sendEvent(options.cid, events.useRemoteLyrics);
-    } else if (isSelf && remoteData?.neteaseID) {
+    }
+
+    // 2. use selected lyrics
+    else if (isSelf && remoteData?.neteaseID) {
       this._id = remoteData.neteaseID;
       this._aId = this._id;
       this._lyrics = await this._getLyricsFromNetEase(fetchOptions);
-    } else if (reviewed && remoteData?.lyric) {
+    }
+
+    // 3. use other user upload lyrics
+    else if (reviewed && remoteData?.lyric) {
       this._lyrics = parseLyrics(remoteData.lyric, parseLyricsOptions);
       sendEvent(options.cid, events.useRemoteLyrics);
-    } else {
+    }
+
+    // **default behavior**
+    // 4. use build-in lyrics or netease lyrics
+    else {
       this._id = (reviewed ? remoteData?.neteaseID || id : id || remoteData?.neteaseID) || 0;
       this._aId = this._id;
+      // Allow adjustment order
       const getLyricsList = [
-        this._getLyricsFromBuiltIn.bind(this),
         this._getLyricsFromNetEase.bind(this),
+        this._getLyricsFromBuiltIn.bind(this),
       ];
       try {
         this._lyrics = await getLyricsList[0](fetchOptions);
@@ -240,6 +251,8 @@ export class SharedData {
       const ev = (performance.now() - startTime).toFixed();
       sendEvent(options.cid, { ev, ...events.loadLyrics }, { cd1: this.cd1 });
     }
+
+    // 5. use song highlight
     this._fetchHighlight(fetchOptions);
   }
 

Diff for: src/page/types.ts

@@ -419,3 +419,60 @@ const spotifyTrackLyrics = {
 };
 
 export type SpotifyTrackLyrics = typeof spotifyTrackLyrics;
+
+const spotifyTrackColorLyrics = {
+  lyrics: {
+    syncType: 'UNSYNCED',
+    lines: [
+      {
+        startTimeMs: '0',
+        words: 'Help me see',
+        syllables: [],
+        endTimeMs: '0',
+      },
+      {
+        startTimeMs: '0',
+        words: 'Maybe I should be my own thing',
+        syllables: [],
+        endTimeMs: '0',
+      },
+      {
+        startTimeMs: '0',
+        words: "'Cause I'm guessing",
+        syllables: [],
+        endTimeMs: '0',
+      },
+      {
+        startTimeMs: '0',
+        words: 'That time will pass',
+        syllables: [],
+        endTimeMs: '0',
+      },
+      {
+        startTimeMs: '0',
+        words: "There'll be nothing left inside me",
+        syllables: [],
+        endTimeMs: '0',
+      },
+    ],
+    provider: 'MusixMatch',
+    providerLyricsId: '95349346',
+    providerDisplayName: 'Musixmatch',
+    syncLyricsUri: '',
+    isDenseTypeface: false,
+    alternatives: [],
+    language: 'en',
+    isRtlLanguage: false,
+    showUpsell: true,
+    capStatus: 'NONE',
+    isSnippet: true,
+  },
+  colors: {
+    background: -9013642,
+    text: -16777216,
+    highlightText: -1,
+  },
+  hasVocalRemoval: false,
+};
+
+export type SpotifyTrackColorLyrics = typeof spotifyTrackColorLyrics;