Move search to tabbar and remove now playing

2022-02-11 17:28:50 +02:00
parent 3b0ea4ece7
commit d141b80a77
6 changed files with 23 additions and 34 deletions
--- a/src/assets/arrow-down-to-line.svg
+++ b/src/assets/arrow-down-to-line.svg
@@ -1,3 +1,3 @@
-<svg viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10 18.7334C14.9658 18.7334 19.0791 14.6289 19.0791 9.6543C19.0791 4.68848 14.9658 0.575195 9.99121 0.575195C5.02539 0.575195 0.920898 4.68848 0.920898 9.6543C0.920898 14.6289 5.03418 18.7334 10 18.7334ZM10 16.9492C5.95703 16.9492 2.71387 13.6973 2.71387 9.6543C2.71387 5.61133 5.94824 2.36816 9.99121 2.36816C14.0342 2.36816 17.2861 5.61133 17.2949 9.6543C17.2949 13.6973 14.043 16.9492 10 16.9492ZM9.98242 12.335C10.1758 12.335 10.3428 12.2559 10.4834 12.124L13.3838 9.20605C13.542 9.05664 13.5947 8.88965 13.5947 8.71387C13.5947 8.35352 13.3398 8.07227 12.9707 8.07227C12.7861 8.07227 12.6191 8.14258 12.4873 8.27441L11.9336 8.82812L10.5449 10.4014L10.6416 8.90723V5.24219C10.6416 4.85547 10.3691 4.57422 9.98242 4.57422C9.58691 4.57422 9.32324 4.85547 9.32324 5.24219V8.90723L9.42871 10.4102L8.01367 8.81934L7.50391 8.27441C7.38086 8.13379 7.22266 8.07227 7.02051 8.07227C6.65137 8.07227 6.3877 8.33594 6.3877 8.72266C6.3877 8.87207 6.4668 9.07422 6.58984 9.19727L9.49023 12.124C9.63086 12.2646 9.79785 12.335 9.98242 12.335ZM6.7832 14.2598H13.208C13.5859 14.2598 13.8584 13.9785 13.8584 13.6006C13.8584 13.2314 13.5859 12.959 13.208 12.959H6.7832C6.40527 12.959 6.13281 13.2314 6.13281 13.6006C6.13281 13.9785 6.40527 14.2598 6.7832 14.2598Z" />
+<svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.77493 11.4212C0.325905 11.4212 0 11.7543 0 12.2106C0 12.6669 0.325905 13 0.77493 13H10.3203C10.7766 13 11.1097 12.6669 11.1097 12.2106C11.1097 11.7543 10.7766 11.4212 10.3203 11.4212H5.72145C5.88802 11.385 6.03287 11.2981 6.15599 11.1749L10.7694 6.61226C10.9432 6.43844 11.0301 6.23565 11.0301 6.02563C11.0301 5.56936 10.6969 5.23621 10.2552 5.23621C10.0234 5.23621 9.82061 5.33036 9.67577 5.47521L8.19109 6.93816L6.28635 9.02396L6.35877 7.50306V0.818384C6.35877 0.325905 6.03287 0 5.55487 0C5.07688 0 4.74373 0.325905 4.74373 0.818384V7.50306L4.8234 9.0312L2.91866 6.93816L1.44123 5.47521C1.28914 5.33036 1.08635 5.23621 0.861838 5.23621C0.412813 5.23621 0.0869081 5.56936 0.0869081 6.02563C0.0869081 6.23565 0.173816 6.43844 0.347632 6.61226L4.95376 11.1749C5.07688 11.2981 5.22173 11.385 5.38106 11.4212H0.77493Z" />
 </svg>
--- a/src/assets/magnifying-glass.svg
+++ b/src/assets/magnifying-glass.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.50859 13.0172C7.82354 13.0172 9.05579 12.6202 10.0813 11.9421L13.7036 15.5727C13.9434 15.8042 14.2494 15.92 14.5802 15.92C15.2667 15.92 15.7711 15.3824 15.7711 14.7043C15.7711 14.39 15.6636 14.084 15.4321 13.8525L11.8346 10.2384C12.5789 9.17984 13.0172 7.89797 13.0172 6.50859C13.0172 2.92763 10.0896 0 6.50859 0C2.9359 0 0 2.92763 0 6.50859C0 10.0896 2.92763 13.0172 6.50859 13.0172ZM6.50859 11.2805C3.88696 11.2805 1.73673 9.13022 1.73673 6.50859C1.73673 3.88696 3.88696 1.73673 6.50859 1.73673C9.13022 1.73673 11.2805 3.88696 11.2805 6.50859C11.2805 9.13022 9.13022 11.2805 6.50859 11.2805Z" />
+</svg>
--- 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() {
            <Stack.Screen name="Album" component={Album} options={{ headerTitle: t('album') }} />
            <Stack.Screen name="Playlists" component={Playlists} options={{ headerTitle: t('playlists') }} />
            <Stack.Screen name="Playlist" component={Playlist} options={{ headerTitle: t('playlist') }} />
-            <Stack.Screen name="Search" component={Search} options={{ headerTitle: t('search') }} />
        </Stack.Navigator>
    );
 }
--- 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 (
        <>
            <ListButton onPress={handleAllAlbumsClick}>{t('all-albums')}</ListButton>
            <ListButton onPress={handlePlaylistsClick}>{t('playlists')}</ListButton>
-            <ListButton onPress={handleSearchClick}>{t('search')}</ListButton>
            <ListContainer>
                <Header style={defaultStyles.text}>{t('recent-albums')}</Header>
            </ListContainer>
--- a/src/screens/Music/stacks/Search.tsx
+++ b/src/screens/Music/stacks/Search.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 (
-        <>
+        <SafeAreaView style={{ flex: 1 }}>
            <FlatList
                style={{ flex: 1 }}
                data={[...jellyfinResults, ...fuseResults]}
@@ -273,6 +273,6 @@ export default function Search() {
                    <Text style={{ textAlign: 'center', opacity: 0.5, fontSize: 18 }}>{t('no-results')}</Text> 
                </FullSizeContainer>
            ) : null}
-        </>
+        </SafeAreaView>
    );
 }
--- 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<any> | 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() {
            <Tab.Navigator
                screenOptions={({ route }) => ({
                    tabBarIcon: function TabBarIcon({ color, size }) {
-                        const Icon = getIcon(route.name);
-
-                        if (!Icon) {
-                            return null;
+                        switch (route.name) {
+                            case 'Search':
+                                return <SearchIcon fill={color} height={size - 4} width={size - 4} />;
+                            case 'Music':
+                                return <NotesIcon fill={color} height={size} width={size} />;
+                            case 'Settings':
+                                return <GearIcon fill={color} height={size - 1} width={size - 1} />;
+                            case 'Downloads':
+                                return <DownloadsIcon fill={color} height={size - 6} width={size - 6} />;
+                            default:
+                                return null;
                        }
-
-                        return <Icon fill={color} width={size} height={size} />;
                    },
                    tabBarActiveTintColor: THEME_COLOR,
                    tabBarInactiveTintColor: 'gray',
                    headerShown: false,
                })}
            >
-                <Tab.Screen name="NowPlaying" component={Player} options={{ tabBarLabel: t('now-playing') }} />
                <Tab.Screen name="Music" component={Music} options={{ tabBarLabel: t('music') }} />
+                <Tab.Screen name="Search" component={Search} options={{ tabBarLabel: t('search') }} />
                <Tab.Screen name="Downloads" component={Downloads} options={{ tabBarLabel: t('downloads')}} />
                <Tab.Screen name="Settings" component={Settings} options={{ tabBarLabel: t('settings') }} />
            </Tab.Navigator>