fix bugs

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

app/components/ImageGradientBackground.tsx

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

app/playbackservice.ts

@@ -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 () => {
-      setCurrentTrackIdx(await getCurrentTrack())
+      await TrackPlayer.stop()
+      await TrackPlayer.skip(0)
     })
   })
 

app/screens/ArtistView.tsx

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

app/state/trackplayermap.ts

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