Skip to content

Commit

Permalink
Work in progress for quran#245
Browse files Browse the repository at this point in the history
  • Loading branch information
naveed-ahmad committed Dec 11, 2016
1 parent 0d4056c commit ef3acc2
Show file tree
Hide file tree
Showing 13 changed files with 200 additions and 33 deletions.
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand Down
9 changes: 7 additions & 2 deletions src/client.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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');
}
);
Expand Down
46 changes: 37 additions & 9 deletions src/components/Audioplayer/RepeatDropdown/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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');

Expand Down Expand Up @@ -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}
Expand All @@ -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}
Expand All @@ -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}
Expand Down Expand Up @@ -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>
Expand All @@ -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}
Expand All @@ -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) => (
Expand All @@ -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}
Expand All @@ -225,7 +253,7 @@ export default class RepeatButton extends Component {
<div className="text-center">
<OverlayTrigger
overlay={popover}
placement="bottom"
placement="top"
trigger="click"
rootClose
>
Expand Down
6 changes: 5 additions & 1 deletion src/components/Audioplayer/ScrollButton/index.js
Original file line number Diff line number Diff line change
@@ -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>
);

Expand Down
13 changes: 11 additions & 2 deletions src/components/Audioplayer/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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>
);
}
Expand All @@ -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()}
Expand Down
29 changes: 20 additions & 9 deletions src/components/Ayah/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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) {
Expand All @@ -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();
}
Expand Down Expand Up @@ -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>
);
}
Expand Down Expand Up @@ -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>
);
}
Expand Down Expand Up @@ -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 (
Expand Down
7 changes: 6 additions & 1 deletion src/components/Copy/index.js
Original file line number Diff line number Diff line change
@@ -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 = {
Expand All @@ -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>
);
}
Expand Down
2 changes: 2 additions & 0 deletions src/config.js
Original file line number Diff line number Diff line change
Expand Up @@ -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}`,
Expand Down
47 changes: 47 additions & 0 deletions src/locale/en.js
Original file line number Diff line number Diff line change
@@ -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"
}
};
Loading

0 comments on commit ef3acc2

Please sign in to comment.