From 5c13bbbb53f338f8af129f04849d3bfc2f4fd18b Mon Sep 17 00:00:00 2001
From: Sawyerf <sawyer.flink@protonmail.ch>
Date: Fri, 20 Dec 2024 14:33:19 +0100
Subject: [PATCH] Fix: TabBar

---
 app/components/Bar/BottomBar.js    |  83 +++++++++++++
 app/components/Bar/SideBar.js      | 107 +++++++++++++++++
 app/components/ImageError.js       |  15 +--
 app/components/TabBar.js           | 179 ++---------------------------
 app/components/player/BoxPlayer.js |   3 +-
 app/components/player/Player.js    |   6 +-
 app/screens/Settings/Connect.js    |   2 +-
 7 files changed, 214 insertions(+), 181 deletions(-)
 create mode 100644 app/components/Bar/BottomBar.js
 create mode 100644 app/components/Bar/SideBar.js

diff --git a/app/components/Bar/BottomBar.js b/app/components/Bar/BottomBar.js
new file mode 100644
index 0000000..db7c568
--- /dev/null
+++ b/app/components/Bar/BottomBar.js
@@ -0,0 +1,83 @@
+import React from 'react';
+import { Text, View, TouchableOpacity, Image } from 'react-native';
+import Icon from 'react-native-vector-icons/FontAwesome';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { ConfigContext } from '~/contexts/config';
+
+import { ThemeContext } from '~/contexts/theme';
+
+const BottomBar = ({ state, descriptors, navigation }) => {
+  const insets = useSafeAreaInsets();
+  const config = React.useContext(ConfigContext)
+  const theme = React.useContext(ThemeContext)
+
+  return (
+    <View>
+      <View style={{
+        flexDirection: 'row',
+        backgroundColor: theme.secondaryDark,
+        borderTopColor: theme.secondaryDark,
+        borderTopWidth: 1,
+        paddingLeft: insets.left,
+        paddingRight: insets.right,
+      }}
+      >
+        {state.routes.map((route, index) => {
+          const { options } = descriptors[route.key];
+          const isFocused = state.index === index;
+
+          const onPress = () => {
+            const event = navigation.emit({
+              type: 'tabPress',
+              target: route.key,
+              canPreventDefault: true,
+            });
+
+            if (!isFocused && !event.defaultPrevented) {
+              navigation.navigate(route.name, route.params);
+            }
+          };
+
+          const onLongPress = () => {
+            navigation.emit({
+              type: 'tabLongPress',
+              target: route.key,
+            });
+          };
+
+          const getColor = () => {
+            if (isFocused) return theme.primaryTouch
+            if (!config.query && route.name !== 'Settings') return theme.secondaryLight
+            return theme.primaryLight
+          }
+
+          return (
+            <TouchableOpacity
+              accessibilityRole="button"
+              accessibilityState={isFocused ? { selected: true } : {}}
+              accessibilityLabel={options.tabBarAccessibilityLabel}
+              testID={options.tabBarTestID}
+              onPress={onPress}
+              onLongPress={onLongPress}
+              style={{
+                flex: 1,
+                paddingBottom: insets.bottom ? insets.bottom : 10,
+                paddingTop: 10,
+              }}
+              key={index}
+              disabled={(!config.query && route.name !== 'Settings')}
+            >
+              <Icon name={options.icon} size={20} color={getColor()} style={{ alignSelf: 'center', marginBottom: 5 }} />
+              <Text style={{ color: getColor(), textAlign: 'center' }}>
+                {options.title}
+              </Text>
+            </TouchableOpacity>
+          );
+        })}
+      </View>
+    </View >
+  )
+}
+
+
+export default BottomBar;
\ No newline at end of file
diff --git a/app/components/Bar/SideBar.js b/app/components/Bar/SideBar.js
new file mode 100644
index 0000000..52bd65c
--- /dev/null
+++ b/app/components/Bar/SideBar.js
@@ -0,0 +1,107 @@
+import React from 'react';
+import { Text, View, TouchableOpacity, Image } from 'react-native';
+import Icon from 'react-native-vector-icons/FontAwesome';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { ConfigContext } from '~/contexts/config';
+
+import { ThemeContext } from '~/contexts/theme';
+import pkg from '~/../package.json';
+
+const SideBar = ({ state, descriptors, navigation }) => {
+  const insets = useSafeAreaInsets();
+  const config = React.useContext(ConfigContext)
+  const theme = React.useContext(ThemeContext)
+
+  return (
+    <View style={{
+      flexDirection: 'column',
+      backgroundColor: theme.secondaryDark,
+      borderTopColor: theme.secondaryDark,
+      borderTopWidth: 1,
+      height: '100%',
+      width: 250,
+      paddingLeft: insets.left,
+      paddingRight: insets.right,
+      borderEndWidth: 1,
+      borderEndColor: theme.tertiaryDark,
+    }}
+    >
+      <View style={{ marginHorizontal: 10, marginTop: 15, marginBottom: 15 }} >
+        <TouchableOpacity
+          style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            width: '100%',
+          }}>
+          <Image
+            source={require('~/../assets/icon.png')}
+            style={{ width: 50, height: 50, borderRadius: 10, marginEnd: 10 }}
+          />
+          <View style={{ flexDirection: 'column', justifyContent: 'center' }}>
+            <Text style={{ color: theme.primaryLight, fontSize: 20, marginBottom: 0 }}>Castafiore</Text>
+            <Text style={{ color: theme.secondaryLight, fontSize: 13 }}>Version {pkg.version}</Text>
+          </View>
+        </TouchableOpacity>
+      </View>
+      {state.routes.map((route, index) => {
+        const { options } = descriptors[route.key];
+        const isFocused = state.index === index;
+
+        const onPress = () => {
+          const event = navigation.emit({
+            type: 'tabPress',
+            target: route.key,
+            canPreventDefault: true,
+          });
+
+          if (!isFocused && !event.defaultPrevented) {
+            navigation.navigate(route.name, route.params);
+          }
+        };
+
+        const onLongPress = () => {
+          navigation.emit({
+            type: 'tabLongPress',
+            target: route.key,
+          });
+        };
+
+        const getColor = () => {
+          if (isFocused) return theme.primaryTouch
+          if (!config.query && route.name !== 'Settings') return theme.secondaryLight
+          return theme.primaryLight
+        }
+
+        return (
+          <TouchableOpacity
+            accessibilityRole="button"
+            accessibilityState={isFocused ? { selected: true } : {}}
+            accessibilityLabel={options.tabBarAccessibilityLabel}
+            testID={options.tabBarTestID}
+            onPress={onPress}
+            onLongPress={onLongPress}
+            style={{
+              flexDirection: 'row',
+              alignItems: 'center',
+              backgroundColor: isFocused ? theme.primaryDark : undefined,
+              marginHorizontal: 10,
+              paddingVertical: 4,
+              paddingLeft: 10,
+              borderRadius: 8,
+              marginBottom: 3,
+            }}
+            key={index}
+            disabled={(!config.query && route.name !== 'Settings')}
+          >
+            <Icon name={options.icon} size={26} color={getColor()} style={{ marginRight: 10 }} />
+            <Text style={{ color: getColor(), textAlign: 'left', fontSize: 20, fontWeight: '550' }}>
+              {options.title}
+            </Text>
+          </TouchableOpacity>
+        );
+      })}
+    </View>
+  )
+}
+
+export default SideBar;
\ No newline at end of file
diff --git a/app/components/ImageError.js b/app/components/ImageError.js
index b4dc782..d3d1415 100644
--- a/app/components/ImageError.js
+++ b/app/components/ImageError.js
@@ -7,17 +7,18 @@ const ImageError = ({ source, style, children }) => {
 	React.useEffect(() => {
 		if (!source?.uri) setIsImage(false)
 		else setIsImage(true)
-	}, [source.uri])
+	}, [source?.uri])
 
-	return (
-		<>
-			{isImage ? <Image
+	if (isImage) {
+		return (
+			<Image
 				source={source}
 				onError={() => setIsImage(false)}
 				style={style}
-			/> : children}
-		</>
-	)
+			/>
+		)
+	}
+	return children
 }
 
 export default ImageError;
\ No newline at end of file
diff --git a/app/components/TabBar.js b/app/components/TabBar.js
index 81f5c8f..1eb15a1 100755
--- a/app/components/TabBar.js
+++ b/app/components/TabBar.js
@@ -1,20 +1,15 @@
 import React from 'react';
-import { Text, View, TouchableOpacity, Image } from 'react-native';
-import Icon from 'react-native-vector-icons/FontAwesome';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { View } from 'react-native';
 import { ConfigContext } from '~/contexts/config';
 import { SettingsContext } from '~/contexts/settings';
 
-import { ThemeContext } from '~/contexts/theme';
 import Player from '~/components/player/Player';
-import settingStyles from '~/styles/settings';
-import pkg from '~/../package.json';
+import BottomBar from '~/components/Bar/BottomBar';
+import SideBar from '~/components/Bar/SideBar';
 
 const TabBar = ({ state, descriptors, navigation }) => {
-  const insets = useSafeAreaInsets();
   const config = React.useContext(ConfigContext)
   const settings = React.useContext(SettingsContext)
-  const theme = React.useContext(ThemeContext)
   const [isFullScreen, setIsFullScreen] = React.useState(false)
 
   React.useEffect(() => {
@@ -23,168 +18,16 @@ const TabBar = ({ state, descriptors, navigation }) => {
     }
   }, [config.query])
 
-  const BottomTab = () => (
-    <View>
-      <View style={{
-        flexDirection: 'row',
-        backgroundColor: theme.secondaryDark,
-        borderTopColor: theme.secondaryDark,
-        borderTopWidth: 1,
-        paddingLeft: insets.left,
-        paddingRight: insets.right,
-      }}
-      >
-        {state.routes.map((route, index) => {
-          const { options } = descriptors[route.key];
-          const isFocused = state.index === index;
-
-          const onPress = () => {
-            const event = navigation.emit({
-              type: 'tabPress',
-              target: route.key,
-              canPreventDefault: true,
-            });
-
-            if (!isFocused && !event.defaultPrevented) {
-              navigation.navigate(route.name, route.params);
-            }
-          };
-
-          const onLongPress = () => {
-            navigation.emit({
-              type: 'tabLongPress',
-              target: route.key,
-            });
-          };
-
-          const getColor = () => {
-            if (isFocused) return theme.primaryTouch
-            if (!config.query && route.name !== 'Settings') return theme.secondaryLight
-            return theme.primaryLight
-          }
-
-          return (
-            <TouchableOpacity
-              accessibilityRole="button"
-              accessibilityState={isFocused ? { selected: true } : {}}
-              accessibilityLabel={options.tabBarAccessibilityLabel}
-              testID={options.tabBarTestID}
-              onPress={onPress}
-              onLongPress={onLongPress}
-              style={{
-                flex: 1,
-                paddingBottom: insets.bottom ? insets.bottom : 10,
-                paddingTop: 10,
-              }}
-              key={index}
-              disabled={(!config.query && route.name !== 'Settings')}
-            >
-              <Icon name={options.icon} size={20} color={getColor()} style={{ alignSelf: 'center', marginBottom: 5 }} />
-              <Text style={{ color: getColor(), textAlign: 'center' }}>
-                {options.title}
-              </Text>
-            </TouchableOpacity>
-          );
-        })}
-      </View>
-    </View>
-  )
-
-  const SideBar = () => (
-    <View style={{
-      flexDirection: 'column',
-      backgroundColor: theme.secondaryDark,
-      borderTopColor: theme.secondaryDark,
-      borderTopWidth: 1,
-      height: '100%',
-      width: 250,
-      paddingLeft: insets.left,
-      paddingRight: insets.right,
-      borderEndWidth: 1,
-      borderEndColor: theme.tertiaryDark,
-    }}
-    >
-      <View style={{ marginHorizontal: 10, marginTop: 15, marginBottom: 15 }} >
-        <TouchableOpacity
-          style={{
-            flexDirection: 'row',
-            alignItems: 'center',
-            width: '100%',
-          }}>
-          <Image
-            source={require('~/../assets/icon.png')}
-            style={{ width: 50, height: 50, borderRadius: 10, marginEnd: 10 }}
-          />
-          <View style={{ flexDirection: 'column', justifyContent: 'center' }}>
-            <Text style={{ color: theme.primaryLight, fontSize: 20, marginBottom: 0 }}>Castafiore</Text>
-            <Text style={{ color: theme.secondaryLight, fontSize: 13 }}>Version {pkg.version}</Text>
-          </View>
-        </TouchableOpacity>
-      </View>
-      {state.routes.map((route, index) => {
-        const { options } = descriptors[route.key];
-        const isFocused = state.index === index;
-
-        const onPress = () => {
-          const event = navigation.emit({
-            type: 'tabPress',
-            target: route.key,
-            canPreventDefault: true,
-          });
-
-          if (!isFocused && !event.defaultPrevented) {
-            navigation.navigate(route.name, route.params);
-          }
-        };
-
-        const onLongPress = () => {
-          navigation.emit({
-            type: 'tabLongPress',
-            target: route.key,
-          });
-        };
-
-        const getColor = () => {
-          if (isFocused) return theme.primaryTouch
-          if (!config.query && route.name !== 'Settings') return theme.secondaryLight
-          return theme.primaryLight
-        }
-
-        return (
-          <TouchableOpacity
-            accessibilityRole="button"
-            accessibilityState={isFocused ? { selected: true } : {}}
-            accessibilityLabel={options.tabBarAccessibilityLabel}
-            testID={options.tabBarTestID}
-            onPress={onPress}
-            onLongPress={onLongPress}
-            style={{
-              flexDirection: 'row',
-              alignItems: 'center',
-              backgroundColor: isFocused ? theme.primaryDark : undefined,
-              marginHorizontal: 10,
-              paddingVertical: 4,
-              paddingLeft: 10,
-              borderRadius: 8,
-              marginBottom: 3,
-            }}
-            key={index}
-            disabled={(!config.query && route.name !== 'Settings')}
-          >
-            <Icon name={options.icon} size={26} color={getColor()} style={{ marginRight: 10 }} />
-            <Text style={{ color: getColor(), textAlign: 'left', fontSize: 20, fontWeight: '550' }}>
-              {options.title}
-            </Text>
-          </TouchableOpacity>
-        );
-      })}
-    </View>
-  )
-
   return (
     <View>
-      {!isFullScreen ? settings.isDesktop ? <SideBar /> : <BottomTab /> : null}
-      <Player navigation={navigation} state={state} fullscreen={{ value: isFullScreen, set: setIsFullScreen }} />
+      {
+        !isFullScreen ?
+          settings.isDesktop ?
+            <SideBar state={state} descriptors={descriptors} navigation={navigation} />
+            : <BottomBar state={state} descriptors={descriptors} navigation={navigation} />
+          : null
+      }
+      <Player state={state} fullscreen={{ value: isFullScreen, set: setIsFullScreen }} />
     </View >
   );
 }
diff --git a/app/components/player/BoxPlayer.js b/app/components/player/BoxPlayer.js
index a7d6c74..89be02c 100644
--- a/app/components/player/BoxPlayer.js
+++ b/app/components/player/BoxPlayer.js
@@ -8,7 +8,6 @@ import { nextSong, pauseSong, resumeSong } from '~/utils/player';
 import { ConfigContext } from '~/contexts/config';
 import { ThemeContext } from '~/contexts/theme';
 import { urlCover } from '~/utils/api';
-import mainStyles from '~/styles/main';
 import IconButton from '~/components/button/IconButton';
 import ImageError from '~/components/ImageError';
 
@@ -36,7 +35,7 @@ const BoxPlayer = ({ fullscreen }) => {
 			}}>
 			<View style={{ ...styles.boxPlayerImage, flex: Platform.OS === 'android' ? 0 : 'initial' }}>
 				<ImageError
-					source={{ uri: urlCover(config, song?.songInfo?.albumId, 100), }}
+					source={{ uri: urlCover(config, song?.songInfo?.albumId, 100) }}
 					style={styles.boxPlayerImage}
 				>
 					<View style={{ width: 40, height: 40, alignItems: 'center', justifyContent: 'center' }}>
diff --git a/app/components/player/Player.js b/app/components/player/Player.js
index b98dd4a..75b6b07 100644
--- a/app/components/player/Player.js
+++ b/app/components/player/Player.js
@@ -8,7 +8,7 @@ import BoxPlayer from './BoxPlayer';
 import FullScreenPlayer from './FullScreenPlayer';
 import BoxDesktopPlayer from './BoxDesktopPlayer';
 
-const Player = ({ navigation, state, fullscreen }) => {
+const Player = ({ state, fullscreen }) => {
 	const [song, songDispatch] = React.useContext(SongContext)
 	const config = React.useContext(ConfigContext)
 	const settings = React.useContext(SettingsContext)
@@ -26,7 +26,7 @@ const Player = ({ navigation, state, fullscreen }) => {
 	React.useEffect(() => {
 		addEventListener('keydown', onKeyEvent)
 		return () => removeEventListener('keydown', onKeyEvent)
-	}, [song])
+	}, [song.sound, song.isPlaying, song.songInfo, song.index, song.queue, song.actionEndOfSong])
 
 	const onKeyEvent = (e) => {
 		if (e.code === 'Space') {
@@ -43,7 +43,7 @@ const Player = ({ navigation, state, fullscreen }) => {
 	if (!song?.songInfo) return null
 	else if (fullscreen.value) return <FullScreenPlayer fullscreen={fullscreen} time={time ? time : song} />
 	else if (settings.isDesktop) return <BoxDesktopPlayer fullscreen={fullscreen} time={time ? time : song} />
-	else return <BoxPlayer fullscreen={fullscreen} />
+	return <BoxPlayer fullscreen={fullscreen} />
 }
 
 export default Player;
\ No newline at end of file
diff --git a/app/screens/Settings/Connect.js b/app/screens/Settings/Connect.js
index b017524..164f65c 100644
--- a/app/screens/Settings/Connect.js
+++ b/app/screens/Settings/Connect.js
@@ -60,7 +60,7 @@ const Connect = ({ navigation }) => {
 					upConfig(conf)
 					setError('')
 					setSettings({ ...settings, servers: [...settings.servers, conf] })
-					navigation.navigate('Home')
+					navigation.navigate('HomeStack')
 				} else {
 					console.log('Connect api error:', json)
 				}