Separating audio files from verses api (#721)

* Separating audio files from verses api

* change reciter

* remove dependency on audio from verses route

src/components/Audioplayer/index.js

@@ -11,7 +11,7 @@ import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
 import debug from 'helpers/debug';
 import scroller from 'utils/scroller';
 
-import { surahType, segmentType } from 'types';
+import { surahType, segmentType, verseType } from 'types';
 
 // Redux
 import * as AudioActions from 'redux/actions/audioplayer';
@@ -58,7 +58,8 @@ export class Audioplayer extends Component {
     currentTime: PropTypes.number,
     duration: PropTypes.number,
     // NOTE: should be PropTypes.instanceOf(Audio) but not on server.
-    currentFile: PropTypes.any // eslint-disable-line
+    currentFile: PropTypes.any, // eslint-disable-line
+    startVerse: verseType // eslint-disable-line
   };
 
   componentDidMount() {
@@ -103,6 +104,20 @@ export class Audioplayer extends Component {
     return false;
   }
 
+  componentDidUpdate() {
+    const { currentFile, isPlaying } = this.props;
+
+    if (!currentFile) return false;
+
+    if (isPlaying) {
+      currentFile.play();
+    } else {
+      currentFile.pause();
+    }
+
+    return false;
+  }
+
   componentWillUnmount() {
     const { files, currentFile } = this.props;
     debug('component:Audioplayer', 'componentWillUnmount');
@@ -398,6 +413,7 @@ export class Audioplayer extends Component {
       segments,
       isLoading,
       currentVerse,
+      currentFile,
       currentTime,
       duration,
       chapter,
@@ -408,7 +424,7 @@ export class Audioplayer extends Component {
       setRepeat // eslint-disable-line no-shadow
     } = this.props;
 
-    if (isLoading || !currentVerse) {
+    if (isLoading || !currentFile) {
       return (
         <li className={`${style.container} ${className}`}>
           <div>
@@ -474,19 +490,24 @@ export class Audioplayer extends Component {
   }
 }
 
-const mapStateToProps = (state, ownProps) => ({
-  files: state.audioplayer.files[ownProps.chapter.chapterNumber],
-  segments: state.audioplayer.segments[ownProps.chapter.chapterNumber],
-  currentFile: state.audioplayer.currentFile,
-  currentVerse: state.audioplayer.currentVerse,
-  chapterId: state.audioplayer.chapterId,
-  isPlaying: state.audioplayer.isPlaying,
-  isLoadedOnClient: state.audioplayer.isLoadedOnClient,
-  isLoading: state.audioplayer.isLoading,
-  repeat: state.audioplayer.repeat,
-  shouldScroll: state.audioplayer.shouldScroll,
-  duration: state.audioplayer.duration,
-  currentTime: state.audioplayer.currentTime,
-});
+const mapStateToProps = (state, ownProps) => {
+  const currentVerse = state.audioplayer.currentVerse || ownProps.startVerse.verseKey;
+  const files = state.audioplayer.files[ownProps.chapter.id];
+
+  return {
+    files,
+    currentVerse,
+    segments: state.audioplayer.segments[ownProps.chapter.id],
+    currentFile: files[currentVerse],
+    chapterId: ownProps.chapter.id,
+    isPlaying: state.audioplayer.isPlaying,
+    isLoadedOnClient: state.audioplayer.isLoadedOnClient,
+    isLoading: state.audioplayer.isLoading,
+    repeat: state.audioplayer.repeat,
+    shouldScroll: state.audioplayer.shouldScroll,
+    duration: state.audioplayer.duration,
+    currentTime: state.audioplayer.currentTime,
+  };
+};
 
 export default connect(mapStateToProps, AudioActions)(Audioplayer);

src/components/Verse/index.js

@@ -5,6 +5,7 @@ import { connect } from 'react-redux';
 import Loadable from 'react-loadable';
 
 import { verseType, matchType, surahType } from 'types';
+import { load as loadAudio } from 'redux/actions/audioplayer';
 import ComponentLoader from 'components/ComponentLoader';
 import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
 import Word from 'components/Word';
@@ -52,7 +53,9 @@ class Verse extends Component {
     currentWord: PropTypes.number, // gets passed in an integer, null by default
     iscurrentVerse: PropTypes.bool,
     currentVerse: PropTypes.string,
-    userAgent: PropTypes.func
+    userAgent: PropTypes.func,
+    audio: PropTypes.number.isRequired,
+    loadAudio: PropTypes.func.isRequired
   };
 
 
@@ -61,6 +64,32 @@ class Verse extends Component {
     isSearched: false
   };
 
+  // TODO: Should this belong here?
+  componentDidMount() {
+    const { verse, audio } = this.props;
+
+    this.props.loadAudio({
+      chapterId: verse.chapterId,
+      verseId: verse.id,
+      verseKey: verse.verseKey,
+      audio
+    });
+  }
+
+  // TODO: Should this belong here?
+  componentWillReceiveProps(nextProps) {
+    if (this.props.audio !== nextProps.audio) {
+      const { verse, audio } = nextProps;
+
+      this.props.loadAudio({
+        chapterId: verse.chapterId,
+        verseId: verse.id,
+        verseKey: verse.verseKey,
+        audio
+      });
+    }
+  }
+
   shouldComponentUpdate(nextProps) {
     const conditions = [
       this.props.verse !== nextProps.verse,
@@ -311,6 +340,4 @@ class Verse extends Component {
   }
 }
 
-export default connect(state => ({
-  userAgent: state.options.userAgent
-}))(Verse);
+export default connect(() => ({}), { loadAudio })(Verse);

src/containers/Surah/index.js

@@ -328,6 +328,8 @@ class Surah extends Component {
         isPlaying={isPlaying}
         isAuthenticated={isAuthenticated}
         key={`${verse.chapterId}-${verse.id}-verse`}
+        userAgent={options.userAgent}
+        audio={options.audio}
       />
     ));
   }
@@ -349,7 +351,7 @@ class Surah extends Component {
   }
 
   render() {
-    const { chapter, options, actions } = this.props; // eslint-disable-line no-shadow
+    const { chapter, verses, options, actions } = this.props; // eslint-disable-line no-shadow
     debug('component:Surah', 'Render');
 
     if (!this.hasAyahs()) return <div className={style.container} style={{ margin: '50px auto' }}>{this.renderNoAyah()}</div>;
@@ -409,6 +411,7 @@ class Surah extends Component {
         </div>
         <Audioplayer
           chapter={chapter}
+          startVerse={Object.values(verses)[0]}
           onLoadAyahs={this.handleLazyLoadAyahs}
         />
       </div>

src/helpers/buildAudio.js

@@ -4,15 +4,10 @@ export function buildAudioForAyah(audio) {
   let segments = null;
 
   scopedAudio.preload = 'none';
+
   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;
+    segments = audio.segments;
     return { audio: scopedAudio, segments };
   }
 

src/redux/actions/audioplayer.js

@@ -10,6 +10,9 @@ import {
   SET_REPEAT,
   TOGGLE_SCROLL,
   BUILD_ON_CLIENT,
+  LOAD,
+  LOAD_SUCCESS,
+  LOAD_FAIL,
   UPDATE } from 'redux/constants/audioplayer.js';
 
 export function setCurrentFile(file) {
@@ -92,3 +95,16 @@ export function update(payload) {
     payload
   };
 }
+
+export function load({ chapterId, verseId, verseKey, audio }) { // eslint-disable-line
+  return {
+    types: [LOAD, LOAD_SUCCESS, LOAD_FAIL],
+    promise: client => client.get(`/api/v3/chapters/${chapterId}/verses/${verseId}/audio_files`, {
+      params: {
+        recitation: audio || 8 // NOTE: default, but should never be used
+      }
+    }),
+    verseKey,
+    chapterId
+  };
+}

src/redux/actions/verses.js

@@ -12,15 +12,14 @@ import {
 
 // NOTE: For safe measure
 const defaultOptions = {
-  audio: 8,
   translations: [20]
 };
 
 // NOTE: From the API!
 const perPage = 10;
 
 export function load(id, paging, options = defaultOptions) {
-  const { audio, translations } = options;
+  const { translations } = options;
 
   // TODO: move this to module/verses
   // cookie.save('lastVisit', JSON.stringify({ chapterId: id, verseId: from }));
@@ -31,7 +30,6 @@ export function load(id, paging, options = defaultOptions) {
     promise: client => client.get(`/api/v3/chapters/${id}/verses`, {
       params: {
         ...paging,
-        recitation: audio,
         translations
       }
     }),

src/redux/constants/audioplayer.js

@@ -10,4 +10,6 @@ export const SET_REPEAT = '@@quran/audioplayer/SET_REPEAT';
 export const TOGGLE_SCROLL = '@@quran/audioplayer/TOGGLE_SCROLL';
 export const BUILD_ON_CLIENT = '@@quran/audioplayer/BUILD_ON_CLIENT';
 export const UPDATE = '@@quran/audioplayer/UPDATE';
-
+export const LOAD = '@@quran/audioplayer/LOAD';
+export const LOAD_SUCCESS = '@@quran/audioplayer/LOAD_SUCCESS';
+export const LOAD_FAIL = '@@quran/audioplayer/LOAD_FAIL';