2 files changed, 21 insertions, 5 deletions
diff --git a/animism-align/frontend/app/views/viewer/player/player.fullscreen.css b/animism-align/frontend/app/views/viewer/player/player.fullscreen.css
index 28e90c0..5963433 100644
--- a/animism-align/frontend/app/views/viewer/player/player.fullscreen.css
+++ b/animism-align/frontend/app/views/viewer/player/player.fullscreen.css
@@ -43,12 +43,13 @@
   justify-content: center;
 }
 
-.viewer-fullscreen .curtain {
+.viewer-fullscreen .fullscreen-element.curtain {
+  height: 100vh;
 }
 
 .viewer-fullscreen .image div {
   width: 90%;
-  height: 90%;
+  height: calc(100vh - 6rem);
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center center;
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 076b7ac..e16a962 100644
--- a/animism-align/frontend/app/views/viewer/player/player.fullscreen.js
+++ b/animism-align/frontend/app/views/viewer/player/player.fullscreen.js
@@ -6,6 +6,7 @@ import actions from 'app/actions'
 import { floatInRange, floatLT } from 'app/utils'
 
 import { fullscreenComponents } from './components.fullscreen'
+import { makeFullscreenEvent } from '../viewer.actions'
 
 class PlayerFullscreen extends Component {
   state = {
@@ -42,13 +43,16 @@ class PlayerFullscreen extends Component {
     }
 
     // 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
+    // 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)
+    // console.log(elements)
+    const justSeeked = Math.abs(seek_ts - play_ts) < 5.0 && (Math.abs(seek_ts - currentSection.start_ts) > 2.0)
+    const seekedElements = elements.filter(e => (e.start_ts >= seek_ts || e.fade_out_start_ts > seek_ts + 5.0))
+    // console.log(seekedElements.length, elements.length, play_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) {
+    if (justSeeked && seekedElements.length) {
       // console.log(play_ts, seek_ts, 'seeked', seekedElements)
       elements = seekedElements.map(e => {
         if (e.start_ts === seek_ts && e.type !== 'curtain') {
@@ -59,6 +63,17 @@ class PlayerFullscreen extends Component {
         }
         return e
       })
+      elements.unshift(makeFullscreenEvent(100, {
+        start_ts: seek_ts,
+        end_ts: seek_ts + 1.3,
+        type: 'curtain',
+        settings: {
+          color: elements[0].annotation.settings.color,
+          fade_in_duration: '0:00',
+          fade_out_duration: '0:00.8',
+          duration: '0:01.3',
+        }
+      }))
     }
     // console.log(elements)
     // set nav style from top-most element