diff --git a/.expo-shared/README.md b/.expo-shared/README.md new file mode 100644 index 0000000..e9e5318 --- /dev/null +++ b/.expo-shared/README.md @@ -0,0 +1,11 @@ +> Why do I have a folder named ".expo-shared" in my project? + +The ".expo-shared" folder is created when running commands that produce state that is intended to be shared with all developers on the project. For example, "npx expo-optimize". + +> What does the "assets.json" file contain? + +The "assets.json" file describes the assets that have been optimized through "expo-optimize" and do not need to be processed again. + +> Should I commit the ".expo-shared" folder? + +Yes, you should share the ".expo-shared" folder with your collaborators. diff --git a/.expo-shared/assets.json b/.expo-shared/assets.json index 1e6decf..0967ef4 100644 --- a/.expo-shared/assets.json +++ b/.expo-shared/assets.json @@ -1,4 +1 @@ -{ - "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true, - "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true -} +{} diff --git a/App.js b/App.js index bd69245..1de4c75 100644 --- a/App.js +++ b/App.js @@ -1,4 +1,4 @@ -import { StyleSheet } from "react-native"; +import { AppRegistry, StyleSheet } from "react-native"; import { useFonts } from "expo-font"; import AppLoading from "expo-app-loading"; import Navigation from "./navigation/index"; @@ -27,4 +27,4 @@ const App = () => { const styles = StyleSheet.create({}); -export default App; +export default App; \ No newline at end of file diff --git a/app.json b/app.json index 6a61d6a..a630017 100644 --- a/app.json +++ b/app.json @@ -28,6 +28,7 @@ }, "web": { "favicon": "" - } + }, + "description": "" } } diff --git a/navigation/index.js b/navigation/index.js index bd34215..1174a1d 100644 --- a/navigation/index.js +++ b/navigation/index.js @@ -50,7 +50,7 @@ const BottomTabNavigator = () => { // tabBarLabel : 'reza' }} > - { ), }} - /> + /> */} diff --git a/src/components/MusicPlayer.js b/src/components/MusicPlayer.js new file mode 100644 index 0000000..2417f6c --- /dev/null +++ b/src/components/MusicPlayer.js @@ -0,0 +1,186 @@ +import React, { useState, useEffect } from "react"; +import { StyleSheet, TouchableOpacity, View, Image, Text } from "react-native"; +import { Ionicons } from "@expo/vector-icons"; +import { Audio } from "expo-av"; +import sound from '../assets/sound.mp3'; + +const audioBookPlaylist = [ + { + title: "Hamlet - Act I", + author: "William Shakespeare", + source: "Librivox", + uri: sound, + imageSource: + "http://www.archive.org/download/LibrivoxCdCoverArt8/hamlet_1104.jpg", + }, + +]; + +const MusicPlayer = () => { + const [isPlaying, setIsPlaying] = useState(false); + const [playbackInstance, setPlaybackInstance] = useState(null); + const [currentIndex, setCurrentIndex] = useState(0); + const [volume, setVolume] = useState(1.0); + const [isBuffering, setIsBuffering] = useState(true); + + useEffect( async () => { + try { + await Audio.setAudioModeAsync({ + allowsRecordingIOS: false, + interruptionModeIOS: Audio.INTERRUPTION_MODE_IOS_DO_NOT_MIX, + playsInSilentModeIOS: true, + interruptionModeAndroid: Audio.INTERRUPTION_MODE_ANDROID_DO_NOT_MIX, + shouldDuckAndroid: true, + staysActiveInBackground: true, + playThroughEarpieceAndroid: true, + }); + + loadAudio(); + } catch (e) { + console.log(e); + } + }); + + const loadAudio = async () => { + try { + const playbackInstance = new Audio.Sound(); + const source = { + uri: audioBookPlaylist[currentIndex].uri, + }; + + const status = { + shouldPlay: isPlaying, + volume: volume, + }; + + playbackInstance.setOnPlaybackStatusUpdate(onPlaybackStatusUpdate); + await playbackInstance.loadAsync(source, status, false); + setPlaybackInstance(playbackInstance); + } catch (e) { + console.log(e); + } + }; + + const onPlaybackStatusUpdate = (status) => { + setIsBuffering(status.isBuffering); + }; + + const handlePlayPause = async () => { + if(isPlaying) { + await playbackInstance.pauseAsync(); + }else{ + await playbackInstance.playAsync(); + } + + setIsPlaying(() => !isPlaying); + }; + + const handlePreviousTrack = async () => { + let { playbackInstance, currentIndex } = state; + if (playbackInstance) { + await playbackInstance.unloadAsync(); + setCurrentIndex( + currentIndex === 0 ? audioBookPlaylist.length - 1 : currentIndex - 1 + ); + loadAudio(); + } + }; + + const handleNextTrack = async () => { + if (playbackInstance) { + await playbackInstance.unloadAsync(); + setCurrentIndex( + currentIndex + 1 > audioBookPlaylist.length - 1 ? 0 : currentIndex + 1 + ); + loadAudio(); + } + }; + + const renderFileInfo = () => { + return playbackInstance ? ( + + + {audioBookPlaylist[currentIndex].title} + + + {audioBookPlaylist[currentIndex].author} + + + {audioBookPlaylist[currentIndex].source} + + + ) : null; + }; + return ( + + + + handlePreviousTrack()} + > + + + handlePlayPause()} + > + {isPlaying ? ( + + ) : ( + + )} + + handleNextTrack()} + > + + + + {renderFileInfo()} + + ); +}; + +const styles = StyleSheet.create({ + container: { + flex: 1, + backgroundColor: "#fff", + alignItems: "center", + justifyContent: "center", + }, + albumCover: { + width: 250, + height: 250, + }, + trackInfo: { + padding: 40, + backgroundColor: "#fff", + }, + + trackInfoText: { + textAlign: "center", + flexWrap: "wrap", + color: "#550088", + }, + largeText: { + fontSize: 22, + }, + smallText: { + fontSize: 16, + }, + control: { + margin: 20, + }, + controls: { + flexDirection: "row", + }, +}); + +export default MusicPlayer; \ No newline at end of file diff --git a/src/components/Navbar.js b/src/components/Navbar.js index b042b41..83caa67 100644 --- a/src/components/Navbar.js +++ b/src/components/Navbar.js @@ -4,11 +4,15 @@ import { StyleSheet, View, Pressable, + Dimensions, + Text, } from "react-native"; import { useNavigation } from "@react-navigation/native"; -import { Ionicons } from "@expo/vector-icons"; +import { Ionicons, Entypo } from "@expo/vector-icons"; import tw from "tailwind-rn"; -import Drawer from "./Drawer"; +import { connect } from "react-redux"; + +const { width, height } = Dimensions.get("window"); //colors import Color from "../constants/Colors"; @@ -19,7 +23,7 @@ import logoIcon from "../assets/icons/logo.png"; import qrLightIcon from "../assets/icons/qr-light.png"; import arLightIcon from "../assets/icons/ar-light.png"; -const Navbar = ({ notification, back, setBoxPosition }) => { +const Navbar = ({ notification, setBoxPosition, headerOptions }) => { const navigation = useNavigation(); const Button = useCallback(({ icon, route }) => { @@ -42,40 +46,67 @@ const Navbar = ({ notification, back, setBoxPosition }) => { }, []); return ( - setBoxPosition()}> - - {notification && ( - - )} - - navigation.navigate("Home")} - style={tw("absolute right-1/2 top-1/2")} - > - navigation.goBack()} /> - + ) : null} + {headerOptions.title ? ( + + {headerOptions?.title} + + ) : null} + {headerOptions.hamburgerMenu && ( + setBoxPosition()}> + + {notification && ( + + )} + + )} + + {headerOptions.logo && ( + navigation.navigate("Home")} + style={tw("absolute right-1/2 top-1/2")} + > + + + )} + - {back && ( + {headerOptions.back && headerOptions.title ? ( { color={"#196EC0"} onPress={() => navigation.goBack()} /> + ) : null} + {headerOptions.qr && ( + <> +