diff options
Diffstat (limited to 'animism-align/frontend/app/views/viewer/nav')
3 files changed, 113 insertions, 83 deletions
diff --git a/animism-align/frontend/app/views/viewer/nav/nav.css b/animism-align/frontend/app/views/viewer/nav/nav.css new file mode 100644 index 0000000..3689593 --- /dev/null +++ b/animism-align/frontend/app/views/viewer/nav/nav.css @@ -0,0 +1,113 @@ +.viewer-nav { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + font-size: 18px; +} + +/* The main nav row */ + +.viewer-nav > .nav-row { + width: 100%; + height: 3rem; + padding: 0.25rem 0 0.25rem 0; + display: flex; + justify-content: space-between; + align-items: center; +} +.viewer-nav > .nav-row > div { + display: flex; + justify-content: center; + align-items: center; + width: 32%; +} +.viewer-nav > .nav-row > div:nth-child(1) { + justify-content: flex-start; + align-items: center; +} +.viewer-nav > .nav-row > div:nth-child(2) { + justify-content: center; + align-items: center; +} +.viewer-nav > .nav-row > div:nth-child(3) { + justify-content: flex-end; + align-items: center; +} + +.viewer-nav .link { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + cursor: pointer; +} + +.transcript-link { + padding-right: 1.25rem; +} + +/* Arrows */ + +.viewer-nav .arrow { + display: inline-block; + width: 2.5rem; + height: 2.5rem; + display: flex; + justify-content: center; + align-items: center; +} +.viewer-nav .arrow.left, +.viewer-nav .arrow.right { + width: 1.25rem; +} +.viewer-nav .arrow svg { + width: 100%; + height: 100%; +} + +/* Volume button */ + +.volume { + cursor: pointer; + width: 2.5rem; + height: 2.5rem; +} +.volume path { + fill: #000; +} +.volume.muted path { + fill: #fff; + stroke: #000; + stroke-width: 0.5; +} +.nav-open .volume path { + fill: #fff; +} +.nav-open .volume.muted path { + fill: #000; + stroke: #fff; +} + +/* Play button */ + +.playToggle { + cursor: pointer; + width: 2.5rem; + height: 2.5rem; +} +.playToggle path, +.playToggle polygon { + fill: #000; +} +.nav-open .playToggle path, +.nav-open .playToggle polygon { + fill: #fff; +} + +/* Player time */ + +.playerTime { + margin-left: 0.5rem; + margin-right: 0.75rem; +} diff --git a/animism-align/frontend/app/views/viewer/nav/viewer.sections.js b/animism-align/frontend/app/views/viewer/nav/viewer.sections.js deleted file mode 100644 index 76402e8..0000000 --- a/animism-align/frontend/app/views/viewer/nav/viewer.sections.js +++ /dev/null @@ -1,40 +0,0 @@ -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 deleted file mode 100644 index f4ab93a..0000000 --- a/animism-align/frontend/app/views/viewer/nav/viewer.sections.nav.js +++ /dev/null @@ -1,43 +0,0 @@ -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" onClick={() => actions.viewer.showSection('transcript')}> - {'Transcript'} - </span> - </div> - </div> - </div> - ) - } -} - -const mapStateToProps = state => ({ -}) - -export default connect(mapStateToProps)(ViewerSectionsNav) |