switch more to icons

setupPlayer before every set just in case? docs say to i guess even though it works without...

src/components/NowPlayingBar.tsx

@@ -6,8 +6,9 @@ import { currentTrackAtom, playerStateAtom, usePause, usePlay, useProgress } fro
 import CoverArt from './common/CoverArt'
 import colors from '../styles/colors'
 import { Font } from '../styles/text'
-import PressableImage from './common/PressableImage'
 import { State } from 'react-native-track-player'
+import PressableOpacity from './common/PressableOpacity'
+import IconFA5 from 'react-native-vector-icons/FontAwesome5'
 
 const ProgressBar = () => {
   const { position, duration } = useProgress()
@@ -45,18 +46,18 @@ const NowPlayingBar = () => {
   const play = usePlay()
   const pause = usePause()
 
-  let playPauseIcon: number
+  let playPauseIcon: string
   let playPauseAction: () => void
 
   switch (playerState) {
     case State.Playing:
     case State.Buffering:
     case State.Connecting:
-      playPauseIcon = require('../../res/pause-fill.png')
+      playPauseIcon = 'pause'
       playPauseAction = pause
       break
     default:
-      playPauseIcon = require('../../res/play-fill.png')
+      playPauseIcon = 'play'
       playPauseAction = play
       break
   }
@@ -82,13 +83,9 @@ const NowPlayingBar = () => {
           </Text>
         </View>
         <View style={styles.controls}>
-          <PressableImage
-            onPress={playPauseAction}
-            source={playPauseIcon}
-            style={styles.play}
-            tintColor="white"
-            hitSlop={14}
-          />
+          <PressableOpacity onPress={playPauseAction} hitSlop={14}>
+            <IconFA5 name={playPauseIcon} size={28} color="white" />
+          </PressableOpacity>
         </View>
       </View>
     </Pressable>
@@ -111,7 +108,6 @@ const styles = StyleSheet.create({
     height: '100%',
     justifyContent: 'center',
     marginLeft: 10,
-    // backgroundColor: 'green',
   },
   detailsTitle: {
     fontFamily: Font.semiBold,
@@ -128,13 +124,9 @@ const styles = StyleSheet.create({
     height: '100%',
     justifyContent: 'center',
     alignItems: 'center',
-    marginRight: 14,
+    marginRight: 18,
     marginLeft: 12,
   },
-  play: {
-    height: 32,
-    width: 32,
-  },
 })
 
 export default NowPlayingBar

src/components/common/AlbumView.tsx

@@ -1,23 +1,18 @@
 import { useNavigation } from '@react-navigation/native'
 import { useAtomValue } from 'jotai/utils'
-import React, { useEffect, useState } from 'react'
-import {
-  ActivityIndicator,
-  GestureResponderEvent,
-  Image,
-  Pressable,
-  Text,
-  useWindowDimensions,
-  View,
-} from 'react-native'
+import React, { useEffect } from 'react'
+import { ActivityIndicator, GestureResponderEvent, StyleSheet, Text, useWindowDimensions, View } from 'react-native'
+import IconFA from 'react-native-vector-icons/FontAwesome'
+import IconMat from 'react-native-vector-icons/MaterialIcons'
 import { albumAtomFamily } from '../../state/music'
 import { currentTrackAtom, useSetQueue } from '../../state/trackplayer'
 import colors from '../../styles/colors'
-import text from '../../styles/text'
+import text, { Font } from '../../styles/text'
 import AlbumArt from './AlbumArt'
 import Button from './Button'
 import GradientBackground from './GradientBackground'
 import ImageGradientScrollView from './ImageGradientScrollView'
+import PressableOpacity from './PressableOpacity'
 
 const SongItem: React.FC<{
   id: string
@@ -26,67 +21,59 @@ const SongItem: React.FC<{
   track?: number
   onPress: (event: GestureResponderEvent) => void
 }> = ({ id, title, artist, onPress }) => {
-  const [opacity, setOpacity] = useState(1)
   const currentTrack = useAtomValue(currentTrackAtom)
 
   return (
-    <View
-      style={{
-        marginTop: 20,
-        marginLeft: 4,
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-      }}>
-      <Pressable
-        onPress={onPress}
-        onPressIn={() => setOpacity(0.6)}
-        onPressOut={() => setOpacity(1)}
-        onLongPress={() => setOpacity(1)}
-        style={{
-          flex: 1,
-          opacity,
-        }}>
-        <Text
-          style={{
-            ...text.songListTitle,
-            color: currentTrack?.id === id ? colors.accent : colors.text.primary,
-          }}>
+    <View style={songStyles.container}>
+      <PressableOpacity onPress={onPress} style={songStyles.text}>
+        <Text style={{ ...songStyles.title, color: currentTrack?.id === id ? colors.accent : colors.text.primary }}>
           {title}
         </Text>
-        <Text style={text.songListSubtitle}>{artist}</Text>
-      </Pressable>
-      <View
-        style={{
-          flexDirection: 'row',
-          alignItems: 'center',
-          marginLeft: 10,
-        }}>
-        {/* <Text style={text.songListSubtitle}>{secondsToTime(duration || 0)}</Text> */}
-        <Image
-          source={require('../../../res/star.png')}
-          style={{
-            height: 28,
-            width: 28,
-            tintColor: colors.text.secondary,
-            marginLeft: 10,
-          }}
-        />
-        <Image
-          source={require('../../../res/more_vertical.png')}
-          style={{
-            height: 28,
-            width: 28,
-            tintColor: colors.text.secondary,
-            marginLeft: 12,
-            marginRight: 2,
-          }}
-        />
+        <Text style={songStyles.subtitle}>{artist}</Text>
+      </PressableOpacity>
+      <View style={songStyles.controls}>
+        <PressableOpacity onPress={undefined}>
+          <IconFA name="star-o" size={26} color={colors.text.primary} />
+        </PressableOpacity>
+        <PressableOpacity onPress={undefined} style={songStyles.more}>
+          <IconMat name="more-vert" size={32} color="white" />
+        </PressableOpacity>
       </View>
     </View>
   )
 }
 
+const songStyles = StyleSheet.create({
+  container: {
+    marginTop: 20,
+    marginLeft: 10,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  text: {
+    flex: 1,
+    alignItems: 'flex-start',
+  },
+  title: {
+    fontSize: 16,
+    fontFamily: Font.semiBold,
+  },
+  subtitle: {
+    fontSize: 14,
+    fontFamily: Font.regular,
+    color: colors.text.secondary,
+  },
+  controls: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginLeft: 10,
+  },
+  more: {
+    marginLeft: 8,
+  },
+})
+
 const AlbumDetails: React.FC<{
   id: string
 }> = ({ id }) => {

src/state/trackplayer.ts

@@ -222,6 +222,7 @@ export const useSetQueue = () => {
 
   return async (songs: Song[], name: string, playId?: string) =>
     trackPlayerCommands.enqueue(async () => {
+      await TrackPlayer.setupPlayer()
       await reset()
       const tracks = songs.map(s => mapSongToTrack(s, name))