diff options
Diffstat (limited to 'animism-align/frontend/app/views')
8 files changed, 49 insertions, 16 deletions
diff --git a/animism-align/frontend/app/views/viewer/nav/nav.css b/animism-align/frontend/app/views/viewer/nav/nav.css index 3689593..5c62b03 100644 --- a/animism-align/frontend/app/views/viewer/nav/nav.css +++ b/animism-align/frontend/app/views/viewer/nav/nav.css @@ -5,6 +5,15 @@ width: 100%; font-size: 18px; } +.main-nav { + transition: all 0.2s; + transform: translateZ(0) translateY(0); +} +.sections-open .main-nav { + transform: translateZ(0) translateY(-22rem); + background: black; + color: white; +} /* The main nav row */ @@ -65,6 +74,14 @@ width: 100%; height: 100%; } +.viewer-nav .arrow path, +.viewer-nav .arrow polygon { + fill: #000; +} +.sections-open .viewer-nav .arrow path, +.sections-open .viewer-nav .arrow polygon { + fill: #fff; +} /* Volume button */ @@ -81,10 +98,10 @@ stroke: #000; stroke-width: 0.5; } -.nav-open .volume path { +.sections-open .volume path { fill: #fff; } -.nav-open .volume.muted path { +.sections-open .volume.muted path { fill: #000; stroke: #fff; } @@ -100,8 +117,8 @@ .playToggle polygon { fill: #000; } -.nav-open .playToggle path, -.nav-open .playToggle polygon { +.sections-open .playToggle path, +.sections-open .playToggle polygon { fill: #fff; } 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 ab268a4..24fde46 100644 --- a/animism-align/frontend/app/views/viewer/nav/viewer.nav.js +++ b/animism-align/frontend/app/views/viewer/nav/viewer.nav.js @@ -11,13 +11,13 @@ class ViewerNav extends Component { } render() { - const { } = this.props + const { viewer } = this.props return ( <div className="viewer-nav"> <div className='nav-row main-nav'> <div> - <span className="section-link link" onClick={() => actions.viewer.showSection('sections')}> - <Arrow type={'up'} /> + <span className="section-link link" onClick={() => actions.viewer.showSection('sectionsNav')}> + <Arrow type={viewer.sectionsNav ? 'down' : 'up'} /> {ROMAN_NUMERALS[0]} {'. '} {'Introduction'} @@ -41,6 +41,7 @@ class ViewerNav extends Component { } const mapStateToProps = state => ({ + viewer: state.viewer, }) export default connect(mapStateToProps)(ViewerNav) diff --git a/animism-align/frontend/app/views/viewer/nav/viewer.router.js b/animism-align/frontend/app/views/viewer/nav/viewer.router.js index 93305cc..b4aeb2e 100644 --- a/animism-align/frontend/app/views/viewer/nav/viewer.router.js +++ b/animism-align/frontend/app/views/viewer/nav/viewer.router.js @@ -15,7 +15,7 @@ class ViewerRouter extends Component { actions.viewer.showSection('transcript') break case 'sections': - actions.viewer.showSection('sections') + actions.viewer.showSection('sectionsNav') break case 'checklist': actions.viewer.showSection('checklist') diff --git a/animism-align/frontend/app/views/viewer/sections/sections.css b/animism-align/frontend/app/views/viewer/sections/sections.css index 9243cd5..334e28b 100644 --- a/animism-align/frontend/app/views/viewer/sections/sections.css +++ b/animism-align/frontend/app/views/viewer/sections/sections.css @@ -9,6 +9,11 @@ color: white; display: block; white-space: nowrap; + transition: transform 0.2s; + transform: translateZ(0) translateY(25rem); +} +.sections-open .viewer-sections { + transform: translateZ(0) translateY(0); } .viewer-sections .viewer-section { display: inline-flex; @@ -30,5 +35,6 @@ background-position: center center; } .viewer-sections .section-media { - font-size: 14px; -}
\ No newline at end of file + margin-top: 1rem; + font-size: 12px; +} diff --git a/animism-align/frontend/app/views/viewer/sections/viewer.sections.js b/animism-align/frontend/app/views/viewer/sections/viewer.sections.js index c4681b8..268b6d9 100644 --- a/animism-align/frontend/app/views/viewer/sections/viewer.sections.js +++ b/animism-align/frontend/app/views/viewer/sections/viewer.sections.js @@ -11,14 +11,23 @@ class ViewerSections extends Component { componentDidMount() { } + handleSectionSelection(section) { + actions.audio.seek(section.start_ts) + actions.viewer.hideSection('sections') + } + render() { const { sections } = this.props return ( <div className="viewer-sections"> {sections.map(section => { - console.log(section) + // console.log(section) return ( - <div className="viewer-section" key={section.index}> + <div + className="viewer-section" + key={section.index} + onClick={() => this.handleSectionSelection(section)} + > <div> <div className="section-thumbnail" style={{ backgroundImage: section.media.length && 'url(' + thumbnailURL(section.media[0]) + ')', diff --git a/animism-align/frontend/app/views/viewer/viewer.actions.js b/animism-align/frontend/app/views/viewer/viewer.actions.js index 35e26a9..2adde86 100644 --- a/animism-align/frontend/app/views/viewer/viewer.actions.js +++ b/animism-align/frontend/app/views/viewer/viewer.actions.js @@ -14,7 +14,6 @@ export const loadSections = () => dispatch => { const state = store.getState() const { order: annotationOrder, lookup: annotationLookup } = state.annotation.index const { lookup: mediaLookup } = state.media.index - console.log(state.media.index) // loop over the annotations in time order. group the media found in each section. annotationOrder.forEach((annotation_id, i) => { @@ -33,7 +32,7 @@ export const loadSections = () => dispatch => { } }) - console.log(sections) + // console.log(sections) dispatch({ type: types.viewer.load_sections, data: sections }) } diff --git a/animism-align/frontend/app/views/viewer/viewer.container.js b/animism-align/frontend/app/views/viewer/viewer.container.js index 570ef42..3a6c707 100644 --- a/animism-align/frontend/app/views/viewer/viewer.container.js +++ b/animism-align/frontend/app/views/viewer/viewer.container.js @@ -59,6 +59,7 @@ class ViewerContainer extends Component { } let className = 'viewer' if (viewer.transcript) className += ' transcript-open' + if (viewer.sectionsNav) className += ' sections-open' return ( <div> <div className={className}> diff --git a/animism-align/frontend/app/views/viewer/viewer.reducer.js b/animism-align/frontend/app/views/viewer/viewer.reducer.js index 30c7a0a..949ec45 100644 --- a/animism-align/frontend/app/views/viewer/viewer.reducer.js +++ b/animism-align/frontend/app/views/viewer/viewer.reducer.js @@ -4,15 +4,15 @@ const initialState = { transcript: false, checklist: false, nav: false, + sectionsNav: false, sections: { loading: true }, options: { } } export default function viewerReducer(state = initialState, action) { - console.log(action.type, action) + // console.log(action.type, action) switch (action.type) { - case types.viewer.load_sections: return { ...state, |