trying to fix flicker with curtains but its hard

4 files changed, 24 insertions, 7 deletions

diff --git a/animism-align/frontend/app/views/align/components/annotations/annotation.index.css b/animism-align/frontend/app/views/align/components/annotations/annotation.index.css
index b6d89fe..a14deb6 100644
--- a/animism-align/frontend/app/views/align/components/annotations/annotation.index.css
+++ b/animism-align/frontend/app/views/align/components/annotations/annotation.index.css
@@ -54,6 +54,7 @@
 }
 .annotationIndex .annotation.text_plate {
   left: calc(605px + 0.5rem);
+  width: 250px;
 }
 .annotationIndex .annotation.utility.curtain {
   background-image: linear-gradient(rgba(255,255,255,1.0), rgba(255,255,255,1.0));
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
diff --git a/animism-align/frontend/app/views/viewer/viewer.actions.js b/animism-align/frontend/app/views/viewer/viewer.actions.js
index 1eb2997..86c8d2d 100644
--- a/animism-align/frontend/app/views/viewer/viewer.actions.js
+++ b/animism-align/frontend/app/views/viewer/viewer.actions.js
@@ -190,7 +190,7 @@ export const loadSections = () => dispatch => {
     section.inlineParagraphCount = section.paragraphs.filter(p => !p.hidden).length
     // console.log(i, section.inlineParagraphCount)
   })
-  console.log(sections)
+  // console.log(sections)
   // console.log(footnoteList)
   // console.log(fullscreenTimeline)
   dispatch({ type: types.viewer.load_sections, sections, footnoteList })
@@ -209,7 +209,7 @@ const newSection = (annotation, index, mediaIndex) => ({
   section_nav_color: annotation.settings.section_nav_color || 'white',
 })
 
-const makeFullscreenEvent = (index, annotation) => {
+export const makeFullscreenEvent = (index, annotation) => {
   const timing = annotationFadeTimings(annotation)
   const event = {
     ...timing,