diff --git a/src/components/Audioplayer/Segments/index.js b/src/components/Audioplayer/Segments/index.js index 90b210a48..80a4c0139 100644 --- a/src/components/Audioplayer/Segments/index.js +++ b/src/components/Audioplayer/Segments/index.js @@ -4,7 +4,6 @@ import Helmet from 'react-helmet'; import debug from 'helpers/debug'; class Segments extends Component { - shouldComponentUpdate(nextProps) { return [ this.props.currentVerse !== nextProps.currentVerse, diff --git a/src/components/Audioplayer/index.js b/src/components/Audioplayer/index.js index a12dccf51..cfac5abd2 100644 --- a/src/components/Audioplayer/index.js +++ b/src/components/Audioplayer/index.js @@ -52,8 +52,8 @@ export class Audioplayer extends Component { return false; } - // When you go directly to the chapter page, /2, the files are not loaded yet - if (this.props.isLoadedOnClient !== nextProps.isLoadedOnClient) { + // First load + if (this.props.currentFile !== nextProps.currentFile) { return this.handleAddFileListeners(nextProps.currentFile); } @@ -384,7 +384,6 @@ export class Audioplayer extends Component { duration, chapter, isPlaying, - isLoadedOnClient, repeat, // eslint-disable-line no-shadow shouldScroll, // eslint-disable-line no-shadow setRepeat // eslint-disable-line no-shadow @@ -406,15 +405,15 @@ export class Audioplayer extends Component { return (
- {isLoadedOnClient ? + { + currentFile && : null} + /> + } { - isLoadedOnClient && segments && - segments[currentVerse] && segments[currentVerse] && this.handleOptionSelected(translation.id)} > - {render(translation)} + {render(translation)} ); diff --git a/src/components/ReciterDropdown/index.js b/src/components/ReciterDropdown/index.js index 31cd3163a..b6e407407 100644 --- a/src/components/ReciterDropdown/index.js +++ b/src/components/ReciterDropdown/index.js @@ -27,11 +27,13 @@ class ReciterDropdown extends Component { > onOptionChange({ audio: slug.id })} > - {slug.reciterNameEng} {slug.style ? `(${slug.style})` : ''} + + {slug.reciterNameEng} {slug.style ? `(${slug.style})` : ''} + )); diff --git a/src/components/Verse/index.js b/src/components/Verse/index.js index 7a6a004e5..d68af8483 100644 --- a/src/components/Verse/index.js +++ b/src/components/Verse/index.js @@ -24,7 +24,6 @@ const Share = Loadable({ }); class Verse extends Component { - // TODO: Should this belong here? componentDidMount() { const { verse, audio } = this.props; @@ -145,7 +144,7 @@ class Verse extends Component { tooltip={tooltip} isPlaying={isPlaying} audioActions={audioActions} - audioPosition={word.wordId ? wordAudioPosition += 1 : null} + audioPosition={word.charType === 'word' ? wordAudioPosition += 1 : null} isSearched={isSearched} useTextFont={renderText} /> @@ -316,7 +315,7 @@ Verse.propTypes = { currentWord: PropTypes.number, // gets passed in an integer, null by default iscurrentVerse: PropTypes.bool, currentVerse: PropTypes.string, - userAgent: PropTypes.func, + userAgent: PropTypes.object, // eslint-disable-line audio: PropTypes.number.isRequired, loadAudio: PropTypes.func.isRequired }; diff --git a/src/components/Verse/style.scss b/src/components/Verse/style.scss index 1db6feccd..46fcad6c4 100644 --- a/src/components/Verse/style.scss +++ b/src/components/Verse/style.scss @@ -29,9 +29,10 @@ display: block; text-decoration: none; font-size: 12px; + cursor: pointer; - &:hover{ - cursor: pointer; + &:focus{ + color: $text-muted; } } .label{ @@ -142,4 +143,3 @@ width: 100%; margin: 0px auto; } - diff --git a/src/components/Word/index.js b/src/components/Word/index.js index 2c496209f..3d501631d 100644 --- a/src/components/Word/index.js +++ b/src/components/Word/index.js @@ -10,7 +10,6 @@ const CHAR_TYPE_RUB = 'rub'; const CHAR_TYPE_SAJDAH = 'sajdah'; class Word extends Component { - buildTooltip = (word, tooltip) => { let title; @@ -57,7 +56,7 @@ class Word extends Component { let spacer; const highlight = currentVerse === word.verseKey && isPlaying ? 'highlight' : ''; const className = `${useTextFont ? 'text-' : ''}${word.charType === CHAR_TYPE_WORD ? word.className : 'p0'} ${word.charType} ${highlight} ${word.highlight ? word.highlight : ''}`; - const id = `word-${word.verseKey.replace(/:/, '-')}-${audioPosition || word.position}`; + const id = `word-${word.verseKey.replace(/:/, '-')}-${audioPosition}`; if (word.charType === CHAR_TYPE_END) { text = zeroPad(word.verseKey.split(':')[1], 3, 0); @@ -94,7 +93,7 @@ Word.propTypes = { tooltip: PropTypes.string, audioActions: PropTypes.object.isRequired, // eslint-disable-line audioPosition: PropTypes.number, - currentVerse: PropTypes.string.isRequired, + currentVerse: PropTypes.string, isPlaying: PropTypes.bool, isSearched: PropTypes.bool, useTextFont: PropTypes.bool // tmp change to compare text and code based rendering diff --git a/src/containers/Search/index.js b/src/containers/Search/index.js index c83efa6a7..16ce18edb 100644 --- a/src/containers/Search/index.js +++ b/src/containers/Search/index.js @@ -130,6 +130,7 @@ class Search extends Component { match={entities[result].match} key={entities[result].verseKey} tooltip={options.tooltip} + userAgent={options.userAgent} isSearched /> ));