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 :)

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();

src/redux/modules/options.js

@@ -2,6 +2,7 @@ import {
   SET_OPTION,
   LOAD_RECITERS,
   LOAD_RECITERS_SUCCESS,
+  SET_USER_AGENT,
   LOAD_TRANSLATIONS,
   LOAD_TRANSLATIONS_SUCCESS
 } from 'redux/constants/options.js';
@@ -14,6 +15,7 @@ const initialState = {
   audio: 8,
   translations: [20],
   tooltip: 'translation',
+  userAgent: null,
   options: {
     recitations: [],
     translations: []
@@ -49,6 +51,13 @@ export default function reducer(state = initialState, action = {}) {
         }
       };
     }
+    case SET_USER_AGENT: {
+      const { userAgent } = action;
+      return {
+        ...state,
+        userAgent
+      };
+    }
     case LOAD_TRANSLATIONS: {
       return {
         ...state,

src/server.js

@@ -21,8 +21,7 @@ import debug from './helpers/debug';
 
 import Html from './helpers/Html';
 
-import { setUserAgent } from './redux/actions/audioplayer.js';
-import { setOption } from './redux/actions/options.js';
+import { setOption, setUserAgent } from './redux/actions/options.js';
 import getLocalMessages from './helpers/setLocal';
 
 const pretty = new PrettyError();

src/styles/fonts/_fonts.scss

@@ -1,3 +1,41 @@
+@mixin word_font($page) {
+  @font-face {
+    font-family: p#{$page};
+    src: url('../../static/fonts/ttf/p#{$page}.ttf') format('truetype');
+  }
+
+  @font-face {
+    font-family: text#{$page};
+    src: url('../../static/fonts/embed_ttf/tp#{$page}.ttf') format('truetype');
+  }
+
+  .p#{$page} {
+    font-family: p#{$page};
+  }
+
+  .text-p#{$page} {
+    font-family: text#{$page};
+  }
+}
+
+@for $i from 1 through 604 {
+  @include word_font($i);
+}
+
+@font-face {
+  font-family: quran-common;
+  src: url('../../static/fonts/quran-common/quran_common.ttf') format('truetype');
+}
+
+.p0, .text-p0{
+  font-family: quran-common;
+
+  &.end{
+    padding: 0;
+    text-align: left;
+  }
+}
+
 @font-face {
   font-family: 'Montserrat';
   src: url('../../static/fonts/montserrat/Montserrat-Regular.otf');
@@ -666,7 +704,7 @@ html:hover [class^="ss-"] {
 }
 
 .ss-plus:before, .ss-plus.right:after {
-  content: '+'
+  content: ''
 }
 
 .ss-hyphen:before, .ss-hyphen.right:after {