queue ended now goes back to first track, stopped
artist view now has a min height
cover art fallback for track mapping
use dark colors before light ones for gradient
This commit is contained in:
austinried 2021-08-17 18:58:12 +09:00
parent d068288391
commit 52223e6979
6 changed files with 29 additions and 12 deletions

View File

@ -39,14 +39,14 @@ const ImageGradientBackground: React.FC<{
setHighColor(res.muted) setHighColor(res.muted)
} else if (res.darkMuted && res.darkMuted !== '#000000') { } else if (res.darkMuted && res.darkMuted !== '#000000') {
setHighColor(res.darkMuted) setHighColor(res.darkMuted)
} else if (res.lightMuted && res.lightMuted !== '#000000') {
setHighColor(res.lightMuted)
} else if (res.vibrant && res.vibrant !== '#000000') { } else if (res.vibrant && res.vibrant !== '#000000') {
setHighColor(res.vibrant) setHighColor(res.vibrant)
} else if (res.darkVibrant && res.darkVibrant !== '#000000') { } else if (res.darkVibrant && res.darkVibrant !== '#000000') {
setHighColor(res.darkVibrant) setHighColor(res.darkVibrant)
} else if (res.lightVibrant && res.lightVibrant !== '#000000') { } else if (res.lightVibrant && res.lightVibrant !== '#000000') {
setHighColor(res.lightVibrant) setHighColor(res.lightVibrant)
} else if (res.lightMuted && res.lightMuted !== '#000000') {
setHighColor(res.lightMuted)
} }
} }
getColors() getColors()

View File

@ -89,9 +89,17 @@ const createService = async () => {
}) })
}) })
TrackPlayer.addEventListener(Event.PlaybackQueueEnded, () => { TrackPlayer.addEventListener(Event.PlaybackQueueEnded, event => {
const { position, track } = event
// bogus event that fires when queue is changed
if (!track && position === 0) {
return
}
trackPlayerCommands.enqueue(async () => { trackPlayerCommands.enqueue(async () => {
setCurrentTrackIdx(await getCurrentTrack()) await TrackPlayer.stop()
await TrackPlayer.skip(0)
}) })
}) })

View File

@ -73,7 +73,7 @@ const TopSongs = React.memo<{
) )
}) })
const ArtistDetailsFallback = React.memo(() => ( const ArtistViewFallback = React.memo(() => (
<GradientBackground style={styles.fallback}> <GradientBackground style={styles.fallback}>
<ActivityIndicator size="large" color={colors.accent} /> <ActivityIndicator size="large" color={colors.accent} />
</GradientBackground> </GradientBackground>
@ -100,7 +100,7 @@ const ArtistView = React.memo<{ id: string; title: string }>(({ id, title }) =>
const albumSize = albumsLayout.width / 2 - styles.container.paddingHorizontal / 2 const albumSize = albumsLayout.width / 2 - styles.container.paddingHorizontal / 2
if (!artist) { if (!artist) {
return <ArtistDetailsFallback /> return <ArtistViewFallback />
} }
const _albums = [...artist.albums] const _albums = [...artist.albums]
@ -161,6 +161,7 @@ const styles = StyleSheet.create({
alignItems: 'center', alignItems: 'center',
}, },
container: { container: {
minHeight: artistCoverHeight * 2,
width: '100%', width: '100%',
paddingHorizontal: 20, paddingHorizontal: 20,
}, },

View File

@ -15,13 +15,21 @@ export const selectTrackPlayerMap = {
export const createTrackPlayerMapSlice = (set: SetState<Store>, get: GetState<Store>): TrackPlayerMapSlice => ({ export const createTrackPlayerMapSlice = (set: SetState<Store>, get: GetState<Store>): TrackPlayerMapSlice => ({
mapSongtoTrackExt: async song => { mapSongtoTrackExt: async song => {
let artwork = require('@res/fallback.png')
if (song.coverArt) {
const filePath = await get().fetchCoverArtFilePath(song.coverArt)
if (filePath) {
artwork = filePath
}
}
return { return {
id: song.id, id: song.id,
title: song.title, title: song.title,
artist: song.artist || 'Unknown Artist', artist: song.artist || 'Unknown Artist',
album: song.album || 'Unknown Album', album: song.album || 'Unknown Album',
url: song.streamUri, url: song.streamUri,
artwork: song.coverArt ? await get().fetchCoverArtFilePath(song.coverArt) : require('@res/fallback.png'), artwork,
coverArt: song.coverArt, coverArt: song.coverArt,
duration: song.duration, duration: song.duration,
artistId: song.artistId, artistId: song.artistId,

View File

@ -35,7 +35,7 @@
"react-native-safe-area-context": "^3.2.0", "react-native-safe-area-context": "^3.2.0",
"react-native-screens": "^3.4.0", "react-native-screens": "^3.4.0",
"react-native-tab-view": "^2.16.0", "react-native-tab-view": "^2.16.0",
"react-native-track-player": "^2.0.0-rc18", "react-native-track-player": "^2.0.2",
"react-native-vector-icons": "^8.1.0", "react-native-vector-icons": "^8.1.0",
"uuid": "^8.3.2", "uuid": "^8.3.2",
"xmldom": "^0.5.0", "xmldom": "^0.5.0",

View File

@ -5591,10 +5591,10 @@ react-native-tab-view@^2.16.0:
resolved "https://registry.yarnpkg.com/react-native-tab-view/-/react-native-tab-view-2.16.0.tgz#cae72c7084394bd328fac5fefb86cd966df37a86" resolved "https://registry.yarnpkg.com/react-native-tab-view/-/react-native-tab-view-2.16.0.tgz#cae72c7084394bd328fac5fefb86cd966df37a86"
integrity sha512-ac2DmT7+l13wzIFqtbfXn4wwfgtPoKzWjjZyrK1t+T8sdemuUvD4zIt+UImg03fu3s3VD8Wh/fBrIdcqQyZJWg== integrity sha512-ac2DmT7+l13wzIFqtbfXn4wwfgtPoKzWjjZyrK1t+T8sdemuUvD4zIt+UImg03fu3s3VD8Wh/fBrIdcqQyZJWg==
react-native-track-player@^2.0.0-rc18: react-native-track-player@^2.0.2:
version "2.0.0-rc18" version "2.0.2"
resolved "https://registry.yarnpkg.com/react-native-track-player/-/react-native-track-player-2.0.0-rc18.tgz#eb1a70c028bf25a0c653930023280aca949789fd" resolved "https://registry.yarnpkg.com/react-native-track-player/-/react-native-track-player-2.0.2.tgz#01eeb6f5f58a1334319c36a3b26fc7136319717c"
integrity sha512-TsfUGwmIzvVcRKPyZ4ERLV37K/0PEtubgKBelRGe8DzUTdWFwQa2eabUYqqfy+HA3y+TBcXP8GNNHVq5gC/9Lw== integrity sha512-DFQ6QyLqKR1T6eaVBSIhYCAs50JimzUYMtw7jrKkOth5BqQcvHhohGHvYFNbo5VIoXNjD2EubxLdB7cMfe2iUQ==
react-native-vector-icons@^8.1.0: react-native-vector-icons@^8.1.0:
version "8.1.0" version "8.1.0"