diff options
Diffstat (limited to 'animism-align/frontend/app/views/viewer/nav')
3 files changed, 93 insertions, 6 deletions
diff --git a/animism-align/frontend/app/views/viewer/nav/viewer.nav.js b/animism-align/frontend/app/views/viewer/nav/viewer.nav.js index 4200b03..a0a9a1a 100644 --- a/animism-align/frontend/app/views/viewer/nav/viewer.nav.js +++ b/animism-align/frontend/app/views/viewer/nav/viewer.nav.js @@ -16,10 +16,12 @@ class ViewerNav extends Component { <div className="viewer-nav"> <div className='nav-row main-nav'> <div> - <Arrow type={'up'} /> - {ROMAN_NUMERALS[0]} - {'. '} - {'Introduction'} + <span className="section-link link"> + <Arrow type={'up'} /> + {ROMAN_NUMERALS[0]} + {'. '} + {'Introduction'} + </span> </div> <div> <PlayButton /> @@ -27,8 +29,10 @@ class ViewerNav extends Component { <VolumeControl /> </div> <div> - Next - <Arrow type={'right'} /> + <span className="next-link link"> + Next + <Arrow type={'right'} /> + </span> </div> </div> </div> diff --git a/animism-align/frontend/app/views/viewer/nav/viewer.sections.js b/animism-align/frontend/app/views/viewer/nav/viewer.sections.js new file mode 100644 index 0000000..76402e8 --- /dev/null +++ b/animism-align/frontend/app/views/viewer/nav/viewer.sections.js @@ -0,0 +1,40 @@ +import React, { Component } from 'react' +// import { Link } from 'react-router-dom' +import { connect } from 'react-redux' + +import actions from 'app/actions' +import { Arrow } from './viewer.icons' +import ViewerSectionsNav from './viewer.sections.nav' +import { ROMAN_NUMERALS } from 'app/constants' +import { thumbnailURL } from 'app/views/align/align.util' + +class ViewerSections extends Component { + componentDidMount() { + } + + render() { + const { sections } = this.props + return ( + <div className="viewer-sections"> + {sections.map(section => { + console.log(section) + return ( + <div className="viewer-section" key={section.index}> + <div className="section-thumbnail" style={{ + backgroundImage: section.media.length && 'url(' + thumbnailURL(section.media[0]) + ')', + }}/> + {ROMAN_NUMERALS[section.index]}: {section.title} + </div> + ) + })} + <ViewerSectionsNav /> + </div> + ) + } +} + +const mapStateToProps = state => ({ + sections: state.viewer.sections, +}) + +export default connect(mapStateToProps)(ViewerSections) diff --git a/animism-align/frontend/app/views/viewer/nav/viewer.sections.nav.js b/animism-align/frontend/app/views/viewer/nav/viewer.sections.nav.js new file mode 100644 index 0000000..dcccfd5 --- /dev/null +++ b/animism-align/frontend/app/views/viewer/nav/viewer.sections.nav.js @@ -0,0 +1,43 @@ +import React, { Component } from 'react' +// import { Link } from 'react-router-dom' +import { connect } from 'react-redux' + +import actions from 'app/actions' +import { Arrow } from './viewer.icons' + +class ViewerSectionsNav extends Component { + componentDidMount() { + } + + render() { + const { } = this.props + return ( + <div className="viewer-nav"> + <div className='nav-row'> + <div> + <span className="share-link link"> + <Arrow type={'up'} /> + {'Share'} + </span> + </div> + <div> + <span className="checklist-link link"> + <Arrow type={'up'} /> + {'Checklist'} + </span> + </div> + <div> + <span className="transcript-link link"> + {'Transcript'} + </span> + </div> + </div> + </div> + ) + } +} + +const mapStateToProps = state => ({ +}) + +export default connect(mapStateToProps)(ViewerSectionsNav) |