From 52223e69790663a679eeb0230ee2ba280fa4b3ed Mon Sep 17 00:00:00 2001
From: austinried <4966622+austinried@users.noreply.github.com>
Date: Tue, 17 Aug 2021 18:58:12 +0900
Subject: [PATCH] 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 |  4 ++--
 app/playbackservice.ts                     | 12 ++++++++++--
 app/screens/ArtistView.tsx                 |  5 +++--
 app/state/trackplayermap.ts                | 10 +++++++++-
 package.json                               |  2 +-
 yarn.lock                                  |  8 ++++----
 6 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/app/components/ImageGradientBackground.tsx b/app/components/ImageGradientBackground.tsx
index ea3e31c..676c00c 100644
--- a/app/components/ImageGradientBackground.tsx
+++ b/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()
diff --git a/app/playbackservice.ts b/app/playbackservice.ts
index 37f807e..59f79c2 100644
--- a/app/playbackservice.ts
+++ b/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)
     })
   })
 
diff --git a/app/screens/ArtistView.tsx b/app/screens/ArtistView.tsx
index 6e93027..450175b 100644
--- a/app/screens/ArtistView.tsx
+++ b/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,
   },
diff --git a/app/state/trackplayermap.ts b/app/state/trackplayermap.ts
index 8f5d094..b409ee4 100644
--- a/app/state/trackplayermap.ts
+++ b/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,
diff --git a/package.json b/package.json
index f513df9..50b2890 100644
--- a/package.json
+++ b/package.json
@@ -35,7 +35,7 @@
     "react-native-safe-area-context": "^3.2.0",
     "react-native-screens": "^3.4.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",
     "uuid": "^8.3.2",
     "xmldom": "^0.5.0",
diff --git a/yarn.lock b/yarn.lock
index abb55f1..4b3f043 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -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"
   integrity sha512-ac2DmT7+l13wzIFqtbfXn4wwfgtPoKzWjjZyrK1t+T8sdemuUvD4zIt+UImg03fu3s3VD8Wh/fBrIdcqQyZJWg==
 
-react-native-track-player@^2.0.0-rc18:
-  version "2.0.0-rc18"
-  resolved "https://registry.yarnpkg.com/react-native-track-player/-/react-native-track-player-2.0.0-rc18.tgz#eb1a70c028bf25a0c653930023280aca949789fd"
-  integrity sha512-TsfUGwmIzvVcRKPyZ4ERLV37K/0PEtubgKBelRGe8DzUTdWFwQa2eabUYqqfy+HA3y+TBcXP8GNNHVq5gC/9Lw==
+react-native-track-player@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/react-native-track-player/-/react-native-track-player-2.0.2.tgz#01eeb6f5f58a1334319c36a3b26fc7136319717c"
+  integrity sha512-DFQ6QyLqKR1T6eaVBSIhYCAs50JimzUYMtw7jrKkOth5BqQcvHhohGHvYFNbo5VIoXNjD2EubxLdB7cMfe2iUQ==
 
 react-native-vector-icons@^8.1.0:
   version "8.1.0"