added showing a counter

Author: tristola

App/Containers/MusicPlayerScreen.js

@@ -11,21 +11,22 @@ class MusicPlayer extends React.Component {
     super(props)
     this.state = {
       searchTerm: '',
-      currentlyDisplayed: []
+      currentlyDisplayed: [],
+      selectedGenres: []
     }
   }
   componentWillReceiveProps (props) {
-    this.setState({currentlyDisplayed: props.songs})
+    this.setState({currentlyDisplayed: props.songs, selectedGenres: props.genres})
   }
   filterDisplayed (text) {
     const songContains = (a, p) => R.path(['metadata', p], a).toLowerCase().indexOf(text.toLowerCase()) > -1
-    const currentlyDisplayed = this.props.songs
+    let currentlyDisplayed = this.props.songs
       .filter(song =>
         songContains(song, 'title') ||
         songContains(song, 'artist') ||
         songContains(song, 'genre')
       )
-    this.setState({currentlyDisplayed})
+    this.setState({currentlyDisplayed: currentlyDisplayed.filter(song => R.contains(song.genre, this.state.selectedGenres))})
   }
   render () {
     const songs = this.state.currentlyDisplayed || []
@@ -40,8 +41,8 @@ class MusicPlayer extends React.Component {
 }
 
 const mapStateToProps = (state) => {
-  const { songs = [] } = state.songs
-  return { songs }
+  const { songs = [], genres = [] } = state.songs
+  return { songs, genres }
 }
 
 const mapDispatchToProps = (dispatch) => {

App/Containers/PlayerArea.js

@@ -11,44 +11,77 @@ const textStyle = {
   color: Colors.snow
 }
 
-const PlayerArea = ({ playing, play, pause, stop, metadata }) => (
-  <View>
-    <View style={styles.container}>
-      <View style={{flexDirection: 'column', alignItems: 'flex-start', justifyContent: 'flex-start', paddingBottom: 20}}>
-        <Text style={textStyle}>
-          {metadata && metadata.title}
-        </Text>
-        <Text style={textStyle}>
-          {metadata && metadata.artist}
-        </Text>
-      </View>
-    </View>
-    <TouchableOpacity
-      activeOpacity={1.0}
-      style={styles.delayedstart}
-      onPress={() => setTimeout(play, 2000)}
-      >
-      { playing
-       ? <View />
-       : <Icon size={30} name={'play-circle-o'} color='#fff' />
+class PlayerArea extends React.Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      count: 5,
+      counting: false
+    }
+  }
+  componentDidMount () {
+    const intervalId = setInterval(() => this.timer(), 1000)
+    this.setState({intervalId: intervalId})
+  }
+  componentWillUnmount () {
+    clearInterval(this.state.intervalId)
+  }
+
+  timer = () => {
+    const {count, counting} = this.state
+    if (counting) {
+      let newCount = count - 1
+      if (newCount === 0) {
+        this.props.play()
+        this.setState({count: 5, counting: false})
+      } else {
+        this.setState({count: newCount})
       }
-    </TouchableOpacity>
-    <TouchableOpacity
-      activeOpacity={1.0}
-      onPress={playing ? pause : play}
-      style={styles.playpause}
+    }
+  }
+  render () {
+    const { playing, play, pause, stop, metadata } = this.props
+    const { count } = this.state
+    return (
+      <View>
+        <View style={styles.container}>
+          <View style={{flexDirection: 'column', alignItems: 'flex-start', justifyContent: 'flex-start', paddingBottom: 20}}>
+            <Text style={textStyle}>
+              {metadata && metadata.title}
+            </Text>
+            <Text style={textStyle}>
+              {metadata && metadata.artist}
+            </Text>
+          </View>
+        </View>
+        <TouchableOpacity
+          activeOpacity={1.0}
+          style={styles.delayedstart}
+          onPress={() => this.setState({counting: true})}
+        >
+          { count !== 5
+        ? <Text style={{fontSize: 30, color: 'white'}}>{count}</Text>
+        : <Icon size={30} name={'play-circle-o'} color={playing ? 'rgba(0, 0, 0, 0)' : '#fff'} />
+        }
+        </TouchableOpacity>
+        <TouchableOpacity
+          activeOpacity={1.0}
+          onPress={playing ? pause : play}
+          style={styles.playpause}
+        >
+          <Icon size={30} name={playing ? 'pause' : 'play'} color='#fff' />
+        </TouchableOpacity>
+        <TouchableOpacity
+          playing={playing}
+          onPress={stop}
+          style={styles.stop}
       >
-      <Icon size={30} name={playing ? 'pause' : 'play'} color='#fff' />
-    </TouchableOpacity>
-    <TouchableOpacity
-      playing={playing}
-      onPress={stop}
-      style={styles.stop}
-    >
-      <Icon size={30} name='stop' color='#fff' />
-    </TouchableOpacity>
-  </View>
-)
+          <Icon size={30} name='stop' color='#fff' />
+        </TouchableOpacity>
+      </View>
+    )
+  }
+}
 
 const mapStateToProps = ({player}) => {
   const {file, metadata, playing} = player

App/Sagas/SonglistSagas.js

@@ -40,9 +40,15 @@ async function getAllFiles (allDirectories, allFiles) {
 async function addMetadata (allFiles, resultMetadata) {
   for (let i = 0; i < allFiles.length; i++) {
     const file = allFiles[i]
-    const metadata = await MediaMeta.get(file)
-    if (metadata) {
-      resultMetadata.push({file, metadata})
+    try {
+      const metadata = await MediaMeta.get(file)
+      if (metadata) {
+        resultMetadata.push({file, metadata})
+      }
+    } catch (err) {
+      console.tron.display({
+        name: `FAILED TO READ FILE: ${file}`
+      })
     }
   }
 }
@@ -52,6 +58,7 @@ export function * scanFiles (action) {
   const allfiles = []
   const allMeta = []
   try {
+    // check the folders exist
     yield call(getFoldersRecursive, MEDIA_DIR, all)
     yield call(getAllFiles, all, allfiles)
     yield call(addMetadata, allfiles, allMeta)