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

…into i18n

Conflicts:
	src/components/Ayah/index.js
	src/components/Loader/index.js
	src/components/NoScript/style.scss
	src/components/NoScriptWarning/index.js
	src/components/NoScriptWarning/style.scss
	src/containers/Search/index.js
	src/containers/Surah/index.js
	src/styles/partials/_no-script.scss

src/client.js

@@ -52,7 +52,7 @@ match({ history, routes: routes(store) }, (error, redirectLocation, renderProps)
       render={(props) => (
         <ReduxAsyncConnect
           {...props}
-          helpers={{client}}
+          helpers={{ client }}
           filter={item => !item.deferred}
           render={applyRouterMiddleware(useScroll())}
         />

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';
@@ -64,6 +65,11 @@ export class Audioplayer extends Component {
   }
 
   componentWillReceiveProps(nextProps) {
+    // Make sure we have a current ayah to mount it to Audio
+    if (!this.props.currentAyah && !nextProps.currentFile) {
+      return false;
+    }
+
     // When you go directly to the surah page, /2, the files are not loaded yet
     if (this.props.isLoadedOnClient !== nextProps.isLoadedOnClient) {
       return this.handleAddFileListeners(nextProps.currentFile);
@@ -248,7 +254,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');
@@ -294,14 +300,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;
   }
@@ -330,15 +332,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>
     );
   }
@@ -378,7 +377,6 @@ export class Audioplayer extends Component {
 
     const {
       className,
-      currentFile,
       segments,
       isLoading,
       currentAyah,
@@ -392,7 +390,7 @@ export class Audioplayer extends Component {
       setRepeat // eslint-disable-line no-shadow
     } = this.props;
 
-    if (isLoading) {
+    if (isLoading || !currentAyah) {
       return (
         <li className={`${style.container} ${className}`}>
           <div>
@@ -413,13 +411,17 @@ export class Audioplayer extends Component {
               progress={currentTime / duration * 100}
               onTrackChange={this.handleTrackChange}
             /> : null}
-          {isLoadedOnClient && segments[currentAyah] && typeof segments[currentAyah] !== 'string' ?
-            <Segments
-              audio={currentFile}
-              segments={segments[currentAyah]}
-              currentAyah={currentAyah}
-              currentTime={currentTime}
-            /> : null}
+          {
+            isLoadedOnClient &&
+            segments &&
+            segments[currentAyah] &&
+            segments[currentAyah] &&
+              <Segments
+                segments={segments[currentAyah]}
+                currentAyah={currentAyah}
+                currentTime={currentTime}
+              />
+          }
         </div>
         <ul className={`list-inline ${style.controls}`}>
           <li className={style.controlItem}>

src/components/Ayah/index.js

@@ -32,7 +32,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
   };
 
@@ -51,8 +51,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.isPlaying !== nextProps.isPlaying
+      this.props.isCurrentAyah !== nextProps.isCurrentAyah
     ];
 
     if (this.props.match) {
@@ -81,8 +80,8 @@ export default class Ayah extends Component {
     return array.map((content, index) => {
       const arabic = new RegExp(/[\u0600-\u06FF]/);
       const character = content.text;
-      const isArabic  = arabic.test(character);
-      const lang      = (content.name || content.resource.name).replace(/\s+/g, '-').toLowerCase();
+      const isArabic = arabic.test(character);
+      const lang = (content.name || content.resource.name).replace(/\s+/g, '-').toLowerCase();
 
       return (
         <div
@@ -91,7 +90,10 @@ export default class Ayah extends Component {
         >
           <h4 className="montserrat">{content.name || content.resource.name}</h4>
           <h2 className={`${isArabic ? 'text-right' : 'text-left'} text-translation times-new`}>
-            <small dangerouslySetInnerHTML={{__html: content.text}} className={lang} />
+            <small
+              dangerouslySetInnerHTML={{__html: content.text}}
+              className={`${styles[lang] || 'times-new'}`}
+            />
           </h2>
         </div>
       );
@@ -101,7 +103,7 @@ export default class Ayah extends Component {
   renderMedia() {
     const { ayah, mediaActions, isSearched } = this.props;
 
-    if (isSearched || !!ayah.mediaContent) return false;
+    if (isSearched || !ayah.mediaContent) return false;
 
     return (
       <div>
@@ -165,19 +167,23 @@ export default class Ayah extends Component {
             key={word.code}
             id={id}
             rel="tooltip"
-            onClick={(event) => isSearched ? '' : audioActions.setCurrentWord(event.target.dataset.key)}
+            onClick={event =>
+              !isSearched && audioActions.setCurrentWord && audioActions.setCurrentWord(event.target.dataset.key)
+            }
             data-key={`${word.ayahKey}:${position}`}
             className={`${className}`}
             title={tooltipContent}
             dangerouslySetInnerHTML={{__html: word.code}}
           />
         );
       }
-      const label = isLast ? {'title': `Verse ${ayah.ayahNum}`} : {}
+      const label = isLast ? { title: `Verse ${ayah.ayahNum}` } : {};
       return (
         <b
           id={id}
-          onClick={(event) => isSearched? '' : audioActions.setCurrentWord(event.target.dataset.key)}
+          onClick={event =>
+            !isSearched && audioActions.setCurrentWord && audioActions.setCurrentWord(event.target.dataset.key)
+          }
           data-key={`${word.ayahKey}:${position}`}
           rel="tooltip"
           className={`${className} ${isLast} pointer`}
@@ -293,12 +299,13 @@ export default class Ayah extends Component {
         data-metrics-event-name="Ayah:Link"
       >
         {content}
-      </Link>);
+      </Link>
+    );
   }
 
   renderControls() {
     return (
-      <div className={`col-md-2 col-sm-2 ${styles.controls}`}>
+      <div className={`col-md-1 col-sm-1 ${styles.controls}`}>
         {this.renderAyahBadge()}
         {this.renderPlayLink()}
         {this.renderCopyLink()}
@@ -308,14 +315,16 @@ 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-10 col-sm-10">
+        <div className="col-md-11 col-sm-11">
           {this.renderText()}
           {this.renderTranslations()}
           {this.renderMedia()}

src/components/Loader/index.js

@@ -1,19 +1,12 @@
 import React from 'react';
 
-const loading = require('../../../static/images/loading.gif');
 import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
 
+const styles = require('./style.scss');
 
 const Loader = () => (
-  <div className="loading" nghide="currentSurah.ayahs">
-    <div className="row">
-      <div className="colmd6 colmdoffset3 textcenter">
-        <img src={loading} alt="Loader" />
-        <h3>
-          <LocaleFormattedMessage id={'app.loading'} defaultMessage={'Loading...'}/>
-        </h3>
-      </div>
-    </div>
+  <div className={styles.loader}>
+    <LocaleFormattedMessage id={'app.loading'} defaultMessage={'Loading...'}/>
   </div>
 );
 

src/components/Loader/style.scss

@@ -0,0 +1,49 @@
+@import '../../styles/variables.scss';
+
+$timing: 1s;
+$size: 4px;
+$border-size: $size * 1.25;
+
+.loader,
+.loader:after {
+  border-radius: 50%;
+  width: 10em;
+  height: 10em;
+}
+
+.loader {
+  margin: 30px auto;
+  font-size: $size;
+  position: relative;
+  text-indent: -9999em;
+  border-top: $border-size solid $brand-primary;
+  border-right: $border-size solid $brand-primary;
+  border-bottom: $border-size solid $brand-primary;
+  border-left: $border-size solid #ffffff;
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
+  -webkit-animation: load $timing infinite linear;
+  animation: load $timing infinite linear;
+}
+
+@-webkit-keyframes load {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@keyframes load {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}

src/components/NoScript/style.scss

@@ -0,0 +1,11 @@
+.noscript_warning {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 1201;
+  text-align: center;
+  color: #FFF;
+  background-color: #AE0000;
+  padding: 5px 0 5px 0;
+}

src/components/SearchAutocomplete/index.js

@@ -1,3 +1,5 @@
+// TODO: Should be handled by redux and not component states.
+// TODO: This needs to be rewritten
 import React, { Component, PropTypes } from 'react';
 import ApiClient from 'helpers/ApiClient';
 import { connect } from 'react-redux';
@@ -49,13 +51,13 @@ class SearchAutocomplete extends Component {
     this.handleSurahSuggestions(value);
 
     if (value.length === 0 && this.state.surahs.length > 0) {
-      this.setState({surahs: []});
+      this.setState({ surahs: [] });
     }
 
     if (value.length >= 3) {
       this.handleAyahSuggestions(value);
     } else if (this.state.ayat.length > 0) {
-      this.setState({ayat: []});
+      this.setState({ ayat: [] });
     }
   }
 
@@ -100,7 +102,7 @@ class SearchAutocomplete extends Component {
     if (this.cached[lang][value]) {
       this.setState({ ayat: this.cached[lang][value] });
     } else {
-      client.get('/v2/suggest', {params: {q: value, l: lang}}).then((res) => {
+      client.get('/v2/suggest', { params: { q: value, l: lang } }).then((res) => {
         this.cached[lang][value] = res;
 
         if (this.props.value.trim() === value) {
@@ -201,7 +203,6 @@ class SearchAutocomplete extends Component {
   }
 }
 
-
 function mapStateToProps(state) {
   const surahs = state.surahs.entities;
   const surahId = state.surahs.current;

src/components/SearchInput/index.js

@@ -105,7 +105,8 @@ class SearchInput extends Component {
           type="search"
           placeholder={placeholder}
           ref="search"
-          onFocus={() => this.setState({showAutocomplete: true})}
+          onFocus={() => this.setState({ showAutocomplete: true })}
+          onBlur={() => this.setState({ showAutocomplete: false })}
           onKeyUp={this.search}
           ref={(ref) => {
             this.input = ref;