diff --git a/src/components/NowPlayingBar.tsx b/src/components/NowPlayingBar.tsx
index 230681b..a792e8c 100644
--- a/src/components/NowPlayingBar.tsx
+++ b/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 = () => {
-
+
+
+
@@ -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
diff --git a/src/components/common/AlbumView.tsx b/src/components/common/AlbumView.tsx
index 85a569e..51a8b73 100644
--- a/src/components/common/AlbumView.tsx
+++ b/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 (
-
- setOpacity(0.6)}
- onPressOut={() => setOpacity(1)}
- onLongPress={() => setOpacity(1)}
- style={{
- flex: 1,
- opacity,
- }}>
-
+
+
+
{title}
- {artist}
-
-
- {/* {secondsToTime(duration || 0)} */}
-
-
+ {artist}
+
+
+
+
+
+
+
+
)
}
+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 }) => {
diff --git a/src/state/trackplayer.ts b/src/state/trackplayer.ts
index dd8df73..a9ca230 100644
--- a/src/state/trackplayer.ts
+++ b/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))