javier/jellyfin-audio-player
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: move now playing overlay on search tab to make space for input field

Browse Source
This commit is contained in:
Lei Nelissen
2023-06-20 22:57:49 +02:00
parent d15b7ea29d
commit fd3c3487be
2 changed files with 20 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/screens/Music/overlays/NowPlaying/index.tsx
View File

@@ -107,7 +107,7 @@ function SelectActionButton() {
} }
} }
function NowPlaying() { function NowPlaying({ offset = 0 }: { offset?: number }) {
const { index, track } = useCurrentTrack(); const { index, track } = useCurrentTrack();
const { buffered, position } = useProgress(); const { buffered, position } = useProgress();
const defaultStyles = useDefaultStyles(); const defaultStyles = useDefaultStyles();
@@ -165,7 +165,7 @@ function NowPlaying() {
} }
return ( return (
<Container style={{ bottom: tabBarHeight + NOW_PLAYING_POPOVER_MARGIN }}> <Container style={{ bottom: tabBarHeight + NOW_PLAYING_POPOVER_MARGIN + offset }}>
{/** TODO: Fix shadow overflow on Android */} {/** TODO: Fix shadow overflow on Android */}
{Platform.OS === 'ios' ? ( {Platform.OS === 'ios' ? (
<ShadowOverlay pointerEvents='none'> <ShadowOverlay pointerEvents='none'>

28
src/screens/Search/index.tsx
View File

@@ -1,4 +1,4 @@
import React from 'react'; import React, { useRef, useState } from 'react';
import { createStackNavigator } from '@react-navigation/stack'; import { createStackNavigator } from '@react-navigation/stack';
import { THEME_COLOR } from '@/CONSTANTS'; import { THEME_COLOR } from '@/CONSTANTS';
import { t } from '@/localisation'; import { t } from '@/localisation';
@@ -14,21 +14,29 @@ const Stack = createStackNavigator<StackParams>();
function SearchStack() { function SearchStack() {
const defaultStyles = useDefaultStyles(); const defaultStyles = useDefaultStyles();
const [isInitialRoute, setIsInitialRoute] = useState(true);
return ( return (
<GestureHandlerRootView style={{ flex: 1 }}> <GestureHandlerRootView style={{ flex: 1 }}>
<Stack.Navigator initialRouteName="Search" screenOptions={{ <Stack.Navigator initialRouteName="Search"
headerTintColor: THEME_COLOR, screenOptions={{
headerTitleStyle: defaultStyles.stackHeader, headerTintColor: THEME_COLOR,
cardStyle: defaultStyles.view, headerTitleStyle: defaultStyles.stackHeader,
headerTransparent: true, cardStyle: defaultStyles.view,
headerBackground: () => <ColoredBlurView style={StyleSheet.absoluteFill} />, headerTransparent: true,
headerBackground: () => <ColoredBlurView style={StyleSheet.absoluteFill} />,
}}> }}
screenListeners={{
state: (e) => {
const { state: { routes } } = e.data as { state: { routes?: { key: string, name: string }[] } };
setIsInitialRoute(routes?.length === 1);
}
}}
>
<Stack.Screen name="Search" component={Search} options={{ headerTitle: t('search'), headerShown: false }} /> <Stack.Screen name="Search" component={Search} options={{ headerTitle: t('search'), headerShown: false }} />
<Stack.Screen name="Album" component={Album} options={{ headerTitle: t('album') }} /> <Stack.Screen name="Album" component={Album} options={{ headerTitle: t('album') }} />
</Stack.Navigator> </Stack.Navigator>
<NowPlaying /> <NowPlaying offset={isInitialRoute ? 64 : 0} />
</GestureHandlerRootView> </GestureHandlerRootView>
); );
} }