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

Reduce audio api calls #807

Merged
merged 2 commits into from
May 30, 2017
Merged

Reduce audio api calls #807

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
420356c
Reduce audio api calls
mmahalwy May 28, 2017
a48dba9
Merge branch 'master' into reduce-audio-api
mmahalwy May 30, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
125 changes: 88 additions & 37 deletions src/components/Audioplayer/index.js
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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];
}