Skip to content

Commit

Permalink
Add adding heart ability, and seed playlist func
Browse files Browse the repository at this point in the history
  • Loading branch information
ankushcodes69 committed Oct 11, 2024
1 parent 65cc445 commit ffe232e
Show file tree
Hide file tree
Showing 8 changed files with 515 additions and 194 deletions.
1 change: 1 addition & 0 deletions app.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ export default {
permissions: [
"READ_EXTERNAL_STORAGE",
"WRITE_EXTERNAL_STORAGE",
"MANAGE_EXTERNAL_STORAGE",
"FOREGROUND_SERVICE"
],
icon: "./assets/images/icon.png",
Expand Down
66 changes: 37 additions & 29 deletions app/_layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,9 @@ import useNotificationClickHandler from "@/hooks/useNotificationClickHandler";
import TrackPlayer from "react-native-track-player";
import { playbackService } from "@/constants/playbackService";
import { MusicPlayerProvider } from "@/components/MusicPlayerContext";
import { initializeLibrary, store } from "@/store/library";
import { Provider } from "react-redux";

// Prevent the splash screen from auto-hiding before asset loading is complete.
SplashScreen.preventAutoHideAsync();

TrackPlayer.registerPlaybackService(() => playbackService);
Expand All @@ -42,41 +43,48 @@ export default function RootLayout() {
useLogTrackPlayerState();
useNotificationClickHandler();

// Effect to hide the splash screen once both the fonts and TrackPlayer have loaded
// Effect to initialize the library and hide the splash screen
useEffect(() => {
if (fontsLoaded && trackPlayerLoaded) {
SplashScreen.hideAsync();
}
const initialize = async () => {
await initializeLibrary();
if (fontsLoaded && trackPlayerLoaded) {
await SplashScreen.hideAsync();
}
};

initialize();
}, [fontsLoaded, trackPlayerLoaded]);

if (!fontsLoaded || !trackPlayerLoaded) {
return null; // Keep the app waiting until both fonts and TrackPlayer are loaded
}

return (
<MusicPlayerProvider>
<SafeAreaProvider>
<GestureHandlerRootView style={{ flex: 1 }}>
<ThemeProvider
value={colorScheme === "dark" ? DarkTheme : DefaultTheme}
>
<Stack>
<Stack.Screen name="(tabs)" options={{ headerShown: false }} />
<Stack.Screen
name="player"
options={{
presentation: "transparentModal",
gestureEnabled: true,
gestureDirection: "vertical",
animationDuration: 400,
headerShown: false,
}}
/>
<Stack.Screen name="+not-found" />
</Stack>
</ThemeProvider>
</GestureHandlerRootView>
</SafeAreaProvider>
</MusicPlayerProvider>
<Provider store={store}>
<MusicPlayerProvider>
<SafeAreaProvider>
<GestureHandlerRootView style={{ flex: 1 }}>
<ThemeProvider
value={colorScheme === "dark" ? DarkTheme : DefaultTheme}
>
<Stack>
<Stack.Screen name="(tabs)" options={{ headerShown: false }} />
<Stack.Screen
name="player"
options={{
presentation: "transparentModal",
gestureEnabled: true,
gestureDirection: "vertical",
animationDuration: 400,
headerShown: false,
}}
/>
<Stack.Screen name="+not-found" />
</Stack>
</ThemeProvider>
</GestureHandlerRootView>
</SafeAreaProvider>
</MusicPlayerProvider>
</Provider>
);
}
26 changes: 15 additions & 11 deletions app/player.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,11 @@ import { PlayerProgressBar } from "@/components/PlayerProgressbar";
import { fontSize, screenPadding } from "@/constants/tokens";
import { Colors } from "@/constants/Colors";
import { usePlayerBackground } from "@/hooks/usePlayerBackground";
//import { useTrackPlayerFavorite } from "@/hooks/useTrackPlayerFavorite";
import { defaultStyles, utilsStyles } from "@/styles";
import { useTrackPlayerFavorite } from "@/hooks/useTrackPlayerFavorite";
import { defaultStyles } from "@/styles";
import { LinearGradient } from "expo-linear-gradient";
import { ActivityIndicator, StyleSheet, Text, View } from "react-native";
import { FontAwesome } from "@expo/vector-icons";
import FastImage from "react-native-fast-image";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { useActiveTrack } from "react-native-track-player";
Expand All @@ -21,7 +22,7 @@ const PlayerScreen = () => {

const { top, bottom } = useSafeAreaInsets();

//const { isFavorite, toggleFavorite } = useTrackPlayerFavorite();
const { isFavorite, toggleFavoriteFunc } = useTrackPlayerFavorite();

if (!activeTrack) {
return (
Expand Down Expand Up @@ -75,14 +76,17 @@ const PlayerScreen = () => {
/>
</View>

{/* Favorite button icon
<FontAwesome
name={isFavorite ? "heart" : "heart-o"}
size={20}
color={isFavorite ? colors.primary : colors.icon}
style={{ marginHorizontal: 14 }}
onPress={toggleFavorite}
/>*/}
{/* Favorite button icon*/}
<FontAwesome
name={isFavorite ? "heart" : "heart-o"}
size={20}
color={isFavorite ? "#ff0000" : Colors.dark.icon}
style={{ marginHorizontal: 14 }}
onPress={() => {
console.log("Heart pressed");
toggleFavoriteFunc();
}}
/>
</View>

{/* Track artist */}
Expand Down
14 changes: 14 additions & 0 deletions helpers/types.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import { Track } from "react-native-track-player";

export type Playlist = {
name: string;
tracks: Track[];
artworkPreview: string;
};

export type Artist = {
name: string;
tracks: Track[];
};

export type TrackWithPlaylist = Track & { playlist?: string[] };
40 changes: 40 additions & 0 deletions hooks/useTrackPlayerFavorite.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import { useFavorites } from "@/store/library";
import { useCallback, useEffect, useState } from "react";
import TrackPlayer, { useActiveTrack } from "react-native-track-player";

export const useTrackPlayerFavorite = () => {
const activeTrack = useActiveTrack();
const { favoriteTracks, toggleFavoriteTrack } = useFavorites();
const [isFavorite, setIsFavorite] = useState(false);

useEffect(() => {
if (activeTrack) {
setIsFavorite(favoriteTracks.includes(activeTrack.id));
}
}, [activeTrack, favoriteTracks]);

const toggleFavoriteFunc = useCallback(async () => {
if (!activeTrack) return;

// Toggle favorite status
toggleFavoriteTrack(activeTrack.id);

// Update track player internal state
try {
const queue = await TrackPlayer.getQueue();
const trackIndex = queue.findIndex(
(track) => track.id === activeTrack.id
);

if (trackIndex !== -1) {
await TrackPlayer.updateMetadataForTrack(trackIndex, {
rating: isFavorite ? 0 : 1,
});
}
} catch (error) {
console.error("Error updating track metadata:", error);
}
}, [activeTrack, isFavorite, toggleFavoriteTrack]);

return { isFavorite, toggleFavoriteFunc };
};
Loading

0 comments on commit ffe232e

Please sign in to comment.