From 475638e617c5053aeb897d26bfba4c8d1975c614 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Fri, 7 Aug 2020 22:59:03 +0200
Subject: next button

---
 .../app/views/viewer/checklist/checklist.content.js    |  5 +----
 .../frontend/app/views/viewer/nav/nav.parent.js        | 10 ++++++----
 .../app/views/viewer/player/player.container.js        | 10 ++++++----
 .../app/views/viewer/player/player.fullscreen.js       |  2 +-
 .../app/views/viewer/sections/viewer.sections.js       | 11 +----------
 .../frontend/app/views/viewer/viewer.actions.js        | 18 ++++++++++++++++--
 .../frontend/app/views/viewer/viewer.reducer.js        |  4 +++-
 7 files changed, 34 insertions(+), 26 deletions(-)

(limited to 'animism-align/frontend')

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:
-- 
cgit v1.2.3-70-g09d2