From 6e85013b5a674c890229dec2e28961c33c5fcc53 Mon Sep 17 00:00:00 2001
From: Lei Nelissen <lei@codified.nl>
Date: Tue, 25 Aug 2020 23:34:35 +0200
Subject: [PATCH] (1) Fix missing image on first track (2) Dial back the
 updates in useCurrentTrack

---
 src/screens/Player/components/NowPlaying.tsx | 11 ++++++++---
 src/utility/useCurrentTrack.ts               |  9 ++++++++-
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/screens/Player/components/NowPlaying.tsx b/src/screens/Player/components/NowPlaying.tsx
index 912d360..c2eee82 100644
--- a/src/screens/Player/components/NowPlaying.tsx
+++ b/src/screens/Player/components/NowPlaying.tsx
@@ -12,8 +12,6 @@ const Artwork = styled(FastImage)`
     width: ${Screen.width * 0.8}px;
     height: ${Screen.width * 0.8}px;
     margin: 25px auto;
-    display: flex;
-    flex: 1;
 `;
 
 const styles = StyleSheet.create({
@@ -36,10 +34,17 @@ const styles = StyleSheet.create({
 
 export default function NowPlaying() {
     const track = useCurrentTrack();
+    console.log(track?.artwork);
 
     return (
         <View style={{ alignItems: 'center' }}>
-            <Artwork style={colors.imageBackground} source={{ uri: track?.artwork }} />
+            <Artwork
+                style={colors.imageBackground}
+                source={{ 
+                    uri: track?.artwork,
+                    priority: FastImage.priority.high,
+                }} 
+            />
             <Text style={styles.artist} >{track?.artist}</Text>
             <Text style={styles.title}>{track?.title}</Text>
         </View>
diff --git a/src/utility/useCurrentTrack.ts b/src/utility/useCurrentTrack.ts
index 4c56a30..3c758e1 100644
--- a/src/utility/useCurrentTrack.ts
+++ b/src/utility/useCurrentTrack.ts
@@ -17,12 +17,19 @@ export default function useCurrentTrack(): Track | undefined {
                 return;
             }
 
+            // GUARD: Only retrieve new track if it is different from the one we
+            // have currently in state.
+            if (currentTrackId === track?.id){
+                return;
+            }
+
+            // If it is different, retrieve the track and save it
             const currentTrack = await TrackPlayer.getTrack(currentTrackId);
             setTrack(currentTrack);
         };
 
         fetchTrack();
-    }, [state]);
+    }, [state, track, setTrack]);
 
     return track;
 }
\ No newline at end of file