Skip to content
This repository has been archived by the owner on Jun 28, 2021. It is now read-only.

Commit

Permalink
Reduce audio api calls (#807)
Browse files Browse the repository at this point in the history
  • Loading branch information
@mmahalwy @naveed-ahmad
mmahalwy authored and naveed-ahmad committed May 30, 2017
1 parent f80ad10 commit d0415e5
Show file tree
Hide file tree
Showing 3 changed files with 127 additions and 68 deletions.
125 changes: 88 additions & 37 deletions src/components/Audioplayer/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,16 +28,33 @@ const RepeatDropdown = Loadable({
});

export class Audioplayer extends Component {
state = {
loadingFile: false
};

componentDidMount() {
const { currentFile } = this.props; // eslint-disable-line no-shadow, max-len
const { currentFile, currentVerse, audio, verses, load } = this.props; // eslint-disable-line no-shadow, max-len
const nextVerse = verses[this.getNext()];

debug('component:Audioplayer', 'componentDidMount');

if (currentFile) {
return this.handleAddFileListeners(currentFile);
}

console.error('Audioplayer mounted but no file available');
load({
chapterId: currentVerse.chapterId,
verseId: currentVerse.id,
verseKey: currentVerse.verseKey,
audio
});

load({
chapterId: nextVerse.chapterId,
verseId: nextVerse.id,
verseKey: nextVerse.verseKey,
audio
});

return false;
}
Expand All @@ -58,19 +75,50 @@ export class Audioplayer extends Component {
}

// Change verse
if (this.props.currentVerse !== nextProps.currentVerse) {
if (this.props.currentVerse.verseKey !== nextProps.currentVerse.verseKey) {
if (this.props.currentFile) {
this.handleRemoveFileListeners(this.props.currentFile);
}

return this.handleAddFileListeners(nextProps.currentFile);
}

if (this.props.audio !== nextProps.audio) {
Object.keys(this.props.files).forEach(key =>
this.props.load({
chapterId: this.props.verses[key].chapterId,
verseId: this.props.verses[key].id,
verseKey: this.props.verses[key].verseKey,
audio: nextProps.audio
})
);
}

return false;
}

componentDidUpdate() {
const { currentFile, isPlaying } = this.props;
componentDidUpdate(previousProps) {
const {
currentFile,
isPlaying,
verses,
audio,
currentVerse,
load
} = this.props;

if (
currentVerse.verseKey !== previousProps.currentVerse.verseKey &&
verses[this.getNext()]
) {
const verse = verses[this.getNext()];
load({
chapterId: verse.chapterId,
verseId: verse.id,
verseKey: verse.verseKey,
audio
});
}

if (!currentFile) return false;

Expand All @@ -95,30 +143,28 @@ export class Audioplayer extends Component {
}

getPrevious() {
const { currentVerse, files } = this.props;
const ayahIds = Object.keys(files);
const index = ayahIds.findIndex(id => id === currentVerse);
const { currentVerse, verseIds } = this.props;
const index = verseIds.findIndex(id => id === currentVerse.verseKey);

return ayahIds[index - 1];
return verseIds[index - 1];
}

getNext() {
const { currentVerse, chapter, files, onLoadAyahs } = this.props;
const ayahIds = Object.keys(files);
const ayahNum = currentVerse.split(':')[1];
const index = ayahIds.findIndex(id => id === currentVerse);
const { currentVerse, chapter, onLoadAyahs, verseIds } = this.props;
const ayahNum = currentVerse.verseKey.split(':')[1];
const index = verseIds.findIndex(id => id === currentVerse.verseKey);

if (chapter.versesCount === ayahNum + 1) {
// We are at the end of the chapter!
return false;
}

if (ayahIds.length - 3 <= index + 1) {
if (verseIds.length - 3 <= index + 1) {
// Need to load the next set of ayahs!
onLoadAyahs();
}

return ayahIds[index + 1];
return verseIds[index + 1];
}

handleAyahChange = (direction = 'next') => {
Expand All @@ -130,7 +176,7 @@ export class Audioplayer extends Component {
const nextVerse = this[camelize(`get_${direction}`)]();
if (!nextVerse) return pause();

this.props[direction](currentVerse);
this.props[direction](currentVerse.verseKey);

this.handleScrollTo(nextVerse);

Expand All @@ -141,7 +187,7 @@ export class Audioplayer extends Component {
return false;
};

scrollToVerse = (ayahNum = this.props.currentVerse) => {
scrollToVerse = (ayahNum = this.props.currentVerse.verseKey) => {
scroller.scrollTo(`verse:${ayahNum}`, -45);
};

Expand All @@ -163,7 +209,7 @@ export class Audioplayer extends Component {
preloadNext() {
const { currentVerse, files } = this.props;
const ayahIds = Object.keys(files);
const index = ayahIds.findIndex(id => id === currentVerse) + 1;
const index = ayahIds.findIndex(id => id === currentVerse.verseKey) + 1;

for (let id = index; id <= index + 2; id += 1) {
if (ayahIds[id]) {
Expand All @@ -183,7 +229,7 @@ export class Audioplayer extends Component {
setRepeat, // eslint-disable-line no-shadow
setAyah // eslint-disable-line no-shadow
} = this.props;
const [chapter, ayah] = currentVerse
const [chapter, ayah] = currentVerse.verseKey
.split(':')
.map(val => parseInt(val, 10));

Expand Down Expand Up @@ -244,7 +290,7 @@ export class Audioplayer extends Component {

if (!shouldScroll) {
// we use the inverse (!) here because we're toggling, so false is true
this.scrollToVerse(currentVerse);
this.scrollToVerse(currentVerse.verseKey);
}

this.props.toggleScroll();
Expand All @@ -254,16 +300,16 @@ export class Audioplayer extends Component {
// NOTE: if no file, just wait.
if (!file) return false;

const { update, currentTime } = this.props; // eslint-disable-line no-shadow
const { update } = this.props; // eslint-disable-line no-shadow
debug('component:Audioplayer', `Attaching listeners to ${file.src}`);

// Preload file
file.setAttribute('preload', 'auto');

const onLoadeddata = () => {
// Default current time to zero. This will change
file.currentTime = // eslint-disable-line no-param-reassign
file.currentTime || currentTime || 0;
file.currentTime = 0; // eslint-disable-line
// file.currentTime || currentTime || 0;

return update({
duration: file.duration,
Expand Down Expand Up @@ -345,7 +391,9 @@ export class Audioplayer extends Component {
renderPreviousButton() {
const { currentVerse, files } = this.props;
if (!files) return false;
const index = Object.keys(files).findIndex(id => id === currentVerse);
const index = Object.keys(files).findIndex(
id => id === currentVerse.verseKey
);

return (
<a
Expand All @@ -362,7 +410,7 @@ export class Audioplayer extends Component {
const { chapter, currentVerse } = this.props;
if (!chapter) return false;
const isEnd =
chapter.versesCount === parseInt(currentVerse.split(':')[1], 10);
chapter.versesCount === parseInt(currentVerse.verseKey.split(':')[1], 10);

return (
<a
Expand Down Expand Up @@ -417,10 +465,10 @@ export class Audioplayer extends Component {
onTrackChange={this.handleTrackChange}
/>}
{segments &&
segments[currentVerse] &&
segments[currentVerse.verseKey] &&
<Segments
segments={segments[currentVerse]}
currentVerse={currentVerse}
segments={segments[currentVerse.verseKey]}
currentVerse={currentVerse.verseKey}
currentTime={currentTime}
/>}
</div>
Expand All @@ -432,7 +480,7 @@ export class Audioplayer extends Component {
/>
:
{' '}
{currentVerse.split(':')[1]}
{currentVerse.verseKey.split(':')[1]}
</li>
<li className={style.controlItem}>
{this.renderPreviousButton()}
Expand All @@ -447,7 +495,7 @@ export class Audioplayer extends Component {
<RepeatDropdown
repeat={repeat}
setRepeat={setRepeat}
current={parseInt(currentVerse.split(':')[1], 10)}
current={parseInt(currentVerse.verseKey.split(':')[1], 10)}
chapter={chapter}
/>
</li>
Expand All @@ -464,22 +512,22 @@ export class Audioplayer extends Component {
}

const mapStateToProps = (state, ownProps) => {
const currentVerse =
state.audioplayer.currentVerse || ownProps.startVerse.verseKey;
const files = state.audioplayer.files[ownProps.chapter.id];
const verseIds = Object.keys(ownProps.verses);

return {
files,
currentVerse,
verseIds,
segments: state.audioplayer.segments[ownProps.chapter.id],
currentFile: files[currentVerse],
currentFile: files[ownProps.currentVerse.verseKey],
chapterId: ownProps.chapter.id,
isPlaying: state.audioplayer.isPlaying,
isLoading: state.audioplayer.isLoading,
repeat: state.audioplayer.repeat,
shouldScroll: state.audioplayer.shouldScroll,
duration: state.audioplayer.duration,
currentTime: state.audioplayer.currentTime
currentTime: state.audioplayer.currentTime,
audio: state.options.audio
};
};

Expand All @@ -490,7 +538,7 @@ Audioplayer.propTypes = {
segments: customPropTypes.segments,
// NOTE: should be PropTypes.instanceOf(Audio) but not on server.
files: PropTypes.object, // eslint-disable-line
currentVerse: PropTypes.string,
currentVerse: PropTypes.verseType,
isLoading: PropTypes.bool.isRequired,
play: PropTypes.func.isRequired,
pause: PropTypes.func.isRequired,
Expand All @@ -505,9 +553,12 @@ Audioplayer.propTypes = {
isPlaying: PropTypes.bool,
currentTime: PropTypes.number,
duration: PropTypes.number,
load: PropTypes.func.isRequired,
// NOTE: should be PropTypes.instanceOf(Audio) but not on server.
currentFile: PropTypes.any, // eslint-disable-line
startVerse: customPropTypes.verseType // eslint-disable-line
audio: PropTypes.number.isRequired,
verses: customPropTypes.verses,
verseIds: PropTypes.object // eslint-disable-line
};

export default connect(mapStateToProps, AudioActions)(Audioplayer);
68 changes: 38 additions & 30 deletions src/containers/Surah/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,34 +79,34 @@ class Surah extends Component {
return false;
}

componentDidMount() {
const { verses, options: { audio } } = this.props;

Object.values(verses).forEach((verse) => {
this.props.actions.audio.load({
chapterId: verse.chapterId,
verseId: verse.id,
verseKey: verse.verseKey,
audio
});
});
}

// TODO: Should this belong here?
componentWillReceiveProps(nextProps) {
if (this.props.options.audio !== nextProps.options.audio) {
const { verses, options: { audio } } = nextProps;

Object.values(verses).forEach((verse) => {
this.props.actions.audio.load({
chapterId: verse.chapterId,
verseId: verse.id,
verseKey: verse.verseKey,
audio
});
});
}
}
// componentDidMount() {
// const { verses, options: { audio } } = this.props;

// Object.values(verses).forEach((verse) => {
// this.props.actions.audio.load({
// chapterId: verse.chapterId,
// verseId: verse.id,
// verseKey: verse.verseKey,
// audio
// });
// });
// }

// // TODO: Should this belong here?
// componentWillReceiveProps(nextProps) {
// if (this.props.options.audio !== nextProps.options.audio) {
// const { verses, options: { audio } } = nextProps;

// Object.values(verses).forEach((verse) => {
// this.props.actions.audio.load({
// chapterId: verse.chapterId,
// verseId: verse.id,
// verseKey: verse.verseKey,
// audio
// });
// });
// }
// }

shouldComponentUpdate(nextProps, nextState) {
const conditions = [
Expand Down Expand Up @@ -360,7 +360,14 @@ class Surah extends Component {
}

render() {
const { chapter, verses, options, info, actions } = this.props; // eslint-disable-line no-shadow
const {
chapter,
verses,
options,
info,
actions,
currentVerse
} = this.props; // eslint-disable-line no-shadow
debug('component:Surah', 'Render');

if (!this.hasVerses()) {
Expand Down Expand Up @@ -430,7 +437,8 @@ class Surah extends Component {
{__CLIENT__ &&
<Audioplayer
chapter={chapter}
startVerse={Object.values(verses)[0]}
verses={verses}
currentVerse={verses[currentVerse]}
onLoadAyahs={this.handleLazyLoadAyahs}
/>}
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/redux/actions/audioplayer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,5 +116,5 @@ export function load({ chapterId, verseId, verseKey, audio }) {
}

export function isLoaded(files, verse) {
return files[verse.chapterId][verse.verseKey];
return files[verse.verseKey];
}

0 comments on commit d0415e5

Please sign in to comment.