media labels..

11 files changed, 77 insertions, 18 deletions

diff --git a/animism-align/frontend/app/constants.js b/animism-align/frontend/app/constants.js
index b7757d0..b73a0ad 100644
--- a/animism-align/frontend/app/constants.js
+++ b/animism-align/frontend/app/constants.js
@@ -38,9 +38,26 @@ export const ROMAN_NUMERALS = [
   'XI', 'XII', 'XIII', 'XIV', 'XV', 'XVI', 'XVII', 'XVIII', 'XIX', 'XX',
 ]
 
+export const TEXT_TYPES = new Set([
+  'header', 'sentence',
+])
+
 export const MEDIA_TYPES = new Set([
-  'image', 'gallery', 'vitrine',
+  'image', 'carousel', 'grid',
   'video',
+  'vitrine',
+])
+
+export const MEDIA_LABEL_TYPES = {
+  image: 'Image Gallery',
+  carousel: 'Image Gallery',
+  grid: 'Image Gallery',
+  video: 'Video',
+  vitrine: 'Vitrine',
+}
+
+export const UTILITY_TYPES = new Set([
+  'curtain', 'paragraph_end',
 ])
 
 export const CURTAIN_COLORS = [
diff --git a/animism-align/frontend/app/utils/align.utils.js b/animism-align/frontend/app/utils/align.utils.js
index f64c5c8..77586d8 100644
--- a/animism-align/frontend/app/utils/align.utils.js
+++ b/animism-align/frontend/app/utils/align.utils.js
@@ -30,6 +30,11 @@ export const timeToPosition = (ts, { start_ts, zoom, duration }) => {
   return (ts - timeMin) / timeWidth * INNER_HEIGHT
 }
 
+export const durationToHeight = (duration, { zoom }) => {
+  const secondsPerPixel = ZOOM_STEPS[zoom] * 0.1
+  return duration / secondsPerPixel  
+}
+
 export const getFirstPunctuationMarkIndex = text => {
   const indexes = [
     text.indexOf('. '),
diff --git a/animism-align/frontend/app/utils/index.js b/animism-align/frontend/app/utils/index.js
index 273c0ef..d0c75dd 100644
--- a/animism-align/frontend/app/utils/index.js
+++ b/animism-align/frontend/app/utils/index.js
@@ -71,7 +71,7 @@ export const timestamp = (n = 0, fps = 1, ms = false) => {
 }
 
 export const timestampToSeconds = time_str => {
-  const time_str_parts = time_str.trim().split(":").map(s => parseFloat(s))
+  const time_str_parts = (time_str || "").trim().split(":").map(s => parseFloat(s))
   if (time_str_parts.length === 3) {
     return (time_str_parts[0] * 60 + time_str_parts[1]) * 60 + time_str_parts[2]
   }
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 d39e5de..170934f 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
@@ -43,7 +43,29 @@
 .annotationIndex .annotation.utility {
   left: calc(405px + 0.5rem);
 }
-
+.annotation.curtain {
+  background-image: linear-gradient(rgba(255,255,255,1.0), rgba(255,255,255,1.0));
+  width: 8rem;
+  padding: 0;
+}
+.annotation.curtain span {
+  color: black;
+  padding: 0.25rem;
+}
+.annotation.curtain .fadeIn {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  background-image: linear-gradient(rgba(0,0,0,1.0), rgba(255,255,255,1.0));
+  background-size: cover;
+}
+.annotation.curtain .fadeOut {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  background-image: linear-gradient(rgba(255,255,255,1.0), rgba(0,0,0,1.0));
+  background-size: cover;
+}
 
 /* Condensed layout (first lines) */
 
diff --git a/animism-align/frontend/app/views/align/components/annotations/annotation.index.js b/animism-align/frontend/app/views/align/components/annotations/annotation.index.js
index da1038f..0f9ee30 100644
--- a/animism-align/frontend/app/views/align/components/annotations/annotation.index.js
+++ b/animism-align/frontend/app/views/align/components/annotations/annotation.index.js
@@ -102,6 +102,7 @@ class AnnotationIndex extends PureComponent {
               selected={annotation.id === selected_annotation_id}
               annotation={annotation}
               media={media}
+              timeline={timeline}
               onClick={this.handleClick}
               onDoubleClick={this.handleDoubleClick}
             />
diff --git a/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.utility.js b/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.utility.js
index 8bd0b9d..38aa7ef 100644
--- a/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.utility.js
+++ b/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.utility.js
@@ -1,15 +1,27 @@
 import React, { Component } from 'react'
 
-export const AnnotationCurtain = ({ y, annotation, selected, onClick, onDoubleClick }) => {
+import { curtainTimings } from 'app/utils/annotation.utils'
+import { durationToHeight } from 'app/utils/align.utils'
+
+export const AnnotationCurtain = ({ y, annotation, timeline, selected, onClick, onDoubleClick }) => {
   const className = selected ? 'annotation utility curtain selected' : 'annotation utility curtain'
+  const {
+    fadeInDuration, fadeOutDuration, duration,
+    start_ts, end_ts, fade_in_end_ts, fade_out_start_ts,
+  } = curtainTimings(annotation)
+  const durationHeight = durationToHeight(duration, timeline)
+  const fadeInHeight = durationToHeight(fadeInDuration, timeline)
+  const fadeOutHeight = durationToHeight(fadeOutDuration, timeline)
   return (
     <div
       className={className}
-      style={{ top: y }}
+      style={{ top: y, height: durationHeight }}
       onClick={e => onClick(e, annotation)}
       onDoubleClick={e => onDoubleClick(e, annotation)}
-    >
-      CURTAIN
+    > 
+      <div style={{ height: fadeInHeight }} className='fadeIn' />
+      <div style={{ height: fadeOutHeight }} className='fadeOut' />
+      <span>Curtain: {annotation.settings.color}. {annotation.settings.curtain_text}</span>
     </div>
   )
 }
diff --git a/animism-align/frontend/app/views/media/components/media.form.js b/animism-align/frontend/app/views/media/components/media.form.js
index af53014..9dbc130 100644
--- a/animism-align/frontend/app/views/media/components/media.form.js
+++ b/animism-align/frontend/app/views/media/components/media.form.js
@@ -24,7 +24,7 @@ const newMedia = () => ({
   settings: {},
 })
 
-const MEDIA_TYPES = [
+const MEDIA_UPLOAD_TYPES = [
   'image', 'video'
 ].map(name => ({ name, label: capitalize(name) }))
 
@@ -152,7 +152,7 @@ export default class MediaForm extends Component {
             title='Media Type'
             name='type'
             selected={data.type}
-            options={MEDIA_TYPES}
+            options={MEDIA_UPLOAD_TYPES}
             onChange={this.handleSelect}
           />
 
diff --git a/animism-align/frontend/app/views/nav/header.component.js b/animism-align/frontend/app/views/nav/header.component.js
index 96e4f2a..af90e54 100644
--- a/animism-align/frontend/app/views/nav/header.component.js
+++ b/animism-align/frontend/app/views/nav/header.component.js
@@ -15,7 +15,7 @@ function Header(props) {
     <header>
       <PlayButton />
       <div>
-        <Link to="/align">Align</Link>
+        <Link to="/align">Timeline</Link>
         <Link to="/paragraph">Transcript</Link>
         <Link to="/media">Media</Link>
         <Link to="/viewer">Viewer</Link>
diff --git a/animism-align/frontend/app/views/paragraph/components/paragraph.list.js b/animism-align/frontend/app/views/paragraph/components/paragraph.list.js
index 3492d7f..02db0e2 100644
--- a/animism-align/frontend/app/views/paragraph/components/paragraph.list.js
+++ b/animism-align/frontend/app/views/paragraph/components/paragraph.list.js
@@ -5,7 +5,6 @@ import { connect } from 'react-redux'
 
 import { floatLT, floatLTE } from 'app/utils'
 import ParagraphForm from '../components/paragraph.form'
-import { MEDIA_TYPES } from 'app/constants'
 
 class ParagraphList extends Component {
   state = {
diff --git a/animism-align/frontend/app/views/viewer/sections/viewer.sections.js b/animism-align/frontend/app/views/viewer/sections/viewer.sections.js
index cd5b4f0..085749f 100644
--- a/animism-align/frontend/app/views/viewer/sections/viewer.sections.js
+++ b/animism-align/frontend/app/views/viewer/sections/viewer.sections.js
@@ -37,7 +37,7 @@ class ViewerSections extends Component {
                   {section.title}
                 </div>
                 <div className="section-media">
-                  {section.mediaTypes}
+                  {section.mediaLabels}
                 </div>
               </div>
             </div>
diff --git a/animism-align/frontend/app/views/viewer/viewer.actions.js b/animism-align/frontend/app/views/viewer/viewer.actions.js
index 563b18f..73e34fd 100644
--- a/animism-align/frontend/app/views/viewer/viewer.actions.js
+++ b/animism-align/frontend/app/views/viewer/viewer.actions.js
@@ -1,6 +1,6 @@
 import * as types from 'app/types'
 import { store, history, dispatch } from 'app/store'
-import { MEDIA_TYPES } from 'app/constants'
+import { MEDIA_TYPES, MEDIA_LABEL_TYPES } from 'app/constants'
 
 const newSection = (annotation, index, mediaIndex) => ({
   start_ts: annotation.start_ts,
@@ -14,7 +14,7 @@ export const loadSections = () => dispatch => {
   let sections = []
   let currentSection
   let mediaIndex = 0
-  let mediaTypes = {}
+  let mediaLabels = {}
   const state = store.getState()
   const { order: annotationOrder, lookup: annotationLookup } = state.annotation.index
   const { lookup: mediaLookup } = state.media.index
@@ -23,8 +23,8 @@ export const loadSections = () => dispatch => {
     const annotation = annotationLookup[annotation_id]
     if (annotation.type === 'header') {
       if (currentSection) {
-        currentSection.mediaTypes = Object.keys(mediaTypes).join(', ')
-        mediaTypes = {}
+        currentSection.mediaLabels = Object.keys(mediaLabels).join(', ')
+        mediaLabels = {}
       }
       currentSection = newSection(annotation, sections.length, mediaIndex)
       sections.push(currentSection)
@@ -36,6 +36,9 @@ export const loadSections = () => dispatch => {
           start_ts: annotation.start_ts,
           media
         })
+        if (media.type in MEDIA_LABEL_TYPES) {
+          mediaLabels[MEDIA_LABEL_TYPES[media.type]] = true
+        }
         mediaIndex += 1
       } else {
         console.error("media found before first section")
@@ -43,8 +46,8 @@ export const loadSections = () => dispatch => {
     }
   })
 
-  if (currentSection) {
-    currentSection.mediaTypes = Object.keys(mediaTypes).join(', ')
+  if (currentSection && Object.keys(mediaLabels).length) {
+    currentSection.mediaLabels = Object.keys(mediaLabels).join(', ')
   }
 
   // console.log(sections)