break out fullscreen form. refactor heading

10 files changed, 140 insertions, 54 deletions

diff --git a/animism-align/frontend/app/views/align/components/annotations/annotation.form.js b/animism-align/frontend/app/views/align/components/annotations/annotation.form.js
index 7882884..5842aab 100644
--- a/animism-align/frontend/app/views/align/components/annotations/annotation.form.js
+++ b/animism-align/frontend/app/views/align/components/annotations/annotation.form.js
@@ -13,7 +13,7 @@ import { Select } from 'app/common'
 import { annotationFormLookup } from './annotationForms'
 
 const ANNOTATION_TYPES = [
-  'sentence', 'header', 'paragraph_end',
+  'sentence', 'section_heading', 'heading_text', 'paragraph_end',
   'video',
   'image', 'image_carousel',
   'curtain',
@@ -124,7 +124,8 @@ class AnnotationForm extends Component {
       >
         {this.renderButtons()}
         {annotation.type === 'sentence' && this.renderTextarea()}
-        {annotation.type === 'header' && this.renderTextarea()}
+        {annotation.type === 'section_heading' && this.renderTextarea()}
+        {annotation.type === 'text_heading' && this.renderTextarea()}
         {(annotation.type in annotationFormLookup) && this.renderElementForm()}
       </div>
     )
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 322f9e1..7c28b43 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
@@ -23,6 +23,7 @@
   background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.4));
 }
 .annotationIndex .annotation.media {
+  min-width: 300px;
   left: calc(405px + 0.5rem);
 }
 .annotation.sentence.even {
@@ -31,7 +32,10 @@
 .annotation.sentence.odd {
   background-color: #537;
 }
-.annotation.header {
+.annotation.section_heading {
+  background-color: #983;
+}
+.annotation.heading_text {
   background-color: #838;
 }
 .annotation.paragraph_end {
@@ -49,8 +53,11 @@
   padding: 0;
 }
 .annotation.curtain span {
+  position: absolute;
+  top: 0; left: 0;
   z-index: 1;
   color: black;
+  text-shadow: 0 0 3px #fff, 0 0 2px #fff, 0 0 1px #fff;
   padding: 0.25rem;
 }
 .annotation.curtain .fadeIn {
@@ -78,7 +85,10 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.annotationIndex.condensed .annotation.header {
+.annotationIndex.condensed .annotation.section_heading {
+  z-index: 2;
+}
+.annotationIndex.condensed .annotation.heading_text {
   z-index: 1;
 }
 .annotationIndex.condensed .annotation.paragraph_end {
@@ -91,9 +101,12 @@
   height: 2px; overflow: hidden; padding: 0; z-index: 0;
 }
 .annotationIndex.collapsed .annotation.sentence.selected {
-  z-index: 1;
+  z-index: 4;
+}
+.annotationIndex.collapsed .annotation.section_heading {
+  z-index: 3;
 }
-.annotationIndex.collapsed .annotation.header {
+.annotationIndex.collapsed .annotation.heading_text {
   z-index: 2;
 }
 .annotationIndex.collapsed .annotation.paragraph_end {
diff --git a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.image.js b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.image.js
index 8457b68..490c822 100644
--- a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.image.js
+++ b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.image.js
@@ -1,8 +1,9 @@
 import React, { Component } from 'react'
 
 import { Select } from 'app/common'
+import { AnnotationFormFullscreen } from './annotationForm.utility'
 
-export const AnnotationFormImage = ({ annotation, media, handleSettingsSelect }) => {
+export const AnnotationFormImage = ({ annotation, media, handleSettingsSelect, handleSettingsChange }) => {
   if (!media.lookup) return <div />
   const { lookup, order } = media
   const image_list_items = order.filter(id => lookup[id].type === 'image').map(id => {
@@ -13,7 +14,7 @@ export const AnnotationFormImage = ({ annotation, media, handleSettingsSelect })
     }
   })
   return (
-    <div>
+    <div className='options'>
       <Select
         name='media_id'
         className="media_id"
@@ -22,6 +23,11 @@ export const AnnotationFormImage = ({ annotation, media, handleSettingsSelect })
         defaultOption='Choose an image'
         onChange={handleSettingsSelect}
       />
+      <AnnotationFormFullscreen
+        annotation={annotation}
+        handleSettingsChange={handleSettingsChange}
+        handleSettingsSelect={handleSettingsSelect}
+      />
     </div>
   )
 }
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 887aaf5..4abb50e 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
@@ -1,18 +1,66 @@
 import React, { Component } from 'react'
 
 import { timestamp } from 'app/utils'
-import { TextInput, LabelDescription, Select } from 'app/common'
+import { TextInput, LabelDescription, Select, Checkbox } from 'app/common'
 import { CURTAIN_COLOR_SELECT_OPTIONS } from 'app/constants'
-import { curtainTimings } from 'app/utils/annotation.utils'
+import { annotationFadeTimings } from 'app/utils/annotation.utils'
 
 export const AnnotationFormCurtain = ({ annotation, handleSettingsChange, handleSettingsSelect }) => {
+  return (
+    <div className='options'>
+      <Select
+        title='Color'
+        name='color'
+        selected={annotation.settings.color}
+        options={CURTAIN_COLOR_SELECT_OPTIONS}
+        defaultOption='Pick a color'
+        onChange={handleSettingsSelect}
+      />
+
+      <TextInput
+        title="Curtain text"
+        name="curtain_text"
+        placeholder="Enter text or leave blank"
+        data={annotation.settings}
+        onChange={handleSettingsChange}
+        autoComplete="off"
+      />
+
+      <AnnotationFormFullscreen
+        alwaysAccessible
+        annotation={annotation}
+        handleSettingsChange={handleSettingsChange}
+        handleSettingsSelect={handleSettingsSelect}
+      />
+    </div>
+  )
+}
+
+export const AnnotationFormFullscreen = ({ annotation, alwaysAccessible, handleSettingsChange, handleSettingsSelect }) => {
+  if (!alwaysAccessible && !annotation.settings.fullscreen) {
+    return (
+      <Checkbox
+        label="Fullscreen"
+        name="fullscreen"
+        checked={annotation.settings.fullscreen}
+        onChange={handleSettingsSelect}
+      />
+    )
+  }
   const {
     fadeInDuration, fadeOutDuration, duration,
     start_ts, end_ts, fade_in_end_ts, fade_out_start_ts,
-  } = curtainTimings(annotation)
-
+  } = annotationFadeTimings(annotation)
   return (
-    <div className='options'>
+    <div>
+      {!alwaysAccessible && (
+        <Checkbox
+          label="Fullscreen"
+          name="fullscreen"
+          checked={annotation.settings.fullscreen}
+          onChange={handleSettingsSelect}
+        />
+      )}
       <TextInput
         title="Total duration"
         name="duration"
@@ -57,24 +105,6 @@ export const AnnotationFormCurtain = ({ annotation, handleSettingsChange, handle
         {' seconds, starts at '}
         {timestamp(fade_out_start_ts)}
       </LabelDescription>
-
-      <Select
-        title='Color'
-        name='color'
-        selected={annotation.settings.color}
-        options={CURTAIN_COLOR_SELECT_OPTIONS}
-        defaultOption='Pick a color'
-        onChange={handleSettingsSelect}
-      />
-
-      <TextInput
-        title="Curtain text"
-        name="curtain_text"
-        placeholder="Enter text or leave blank"
-        data={annotation.settings}
-        onChange={handleSettingsChange}
-        autoComplete="off"
-      />
     </div>
   )
-}
+}
\ No newline at end of file
diff --git a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.video.js b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.video.js
index 1fb552b..655efdc 100644
--- a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.video.js
+++ b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.video.js
@@ -13,7 +13,7 @@ export const AnnotationFormVideo = ({ annotation, media, handleSettingsSelect })
     }
   })
   return (
-    <div>
+    <div className='options'>
       <Select
         name='media_id'
         className="media_id"
diff --git a/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.image.js b/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.image.js
index 00c653a..70127b8 100644
--- a/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.image.js
+++ b/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.image.js
@@ -1,33 +1,46 @@
 import React, { Component } from 'react'
 
-import { thumbnailURL } from 'app/utils/annotation.utils'
+import { durationToHeight } from 'app/utils/align.utils'
+import { annotationFadeTimings, thumbnailURL } from 'app/utils/annotation.utils'
 
 import { checkAnnotationMediaNotReady, AnnotationMediaLoading } from './annotationTypes.utility'
 
-export const AnnotationImage = ({ y, annotation, media, selected, onClick, onDoubleClick }) => {
-  const { start_ts, text } = annotation
+export const AnnotationImage = ({ y, annotation, media, timeline, selected, onClick, onDoubleClick }) => {
+  const { text } = annotation
   const className = selected ? 'annotation media image selected' : 'annotation media image'
   if (checkAnnotationMediaNotReady(annotation, media)) {
     return <AnnotationMediaLoading y={y} className={className} onClick={onClick} onDoubleClick={onDoubleClick} />
   }
-  const data = media[annotation.settings.media_id]
+  const mediaItem = media[annotation.settings.media_id]
+
+  const {
+    fadeInDuration, fadeOutDuration, duration,
+    start_ts, end_ts, fade_in_end_ts, fade_out_start_ts,
+  } = annotationFadeTimings(annotation)
+  const durationHeight = annotation.settings.fullscreen ? durationToHeight(duration, timeline) : 'auto'
+  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)}
     >
-      <div className='img'>
-        <img src={thumbnailURL(data)} alt={data.title} />
-      </div>
       <div className='meta center'>
         <div>
-          <i>{data.title}</i><br />
-          {data.author}<br />
-          {data.date}
+          <i>{mediaItem.title}</i><br />
+          {mediaItem.author}<br />
+          {mediaItem.date}
         </div>
       </div>
     </div>
   )
 }
+
+/*
+      <div className='img'>
+        <img src={thumbnailURL(mediaItem)} alt={mediaItem.title} />
+      </div>
+*/
\ No newline at end of file
diff --git a/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.text.js b/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.text.js
index be4674f..19e0eaa 100644
--- a/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.text.js
+++ b/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.text.js
@@ -19,9 +19,24 @@ export const AnnotationSentence = ({ y, annotation, selected, onClick, onDoubleC
   )
 }
 
-export const AnnotationHeader = ({ y, annotation, selected, onClick, onDoubleClick }) => {
+export const AnnotationHeadingText = ({ y, annotation, selected, onClick, onDoubleClick }) => {
   const { start_ts, text } = annotation
-  const className = selected ? 'annotation header selected' : 'annotation header'
+  const className = selected ? 'annotation heading_text selected' : 'annotation heading_text'
+  return (
+    <div
+      className={className}
+      style={{ top: y }}
+      onClick={e => onClick(e, annotation)}
+      onDoubleClick={e => onDoubleClick(e, annotation)}
+    >
+      {text}
+    </div>
+  )
+}
+
+export const AnnotationSectionHeading = ({ y, annotation, selected, onClick, onDoubleClick }) => {
+  const { start_ts, text } = annotation
+  const className = selected ? 'annotation section_heading selected' : 'annotation section_heading'
   return (
     <div
       className={className}
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 38aa7ef..a3c35d4 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,6 +1,6 @@
 import React, { Component } from 'react'
 
-import { curtainTimings } from 'app/utils/annotation.utils'
+import { annotationFadeTimings } from 'app/utils/annotation.utils'
 import { durationToHeight } from 'app/utils/align.utils'
 
 export const AnnotationCurtain = ({ y, annotation, timeline, selected, onClick, onDoubleClick }) => {
@@ -8,7 +8,7 @@ export const AnnotationCurtain = ({ y, annotation, timeline, selected, onClick,
   const {
     fadeInDuration, fadeOutDuration, duration,
     start_ts, end_ts, fade_in_end_ts, fade_out_start_ts,
-  } = curtainTimings(annotation)
+  } = annotationFadeTimings(annotation)
   const durationHeight = durationToHeight(duration, timeline)
   const fadeInHeight = durationToHeight(fadeInDuration, timeline)
   const fadeOutHeight = durationToHeight(fadeOutDuration, timeline)
@@ -21,7 +21,10 @@ export const AnnotationCurtain = ({ y, annotation, timeline, selected, onClick,
     > 
       <div style={{ height: fadeInHeight }} className='fadeIn' />
       <div style={{ height: fadeOutHeight }} className='fadeOut' />
-      <span>Curtain: {annotation.settings.color}. {annotation.settings.curtain_text}</span>
+      <span style={{ top: fadeInHeight }}>
+        Curtain: {annotation.settings.color}.
+        {annotation.settings.curtain_text}
+      </span>
     </div>
   )
 }
diff --git a/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.video.js b/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.video.js
index d2fc4e5..1ebc804 100644
--- a/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.video.js
+++ b/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.video.js
@@ -17,9 +17,6 @@ export const AnnotationVideo = ({ y, annotation, media, selected, onClick, onDou
       onClick={e => onClick(e, annotation)}
       onDoubleClick={e => onDoubleClick(e, annotation)}
     >
-      <div className='img'>
-        <img src={thumbnailURL(data)} alt={data.title} />
-      </div>
       <div className='meta center'>
         <div>
           <i>{data.title}</i><br />
@@ -31,3 +28,8 @@ export const AnnotationVideo = ({ y, annotation, media, selected, onClick, onDou
   )
 }
 
+/*
+      <div className='img'>
+        <img src={thumbnailURL(data)} alt={data.title} />
+      </div>
+*/
\ No newline at end of file
diff --git a/animism-align/frontend/app/views/align/components/annotations/annotationTypes/index.js b/animism-align/frontend/app/views/align/components/annotations/annotationTypes/index.js
index ee30167..1a1c5ec 100644
--- a/animism-align/frontend/app/views/align/components/annotations/annotationTypes/index.js
+++ b/animism-align/frontend/app/views/align/components/annotations/annotationTypes/index.js
@@ -1,7 +1,9 @@
 import React from 'react'
 
 import {
-  AnnotationSentence, AnnotationHeader,
+  AnnotationSentence,
+  AnnotationHeadingText,
+  AnnotationSectionHeading,
   AnnotationParagraphEnd,
 } from './annotationTypes.text'
 
@@ -19,7 +21,8 @@ import {
 
 export const AnnotationElementLookup = {
   sentence: React.memo(AnnotationSentence),
-  header: React.memo(AnnotationHeader),
+  heading_text: React.memo(AnnotationHeadingText),
+  section_heading: React.memo(AnnotationSectionHeading),
   paragraph_end: React.memo(AnnotationParagraphEnd),
   video: React.memo(AnnotationVideo),
   image: React.memo(AnnotationImage),