use text fonts for render page mode (#715)

Author: naveed-ahmad

src/components/Line/index.js

@@ -17,7 +17,8 @@ export default class Line extends React.Component {
       play: PropTypes.func.isRequired,
       setCurrentWord: PropTypes.func.isRequired,
     }),
-    isPlaying: PropTypes.bool
+    isPlaying: PropTypes.bool,
+    useTextFont: PropTypes.bool
   };
 
   // NOTE: this is commented out as it caused problems with 55:31 with missing text.
@@ -34,7 +35,7 @@ export default class Line extends React.Component {
   // }
 
   renderText() {
-    const { tooltip, currentVerse, audioActions, isPlaying, line } = this.props;
+    const { tooltip, currentVerse, audioActions, isPlaying, line, useTextFont } = this.props;
 
     const text = line.map(word => (
       <Word
@@ -44,6 +45,7 @@ export default class Line extends React.Component {
         tooltip={tooltip}
         isPlaying={isPlaying}
         audioActions={audioActions}
+        useTextFont={useTextFont}
       />
     ));
 

src/components/PageView/index.js

@@ -1,13 +1,15 @@
 import React, { PropTypes } from 'react';
+import { connect } from 'react-redux';
 
 import Line from 'components/Line';
 import PageBreak from 'components/PageBreak';
 
-const PageView = ({ lines, keys, currentVerse, options, isPlaying, audioActions }) => {
+const PageView = ({ lines, keys, currentVerse, options, isPlaying, audioActions, userAgent }) => {
   const elements = keys.map((lineNum, index) => {
     const nextNum = keys[index + 1];
     const pageNum = lineNum.split('-')[0];
     const line = lines[lineNum];
+    const renderText = userAgent.isChrome || userAgent.isOpera || userAgent.isBot;
 
     if (index + 1 !== keys.length && pageNum !== nextNum.split('-')[0]) {
       return [
@@ -18,6 +20,7 @@ const PageView = ({ lines, keys, currentVerse, options, isPlaying, audioActions
           tooltip={options.tooltip}
           audioActions={audioActions}
           isPlaying={isPlaying}
+          useTextFont={renderText}
         />,
         <PageBreak pageNum={parseInt(pageNum, 10) + 1} />
       ];
@@ -31,6 +34,7 @@ const PageView = ({ lines, keys, currentVerse, options, isPlaying, audioActions
         tooltip={options.tooltip}
         audioActions={audioActions}
         isPlaying={isPlaying}
+        useTextFont={renderText}
       />
     );
   });
@@ -47,7 +51,10 @@ PageView.propTypes = {
   currentVerse: PropTypes.string,
   bookmarks: PropTypes.object.isRequired, // eslint-disable-line
   options: PropTypes.object.isRequired, // eslint-disable-line
-  isPlaying: PropTypes.bool
+  isPlaying: PropTypes.bool,
+  userAgent: PropTypes.func
 };
 
-export default PageView;
+export default connect(state => ({
+  userAgent: state.options.userAgent
+}))(PageView);