break out fullscreen form. refactor heading

3 files changed, 63 insertions, 27 deletions

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"