play to end of vitrine section (no inline view)

3 files changed, 56 insertions, 45 deletions

diff --git a/animism-align/frontend/app/views/viewer/player/components.media/media.css b/animism-align/frontend/app/views/viewer/player/components.media/media.css
index 6f9e96a..a35f2fa 100644
--- a/animism-align/frontend/app/views/viewer/player/components.media/media.css
+++ b/animism-align/frontend/app/views/viewer/player/components.media/media.css
@@ -302,10 +302,11 @@
 }
 .vitrine-items .vitrine-item:hover .zoomPlus .cross {
   stroke: #000;
-  stroke-width: 0.5;
+  stroke-width: 1.5;
 }
 .vitrine-items .vitrine-item:hover .zoomPlus .ring {
   fill: #fff;
+  stroke-width: 1.2;
 }
 .vitrine-items .vitrine-item .zoomPlus .ring-inner {
   stroke: transparent;
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 3484560..6ec6e3d 100644
--- a/animism-align/frontend/app/views/viewer/player/player.fullscreen.js
+++ b/animism-align/frontend/app/views/viewer/player/player.fullscreen.js
@@ -32,56 +32,66 @@ class PlayerFullscreen extends Component {
     const { audio, timeline, currentSection, media } = this.props
     let { play_ts, seek_ts } = audio
     play_ts = clamp(play_ts, currentSection.start_ts, currentSection.end_ts)
-    // 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()
-    }
-    if (elements.length > 1) {
-      elements = elements.map((e, i) => [(e.type === 'curtain' ? i + 100 : i), e])
-        .sort((a,b) => a[0] - b[0])
-        .map(p => p[1])
+    let elements;
+    // console.log(timeline)
+    // some classes can be singleton media for an entire chapter, like vitrines
+    if (timeline.length === 1 && timeline[0].type === 'vitrine') {
+      elements = timeline
     }
+    else {
+      // get elements at this play position
+      elements = timeline.filter(element => (
+        floatInRange(element.start_ts, play_ts, element.fade_out_start_ts + 0.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?
-    // 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 (justSeeked && seekedElements.length) {
-      // console.log(play_ts, seek_ts, 'seeked', seekedElements)
-      elements = seekedElements.map(e => {
-        if (e.start_ts === seek_ts && e.type !== 'curtain') {
-          return {
-            ...e,
-            fadeInDuration: 0,
+      // 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()
+      }
+      if (elements.length > 1) {
+        elements = elements.map((e, i) => [(e.type === 'curtain' ? i + 100 : i), e])
+          .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?
+      // 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 (justSeeked && seekedElements.length) {
+        // console.log(play_ts, seek_ts, 'seeked', seekedElements)
+        elements = seekedElements.map(e => {
+          if (e.start_ts === seek_ts && e.type !== 'curtain') {
+            return {
+              ...e,
+              fadeInDuration: 0,
+            }
           }
-        }
-        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',
-        }
-      }))
+          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
+    // furthermore, "persistent" elements continue to show even if the episode is paused
     let persist = false;
     if (elements.length) {
       const lastElement = elements[elements.length - 1]
diff --git a/animism-align/frontend/app/views/viewer/viewer.actions.js b/animism-align/frontend/app/views/viewer/viewer.actions.js
index a29383b..cd4b79f 100644
--- a/animism-align/frontend/app/views/viewer/viewer.actions.js
+++ b/animism-align/frontend/app/views/viewer/viewer.actions.js
@@ -170,7 +170,7 @@ export const loadSections = () => dispatch => {
     time_to_first_fullscreen_element = 0
     if (currentSection.fullscreenTimeline.length) {
       time_to_first_fullscreen_element = Math.abs(currentSection.fullscreenTimeline[0].start_ts - currentSection.start_ts)
-      if (time_to_first_fullscreen_element < 1.0) {
+      if (time_to_first_fullscreen_element < 2.0) {
         currentSection.fullscreenTimeline[0].start_ts = currentSection.start_ts
         time_to_first_fullscreen_element = 0.0
       }