4 files changed, 31 insertions, 6 deletions
diff --git a/animism-align/frontend/app/common/form.component.js b/animism-align/frontend/app/common/form.component.js
index 3b55162..4eee10b 100644
--- a/animism-align/frontend/app/common/form.component.js
+++ b/animism-align/frontend/app/common/form.component.js
@@ -112,7 +112,7 @@ export class Select extends Component {
     }
     const { focused } = this.state
     return (
-      <label>
+      <label className='selectLabel'>
         {title && <span>{title}</span>}
         <div className={(focused ? 'select focus' : 'select') + " " + (className || "")}>
           <div>{(options.find(opt => String(opt.name) === String(selected)) || {label: defaultOption}).label}</div>
diff --git a/animism-align/frontend/app/common/form.css b/animism-align/frontend/app/common/form.css
index bbee27e..ac72fc8 100644
--- a/animism-align/frontend/app/common/form.css
+++ b/animism-align/frontend/app/common/form.css
@@ -155,6 +155,9 @@ input[type="checkbox"]:checked:after {
 
 /* select */
 
+.selectLabel {
+  margin-bottom: 0.5rem;
+}
 .select {
   position: relative;
   width: 9rem;
diff --git a/animism-align/frontend/app/utils/annotation.utils.js b/animism-align/frontend/app/utils/annotation.utils.js
index e69de29..9622f80 100644
--- a/animism-align/frontend/app/utils/annotation.utils.js
+++ b/animism-align/frontend/app/utils/annotation.utils.js
@@ -0,0 +1,22 @@
+import { timestampToSeconds } from 'app/utils'
+
+export const curtainTimings = annotation => {
+  const fadeInDuration = timestampToSeconds(annotation.settings.fade_in_duration)
+  const fadeOutDuration = timestampToSeconds(annotation.settings.fade_out_duration)
+  const duration = timestampToSeconds(annotation.settings.duration)
+
+  const start_ts = annotation.start_ts
+  const end_ts = start_ts + duration
+  const fade_in_end_ts = start_ts + fadeInDuration
+  const fade_out_start_ts = end_ts - fadeOutDuration
+
+  return {
+    fadeInDuration, fadeOutDuration, duration,
+    start_ts, end_ts, fade_in_end_ts, fade_out_start_ts,
+  }
+}
+
+export const thumbnailURL = data => {
+  if (data.type === 'video') return data.settings.video.thumbnail_url
+  if (data.type === 'image') return data.settings.thumbnail.url
+}
diff --git a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.utility.js b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.utility.js
index 2b6f868..887aaf5 100644
--- a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.utility.js
+++ b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.utility.js
@@ -7,9 +7,9 @@ import { curtainTimings } from 'app/utils/annotation.utils'
 
 export const AnnotationFormCurtain = ({ annotation, handleSettingsChange, handleSettingsSelect }) => {
   const {
-    fadeInDurationInSeconds, fadeOutDurationInSeconds, durationInSeconds,
+    fadeInDuration, fadeOutDuration, duration,
     start_ts, end_ts, fade_in_end_ts, fade_out_start_ts,
-  } = curtainTimings(annotations)
+  } = curtainTimings(annotation)
 
   return (
     <div className='options'>
@@ -23,7 +23,7 @@ export const AnnotationFormCurtain = ({ annotation, handleSettingsChange, handle
         autoComplete="off"
       />
       <LabelDescription>
-        {durationInSeconds}
+        {duration}
         {' seconds, ends at '}
         {timestamp(end_ts)}
       </LabelDescription>
@@ -38,7 +38,7 @@ export const AnnotationFormCurtain = ({ annotation, handleSettingsChange, handle
         autoComplete="off"
       />
       <LabelDescription>
-        {fadeInDurationInSeconds}
+        {fadeInDuration}
         {' seconds, ends at '}
         {timestamp(fade_in_end_ts)}
       </LabelDescription>
@@ -53,7 +53,7 @@ export const AnnotationFormCurtain = ({ annotation, handleSettingsChange, handle
         autoComplete="off"
       />
       <LabelDescription>
-        {fadeOutDurationInSeconds}
+        {fadeOutDuration}
         {' seconds, starts at '}
         {timestamp(fade_out_start_ts)}
       </LabelDescription>