diff options
Diffstat (limited to 'animism-align/frontend/app/views/viewer/sections')
3 files changed, 124 insertions, 0 deletions
diff --git a/animism-align/frontend/app/views/viewer/sections/sections.css b/animism-align/frontend/app/views/viewer/sections/sections.css new file mode 100644 index 0000000..9243cd5 --- /dev/null +++ b/animism-align/frontend/app/views/viewer/sections/sections.css @@ -0,0 +1,34 @@ +/* Viewer sections */ + +.viewer-sections { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + background: black; + color: white; + display: block; + white-space: nowrap; +} +.viewer-sections .viewer-section { + display: inline-flex; + white-space: normal; + width: 12rem; + margin: 1rem 0 1rem 1rem; + font-size: 16px; +} +.viewer-section > div { + height: 20rem; +} +.viewer-sections .section-thumbnail { + display: block; + border-radius: 1rem; + width: 12rem; + height: 8rem; + margin-bottom: 0.5rem; + background-size: cover; + background-position: center center; +} +.viewer-sections .section-media { + font-size: 14px; +}
\ No newline at end of file diff --git a/animism-align/frontend/app/views/viewer/sections/viewer.sections.js b/animism-align/frontend/app/views/viewer/sections/viewer.sections.js new file mode 100644 index 0000000..c4681b8 --- /dev/null +++ b/animism-align/frontend/app/views/viewer/sections/viewer.sections.js @@ -0,0 +1,47 @@ +import React, { Component } from 'react' +// import { Link } from 'react-router-dom' +import { connect } from 'react-redux' + +import actions from 'app/actions' +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> + <div className="section-thumbnail" style={{ + backgroundImage: section.media.length && 'url(' + thumbnailURL(section.media[0]) + ')', + }}/> + <div className="section-title"> + {ROMAN_NUMERALS[section.index]}<br /> + {section.title} + </div> + <div className="section-media"> + {section.media.map(media => media.type).join(', ')} + </div> + </div> + </div> + ) + })} + <ViewerSectionsNav /> + </div> + ) + } +} + +const mapStateToProps = state => ({ + sections: state.viewer.sections, +}) + +export default connect(mapStateToProps)(ViewerSections) diff --git a/animism-align/frontend/app/views/viewer/sections/viewer.sections.nav.js b/animism-align/frontend/app/views/viewer/sections/viewer.sections.nav.js new file mode 100644 index 0000000..a619d81 --- /dev/null +++ b/animism-align/frontend/app/views/viewer/sections/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 '../nav/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" onClick={() => actions.viewer.showSection('transcript')}> + {'Transcript'} + </span> + </div> + </div> + </div> + ) + } +} + +const mapStateToProps = state => ({ +}) + +export default connect(mapStateToProps)(ViewerSectionsNav) |