diff options
Diffstat (limited to 'animism-align/frontend/app/views/viewer')
7 files changed, 34 insertions, 26 deletions
diff --git a/animism-align/frontend/app/views/viewer/checklist/checklist.content.js b/animism-align/frontend/app/views/viewer/checklist/checklist.content.js index 70c175e..72695b7 100644 --- a/animism-align/frontend/app/views/viewer/checklist/checklist.content.js +++ b/animism-align/frontend/app/views/viewer/checklist/checklist.content.js @@ -9,10 +9,7 @@ import { PlayIcon } from '../nav/viewer.icons' class ChecklistContent extends Component { handleMediaSelection(mediaItem) { - actions.audio.seek(mediaItem.start_ts) - actions.audio.play() - actions.viewer.hideComponent('nav') - actions.viewer.hideComponent('checklist') + actions.seekToMediaItem(mediaItem) } render() { const { sections, currentSection } = this.props 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 9cb4e93..7ca8687 100644 --- a/animism-align/frontend/app/views/viewer/nav/nav.parent.js +++ b/animism-align/frontend/app/views/viewer/nav/nav.parent.js @@ -26,10 +26,12 @@ class NavParent extends Component { </div> <NavPlayer /> <div className='nav-next'> - <span className="next-link link"> - Next - <Arrow type={'right'} /> - </span> + {viewer.nextSection && + <span className="next-link link" onClick={() => actions.viewer.seekToSection(viewer.nextSection)}> + Next + <Arrow type={'right'} /> + </span> + } </div> </div> </div> diff --git a/animism-align/frontend/app/views/viewer/player/player.container.js b/animism-align/frontend/app/views/viewer/player/player.container.js index 9655955..cc9c401 100644 --- a/animism-align/frontend/app/views/viewer/player/player.container.js +++ b/animism-align/frontend/app/views/viewer/player/player.container.js @@ -10,7 +10,8 @@ import PlayerFullscreen from './player.fullscreen' class PlayerContainer extends Component { componentDidMount() { // console.log(this.props.sections) - actions.viewer.setCurrentSection(this.props.sections[0]) + const { sections } = this.props + actions.viewer.setCurrentSection(sections[0], sections[1]) } componentDidUpdate(prevProps) { @@ -25,17 +26,18 @@ class PlayerContainer extends Component { return } - const insideSection = sections.some(section => { + const insideSection = sections.some((section, i) => { if (floatInRange(section.start_ts, play_ts, section.end_ts)) { if (currentSection !== section) { - actions.viewer.setCurrentSection(section) + const nextSection = sections[i+1] + actions.viewer.setCurrentSection(section, nextSection) } return true } return false }) if (!insideSection) { - actions.viewer.setCurrentSection(sections[0]) + actions.viewer.setCurrentSection(sections[0], sections[1]) } } diff --git a/animism-align/frontend/app/views/viewer/player/player.fullscreen.js b/animism-align/frontend/app/views/viewer/player/player.fullscreen.js index 26219c4..a4acef9 100644 --- a/animism-align/frontend/app/views/viewer/player/player.fullscreen.js +++ b/animism-align/frontend/app/views/viewer/player/player.fullscreen.js @@ -69,7 +69,7 @@ class PlayerFullscreen extends Component { fadeOutDuration = 0 } const transitionDuration = (isEntering ? fadeInDuration : fadeOutDuration) + 'ms' - console.log(play_ts, isEntering, isLeaving, fadeInDuration, fadeOutDuration) + // console.log(play_ts, isEntering, isLeaving, fadeInDuration, fadeOutDuration) return ( <CSSTransition key={index} 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 6d5e932..f4abbd6 100644 --- a/animism-align/frontend/app/views/viewer/sections/viewer.sections.js +++ b/animism-align/frontend/app/views/viewer/sections/viewer.sections.js @@ -8,15 +8,6 @@ import { ROMAN_NUMERALS } from 'app/constants' import { thumbnailURL } from 'app/utils/annotation.utils' class ViewerSections extends Component { - componentDidMount() { - } - - handleSectionSelection(section) { - actions.audio.seek(section.start_ts) - actions.audio.play() - actions.viewer.hideComponent('nav') - } - render() { const { sections } = this.props return ( @@ -27,7 +18,7 @@ class ViewerSections extends Component { <div className="viewer-section" key={section.index} - onClick={() => this.handleSectionSelection(section)} + onClick={() => actions.viewer.seekToSection(section)} > <div> <div className="section-thumbnail" style={{ diff --git a/animism-align/frontend/app/views/viewer/viewer.actions.js b/animism-align/frontend/app/views/viewer/viewer.actions.js index 8c03a10..01f4232 100644 --- a/animism-align/frontend/app/views/viewer/viewer.actions.js +++ b/animism-align/frontend/app/views/viewer/viewer.actions.js @@ -1,5 +1,6 @@ import * as types from 'app/types' import { store, history, dispatch } from 'app/store' +import actions from 'app/actions' import { MEDIA_ANNOTATION_TYPES, MEDIA_LABEL_TYPES, TEXT_ANNOTATION_TYPES, @@ -150,8 +151,8 @@ const makeFullscreenEvent = (index, annotation) => { return event } -export const setCurrentSection = section => dispatch => { - dispatch({ type: types.viewer.set_current_section, section }) +export const setCurrentSection = (currentSection, nextSection) => dispatch => { + dispatch({ type: types.viewer.set_current_section, currentSection, nextSection }) } export const setNavStyle = color => dispatch => { @@ -169,3 +170,16 @@ export const hideComponent = key => dispatch => { export const toggleComponent = key => dispatch => { dispatch({ type: types.viewer.toggle_component, key, value: !store.getState().viewer[key] }) } + +export const seekToSection = section => dispatch => { + actions.audio.seek(section.start_ts) + actions.audio.play() + actions.viewer.hideComponent('nav') +} + +export const seekToMediaItem = mediaItem => dispatch => { + actions.audio.seek(mediaItem.start_ts) + actions.audio.play() + actions.viewer.hideComponent('nav') + actions.viewer.hideComponent('checklist') +} diff --git a/animism-align/frontend/app/views/viewer/viewer.reducer.js b/animism-align/frontend/app/views/viewer/viewer.reducer.js index e2ed779..5ebe657 100644 --- a/animism-align/frontend/app/views/viewer/viewer.reducer.js +++ b/animism-align/frontend/app/views/viewer/viewer.reducer.js @@ -7,6 +7,7 @@ const initialState = { sections: { loading: true }, fullscreenTimeline: [], currentSection: null, + nextSection: null, navStyle: 'white', options: { } @@ -31,7 +32,8 @@ export default function viewerReducer(state = initialState, action) { case types.viewer.set_current_section: return { ...state, - currentSection: action.section, + currentSection: action.currentSection, + nextSection: action.nextSection, } case types.viewer.set_nav_style: |