Project one hasnode blogs contribution

Project-Two-contribution.md

@@ -11,3 +11,6 @@ Moeen Ul Islam
 2. [A comprehensive guide to flexbox with code snippets](https://moeen.hashnode.dev/flex-your-layouts-a-comprehensive-guide-to-flexbox-in-react-native-with-code-snippets)
 
 ---
+
+Subham singh Rawat
+1.[Adding custom fonts in React-native app](https://subham123.hashnode.dev/adding-custom-fonts-in-react-native)

Project-one-contribution.md

@@ -2,27 +2,29 @@
 
 Submit your articles here via a Pull Request. Make sure your article is on Hashnode and should add a value. Don't make PR just for the sake for making it.
 
-
 --- Piyush
 
 1. [React Native Installation Process on Windows](https://piyushsagar.hashnode.dev/react-native-installation-process-on-windows)
 2. [Getting started with React Native: Building Your First Mobile App](https://piyushsagar.hashnode.dev/getting-started-with-react-native-building-your-first-mobile-app)
+
 ---
 
 --- Moeen
+
 1. [your-first-reactnative-app-windows](https://moeen.hashnode.dev/your-first-reactnative-app-windows)
 2. [reactnative-folder-structure-explained-101](https://moeen.hashnode.dev/reactnative-folder-structure-explained-101)
 
-1. [your article](link)
-2. [Quick Installation guide for React Native (Mac Os)](https://sharetogrow.hashnode.dev/quick-installation-guide-for-react-native-mac-os)
-3. [Up and running your first react-native app](https://sharetogrow.hashnode.dev/up-and-running-your-first-react-native-app)
-4. [File structure of react-native app](https://sharetogrow.hashnode.dev/file-structure-of-react-native-app)
-5. [Your First Hello World React-Native App (JSX,Basic Components in react-native )](https://sharetogrow.hashnode.dev/your-first-hello-world-react-native-app-jsxbasic-components-in-react-native) 
-6. [Introduction to StyleSheet and Understanding Main-axis and Cross-axis in React-Native](https://sharetogrow.hashnode.dev/introduction-to-stylesheet-and-understanding-main-axis-and-cross-axis-in-react-native)
----
+3. [your article](link)
+4. [Quick Installation guide for React Native (Mac Os)](https://sharetogrow.hashnode.dev/quick-installation-guide-for-react-native-mac-os)
+5. [Up and running your first react-native app](https://sharetogrow.hashnode.dev/up-and-running-your-first-react-native-app)
+6. [File structure of react-native app](https://sharetogrow.hashnode.dev/file-structure-of-react-native-app)
+7. [Your First Hello World React-Native App (JSX,Basic Components in react-native )](https://sharetogrow.hashnode.dev/your-first-hello-world-react-native-app-jsxbasic-components-in-react-native)
+8. [Introduction to StyleSheet and Understanding Main-axis and Cross-axis in React-Native](https://sharetogrow.hashnode.dev/introduction-to-stylesheet-and-understanding-main-axis-and-cross-axis-in-react-native)
 
+---
 
 --- Raviteja @venkataravitejagullapudi
+
 1. [Installing React Native Dependencies - A Beginner's Guide](https://venkataraviteja.hashnode.dev/installing-react-native-dependencies-a-beginners-guide)
 2. [Get Your First React Native App Up and Running - A Step-by-Step Guide](https://venkataraviteja.hashnode.dev/get-your-first-react-native-app-up-and-running-a-step-by-step-guide)
 3. [Understanding the React Native Folder Structure - A Beginner's Guide](https://venkataraviteja.hashnode.dev/understanding-the-react-native-folder-structure-a-beginners-guide)
@@ -32,28 +34,23 @@ Submit your articles here via a Pull Request. Make sure your article is on Hashn
 ---
 
 --- Dixit
+
 1. [Debugging Your React Native App Wirelessly](https://heyydixit.hashnode.dev/debugging-your-react-native-app-wirelessly)
 
 ---
 
---- Sumant @bandya2003
-1.[Installation Guide for React-Native](https://bandyablogs.hashnode.dev/unleashing-the-power-of-react-native-a-step-by-step-guide-to-installing-on-windows)
-2.[How to start your first React Native app and debugging 🐱‍🏍!](https://bandyablogs.hashnode.dev/how-to-start-your-first-react-native-app-and-debugging)
-3.[Understanding React Native File Structure](https://bandyablogs.hashnode.dev/file-structure-of-react-native-app)
+--- Sumant @bandya2003 1.[Installation Guide for React-Native](https://bandyablogs.hashnode.dev/unleashing-the-power-of-react-native-a-step-by-step-guide-to-installing-on-windows) 2.[How to start your first React Native app and debugging 🐱‍🏍!](https://bandyablogs.hashnode.dev/how-to-start-your-first-react-native-app-and-debugging) 3.[Understanding React Native File Structure](https://bandyablogs.hashnode.dev/file-structure-of-react-native-app)
 
 ---
 
---- Shrutika @codewithshrut
-1.[Setting up environment for React Native](https://codewithshrut.hashnode.dev/setting-up-environment-for-react-native)
-2.[Running your first React Native app](https://codewithshrut.hashnode.dev/running-your-first-react-native-app)
-3.[Understanding React Native file structure](https://codewithshrut.hashnode.dev/understanding-react-native-file-structure)
-4.[Hello World App in React Native](https://codewithshrut.hashnode.dev/hello-world-app-in-react-native)
-5.[Stylesheet in React Native](https://codewithshrut.hashnode.dev/stylesheet-in-react-native)
-6.['useColorScheme' hook in React Native](https://codewithshrut.hashnode.dev/usecolorscheme-hook-in-react-native)
+--- Shrutika @codewithshrut 1.[Setting up environment for React Native](https://codewithshrut.hashnode.dev/setting-up-environment-for-react-native) 2.[Running your first React Native app](https://codewithshrut.hashnode.dev/running-your-first-react-native-app) 3.[Understanding React Native file structure](https://codewithshrut.hashnode.dev/understanding-react-native-file-structure) 4.[Hello World App in React Native](https://codewithshrut.hashnode.dev/hello-world-app-in-react-native) 5.[Stylesheet in React Native](https://codewithshrut.hashnode.dev/stylesheet-in-react-native) 6.['useColorScheme' hook in React Native](https://codewithshrut.hashnode.dev/usecolorscheme-hook-in-react-native)
 
 ---
 
 --- Pratik Chandlekar
+
 1. [Linux Devs Rejoice: A Comprehensive Guide to Setting Up Your React Native Development Environment](https://pratik280.hashnode.dev/linux-devs-rejoice-a-comprehensive-guide-to-setting-up-your-react-native-development-environment)
 
----
+---
+
+---Subham Singh Rawat 1.[ React Natvie Insatallation guide](https://subham123.hashnode.dev/how-to-install-react-native-in-simple-steps) 2.[How To Apply React Native Dark Theme](https://hashnode.com/edit/cm0njsd8n00000ajy1cji2ecl)

spotifymusic08/musicPlayerServices.js

@@ -1,27 +1,27 @@
 import TrackPlayer, { Event, RepeatMode } from "react-native-track-player";
 
-import {playListData} from './src/constants'
+import { playListData } from './src/constants'
 
-export async function setupPlayer(){
+export async function setupPlayer() {
     let isSetup = false;
     try {
         await TrackPlayer.getCurrentTrack()
         isSetup = true
     } catch (error) {
         await TrackPlayer.setupPlayer()
         isSetup = true
-    } finally{
+    } finally {
         return isSetup;
     }
 }
 
-export async function addTrack(){
+export async function addTrack() {
     await TrackPlayer.add(playListData)
     await TrackPlayer.setRepeatMode(RepeatMode.Queue)
 }
 
 
-export async function playbackService (){
+export async function playbackService() {
     TrackPlayer.addEventListener(Event.RemotePause, () => {
         TrackPlayer.pause()
     })
@@ -35,6 +35,14 @@ export async function playbackService (){
     TrackPlayer.addEventListener(Event.RemotePrevious, () => {
         TrackPlayer.skipToPrevious()
     })
+    TrackPlayer.addEventListener(Event.PlaybackQueueEnded, async () => {
+        const repeatMode = await TrackPlayer.getRepeatMode();
+        if (repeatMode === RepeatMode.Track) {
+
+            await TrackPlayer.seekTo(0);
+            await TrackPlayer.play();
+        }
+    });
+
 
-
 }

spotifymusic08/src/components/ControlCenter.tsx

@@ -1,69 +1,111 @@
-import React from 'react'
-import { View, StyleSheet, Pressable } from 'react-native'
-import TrackPlayer, { State, usePlaybackState } from 'react-native-track-player'
+import React, {useEffect, useState} from 'react';
+import {View, StyleSheet, Pressable} from 'react-native';
+import TrackPlayer, {
+  State,
+  usePlaybackState,
+  RepeatMode,
+} from 'react-native-track-player';
+import Icon from 'react-native-vector-icons/MaterialIcons';
 
+const ControlCenter = () => {
+  const playBackState = usePlaybackState();
+  const [repeatMode, setRepeatMode] = useState<RepeatMode>(RepeatMode.Off);
 
-import Icon from 'react-native-vector-icons/MaterialIcons'
+  useEffect(() => {
+    const fetchRepeatMode = async () => {
+      const mode = await TrackPlayer.getRepeatMode();
+      setRepeatMode(mode);
+    };
 
-import { playbackService } from '../../musicPlayerServices'
+    fetchRepeatMode();
+  }, []);
 
-const ControlCenter = () => {
+  const skipToNext = async () => {
+    await TrackPlayer.skipToNext();
+  };
 
-    const playBackState = usePlaybackState()
-    // next button
-    const skipToNext = async () => {
-        await TrackPlayer.skipToNext()
-    }
-    // Previous button
-    const skipToPrevious = async () => {
-        await TrackPlayer.skipToPrevious()
-    }
+  const skipToPrevious = async () => {
+    await TrackPlayer.skipToPrevious();
+  };
 
-    const togglePlayback = async (playback: State) => {
-        const  currentTrack = await TrackPlayer.getCurrentTrack()
+  const togglePlayback = async (playback: State) => {
+    const currentTrack = await TrackPlayer.getCurrentTrack();
 
-        if (currentTrack !== null) {
-            if (playback === State.Paused || playback === State.Ready) {
-                await TrackPlayer.play()
-            } else {
-                await TrackPlayer.pause()
-            }
-        }
+    if (currentTrack !== null) {
+      if (playback === State.Paused || playback === State.Ready) {
+        await TrackPlayer.play();
+      } else {
+        await TrackPlayer.pause();
+      }
     }
+  };
+
+  const toggleRepeatMode = async () => {
+    let newMode;
+    switch (repeatMode) {
+      case RepeatMode.Off:
+        newMode = RepeatMode.Track;
+        break;
+      case RepeatMode.Track:
+        newMode = RepeatMode.Queue;
+        break;
+      case RepeatMode.Queue:
+        newMode = RepeatMode.Off;
+        break;
+      default:
+        newMode = RepeatMode.Off;
+    }
+    await TrackPlayer.setRepeatMode(newMode);
+    setRepeatMode(newMode);
+  };
+
+  const currentPlaybackState = playBackState as State;
 
   return (
     <View style={styles.container}>
-        <Pressable onPress={skipToPrevious}>
-            <Icon style={styles.icon} name="skip-previous" size={40} />
-        </Pressable>
-        <Pressable onPress={() => togglePlayback(playBackState)}>
-            <Icon 
-            style={styles.icon} 
-            name={playBackState === State.Playing ? "pause" : "play-arrow"} 
-            size={75} />
-        </Pressable>
-        <Pressable onPress={skipToNext}>
-            <Icon style={styles.icon} name="skip-next" size={40} />
-        </Pressable>
-
+      <Pressable onPress={skipToPrevious}>
+        <Icon style={styles.icon} name="skip-previous" size={40} />
+      </Pressable>
+      <Pressable onPress={() => togglePlayback(currentPlaybackState)}>
+        <Icon
+          style={styles.icon}
+          name={currentPlaybackState === State.Playing ? 'pause' : 'play-arrow'}
+          size={75}
+        />
+      </Pressable>
+      <Pressable onPress={skipToNext}>
+        <Icon style={styles.icon} name="skip-next" size={40} />
+      </Pressable>
+      <Pressable onPress={toggleRepeatMode}>
+        <Icon
+          style={styles.icon}
+          name={
+            repeatMode === RepeatMode.Off
+              ? 'repeat'
+              : repeatMode === RepeatMode.Track
+              ? 'repeat-one'
+              : 'repeat'
+          }
+          size={40}
+        />
+      </Pressable>
     </View>
-  )
-}
+  );
+};
 
 const styles = StyleSheet.create({
-    container: {
-      marginBottom: 56,
-
-      flex: 1,
-      flexDirection: 'row',
-      alignItems: 'center',
-    },
-    icon: {
-      color: '#FFFFFF',
-    },
-    playButton: {
-      marginHorizontal: 24,
-    },
-  });
+  container: {
+    marginBottom: 56,
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  icon: {
+    color: '#FFFFFF',
+  },
+  playButton: {
+    marginHorizontal: 24,
+  },
+});
 
-export default ControlCenter
+export default ControlCenter;