Merge master into production

src/client.js

@@ -15,7 +15,7 @@ import { syncHistoryWithStore } from 'react-router-redux';
 
 import debug from 'debug';
 
-import config from 'config';
+import config from './config';
 import ApiClient from './helpers/ApiClient';
 import createStore from './redux/create';
 import routes from './routes';
@@ -40,16 +40,6 @@ window.clearCookies = () => {
   reactCookie.remove('isFirstTime');
 };
 
-// Init tooltip
-if (typeof window !== 'undefined') {
-  $(() => {
-    $(document.body).tooltip({
-      selector: '[data-toggle="tooltip"]',
-      animation: false
-    });
-  });
-}
-
 match({ history, routes: routes() }, (error, redirectLocation, renderProps) => {
   const component = (
     <Router

src/components/Audioplayer/index.js

@@ -344,6 +344,7 @@ export class Audioplayer extends Component {
 
   renderPreviousButton() {
     const { currentAyah, files } = this.props;
+    if (!files) return false;
     const index = Object.keys(files).findIndex(id => id === currentAyah);
 
     return (
@@ -358,6 +359,7 @@ export class Audioplayer extends Component {
 
   renderNextButton() {
     const { surah, currentAyah } = this.props;
+    if (!surah) return false;
     const isEnd = surah.ayat === parseInt(currentAyah.split(':')[1], 10);
 
     return (

src/components/Ayah/index.js

@@ -8,11 +8,13 @@ import debug from '../../helpers/debug';
 
 const styles = require('./style.scss');
 
+/* eslint-disable no-unused-vars */
 const CHAR_TYPE_WORD = 1;
-const CHAR_TYPE_END = 2; // eslint-disable-line no-unused-vars
-const CHAR_TYPE_PAUSE = 3; // eslint-disable-line no-unused-vars
-const CHAR_TYPE_RUB = 4; // eslint-disable-line no-unused-vars
-const CHAR_TYPE_SAJDAH = 5; // eslint-disable-line no-unused-vars
+const CHAR_TYPE_END = 2;
+const CHAR_TYPE_PAUSE = 3;
+const CHAR_TYPE_RUB = 4;
+const CHAR_TYPE_SAJDAH = 5;
+/* eslint-enable no-unused-vars */
 
 export default class Ayah extends Component {
   static propTypes = {
@@ -92,7 +94,7 @@ export default class Ayah extends Component {
     let position = -1;
     let text = ayah.words.map(word => {
       let id = null;
-      const className = `${word.className} ${word.highlight && word.highlight}`;
+      const className = `${word.className} ${word.highlight ? word.highlight : ''}`;
 
       if (word.charTypeId === CHAR_TYPE_WORD) {
         position = position + 1;
@@ -110,12 +112,8 @@ export default class Ayah extends Component {
             id={id}
             onClick={(event) => onWordClick(event.target.dataset.key)}
             data-key={`${word.ayahKey}:${position}`}
-            className={`${className} pointer`}
-            data-toggle="tooltip"
-            data-trigger="hover"
-            data-placement="top"
-            data-original-title={tooltipContent}
-            title={tooltipContent}
+            className={`${className} ${styles.Tooltip}`}
+            aria-label={tooltipContent}
             dangerouslySetInnerHTML={{__html: word.code}}
           />
         );

src/components/Ayah/style.scss

@@ -1,4 +1,5 @@
-@import '../../styles/variables.scss';
+@import '../../styles/variables';
+@import '../../styles/partials/_tooltip';
 
 .container{
   padding: 2.5% 0%;
@@ -84,7 +85,7 @@
   color: #000;
   width: 100%;
   overflow-wrap: break-word;
-  line-height: 150%;
+  line-height: 1.5;
   word-break: break-all;
   text-align: right;
   float: left;
@@ -101,9 +102,10 @@
   }
 
   .line{
+    direction: rtl;
     b{
       float: none;
-      display: inline;
+      display: inline-block;
     }
   }
 
@@ -114,7 +116,7 @@
     color: #000;
     &:hover{
       color: $brand-primary;
-      cursor: pointer;
+      cursor: help;
     }
     &:focus{
       color: $brand-primary-darker-10;

src/components/Line/index.js

@@ -23,15 +23,12 @@ export default class Line extends React.Component {
         return (
           <b
             key={`${word.pageNum}${word.lineNum}${word.position}${word.code}`}
-            className={`${word.className} pointer`}
-            data-toggle="tooltip"
+            className={`${word.className} ${styles.Tooltip}`}
             data-ayah={word.ayahKey}
             data-line={word.lineNun}
             data-page={word.pageNum}
             data-position={word.position}
-            data-placement="top"
-            data-origin-title={tooltipContent}
-            title={tooltipContent}
+            aria-label={tooltipContent}
             dangerouslySetInnerHTML={{__html: word.code}}
           />
         );

src/components/TopOptions/spec.js

@@ -22,8 +22,10 @@ describe("<TopOptions />", () => {
     };
 
     const actions = {
-      setOption: () => {},
-      toggleReadingMode: () => {}
+      options: {
+        setOption: () => {},
+        toggleReadingMode: () => {}
+      }
     };
 
     const component = shallow(<TopOptions

src/helpers/buildAudio.js

@@ -6,6 +6,13 @@ export function buildAudioForAyah(audio) {
   if (audio.url) {
     scopedAudio.src = audio.url;
     segments = audio.encryptedSegments;
+    return { audio: scopedAudio, segments };
+  }
+
+  if (audio.mp3) {
+    scopedAudio.src = audio.mp3.url;
+    segments = audio.mp3.encryptedSegments;
+    return { audio: scopedAudio, segments };
   }
 
   return { audio: scopedAudio, segments };

src/redux/modules/audioplayer.js

@@ -239,13 +239,13 @@ export default function reducer(state = initialState, action = {}) {
     }
     case SET_CURRENT_WORD: {
       if (!action.word) return state;
-
-      const [surahId, ayahNum, word] = action.word.split(':');
       let currentTime = null;
-
-      if (state.files[surahId][`${surahId}:${ayahNum}`] === state.currentFile) {
+      const [surahId, ayahNum, word] = action.word.split(':');
+      const nextId = `${surahId}:${ayahNum}`;
+      if (!state.segments[surahId][nextId]) return state;
+      if (state.files[surahId][nextId] === state.currentFile) {
         // When the files are the same, set the current time to that word
-        currentTime = state.segments[surahId][`${surahId}:${ayahNum}`].words[word].startTime;
+        currentTime = state.segments[surahId][nextId].words[word].startTime;
         state.currentFile.currentTime = currentTime; // eslint-disable-line no-param-reassign
 
         return {
@@ -256,7 +256,6 @@ export default function reducer(state = initialState, action = {}) {
       }
 
       // When the files are not the same.
-      const nextId = `${surahId}:${ayahNum}`;
       const currentFile = state.files[surahId][nextId];
       const segment = buildSegments(state.segments[surahId][nextId]);
       currentTime = segment.words[word].startTime;

src/styles/partials/_tooltip.scss

@@ -1,9 +1,43 @@
-.tooltip{
-  font-size: 16px;
-  font-weight: 300;
-  @extend .montserrat;
+.Tooltip {
+  position: relative;
 
-  .tooltip-inner{
-    padding: 10px 15px;
+  &:after {
+    content: attr(aria-label);
+    direction: ltr;
+    padding: .625rem .9375rem;
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    transform: translate(-50%, 0);
+    font-family: Montserrat, sans-serif;
+    font-weight: 300;
+    font-size: 1.25rem;
+    line-height: 1.2;
+    background-color: $tooltip-bg;
+    color: #fff;
+    border-radius: 3px;
+    opacity: 0;
+  }
+
+  // The arrow
+  &:before {
+    content: '';
+    position: absolute;
+    left: 50%;
+    transform: translate(-50%, 0);
+    width: 0;
+    height: 0;
+    border-left: .75rem solid transparent;
+    border-right: .75rem solid transparent;
+    border-top: .75rem solid $tooltip-bg;
+    opacity: 0;
+  }
+
+
+  &:hover {
+    &:after,
+    &:before {
+      opacity: 1;
+    }
   }
 }