Merge branch 'master' of https://github.com/quran/quran.com-frontend …

…into word-by-word-audio

src/components/Ayah/index.js

@@ -23,12 +23,25 @@ const CHAR_TYPE_SAJDAH = 5;
 export default class Ayah extends Component {
   static propTypes = {
     isSearched: PropTypes.bool,
-    ayah: PropTypes.object.isRequired,
-    bookmarked: PropTypes.bool.isRequired,
-    mediaActions: PropTypes.object.isRequired,
-    bookmarkActions: PropTypes.object,
-    match: PropTypes.array,
-    isSearch: PropTypes.bool,
+    ayah: ayahType.isRequired,
+    bookmarked: PropTypes.bool, // TODO: Add this for search
+    bookmarkActions: PropTypes.shape({
+      isLoaded: PropTypes.func.isRequired,
+      load: PropTypes.func.isRequired,
+      addBookmark: PropTypes.func.isRequired,
+      removeBookmark: PropTypes.func.isRequired,
+    }),
+    mediaActions: PropTypes.shape({
+      setMedia: PropTypes.func.isRequired,
+      removeMedia: PropTypes.func.isRequired,
+    }),
+    audioActions: PropTypes.shape({
+      pause: PropTypes.func.isRequired,
+      setAyah: PropTypes.func.isRequired,
+      play: PropTypes.func.isRequired,
+      setCurrentWord: PropTypes.func.isRequired,
+    }), // not required because in search it is not.
+    match: PropTypes.arrayOf(matchType),
     isPlaying: PropTypes.bool,
     isAuthenticated: PropTypes.bool,
     tooltip: PropTypes.string,

src/components/Line/index.js

@@ -57,7 +57,7 @@ export default class Line extends React.Component {
     }
     let position;
 
-    let text = line.map((word, index) => {
+    const text = line.map((word, index) => {
       const highlight = currentAyah == word.ayahKey ? 'highlight' : '';
       const className = `${word.className} ${highlight} ${word.highlight ? word.highlight : ''}`;
       let id = null;
@@ -68,22 +68,22 @@ export default class Line extends React.Component {
       }
 
       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}}
-          />
+        <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}}
+        />
       );
-    });
+    }
 
     return (
       <span className={`${styles.line} text-center`}>