diff --git a/src/components/Verse/index.js b/src/components/Verse/index.js index 600e5ae49..9264b77fe 100644 --- a/src/components/Verse/index.js +++ b/src/components/Verse/index.js @@ -1,6 +1,7 @@ import React, { Component, PropTypes } from 'react'; import Link from 'react-router/lib/Link'; import { Element } from 'react-scroll'; +import { connect } from 'react-redux'; import { verseType, matchType, surahType } from 'types'; import Share from 'components/Share'; @@ -8,12 +9,11 @@ import Copy from 'components/Copy'; import LocaleFormattedMessage from 'components/LocaleFormattedMessage'; import Word from 'components/Word'; import Translation from 'components/Translation'; - import debug from 'helpers/debug'; const styles = require('./style.scss'); -export default class Verse extends Component { +class Verse extends Component { static propTypes = { isSearched: PropTypes.bool, verse: verseType.isRequired, @@ -41,7 +41,8 @@ export default class Verse extends Component { tooltip: PropTypes.string, currentWord: PropTypes.number, // gets passed in an integer, null by default iscurrentVerse: PropTypes.bool, - currentVerse: PropTypes.string + currentVerse: PropTypes.string, + userAgent: PropTypes.func }; @@ -128,9 +129,10 @@ export default class Verse extends Component { } renderText() { - const { verse, tooltip, currentVerse, isPlaying, audioActions, isSearched } = this.props; + const { verse, tooltip, currentVerse, isPlaying, audioActions, isSearched, userAgent } = this.props; // eslint-disable-line max-len // NOTE: Some 'word's are glyphs (jeem). Not words and should not be clicked for audio let wordAudioPosition = -1; + const renderText = userAgent.isChrome || userAgent.isOpera || userAgent.isBot; const text = verse.words.map(word => ( // eslint-disable-line )); return (

- {text} -

+

+ {text} +

); } @@ -292,3 +291,7 @@ export default class Verse extends Component { ); } } + +export default connect(state => ({ + userAgent: state.options.userAgent +}))(Verse); diff --git a/src/components/Verse/style.scss b/src/components/Verse/style.scss index 63e6ffca0..1db6feccd 100644 --- a/src/components/Verse/style.scss +++ b/src/components/Verse/style.scss @@ -73,7 +73,7 @@ text-align: right; float: left; - b{ + b, span{ float: right; border-color: transparent; border-width: 0px 0px 1px 0px; @@ -106,6 +106,14 @@ } } + p{ + display: block; + clear: both; + text-align: right; + direction: rtl; + float: right; + } + @media (max-width: $screen-xs-max) { font-size: 300%; line-height: 130%; @@ -134,3 +142,4 @@ width: 100%; margin: 0px auto; } + diff --git a/src/components/Word/index.js b/src/components/Word/index.js index 2d77bf63d..cfa58c132 100644 --- a/src/components/Word/index.js +++ b/src/components/Word/index.js @@ -1,5 +1,7 @@ import React, { Component, PropTypes } from 'react'; import bindTooltip from 'utils/bindTooltip'; +import { zeroPad } from 'helpers/StringHelpers'; + /* eslint-disable no-unused-vars */ const CHAR_TYPE_WORD = 'word'; const CHAR_TYPE_END = 'end'; @@ -15,7 +17,8 @@ export default class Word extends Component { audioPosition: PropTypes.number, currentVerse: PropTypes.string.isRequired, isPlaying: PropTypes.bool, - isSearched: PropTypes.bool + isSearched: PropTypes.bool, + useTextFont: PropTypes.bool // tmp change to compare text and code based rendering }; buildTooltip = (word, tooltip) => { @@ -58,27 +61,40 @@ export default class Word extends Component { } render() { - const { tooltip, word, currentVerse, isPlaying, audioPosition } = this.props; + const { tooltip, word, currentVerse, isPlaying, audioPosition, useTextFont } = this.props; - let id = null; + let text; + let spacer; const highlight = currentVerse === word.verseKey && isPlaying ? 'highlight' : ''; - const className = `${word.className} ${highlight} ${word.highlight ? word.highlight : ''}`; + const className = `${useTextFont ? 'text-' : ''}${word.charType === CHAR_TYPE_WORD ? word.className : 'p0'} ${word.charType} ${highlight} ${word.highlight ? word.highlight : ''}`; + const id = `word-${word.verseKey.replace(/:/, '-')}-${audioPosition || word.position}`; + + if (word.charType === CHAR_TYPE_END) { + text = zeroPad(word.verseKey.split(':')[1], 3, 0); + } else if (!useTextFont || word.charType === CHAR_TYPE_PAUSE) { + text = word.codeV3; + } else { + text = word.textMadani; + } if (word.charType === CHAR_TYPE_WORD) { - id = `word-${word.verseKey.replace(/:/, '-')}-${audioPosition || word.position}`; + spacer = ' '; } return ( - + + + + ); } diff --git a/src/containers/App/index.js b/src/containers/App/index.js index d6f6b89f8..7caa8e740 100644 --- a/src/containers/App/index.js +++ b/src/containers/App/index.js @@ -14,7 +14,6 @@ import config from 'config'; import metricsConfig from 'helpers/metrics'; import Footer from 'components/Footer'; import NoScript from 'components/NoScript'; -import FontStyles from 'components/FontStyles'; import { removeMedia } from 'redux/actions/media'; import authConnect from './connect'; @@ -58,7 +57,6 @@ class App extends Component { return (
-