From 73c5bd4a07ed74ce8476997cdb19c646cdbb9a9b Mon Sep 17 00:00:00 2001
From: Naveed Ahmad <naveedahmada036@gmail.com>
Date: Fri, 20 Jan 2017 11:59:49 +0500
Subject: [PATCH 1/3] improved time to first paint #594 (#599)

---
 src/config.js             | 5 ++---
 src/helpers/Html.js       | 3 +++
 src/styles/variables.scss | 1 -
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/config.js b/src/config.js
index 658e40187..6ddf864b9 100644
--- a/src/config.js
+++ b/src/config.js
@@ -84,13 +84,12 @@ module.exports = Object.assign({
         { rel: 'apple-touch-icon', sizes: '152x152', href: '/apple-touch-icon-152x152.png' },
         { rel: 'apple-touch-icon', sizes: '180x180', href: '/apple-touch-icon-180x180.png' },
         { rel: 'preconnect', href: 'https://quran-1f14.kxcdn.com', crossOrigin: '' },
-        { rel: 'preconnect', href: 'https://assets-1f14.kxcdn.com', crossOrigin: '' },
-        { rel: 'stylesheet', href: 'https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css' }
+        { rel: 'preconnect', href: 'https://assets-1f14.kxcdn.com', crossOrigin: '' }
       ],
       /* SEO: https://developers.google.com/structured-data/slsb-overview#markup_examples */
       /* SEO: https://developers.google.com/structured-data/site-name#markup_requirements */
       script: [
-        { src: 'https://cdn.polyfill.io/v2/polyfill.min.js?features=Intl.~locale.en' },
+        { src: 'https://cdn.polyfill.io/v2/polyfill.min.js?features=Intl.~locale.en', async: '', defer: '' },
         {
           type: 'application/ld+json',
           innerHTML: `{
diff --git a/src/helpers/Html.js b/src/helpers/Html.js
index d781eede1..2b5ecbdff 100644
--- a/src/helpers/Html.js
+++ b/src/helpers/Html.js
@@ -79,6 +79,9 @@ const Html = ({ store, component, assets }) => {
         {Object.keys(assets.javascript).map((script, i) =>
           <script src={assets.javascript[script]} key={i} />
         )}
+        {
+          <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
+        }
       </body>
     </html>
   );
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index e3f721735..a663683ec 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -61,7 +61,6 @@ $tracker-height-hundred-boolean: false;
 
 $font-family-sans-serif: 'Montserrat', sans-serif;
 $font-montserrat: $font-family-sans-serif;
-$font-awesome: 'FontAwesome', serif;
 $icon-font-path: "bootstrap-sass/assets/fonts";
 
 @import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap/variables";

From 0b8d0f7010d7b55b6c1fc5aec15ac319b5a47079 Mon Sep 17 00:00:00 2001
From: Mohamed El Mahallawy <mmahalwy@gmail.com>
Date: Thu, 19 Jan 2017 23:18:30 -0800
Subject: [PATCH 2/3] Fixes #598 Reading mode missing text (#600)

---
 src/components/Line/index.js | 21 ++++++++++++---------
 src/components/Word/index.js |  2 +-
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/src/components/Line/index.js b/src/components/Line/index.js
index c2600ef7d..585354fe1 100644
--- a/src/components/Line/index.js
+++ b/src/components/Line/index.js
@@ -20,15 +20,18 @@ export default class Line extends React.Component {
     isPlaying: PropTypes.bool
   };
 
-  shouldComponentUpdate(nextProps) {
-    const conditions = [
-      this.props.currentAyah !== nextProps.currentAyah,
-      this.props.line !== nextProps.line,
-      this.props.isPlaying !== nextProps.isPlaying
-    ];
-
-    return conditions.some(condition => condition);
-  }
+  // NOTE: this is commented out as it caused problems with 55:31 with missing text.
+  // shouldComponentUpdate(nextProps) {
+  //   const conditions = [
+  //     this.props.currentAyah !== nextProps.currentAyah,
+  //     this.props.line !== nextProps.line,
+  //     this.props.isPlaying !== nextProps.isPlaying
+  //   ];
+  //
+  //   console.log(conditions, conditions.some(condition => condition));
+  //
+  //   return conditions.some(condition => condition);
+  // }
 
   renderText() {
     const { tooltip, currentAyah, audioActions, isPlaying, line } = this.props;
diff --git a/src/components/Word/index.js b/src/components/Word/index.js
index 8cc409196..1e81d4d7a 100644
--- a/src/components/Word/index.js
+++ b/src/components/Word/index.js
@@ -52,7 +52,7 @@ export default class Word extends React.Component {
     const className = `${word.className} ${highlight} ${word.highlight ? word.highlight : ''}`;
 
     if (word.charTypeId === CHAR_TYPE_WORD) {
-      id = `word-${word.ayahKey.replace(/:/, '-')}-${audioPosition}`;
+      id = `word-${word.ayahKey.replace(/:/, '-')}-${audioPosition || word.position}`;
     }
 
     return (

From 73f8120b63b38f250ba231eaeebf1fda4f7a50af Mon Sep 17 00:00:00 2001
From: Umair Idris <umair.m.idris@gmail.com>
Date: Fri, 20 Jan 2017 11:07:09 -0800
Subject: [PATCH 3/3] Fixes #595, #601 Add translations for settings in sidebar
 (#602)

* Add translations for settings in sidebar

* new line

* More translations

* Periods

* Rename settings ids

* Use existing ids which I blindly missed

* Delete ids from ur.js

* Delete ids from en.js

* Fix reciters title for ur/ar

* Use setting.title

* I should get some sleep

* Revert setting.title to nav.settings

* Remove setting.option, add nav.title
---
 src/components/Footer/index.js        | 11 +++--------
 src/components/GlobalSidebar/index.js |  5 +++--
 src/components/SettingsModal/index.js | 15 +++++++++++----
 src/locale/ar.js                      |  6 ++++--
 src/locale/en.js                      |  8 +++++---
 src/locale/ur.js                      |  6 ++++--
 6 files changed, 30 insertions(+), 21 deletions(-)

diff --git a/src/components/Footer/index.js b/src/components/Footer/index.js
index adb461302..f5e8c5a3c 100644
--- a/src/components/Footer/index.js
+++ b/src/components/Footer/index.js
@@ -135,13 +135,6 @@ const Footer = () => (
           </Col>
 
           <Col md={4} sm={12} xs={12} className={styles.links}>
-            <p className={styles.header}>
-              <LocaleFormattedMessage
-                id="local.selectLabel"
-                defaultMessage="Site Language"
-              />
-            </p>
-
             <div className={styles.list}>
               <p className="monserrat">
                 <LocaleFormattedMessage
@@ -150,7 +143,9 @@ const Footer = () => (
                 />
               </p>
 
-              <p className="monserrat">&copy; QURAN.COM. ALL RIGHTS RESERVED 2016</p>
+              <p className="monserrat">
+                &copy; 2016 Quran.com. <LocaleFormattedMessage id="nav.rightsReserved" defaultMessage="All Rights Reserved" />.
+              </p>
             </div>
           </Col>
         </div>
diff --git a/src/components/GlobalSidebar/index.js b/src/components/GlobalSidebar/index.js
index ef3f474fe..bf54e9538 100644
--- a/src/components/GlobalSidebar/index.js
+++ b/src/components/GlobalSidebar/index.js
@@ -56,7 +56,7 @@ class GlobalSidebar extends Component {
               className="navbar-text"
               onClick={() => handleOpen(false)}
             >
-              <LocaleFormattedMessage id="setting.title" defaultMessage="Quran" />
+              <LocaleFormattedMessage id="nav.title" defaultMessage="Quran" />
             </p>
           </NavbarHeader>
         </Navbar>
@@ -64,7 +64,8 @@ class GlobalSidebar extends Component {
           {children}
           <li>
             <a tabIndex="-1" className="pointer" onClick={() => this.setState({ settingsModalOpen: true }, handleOpen(false))}>
-              <i className="ss-icon ss-settings vertical-align-middle" />{' '}Settings
+              <i className="ss-icon ss-settings vertical-align-middle" />{' '}
+              <LocaleFormattedMessage id="nav.settings" defaultMessage="Settings" />
             </a>
           </li>
           <li>
diff --git a/src/components/SettingsModal/index.js b/src/components/SettingsModal/index.js
index b42242e62..2c46faca4 100644
--- a/src/components/SettingsModal/index.js
+++ b/src/components/SettingsModal/index.js
@@ -2,6 +2,7 @@ import React, { PropTypes } from 'react';
 import { connect } from 'react-redux';
 import Modal from 'react-bootstrap/lib/Modal';
 
+import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
 import ReciterDropdown from 'components/ReciterDropdown';
 import ContentDropdown from 'components/ContentDropdown';
 import TooltipDropdown from 'components/TooltipDropdown';
@@ -37,26 +38,32 @@ const SettingsModal = ({
     <Modal show={open} onHide={handleHide}>
       <ModalHeader closeButton>
         <ModalTitle className="montserrat">
-          Settings
+          <LocaleFormattedMessage id="setting.title" defaultMessage="Settings" />
         </ModalTitle>
       </ModalHeader>
       <ModalBody>
         <div className="form-group">
-          <h5 className="text-black">Reciters</h5>
+          <h5 className="text-black">
+            <LocaleFormattedMessage id="setting.reciters.title" defaultMessage="Reciters" />
+          </h5>
           <ReciterDropdown
             onOptionChange={handleOptionChange}
             audio={options.audio}
           />
         </div>
         <div className="form-group">
-          <h5 className="text-black">Translations</h5>
+          <h5 className="text-black">
+            <LocaleFormattedMessage id="setting.translations.title" defaultMessage="Translations" />
+          </h5>
           <ContentDropdown
             onOptionChange={handleOptionChange}
             content={options.content}
           />
         </div>
         <div className="form-group">
-          <h5 className="text-black">Tooltip Content</h5>
+          <h5 className="text-black">
+            <LocaleFormattedMessage id="setting.tooltip.title" defaultMessage="Tooltip Content" />
+          </h5>
           <TooltipDropdown
             tooltip={options.tooltip}
             onOptionChange={setOption}
diff --git a/src/locale/ar.js b/src/locale/ar.js
index 6f06ca92c..79af57e2a 100644
--- a/src/locale/ar.js
+++ b/src/locale/ar.js
@@ -6,11 +6,10 @@ export default {
     'local.changeLocal': 'اختر اللغة التي تود عرض الموقع بها',
     'local.navtiveName': 'العربية',
     'local.selectLabel': 'اللغة',
-    'setting.options': 'خيارات',
     'setting.title': 'خيارات',
     'setting.surahs': 'السورة',
     'setting.verses': 'الذهاب إلى الآية',
-    'setting.reciters': 'القراء',
+    'setting.reciters.title': 'القراء',
     'setting.translations.title': 'الترجمات',
     'setting.translations.removeAll': 'حذف الكل',
     'setting.translations.english': 'الإنجليزية',
@@ -61,6 +60,8 @@ export default {
     'actions.play': 'لعب',
     'actions.pause': 'وقفة',
 
+    'nav.title': 'القرآن',
+    'nav.settings': 'خيارات',
     'nav.contribute': 'يساهم',
     'nav.aboutUs': 'معلومات عنا',
     'nav.developers': 'المطورين',
@@ -69,6 +70,7 @@ export default {
     'nav.contactUs': 'اتصل بنا',
     'nav.help': 'مساعدة وتعليقات',
     'nav.aboutQuranProject': 'Quran.com المعروف أيضا باسم القرآن الكريم، قناة القرآن الكريم، القرآن الكريم، القرآن الكريم) هو مشروع خيري)',  // eslint-disable-line max-len
+    'nav.rightsReserved': 'كل الحقوق محفوظة',
     'nav.mobile': 'التليفون المحمول',
     'nav.navigate': 'انتقل',
     'nav.legacySite': 'الموقع القديم',
diff --git a/src/locale/en.js b/src/locale/en.js
index f20802e8e..f126fa7e2 100644
--- a/src/locale/en.js
+++ b/src/locale/en.js
@@ -6,11 +6,10 @@ export default {
     'local.changeLocal': 'Choose the language you want the site to display with',
     'local.navtiveName': 'English',
     'local.selectLabel': 'Language',
-    'setting.options': 'Options',
-    'setting.title': 'Quran',
+    'setting.title': 'Settings',
     'setting.surahs': 'Surahs',
     'setting.verses': 'Go to verse',
-    'setting.reciters': 'Reciters',
+    'setting.reciters.title': 'Reciters',
     'setting.translations.title': 'Translations',
     'setting.translations.removeAll': 'Remove all',
     'setting.translations.english': 'English',
@@ -61,6 +60,8 @@ export default {
     'actions.play': 'Play',
     'actions.pause': 'Pause',
 
+    'nav.title': 'Quran',
+    'nav.settings': 'Settings',
     'nav.contribute': 'Contribute',
     'nav.aboutUs': 'About us',
     'nav.developers': 'Developers',
@@ -69,6 +70,7 @@ export default {
     'nav.contactUs': 'Contact us',
     'nav.help': 'Help & feedback',
     'nav.aboutQuranProject': 'Quran.com (also known as The Noble Quran, Al Quran, Holy Quran, Koran) is a pro bono project.', // eslint-disable-line max-len
+    'nav.rightsReserved': 'All Rights Reserved',
     'nav.mobile': 'Mobile Apps',
     'nav.navigate': 'Navigate',
     'nav.legacySite': 'Legacy Quran.com',
diff --git a/src/locale/ur.js b/src/locale/ur.js
index 2fcf4f4a4..677701783 100644
--- a/src/locale/ur.js
+++ b/src/locale/ur.js
@@ -6,11 +6,10 @@ export default {
     'local.changeLocal': 'جس زبان میں سایٹ دیکہنا چاہتے ہیں اس زبان کا انتخاب کریں',
     'local.navtiveName': 'اردو',
     'local.selectLabel': 'زبان',
-    'setting.options': 'اختیارات',
     'setting.title': 'اختیارات',
     'setting.surahs': 'سورة',
     'setting.verses': 'آیت منتخب کریں',
-    'setting.reciters': 'قاری منتخب کریں',
+    'setting.reciters.title': 'قاری منتخب کریں',
     'setting.translations.title': 'ترجمے',
     'setting.translations.removeAll': 'سب کو ہٹا دیں',
     'setting.translations.english': 'انگریزی',
@@ -61,6 +60,8 @@ export default {
     'actions.play': 'چلاو',
     'actions.pause': 'روک دیں',
 
+    'nav.title': 'قرآن',
+    'nav.settings': 'اختیارات',
     'nav.contribute': 'تعاون کریں',
     'nav.aboutUs': 'ہمارے متعلق',
     'nav.developers': 'ڈویلپرز',
@@ -69,6 +70,7 @@ export default {
     'nav.contactUs': 'ہم سے رابطہ',
     'nav.help': 'مدد اور تاثرات',
     'nav.aboutQuranProject': 'قرآن کریم ایک فلاں عامہ (عوامی بہبود کے لئے) منصوبہ ہے',
+    'nav.rightsReserved': 'جملہ حقوق محفوظ ہیں',
     'nav.mobile': 'موبائل',
     'nav.navigate': 'تشریف لے جائیں',
     'nav.legacySite': 'پرانی سائٹ',