media labels..

3 files changed, 40 insertions, 5 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 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>
   )
 }