diff --git a/app/components/ContextMenu.tsx b/app/components/ContextMenu.tsx index 9dc7b1a..94e9211 100644 --- a/app/components/ContextMenu.tsx +++ b/app/components/ContextMenu.tsx @@ -9,7 +9,6 @@ import { NavigationProp, useNavigation } from '@react-navigation/native' import { ReactComponentLike } from 'prop-types' import React from 'react' import { ScrollView, StyleProp, StyleSheet, Text, View, ViewStyle } from 'react-native' -import FastImage from 'react-native-fast-image' import { Menu, MenuOption, MenuOptions, MenuTrigger, renderers } from 'react-native-popup-menu' import IconFA from 'react-native-vector-icons/FontAwesome' import IconFA5 from 'react-native-vector-icons/FontAwesome5' @@ -121,15 +120,9 @@ const MenuHeader = React.memo<{ }>(({ coverArt, artistId, title, subtitle }) => ( {artistId ? ( - + ) : ( - + )} diff --git a/app/components/CoverArt.tsx b/app/components/CoverArt.tsx index 32ec099..5260de4 100644 --- a/app/components/CoverArt.tsx +++ b/app/components/CoverArt.tsx @@ -2,13 +2,21 @@ import { useArtistArtFile, useCoverArtFile } from '@app/hooks/cache' import { CacheFile, CacheImageSize, CacheRequest } from '@app/models/cache' import colors from '@app/styles/colors' import React, { useState } from 'react' -import { ActivityIndicator, StyleSheet, View, ViewStyle, Image, ImageStyle, ImageSourcePropType } from 'react-native' -import FastImage from 'react-native-fast-image' +import { + ActivityIndicator, + Image, + ImageResizeMode, + ImageSourcePropType, + ImageStyle, + StyleSheet, + View, + ViewStyle, +} from 'react-native' type BaseProps = { style?: ViewStyle imageStyle?: ImageStyle - resizeMode?: keyof typeof FastImage.resizeMode + resizeMode?: ImageResizeMode round?: boolean size?: CacheImageSize } @@ -39,7 +47,7 @@ const ImageSource = React.memo<{ cache?: { file?: CacheFile; request?: CacheRequ setError(true)} /> diff --git a/app/components/FilterButton.tsx b/app/components/FilterButton.tsx index a8e2ad5..17f4c56 100644 --- a/app/components/FilterButton.tsx +++ b/app/components/FilterButton.tsx @@ -78,7 +78,7 @@ const styles = StyleSheet.create({ maxWidth: 145, }, optionsContainer: { - backgroundColor: 'rgba(45, 45, 45, 0.95)', + backgroundColor: colors.gradient.high, maxWidth: 145, }, option: { diff --git a/app/components/ListItem.tsx b/app/components/ListItem.tsx index 38fa21a..b25ed23 100644 --- a/app/components/ListItem.tsx +++ b/app/components/ListItem.tsx @@ -8,7 +8,6 @@ import font from '@app/styles/font' import { useNavigation } from '@react-navigation/native' import React, { useCallback } from 'react' import { StyleSheet, Text, View } from 'react-native' -import FastImage from 'react-native-fast-image' import IconFA5 from 'react-native-vector-icons/FontAwesome5' import IconMat from 'react-native-vector-icons/MaterialIcons' import { AlbumContextPressable, ArtistContextPressable, SongContextPressable } from './ContextMenu' @@ -148,7 +147,7 @@ const ListItem: React.FC<{ } const artStyle = { ...styles.art, ...sizeStyle.art } - const resizeMode = FastImage.resizeMode.cover + const resizeMode = 'cover' let coverArt = <> if (item.itemType === 'artist') { coverArt = diff --git a/app/navigation/BottomTabBar.tsx b/app/navigation/BottomTabBar.tsx index 2088eb1..aefec06 100644 --- a/app/navigation/BottomTabBar.tsx +++ b/app/navigation/BottomTabBar.tsx @@ -3,45 +3,21 @@ import PressableOpacity from '@app/components/PressableOpacity' import colors from '@app/styles/colors' import dimensions from '@app/styles/dimensions' import font from '@app/styles/font' +import { bottomTabIcons, OutlineFillIcon } from '@app/styles/icons' import { BottomTabBarProps } from '@react-navigation/bottom-tabs' import { BottomTabNavigationEventMap } from '@react-navigation/bottom-tabs/lib/typescript/src/types' import { NavigationHelpers, ParamListBase } from '@react-navigation/native' import React from 'react' -import { StyleSheet, Text, View } from 'react-native' -import FastImage from 'react-native-fast-image' - -type TabButtonImage = { - regular: number - fill: number -} - -const icons: { [key: string]: TabButtonImage } = { - home: { - regular: require('@res/icons/home.png'), - fill: require('@res/icons/home-fill.png'), - }, - library: { - regular: require('@res/icons/library.png'), - fill: require('@res/icons/library-fill.png'), - }, - search: { - regular: require('@res/icons/search.png'), - fill: require('@res/icons/search-fill.png'), - }, - settings: { - regular: require('@res/icons/settings.png'), - fill: require('@res/icons/settings-fill.png'), - }, -} +import { StyleSheet, Text, View, Image, ImageStyle } from 'react-native' const BottomTabButton = React.memo<{ routeKey: string label: string name: string isFocused: boolean - img: TabButtonImage + icon: OutlineFillIcon navigation: NavigationHelpers -}>(({ routeKey, label, name, isFocused, img, navigation }) => { +}>(({ routeKey, label, name, isFocused, icon, navigation }) => { const onPress = () => { const event = navigation.emit({ type: 'tabPress', @@ -54,20 +30,19 @@ const BottomTabButton = React.memo<{ } } + const focusColor = isFocused ? colors.text.primary : colors.text.secondary + const imgSource = isFocused ? icon.fill : icon.outline + const imgFocusStyle: ImageStyle = { + tintColor: focusColor, + opacity: isFocused ? 1 : 0.6, + } + const imgStyle = [styles.image, imgFocusStyle] + const textStyle = [styles.text, { color: focusColor }] + return ( - - - {label} - + + {label} ) }) @@ -93,7 +68,7 @@ const BottomTabBar: React.FC = ({ state, descriptors, navigat label={label} name={route.name} isFocused={state.index === index} - img={icons[route.name]} + icon={bottomTabIcons[route.name]} navigation={navigation} /> ) diff --git a/app/screens/ArtistView.tsx b/app/screens/ArtistView.tsx index 664afbf..be9c545 100644 --- a/app/screens/ArtistView.tsx +++ b/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 }}> - + {album.name} {album.year ? album.year : ''} @@ -116,13 +110,7 @@ const ArtistView = React.memo<{ id: string; title: string }>(({ id, title }) => style={styles.scroll} contentContainerStyle={styles.scrollContent} onScroll={onScroll}> - + {artist.name} diff --git a/app/screens/Home.tsx b/app/screens/Home.tsx index a09a35a..91b7e85 100644 --- a/app/screens/Home.tsx +++ b/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'} /> {album.name} diff --git a/app/screens/LibraryAlbums.tsx b/app/screens/LibraryAlbums.tsx index c86bcc9..1e9f693 100644 --- a/app/screens/LibraryAlbums.tsx +++ b/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 })}> - + {album.name} diff --git a/app/screens/SplashPage.tsx b/app/screens/SplashPage.tsx index 2e891a7..322e33f 100644 --- a/app/screens/SplashPage.tsx +++ b/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 {children} - } else { - return Loading THE GOOD SHIT... - } + const splash = ( + + + + + subtracks + + + + ) + + return ( + + {ready && hydrated && children} + {splash} + + ) } +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 diff --git a/app/styles/icons.ts b/app/styles/icons.ts new file mode 100644 index 0000000..36a968a --- /dev/null +++ b/app/styles/icons.ts @@ -0,0 +1,23 @@ +export type OutlineFillIcon = { + outline: number + fill: number +} + +export const bottomTabIcons: Record = { + home: { + outline: require('@res/icons/home.png'), + fill: require('@res/icons/home-fill.png'), + }, + library: { + outline: require('@res/icons/library.png'), + fill: require('@res/icons/library-fill.png'), + }, + search: { + outline: require('@res/icons/search.png'), + fill: require('@res/icons/search-fill.png'), + }, + settings: { + outline: require('@res/icons/settings.png'), + fill: require('@res/icons/settings-fill.png'), + }, +} diff --git a/package.json b/package.json index 65bd143..fbe7e11 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,6 @@ "md5": "^2.3.0", "react": "17.0.1", "react-native": "0.64.1", - "react-native-fast-image": "https://github.com/austinried/react-native-fast-image", "react-native-fs": "^2.18.0", "react-native-gesture-handler": "^1.10.3", "react-native-get-random-values": "^1.7.0", diff --git a/res/casette.png b/res/casette.png new file mode 100644 index 0000000..8b184ba Binary files /dev/null and b/res/casette.png differ diff --git a/res/icons/arrow_left-fill.png b/res/icons/arrow_left-fill.png deleted file mode 100644 index 16aa6e5..0000000 Binary files a/res/icons/arrow_left-fill.png and /dev/null differ diff --git a/res/icons/chevron_right-fill.png b/res/icons/chevron_right-fill.png deleted file mode 100644 index 389b631..0000000 Binary files a/res/icons/chevron_right-fill.png and /dev/null differ diff --git a/res/icons/chevron_right.png b/res/icons/chevron_right.png deleted file mode 100644 index 8f8331c..0000000 Binary files a/res/icons/chevron_right.png and /dev/null differ diff --git a/res/icons/mic_on-fill.png b/res/icons/mic_on-fill.png deleted file mode 100644 index 648bb2f..0000000 Binary files a/res/icons/mic_on-fill.png and /dev/null differ diff --git a/res/icons/mic_on.png b/res/icons/mic_on.png deleted file mode 100644 index 480fbe2..0000000 Binary files a/res/icons/mic_on.png and /dev/null differ diff --git a/res/icons/more_vertical.png b/res/icons/more_vertical.png deleted file mode 100644 index 96faff0..0000000 Binary files a/res/icons/more_vertical.png and /dev/null differ diff --git a/res/icons/music_notes-fill.png b/res/icons/music_notes-fill.png deleted file mode 100644 index 1bbd38e..0000000 Binary files a/res/icons/music_notes-fill.png and /dev/null differ diff --git a/res/icons/music_notes.png b/res/icons/music_notes.png deleted file mode 100644 index 8119418..0000000 Binary files a/res/icons/music_notes.png and /dev/null differ diff --git a/res/icons/next-fill.png b/res/icons/next-fill.png deleted file mode 100644 index 46bc713..0000000 Binary files a/res/icons/next-fill.png and /dev/null differ diff --git a/res/icons/next.png b/res/icons/next.png deleted file mode 100644 index 2036056..0000000 Binary files a/res/icons/next.png and /dev/null differ diff --git a/res/icons/pause-fill.png b/res/icons/pause-fill.png deleted file mode 100644 index ebd877a..0000000 Binary files a/res/icons/pause-fill.png and /dev/null differ diff --git a/res/icons/pause_circle-fill.png b/res/icons/pause_circle-fill.png deleted file mode 100644 index e31b55b..0000000 Binary files a/res/icons/pause_circle-fill.png and /dev/null differ diff --git a/res/icons/play-fill.png b/res/icons/play-fill.png deleted file mode 100644 index 04b82a4..0000000 Binary files a/res/icons/play-fill.png and /dev/null differ diff --git a/res/icons/play_circle-fill.png b/res/icons/play_circle-fill.png deleted file mode 100644 index db9d664..0000000 Binary files a/res/icons/play_circle-fill.png and /dev/null differ diff --git a/res/icons/previous-fill.png b/res/icons/previous-fill.png deleted file mode 100644 index 328112b..0000000 Binary files a/res/icons/previous-fill.png and /dev/null differ diff --git a/res/icons/record-l.png b/res/icons/record-l.png deleted file mode 100644 index 5e85c13..0000000 Binary files a/res/icons/record-l.png and /dev/null differ diff --git a/res/icons/record-m.png b/res/icons/record-m.png deleted file mode 100644 index 76abefc..0000000 Binary files a/res/icons/record-m.png and /dev/null differ diff --git a/res/icons/record.png b/res/icons/record.png deleted file mode 100644 index 5e85c13..0000000 Binary files a/res/icons/record.png and /dev/null differ diff --git a/res/icons/star-fill.png b/res/icons/star-fill.png deleted file mode 100644 index ea34c70..0000000 Binary files a/res/icons/star-fill.png and /dev/null differ diff --git a/res/icons/star.png b/res/icons/star.png deleted file mode 100644 index e8d9c61..0000000 Binary files a/res/icons/star.png and /dev/null differ diff --git a/res/icons/stop-fill.png b/res/icons/stop-fill.png deleted file mode 100644 index 005cdeb..0000000 Binary files a/res/icons/stop-fill.png and /dev/null differ diff --git a/res/icons/web_hi_res_512.png b/res/web_hi_res_512.png similarity index 100% rename from res/icons/web_hi_res_512.png rename to res/web_hi_res_512.png diff --git a/yarn.lock b/yarn.lock index 96bf00e..589c90f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5514,10 +5514,6 @@ react-native-codegen@^0.0.6: jscodeshift "^0.11.0" nullthrows "^1.1.1" -"react-native-fast-image@https://github.com/austinried/react-native-fast-image": - version "8.3.4" - resolved "https://github.com/austinried/react-native-fast-image#2aa1ec7425e70927e179640fc8eb2a7c268357a3" - react-native-fs@^2.18.0: version "2.18.0" resolved "https://registry.yarnpkg.com/react-native-fs/-/react-native-fs-2.18.0.tgz#987b99cc90518ef26663a8d60e62104694b41c21"