move track player hooks and mapping into state

app/screens/ArtistView.tsx

@@ -6,8 +6,9 @@ import Header from '@app/components/Header'
 import HeaderBar from '@app/components/HeaderBar'
 import ListItem from '@app/components/ListItem'
 import { useArtistInfo } from '@app/hooks/music'
-import { useSetQueue } from '@app/hooks/trackplayer'
 import { Album, Song } from '@app/models/music'
+import { useStore } from '@app/state/store'
+import { selectTrackPlayer } from '@app/state/trackplayer'
 import colors from '@app/styles/colors'
 import dimensions from '@app/styles/dimensions'
 import font from '@app/styles/font'
@@ -52,7 +53,7 @@ const TopSongs = React.memo<{
   name: string
   artistId: string
 }>(({ songs, name, artistId }) => {
-  const setQueue = useSetQueue()
+  const setQueue = useStore(selectTrackPlayer.setQueue)
 
   return (
     <>

app/screens/NowPlayingQueue.tsx

@@ -1,14 +1,16 @@
 import GradientScrollView from '@app/components/GradientScrollView'
 import ListItem from '@app/components/ListItem'
 import NowPlayingBar from '@app/components/NowPlayingBar'
-import { mapTrackExtToSong, useSkipTo } from '@app/hooks/trackplayer'
+import { useSkipTo } from '@app/hooks/trackplayer'
 import { useStore } from '@app/state/store'
 import { selectTrackPlayer } from '@app/state/trackplayer'
+import { selectTrackPlayerMap } from '@app/state/trackplayermap'
 import React from 'react'
 import { StyleSheet, View } from 'react-native'
 
 const NowPlayingQueue = React.memo<{}>(() => {
   const queue = useStore(selectTrackPlayer.queue)
+  const mapTrackExtToSong = useStore(selectTrackPlayerMap.mapTrackExtToSong)
   const skipTo = useSkipTo()
 
   return (

app/screens/NowPlayingView.tsx

@@ -4,19 +4,11 @@ import ImageGradientBackground from '@app/components/ImageGradientBackground'
 import PressableOpacity from '@app/components/PressableOpacity'
 import Star from '@app/components/Star'
 import { useStarred } from '@app/hooks/music'
-import {
-  mapTrackExtToSong,
-  useNext,
-  usePause,
-  usePlay,
-  usePrevious,
-  useSeekTo,
-  useToggleRepeat,
-  useToggleShuffle,
-} from '@app/hooks/trackplayer'
+import { useNext, usePause, usePlay, usePrevious, useSeekTo } from '@app/hooks/trackplayer'
 import { selectMusic } from '@app/state/music'
 import { useStore } from '@app/state/store'
 import { QueueContextType, selectTrackPlayer, TrackExt } from '@app/state/trackplayer'
+import { selectTrackPlayerMap } from '@app/state/trackplayermap'
 import colors from '@app/styles/colors'
 import font from '@app/styles/font'
 import formatDuration from '@app/util/formatDuration'
@@ -51,6 +43,7 @@ const NowPlayingHeader = React.memo<{
 }>(({ track }) => {
   const queueName = useStore(selectTrackPlayer.queueName)
   const queueContextType = useStore(selectTrackPlayer.queueContextType)
+  const mapTrackExtToSong = useStore(selectTrackPlayerMap.mapTrackExtToSong)
 
   if (!track) {
     return <></>
@@ -272,9 +265,9 @@ const PlayerControls = () => {
   const next = useNext()
   const previous = usePrevious()
   const shuffled = useStore(selectTrackPlayer.shuffled)
-  const toggleShuffle = useToggleShuffle()
+  const toggleShuffle = useStore(selectTrackPlayer.toggleShuffle)
   const repeatMode = useStore(selectTrackPlayer.repeatMode)
-  const toggleRepeat = useToggleRepeat()
+  const toggleRepeat = useStore(selectTrackPlayer.toggleRepeatMode)
   const navigation = useNavigation()
 
   let playPauseIcon: string

app/screens/Search.tsx

@@ -3,10 +3,10 @@ import Header from '@app/components/Header'
 import ListItem from '@app/components/ListItem'
 import NothingHere from '@app/components/NothingHere'
 import { useActiveListRefresh2 } from '@app/hooks/server'
-import { useSetQueue } from '@app/hooks/trackplayer'
 import { ListableItem, SearchResults, Song } from '@app/models/music'
 import { selectMusic } from '@app/state/music'
 import { useStore } from '@app/state/store'
+import { selectTrackPlayer } from '@app/state/trackplayer'
 import colors from '@app/styles/colors'
 import font from '@app/styles/font'
 import debounce from 'lodash.debounce'
@@ -14,7 +14,7 @@ import React, { useCallback, useMemo, useState } from 'react'
 import { ActivityIndicator, StatusBar, StyleSheet, TextInput, View } from 'react-native'
 
 const SongItem = React.memo<{ item: Song }>(({ item }) => {
-  const setQueue = useSetQueue()
+  const setQueue = useStore(selectTrackPlayer.setQueue)
 
   return (
     <ListItem

app/screens/SongListView.tsx

@@ -5,8 +5,9 @@ import ListItem from '@app/components/ListItem'
 import ListPlayerControls from '@app/components/ListPlayerControls'
 import NothingHere from '@app/components/NothingHere'
 import { useAlbumWithSongs, useCoverArtFile, usePlaylistWithSongs } from '@app/hooks/music'
-import { useSetQueue } from '@app/hooks/trackplayer'
 import { AlbumWithSongs, PlaylistWithSongs, Song } from '@app/models/music'
+import { useStore } from '@app/state/store'
+import { selectTrackPlayer } from '@app/state/trackplayer'
 import colors from '@app/styles/colors'
 import font from '@app/styles/font'
 import { useNavigation } from '@react-navigation/native'
@@ -27,7 +28,7 @@ const Songs = React.memo<{
   type: SongListType
   itemId: string
 }>(({ songs, name, type, itemId }) => {
-  const setQueue = useSetQueue()
+  const setQueue = useStore(selectTrackPlayer.setQueue)
 
   const _songs = [...songs]
   let typeName = ''