feat: add cache to audio meta

components/files/files-list.js

@@ -19,6 +19,7 @@ import LibraryMusicIcon from '@mui/icons-material/LibraryMusic'
 import {Link} from '@mui/material'
 
 const apiUrl = process.env.NEXT_PUBLIC_API_URL_ROOT || 'http://localhost:1337'
+const audioMetaCache = {}
 
 const StyledTableCell = styled(TableCell)(({theme}) => ({
   [`&.${tableCellClasses.head}`]: {
@@ -51,7 +52,7 @@ function formatSize(size) {
 export default function FilesList({files}) {
   const theme = useTheme()
   const {mode} = useColorScheme()
-  const [audioMeta, setAudioMeta] = useState({})
+  const [audioMeta, setAudioMeta] = useState(audioMetaCache)
 
   const musicFiles = files.filter(file => file.mime.startsWith('audio'))
   const pdfFiles = files.filter(file => file.mime === 'application/pdf')
@@ -77,14 +78,21 @@ export default function FilesList({files}) {
       const results = {}
       await Promise.all(
         audioFiles.map(async file => {
+          if (file.id in audioMetaCache) {
+            results[file.id] = audioMetaCache[file.id]
+            return
+          }
+
           try {
             const response = await fetch(`${apiUrl}${file.url}`, {
               headers: {Range: 'bytes=0-262143'},
             })
             const buffer = await response.arrayBuffer()
             const meta = await mm.parseBuffer(new Uint8Array(buffer), {mimeType: file.mime, skipCovers: true})
+            audioMetaCache[file.id] = meta.format
             results[file.id] = meta.format
           } catch {
+            audioMetaCache[file.id] = null
             results[file.id] = null
           }
         })