Makin music player

Author: divyansharma001

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "java.configuration.updateBuildConfiguration": "interactive"
+}

App.tsx

@@ -4,7 +4,7 @@
 
 import 'react-native';
 import React from 'react';
-import App from '../App';
+import App from '../src/App';
 
 // Note: import explicitly to use the types shipped with jest.
 import {it} from '@jest/globals';

__tests__/App.test.tsx

@@ -116,3 +116,4 @@ dependencies {
 }
 
 apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)
+apply from: file("../../node_modules/react-native-vector-icons/fonts.gradle")

android/app/build.gradle

@@ -1,9 +1,11 @@
 /**
  * @format
  */
-
+import TrackPlayer from 'react-native-track-player';
 import {AppRegistry} from 'react-native';
-import App from './App';
+import App from './src/App';
 import {name as appName} from './app.json';
+import { playbackService } from './musicPlayerService';
 
 AppRegistry.registerComponent(appName, () => App);
+TrackPlayer.registerPlaybackService(() => playbackService);

index.js

@@ -0,0 +1,42 @@
+import TrackPlayer, { RepeatMode } from "react-native-track-player";
+
+import { playListData } from "./src/constants";
+
+export async function setupPlayer(){
+    let isSetup = false;
+    try {
+        await TrackPlayer.getActiveTrackIndex()
+        isSetup = true;
+    } catch (error) {
+        await TrackPlayer.setupPlayer()
+        isSetup = true;
+    } finally {
+        return isSetup;
+    }
+
+}
+
+export async function addTrack(){
+    await TrackPlayer.add(playListData)
+    await TrackPlayer.setRepeatMode(RepeatMode.Queue)
+}
+
+
+export async function playbackService (){
+    TrackPlayer.addEventListener(Event.RemotePause, ()=>{
+        TrackPlayer.pause()
+    })
+
+    TrackPlayer.addEventListener(Event.RemotePlay, ()=>{
+        TrackPlayer.play()
+    })
+
+    TrackPlayer.addEventListener(Event.RemoteNext, ()=>{
+        TrackPlayer.skipToNext()
+    })
+
+    TrackPlayer.addEventListener(Event.RemotePrevious, ()=>{
+        TrackPlayer.skipToPrevious()
+    })
+
+}

musicPlayerService.js

@@ -12,7 +12,8 @@
   "dependencies": {
     "react": "18.2.0",
     "react-native": "0.74.3",
-    "react-native-track-player": "^4.1.1"
+    "react-native-track-player": "^4.1.1",
+    "react-native-vector-icons": "^10.1.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

package-lock.json

@@ -0,0 +1,52 @@
+import React, {useState, useEffect} from 'react';
+
+import {
+  ActivityIndicator,
+  SafeAreaView,
+  StatusBar,
+  StyleSheet,
+  Text,
+} from 'react-native';
+
+import {setupPlayer, addTrack} from '../musicPlayerService';
+
+function App(): React.JSX.Element {
+  const [isPlayerReady, setIsPlayerReady] = useState(false);
+
+  async function setup() {
+    let isSetup = await setupPlayer();
+
+    if (isSetup) {
+      await addTrack();
+    }
+
+    setIsPlayerReady(isSetup);
+  }
+
+  useEffect(() => {
+    setup();
+  }, []);
+
+  if (!isPlayerReady) {
+    return (
+      <SafeAreaView>
+        <ActivityIndicator />
+      </SafeAreaView>
+    );
+  }
+
+  return (
+    <SafeAreaView>
+      <StatusBar />
+      <Text>Hello react nativee</Text>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});
+
+export default App;