fixing section skip

9 files changed, 57 insertions, 15 deletions

diff --git a/animism-align/frontend/app/types.js b/animism-align/frontend/app/types.js
index 3c0ec6f..d2b08b8 100644
--- a/animism-align/frontend/app/types.js
+++ b/animism-align/frontend/app/types.js
@@ -23,7 +23,7 @@ export const align = crud_type('align', [
 ])
 
 export const audio = with_type('audio', [
-  'play', 'pause', 'update_time', 'set_volume',
+  'play', 'pause', 'seek', 'update_time', 'set_volume',
 ])
 
 export const viewer = with_type('viewer', [
diff --git a/animism-align/frontend/app/utils/index.js b/animism-align/frontend/app/utils/index.js
index 6777a5e..d6c1a16 100644
--- a/animism-align/frontend/app/utils/index.js
+++ b/animism-align/frontend/app/utils/index.js
@@ -95,10 +95,11 @@ export const dist = (x1, y1, x2, y2) => Math.sqrt(Math.pow(x1 - x2, 2) + Math.po
 export const mod = (n, m) => n - (m * Math.floor(n / m))
 export const angle = (x1, y1, x2, y2) => Math.atan2(y2 - y1, x2 - x1)
 export const lerp = (n,a,b) => (b-a)*n+a
+export const floatEQ = (a,b) => ((a*10|0) === (b*10|0))
 export const floatLT = (a,b) => ((a*10|0) < (b*10|0))
-export const floatLTE = (a,b) => ((a*10|0) === (b*10|0) || floatLT(a,b))
+export const floatLTE = (a,b) => (floatEQ(a,b) || floatLT(a,b))
 export const floatGT = (a,b) => ((a*10|0) > (b*10|0))
-export const floatGTE = (a,b) => ((a*10|0) === (b*10|0) || floatGT(a,b))
+export const floatGTE = (a,b) => (floatEQ(a,b) || floatGT(a,b))
 export const floatInRange = (a,b,c) => floatLTE(a, b) && floatLT(b, c)
 export const simpleArraysEqual = (a, b) => JSON.stringify(a) === JSON.stringify(b)
 
diff --git a/animism-align/frontend/app/views/audio/audio.actions.js b/animism-align/frontend/app/views/audio/audio.actions.js
index 86dd100..a156f9b 100644
--- a/animism-align/frontend/app/views/audio/audio.actions.js
+++ b/animism-align/frontend/app/views/audio/audio.actions.js
@@ -33,9 +33,11 @@ export const pause = () => dispatch => {
 }
 export const seek = play_ts => dispatch => {
   audioPlayer.currentTime = play_ts
+  dispatch({ type: types.audio.seek, seek_ts: audioPlayer.currentTime })
 }
 export const jump = delta_ts => dispatch => {
   audioPlayer.currentTime += delta_ts
+  dispatch({ type: types.audio.seek, seek_ts: audioPlayer.currentTime })
 }
 export const toggle = () => dispatch => {
   if (store.getState().audio.playing) {
diff --git a/animism-align/frontend/app/views/audio/audio.reducer.js b/animism-align/frontend/app/views/audio/audio.reducer.js
index c88d6f9..51bcacc 100644
--- a/animism-align/frontend/app/views/audio/audio.reducer.js
+++ b/animism-align/frontend/app/views/audio/audio.reducer.js
@@ -5,6 +5,7 @@ const initialState = {
   started: false,
   playing: false,
   play_ts: 0,
+  seek_ts: 0,
   volume: 1.0,
 }
 
@@ -22,6 +23,12 @@ export default function alignReducer(state = initialState, action) {
         ...state,
         playing: false,
       }
+    case types.audio.seek:
+      return {
+        ...state,
+        play_ts: action.play_ts,
+        seek_ts: action.seek_ts,
+      }
     case types.audio.update_time:
       return {
         ...state,
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 a4c2aee..fdad211 100644
--- a/animism-align/frontend/app/views/viewer/nav/nav.parent.js
+++ b/animism-align/frontend/app/views/viewer/nav/nav.parent.js
@@ -43,16 +43,19 @@ class NavParent extends Component {
   handleNavBarClick(e) {
     e && e.stopPropagation()
     actions.viewer.toggleComponent('nav')
+    console.log('>> CLICK NAV')
   }
   goToNextSection(e) {
     e && e.preventDefault()
     e && e.stopPropagation()
     const { viewer } = this.props
+    console.log('>> SEEK')
     if (viewer.nextSection) {
       actions.viewer.seekToSection(viewer.nextSection)
     } else {
       actions.viewer.seekToBeginning()
     }
+    this.setState({ hoveringNext: false, hoveringNav: false, suppressHover: true })
   }
   render() {
     const { viewer, play_ts, started, playing } = this.props
@@ -101,13 +104,14 @@ class NavParent extends Component {
         </div>
         {viewer.nextSection &&
           <div className="next-section-thumbnail"
-            onClick={() => {
-              actions.viewer.seekToSection(viewer.nextSection)
-              this.setState({ hoveringNext: false, hoveringNav: false, suppressHover: true })
-            }}
+            onClick={this.goToNextSection}
             style={{
-            backgroundImage: viewer.nextSection.media.length && 'url(' + thumbnailURL(viewer.nextSection.media[0].media) + ')',
-          }}/>
+              backgroundImage: (
+                viewer.nextSection.media.length
+                && 'url(' + thumbnailURL(viewer.nextSection.media[0].media) + ')'
+              ),
+            }}
+          />
         }
       </div>
     )
diff --git a/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.video.js b/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.video.js
index ec020f8..a2c4b72 100644
--- a/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.video.js
+++ b/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.video.js
@@ -89,6 +89,7 @@ class FullscreenVideo extends Component {
             video={item.url}
             paused={!playing}
             autoplay={true}
+            autopause={false}
             muted={!element.settings.unmuted}
             loop={!!element.settings.loop}
             seek={this.state.seek}
diff --git a/animism-align/frontend/app/views/viewer/player/components.media/video.scrubber.js b/animism-align/frontend/app/views/viewer/player/components.media/video.scrubber.js
index 48250c7..78c4b1d 100644
--- a/animism-align/frontend/app/views/viewer/player/components.media/video.scrubber.js
+++ b/animism-align/frontend/app/views/viewer/player/components.media/video.scrubber.js
@@ -85,7 +85,7 @@ class VideoScrubber extends Component {
     const { playing, start_ts, play_ts, volume, timing, video_start_ts, duration } = this.props
     const { hovering, showing } = this.state
     // remove video start offset from timing
-    console.log(start_ts, play_ts)
+    // console.log(start_ts, play_ts)
     const player_ts = play_ts - start_ts
     // compute percent from the length of the fullscreen element
     const percent = clamp(player_ts / duration, 0, 1)
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 afb6a40..8972386 100644
--- a/animism-align/frontend/app/views/viewer/player/player.container.js
+++ b/animism-align/frontend/app/views/viewer/player/player.container.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import { connect } from 'react-redux'
 
 import actions from 'app/actions'
-import { floatInRange, clamp } from 'app/utils'
+import { floatEQ, floatInRange, clamp } from 'app/utils'
 
 import PlayerTranscript from './player.transcript'
 import PlayerFullscreen from './player.fullscreen'
@@ -76,8 +76,10 @@ class PlayerContainer extends Component {
 
   setCurrentSection() {
     const { audio, currentSection, autoAdvance } = this.props
-    const { play_ts } = audio
-    if (floatInRange(currentSection.start_ts, play_ts, currentSection.end_ts)) {
+    const { play_ts, seek_ts } = audio
+    const didSeek = floatEQ(play_ts, seek_ts)
+    // console.log('didSeek?', didSeek)
+    if (!didSeek || floatInRange(currentSection.start_ts, play_ts, currentSection.end_ts)) {
       return
     }
     if (autoAdvance) {
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 50cd633..75a7e33 100644
--- a/animism-align/frontend/app/views/viewer/player/player.fullscreen.js
+++ b/animism-align/frontend/app/views/viewer/player/player.fullscreen.js
@@ -17,16 +17,21 @@ class PlayerFullscreen extends Component {
   }
 
   componentDidUpdate(prevProps) {
-    if (this.props.audio.play_ts === prevProps.audio.play_ts) return
+    const playTimeChanged = this.props.audio.play_ts !== prevProps.audio.play_ts
+    const seekTimeChanged = this.props.audio.seek_ts !== prevProps.audio.seek_ts
+    if (!playTimeChanged && !seekTimeChanged) return
     this.setCurrentElements()
   }
 
   setCurrentElements() {
     const { audio, timeline, currentSection, media } = this.props
-    const { play_ts } = audio
+    const { play_ts, seek_ts } = audio
+    // get elements at this play position
     let elements = timeline.filter(element => (
       floatInRange(element.start_ts, play_ts, element.fade_out_start_ts + 0.1)
     ))
+
+    // if the audio is paused, and the first el is a curtain, remove it
     if (elements.length && !audio.playing && elements[0].type === 'curtain') {
       elements.shift()
     }
@@ -35,7 +40,27 @@ class PlayerFullscreen extends Component {
         .sort((a,b) => a[0] - b[0])
         .map(p => p[1])
     }
+
+    // if the seek time matches any element, we wanna show that element immediately.
+    // additionally, if we were still inside another earlier element, dont show it at all
+    // did we recently seek to an element?
+    const seekedElements = elements.filter(e => e.start_ts <= seek_ts)
+    // if we did, then we want to use the filtered elements i.e. dont show earlier nodes
+    // also any elements starting at this point should transition immediately,
+    // to prevent flash of the underlying content.
+    if (seekedElements.length) {
+      elements = seekedElements.map(e => {
+        if (e.start_ts === seek_ts && e.type !== 'curtain') {
+          return {
+            ...e,
+            fadeInDuration: 0,
+          }
+        }
+        return e
+      })
+    }
     // console.log(elements)
+    // set nav style from top-most element
     if (elements.length) {
       const lastElement = elements[elements.length - 1]
       if (lastElement.color && lastElement.color.textColor === '#ffffff') {