Highlight word in reading mode as well

src/components/Ayah/index.js

@@ -24,8 +24,8 @@ export default class Ayah extends Component {
     isSearched: PropTypes.bool,
     ayah: PropTypes.object.isRequired,
     bookmarked: PropTypes.bool.isRequired,
-    bookmarkActions: PropTypes.object,
     mediaActions: PropTypes.object.isRequired,
+    bookmarkActions: PropTypes.object,
     match: PropTypes.array,
     isSearch: PropTypes.bool,
     isPlaying: PropTypes.bool,
@@ -62,16 +62,31 @@ export default class Ayah extends Component {
   }
 
   handlePlay(ayah) {
-    const { isPlaying, audioActions, currentAyah } = this.props;
+    const { isPlaying, audioActions } = this.props;
     const { pause, setAyah, play } = audioActions;
-    const  isPreviouslyPlaying = isPlaying;
 
     if (isPlaying)
       pause();
     setAyah(ayah);
     play();
   }
 
+  handleWordClick(word){

+    const { isCurrentAyah, audioActions, isSearched, isPlaying } = this.props;


+
+    if(isSearched || !audioActions.setCurrentWord)

+      return;

+
+    
if(isCurrentAyah && isPlaying) {

+       audioActions.setCurrentWord(word.dataset.key)
;
+    }

+    else {
+       audioActions.setAyah(word.dataset.ayah);
+       audioActions.playCurrentWord(word.dataset.key);
+       //audioActions.play();
+     }

+  }
+
   renderTranslations() {
     const { ayah, match } = this.props;
 
@@ -155,8 +170,6 @@ export default class Ayah extends Component {
       if (word.charTypeId === CHAR_TYPE_WORD) {
         position = position + 1;
         id = `word-${word.ayahKey.replace(/:/, '-')}-${position}`;
-      } else {
-        id = `${word.className}-${word.codeDec}`; // just don't include id
       }
 
       if (word.translation || word.transliteration) {
@@ -167,10 +180,9 @@ export default class Ayah extends Component {
             key={word.code}
             id={id}
             rel="tooltip"
-            onClick={event =>
-              !isSearched && audioActions.setCurrentWord && audioActions.setCurrentWord(event.target.dataset.key)
-            }
+            onClick={(event) => this.handleWordClick(event.target)}
             data-key={`${word.ayahKey}:${position}`}
+            data-ayah={word.ayahKey}
             className={`${className}`}
             title={tooltipContent}
             dangerouslySetInnerHTML={{__html: word.code}}
@@ -181,13 +193,12 @@ export default class Ayah extends Component {
       return (
         <b
           id={id}
-          onClick={event =>
-            !isSearched && audioActions.setCurrentWord && audioActions.setCurrentWord(event.target.dataset.key)
-          }
+          onClick={(event) => this.handleWordClick(event.target)}
           data-key={`${word.ayahKey}:${position}`}
           rel="tooltip"
           className={`${className} ${isLast} pointer`}
           key={word.code}
+          data-ayah={word.ayahKey}
           dangerouslySetInnerHTML={{__html: word.code}}
           {...label}
         />

src/components/Line/index.js

@@ -2,12 +2,16 @@ import React, { PropTypes } from 'react';
 import debug from 'helpers/debug';
 
 const styles = require('../Ayah/style.scss');
+const CHAR_TYPE_WORD = 1;
 
 export default class Line extends React.Component {
   static propTypes = {
     line: PropTypes.array.isRequired,
     tooltip: PropTypes.string,
-    currentAyah: PropTypes.string.isRequired
+    currentAyah: PropTypes.string.isRequired,
+    audioActions: PropTypes.object.isRequired,
+    currentWord: PropTypes.any,
+    isPlaying: PropTypes.bool
   };
 
   shouldComponentUpdate(nextProps, nextState) {
@@ -19,40 +23,67 @@ export default class Line extends React.Component {
     return conditions.some(condition => condition);
   }
 
+  handleWordClick(word){
+    const { currentAyah, audioActions, isPlaying } = this.props;
+
+    if(!audioActions.setCurrentWord)
+      return;
+
+    if(currentAyah && isPlaying) {
+      audioActions.setCurrentWord(word.dataset.key)
;
+    }
+    else {
+      audioActions.setAyah(word.dataset.ayah);
+      audioActions.playCurrentWord(word.dataset.key);
+    }
+  }
+
   renderText() {
     const { line, tooltip, currentAyah } = this.props;
 
     if (!line[0].code) { // TODO shouldn't be possible, remove this clause
       return false;
     }
+    let position;
 
     let text = line.map(word => {
-      let highlight = currentAyah == word.ayahKey ? 'highlight' : '';
+      const highlight = currentAyah == word.ayahKey ? 'highlight' : '';
+      const className = `${word.className} ${word.highlight ? word.highlight : ''}`;
+      let id = null;
+
+      if (word.charTypeId === CHAR_TYPE_WORD) {
+        position = word.position - 1;
+        id = `word-${word.ayahKey.replace(/:/, '-')}-${position}`;
+      }
 
       if (word.translation) {
         let tooltipContent = word[tooltip];
 
         return (
           <b
+            id={id}
+            data-key={`${word.ayahKey}:${position}`}
             key={`${word.pageNum}${word.lineNum}${word.position}${word.code}`}
-            className={`${word.className} ${styles.Tooltip} ${highlight}`}
+            className={`${word.className} ${styles.Tooltip} ${highlight} ${className}`}
             data-ayah={word.ayahKey}
             data-line={word.lineNun}
             data-page={word.pageNum}
             data-position={word.position}
             aria-label={tooltipContent}
+            onClick={(event) => this.handleWordClick(event.target)}
             dangerouslySetInnerHTML={{__html: word.code}}
           />
         );
       }
 
       return (
         <b
-          className={`${word.className} ${highlight} pointer`}
+          className={`${word.className} ${highlight} pointer ${className}`}
           key={`${word.pageNum}${word.lineNum}${word.position}${word.code}`}
           data-line={word.lineNum}
           data-page={word.pageNum}
           dangerouslySetInnerHTML={{__html: word.code}}
+          onClick={(event) => this.handleWordClick(event.target)}
         />
       );
     });

src/containers/Surah/index.js

@@ -115,7 +115,8 @@ class Surah extends Component {
       this.props.isLoading !== nextProps.isLoading,
       this.props.isLoaded !== nextProps.isLoaded,
       this.props.options !== nextProps.options,
-      this.props.currentAyah !== nextProps.currentAyah
+      this.props.currentAyah !== nextProps.currentAyah,
+      this.props.isPlaying !== nextProps.isPlaying,
     ];
 
     return conditions.some(condition => condition);
@@ -338,7 +339,7 @@ class Surah extends Component {
   }
 
   renderLines() {
-    const { lines, options, currentAyah } = this.props;
+    const { lines, options, currentAyah, isPlaying, actions } = this.props;
     const keys = Object.keys(lines);
 
     return keys.map((lineNum, index) => {
@@ -348,12 +349,29 @@ class Surah extends Component {
 
       if (index + 1 !== keys.length && pageNum !== nextNum.split('-')[0]) {
         return [
-          <Line line={line} key={lineNum} currentAyah={currentAyah} tooltip={options.tooltip} />,
+          <Line
+            line={line}
+            key={lineNum}
+            currentAyah={currentAyah}
+            tooltip={options.tooltip}
+            audioActions={actions.audio}
+            isPlaying={isPlaying}
+          />,
           <PageBreak pageNum={parseInt(pageNum, 10) + 1} />
         ];
       }
 
-      return <Line line={line} key={lineNum} currentAyah={currentAyah} tooltip={options.tooltip} />;
+      return (
+        <Line
+          line={line}
+          key={lineNum}
+          currentAyah={currentAyah}
+          tooltip={options.tooltip}
+          audioActions={actions.audio}
+          isPlaying={isPlaying}
+        />
+      )
+
     });
   }
 

src/redux/actions/audioplayer.js

@@ -2,6 +2,7 @@ import {
   SET_USER_AGENT,
   SET_CURRENT_FILE,
   SET_CURRENT_WORD,
+  PLAY_CURRENT_WORD,
   PLAY,
   PAUSE,
   NEXT,
@@ -33,6 +34,13 @@ export function setCurrentWord(word) {
   };
 }
 
+export function playCurrentWord(word) {
+  return {
+    type: PLAY_CURRENT_WORD,
+    word
+  };
+}
+
 export function play() {
   return {
     type: PLAY

src/redux/constants/audioplayer.js

@@ -1,6 +1,7 @@
 export const SET_USER_AGENT = '@@quran/audioplayer/SET_USER_AGENT';
 export const SET_CURRENT_FILE = '@@quran/audioplayer/SET_CURRENT_FILE';
 export const SET_CURRENT_WORD = '@@quran/audioplayer/SET_CURRENT_WORD';
+export const PLAY_CURRENT_WORD = '@@quran/audioplayer/PLAY_CURRENT_WORD';
 export const PLAY = '@@quran/audioplayer/PLAY';
 export const PAUSE = '@@quran/audioplayer/PAUSE';
 export const NEXT = '@@quran/audioplayer/NEXT';
@@ -10,3 +11,4 @@ export const SET_REPEAT = '@@quran/audioplayer/SET_REPEAT';
 export const TOGGLE_SCROLL = '@@quran/audioplayer/TOGGLE_SCROLL';
 export const BUILD_ON_CLIENT = '@@quran/audioplayer/BUILD_ON_CLIENT';
 export const UPDATE = '@@quran/audioplayer/UPDATE';
+

src/redux/modules/audioplayer.js

@@ -14,6 +14,7 @@ import {
   SET_USER_AGENT,
   SET_CURRENT_FILE,
   SET_CURRENT_WORD,
+  PLAY_CURRENT_WORD,
   PLAY,
   PAUSE,
   NEXT,
@@ -278,6 +279,29 @@ export default function reducer(state = initialState, action = {}) {
         }
       };
     }
+    case PLAY_CURRENT_WORD: {
+      if (!action.word) return state;
+
+      const [surahId, ayahNum, word] = action.word.split(':');
+      const nextId = `${surahId}:${ayahNum}`;
+      const currentFile = state.files[surahId][nextId];
+
+      if (!state.segments[surahId][nextId].words[word]) return state;
+
+      const currentTime = state.segments[surahId][nextId].words[word].startTime;
+      const endTime = state.segments[surahId][nextId].words[word].endTime;
+      currentFile.currentTime = currentTime;
+
+      const int = setInterval(function() {
+        if (currentFile.currentTime > endTime) {
+          currentFile.pause();
+          clearInterval(int);
+        }
+      }, 10);
+      currentFile.play();
+
+      return state;
+    }
     case SET_CURRENT_AYAH: {
       return {
         ...state,