Local support

package.json

@@ -113,6 +113,7 @@
     "url-loader": "0.5.7",
     "webpack": "2.1.0-beta.20",
     "webpack-isomorphic-tools": "2.5.7",
+    "react-intl":"2.1.5",
     "winston": "1.1.2",
     "react-inlinesvg": "0.5.4"
   },

src/client.js

@@ -12,13 +12,15 @@ import applyRouterMiddleware from 'react-router/lib/applyRouterMiddleware';
 import useScroll from 'react-router-scroll';
 import { ReduxAsyncConnect } from 'redux-connect';
 import { syncHistoryWithStore } from 'react-router-redux';
+import { IntlProvider } from 'react-intl';
 
 import debug from 'debug';
 
 import config from './config';
 import ApiClient from './helpers/ApiClient';
 import createStore from './redux/create';
 import routes from './routes';
+import {getLocalMessages} from './helpers/setLocal';
 
 const client = new ApiClient();
 const store = createStore(browserHistory, client, window.reduxData);
@@ -38,6 +40,9 @@ window.clearCookies = () => {
   reactCookie.remove('content');
   reactCookie.remove('audio');
   reactCookie.remove('isFirstTime');
+  reactCookie.remove('currentLocale');
+  reactCookie.remove('smartbanner-closed');
+  reactCookie.remove('smartbanner-installed');
 };
 
 match({ history, routes: routes(store) }, (error, redirectLocation, renderProps) => {
@@ -60,9 +65,11 @@ match({ history, routes: routes(store) }, (error, redirectLocation, renderProps)
   debug('client', 'React Rendering');
 
   ReactDOM.render(
-    <Provider store={store} key="provider">
+    <IntlProvider locale='en' messages={getLocalMessages()}>
+      <Provider  store={store} key="provider">
       {component}
-    </Provider>, mountNode, () => {
+      </Provider>
+    </IntlProvider>, mountNode, () => {
       debug('client', 'React Rendered');
     }
   );

src/components/Audioplayer/RepeatDropdown/index.js

@@ -6,12 +6,14 @@ import NavItem from 'react-bootstrap/lib/NavItem';
 import FormControl from 'react-bootstrap/lib/FormControl';
 import Row from 'react-bootstrap/lib/Row';
 import Col from 'react-bootstrap/lib/Col';
+import { intlShape, injectIntl } from 'react-intl';
 
 import SwitchToggle from 'components/SwitchToggle';
+import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
 
 const style = require('../style.scss');
 
-export default class RepeatButton extends Component {
+class RepeatButton extends Component {
   static propTypes = {
     surah: PropTypes.object.isRequired,
     repeat: PropTypes.shape({
@@ -20,7 +22,8 @@ export default class RepeatButton extends Component {
       times: PropTypes.number
     }).isRequired,
     setRepeat: PropTypes.func.isRequired,
-    current: PropTypes.number.isRequired
+    current: PropTypes.number.isRequired,
+    intl: intlShape.isRequired
   };
 
   handleToggle = () => {
@@ -59,9 +62,13 @@ export default class RepeatButton extends Component {
 
     return (
       <Col md={12} style={{paddingTop: 15}}>
-        From - To: <br />
         <ul className="list-inline" style={{marginBottom: 0}}>
           <li>
+            <LocaleFormattedMessage
+              id={ "player.repeat.rangeStart" }
+              defaultMessage={'From'}
+            />{' '}:
+            <br />
             <FormControl
               componentClass="select"
               value={repeat.from}
@@ -82,6 +89,11 @@ export default class RepeatButton extends Component {
           </li>
           <li> - </li>
           <li>
+            <LocaleFormattedMessage
+              id={ "player.repeat.rangeEnd" }
+              defaultMessage={'To'}
+            />{' '}:
+            <br />
             <FormControl
               componentClass="select"
               value={repeat.to}
@@ -107,7 +119,10 @@ export default class RepeatButton extends Component {
 
     return (
       <Col md={12} style={{paddingTop: 15}}>
-        Ayah: <br />
+        <LocaleFormattedMessage
+          id={ "player.currentAyah" }
+          defaultMessage={'Ayah'}
+        />{' '}: <br />
         <FormControl
           componentClass="select"
           value={repeat.from}
@@ -141,10 +156,16 @@ export default class RepeatButton extends Component {
             onSelect={this.handleNavChange}
           >
             <NavItem eventKey={1} title="Single Ayah" className={style.pill}>
-              Single
+              <LocaleFormattedMessage
+                id={ "player.repeat.single" }
+                defaultMessage={'Single'}
+              />
             </NavItem>
             <NavItem eventKey={2} title="Range" className={style.pill}>
-              Range
+              <LocaleFormattedMessage
+                id={ "player.repeat.range" }
+                defaultMessage={'Range'}
+              />
             </NavItem>
           </Nav>
         </Col>
@@ -163,13 +184,16 @@ export default class RepeatButton extends Component {
   }
 
   renderTimes() {
-    const { repeat, setRepeat } = this.props;
+    const { repeat, setRepeat, intl } = this.props;
     const times = Array(10).join().split(',');
 
     return (
       <Row className={!repeat.from && style.disabled}>
         <Col md={12} style={{paddingTop: 15}}>
-          Times: <br />
+          <LocaleFormattedMessage
+            id={ "player.repeat.title" }
+            defaultMessage={'Repeat'}
+          />: <br />
           <FormControl
             componentClass="select"
             value={repeat.times}
@@ -178,8 +202,10 @@ export default class RepeatButton extends Component {
               times: parseInt(event.target.value, 10)
             })}
           >
-            <option value={Infinity}>
-              Loop
+            <option value={'Infinity'}>
+              {
+                intl.formatMessage({id: "player.repeat.loop", defaultMessage: 'Loop'})
+              }
             </option>
             {
               times.map((ayah, index) => (
@@ -204,7 +230,10 @@ export default class RepeatButton extends Component {
         title={
           <Row>
             <Col md={12} className="text-center">
-              Toggle repeat{'  '}
+              <LocaleFormattedMessage
+                id={ "player.repeat.title" }
+                defaultMessage={'TOGGLE REPEAT'}
+              />{'  '}
               <SwitchToggle
                 checked={!!repeat.from}
                 onToggle={this.handleToggle}
@@ -225,7 +254,7 @@ export default class RepeatButton extends Component {
       <div className="text-center">
         <OverlayTrigger
           overlay={popover}
-          placement="bottom"
+          placement="top"
           trigger="click"
           rootClose
         >
@@ -237,3 +266,5 @@ export default class RepeatButton extends Component {
     );
   }
 }
+
+export default injectIntl(RepeatButton);

src/components/Audioplayer/ScrollButton/index.js

@@ -1,13 +1,17 @@
 import React, { PropTypes } from 'react';
 import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
 import Tooltip from 'react-bootstrap/lib/Tooltip';
+import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
 
 const style = require('../style.scss');
 
 const ScrollButton = ({ shouldScroll, onScrollToggle }) => {
   const tooltip = (
     <Tooltip id="scroll-button-tooltip">
-      Automatically scrolls to the currently playing ayah on transitions...
+      <LocaleFormattedMessage
+        id={ "player.scrollButtonTip" }
+        defaultMessage={'Automatically scrolls to the currently playing ayah on transitions...'}
+      />
     </Tooltip>
   );
 

src/components/Audioplayer/index.js

@@ -10,6 +10,7 @@ import Track from './Track';
 import Segments from './Segments';
 import ScrollButton from './ScrollButton';
 import RepeatDropdown from './RepeatDropdown';
+import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
 
 // Helpers
 import debug from 'helpers/debug';
@@ -394,7 +395,12 @@ export class Audioplayer extends Component {
     if (isLoading) {
       return (
         <li className={`${style.container} ${className}`}>
-          <div>Loading...</div>
+          <div>
+            <LocaleFormattedMessage
+              id='app.loading'
+              defaultMessage={ 'Loading...' }
+            />
+          </div>
         </li>
       );
     }
@@ -417,7 +423,10 @@ export class Audioplayer extends Component {
         </div>
         <ul className={`list-inline ${style.controls}`}>
           <li className={style.controlItem}>
-            Ayah: {currentAyah.split(':')[1]}
+            <LocaleFormattedMessage
+              id='player.currentAyah'
+              defaultMessage={ 'Ayah' }
+            />: {currentAyah.split(':')[1]}
           </li>
           <li className={style.controlItem}>
             {this.renderPreviousButton()}

src/components/Ayah/index.js

@@ -3,6 +3,7 @@ import Link from 'react-router/lib/Link';
 import { Element } from 'react-scroll';
 
 import Copy from 'components/Copy';
+import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
 
 import debug from 'helpers/debug';
 
@@ -50,7 +51,8 @@ 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.currentAyah !== nextProps.currentAyah,
+      this.props.isPlaying !== nextProps.isPlaying
     ];
 
     if (this.props.match) {
@@ -61,12 +63,12 @@ export default class Ayah extends Component {
   }
 
   handlePlay(ayah) {
-    const { isPlaying, audioActions } = this.props;
+    const { isPlaying, audioActions, currentAyah } = this.props;
     const { pause, setAyah, play } = audioActions;
+    const  isPreviouslyPlaying = isPlaying;
 
-    if (isPlaying) {
+    if (isPlaying)
       pause();
-    }
     setAyah(ayah);
     play();
   }
@@ -89,17 +91,17 @@ 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={`${styles[lang] || 'times-new'}`} />
+            <small dangerouslySetInnerHTML={{__html: content.text}} className={lang} />
           </h2>
         </div>
       );
     });
   }
 
   renderMedia() {
-    const { ayah, mediaActions } = this.props;
+    const { ayah, mediaActions, isSearched } = this.props;
 
-    if (!!ayah.mediaContent) return false;
+    if (isSearched || !!ayah.mediaContent) return false;
 
     return (
       <div>
@@ -119,7 +121,11 @@ export default class Ayah extends Component {
                     data-metrics-media-content-id={content.id}
                     data-metrics-media-content-ayah-key={ayah.ayahKey}
                   >
-                    Watch lecture by {content.resource.name}
+                    <LocaleFormattedMessage
+                      id={'ayah.media.lectureFrom'}
+                      defaultMessage={"Watch lecture by {from}"}
+                      values={{from: content.resource.name}}
+                      />
                   </a>
                 </small>
               </h2>
@@ -131,7 +137,7 @@ export default class Ayah extends Component {
   }
 
   renderText() {
-    const { ayah, audioActions: { setCurrentWord }, tooltip } = this.props;
+    const { ayah, audioActions, tooltip, isSearched } = this.props;
 
     if (!ayah.words[0].code) {
       return false;
@@ -159,20 +165,19 @@ export default class Ayah extends Component {
             key={word.code}
             id={id}
             rel="tooltip"
-            onClick={(event) => setCurrentWord(event.target.dataset.key)}
+            onClick={(event) => isSearched ? '' : 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}`} : {}
       return (
         <b
           id={id}
-          onClick={(event) => setCurrentWord(event.target.dataset.key)}
+          onClick={(event) => isSearched? '' : audioActions.setCurrentWord(event.target.dataset.key)}
           data-key={`${word.ayahKey}:${position}`}
           rel="tooltip"
           className={`${className} ${isLast} pointer`}
@@ -197,15 +202,25 @@ export default class Ayah extends Component {
   }
 
   renderPlayLink() {
-    const { isSearched, ayah } = this.props;
+    const { isSearched, ayah, currentAyah, isPlaying } = this.props;
+    const playing = ayah.ayahKey == currentAyah && isPlaying;
+    let icon = <i className="ss-icon ss-play" />
+
+    if (playing) {
+      icon = <i className="ss-icon ss-pause" />;
+    }
 
     if (!isSearched) {
       return (
         <a
           onClick={() => this.handlePlay(ayah.ayahKey)}
           className="text-muted"
         >
-          <i className="ss-icon ss-play" /> Play
+          {icon}
+          <LocaleFormattedMessage
+            id={ playing ? 'actions.pause' : 'actions.play' }
+            defaultMessage={ playing ? 'Pause' : 'Play'}
+          />
         </a>
       );
     }
@@ -226,17 +241,17 @@ export default class Ayah extends Component {
   }
 
   renderBookmark() {
-    const { ayah, bookmarked, isAuthenticated, bookmarkActions } = this.props;
+    const { ayah, bookmarked, isAuthenticated, bookmarkActions, isSearched } = this.props;
 
-    if (!isAuthenticated) return false;
+    if (isSearched || !isAuthenticated) return false;
 
     if (bookmarked) {
       return (
         <a
           onClick={() => bookmarkActions.removeBookmark(ayah.ayahKey)}
           className="text-muted"
         >
-          <strong><i className="ss-icon ss-bookmark" /> Bookmarked</strong>
+          <strong><i className="ss-icon ss-bookmark" /> Bookmarked </strong>
         </a>
       );
     }