[Add] WebDAVサーバー楽曲の詳細検索を有効にするかの設定項目を実装

Author: FUGAMARU

constants/Settings.ts

@@ -28,15 +28,15 @@ export const SETTING_ITEMS: SettingItems = {
   SEARCH_ALL_METADATA_FOR_UNCACHED_WEBDAV_TRACK: {
     label: "WebDAVの未キャッシュ楽曲の詳細検索を有効にする",
     description:
-      "WebDAVサーバー上にある楽曲を検索する時、ファイル名ではなくメタデータを対象に検索するかどうか"
+      "WebDAVサーバー上にある楽曲を検索する時、ファイル名だけでなくメタデータも対象に検索するかどうか (検索にかかる時間が長くなります)"
   },
   DEBUGMODE: {
     label: "デバッグモードを有効にする",
     description: "デバッグモードを有効にするかどうか"
   },
   BACKGROUND_OF_QUEUE: {
     label: "キューの背景",
-    description: "そのうち選択肢が増えるかも…？",
+    description: "そのうち選択肢が増えるかも…？(TODO: 未実装)",
     options: ["vercel", "meta"]
   }
 } as const

hooks/useMergedWebDAVServerData.tsx

@@ -1,10 +1,19 @@
+import { useLocalStorage } from "@mantine/hooks"
 import { useCallback, useState } from "react"
 import useWebDAVServer from "./useWebDAVServer"
 import useWebDAVTrackDatabase from "./useWebDAVTrackDatabase"
+import { LOCAL_STORAGE_KEYS } from "@/constants/LocalStorageKeys"
+import { DEFAULT_SETTING_VALUES } from "@/constants/Settings"
+import { SettingValues } from "@/types/DefaultSettings"
 import { MergedWebDAVSearchResult } from "@/types/MergedWebDAVSearchResult"
 import { removePathProperty } from "@/types/Track"
+import { filterTracksByKeyword } from "@/utils/filterTracksByKeyword"
 
 const useMergedWebDAVServerData = () => {
+  const [settings] = useLocalStorage<SettingValues>({
+    key: LOCAL_STORAGE_KEYS.SETTINGS,
+    defaultValue: DEFAULT_SETTING_VALUES
+  })
   const [mergedSearchResult, setMergedSearchResult] =
     useState<MergedWebDAVSearchResult>({
       status: "IDLE",
@@ -24,6 +33,7 @@ const useMergedWebDAVServerData = () => {
         data: []
       })
 
+      /** IndexedDBにキャッシュ済みのメタデーターを検索 */
       const indexedDBTracks = (await searchTracks(keyword)).filter(track =>
         folderPaths.some(folderPath => track.path.startsWith(folderPath))
       )
@@ -32,23 +42,36 @@ const useMergedWebDAVServerData = () => {
         data: indexedDBTracks.map(track => removePathProperty(track))
       })
 
+      /** WebDAVサーバー上にある楽曲を検索する時、ファイル名ではなくメタデータを対象に検索するかどうか */
+      const shouldSearchAllMetadata =
+        settings.SEARCH_ALL_METADATA_FOR_UNCACHED_WEBDAV_TRACK
+
+      /** 検索対象となり得る楽曲の絶対パスを列挙する */
       const folderTracks = await Promise.all(
-        folderPaths.map(folderPath => getFolderTracks(folderPath, keyword))
+        folderPaths.map(folderPath =>
+          getFolderTracks(folderPath, shouldSearchAllMetadata ? "" : keyword)
+        )
       )
+
+      /** IndexedDBに存在しない楽曲ファイルを抽出 */
       const filteredFolderTracks = folderTracks
         .flat()
         .filter(
           track =>
             !indexedDBTracks.map(track => track.path).includes(track.filename)
         )
-      const folderTracksInfo = await Promise.all(
-        filteredFolderTracks.map(async fileInfo => {
-          const trackInfo = await getTrackInfo(fileInfo)
-          saveTrackInfo(trackInfo)
-          return trackInfo
-        })
+
+      const keywordFilteredUnCachedTracks = await Promise.all(
+        filteredFolderTracks.map(fileInfo => getTrackInfo(fileInfo))
       )
 
+      const folderTracksInfo = shouldSearchAllMetadata
+        ? filterTracksByKeyword(keywordFilteredUnCachedTracks, keyword)
+        : keywordFilteredUnCachedTracks
+
+      /** 新しく取得した楽曲のメタデーターをIndexedDBに保存しておく */
+      folderTracksInfo.forEach(trackInfo => saveTrackInfo(trackInfo))
+
       // indexedDBの検索結果とwebDAVサーバーの検索結果を結合して、楽曲タイトルの昇順にソートする
       const mergedTracks = indexedDBTracks
         .concat(folderTracksInfo)
@@ -64,7 +87,7 @@ const useMergedWebDAVServerData = () => {
         data: mergedTracks
       })
     },
-    [searchTracks, getFolderTracks, getTrackInfo, saveTrackInfo]
+    [searchTracks, getFolderTracks, getTrackInfo, saveTrackInfo, settings]
   )
 
   const resetMergedSearchResult = useCallback(() => {

hooks/useWebDAVServer.tsx

@@ -180,7 +180,7 @@ const useWebDAVServer = () => {
     [getClient, checkServerConnectionRoutine]
   )
 
-  const searchTracks = useCallback(
+  const searchTracksByFilename = useCallback(
     async (folderPaths: string[], keyword: string) => {
       try {
         await checkServerConnectionRoutine()
@@ -216,7 +216,7 @@ const useWebDAVServer = () => {
     checkIsFolderExists,
     getFolderTracks,
     getTrackInfo,
-    searchTracks
+    searchTracksByFilename
   } as const
 }
 

hooks/useWebDAVTrackDatabase.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useMemo } from "react"
 import { WebDAVTrackDatabase } from "@/classes/TrackDatabase"
 import { TrackWithPath } from "@/types/Track"
+import { filterTracksByKeyword } from "@/utils/filterTracksByKeyword"
 
 // WebDAVのトラック取得の際のキャッシュ戦略用のIndexedDBを使用するためのカスタムフック
 const useWebDAVTrackDatabase = () => {
@@ -29,17 +30,9 @@ const useWebDAVTrackDatabase = () => {
   )
 
   const searchTracks = useCallback(
-    (keyword: string) => {
-      const lowerKeyword = keyword.toLowerCase()
-
-      const filteredTracks = db.tracks.filter(
-        (track: TrackWithPath) =>
-          track.title.toLowerCase().includes(lowerKeyword) ||
-          track.albumTitle.toLowerCase().includes(lowerKeyword) ||
-          track.artist.toLowerCase().includes(lowerKeyword)
-      )
-
-      return filteredTracks.toArray()
+    async (keyword: string) => {
+      const trackWithPathArray = await db.tracks.toArray()
+      return filterTracksByKeyword(trackWithPathArray, keyword)
     },
     [db.tracks]
   )

utils/filterTracksByKeyword.ts

@@ -0,0 +1,16 @@
+import { TrackWithPath } from "@/types/Track"
+
+export const filterTracksByKeyword = (
+  tracks: TrackWithPath[],
+  keyword: string
+) => {
+  const lowerKeyword = keyword.toLowerCase()
+
+  return tracks.filter(
+    track =>
+      track.path.toLowerCase().includes(lowerKeyword) ||
+      track.title.toLowerCase().includes(lowerKeyword) ||
+      track.albumTitle.toLowerCase().includes(lowerKeyword) ||
+      track.artist.toLowerCase().includes(lowerKeyword)
+  )
+}