reciter change

src/components/Audioplayer/index.js

@@ -21,7 +21,6 @@ import Track from './Track';
 import Segments from './Segments';
 import ScrollButton from './ScrollButton';
 import RepeatButton from './RepeatButton';
-import Loader from './Loader';
 
 // Helpers
 import debug from '../../helpers/debug';
@@ -40,6 +39,7 @@ const style = require('./style.scss');
     isSupported: state.audioplayer.isSupported,
     isPlaying: state.audioplayer.isPlaying,
     isLoadedOnClient: state.audioplayer.isLoadedOnClient,
+    isLoading: state.audioplayer.isLoading,
     shouldRepeat: state.audioplayer.shouldRepeat,
     shouldScroll: state.audioplayer.shouldScroll,
     progress: state.audioplayer.progress,
@@ -73,6 +73,7 @@ export default class Audioplayer extends Component {
     isSupported: PropTypes.bool.isRequired,
     shouldRepeat: PropTypes.bool.isRequired,
     shouldScroll: PropTypes.bool.isRequired,
+    isLoading: PropTypes.bool.isRequired,
     setCurrentWord: PropTypes.func.isRequired,
     setCurrentFile: PropTypes.func.isRequired,
     start: PropTypes.func.isRequired,
@@ -242,7 +243,8 @@ export default class Audioplayer extends Component {
       file.currentTime = 0; // eslint-disable-line no-param-reassign
 
       return update({
-        duration: file.duration
+        duration: file.duration,
+        isLoading: false
       });
     };
 
@@ -355,6 +357,7 @@ export default class Audioplayer extends Component {
       className,
       currentFile,
       segments,
+      isLoading,
       currentAyah,
       currentWord,
       currentTime,
@@ -375,10 +378,10 @@ export default class Audioplayer extends Component {
       );
     }
 
-    if (!currentAyah) {
+    if (isLoading) {
       return (
         <li className={`${style.container} ${className}`}>
-          <Loader />
+          <div>Loading...</div>
         </li>
       );
     }

src/redux/modules/audioplayer.js

@@ -33,7 +33,8 @@ const initialState = {
   shouldRepeat: false,
   shouldScroll: false,
   isLoadedOnClient: false,
-  progress: 0
+  progress: 0,
+  isLoading: true
 };
 
 export default function reducer(state = initialState, action = {}) {
@@ -80,6 +81,7 @@ export default function reducer(state = initialState, action = {}) {
         isLoadedOnClient: false
       };
     case AYAHS_LOAD_SUCCESS: {
+      let currentFile;
       const isSupported = testIfSupported(
         action.result.entities.ayahs[action.result.result[0]],
         state.userAgent
@@ -94,13 +96,31 @@ export default function reducer(state = initialState, action = {}) {
 
       const ayahs = action.result.entities.ayahs;
       const audioFromHash = __CLIENT__ ? buildAudioFromHash(ayahs, state.userAgent) : ayahs;
+      const segments = Object.assign({}, state.segments[action.surahId], audioFromHash.segments);
       const files = Object.assign(
         {},
         state.files[action.surahId],
         __CLIENT__ ? audioFromHash.files : audioFromHash
       );
-      const segments = Object.assign({}, state.segments[action.surahId], audioFromHash.segments);
-      const currentFile = state.currentFile ? state.currentFile : Object.values(files)[0];
+
+      if (state.currentFile && state.currentFile === Object.values(files)[0]) {
+        // If the same file is being used, for example in lazy loading, then keep same file
+        currentFile = state.currentFile;
+      } else {
+        if (state.currentAyah) {
+          // If the user changes the reciter, we want to maintain the file where
+          // the user last left off
+          currentFile = files[state.currentAyah];
+        } else {
+          // Otherwise, just choose the first file
+          currentFile = Object.values(files)[0];
+        }
+      }
+
+      // const currentAyah = (state.currentAyah &&
+      //   state.currentAyah === Object.keys(files)[0]) ?
+      //   state.currentAyah :
+      //   Object.keys(files)[0];
       const currentAyah = state.currentAyah ? state.currentAyah : Object.keys(files)[0];
 
       return {

src/redux/modules/fontFaces.js

@@ -13,7 +13,9 @@ export default function reducer(state = {}, action = {}) {
       Object.keys(ayahs).forEach(ayahId => {
         const ayah = ayahs[ayahId];
 
-        classNames[`p${ayah.pageNum}`] = false;
+        if (!state[`p${ayah.pageNum}`]) {
+          classNames[`p${ayah.pageNum}`] = false;
+        }
       });
 
       return {