Fix staging (#731)

* Fix search

* Fixes #727 highlight word by word

* Fixes #728

* ontop of master

Author: mmahalwy

src/components/Audioplayer/Segments/index.js

@@ -4,7 +4,6 @@ import Helmet from 'react-helmet';
 import debug from 'helpers/debug';
 
 class Segments extends Component {
-
   shouldComponentUpdate(nextProps) {
     return [
       this.props.currentVerse !== nextProps.currentVerse,

src/components/Audioplayer/index.js

@@ -52,8 +52,8 @@ export class Audioplayer extends Component {
       return false;
     }
 
-    // When you go directly to the chapter page, /2, the files are not loaded yet
-    if (this.props.isLoadedOnClient !== nextProps.isLoadedOnClient) {
+    // First load
+    if (this.props.currentFile !== nextProps.currentFile) {
       return this.handleAddFileListeners(nextProps.currentFile);
     }
 
@@ -384,7 +384,6 @@ export class Audioplayer extends Component {
       duration,
       chapter,
       isPlaying,
-      isLoadedOnClient,
       repeat, // eslint-disable-line no-shadow
       shouldScroll, // eslint-disable-line no-shadow
       setRepeat // eslint-disable-line no-shadow
@@ -406,15 +405,15 @@ export class Audioplayer extends Component {
     return (
       <div className={`${isPlaying && style.isPlaying} ${style.container} ${className}`}>
         <div className={style.wrapper}>
-          {isLoadedOnClient ?
+          {
+            currentFile &&
             <Track
               progress={(currentTime / duration) * 100}
               onTrackChange={this.handleTrackChange}
-            /> : null}
+            />
+          }
           {
-            isLoadedOnClient &&
             segments &&
-            segments[currentVerse] &&
             segments[currentVerse] &&
               <Segments
                 segments={segments[currentVerse]}

src/components/ContentDropdown/index.js

@@ -64,10 +64,10 @@ class ContentDropdown extends Component {
           <Checkbox
             id={translation.id + translation.languageName}
             name="translation"
-            checked={checked}
+            checked={checked || false}
             handleChange={() => this.handleOptionSelected(translation.id)}
           >
-            {render(translation)}
+            <span>{render(translation)}</span>
           </Checkbox>
         </MenuItem>
       );

src/components/ReciterDropdown/index.js

@@ -27,11 +27,13 @@ class ReciterDropdown extends Component {
       >
         <Radio
           checked={slug.id === audio}
-          id={slug.id}
+          id={`slug-${slug.id}`}
           name="reciter"
           handleChange={() => onOptionChange({ audio: slug.id })}
         >
-          {slug.reciterNameEng} {slug.style ? `(${slug.style})` : ''}
+          <span>
+            {slug.reciterNameEng} {slug.style ? `(${slug.style})` : ''}
+          </span>
         </Radio>
       </MenuItem>
     ));

src/components/Verse/index.js

@@ -24,7 +24,6 @@ const Share = Loadable({
 });
 
 class Verse extends Component {
-
   // TODO: Should this belong here?
   componentDidMount() {
     const { verse, audio } = this.props;
@@ -145,7 +144,7 @@ class Verse extends Component {
         tooltip={tooltip}
         isPlaying={isPlaying}
         audioActions={audioActions}
-        audioPosition={word.wordId ? wordAudioPosition += 1 : null}
+        audioPosition={word.charType === 'word' ? wordAudioPosition += 1 : null}
         isSearched={isSearched}
         useTextFont={renderText}
       />
@@ -316,7 +315,7 @@ Verse.propTypes = {
   currentWord: PropTypes.number, // gets passed in an integer, null by default
   iscurrentVerse: PropTypes.bool,
   currentVerse: PropTypes.string,
-  userAgent: PropTypes.func,
+  userAgent: PropTypes.object, // eslint-disable-line
   audio: PropTypes.number.isRequired,
   loadAudio: PropTypes.func.isRequired
 };

src/components/Verse/style.scss

@@ -29,9 +29,10 @@
       display: block;
       text-decoration: none;
       font-size: 12px;
+      cursor: pointer;
 
-      &:hover{
-        cursor: pointer;
+      &:focus{
+        color: $text-muted;
       }
     }
     .label{
@@ -142,4 +143,3 @@
   width: 100%;
   margin: 0px auto;
 }
-

src/components/Word/index.js

@@ -10,7 +10,6 @@ const CHAR_TYPE_RUB = 'rub';
 const CHAR_TYPE_SAJDAH = 'sajdah';
 
 class Word extends Component {
-
   buildTooltip = (word, tooltip) => {
     let title;
 
@@ -57,7 +56,7 @@ class Word extends Component {
     let spacer;
     const highlight = currentVerse === word.verseKey && isPlaying ? 'highlight' : '';
     const className = `${useTextFont ? 'text-' : ''}${word.charType === CHAR_TYPE_WORD ? word.className : 'p0'} ${word.charType} ${highlight} ${word.highlight ? word.highlight : ''}`;
-    const id = `word-${word.verseKey.replace(/:/, '-')}-${audioPosition || word.position}`;
+    const id = `word-${word.verseKey.replace(/:/, '-')}-${audioPosition}`;
 
     if (word.charType === CHAR_TYPE_END) {
       text = zeroPad(word.verseKey.split(':')[1], 3, 0);
@@ -94,7 +93,7 @@ Word.propTypes = {
   tooltip: PropTypes.string,
   audioActions: PropTypes.object.isRequired, // eslint-disable-line
   audioPosition: PropTypes.number,
-  currentVerse: PropTypes.string.isRequired,
+  currentVerse: PropTypes.string,
   isPlaying: PropTypes.bool,
   isSearched: PropTypes.bool,
   useTextFont: PropTypes.bool // tmp change to compare text and code based rendering

src/containers/Search/index.js

@@ -130,6 +130,7 @@ class Search extends Component {
         match={entities[result].match}
         key={entities[result].verseKey}
         tooltip={options.tooltip}
+        userAgent={options.userAgent}
         isSearched
       />
     ));