padding.. initial curtains...

5 files changed, 18 insertions, 13 deletions

diff --git a/animism-align/frontend/app/views/align/components/timeline/cursorRegion.component.js b/animism-align/frontend/app/views/align/components/timeline/cursorRegion.component.js
index cce2001..a0c9bd7 100644
--- a/animism-align/frontend/app/views/align/components/timeline/cursorRegion.component.js
+++ b/animism-align/frontend/app/views/align/components/timeline/cursorRegion.component.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React from 'react'
 
 import { ZOOM_STEPS } from 'app/constants'
 import { timestamp } from 'app/utils'
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 bd6b4c0..c43c207 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
@@ -94,12 +94,13 @@
 
 /* carousel */
 
-.carousel-container {
-  margin-top: 0.5rem;
+.inline-element .carousel-container {
   margin-bottom: 1.5rem;
-  /*padding: 1rem;*/
   position: relative;
 }
+.inline-element:last-child .carousel-container {
+  margin-bottom: 0;
+}
 .carousel-items {
   width: 100%;
 }
@@ -110,7 +111,7 @@
   height: calc(100vh - 1rem);
 }
 .viewer-fullscreen .carousel-items {
-  height: calc(100vh - 9rem);
+  height: calc(100vh - 19rem);
 }
 .carousel-item {
   display: flex;
@@ -121,7 +122,7 @@
   position: relative;
   display: inline-block;
   max-width: 100%;
-  max-height: calc(100vh - 10rem);
+  max-height: calc(100vh - 19rem);
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center center;
@@ -130,7 +131,7 @@
   width: auto;
   height: auto;
   max-width: 100%;
-  max-height: calc(100vh - 10rem);
+  max-height: calc(100vh - 19rem);
   opacity: 0;
   pointer-events: none;
   /*object-fit: contain;*/
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 24fc52e..de90bf2 100644
--- a/animism-align/frontend/app/views/viewer/player/player.fullscreen.js
+++ b/animism-align/frontend/app/views/viewer/player/player.fullscreen.js
@@ -24,9 +24,12 @@ class PlayerFullscreen extends Component {
   setCurrentElements() {
     const { audio, timeline, currentSection, media } = this.props
     const { play_ts } = audio
-    const elements = timeline.filter(element => (
+    let elements = timeline.filter(element => (
       floatInRange(element.start_ts, play_ts, element.fade_out_start_ts + 0.1)
     ))
+    if (elements.length && !audio.playing && elements[0].type === 'curtain') {
+      elements.shift()
+    }
     // console.log(elements)
     if (elements.length) {
       const lastElement = elements[elements.length - 1]
diff --git a/animism-align/frontend/app/views/viewer/player/player.transcript.css b/animism-align/frontend/app/views/viewer/player/player.transcript.css
index 72faf7b..b1bf64d 100644
--- a/animism-align/frontend/app/views/viewer/player/player.transcript.css
+++ b/animism-align/frontend/app/views/viewer/player/player.transcript.css
@@ -4,7 +4,7 @@
   width: 100%;
   height: 100%;
   overflow-x: hidden;
-  overflow-y: scroll;
+  overflow-y: auto;
 }
 
 .player-transcript.black {
diff --git a/animism-align/frontend/app/views/viewer/viewer.actions.js b/animism-align/frontend/app/views/viewer/viewer.actions.js
index 3800623..16a3d8f 100644
--- a/animism-align/frontend/app/views/viewer/viewer.actions.js
+++ b/animism-align/frontend/app/views/viewer/viewer.actions.js
@@ -157,25 +157,26 @@ export const loadSections = () => dispatch => {
         time_to_first_fullscreen_element = 0.0
       }
     }
-    if (!currentSection.fullscreenTimeline.length || time_to_first_fullscreen_element > 0.0) {
+    if ((!currentSection.fullscreenTimeline.length || time_to_first_fullscreen_element > 0.0) && currentSection.index !== 0) {
       // here we should create a dummy curtain event
       initial_curtain_event = makeFullscreenEvent(0, {
         start_ts: currentSection.start_ts,
+        end_ts: currentSection.start_ts + 1.1,
         type: 'curtain',
         settings: {
           color: CURTAIN_COLOR_LOOKUP.white, // TODO: get this from the first annotation
           fade_in_duration: '0.0',
           fade_out_duration: '1.0',
-          duration: '0',
+          duration: '1.0',
         }
       })
       // 
-      currentSection.fullscreenTimeline.push(initial_curtain_event)
+      currentSection.fullscreenTimeline.unshift(initial_curtain_event)
     }
     currentSection.duration = currentSection.end_ts - currentSection.start_ts
   }
 
-  // console.log(sections)
+  console.log(sections)
   // console.log(fullscreenTimeline)
   dispatch({ type: types.viewer.load_sections, sections })
 }