refactored word rendering

src/components/Ayah/index.js

@@ -5,21 +5,14 @@ import { Element } from 'react-scroll';
 import { ayahType, matchType } from 'types';
 import Copy from 'components/Copy';
 import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
+import Word from 'components/Word';
 
 import debug from 'helpers/debug';
 
 import bindTooltip from 'utils/bindTooltip';
 
 const styles = require('./style.scss');
 
-/* eslint-disable no-unused-vars */
-const CHAR_TYPE_WORD = 1;
-const CHAR_TYPE_END = 2;
-const CHAR_TYPE_PAUSE = 3;
-const CHAR_TYPE_RUB = 4;
-const CHAR_TYPE_SAJDAH = 5;
-/* eslint-enable no-unused-vars */
-
 export default class Ayah extends Component {
   static propTypes = {
     isSearched: PropTypes.bool,
@@ -180,36 +173,12 @@ export default class Ayah extends Component {
   }
 
   renderText() {
-    const { ayah, tooltip, isSearched } = this.props;
-
-    if (!ayah.words[0].code) {
-      return false;
-    }
-
-    // position is important as it will differentiate between words and symbols, see 2:25:13
-    let position = -1;
-    const text = ayah.words.map((word, index) => {
-      let id = null;
-      const className = `${word.className} ${word.highlight ? word.highlight : ''}`;
+    const { ayah, tooltip, currentAyah, isPlaying,  audioActions} = this.props;
 
-      if (word.charTypeId === CHAR_TYPE_WORD) {
-        position += 1;
-        id = `word-${word.ayahKey.replace(/:/, '-')}-${position}`;
-      }
-
-      return (
-        <b
-          key={word.code}
-          id={id}
-          rel="tooltip"
-          onClick={(event) => this.handleWordClick(event.target)}
-          data-key={`${word.ayahKey}:${position}`}
-          data-ayah={word.ayahKey}
-          className={`${className} pointer`}
-          title={this.buildTooltip(word, tooltip)}
-          dangerouslySetInnerHTML={{__html: word.code}}
-        />
-      );
+    const text = ayah.words.map(word => {
+      return(
+        <Word word={word} currentAyah={currentAyah} tooltip={tooltip} isPlaying={isPlaying} audioActions={audioActions}/>
+      )
     });
 
     return (

src/components/Line/index.js

@@ -2,6 +2,7 @@ import React, { PropTypes } from 'react';
 import debug from 'helpers/debug';
 
 import { wordType } from 'types';
+import Word from 'components/Word';
 
 const styles = require('../Ayah/style.scss');
 const CHAR_TYPE_WORD = 1;
@@ -19,71 +20,21 @@ export default class Line extends React.Component {
   shouldComponentUpdate(nextProps) {
     const conditions = [
       this.props.currentAyah !== nextProps.currentAyah,
-      this.props.line !== nextProps.line
+      this.props.line !== nextProps.line,
+      this.props.isPlaying !== nextProps.isPlaying
     ];
 
     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);
-    }
-  }
-
-  buildTooltip(word, tooltip){
-    let title;
-    if (!word.wordId) {
-      title = `Verse ${word.ayahKey.split(':')[1]}`;
-    } else {
-      title = word[tooltip];
-    }
-    return title;
-  }
-
   renderText() {
-    const { line, tooltip, currentAyah } = this.props;
-
-    if (!line[0].code) { // TODO shouldn't be possible, remove this clause
-      return false;
-    }
-    let position;
-
-    const text = line.map((word, index) => {
-      const highlight = currentAyah == word.ayahKey ? 'highlight' : '';
-      const className = `${word.className} ${highlight} ${word.highlight ? word.highlight : ''}`;
-      let id = null;
-
-      if (word.charTypeId === CHAR_TYPE_WORD) {
-        position = word.position - 1;
-        id = `word-${word.ayahKey.replace(/:/, '-')}-${position}`;
-      }
+    const { tooltip, currentAyah, audioActions, isPlaying, line } = this.props;
 
+    const text = line.map(word => {
       return (
-        <b
-          id={id}
-          rel="tooltip"
-          data-key={`${word.ayahKey}:${position}`}
-          key={`${word.pageNum}${word.lineNum}${word.position}${word.code}`}
-          className={`${className} pointer`}
-          data-ayah={word.ayahKey}
-          data-line={word.lineNun}
-          data-page={word.pageNum}
-          data-position={word.position}
-          onClick={(event) => this.handleWordClick(event.target)}
-          title={this.buildTooltip(word, tooltip)}
-          dangerouslySetInnerHTML={{__html: word.code}}
-        />
-      );
-    }
+        <Word word={word} currentAyah={currentAyah} tooltip={tooltip} isPlaying={isPlaying} audioActions={audioActions}/>
+      )
+    });
 
     return (
       <span className={`${styles.line} text-center`}>

src/components/Word/index.js

@@ -12,18 +12,48 @@ const CHAR_TYPE_SAJDAH = 5;
 
 export default class Line extends React.Component {
   static propTypes = {
+    word: PropTypes.object.isRequired,
     tooltip: PropTypes.string,
     audioActions: PropTypes.object.isRequired,
     word: PropTypes.object.isRequired,
+    currentAyah: PropTypes.object.isRequired,
     isPlaying: PropTypes.bool
   };
 
+  buildTooltip(word, tooltip){
+    let title;
+    if (!word.wordId && word.charTypeId == CHAR_TYPE_END) {
+      title = `Verse ${word.ayahKey.split(':')[1]}`;
+    } else {
+      title = word[tooltip];
+    }
+    return title;
+  }
+
+  handleWordClick(word){
+    const { currentAyah, audioActions, isPlaying } = this.props;
+
+    if(currentAyah == word.ayahKey && isPlaying) {
+      audioActions.setCurrentWord(word.dataset.key)
;
+    } else {
+      audioActions.pause();
+      audioActions.setAyah(word.dataset.ayah);
+      audioActions.playCurrentWord(word.dataset.key);
+    }
+  }
+
   render() {
+    const { tooltip, word, currentAyah, isPlaying } = this.props;
+
+    console.info(currentAyah);
+    console.info("playing "+isPlaying);
+
     let id = null;
-    const className = `${word.className} ${word.highlight ? word.highlight : ''}`;
+    const  position = word.position - 1;
+    const highlight = currentAyah == word.ayahKey && isPlaying ? 'highlight' : '';
+    const className = `${word.className} ${highlight} ${word.highlight ? word.highlight : ''}`;
 
     if (word.charTypeId === CHAR_TYPE_WORD) {
-      position = position + 1;
       id = `word-${word.ayahKey.replace(/:/, '-')}-${position}`;
     }
 

src/containers/Surah/index.js

@@ -302,6 +302,7 @@ class Surah extends Component {
       <Ayah
         ayah={ayah}
         isCurrentAyah={ayah.ayahKey === currentAyah}
+        currentAyah={currentAyah}
         bookmarked={!!bookmarks[ayah.ayahKey]}
         tooltip={options.tooltip}
         bookmarkActions={actions.bookmark}
@@ -481,7 +482,7 @@ const AsyncSurah = asyncConnect([
 function mapStateToProps(state, ownProps) {
   const surahId = parseInt(ownProps.params.surahId, 10);
   const surah: Object = state.surahs.entities[surahId];
-  const ayahs: ?Object = state.ayahs.entities[surahId];
+  const ayahs: Object = state.ayahs.entities[surahId];
   const ayahArray = ayahs ? Object.keys(ayahs).map(key => parseInt(key.split(':')[1], 10)) : [];
   const ayahIds = new Set(ayahArray);
   const lastAyahInArray = ayahArray.slice(-1)[0];