diff options
| -rw-r--r-- | animism-align/frontend/app/views/viewer/nav/nav.parent.js | 22 |
1 files changed, 20 insertions, 2 deletions
diff --git a/animism-align/frontend/app/views/viewer/nav/nav.parent.js b/animism-align/frontend/app/views/viewer/nav/nav.parent.js index 467907d..33f2d58 100644 --- a/animism-align/frontend/app/views/viewer/nav/nav.parent.js +++ b/animism-align/frontend/app/views/viewer/nav/nav.parent.js @@ -13,6 +13,7 @@ class NavParent extends Component { hoveringNext: false, hoveringNav: false, suppressHover: false, + thumbnailMediaURL: "", } constructor(props){ super(props) @@ -25,8 +26,24 @@ class NavParent extends Component { this.handleNavBarClick = this.handleNavBarClick.bind(this) this.handleSectionLinkClick = this.handleSectionLinkClick.bind(this) this.handleSectionLinkTextClick = this.handleSectionLinkTextClick.bind(this) + this.updateThumbnail = this.updateThumbnail.bind(this) this.goToNextSection = this.goToNextSection.bind(this) } + componentDidMount() { + clearTimeout(this.thumbnailLoadTimeout) + this.thumbnailLoadTimeout = setTimeout(this.updateThumbnail, 200) + } + componentDidUpdate(prevProps){ + if (prevProps.nextSection !== this.props.nextSection) { + clearTimeout(this.thumbnailLoadTimeout) + this.thumbnailLoadTimeout = setTimeout(this.updateThumbnail, 200) + } + } + updateThumbnail() { + if (this.props.nextSection && this.props.nextSection.media.length) { + this.setState({ thumbnailMediaURL: thumbnailURL(this.props.nextSection.media[0].media) }) + } + } handleMouseEnter(){ // console.log('mouse enter') if (this.state.suppressHover) return @@ -94,6 +111,7 @@ class NavParent extends Component { } render() { const { viewer, currentSection, play_ts, started, playing } = this.props + const { thumbnailMediaURL } = this.state let containerClassName = "viewer-nav " + viewer.navStyle let navClassName = 'nav-row main-nav' if (this.state.hoveringNav || !started) containerClassName += ' hovering-nav' @@ -143,8 +161,7 @@ class NavParent extends Component { onClick={this.goToNextSection} style={{ backgroundImage: ( - viewer.nextSection.media.length - && 'url(' + thumbnailURL(viewer.nextSection.media[0].media) + ')' + thumbnailMediaURL && 'url(' + thumbnailMediaURL + ')' ), }} /> @@ -157,6 +174,7 @@ class NavParent extends Component { const mapStateToProps = state => ({ viewer: state.viewer, currentSection: state.viewer.currentSection, + nextSection: state.viewer.nextSection, started: state.audio.started, playing: state.audio.playing, play_ts: state.audio.play_ts, |