ensure play icon next to each ayah works (#415)

src/components/Ayah/index.js

@@ -20,6 +20,7 @@ export default class Ayah extends Component {
     ayah: PropTypes.object.isRequired,
     match: PropTypes.array,
     isSearch: PropTypes.bool,
+    isPlaying: PropTypes.bool,
     tooltip: PropTypes.string,
     currentWord: PropTypes.any, // gets passed in an integer, null by default
     onWordClick: PropTypes.func,
@@ -46,11 +47,14 @@ export default class Ayah extends Component {
   }
 
   handlePlay(ayah) {
-    const {stop, setAyah, start} = this.props.actions;
+    const {isPlaying, actions} = this.props;
+    const {pause, setAyah, play} = actions;
 
-    stop();
+    if (isPlaying) {
+      pause();
+    }
     setAyah(ayah);
-    start();
+    play();
   }
 
   renderTranslations() {

src/containers/Surah/index.js

@@ -64,7 +64,8 @@ class Surah extends Component {
     options: PropTypes.object.isRequired,
     params: PropTypes.object.isRequired,
     ayahs: PropTypes.object.isRequired,
-    isStarted: PropTypes.bool
+    isStarted: PropTypes.bool,
+    isPlaying: PropTypes.bool
   };
 
   state = {
@@ -280,14 +281,15 @@ class Surah extends Component {
   }
 
   renderAyahs() {
-    const { ayahs, actions, options } = this.props; // eslint-disable-line no-shadow
+    const { ayahs, actions, options, isPlaying } = this.props; // eslint-disable-line no-shadow
 
     return Object.values(ayahs).map(ayah => (
       <Ayah
         ayah={ayah}
         tooltip={options.tooltip}
         onWordClick={actions.audio.setCurrentWord}
         actions={actions.audio}
+        isPlaying={isPlaying}
         key={`${ayah.surahId}-${ayah.ayahNum}-ayah`}
       />
     ));
@@ -467,12 +469,12 @@ function mapStateToProps(state, ownProps) {
   const surah: Object = state.surahs.entities[surahId];
   const ayahs: Object = state.ayahs.entities[surahId];
   const ayahIds = new Set(Object.keys(ayahs).map(key => parseInt(key.split(':')[1], 10)));
-
   return {
     surah,
     ayahs,
     ayahIds,
     isStarted: state.audioplayer.isStarted,
+    isPlaying: state.audioplayer.isPlaying,
     currentWord: state.ayahs.currentWord,
     isEndOfSurah: ayahIds.size === surah.ayat,
     surahs: state.surahs.entities,