adjusting timing, pause at end of section

12 files changed, 66 insertions, 35 deletions

diff --git a/animism-align/frontend/app/types.js b/animism-align/frontend/app/types.js
index ab1e6e9..eca6cf3 100644
--- a/animism-align/frontend/app/types.js
+++ b/animism-align/frontend/app/types.js
@@ -26,7 +26,8 @@ export const audio = with_type('audio', [
 
 export const viewer = with_type('viewer', [
   'load_sections', 'toggle_component',
-  'set_current_section', 'set_nav_style',
+  'set_current_section', 'reached_end_of_section',
+  'set_nav_style',
   'open_vitrine_modal', 'close_vitrine_modal', 'set_vitrine_index',
 ])
 
diff --git a/animism-align/frontend/app/utils/index.js b/animism-align/frontend/app/utils/index.js
index 9a47df3..7f9100c 100644
--- a/animism-align/frontend/app/utils/index.js
+++ b/animism-align/frontend/app/utils/index.js
@@ -54,7 +54,9 @@ export const capitalizeWord = s => s.substr(0, 1).toUpperCase() + s.substr(1)
 export const padSeconds = n => n < 10 ? '0' + n : n
 
 export const timestamp = (n = 0, fps = 1, ms = false) => {
-  if (n < 0) return ''
+  if (n < 0) {
+    return '0:00'
+  }
   let s = ''
   n /= fps
   if (ms) {
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 fd395a1..1406996 100644
--- a/animism-align/frontend/app/views/viewer/checklist/checklist.content.js
+++ b/animism-align/frontend/app/views/viewer/checklist/checklist.content.js
@@ -8,9 +8,10 @@ import { thumbnailURL } from 'app/utils/annotation.utils'
 import { PlayIcon } from '../nav/viewer.icons'
 
 class ChecklistContent extends Component {
-  handleMediaSelection(mediaItem) {
-    actions.viewer.seekToMediaItem(mediaItem)
+  handleMediaSelection(section, mediaItem) {
+    actions.viewer.seekToMediaItem(section, mediaItem)
   }
+
   render() {
     const { sections, currentSection } = this.props
     return (
@@ -26,7 +27,7 @@ class ChecklistContent extends Component {
                   <div
                     className="checklist-row"
                     key={section.index + "_" + i}
-                    onClick={() => this.handleMediaSelection(mediaItem)}
+                    onClick={() => this.handleMediaSelection(section, mediaItem)}
                   >
                     <div className="media-id">
                       {pad(section.mediaIndex + i + 1, 2)}
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 c27947b..8ad0cd1 100644
--- a/animism-align/frontend/app/views/viewer/nav/nav.parent.js
+++ b/animism-align/frontend/app/views/viewer/nav/nav.parent.js
@@ -42,7 +42,7 @@ class NavParent extends Component {
     let containerClassName = "viewer-nav " + viewer.navStyle
     let navClassName = 'nav-row main-nav'
     if (this.state.hoveringNav) navClassName += ' hovering-nav'
-    if (this.state.hoveringNext) containerClassName += ' hovering-next'
+    if (this.state.hoveringNext || viewer.atEndOfSection) containerClassName += ' hovering-next'
     return (
       <div className={containerClassName} onMouseLeave={this.handleMouseLeave}>
         <div className={navClassName}>
diff --git a/animism-align/frontend/app/views/viewer/nav/viewer.icons.js b/animism-align/frontend/app/views/viewer/nav/viewer.icons.js
index 2ca8dff..7bc0219 100644
--- a/animism-align/frontend/app/views/viewer/nav/viewer.icons.js
+++ b/animism-align/frontend/app/views/viewer/nav/viewer.icons.js
@@ -2,7 +2,7 @@ import React from 'react'
 import { connect } from 'react-redux'
 
 import actions from 'app/actions'
-import { timestamp } from 'app/utils'
+import { clamp, timestamp } from 'app/utils'
 
 // arrows
 
@@ -75,10 +75,10 @@ export const PlayButton = ({ playing }) => {
 
 export const PlayerTime = ({ play_ts, duration }) => (
   <span className='playerTime'>
-    {timestamp(play_ts)}
+    {timestamp(clamp(play_ts, 0, duration))}
     <span className='playerDuration'>
     {' / '}
-    {timestamp(duration)}
+    {timestamp(clamp(duration, 0, duration))}
     </span>
   </span>
 )
diff --git a/animism-align/frontend/app/views/viewer/player/components.inline/inline.gallery.js b/animism-align/frontend/app/views/viewer/player/components.inline/inline.gallery.js
index d2a460c..44fa751 100644
--- a/animism-align/frontend/app/views/viewer/player/components.inline/inline.gallery.js
+++ b/animism-align/frontend/app/views/viewer/player/components.inline/inline.gallery.js
@@ -1,9 +1,9 @@
-import React from 'react'
+ import React from 'react'
 
 import { CURTAIN_COLOR_LOOKUP } from 'app/constants'
 import { MediaCitation, Vitrine, Gallery, Carousel, Grid } from '../components.media'
 
-export const InlineVitrine = ({ paragraph, media, currentParagraph, currentAnnotation, onAnnotationClick, onDoubleClick }) => {
+export const InlineVitrine = ({ paragraph, media, currentParagraph, currentAnnotation, onAnnotationClick }) => {
   const annotation = paragraph.annotations[0]
   const item = media.lookup[annotation.settings.media_id]
   const color = CURTAIN_COLOR_LOOKUP[annotation.settings.color] || CURTAIN_COLOR_LOOKUP.white
@@ -23,7 +23,7 @@ export const InlineVitrine = ({ paragraph, media, currentParagraph, currentAnnot
   // <MediaCitation media={item} />
 }
 
-export const InlineGallery = ({ paragraph, media, currentParagraph, currentAnnotation, onAnnotationClick, onDoubleClick }) => {
+export const InlineGallery = ({ paragraph, media, currentParagraph, currentAnnotation, onAnnotationClick }) => {
   const annotation = paragraph.annotations[0]
   const item = media.lookup[annotation.settings.media_id]
   return (
@@ -35,7 +35,7 @@ export const InlineGallery = ({ paragraph, media, currentParagraph, currentAnnot
   )
 }
 
-export const InlineCarousel = ({ paragraph, media, currentParagraph, currentAnnotation, onAnnotationClick, onDoubleClick }) => {
+export const InlineCarousel = ({ paragraph, media, currentParagraph, currentAnnotation, onAnnotationClick }) => {
   const annotation = paragraph.annotations[0]
   const item = media.lookup[annotation.settings.media_id]
   const color = CURTAIN_COLOR_LOOKUP[annotation.settings.color] || CURTAIN_COLOR_LOOKUP.white
@@ -55,7 +55,7 @@ export const InlineCarousel = ({ paragraph, media, currentParagraph, currentAnno
   )
 }
 
-export const InlineGrid = ({ paragraph, media, currentParagraph, currentAnnotation, onAnnotationClick, onDoubleClick }) => {
+export const InlineGrid = ({ paragraph, media, currentParagraph, currentAnnotation, onAnnotationClick }) => {
   const annotation = paragraph.annotations[0]
   const item = media.lookup[annotation.settings.media_id]
 
diff --git a/animism-align/frontend/app/views/viewer/player/components.inline/inline.image.js b/animism-align/frontend/app/views/viewer/player/components.inline/inline.image.js
index 176d661..e477ba6 100644
--- a/animism-align/frontend/app/views/viewer/player/components.inline/inline.image.js
+++ b/animism-align/frontend/app/views/viewer/player/components.inline/inline.image.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 
 import { MediaCitation } from '../components.media'
 
-export const MediaImage = ({ paragraph, media, currentParagraph, currentAnnotation, onAnnotationClick, onDoubleClick }) => {
+export const MediaImage = ({ paragraph, media, currentParagraph, currentAnnotation, onAnnotationClick }) => {
   if (!media.lookup) return <div />
   const annotation = paragraph.annotations[0]
   const item = media.lookup[annotation.settings.media_id]
diff --git a/animism-align/frontend/app/views/viewer/player/components.inline/inline.video.js b/animism-align/frontend/app/views/viewer/player/components.inline/inline.video.js
index 179c50d..55ff420 100644
--- a/animism-align/frontend/app/views/viewer/player/components.inline/inline.video.js
+++ b/animism-align/frontend/app/views/viewer/player/components.inline/inline.video.js
@@ -4,7 +4,7 @@ import VimeoPlayer from '@u-wave/react-vimeo'
 import { CURTAIN_COLOR_LOOKUP } from 'app/constants'
 import { MediaCitation } from '../components.media'
 
-export const MediaVideo = ({ paragraph, media, currentParagraph, currentAnnotation, onAnnotationClick, onDoubleClick }) => {
+export const MediaVideo = ({ paragraph, media, currentParagraph, currentAnnotation, onAnnotationClick }) => {
   if (!media.lookup) return <div />
   // const { color } = element
   const className = currentParagraph ? 'media video current' : 'media video'
@@ -20,7 +20,6 @@ export const MediaVideo = ({ paragraph, media, currentParagraph, currentAnnotati
   return (
     <div
       className={className}
-      onDoubleClick={e => onDoubleClick(e, paragraph)}
     >
       <div className='videoPlayer' style={style}>
         <VimeoPlayer
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 8a23720..a2f999d 100644
--- a/animism-align/frontend/app/views/viewer/player/player.container.js
+++ b/animism-align/frontend/app/views/viewer/player/player.container.js
@@ -20,25 +20,28 @@ class PlayerContainer extends Component {
   }
 
   setCurrentSection() {
-    const { audio, sections, currentSection } = this.props
+    const { audio, sections, currentSection, autoAdvance } = this.props
     const { play_ts } = audio
     if (floatInRange(currentSection.start_ts, play_ts, currentSection.end_ts)) {
       return
     }
 
-    const insideSection = sections.some((section, i) => {
-      if (floatInRange(section.start_ts, play_ts, section.end_ts)) {
-        if (currentSection !== section) {
-          const nextSection = sections[i+1]
-          actions.viewer.setCurrentSection(section, nextSection)
+    if (autoAdvance) {
+      const insideSection = sections.some((section, i) => {
+        if (floatInRange(section.start_ts, play_ts, section.end_ts)) {
+          if (currentSection !== section) {
+            const nextSection = sections[i+1]
+            actions.viewer.setCurrentSection(section, nextSection)
+          }
+          return true
         }
-        return true
+        return false
+      })
+      if (!insideSection) {
+        actions.viewer.setCurrentSection(sections[sections.length-1], null)
       }
-      return false
-    })
-    
-    if (!insideSection) {
-      actions.viewer.setCurrentSection(sections[sections.length-1], null)
+    } else {
+      actions.viewer.reachedEndOfSection()
     }
   }
   
@@ -60,6 +63,7 @@ const mapStateToProps = state => ({
   audio: state.audio,
   sections: state.viewer.sections,
   currentSection: state.viewer.currentSection,
+  autoAdvance: state.viewer.autoAdvance,
 })
 
 export default connect(mapStateToProps)(PlayerContainer)
diff --git a/animism-align/frontend/app/views/viewer/viewer.actions.js b/animism-align/frontend/app/views/viewer/viewer.actions.js
index 5d6775f..097f01b 100644
--- a/animism-align/frontend/app/views/viewer/viewer.actions.js
+++ b/animism-align/frontend/app/views/viewer/viewer.actions.js
@@ -156,10 +156,6 @@ const makeFullscreenEvent = (index, annotation) => {
   return event
 }
 
-export const setCurrentSection = (currentSection, nextSection) => dispatch => {
-  dispatch({ type: types.viewer.set_current_section, currentSection, nextSection })
-}
-
 export const setNavStyle = color => dispatch => {
   dispatch({ type: types.viewer.set_nav_style, color })
 }
@@ -176,13 +172,32 @@ export const toggleComponent = key => dispatch => {
   dispatch({ type: types.viewer.toggle_component, key, value: !store.getState().viewer[key] })
 }
 
+const getNextSection = section => {
+  const { sections } = store.getState().viewer
+  if (section.index === sections.length - 1) {
+    return null
+  }
+  return sections[section.index + 1]
+}
+
+export const reachedEndOfSection = () => dispatch => {
+  actions.audio.pause()
+  dispatch({ type: types.viewer.reached_end_of_section })
+}
+
+export const setCurrentSection = (currentSection, nextSection) => dispatch => {
+  dispatch({ type: types.viewer.set_current_section, currentSection, nextSection })
+}
+
 export const seekToSection = section => dispatch => {
+  actions.viewer.setCurrentSection(section, getNextSection(section))
   actions.audio.seek(section.start_ts)
   actions.audio.play()
   actions.viewer.hideComponent('nav')
 }
 
-export const seekToMediaItem = mediaItem => dispatch => {
+export const seekToMediaItem = (section, mediaItem) => dispatch => {
+  actions.viewer.setCurrentSection(section, getNextSection(section))
   actions.audio.seek(mediaItem.start_ts)
   actions.audio.play()
   actions.viewer.hideComponent('nav')
diff --git a/animism-align/frontend/app/views/viewer/viewer.container.js b/animism-align/frontend/app/views/viewer/viewer.container.js
index b207f4a..522f8bc 100644
--- a/animism-align/frontend/app/views/viewer/viewer.container.js
+++ b/animism-align/frontend/app/views/viewer/viewer.container.js
@@ -14,7 +14,7 @@ import './modals/modals.css'
 import './player/player.container.css'
 import './player/player.fullscreen.css'
 import './player/player.transcript.css'
-import './player/components.utility/media.css'
+import './player/components.media/media.css'
 
 import actions from 'app/actions'
 import { Loader } from 'app/common'
diff --git a/animism-align/frontend/app/views/viewer/viewer.reducer.js b/animism-align/frontend/app/views/viewer/viewer.reducer.js
index daf9bba..2ab5f57 100644
--- a/animism-align/frontend/app/views/viewer/viewer.reducer.js
+++ b/animism-align/frontend/app/views/viewer/viewer.reducer.js
@@ -9,6 +9,8 @@ const initialState = {
   currentSection: null,
   nextSection: null,
   navStyle: 'white',
+  autoAdvance: false,
+  atEndOfSection: false,
   vitrineModal: {
     open: false,
     media: null,
@@ -39,6 +41,13 @@ export default function viewerReducer(state = initialState, action) {
         ...state,
         currentSection: action.currentSection,
         nextSection: action.nextSection,
+        atEndOfSection: false,
+      }
+
+    case types.viewer.reached_end_of_section:
+      return {
+        ...state,
+        atEndOfSection: true,
       }
 
     case types.viewer.set_nav_style: