diff --git a/Project-Two-contribution.md b/Project-Two-contribution.md index 2168885..cac98c2 100644 --- a/Project-Two-contribution.md +++ b/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) diff --git a/Project-one-contribution.md b/Project-one-contribution.md index 22e0d6c..95d2b05 100644 --- a/Project-one-contribution.md +++ b/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) ---- \ No newline at end of file +--- + +---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) diff --git a/spotifymusic08/musicPlayerServices.js b/spotifymusic08/musicPlayerServices.js index e35eed0..af9702a 100644 --- a/spotifymusic08/musicPlayerServices.js +++ b/spotifymusic08/musicPlayerServices.js @@ -1,8 +1,8 @@ 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() @@ -10,18 +10,18 @@ export async function setupPlayer(){ } 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(); + } + }); + - } \ No newline at end of file diff --git a/spotifymusic08/src/components/ControlCenter.tsx b/spotifymusic08/src/components/ControlCenter.tsx index f2f3c5e..dc20cef 100644 --- a/spotifymusic08/src/components/ControlCenter.tsx +++ b/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.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 ( - - - - togglePlayback(playBackState)}> - - - - - - + + + + togglePlayback(currentPlaybackState)}> + + + + + + + + - ) -} + ); +}; 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 \ No newline at end of file +export default ControlCenter;