Text based fonts (#672)

* added word rendering comparision

* regenerated surah name icon fonts using private unicode area

* render text fonts for supported browsers only

* moved user agent to options tree

* fixed lint breaks

* fixed floating of ayah number word

* added empty space after 'word' word :)

Author: naveed-ahmad

src/components/Verse/index.js

@@ -1,19 +1,19 @@
 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';
 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
       <Word
@@ -142,18 +144,15 @@ export default class Verse extends Component {
         audioActions={audioActions}
         audioPosition={word.wordId ? wordAudioPosition += 1 : null}
         isSearched={isSearched}
+        useTextFont={renderText}
       />
     ));
 
     return (
       <h1 className={`${styles.font} text-right text-arabic`}>
-        {text}
-        <p
-          dir="rtl"
-          lang="ar"
-          className={`text-tashkeel text-p${verse.pageNumber}`}
-          dangerouslySetInnerHTML={{ __html: verse.textMadani }}
-        />
+        <p>
+          {text}
+        </p>
       </h1>
     );
   }
@@ -292,3 +291,7 @@ export default class Verse extends Component {
     );
   }
 }
+
+export default connect(state => ({
+  userAgent: state.options.userAgent
+}))(Verse);

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;
 }
+

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 (
-      <b // eslint-disable-line
-        { ...bindTooltip}
-        key={word.code}
-        id={id}
-        onDoubleClick={this.handleSegmentPlay}
-        onClick={this.handleWordPlay}
-        className={`${className} pointer`}
-        title={this.buildTooltip(word, tooltip)}
-        dangerouslySetInnerHTML={{ __html: word.code }}
-      />
+      <span>
+        <b // eslint-disable-line
+          { ...bindTooltip}
+          key={word.code}
+          id={id}
+          onDoubleClick={this.handleSegmentPlay}
+          onClick={this.handleWordPlay}
+          className={`${className} pointer`}
+          title={this.buildTooltip(word, tooltip)}
+          dangerouslySetInnerHTML={{ __html: text }}
+        />
+        <small dangerouslySetInnerHTML={{ __html: spacer }} />
+      </span>
     );
   }
 

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 (
       <div>
         <Helmet {...config.app.head} />
-        <FontStyles />
         <NoScript>
           <div className="row noscript-warning">
             <div className="col-md-12">

src/helpers/StringHelpers.js

@@ -0,0 +1,5 @@
+export function zeroPad(num, places, padChar = '0') { // eslint-disable-line
+  const zero = (places - num.toString().length) + 1;
+
+  return Array(+(zero > 0 && zero)).join(padChar) + num;
+}

src/redux/actions/audioplayer.js

@@ -1,5 +1,4 @@
 import {
-  SET_USER_AGENT,
   SET_CURRENT_FILE,
   SET_CURRENT_WORD,
   PLAY_CURRENT_WORD,
@@ -13,13 +12,6 @@ import {
   BUILD_ON_CLIENT,
   UPDATE } from 'redux/constants/audioplayer.js';
 
-export function setUserAgent(userAgent) {
-  return {
-    type: SET_USER_AGENT,
-    userAgent
-  };
-}
-
 export function setCurrentFile(file) {
   return {
     type: SET_CURRENT_FILE,

src/redux/actions/options.js

@@ -4,6 +4,7 @@ import {
   LOAD_RECITERS,
   LOAD_RECITERS_SUCCESS,
   LOAD_RECITERS_FAIL,
+  SET_USER_AGENT,
   LOAD_TRANSLATIONS,
   LOAD_TRANSLATIONS_SUCCESS,
   LOAD_TRANSLATIONS_FAIL
@@ -30,6 +31,13 @@ export const loadRecitations = () => ({
   promise: client => client.get('/api/v3/options/recitations')
 });
 
+export function setUserAgent(userAgent) {
+  return {
+    type: SET_USER_AGENT,
+    userAgent
+  };
+}
+
 export const loadTranslations = () => ({
   types: [LOAD_TRANSLATIONS, LOAD_TRANSLATIONS_SUCCESS, LOAD_TRANSLATIONS_FAIL],
   promise: client => client.get('/api/v3/options/translations')

src/redux/constants/audioplayer.js

@@ -1,4 +1,3 @@
-export const SET_USER_AGENT = '@@quran/audioplayer/SET_USER_AGENT';
 export const SET_CURRENT_FILE = '@@quran/audioplayer/SET_CURRENT_FILE';
 export const SET_CURRENT_WORD = '@@quran/audioplayer/SET_CURRENT_WORD';
 export const PLAY_CURRENT_WORD = '@@quran/audioplayer/PLAY_CURRENT_WORD';

src/redux/constants/options.js

@@ -1,5 +1,6 @@
 export const SET_OPTION = '@@quran/options/SET_OPTION';
 export const TOGGLE_NIGHT_MODE = '@@quran/options/TOGGLE_NIGHT_MODE';
+export const SET_USER_AGENT = '@@quran/options/SET_USER_AGENT';
 
 export const LOAD_RECITERS = '@@quran/verses/LOAD_RECITERS';
 export const LOAD_RECITERS_SUCCESS = '@@quran/verses/LOAD_RECITERS_SUCCESS';

src/redux/modules/audioplayer.js

@@ -4,7 +4,6 @@ import { buildSegments, extractSegments } from 'helpers/buildSegments';
 import debug from 'helpers/debug';
 
 import {
-  SET_USER_AGENT,
   SET_CURRENT_FILE,
   SET_CURRENT_WORD,
   PLAY_CURRENT_WORD,
@@ -30,7 +29,6 @@ export { NEXT, SET_AYAH };
 
 const initialState = {
   files: {},
-  userAgent: null,
   currentFile: null,
   currentVerse: null,
   currentWord: null,
@@ -143,13 +141,6 @@ export default function reducer(state = initialState, action = {}) {
         ...payload
       };
     }
-    case SET_USER_AGENT: {
-      const { userAgent } = action;
-      return {
-        ...state,
-        userAgent
-      };
-    }
     case PLAY: {
       if (state.currentFile) {
         state.currentFile.play();