From fd3c3487bef5095fc3e8b5fc4fec0e58997fb55e Mon Sep 17 00:00:00 2001
From: Lei Nelissen <lei@codified.nl>
Date: Tue, 20 Jun 2023 22:57:49 +0200
Subject: [PATCH] fix: move now playing overlay on search tab to make space for
 input field

---
 .../Music/overlays/NowPlaying/index.tsx       |  4 +--
 src/screens/Search/index.tsx                  | 28 ++++++++++++-------
 2 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/src/screens/Music/overlays/NowPlaying/index.tsx b/src/screens/Music/overlays/NowPlaying/index.tsx
index 0e19134..b894f5a 100644
--- a/src/screens/Music/overlays/NowPlaying/index.tsx
+++ b/src/screens/Music/overlays/NowPlaying/index.tsx
@@ -107,7 +107,7 @@ function SelectActionButton() {
     }
 }
 
-function NowPlaying() {
+function NowPlaying({ offset = 0 }: { offset?: number }) {
     const { index, track } = useCurrentTrack();
     const { buffered, position } = useProgress();
     const defaultStyles = useDefaultStyles();
@@ -165,7 +165,7 @@ function NowPlaying() {
     }
 
     return (
-        <Container style={{ bottom: tabBarHeight + NOW_PLAYING_POPOVER_MARGIN }}>
+        <Container style={{ bottom: tabBarHeight + NOW_PLAYING_POPOVER_MARGIN + offset }}>
             {/** TODO: Fix shadow overflow on Android */}
             {Platform.OS === 'ios' ? (
                 <ShadowOverlay pointerEvents='none'>
diff --git a/src/screens/Search/index.tsx b/src/screens/Search/index.tsx
index bb7c6ba..55f4789 100644
--- a/src/screens/Search/index.tsx
+++ b/src/screens/Search/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef, useState } from 'react';
 import { createStackNavigator } from '@react-navigation/stack';
 import { THEME_COLOR } from '@/CONSTANTS';
 import { t } from '@/localisation';
@@ -14,21 +14,29 @@ const Stack = createStackNavigator<StackParams>();
 
 function SearchStack() {
     const defaultStyles = useDefaultStyles();
+    const [isInitialRoute, setIsInitialRoute] = useState(true);
 
     return (
         <GestureHandlerRootView style={{ flex: 1 }}>
-            <Stack.Navigator initialRouteName="Search" screenOptions={{
-                headerTintColor: THEME_COLOR,
-                headerTitleStyle: defaultStyles.stackHeader,
-                cardStyle: defaultStyles.view,
-                headerTransparent: true,
-                headerBackground: () => <ColoredBlurView style={StyleSheet.absoluteFill} />,
-                
-            }}>
+            <Stack.Navigator initialRouteName="Search"
+                screenOptions={{
+                    headerTintColor: THEME_COLOR,
+                    headerTitleStyle: defaultStyles.stackHeader,
+                    cardStyle: defaultStyles.view,
+                    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="Album" component={Album} options={{ headerTitle: t('album') }} />
             </Stack.Navigator>
-            <NowPlaying />
+            <NowPlaying offset={isInitialRoute ? 64 : 0} />
         </GestureHandlerRootView>
     );
 }