Merge pull request #12 from 0x0is1/enchancements

Enchancements for issues raised (Feat Batch 2)
algocry · Oct 9, 2024 · 82e8995 · 82e8995
2 parents 28f5327 + 32014fa
commit 82e8995
Show file tree

Hide file tree

Showing 9 changed files with 112 additions and 53 deletions.
diff --git a/app.json b/app.json
@@ -20,7 +20,7 @@
       "adaptiveIcon": {
         "backgroundColor": "#ffffff"
       },
-      "package": "com.mujtest"
+      "package": "com.lissen-mobile"
     },
     "web": {
       "favicon": "./assets/favicon.png"

diff --git a/src/App.js b/src/App.js
@@ -10,8 +10,10 @@ import TrackPlayer from 'react-native-track-player';
 import SearchScreen from './screens/SearchScreen/SearchScreen';
 import DashboardScreen from './screens/DashboardScreen/DashboardScreen';
 import AlbumViewerScreen from './screens/AlbumViewerScreen/AlbumViewerScreen';
+import Constants from './constants/constants';
 
 const Stack = createStackNavigator();
+const constants = new Constants();
 
 export default function App() {
   const [playerInitialized, setPlayerInitialized] = useState(false);
@@ -35,12 +37,12 @@ export default function App() {
     <PlayerProvider>
       <StatusBar backgroundColor={'transparent'} translucent />
       <NavigationContainer>
-        <Stack.Navigator screenOptions={{ headerShown: false }} initialRouteName="DashboardScreen">
-          <Stack.Screen name="PlayerScreen" component={PlayerScreen} />
-          <Stack.Screen name="AlbumsScreen" component={AlbumsScreen} />
-          <Stack.Screen name="SearchScreen" component={SearchScreen} />
-          <Stack.Screen name="DashboardScreen" component={DashboardScreen} />
-          <Stack.Screen name="AlbumViewerScreen" component={AlbumViewerScreen} />
+        <Stack.Navigator screenOptions={{ headerShown: false }} initialRouteName={constants.screenRoutes.DASHBOARDSCREEN}>
+          <Stack.Screen name={constants.screenRoutes.PLAYERSCREEN} component={PlayerScreen} />
+          <Stack.Screen name={constants.screenRoutes.ALBUMSCREEN} component={AlbumsScreen} />
+          <Stack.Screen name={constants.screenRoutes.SEARCHSCREEN} component={SearchScreen} />
+          <Stack.Screen name={constants.screenRoutes.DASHBOARDSCREEN} component={DashboardScreen} />
+          <Stack.Screen name={constants.screenRoutes.ALBUMVIEWERSCREEN} component={AlbumViewerScreen} />
         </Stack.Navigator>
       </NavigationContainer>
     </PlayerProvider>

diff --git a/src/constants/constants.js b/src/constants/constants.js
@@ -0,0 +1,34 @@
+export default class Constants {
+    constructor(){
+        this.screenRoutes = {
+            PLAYERSCREEN: 'PlayerScreen',
+            ALBUMSCREEN: 'AlbumsScreen',
+            SEARCHSCREEN: 'SearchScreen',
+            DASHBOARDSCREEN: 'DashboardScreen',
+            ALBUMVIEWERSCREEN: 'AlbumViewerScreen'
+        }
+
+        this.drawerRoutes = {
+            ALBUMSCREEN: 'AlbumsScreen',
+            LIBRARYSCREEN: 'LibraryScreen',
+            DOWNLOADSCREEN: 'DownloadsScreen',
+            SETTINGSCREEN: 'SettingsScreen',
+            SEARCHSCREEN: 'SearchScreen',
+            ABOUTSCREEN: 'AboutScreen',
+            PLAYERSCREEN: 'PlayerScreen',
+            VERSIONSCREEN: 'VersionScreen'
+        }
+
+        this.drawerTitles = {
+            ALBUM: 'Home',
+            LIBRARY: 'Library',
+            DOWNLOADS: 'Downloads',
+            SETTINGS: 'Settings',
+            SEARCH: 'Search',
+            ABOUT: 'About',
+            PLAYER: 'Player',
+            VERSION: 'Version'
+        }
+
+    }
+}
diff --git a/src/screens/AlbumViewerScreen/AlbumViewerScreen.jsx b/src/screens/AlbumViewerScreen/AlbumViewerScreen.jsx
@@ -3,7 +3,7 @@ import {
     View,
 } from "react-native";
 import React, { useContext, useEffect, useState } from "react";
-import { useNavigation, useRoute } from "@react-navigation/native";
+import { useRoute } from "@react-navigation/native";
 import { PlayerContext } from '../../contexts/PlayerContext';
 import PlayerFooter from "./components/PlayerFooter";
 import PlayerBanner from "./components/PlayerBanner";
@@ -12,10 +12,14 @@ import ProgressBarContainer from "./components/ProgressBarContainer";
 import DurationText from "./components/DurationText";
 import TrackPlayer, { Event, useTrackPlayerEvents } from 'react-native-track-player'
 import UtilityButtons from "./components/UtilityButtons";
+import CustomStatusBar from "../PlayerScreen/components/CustomStatusBar";
 
 const AlbumViewerScreen = () => {
     const {
-        albumMode, playingIndex, onShuffle, setOnShuffle, playState, playurlOverrider, nextActionOverrider, previousActionOverrider
+        albumMode, playingIndex, onShuffle,
+        setOnShuffle, playState, playurlOverrider,
+        nextActionOverrider, previousActionOverrider,
+        isTrackAddingCompleted
     } = useContext(PlayerContext);
     const route = useRoute()
     const trackList = route.params.data
@@ -28,28 +32,24 @@ const AlbumViewerScreen = () => {
             const queueres = await TrackPlayer.getQueue();
             setQueue(queueres);
         };
-        fetchQueue();
-    }, []);
-
-    useTrackPlayerEvents([Event.PlaybackTrackChanged], async (event) => {        
-        const queueres = await TrackPlayer.getQueue();
-        setQueue(queueres);
-    });
+        isTrackAddingCompleted && fetchQueue();
+    }, [isTrackAddingCompleted]);
 
     useTrackPlayerEvents([Event.PlaybackProgressUpdated], async (event) => {
         setTotalDuration(event.duration);
         setCurrentDuration(event.position);
     });
 
     return (
-        <View style={styles.container}>
+        trackList && queue && <View style={styles.container}>
+            <CustomStatusBar />
             {
                 albumMode
                 ? (
                     <>
                             <PlayerBanner playingIndex={playingIndex} playList={trackList} />
                             <UtilityButtons trackList={trackList} />
-                            <AlbumItemsContainer trackList={trackList} playurlOverrider={playurlOverrider} />
+                            <AlbumItemsContainer trackList={trackList} playurlOverrider={playurlOverrider} queue={queue}/>
                         </>
                     ) : (
                         <>

diff --git a/src/screens/AlbumViewerScreen/components/AlbumItemsContainer.jsx b/src/screens/AlbumViewerScreen/components/AlbumItemsContainer.jsx
@@ -1,14 +1,12 @@
 import { Animated, StyleSheet, Text, View } from 'react-native';
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useContext, useEffect } from 'react';
 import { FlatList, TouchableOpacity } from 'react-native-gesture-handler';
 import { PlayerContext } from '../../../contexts/PlayerContext';
 import { Easing } from 'react-native-reanimated';
 import { decode } from 'html-entities';
-import TrackPlayer from 'react-native-track-player';
 
-const AlbumItemsContainer = ({ trackList, playurlOverrider }) => {
+const AlbumItemsContainer = ({ trackList, playurlOverrider, queue }) => {
     const { formatTime, albumItemsOpacity, albumMode, playingIndex, addTracks } = useContext(PlayerContext);
-    const [queue, setQueue] = useState(null);
     useEffect(() => {
         Animated.timing(albumItemsOpacity, {
             toValue: albumMode ? 1 : 0,
@@ -18,13 +16,6 @@ const AlbumItemsContainer = ({ trackList, playurlOverrider }) => {
         }).start();
     }, [albumMode]);
 
-    useEffect(()=>{
-        const queueLoader = async () => {
-            const queueres = await TrackPlayer.getQueue();
-            setQueue(queueres);
-        }
-        queueLoader();
-    }, [])
     const onItemPlayPressed = async (index) => {  
         const _trackList = {
             ...trackList,
@@ -37,12 +28,12 @@ const AlbumItemsContainer = ({ trackList, playurlOverrider }) => {
     };
 
     const renderAlbumItems = ({ item, index }) => (
-        queue && <TouchableOpacity onPress={() => onItemPlayPressed(index)}>
+        <TouchableOpacity onPress={() => onItemPlayPressed(index)}>
             <View style={styles.albumItems}>
                 <Text
                     style={[
                         styles.songItem,
-                        item.id === queue[playingIndex].id ? { fontWeight: '800' } : { fontWeight: '500' },
+                        item.id === (queue[playingIndex]?.id || undefined) ? { fontWeight: '800' } : { fontWeight: '500' },
                     ]}
                 >
                     {decode(item.songName).length > 30
@@ -52,7 +43,7 @@ const AlbumItemsContainer = ({ trackList, playurlOverrider }) => {
                 <Text
                     style={[
                         styles.songItem,
-                        index === playingIndex ? { fontWeight: '800' } : { fontWeight: '500' },
+                        item.id === (queue[playingIndex]?.id || undefined) ? { fontWeight: '800' } : { fontWeight: '500' },
                     ]}
                 >
                     {formatTime(item.duration)}

diff --git a/src/screens/DashboardScreen/DashboardScreen.jsx b/src/screens/DashboardScreen/DashboardScreen.jsx
@@ -13,9 +13,10 @@ import Octicons from "react-native-vector-icons/Octicons";
 import Ionicons from "react-native-vector-icons/Ionicons";
 import Footer from './components/Footer';
 import PlayerScreen from '../PlayerScreen/PlayerScreen';
+import Constants from '../../constants/constants';
 
 const Drawer = createDrawerNavigator();
-
+const constants = new Constants();
 
 const DashboardScreen = ({ navigation }) => {
   return (
@@ -32,71 +33,71 @@ const DashboardScreen = ({ navigation }) => {
         headerTitleAlign: 'left'
       }}
       drawerContent={(props) => <Footer {...props} />}
-      initialRouteName="AlbumsScreen"
+      initialRouteName={constants.drawerRoutes.ALBUMSCREEN}
     >
       <Drawer.Screen
-        name="AlbumsScreen"
+        name={constants.drawerRoutes.ALBUMSCREEN}
         component={AlbumsScreen}
         options={{
-          title: "Home",
+          title: constants.drawerTitles.ALBUM,
           drawerIcon: ({ color }) => <Ionicons name="home" size={25} color={color} />,
         }}
       />
       <Drawer.Screen
-        name="LibraryScreen"
+        name={constants.drawerRoutes.LIBRARYSCREEN}
         component={LibraryScreen}
         options={{
-          title: "Library",
+          title: constants.drawerTitles.LIBRARY,
           drawerIcon: ({ color }) => <Ionicons name="library" size={25} color={color} />,
         }}
       />
       <Drawer.Screen
-        name="DownloadsScreen"
+        name={constants.drawerRoutes.DOWNLOADSCREEN}
         component={DownloadsScreen}
         options={{
-          title: "Downloads",
+          title: constants.drawerTitles.DOWNLOADS,
           drawerIcon: ({ color }) => <Octicons name="download" size={25} color={color} />,
         }}
       />
       <Drawer.Screen
-        name="SettingsScreen"
+        name={constants.drawerRoutes.SETTINGSCREEN}
         component={SettingsScreen}
         options={{
-          title: "Settings",
+          title: constants.drawerTitles.SETTINGS,
           drawerIcon: ({ color }) => <Octicons name="gear" size={25} color={color} />,
         }}
       />
       <Drawer.Screen
-        name="SearchScreen"
+        name={constants.drawerRoutes.SEARCHSCREEN}
         component={SearchScreen}
         options={{
-          title: "Search",
+          title: constants.drawerTitles.SEARCH,
           drawerIcon: ({ color }) => <Ionicons name="search" size={25} color={color} />,
           headerShown: false,
         }}
       />
       <Drawer.Screen
-        name="AboutScreen"
+        name={constants.drawerRoutes.ABOUTSCREEN}
         component={AboutScreen}
         options={{
-          title: "About",
+          title: constants.drawerTitles.ABOUT,
           drawerIcon: ({ color }) => <Ionicons name="information-sharp" size={25} color={color} />,
         }}
       />
       <Drawer.Screen
-        name="VersionScreen"
+        name={constants.drawerRoutes.VERSIONSCREEN}
         component={VersionScreen}
         options={{
-          title: "Version",
+          title: constants.drawerTitles.VERSION,
           drawerIcon: ({ color }) => <Octicons name="versions" size={25} color={color} />,
           drawerItemStyle: { display: 'none' }
         }}
       />
       <Drawer.Screen
-        name="PlayerScreen"
+        name={constants.drawerRoutes.PLAYERSCREEN}
         component={PlayerScreen}
         options={{
-          title: "Player",
+          title: constants.drawerTitles.PLAYER,
           drawerIcon: ({ color }) => <Octicons name="play" size={25} color={color} />,
           headerShown: false
         }}

diff --git a/src/screens/PlayerScreen/PlayerScreen.jsx b/src/screens/PlayerScreen/PlayerScreen.jsx
@@ -3,14 +3,14 @@ import {
     View,
 } from "react-native";
 import React, { useContext, useEffect, useState } from "react";
-import { useNavigation } from "@react-navigation/native";
 import { PlayerContext } from '../../contexts/PlayerContext';
 import PlayerFooter from "./components/PlayerFooter";
 import PlayerBanner from "./components/PlayerBanner";
 import AlbumItemsContainer from "./components/AlbumItemsContainer";
 import ProgressBarContainer from "./components/ProgressBarContainer";
 import DurationText from "./components/DurationText";
 import TrackPlayer, { Event, State, useTrackPlayerEvents } from 'react-native-track-player'
+import CustomStatusBar from "./components/CustomStatusBar";
 
 const PlayerScreen = () => {
     const {
@@ -42,6 +42,7 @@ const PlayerScreen = () => {
 
     return (
         isTrackAddingCompleted && <View style={styles.container}>
+            <CustomStatusBar />
             <PlayerBanner playingIndex={playingIndex} playList={queue} />
             {
                 albumMode

diff --git a/src/screens/PlayerScreen/components/AlbumItemsContainer.jsx b/src/screens/PlayerScreen/components/AlbumItemsContainer.jsx
@@ -27,7 +27,7 @@ const AlbumItemsContainer = ({ playList, playurlOverrider }) => {
                 <Text
                     style={[
                         styles.songItem,
-                        index === playingIndex ? { fontWeight: '800' } : { fontWeight: '500' },
+                        item.id === (playList[playingIndex]?.id || undefined) ? { fontWeight: '800' } : { fontWeight: '500' },
                     ]}
                 >
                     {decode(item.title).length > 30
@@ -37,7 +37,7 @@ const AlbumItemsContainer = ({ playList, playurlOverrider }) => {
                 <Text
                     style={[
                         styles.songItem,
-                        index === playingIndex ? { fontWeight: '800' } : { fontWeight: '500' },
+                        item.id === (playList[playingIndex]?.id || undefined) ? { fontWeight: '800' } : { fontWeight: '500' },
                     ]}
                 >
                     {formatTime(item.duration)}

diff --git a/src/screens/PlayerScreen/components/CustomStatusBar.jsx b/src/screens/PlayerScreen/components/CustomStatusBar.jsx
@@ -0,0 +1,30 @@
+import { StyleSheet, ToastAndroid, TouchableOpacity, View } from 'react-native'
+import React from 'react'
+import Ionicons from "react-native-vector-icons/Ionicons";
+import { useNavigation } from '@react-navigation/native';
+const CustomStatusBar = () => {
+    const navigator = useNavigation();
+    return (
+        <View style={styles.buttonContainer}>
+            <TouchableOpacity onPress={() => { navigator.goBack() }} style={[styles.icons, {right: 140}]}>
+                <Ionicons name='chevron-back' size={25} color={'#000'} />
+            </TouchableOpacity>
+            <TouchableOpacity onPress={() => { ToastAndroid.show('Not implemented yet', ToastAndroid.SHORT) }} style={[styles.icons, { left: 140 }]}>
+                <Ionicons name='information' size={25} color={'#000'} />
+            </TouchableOpacity>
+        </View>
+    )
+}
+
+export default CustomStatusBar
+
+const styles = StyleSheet.create({
+    buttonContainer: {
+        position: 'absolute',
+        flexDirection: 'row',
+        top: 25
+    },
+    icons: {
+        borderRadius: 40,
+    }
+})