From d141b80a77a0d127acc232e666e246bda2b52af7 Mon Sep 17 00:00:00 2001 From: Lei Nelissen Date: Fri, 11 Feb 2022 17:28:50 +0200 Subject: [PATCH] Move search to tabbar and remove now playing --- src/assets/arrow-down-to-line.svg | 4 +- src/assets/magnifying-glass.svg | 3 ++ src/screens/Music/index.tsx | 2 - src/screens/Music/stacks/RecentAlbums.tsx | 2 - .../stacks/Search.tsx => Search/index.tsx} | 6 +-- src/screens/index.tsx | 40 +++++++------------ 6 files changed, 23 insertions(+), 34 deletions(-) create mode 100644 src/assets/magnifying-glass.svg rename src/screens/{Music/stacks/Search.tsx => Search/index.tsx} (98%) diff --git a/src/assets/arrow-down-to-line.svg b/src/assets/arrow-down-to-line.svg index cdc4378..4ee1595 100644 --- a/src/assets/arrow-down-to-line.svg +++ b/src/assets/arrow-down-to-line.svg @@ -1,3 +1,3 @@ - - + + diff --git a/src/assets/magnifying-glass.svg b/src/assets/magnifying-glass.svg new file mode 100644 index 0000000..0589c72 --- /dev/null +++ b/src/assets/magnifying-glass.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/screens/Music/index.tsx b/src/screens/Music/index.tsx index 6d00568..ec42981 100644 --- a/src/screens/Music/index.tsx +++ b/src/screens/Music/index.tsx @@ -4,7 +4,6 @@ import { MusicStackParams } from './types'; import Albums from './stacks/Albums'; import Album from './stacks/Album'; import RecentAlbums from './stacks/RecentAlbums'; -import Search from './stacks/Search'; import { THEME_COLOR } from 'CONSTANTS'; import { t } from '@localisation'; import useDefaultStyles from 'components/Colors'; @@ -26,7 +25,6 @@ function MusicStack() { - ); } diff --git a/src/screens/Music/stacks/RecentAlbums.tsx b/src/screens/Music/stacks/RecentAlbums.tsx index b43587c..fd309ad 100644 --- a/src/screens/Music/stacks/RecentAlbums.tsx +++ b/src/screens/Music/stacks/RecentAlbums.tsx @@ -28,13 +28,11 @@ const NavigationHeader: React.FC = () => { const defaultStyles = useDefaultStyles(); const handleAllAlbumsClick = useCallback(() => { navigation.navigate('Albums'); }, [navigation]); const handlePlaylistsClick = useCallback(() => { navigation.navigate('Playlists'); }, [navigation]); - const handleSearchClick = useCallback(() => { navigation.navigate('Search'); }, [navigation]); return ( <> {t('all-albums')} {t('playlists')} - {t('search')}
{t('recent-albums')}
 diff --git a/src/screens/Music/stacks/Search.tsx b/src/screens/Search/index.tsx similarity index 98% rename from src/screens/Music/stacks/Search.tsx rename to src/screens/Search/index.tsx index 8196dba..f27d9c4 100644 --- a/src/screens/Music/stacks/Search.tsx +++ b/src/screens/Search/index.tsx @@ -1,6 +1,6 @@ import React, { useState, useEffect, useRef, useCallback } from 'react'; import Input from 'components/Input'; -import { ActivityIndicator, Text, TextInput, View } from 'react-native'; +import { ActivityIndicator, SafeAreaView, Text, TextInput, View } from 'react-native'; import styled from 'styled-components/native'; import { useTypedSelector } from 'store'; import Fuse from 'fuse.js'; @@ -234,7 +234,7 @@ export default function Search() { } return ( - <> + {t('no-results')} ) : null} - + ); } \ No newline at end of file diff --git a/src/screens/index.tsx b/src/screens/index.tsx index 16d2afb..cdbf6bd 100644 --- a/src/screens/index.tsx +++ b/src/screens/index.tsx @@ -1,10 +1,10 @@ import React from 'react'; -import { createBottomTabNavigator, BottomTabNavigationProp } from '@react-navigation/bottom-tabs'; +import { createBottomTabNavigator, BottomTabNavigationProp, BottomTabNavigationOptions } from '@react-navigation/bottom-tabs'; import { createStackNavigator, StackNavigationProp } from '@react-navigation/stack'; import { CompositeNavigationProp } from '@react-navigation/native'; import { THEME_COLOR } from 'CONSTANTS'; -import Player from './Player'; +import Search from './Search'; import Music from './Music'; import Settings from './Settings'; import Downloads from './Downloads'; @@ -12,7 +12,7 @@ import Onboarding from './Onboarding'; import TrackPopupMenu from './modals/TrackPopupMenu'; import SetJellyfinServer from './modals/SetJellyfinServer'; -import PlayPauseIcon from 'assets/play-pause-fill.svg'; +import SearchIcon from 'assets/magnifying-glass.svg'; import NotesIcon from 'assets/notes.svg'; import GearIcon from 'assets/gear.svg'; import DownloadsIcon from 'assets/arrow-down-to-line.svg'; @@ -31,21 +31,6 @@ type Screens = { Settings: undefined; } -function getIcon(route: string): React.FC | null { - switch(route) { - case 'NowPlaying': - return PlayPauseIcon; - case 'Music': - return NotesIcon; - case 'Settings': - return GearIcon; - case 'Downloads': - return DownloadsIcon; - default: - return null; - } -} - function Screens() { const isOnboardingComplete = useTypedSelector(state => state.settings.isOnboardingComplete); @@ -61,21 +46,26 @@ function Screens() { ({ tabBarIcon: function TabBarIcon({ color, size }) { - const Icon = getIcon(route.name); - - if (!Icon) { - return null; + switch (route.name) { + case 'Search': + return ; + case 'Music': + return ; + case 'Settings': + return ; + case 'Downloads': + return ; + default: + return null; } - - return ; }, tabBarActiveTintColor: THEME_COLOR, tabBarInactiveTintColor: 'gray', headerShown: false, })} > - +