Work in progress for #245

package.json

@@ -112,6 +112,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"
   },
   "devDependencies": {

src/client.js

@@ -12,14 +12,17 @@ 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 localeData from './locale/ur.js';
 
+const localMessages = localeData.messages;
 const client = new ApiClient();
 const store = createStore(browserHistory, client, window.reduxData);
 const history = syncHistoryWithStore(browserHistory, store);
@@ -60,9 +63,11 @@ match({ history, routes: routes(store) }, (error, redirectLocation, renderProps)
   debug('client', 'React Rendering');
 
   ReactDOM.render(
-    <Provider store={store} key="provider">
+    <IntlProvider locale='en' messages={localMessages}>
+      <Provider  store={store} key="provider">
       {component}
-    </Provider>, mountNode, () => {
+      </Provider>
+    </IntlProvider>, mountNode, () => {
       debug('client', 'React Rendered');
     }
   );

src/components/Audioplayer/RepeatDropdown/index.js

@@ -8,6 +8,7 @@ import Row from 'react-bootstrap/lib/Row';
 import Col from 'react-bootstrap/lib/Col';
 
 import SwitchToggle from 'components/SwitchToggle';
+import {FormattedMessage } from 'react-intl';
 
 const style = require('../style.scss');
 
@@ -59,9 +60,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>
+            <FormattedMessage
+              id={ "player.repeat.rangeStart" }
+              defaultMessage={'From'}
+            />{' '}:
+            <br />
             <FormControl
               componentClass="select"
               value={repeat.from}
@@ -82,6 +87,11 @@ export default class RepeatButton extends Component {
           </li>
           <li> - </li>
           <li>
+            <FormattedMessage
+              id={ "player.repeat.rangeEnd" }
+              defaultMessage={'To'}
+            />{' '}:
+            <br />
             <FormControl
               componentClass="select"
               value={repeat.to}
@@ -107,7 +117,10 @@ export default class RepeatButton extends Component {
 
     return (
       <Col md={12} style={{paddingTop: 15}}>
-        Ayah: <br />
+        <FormattedMessage
+          id={ "player.currentAyah" }
+          defaultMessage={'Ayah'}
+        />{' '}: <br />
         <FormControl
           componentClass="select"
           value={repeat.from}
@@ -141,10 +154,16 @@ export default class RepeatButton extends Component {
             onSelect={this.handleNavChange}
           >
             <NavItem eventKey={1} title="Single Ayah" className={style.pill}>
-              Single
+              <FormattedMessage
+                id={ "player.repeat.single" }
+                defaultMessage={'Single'}
+              />
             </NavItem>
             <NavItem eventKey={2} title="Range" className={style.pill}>
-              Range
+              <FormattedMessage
+                id={ "player.repeat.range" }
+                defaultMessage={'Range'}
+              />
             </NavItem>
           </Nav>
         </Col>
@@ -169,7 +188,10 @@ export default class RepeatButton extends Component {
     return (
       <Row className={!repeat.from && style.disabled}>
         <Col md={12} style={{paddingTop: 15}}>
-          Times: <br />
+          <FormattedMessage
+            id={ "player.repeat.title" }
+            defaultMessage={'Repeat'}
+          />: <br />
           <FormControl
             componentClass="select"
             value={repeat.times}
@@ -178,8 +200,11 @@ export default class RepeatButton extends Component {
               times: parseInt(event.target.value, 10)
             })}
           >
-            <option value={Infinity}>
-              Loop
+            <option value={'Infinity'}>
+              {<FormattedMessage
+                id={ "player.repeat.loop" }
+                defaultMessage={'Loop'}
+              />}
             </option>
             {
               times.map((ayah, index) => (
@@ -204,7 +229,10 @@ export default class RepeatButton extends Component {
         title={
           <Row>
             <Col md={12} className="text-center">
-              Toggle repeat{'  '}
+              <FormattedMessage
+                id={ "player.repeat.title" }
+                defaultMessage={'TOGGLE REPEAT'}
+              />{'  '}
               <SwitchToggle
                 checked={!!repeat.from}
                 onToggle={this.handleToggle}
@@ -225,7 +253,7 @@ export default class RepeatButton extends Component {
       <div className="text-center">
         <OverlayTrigger
           overlay={popover}
-          placement="bottom"
+          placement="top"
           trigger="click"
           rootClose
         >

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 {FormattedMessage } from 'react-intl';
 
 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...
+      <FormattedMessage
+        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 {FormattedMessage} from 'react-intl';
 
 // 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>
+            <FormattedMessage
+              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]}
+            <FormattedMessage
+              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 {FormattedMessage} from 'react-intl';
 
 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();
   }
@@ -197,15 +199,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}
+          <FormattedMessage
+            id={ playing ? 'actions.pause' : 'actions.play' }
+            defaultMessage={ playing ? 'Pause' : 'Play'}
+          />
         </a>
       );
     }
@@ -236,7 +248,7 @@ export default class Ayah extends Component {
           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>
       );
     }
@@ -294,8 +306,7 @@ export default class Ayah extends Component {
 
   render() {
     const { ayah, currentAyah } = this.props;
-    const currentIndex = parseInt(currentAyah.split(":")[1], 10);
-    const className = ayah.ayahIndex === currentIndex ? styles.highlight : "";
+    const className = ayah.ayahKey === currentAyah ? styles.highlight : "";
     debug('component:Ayah', `Render ${this.props.ayah.ayahNum}`);
 
     return (

src/components/Copy/index.js

@@ -1,5 +1,6 @@
 import React, { Component, PropTypes } from 'react';
 import copyToClipboard from 'copy-to-clipboard';
+import {FormattedMessage } from 'react-intl';
 
 export default class Copy extends Component {
   static propTypes = {
@@ -26,7 +27,11 @@ export default class Copy extends Component {
         className={!isCopied && 'text-muted'}
         data-metrics-event-name="Ayah:Copy"
       >
-        <i className="ss-icon ss-attach" /> {isCopied ? 'Copied!' : 'Copy'}
+        <i className="ss-icon ss-attach" />
+        <FormattedMessage
+          id={ isCopied ? 'actions.copied' : 'actions.copy' }
+          defaultMessage={ isCopied ? 'Copied!' : 'Copy'}
+        />
       </a>
     );
   }

src/config.js

@@ -18,6 +18,8 @@ module.exports = Object.assign({
   sentryClient: process.env.SENTRY_KEY_CLIENT,
   sentryServer: process.env.SENTRY_KEY_SERVER,
   facebookAppId: process.env.FACEBOOK_APP_ID,
+  // Supported locales
+  locales: ["en", "ar", "ur"],
   app: {
     head: {
       titleTemplate: `%s - ${title}`,

src/locale/en.js

@@ -0,0 +1,47 @@
+// jscs:disable disallowQuotedKeysInObjects
+export default {
+  messages: {
+    "local": 'en',
+    "setting.title": "Options",
+    "setting.surahs": "Surahs",
+    "setting.verses": "Go to verse",
+    "setting.reciters": "Reciters",
+    "setting.translations.title": "Translations",
+    "setting.translations.removeAll": "Remove all",
+    "setting.translations.english": "English",
+    "setting.translations.other": "Other Languages",
+    "setting.fontSize": "Font size",
+    "setting.reading": "Reading",
+    "setting.tooltip.title": "TOOLTIP DISPLAY",
+    "setting.tooltip.translation": "Translation",
+    "setting.tooltip.transliteration": "Transliteration",
+
+    "search.placeholder": "Search",
+    "search.resultHeading": "{from}-{to} OF <span class='colored'> {total} SEARCH RESULTS FOR: <span class='colored'>{query}</span>",
+    "search.noResult": "Search",
+
+    "surah.next": "NEXT SURAH",
+    "surah.previous": "PREVIOUS SURAH",
+    "surah.info": "Surah Info",
+    "surah.index.heading": "SURAHS (CHAPTERS)",
+    "surah.index.quickLinks": "Quick links",
+
+    "player.currentAyah": "Ayah",
+    "player.nextAyah": "Next Ayah",
+    "player.previousAyah": "Previous Ayah",
+    "player.repeat.title": "TOGGLE REPEAT",
+    "player.repeat.single": "Single",
+    "player.repeat.range": "Range",
+    "player.repeat.rangeStart": "From",
+    "player.repeat.rangeEnd": "To",
+    "player.repeat.times": "Times",
+    "player.repeat.loop": "loop",
+    "player.scrollButtonTip": "Automatically scrolls to the currently playing ayah on transitions...",
+
+    "app.loading": "Loading ...",
+    "actions.copy": "Copy",
+    "actions.copied": "Copied!",
+    "actions.play": "Play",
+    "actions.pause": "Pause"
+  }
+};