Local support

.eslintignore

@@ -1 +0,0 @@
-src/components/SurahInfo/htmls/*

karma.conf.js

@@ -13,17 +13,19 @@ module.exports = function(config) {
       'karma-sinon',
       'karma-webpack',
       'karma-chrome-launcher',
-      'karma-phantomjs-launcher'
+      'karma-phantomjs-launcher',
+      'karma-intl-shim'
     ],
 
     // frameworks to use
     // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
-    frameworks: ['mocha', 'chai-sinon', 'sinon'],
+    frameworks: ['mocha', 'chai-sinon', 'sinon', 'intl-shim'],
 
     // list of files / patterns to load in the browser
     files: [
       './node_modules/phantomjs-polyfill/bind-polyfill.js',
       './tests/polyfill/Event.js',
+      './node_modules/Intl/locale-data/jsonp/en-US.js',
       {pattern: 'static/images/*', watched: false, included: false, served: true},
 
       // Actual tests here

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"
   },
@@ -135,6 +136,7 @@
     "karma-chai": "0.1.0",
     "karma-chai-sinon": "0.1.5",
     "karma-chrome-launcher": "0.2.0",
+    "karma-intl-shim": "1.0.3",
     "karma-junit-reporter": "0.3.4",
     "karma-mocha": "0.2.0",
     "karma-phantomjs-launcher": "~0.2.1",

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}
@@ -237,3 +266,5 @@ export default class RepeatButton extends Component {
     );
   }
 }
+
+export default injectIntl(RepeatButton);

src/components/Audioplayer/RepeatDropdown/spec.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { mountWithIntl } from '../../../../tests/helpers/intl-enzyme-test-helper.js';
 
 import RepeatDropdown from './index';
 
@@ -11,7 +11,7 @@ const surah = {
 makeComponent = (repeat) => {
   setRepeat = sinon.stub();
 
-  component = mount(
+  component = mountWithIntl(
     <RepeatDropdown
       repeat={repeat}
       setRepeat={setRepeat}
@@ -20,7 +20,7 @@ makeComponent = (repeat) => {
     />
   );
 
-  overlay = mount(component.find('OverlayTrigger').first().props().overlay);
+  overlay = mountWithIntl(component.find('OverlayTrigger').first().props().overlay);
 }
 
 describe('<RepeatDropdown />', () => {

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

@@ -11,6 +11,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';
@@ -392,7 +393,12 @@ export class Audioplayer extends Component {
     if (isLoading || !currentAyah) {
       return (
         <li className={`${style.container} ${className}`}>
-          <div>Loading...</div>
+          <div>
+            <LocaleFormattedMessage
+              id='app.loading'
+              defaultMessage={ 'Loading...' }
+            />
+          </div>
         </li>
       );
     }
@@ -419,7 +425,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()}