new look and added filter and delayed start

Author: tristola

App/Components/Song.js

@@ -1,15 +1,14 @@
 import React from 'react'
-import { TouchableOpacity, Text, View } from 'react-native'
-import styles from './Styles/SongStyle'
+import { View } from 'react-native'
 import { getFormattedTime } from '../Lib/TimeLib'
-import { List, ListItem, Avatar } from 'react-native-elements'
+import { ListItem, Avatar } from 'react-native-elements'
 
 const Song = ({song, file, onPress}) => (
   <ListItem
-    avatar={<Avatar small rounded title={song.genre.substring(0,2).toUpperCase()} activeOpacity={0.7} />}
+    avatar={<Avatar small rounded title={song.genre.substring(0, 2).toUpperCase()} activeOpacity={0.7} />}
     onPress={() => onPress()}
     key={song.title}
-    rightIcon={<View/>}
+    rightIcon={<View />}
     badge={{value: getFormattedTime(song.duration)}}
     title={`Artist:${song.artist} title:${song.title}`}
     subtitle={`${song.genre}:${getFormattedTime(song.duration)}`}

App/Containers/MusicPlayerScreen.js

@@ -2,39 +2,38 @@ import React from 'react'
 import { View } from 'react-native'
 import SongList from '../Containers/SongList'
 import { connect } from 'react-redux'
-import styles from './Styles/MusicPlayerScreenStyle'
 import PlayerArea from '../Containers/PlayerArea'
-import Filter from './../Components/Filter'
 import { SearchBar } from 'react-native-elements'
 import R from 'ramda'
 
 class MusicPlayer extends React.Component {
-  constructor(props) {
+  constructor (props) {
     super(props)
     this.state = {
       searchTerm: '',
       currentlyDisplayed: []
     }
   }
-  componentWillReceiveProps(props){
+  componentWillReceiveProps (props) {
     this.setState({currentlyDisplayed: props.songs})
   }
-  filterDisplayed(text) {
-    this.setState
-    ({
-      searchTerm: text,
-      currentlyDisplayed: this.props.songs
-    })
-    
-    this.setState({currentlyDisplayed: this.props.songs})
+  filterDisplayed (text) {
+    const songContains = (a, p, v) => R.path(['metadata', p], a).toLowerCase().indexOf(text.toLowerCase()) > -1
+    const currentlyDisplayed = this.props.songs
+      .filter(song =>
+        songContains(song, 'title') ||
+        songContains(song, 'artist') ||
+        songContains(song, 'genre')
+      )
+    this.setState({currentlyDisplayed})
   }
   render () {
     const songs = this.state.currentlyDisplayed || []
     return (
-      <View style={styles.container}>
-      <SearchBar round onChangeText={text => this.filterDisplayed(text)} placeholder='Type Here...' />
+      <View style={{flex: 1, backgroundColor: 'white'}}>
+        <SearchBar round onChangeText={text => this.filterDisplayed(text)} placeholder='Type Here...' />
         <SongList songs={songs} />
-        <PlayerArea />
+        <PlayerArea style={{marginTop: -20}} />
       </View>
     )
   }

App/Containers/PlayerArea.js

@@ -5,11 +5,10 @@ import Icon from 'react-native-vector-icons/FontAwesome'
 import PlayerActions from '../Redux/PlayerRedux'
 import { Colors } from '../Themes/'
 import styles from './Styles/PlayerAreaStyle'
-import PlayPause from '../Components/PlayPause'
 
 const textStyle = {
   fontSize: 25,
-  color: Colors.bloodOrange
+  color: Colors.snow
 }
 
 const PlayerArea = ({ playing, play, pause, stop, metadata }) => (
@@ -23,20 +22,23 @@ const PlayerArea = ({ playing, play, pause, stop, metadata }) => (
           {metadata && metadata.artist}
         </Text>
       </View>
-      <TouchableOpacity
+    </View>
+    <TouchableOpacity
       activeOpacity={1.0}
-      onPress={() => setTimeout(play, 5000)}
+      style={styles.delayedstart}
+      onPress={() => setTimeout(play, 2000)}
       >
-      <Text style={textStyle}>Delayed Start</Text>
+      { playing
+       ? <View />
+       : <Icon size={30} name={'play-circle-o'} color='#fff' />
+      }
     </TouchableOpacity>
-
-    </View>
     <TouchableOpacity
       activeOpacity={1.0}
       onPress={playing ? pause : play}
       style={styles.playpause}
       >
-      <PlayPause size={200} playing={playing} />
+      <Icon size={30} name={playing ? 'pause' : 'play'} color='#fff' />
     </TouchableOpacity>
     <TouchableOpacity
       playing={playing}

App/Containers/SongList.js

@@ -1,22 +1,22 @@
 import React from 'react'
-import { ScrollView, Text, View, KeyboardAvoidingView } from 'react-native'
+import { ScrollView, View } from 'react-native'
 import { connect } from 'react-redux'
 import Song from '../Components/Song'
 import styles from './Styles/SongListStyle'
 import PlayerActions from '../Redux/PlayerRedux'
-import { List, ListItem } from 'react-native-elements'
+import { List } from 'react-native-elements'
 
 class SongList extends React.Component {
   render () {
-    const { songs, setSong, style = {} } = this.props
+    const { songs, setSong } = this.props
     return (
       <View style={[styles.container]}>
         <ScrollView>
-            <List>
+          <List>
             {songs.map((song, index) =>
               <Song onPress={() => setSong(song)} key={index} song={song.metadata} />
             )}
-            </List>
+          </List>
         </ScrollView>
       </View>
     )

App/Containers/Styles/PlayerAreaStyle.js

@@ -1,5 +1,4 @@
 import { StyleSheet } from 'react-native'
-import { Colors } from '../../Themes/'
 
 export default StyleSheet.create({
   container: {
@@ -8,29 +7,32 @@ export default StyleSheet.create({
     paddingTop: 20,
     paddingLeft: 25,
     paddingRight: 25,
-    borderRadius: 5,
-    backgroundColor: '#d7cec7'
+    backgroundColor: 'rgba(0, 0, 0, 0.8)'
   },
   stop: {
-    borderRadius: 50,
     justifyContent: 'center',
     alignItems: 'center',
     height: 100,
     width: 100,
-    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    backgroundColor: 'rgba(0, 0, 0, 0)',
     position: 'absolute',
     right: 0,
-    bottom: 10
+    bottom: 6
+  },
+  delayedstart: {
+    backgroundColor: 'rgba(0, 0, 0, 0)',
+    position: 'absolute',
+    right: 130,
+    bottom: 40
   },
   playpause: {
-    borderRadius: 200/2,
-    backgroundColor: 'rgba(0, 0, 0, 0.1)',
+    backgroundColor: 'rgba(0, 0, 0, 0)',
     position: 'absolute',
-    right: 40,
-    bottom: -40
+    right: 90,
+    bottom: 40
   },
   textStyle: {
     fontSize: 25,
-    color: '#76323f'
+    color: 'rgba(255, 255, 255, 1)'
   }
 })

App/Containers/Styles/RootContainerStyles.js

@@ -1,5 +1,5 @@
 import {StyleSheet} from 'react-native'
-import {Fonts, Metrics, Colors} from '../../Themes/'
+import {Fonts, Colors} from '../../Themes/'
 
 export default StyleSheet.create({
   applicationView: {
@@ -14,8 +14,8 @@ export default StyleSheet.create({
   welcome: {
     fontSize: 20,
     textAlign: 'center',
-    fontFamily: Fonts.type.base,
-    margin: Metrics.baseMargin
+    fontFamily: Fonts.type.base
+
   },
   myImage: {
     width: 200,

App/Containers/Styles/SongListStyle.js

@@ -1,5 +1,5 @@
 import { StyleSheet } from 'react-native'
-import { Colors, Metrics } from '../../Themes/'
+import { Colors } from '../../Themes/'
 
 export default StyleSheet.create({
   container: {

README.md

@@ -3,7 +3,7 @@
 
 * Standard compliant React Native App Utilizing [Ignite](https://github.com/infinitered/ignite)
 
-![play-pause animation](https://github.com/tristola/musicplayer/blob/master/player.gif)
+![play-pause animation](https://github.com/tristola/musicplayer/blob/master/player.png)
 
 ## :arrow_up: How to Setup