Use new segments and surah info data

src/components/Audioplayer/RepeatDropdown/index.js

@@ -225,7 +225,7 @@ export default class RepeatButton extends Component {
       <div className="text-center">
         <OverlayTrigger
           overlay={popover}
-          placement="bottom"
+          placement="top"
           trigger="click"
           rootClose
         >

src/components/Audioplayer/Segments/index.js

@@ -5,15 +5,13 @@ import debug from 'helpers/debug';
 
 export default class Segments extends Component {
   static propTypes = {
-    audio: PropTypes.object,
     segments: PropTypes.object.isRequired,
     currentAyah: PropTypes.string,
     currentTime: PropTypes.number
   };
 
   shouldComponentUpdate(nextProps) {
     return [
-      this.props.audio !== nextProps.audio,
       this.props.currentAyah !== nextProps.currentAyah,
       this.props.currentTime !== nextProps.currentTime,
     ].some(test => test);

src/components/Audioplayer/index.js

@@ -1,3 +1,4 @@
+// TODO: This file is too too large.
 import React, { Component, PropTypes } from 'react';
 import { connect } from 'react-redux';
 import { camelize } from 'humps';
@@ -252,7 +253,7 @@ export class Audioplayer extends Component {
 
   handleAddFileListeners(file) {
     const { update, currentTime } = this.props; // eslint-disable-line no-shadow
-    console.log('component:Audioplayer', `Attaching listeners to ${file.src}`);
+    debug('component:Audioplayer', `Attaching listeners to ${file.src}`);
 
     // Preload file
     file.setAttribute('preload', 'auto');
@@ -298,14 +299,10 @@ export class Audioplayer extends Component {
       file.ontimeupdate = null; // eslint-disable-line no-param-reassign
     };
 
-    const onProgress = () => {
-    };
-
     file.onloadeddata = onLoadeddata;  // eslint-disable-line no-param-reassign
     file.onpause = onPause; // eslint-disable-line no-param-reassign
     file.onplay = onPlay; // eslint-disable-line no-param-reassign
     file.onended = onEnded; // eslint-disable-line no-param-reassign
-    file.onprogress = onProgress; // eslint-disable-line no-param-reassign
 
     return file;
   }
@@ -334,15 +331,12 @@ export class Audioplayer extends Component {
   renderPlayStopButtons() {
     const { isPlaying, pause } = this.props; // eslint-disable-line no-shadow
 
-    let icon = <i className="ss-icon ss-play" />;
-
-    if (isPlaying) {
-      icon = <i className="ss-icon ss-pause" />;
-    }
-
     return (
-      <a className={`pointer text-center ${style.playingButton} ${style.buttons}`} onClick={isPlaying ? pause : this.play}>
-        {icon}
+      <a
+        className={`pointer text-center ${style.playingButton} ${style.buttons}`}
+        onClick={isPlaying ? pause : this.play}
+      >
+        <i className={`ss-icon ${isPlaying ? 'ss-pause' : 'ss-play'}`} />
       </a>
     );
   }
@@ -382,7 +376,6 @@ export class Audioplayer extends Component {
 
     const {
       className,
-      currentFile,
       segments,
       isLoading,
       currentAyah,
@@ -416,14 +409,12 @@ export class Audioplayer extends Component {
             isLoadedOnClient &&
             segments &&
             segments[currentAyah] &&
-            typeof segments[currentAyah] !== 'string' ?
+            segments[currentAyah] &&
               <Segments
-                audio={currentFile}
                 segments={segments[currentAyah]}
                 currentAyah={currentAyah}
                 currentTime={currentTime}
-              /> :
-            null
+              />
           }
         </div>
         <ul className={`list-inline ${style.controls}`}>

src/components/Ayah/index.js

@@ -31,7 +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,
+    isCurrentAyah: PropTypes.bool,
     audioActions: PropTypes.object.isRequired
   };
 
@@ -50,7 +50,7 @@ export default class Ayah extends Component {
       this.props.bookmarked !== nextProps.bookmarked,
       this.props.tooltip !== nextProps.tooltip,
       this.props.currentWord !== nextProps.currentWord,
-      this.props.currentAyah !== nextProps.currentAyah
+      this.props.isCurrentAyah !== nextProps.isCurrentAyah
     ];
 
     if (this.props.match) {
@@ -285,7 +285,8 @@ export default class Ayah extends Component {
         data-metrics-event-name="Ayah:Link"
       >
         {content}
-      </Link>);
+      </Link>
+    );
   }
 
   renderControls() {
@@ -300,12 +301,14 @@ export default class Ayah extends Component {
   }
 
   render() {
-    const { ayah, currentAyah } = this.props;
-    const className = ayah.ayahKey === currentAyah ? 'highlight' : '';
+    const { ayah, isCurrentAyah } = this.props;
     debug('component:Ayah', `Render ${this.props.ayah.ayahNum}`);
 
     return (
-      <Element name={`ayah:${ayah.ayahKey}`} className={`row ${className} ${styles.container}`}>
+      <Element
+        name={`ayah:${ayah.ayahKey}`}
+        className={`row ${isCurrentAyah && 'highlight'} ${styles.container}`}
+      >
         {this.renderControls()}
         <div className="col-md-11 col-sm-11">
           {this.renderText()}