feat(palyer): get metadata in display track

Author: zeevenn

packages/player/src/hooks/useDisplayTrack.ts

@@ -1,9 +1,27 @@
+import type { TrackMetadata } from '@flow/core'
+import { getTrackMetadataAsync } from '@nodefinity/react-native-music-library'
+import { useEffect, useState } from 'react'
 import { usePlayerStore } from '../playerStore'
 
-// eslint-disable-next-line react-hooks-extra/no-unnecessary-use-prefix
 export function useDisplayTrack() {
   const queue = usePlayerStore.use.queue()
   const currentIndex = usePlayerStore.use.currentIndex()
 
-  return queue[currentIndex] || undefined
+  const [trackWithMetadata, setTrackWithMetadata] = useState<TrackMetadata | undefined>(undefined)
+
+  const currentTrack = queue[currentIndex]
+
+  useEffect(() => {
+    if (!currentTrack)
+      return
+
+    const fetchMetadata = async () => {
+      const metadata = await getTrackMetadataAsync(currentTrack.id)
+      setTrackWithMetadata({ ...currentTrack, ...metadata })
+    }
+
+    fetchMetadata()
+  }, [currentTrack])
+
+  return trackWithMetadata
 }