1 files changed, 27 insertions, 2 deletions
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') {