From 9242ca075861f5490645a199ca6872b4d8823bee Mon Sep 17 00:00:00 2001 From: Mohamed El Mahallawy Date: Thu, 22 Dec 2016 08:53:55 +0200 Subject: [PATCH 1/3] Use new segments and surah info data --- .../Audioplayer/RepeatDropdown/index.js | 2 +- src/components/Audioplayer/Segments/index.js | 2 - src/components/Audioplayer/index.js | 27 ++++------- src/components/Ayah/index.js | 15 ++++--- src/components/SurahInfo/index.js | 17 +++++-- src/components/SurahInfo/style.scss | 2 +- src/components/TopOptions/index.js | 2 +- src/containers/Surah/index.js | 13 +++--- src/helpers/buildSegments.js | 39 ++++------------ src/redux/actions/surahs.js | 45 ++++++++----------- src/redux/modules/audioplayer.js | 14 ------ src/redux/modules/surahs.js | 23 +++++++++- src/styles/main.scss | 1 - 13 files changed, 91 insertions(+), 111 deletions(-) diff --git a/src/components/Audioplayer/RepeatDropdown/index.js b/src/components/Audioplayer/RepeatDropdown/index.js index 345d32ddf..3f222830f 100644 --- a/src/components/Audioplayer/RepeatDropdown/index.js +++ b/src/components/Audioplayer/RepeatDropdown/index.js @@ -225,7 +225,7 @@ export default class RepeatButton extends Component {
diff --git a/src/components/Audioplayer/Segments/index.js b/src/components/Audioplayer/Segments/index.js index 38ca53d6f..0238c003f 100644 --- a/src/components/Audioplayer/Segments/index.js +++ b/src/components/Audioplayer/Segments/index.js @@ -5,7 +5,6 @@ import debug from 'helpers/debug'; export default class Segments extends Component { static propTypes = { - audio: PropTypes.object, segments: PropTypes.object.isRequired, currentAyah: PropTypes.string, currentTime: PropTypes.number @@ -13,7 +12,6 @@ export default class Segments extends Component { shouldComponentUpdate(nextProps) { return [ - this.props.audio !== nextProps.audio, this.props.currentAyah !== nextProps.currentAyah, this.props.currentTime !== nextProps.currentTime, ].some(test => test); diff --git a/src/components/Audioplayer/index.js b/src/components/Audioplayer/index.js index ae6c40fd7..6ecea05dc 100644 --- a/src/components/Audioplayer/index.js +++ b/src/components/Audioplayer/index.js @@ -1,3 +1,4 @@ +// TODO: This file is too too large. import React, { Component, PropTypes } from 'react'; import { connect } from 'react-redux'; import { camelize } from 'humps'; @@ -252,7 +253,7 @@ export class Audioplayer extends Component { handleAddFileListeners(file) { const { update, currentTime } = this.props; // eslint-disable-line no-shadow - console.log('component:Audioplayer', `Attaching listeners to ${file.src}`); + debug('component:Audioplayer', `Attaching listeners to ${file.src}`); // Preload file file.setAttribute('preload', 'auto'); @@ -298,14 +299,10 @@ export class Audioplayer extends Component { file.ontimeupdate = null; // eslint-disable-line no-param-reassign }; - const onProgress = () => { - }; - file.onloadeddata = onLoadeddata; // eslint-disable-line no-param-reassign file.onpause = onPause; // eslint-disable-line no-param-reassign file.onplay = onPlay; // eslint-disable-line no-param-reassign file.onended = onEnded; // eslint-disable-line no-param-reassign - file.onprogress = onProgress; // eslint-disable-line no-param-reassign return file; } @@ -334,15 +331,12 @@ export class Audioplayer extends Component { renderPlayStopButtons() { const { isPlaying, pause } = this.props; // eslint-disable-line no-shadow - let icon = ; - - if (isPlaying) { - icon = ; - } - return ( - - {icon} + + ); } @@ -382,7 +376,6 @@ export class Audioplayer extends Component { const { className, - currentFile, segments, isLoading, currentAyah, @@ -416,14 +409,12 @@ export class Audioplayer extends Component { isLoadedOnClient && segments && segments[currentAyah] && - typeof segments[currentAyah] !== 'string' ? + segments[currentAyah] && : - null + /> }
    diff --git a/src/components/Ayah/index.js b/src/components/Ayah/index.js index 59de9c026..e6f4125de 100644 --- a/src/components/Ayah/index.js +++ b/src/components/Ayah/index.js @@ -31,7 +31,7 @@ export default class Ayah extends Component { isAuthenticated: PropTypes.bool, tooltip: PropTypes.string, currentWord: PropTypes.any, // gets passed in an integer, null by default - currentAyah: PropTypes.string, + isCurrentAyah: PropTypes.bool, audioActions: PropTypes.object.isRequired }; @@ -50,7 +50,7 @@ export default class Ayah extends Component { this.props.bookmarked !== nextProps.bookmarked, this.props.tooltip !== nextProps.tooltip, this.props.currentWord !== nextProps.currentWord, - this.props.currentAyah !== nextProps.currentAyah + this.props.isCurrentAyah !== nextProps.isCurrentAyah ]; if (this.props.match) { @@ -285,7 +285,8 @@ export default class Ayah extends Component { data-metrics-event-name="Ayah:Link" > {content} - ); + + ); } renderControls() { @@ -300,12 +301,14 @@ export default class Ayah extends Component { } render() { - const { ayah, currentAyah } = this.props; - const className = ayah.ayahKey === currentAyah ? 'highlight' : ''; + const { ayah, isCurrentAyah } = this.props; debug('component:Ayah', `Render ${this.props.ayah.ayahNum}`); return ( - + {this.renderControls()}
    {this.renderText()} diff --git a/src/components/SurahInfo/index.js b/src/components/SurahInfo/index.js index d197061c2..6d23a70ce 100644 --- a/src/components/SurahInfo/index.js +++ b/src/components/SurahInfo/index.js @@ -3,13 +3,21 @@ import React, { PropTypes } from 'react'; import Row from 'react-bootstrap/lib/Row'; import Col from 'react-bootstrap/lib/Col'; +import Loader from 'components/Loader'; + const style = require('./style.scss'); -const SurahInfo = ({ surah, isShowingSurahInfo, onClose }) => { +const SurahInfo = ({ surah, isShowingSurahInfo, onClose, loadInfo }) => { // So we don't need to load images and files unless needed if (!isShowingSurahInfo) return