highlight currently playing ayah (#510)

src/components/Ayah/index.js

@@ -31,6 +31,7 @@ export default class Ayah extends Component {
     isAuthenticated: PropTypes.bool,
     tooltip: PropTypes.string,
     currentWord: PropTypes.any, // gets passed in an integer, null by default
+    currentAyah: PropTypes.string,
     audioActions: PropTypes.object.isRequired
   };
 
@@ -48,7 +49,8 @@ export default class Ayah extends Component {
       this.props.ayah !== nextProps.ayah,
       this.props.bookmarked !== nextProps.bookmarked,
       this.props.tooltip !== nextProps.tooltip,
-      this.props.currentWord !== nextProps.currentWord
+      this.props.currentWord !== nextProps.currentWord,
+      this.props.currentAyah !== nextProps.currentAyah
     ];
 
     if (this.props.match) {
@@ -291,11 +293,13 @@ export default class Ayah extends Component {
   }
 
   render() {
-    const { ayah } = this.props;
+    const { ayah, currentAyah } = this.props;
+    const currentIndex = parseInt(currentAyah.split(":")[1], 10);
+    const className = ayah.ayahIndex === currentIndex ? styles.highlight : "";
     debug('component:Ayah', `Render ${this.props.ayah.ayahNum}`);
 
     return (
-      <Element name={`ayah:${ayah.ayahKey}`} className={`row ${styles.container}`}>
+      <Element name={`ayah:${ayah.ayahKey}`} className={`row ${className} ${styles.container}`}>
         {this.renderControls()}
         <div className="col-md-10 col-sm-10">
           {this.renderText()}

src/components/Ayah/style.scss

@@ -162,3 +162,7 @@
   width: 100%;
   margin: 0px auto;
 }
+
+.highlight {
+  background-color: #fffed9;
+}

src/containers/Surah/index.js

@@ -66,6 +66,7 @@ class Surah extends Component {
     isEndOfSurah: PropTypes.bool.isRequired,
     ayahIds: PropTypes.any,
     currentWord: PropTypes.string,
+    currentAyah: PropTypes.string,
     surahs: PropTypes.object.isRequired,
     bookmarks: PropTypes.object.isRequired,
     isLoading: PropTypes.bool.isRequired,
@@ -118,7 +119,8 @@ class Surah extends Component {
       this.props.bookmarks !== nextProps.bookmarks,
       this.props.isLoading !== nextProps.isLoading,
       this.props.isLoaded !== nextProps.isLoaded,
-      this.props.options !== nextProps.options
+      this.props.options !== nextProps.options,
+      this.props.currentAyah !== nextProps.currentAyah
     ];
 
     return conditions.some(condition => condition);
@@ -309,12 +311,14 @@ class Surah extends Component {
       options,
       bookmarks,
       isPlaying,
-      isAuthenticated
+      isAuthenticated,
+      currentAyah,
     } = this.props; // eslint-disable-line no-shadow
 
     return Object.values(ayahs).map(ayah => (
       <Ayah
         ayah={ayah}
+        currentAyah={currentAyah}
         bookmarked={!!bookmarks[ayah.ayahKey]}
         tooltip={options.tooltip}
         bookmarkActions={actions.bookmark}
@@ -472,12 +476,14 @@ 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,
+    currentAyah: state.audioplayer.currentAyah,
     isAuthenticated: state.auth.loaded,
     currentWord: state.ayahs.currentWord,
     isEndOfSurah: ayahIds.size === surah.ayat,