clean up round 1

remove fast-image, switched to all image
cleaned up icons
added fading splash page

app/screens/ArtistView.tsx

@@ -16,7 +16,6 @@ import { useLayout } from '@react-native-community/hooks'
 import { useNavigation } from '@react-navigation/native'
 import React from 'react'
 import { ActivityIndicator, StyleSheet, Text, View } from 'react-native'
-import FastImage from 'react-native-fast-image'
 import { useAnimatedScrollHandler, useAnimatedStyle, useSharedValue } from 'react-native-reanimated'
 
 const AlbumItem = React.memo<{
@@ -36,12 +35,7 @@ const AlbumItem = React.memo<{
       onPress={() => navigation.navigate('album', { id: album.id, title: album.name })}
       menuStyle={[styles.albumItem, { width }]}
       triggerOuterWrapperStyle={{ width }}>
-      <CoverArt
-        type="cover"
-        coverArt={album.coverArt}
-        style={{ height, width }}
-        resizeMode={FastImage.resizeMode.cover}
-      />
+      <CoverArt type="cover" coverArt={album.coverArt} style={{ height, width }} resizeMode={'cover'} />
       <Text style={styles.albumTitle}>{album.name}</Text>
       <Text style={styles.albumYear}> {album.year ? album.year : ''}</Text>
     </AlbumContextPressable>
@@ -116,13 +110,7 @@ const ArtistView = React.memo<{ id: string; title: string }>(({ id, title }) =>
         style={styles.scroll}
         contentContainerStyle={styles.scrollContent}
         onScroll={onScroll}>
-        <CoverArt
-          type="artist"
-          size="original"
-          artistId={artist.id}
-          style={styles.artistCover}
-          resizeMode={FastImage.resizeMode.cover}
-        />
+        <CoverArt type="artist" size="original" artistId={artist.id} style={styles.artistCover} resizeMode={'cover'} />
         <View style={styles.titleContainer}>
           <Text style={styles.title}>{artist.name}</Text>
         </View>

app/screens/Home.tsx

@@ -14,7 +14,6 @@ import { GetAlbumListType } from '@app/subsonic/params'
 import { useNavigation } from '@react-navigation/native'
 import React, { useCallback } from 'react'
 import { RefreshControl, ScrollView, StatusBar, StyleSheet, Text, View } from 'react-native'
-import FastImage from 'react-native-fast-image'
 
 const titles: { [key in GetAlbumListType]?: string } = {
   recent: 'Recent Albums',
@@ -37,7 +36,7 @@ const AlbumItem = React.memo<{
         type="cover"
         coverArt={album.coverArt}
         style={{ height: styles.item.width, width: styles.item.width }}
-        resizeMode={FastImage.resizeMode.cover}
+        resizeMode={'cover'}
       />
       <Text style={styles.title} numberOfLines={1}>
         {album.name}

app/screens/LibraryAlbums.tsx

@@ -13,7 +13,6 @@ import { GetAlbumList2Type } from '@app/subsonic/params'
 import { useNavigation } from '@react-navigation/native'
 import React, { useEffect } from 'react'
 import { StyleSheet, Text, useWindowDimensions, View } from 'react-native'
-import FastImage from 'react-native-fast-image'
 
 const AlbumItem = React.memo<{
   album: AlbumListItem
@@ -28,12 +27,7 @@ const AlbumItem = React.memo<{
       menuStyle={[styles.itemMenu, { width: size }]}
       triggerWrapperStyle={[styles.itemWrapper, { height }]}
       onPress={() => navigation.navigate('album', { id: album.id, title: album.name })}>
-      <CoverArt
-        type="cover"
-        coverArt={album.coverArt}
-        style={{ height: size, width: size }}
-        resizeMode={FastImage.resizeMode.cover}
-      />
+      <CoverArt type="cover" coverArt={album.coverArt} style={{ height: size, width: size }} resizeMode={'cover'} />
       <View style={styles.itemDetails}>
         <Text style={styles.title} numberOfLines={1}>
           {album.name}

app/screens/SplashPage.tsx

@@ -1,14 +1,25 @@
 import React, { useEffect, useState } from 'react'
-import { Text, View } from 'react-native'
+import { Image, View, StyleSheet, Text } from 'react-native'
 import { Store, useStore } from '@app/state/store'
+import colors from '@app/styles/colors'
+import GradientBackground from '@app/components/GradientBackground'
+import font from '@app/styles/font'
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated'
 
 const selectHydrated = (store: Store) => store.hydrated
 
 const SplashPage: React.FC<{}> = ({ children }) => {
   const [ready, setReady] = useState(false)
   const hydrated = useStore(selectHydrated)
+  const opacity = useSharedValue(0)
 
-  const minSplashTime = new Promise(resolve => setTimeout(resolve, 1))
+  const animatedStyles = useAnimatedStyle(() => {
+    return {
+      opacity: opacity.value,
+    }
+  })
+
+  const minSplashTime = new Promise(resolve => setTimeout(resolve, 1000))
 
   const prepare = async () => {
     return
@@ -17,16 +28,70 @@ const SplashPage: React.FC<{}> = ({ children }) => {
   const promise = Promise.all([prepare(), minSplashTime])
 
   useEffect(() => {
-    promise.then(() => {
-      setReady(true)
+    opacity.value = withTiming(1, {
+      duration: 200,
     })
-  })
+    promise
+      .then(() => {
+        setReady(true)
+      })
+      .then(() => {
+        opacity.value = withTiming(0, {
+          duration: 500,
+        })
+      })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
 
-  if (ready && hydrated) {
-    return <View style={{ flex: 1 }}>{children}</View>
-  } else {
-    return <Text>Loading THE GOOD SHIT...</Text>
-  }
+  const splash = (
+    <Animated.View style={[styles.splashContainer, animatedStyles]} pointerEvents="none">
+      <GradientBackground style={styles.background}>
+        <View style={styles.logoContainer}>
+          <Image style={styles.image} source={require('@res/casette.png')} fadeDuration={0} />
+          <Text style={styles.text}>subtracks</Text>
+        </View>
+      </GradientBackground>
+    </Animated.View>
+  )
+
+  return (
+    <View style={styles.container}>
+      {ready && hydrated && children}
+      {splash}
+    </View>
+  )
 }
 
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: 'transparent',
+  },
+  splashContainer: {
+    position: 'absolute',
+    height: '100%',
+    width: '100%',
+  },
+  background: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  logoContainer: {
+    elevation: 5,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  image: {
+    height: 140,
+    width: 140,
+    marginBottom: -10,
+    tintColor: colors.accent,
+  },
+  text: {
+    fontFamily: font.bold,
+    fontSize: 50,
+    color: colors.text.primary,
+  },
+})
+
 export default SplashPage