feat: add metadata auto syncing for musics in library

package.json

@@ -11,6 +11,7 @@
     "dev": "npm run generate:dev && webpack serve",
     "lint": "npm run generate && eslint src --report-unused-disable-directives --max-warnings 0",
     "lint:dev": "npm run generate:dev && eslint src --report-unused-disable-directives --max-warnings 0",
+    "test": "node --experimental-strip-types --test src/utils/rangeMetadata.test.ts",
     "lingui": "lingui extract && lingui compile --typescript",
     "generate": "node generate-version-info.mjs && npm run lingui",
     "generate:dev": "node generate-version-info.mjs --dev && npm run lingui"
@@ -34,6 +35,7 @@
     "franc-min": "^6.2.0",
     "idb-keyval": "^6.2.1",
     "music-metadata": "^11.9.0",
+    "p-limit": "^7.3.0",
     "pinyin-pro": "^3.27.0",
     "process": "^0.11.10",
     "react": "^18.3.1",
@@ -88,4 +90,4 @@
     "webpack-merge": "^6.0.1",
     "workbox-webpack-plugin": "^7.3.0"
   }
-}
+}

src/App.tsx

@@ -20,6 +20,7 @@ import useFileNodeSyncStore from './store/useFileNodeSyncStore'
 import { useLiveQuery } from 'dexie-react-hooks'
 import useDb from './hooks/useDb'
 import useTitle from './hooks/ui/useTitle'
+import useMetadataSync from './hooks/graph/useMetadataSync'
 
 const App = () => {
   useEnvironment()
@@ -32,6 +33,7 @@ const App = () => {
   const { account } = useUser()
   useSync()
   useFileNodeSync()
+  useMetadataSync()
 
   const db = useDb(account)
   const libraryRootId = useLiveQuery(async () => (await db?.settings.get('settings'))?.libraryRootId, [db])
@@ -141,4 +143,4 @@ const App = () => {
   )
 }
 
-export default App
+export default App

src/graph/graph.ts

@@ -1,11 +1,13 @@
 import { DeltaResponse, FileResponse, RemoteItem } from '@/types/file'
 import { graphConfig } from './authConfig'
+import { graphFetch, GraphRequestPriority } from './rateLimiter'
 
 export async function getFiles(
   accessToken: string,
   id: string,
   path?: string[],
   nextLink?: string,
+  priority?: GraphRequestPriority,
 ): Promise<FileResponse> {
   const headers = new Headers()
   const bearer = `Bearer ${accessToken}`
@@ -30,45 +32,54 @@ export async function getFiles(
       : `${graphConfig.graphMeEndpoint}/me/drive/root:/${encodeURIComponent(path.join('/'))}:/children?${params.toString()}`
     : `${graphConfig.graphMeEndpoint}/me/drive/items/${id}/children?${params.toString()}`
 
-  return fetch(nextLink || url, options)
+  return graphFetch(nextLink || url, options, { priority })
     .then(response => response.json())
     .catch(error => console.log(error))
 }
 
-export async function getFile(
+const parseGraphResponse = async <T>(response: Response): Promise<T> => {
+  if (!response.ok) {
+    throw new Error(`Graph request failed with status ${response.status}.`)
+  }
+
+  return response.json() as Promise<T>
+}
+
+const requestDriveItem = async (
   accessToken: string,
   id: string,
   path?: string[],
   signal?: AbortSignal,
-): Promise<RemoteItem> {
-  const headers = new Headers()
-  const bearer = `Bearer ${accessToken}`
-
-  headers.append('Authorization', bearer)
-
-  const options = {
-    method: 'GET',
-    headers: headers,
-    signal: signal,
-  }
-
-  const queryParams = {
-    $expand: 'thumbnails'
-  }
-
-  const params = new URLSearchParams(queryParams)
+  priority?: GraphRequestPriority,
+  includeThumbnails = false,
+): Promise<RemoteItem> => {
+  const headers = new Headers({ Authorization: `Bearer ${accessToken}` })
+  const query = includeThumbnails
+    ? `?${new URLSearchParams({ $expand: 'thumbnails' }).toString()}`
+    : ''
 
   const url = path
-    ? `${graphConfig.graphMeEndpoint}/me/drive/root:/${encodeURIComponent(path.join('/'))}?${params.toString()}`
-    : `${graphConfig.graphMeEndpoint}/me/drive/items/${id}?${params.toString()}`
+    ? `${graphConfig.graphMeEndpoint}/me/drive/root:/${encodeURIComponent(path.join('/'))}${query}`
+    : `${graphConfig.graphMeEndpoint}/me/drive/items/${id}${query}`
+  const response = await graphFetch(url, { method: 'GET', headers, signal }, { priority })
 
-  return fetch(url, options)
-    .then(response => response.json())
-    .catch(error => console.log(error))
+  return parseGraphResponse<RemoteItem>(response)
+}
+
+export async function getFile(
+  accessToken: string,
+  id: string,
+  path?: string[],
+  signal?: AbortSignal,
+  priority?: GraphRequestPriority,
+  includeThumbnails = true,
+): Promise<RemoteItem> {
+  return requestDriveItem(accessToken, id, path, signal, priority, includeThumbnails)
 }
 
 export const getAppRootFiles = async (
   accessToken: string,
+  priority?: GraphRequestPriority,
 ) => {
   const headers = new Headers()
   const bearer = `Bearer ${accessToken}`
@@ -82,7 +93,7 @@ export const getAppRootFiles = async (
 
   const url = `${graphConfig.graphMeEndpoint}/me/drive/special/approot/children`
 
-  return fetch(url, options)
+  return graphFetch(url, options, { priority })
     .then(response => response.json())
     .catch(error => console.log(error))
 }
@@ -91,6 +102,7 @@ export const uploadAppRootJson = async (
   accessToken: string,
   fileName: string,
   fileContent: BodyInit,
+  priority?: GraphRequestPriority,
 ) => {
   const headers = new Headers()
   const bearer = `Bearer ${accessToken}`
@@ -106,14 +118,15 @@ export const uploadAppRootJson = async (
 
   const url = `${graphConfig.graphMeEndpoint}/me/drive/special/approot:/${fileName}:/content`
 
-  return fetch(url, options)
+  return graphFetch(url, options, { priority })
     .then(response => response.json())
     .catch(error => console.log(error))
 }
 
 export const search = async (
   accessToken: string,
   searchQuery: string,
+  priority?: GraphRequestPriority,
 ): Promise<FileResponse> => {
   const headers = new Headers()
   const bearer = `Bearer ${accessToken}`
@@ -127,7 +140,7 @@ export const search = async (
 
   const url = `${graphConfig.graphMeEndpoint}/me/drive/root/search(q='${searchQuery}')`
 
-  return fetch(url, options)
+  return graphFetch(url, options, { priority })
     .then(response => response.json())
     .catch(error => console.log(error))
 }
@@ -136,6 +149,7 @@ export const getDelta = async (
   accessToken: string,
   id?: string,
   deltaLink?: string,
+  priority?: GraphRequestPriority,
 ): Promise<DeltaResponse> => {
   const headers = new Headers()
   const bearer = `Bearer ${accessToken}`
@@ -149,7 +163,8 @@ export const getDelta = async (
 
   const queryParams = {
     $top: '2147483647',
-    $select: 'id,name,parentReference,folder,cTag,deleted,size,lastModifiedDateTime,audio'
+    // 目前 /delta 接口不会返回 audio 字段
+    $select: 'id,name,parentReference,folder,cTag,deleted,size,lastModifiedDateTime'
   }
 
   const param = new URLSearchParams(queryParams)
@@ -158,7 +173,7 @@ export const getDelta = async (
     ? `${graphConfig.graphMeEndpoint}/me/drive/items/${id}/delta?${param.toString()}`
     : `${graphConfig.graphMeEndpoint}/me/drive/root/delta?${param.toString()}`
 
-  return fetch(deltaLink || url, options)
+  return graphFetch(deltaLink || url, options, { priority })
     .then(response => response.json())
     .catch(error => console.log(error))
-}
+}