bugfix/feat: Lyric enhancement

package.json

@@ -13,10 +13,10 @@
   },
   "devDependencies": {
     "@babel/core": "^7.12.13",
-    "@babel/preset-env": "^7.12.13",
+    "@babel/preset-env": "^7.22.15",
     "@babel/preset-react": "^7.12.13",
     "@babel/preset-typescript": "^7.12.16",
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.11",
     "@types/react": "^17.0.1",
     "@types/react-dom": "^17.0.0",
     "@typescript-eslint/eslint-plugin": "^4.15.0",
@@ -29,27 +29,27 @@
     "eslint-config-airbnb": "^18.2.1",
     "eslint-config-prettier": "^7.2.0",
     "eslint-import-resolver-webpack": "^0.13.0",
-    "eslint-plugin-import": "2.22.1",
+    "eslint-plugin-import": "^2.28.1",
     "eslint-plugin-jsx-a11y": "6.4.1",
     "eslint-plugin-react": "7.21.5",
     "eslint-plugin-react-hooks": "^4.2.0",
+    "file-loader": "4.3.0",
     "html-webpack-plugin": "^5.0.0",
     "lodash": "^4.17.20",
     "mini-css-extract-plugin": "^1.3.6",
     "node-sass": "^5.0.0",
     "prettier": "^2.2.1",
     "progress-bar-webpack-plugin": "^2.1.0",
+    "react-jinke-music-player": "^4.24.2",
+    "react-lrc": "^2.1.4",
     "react-refresh": "^0.9.0",
     "sass-loader": "^11.0.1",
     "style-loader": "^2.0.0",
     "typescript": "^4.1.4",
-    "webpack": "^5.21.2",
+    "webpack": "^5.88.2",
     "webpack-cli": "4.9.0",
     "webpack-config-utils": "^2.3.1",
-    "webpack-dev-server": "^4.0.0",
-    "react-jinke-music-player": "^4.24.2",
-    "react-lrc": "^2.1.4",
-    "file-loader": "4.3.0"
+    "webpack-dev-server": "^4.0.0"
   },
   "browserslist": [
     "chrome >= 72",

public/manifest.json

@@ -1,6 +1,6 @@
 {
   "name": "电梓播放器-第三方bilibili音频播放器",
-  "version": "1.2.0.0",
+  "version": "1.3.0.0",
   "description":"电梓播放器 / azusa-player: 一个第三方哔哩哔哩(bilibili.com)音频播放器 / A 3rd party Bilibili audio player.",
   "manifest_version": 3,
   "background": {
@@ -34,7 +34,8 @@
     "*://*.hdslb.com/*",
     "*://*.cgvideo.com/*",
     "*://*.y.qq.com/*",
-    "*://*.bilivideo.cn/*"
+    "*://*.bilivideo.cn/*",
+    "*://*.akamaized.net/*"
   ],
   "declarative_net_request": {
     "rule_resources": [{

public/rules.json

@@ -20,5 +20,16 @@
           ]
         },
         "condition": { "urlFilter" : "y.qq.com"  }
+      },
+      {
+        "id": 3,
+        "priority": 1,
+        "action": {
+          "type": "modifyHeaders",
+          "requestHeaders": [
+            { "header": "referer", "operation": "set", "value": "https://www.bilibili.com/" }
+          ]
+        },
+        "condition": { "urlFilter" : "akamaized" }
       }
   ]

src/components/Lyric.js

@@ -32,15 +32,25 @@ export const Lyric = withStyles(styles)((props) => {
     const [lyric, setLyric] = useState('')
     const [songTitle, setSongTitle] = useState('')
     const [favListID, setFavListID] = useState(null)
+    const [localOption, setLocalOption] = useState(null)
 
     const { classes, currentTime, audioName, audioId, audioCover, artist } = props;
     const StorageManager = useContext(StorageManagerCtx)
 
     useEffect(() => {
-        const extractedName = extractSongName(audioName, artist)
-        // console.log('Lrc changed to %s', extractedName)
-        // fetchLRC(audioName, setLyric, setSongTitle)
-        setSongTitle(extractedName)
+        async function initLyric() {
+            const detail = await StorageManager.getLyricDetail(audioId.toString())
+            console.log('Calling InitLyric with', detail)
+            if (undefined != detail) {
+                setLyricOffset(detail.lrcOffset)
+                setLocalOption(detail)
+            }
+            const extractedName = extractSongName(audioName, artist)
+            console.log('Lrc changed to %s', extractedName)
+            // fetchLRC(audioName, setLyric, setSongTitle)
+            setSongTitle(extractedName)
+        }
+        initLyric()
     }, [audioName])
 
     const onEnterPress = (e) => {
@@ -84,7 +94,7 @@ export const Lyric = withStyles(styles)((props) => {
     return (
         <React.Fragment>
 
-            <Grid container spacing={1} sx={{ maxHeight: '100vh',minHeight: '100vh', overflow: 'hidden' }}>
+            <Grid container spacing={1} sx={{ maxHeight: '100vh', minHeight: '100vh', overflow: 'hidden' }}>
                 <Grid align="center" sx={{ alignItems: 'center', paddingBottom: 10, overflow: "hidden", minHeight: 'calc(100% - 100px)' }} item xs={6}>
                     <Grid container spacing={0} sx={{ maxHeight: '100vh', overflow: 'hidden', marginTop: '50px' }}>
                         <Grid align="center" sx={{ paddingTop: '8px', paddingLeft: '2px', overflow: "hidden" }} item xs={12}>
@@ -129,6 +139,7 @@ export const Lyric = withStyles(styles)((props) => {
                                 SongId={audioId}
                                 setLyricOffset={setLyricOffset}
                                 setLyric={onSongTitleChange}
+                                localOption={localOption}
                             />
                         </Grid>
 

src/components/LyricSearchBar.js

@@ -4,7 +4,7 @@ import Autocomplete from '@mui/material/Autocomplete';
 import { searchLyricOptions, searchLyric } from '../utils/Data'
 import StorageManagerCtx from '../popup/App'
 
-export const LyricSearchBar = function ({ SearchKey, SongId, setLyric, setLyricOffset }) {
+export const LyricSearchBar = function ({ SearchKey, SongId, setLyric, localOption }) {
     const [options, setOptions] = useState([])
     const [value, setValue] = useState('');
     const StorageManager = useContext(StorageManagerCtx)
@@ -16,26 +16,12 @@ export const LyricSearchBar = function ({ SearchKey, SongId, setLyric, setLyricO
     }, [SearchKey])
 
     useEffect(() => {
-        if (options.length == 0)
-            return
-        async function initLyric() {
-            const detail = await StorageManager.getLyricDetail(SongId.toString())
-            if (undefined != detail) {
-                setLyricOffset(detail.lrcOffset)
-                const index = options.findIndex(v => v.songMid == detail.lrc.songMid)
-                if (index != -1){
-                    onOptionSet({},options[index])
-                    return
-                }
-                else{
-                    options.unshift(detail.lrc)
-                    setOptions(options)
-                }
-            }
+        if (undefined != localOption)
+            searchLyric(localOption.lrc.songMid, setLyric)
+        else if(options.length > 0 ){
             onOptionSet({}, options[0])
         }
-        initLyric()
-    }, [options])
+    }, [options, localOption])
 
     const onOptionSet = (e, newValue) => {
         if (newValue != undefined) {

src/utils/Data.js

@@ -44,6 +44,37 @@ const COUNT_HEADER_GIFS = 12
 const URL_QQ_SEARCH = "https://c.y.qq.com/splcloud/fcgi-bin/smartbox_new.fcg?key={KeyWord}"
 // QQ LyricSearchAPI
 const URL_QQ_LYRIC = "https://i.y.qq.com/lyric/fcgi-bin/fcg_query_lyric_new.fcg?songmid={SongMid}&g_tk=5381&format=json&inCharset=utf8&outCharset=utf-8&nobase64=1"
+/**
+ *  QQ SongSearch API POST
+ */
+const URL_QQ_SEARCH_POST = {
+    src: 'https://u.y.qq.com/cgi-bin/musicu.fcg',
+    params: {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      referrer: 'https://u.qq.com/',
+      body: {
+        comm: {
+          ct: '19',
+          cv: '1859',
+          uin: '0',
+        },
+        req: {
+          method: 'DoSearchForQQMusicDesktop',
+          module: 'music.search.SearchCgiService',
+          param: {
+            grp: 1,
+            num_per_page: 20,
+            page_num: 1,
+            query: '',
+            search_type: 0,
+          },
+        },
+      },
+    },
+  };
 
 export const fetchPlayUrlPromise = async (bvid, cid) => {
     // Fetch cid from bvid if needed
@@ -53,10 +84,10 @@ export const fetchPlayUrlPromise = async (bvid, cid) => {
     // Returns a promise that resolves into the audio stream url
     return (new Promise((resolve, reject) => {
         // console.log('Data.js Calling fetchPlayUrl:' + URL_PLAY_URL.replace("{bvid}", bvid).replace("{cid}", cid))
-        chrome.storage.local.get(['CurrentPlaying','PlayerSetting'], function (result) {
+        chrome.storage.local.get(['CurrentPlaying', 'PlayerSetting'], function (result) {
             // To prohibit current playing audio from fetching a new audio stream
             // If single loop, retreive the promise again.
-            if (result.CurrentPlaying && result.CurrentPlaying.cid == cid && result.PlayerSetting.playMode != 'singleLoop'){
+            if (result.CurrentPlaying && result.CurrentPlaying.cid == cid && result.PlayerSetting.playMode != 'singleLoop') {
                 resolve(result.playUrl)
             }
             else {
@@ -136,7 +167,7 @@ export const fetchBiliSeriesInfo = async (mid, sid) => {
     let res = await fetch(URL_BILISERIES_INFO.replace('{mid}', mid).replace('{sid}', sid).replace('{pn}', page))
     let json = await res.json()
     let data = json.data
-    
+
     const BVidPromises = []
     for (let i = 0; i < data.archives.length; i++) {
         BVidPromises.push(fetchVideoInfo(data.archives[i].bvid))
@@ -211,7 +242,7 @@ export const fetchFavList = async (mid) => {
         .then(async function (v) {
             // console.log(BVidPromises)
             for (let index = 0; index < v.length; index++) {
-                await v[index].json().then(js => 
+                await v[index].json().then(js =>
                     js.data.has_more
                     &&
                     js.data.medias.map(m => BVidPromises.push(fetchVideoInfo(m.bvid))))
@@ -263,9 +294,39 @@ export const searchLyricOptions = async (searchKey, setOptions, setLyric) => {
     const data = json.data.song.itemlist
     const slimData = data.map((s, v) => { return { key: s.mid, songMid: s.mid, label: v + '. ' + s.name + ' / ' + s.singer } })
 
-    setOptions(slimData)
+    if(slimData.length)
+        setOptions(slimData)
+    else
+        searchLyricOptionsFallBack(searchKey, setOptions, setLyric)
 }
 
+export const searchLyricOptionsFallBack = async (searchKey, setOptions, setLyric) => {
+    logger.info("calling searchLyricOptions")
+    if (searchKey == "") {
+        setOptions([])
+        return
+    }
+    logger.info(`calling searchLyricOptionsFallBack: ${searchKey}`);
+    const API = getQQSearchAPI(searchKey);
+    const res = await fetch(API.src, API.params);
+    const json = await res.json();
+    console.debug(json);
+    const data = json.req.data.body.song.list;
+    const slimData = data.map((s, v) => ({
+        key: s.mid,
+        songMid: s.mid,
+        label: `${v}. ${s.name} / ${s.singer[0].name}`,
+    }));
+    setOptions(slimData);
+};
+
+const getQQSearchAPI = searchKey => {
+    let API = JSON.parse(JSON.stringify(URL_QQ_SEARCH_POST));
+    API.params.body.req.param.query = searchKey;
+    API.params.body = JSON.stringify(API.params.body);
+    return API;
+};
+
 export const searchLyric = async (searchMID, setLyric) => {
     logger.info("calling searchLyric")
     const res = await fetch(URL_QQ_LYRIC.replace("{SongMid}", searchMID))
@@ -278,9 +339,9 @@ export const searchLyric = async (searchMID, setLyric) => {
     let finalLrc = json.lyric
 
     // Merge trans Lyrics
-    if( json.trans )
-        finalLrc = json.trans + '\n' +  finalLrc
-    
+    if (json.trans)
+        finalLrc = json.trans + '\n' + finalLrc
+
     // console.log(finalLrc)
     setLyric(finalLrc)
 }