From 7e6dfb31af78b9d5a1a4ccec6998b14beb8a1194 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Wed, 10 Mar 2021 17:33:21 +0100
Subject: refactor annotation forms out of the directory nest

---
 .../annotationForms/annotationForm.gallery.js      | 132 ++++++++++++++++
 .../annotationForms/annotationForm.image.js        | 120 ++++++++++++++
 .../annotationForms/annotationForm.text.js         | 153 ++++++++++++++++++
 .../annotationForms/annotationForm.utility.js      | 172 +++++++++++++++++++++
 .../annotationForms/annotationForm.video.js        | 160 +++++++++++++++++++
 .../annotation/components/annotationForms/index.js |  46 ++++++
 6 files changed, 783 insertions(+)
 create mode 100644 animism-align/frontend/app/views/editor/annotation/components/annotationForms/annotationForm.gallery.js
 create mode 100644 animism-align/frontend/app/views/editor/annotation/components/annotationForms/annotationForm.image.js
 create mode 100644 animism-align/frontend/app/views/editor/annotation/components/annotationForms/annotationForm.text.js
 create mode 100644 animism-align/frontend/app/views/editor/annotation/components/annotationForms/annotationForm.utility.js
 create mode 100644 animism-align/frontend/app/views/editor/annotation/components/annotationForms/annotationForm.video.js
 create mode 100644 animism-align/frontend/app/views/editor/annotation/components/annotationForms/index.js

(limited to 'animism-align/frontend/app/views/editor/annotation/components/annotationForms')

diff --git a/animism-align/frontend/app/views/editor/annotation/components/annotationForms/annotationForm.gallery.js b/animism-align/frontend/app/views/editor/annotation/components/annotationForms/annotationForm.gallery.js
new file mode 100644
index 0000000..0a8b3fb
--- /dev/null
+++ b/animism-align/frontend/app/views/editor/annotation/components/annotationForms/annotationForm.gallery.js
@@ -0,0 +1,132 @@
+import React, { Component } from 'react'
+
+import { CURTAIN_COLOR_SELECT_OPTIONS } from 'app/constants'
+import { TextInput, Select, Checkbox, LabelDescription } from 'app/common'
+import { AnnotationFormFullscreen } from './annotationForm.utility'
+import { makeMediaItems, makeGalleryItems } from 'app/utils/annotation.utils'
+
+export const AnnotationFormGallery = ({ annotation, media, handleSettingsSelect, handleSettingsChange }) => {
+  if (!media.lookup) return <div />
+  const image_list_items = makeMediaItems(media, ['gallery'])
+  return (
+    <div className='options'>
+      <Select
+        name='media_id'
+        className="media_id"
+        selected={annotation.settings.media_id}
+        options={image_list_items}
+        defaultOption='Choose a gallery'
+        onChange={handleSettingsSelect}
+      />
+
+      <TextInput
+        title="Title"
+        name="title"
+        placeholder="Enter title or leave blank"
+        data={annotation.settings}
+        onChange={handleSettingsChange}
+        autoComplete="off"
+      />
+      
+      <Checkbox
+        label="Fullscreen"
+        name="fullscreen"
+        checked={annotation.settings.fullscreen}
+        onChange={handleSettingsSelect}
+      />
+
+      <Checkbox
+        label="Inline"
+        name="inline"
+        checked={annotation.settings.inline}
+        onChange={handleSettingsSelect}
+      />
+
+      <Checkbox
+        label="Hide in transcript"
+        name="hide_in_transcript"
+        checked={annotation.settings.hide_in_transcript}
+        onChange={handleSettingsSelect}
+      />
+
+      <Select
+        title='Color'
+        name='color'
+        selected={annotation.settings.color}
+        options={CURTAIN_COLOR_SELECT_OPTIONS}
+        defaultOption='Pick a color'
+        onChange={handleSettingsSelect}
+      />
+
+      <Select
+        title='Arrow Color'
+        name='arrow_color'
+        selected={annotation.settings.arrow_color}
+        options={CURTAIN_COLOR_SELECT_OPTIONS}
+        defaultOption='Color of UI arrows'
+        onChange={handleSettingsSelect}
+      />
+
+      {(annotation.settings.fullscreen && !annotation.settings.inline) && (
+        <AnnotationFormFullscreen
+          annotation={annotation}
+          handleSettingsChange={handleSettingsChange}
+          handleSettingsSelect={handleSettingsSelect}
+        />
+      )}
+    </div>
+  )
+}
+
+export const AnnotationFormGalleryAdvance = ({ annotation, media, handleSettingsSelect, handleSettingsChange }) => {
+  if (!media.lookup) return <div />
+  const image_list_items = makeMediaItems(media, ['gallery'])
+  const { gallery_items, thumbnail } = makeGalleryItems(annotation, media)
+  return (
+    <div className='options'>
+      <Select
+        name='media_id'
+        className="media_id"
+        selected={annotation.settings.media_id}
+        options={image_list_items}
+        defaultOption='Choose a gallery'
+        onChange={handleSettingsSelect}
+      />
+
+      {gallery_items && (
+        <Select
+          name='frame_index'
+          selected={annotation.settings.frame_index}
+          options={gallery_items}
+          defaultOption='Choose an image'
+          onChange={handleSettingsSelect}
+        />
+      )}
+
+      {thumbnail && (
+        <img src={thumbnail.url} />
+      )}
+
+      <Checkbox
+        label="Advance half a frame forward to fit two images in view"
+        name="half_frame"
+        checked={annotation.settings.half_frame}
+        onChange={handleSettingsSelect}
+      />
+
+      <Checkbox
+        label="Hide in transcript"
+        name="hide_in_transcript"
+        checked={annotation.settings.hide_in_transcript}
+        onChange={handleSettingsSelect}
+      />
+
+      <Checkbox
+        label="Show in checklist"
+        name="show_in_checklist"
+        checked={annotation.settings.show_in_checklist}
+        onChange={handleSettingsSelect}
+      />
+    </div>
+  )
+}
diff --git a/animism-align/frontend/app/views/editor/annotation/components/annotationForms/annotationForm.image.js b/animism-align/frontend/app/views/editor/annotation/components/annotationForms/annotationForm.image.js
new file mode 100644
index 0000000..3de2ac5
--- /dev/null
+++ b/animism-align/frontend/app/views/editor/annotation/components/annotationForms/annotationForm.image.js
@@ -0,0 +1,120 @@
+import React, { Component } from 'react'
+
+import { CURTAIN_COLOR_SELECT_OPTIONS, IMAGE_INLINE_SIZE_OPTIONS } from 'app/constants'
+import { Select, Checkbox, TextInput } from 'app/common'
+import { AnnotationFormFullscreen } from './annotationForm.utility'
+import { makeMediaItems, makeGalleryItems } from 'app/utils/annotation.utils'
+
+export const AnnotationFormImage = ({ annotation, media, handleSettingsSelect, handleSettingsChange }) => {
+  if (!media.lookup) return <div />
+  const image_list_items = makeMediaItems(media, ['image', 'gallery'])
+  const { gallery_items, thumbnail } = makeGalleryItems(annotation, media)
+  console.log(annotation)
+  return (
+    <div className='options'>
+      <Select
+        name='media_id'
+        className="media_id"
+        selected={annotation.settings.media_id}
+        options={image_list_items}
+        defaultOption='Choose an image'
+        onChange={handleSettingsSelect}
+      />
+
+      {gallery_items && (
+        <Select
+          name='frame_index'
+          selected={annotation.settings.frame_index}
+          options={gallery_items}
+          defaultOption='Choose an image'
+          onChange={handleSettingsSelect}
+        />
+      )}
+
+      {thumbnail && (
+        <img src={thumbnail.url} />
+      )}
+
+      <Checkbox
+        label="Fullscreen"
+        name="fullscreen"
+        checked={annotation.settings.fullscreen}
+        onChange={handleSettingsSelect}
+      />
+
+      <Select
+        title='Color'
+        name='color'
+        selected={annotation.settings.color}
+        options={CURTAIN_COLOR_SELECT_OPTIONS}
+        defaultOption='Pick a color'
+        onChange={handleSettingsSelect}
+      />
+
+      {(annotation.settings.fullscreen) && (
+        <div>
+          <Checkbox
+            label="Hide inline image"
+            name="hide_poster_inline"
+            checked={annotation.settings.hide_poster_inline}
+            onChange={handleSettingsSelect}
+          />
+          <Select
+            title='Inline size'
+            name='inline_size'
+            selected={annotation.settings.inline_size}
+            options={IMAGE_INLINE_SIZE_OPTIONS}
+            defaultOption='Pick a size'
+            onChange={handleSettingsSelect}
+          />
+          <Checkbox
+            label="Hide speaker icon"
+            name="hide_speaker_icon"
+            checked={annotation.settings.hide_speaker_icon}
+            onChange={handleSettingsSelect}
+          />
+          <Select
+            title='Inline background color'
+            name='inline_color'
+            selected={annotation.settings.inline_color}
+            options={CURTAIN_COLOR_SELECT_OPTIONS}
+            defaultOption='Pick a color'
+            onChange={handleSettingsSelect}
+          />
+        </div>
+      )}
+
+      <Checkbox
+        label="Hide caption"
+        name="hide_caption"
+        checked={annotation.settings.hide_caption}
+        onChange={handleSettingsSelect}
+      />
+
+      <Checkbox
+        label="Hide in transcript"
+        name="hide_in_transcript"
+        checked={annotation.settings.hide_in_transcript}
+        onChange={handleSettingsSelect}
+      />
+
+      <TextInput
+        title="Override start time"
+        name="override_start_ts"
+        className="number"
+        placeholder="0:00"
+        data={annotation.settings}
+        onChange={handleSettingsChange}
+        autoComplete="off"
+      />
+
+      {(annotation.settings.fullscreen && !annotation.settings.inline) && (
+        <AnnotationFormFullscreen
+          annotation={annotation}
+          handleSettingsChange={handleSettingsChange}
+          handleSettingsSelect={handleSettingsSelect}
+        />
+      )}
+    </div>
+  )
+}
diff --git a/animism-align/frontend/app/views/editor/annotation/components/annotationForms/annotationForm.text.js b/animism-align/frontend/app/views/editor/annotation/components/annotationForms/annotationForm.text.js
new file mode 100644
index 0000000..8bc7675
--- /dev/null
+++ b/animism-align/frontend/app/views/editor/annotation/components/annotationForms/annotationForm.text.js
@@ -0,0 +1,153 @@
+import React, { Component } from 'react'
+
+import {
+  CURTAIN_COLOR_SELECT_OPTIONS,
+  CURTAIN_STYLE_SELECT_OPTIONS,
+  BLACK_WHITE_SELECT_OPTIONS,
+  IMAGE_BACKGROUND_SIZE_OPTIONS,
+} from 'app/constants'
+import { Select, Checkbox, TextInput, LabelDescription } from 'app/common'
+import { AnnotationFormFullscreen } from './annotationForm.utility'
+import { makeMediaItems } from 'app/utils/annotation.utils'
+
+export const AnnotationFormSectionHeading = ({ annotation, media, handleSettingsSelect, handleSettingsChange }) => {
+  const image_list_items = makeMediaItems(media, ['image', 'video', 'gallery'])
+  return (
+    <div className='options'>
+      <Checkbox
+        label="Hidden"
+        name="hidden"
+        checked={annotation.settings.hidden}
+        onChange={handleSettingsSelect}
+      />
+      <Select
+        title='Background Color'
+        name='color'
+        selected={annotation.settings.color}
+        options={BLACK_WHITE_SELECT_OPTIONS}
+        defaultOption='Pick a color'
+        onChange={handleSettingsSelect}
+      />
+      <Select
+        title='Cover image'
+        name='media_id'
+        className="media_id"
+        selected={annotation.settings.media_id}
+        options={image_list_items}
+        defaultOption='Choose an image'
+        onChange={handleSettingsSelect}
+      />
+      <Select
+        title='Cover style'
+        name='cover_style'
+        className="cover_style"
+        selected={annotation.settings.cover_style}
+        options={IMAGE_BACKGROUND_SIZE_OPTIONS}
+        defaultOption='Cover image caption style'
+        onChange={handleSettingsSelect}
+      />
+      <LabelDescription>
+        {'Background color for section'}
+      </LabelDescription>
+      <Select
+        title='Transition Color'
+        name='transition_color'
+        selected={annotation.settings.transition_color}
+        options={CURTAIN_COLOR_SELECT_OPTIONS}
+        defaultOption='Pick a color'
+        onChange={handleSettingsSelect}
+      />
+      <LabelDescription>
+        {'Player will fade from this color when section begins'}
+      </LabelDescription>
+      {!annotation.settings.no_audio &&
+        <div>
+          <Select
+            title='Section Nav Color'
+            name='section_nav_color'
+            selected={annotation.settings.section_nav_color}
+            options={BLACK_WHITE_SELECT_OPTIONS}
+            defaultOption='Pick a color'
+            onChange={handleSettingsSelect}
+          />
+          <LabelDescription>
+            {'Section nav thumbnail icon color'}
+          </LabelDescription>
+        </div>
+      }
+      <Checkbox
+        label="Section does not have audio"
+        name="no_audio"
+        checked={annotation.settings.no_audio}
+        onChange={handleSettingsSelect}
+      />
+      <LabelDescription>
+        {'Check if this is a text-only section'}
+      </LabelDescription>
+    </div>
+  )
+}
+
+export const AnnotationFormTextPlate = ({ annotation, handleSettingsSelect, handleSettingsChange }) => {
+  return (
+    <div className='options'>
+      <Select
+        title='Color'
+        name='color'
+        selected={annotation.settings.color}
+        options={CURTAIN_COLOR_SELECT_OPTIONS}
+        defaultOption='Pick a color'
+        onChange={handleSettingsSelect}
+      />
+      <Select
+        title='Curtain style'
+        name='transition_color'
+        selected={annotation.settings.transition_color}
+        options={CURTAIN_STYLE_SELECT_OPTIONS}
+        defaultOption='Pick a style'
+        onChange={handleSettingsSelect}
+      />
+      <AnnotationFormFullscreen
+        annotation={annotation}
+        handleSettingsChange={handleSettingsChange}
+        handleSettingsSelect={handleSettingsSelect}
+      />
+    </div>
+  )
+}
+
+export const AnnotationFormSubtitle = ({ annotation, handleSettingsSelect, handleSettingsChange }) => {
+  return (
+    <div className='options'>
+      <Select
+        title='Color'
+        name='color'
+        selected={annotation.settings.color}
+        options={CURTAIN_COLOR_SELECT_OPTIONS}
+        defaultOption='Pick a color'
+        onChange={handleSettingsSelect}
+      />
+
+      <AnnotationFormFullscreen
+        annotation={annotation}
+        handleSettingsChange={handleSettingsChange}
+        handleSettingsSelect={handleSettingsSelect}
+      />
+    </div>
+  )
+}
+
+export const AnnotationFormFootnote = ({ annotation, handleSettingsSelect, handleSettingsChange }) => {
+  return (
+    <div className='options'>
+      <TextInput
+        title="Actual Timestamp"
+        name="actual_ts"
+        placeholder="0:00"
+        data={annotation.settings}
+        onChange={handleSettingsChange}
+        autoComplete="off"
+      />
+    </div>
+  )
+}
diff --git a/animism-align/frontend/app/views/editor/annotation/components/annotationForms/annotationForm.utility.js b/animism-align/frontend/app/views/editor/annotation/components/annotationForms/annotationForm.utility.js
new file mode 100644
index 0000000..7e823cc
--- /dev/null
+++ b/animism-align/frontend/app/views/editor/annotation/components/annotationForms/annotationForm.utility.js
@@ -0,0 +1,172 @@
+import React, { Component } from 'react'
+
+import { timestamp } from 'app/utils'
+import { TextInput, LabelDescription, Select, Checkbox } from 'app/common'
+import { CURTAIN_COLOR_SELECT_OPTIONS, CURTAIN_STYLE_SELECT_OPTIONS } from 'app/constants'
+import { annotationFadeTimings } from 'app/utils/annotation.utils'
+import { makeMediaItems } from 'app/utils/annotation.utils'
+
+export const AnnotationFormIntro = ({ annotation, media, handleSettingsChange, handleSettingsSelect }) => {
+  if (!media.lookup) return <div />
+  const image_list_items = makeMediaItems(media, 'file')
+  return (
+    <div className='options'>
+      <Select
+        name='media_id'
+        className="media_id"
+        selected={annotation.settings.media_id}
+        options={image_list_items}
+        defaultOption='Choose a file'
+        onChange={handleSettingsSelect}
+      />
+
+      <TextInput
+        title="Title"
+        name="title"
+        placeholder="Enter title or leave blank"
+        data={annotation.settings}
+        onChange={handleSettingsChange}
+        autoComplete="off"
+      />
+
+      <TextInput
+        title="Subtitle"
+        name="subtitle"
+        placeholder="Enter subtitle or leave blank"
+        data={annotation.settings}
+        onChange={handleSettingsChange}
+        autoComplete="off"
+      />
+
+      <Select
+        title='Color'
+        name='color'
+        selected={annotation.settings.color}
+        options={CURTAIN_COLOR_SELECT_OPTIONS}
+        defaultOption='Pick a color'
+        onChange={handleSettingsSelect}
+      />
+
+      <TextInput
+        title="Actual start time"
+        name="intro_start_ts"
+        placeholder="0:00"
+        data={annotation.settings}
+        onChange={handleSettingsChange}
+        autoComplete="off"
+      />
+
+      <LabelDescription>
+        {'Timestamp where voiceover starts, after any intro sound effect.'}
+      </LabelDescription>
+
+      <AnnotationFormFullscreen
+        annotation={annotation}
+        handleSettingsChange={handleSettingsChange}
+        handleSettingsSelect={handleSettingsSelect}
+      />
+    </div>
+  )
+}
+
+export const AnnotationFormCurtain = ({ annotation, handleSettingsChange, handleSettingsSelect }) => {
+  return (
+    <div className='options'>
+      <TextInput
+        title="Curtain text"
+        name="curtain_text"
+        placeholder="Enter text or leave blank"
+        data={annotation.settings}
+        onChange={handleSettingsChange}
+        autoComplete="off"
+      />
+
+      <Select
+        title='Color'
+        name='color'
+        selected={annotation.settings.color}
+        options={CURTAIN_COLOR_SELECT_OPTIONS}
+        defaultOption='Pick a color'
+        onChange={handleSettingsSelect}
+      />
+
+      <Select
+        title='Style'
+        name='curtain_style'
+        selected={annotation.settings.curtain_style}
+        options={CURTAIN_STYLE_SELECT_OPTIONS}
+        defaultOption='Pick a style'
+        onChange={handleSettingsSelect}
+      />
+
+      <Checkbox
+        label="Contains flashing light"
+        name="flashing_light_warning"
+        checked={annotation.settings.flashing_light_warning}
+        onChange={handleSettingsSelect}
+      />
+
+      <AnnotationFormFullscreen
+        alwaysAccessible
+        annotation={annotation}
+        handleSettingsChange={handleSettingsChange}
+        handleSettingsSelect={handleSettingsSelect}
+      />
+    </div>
+  )
+}
+
+export const AnnotationFormFullscreen = ({ annotation, handleSettingsChange, handleSettingsSelect }) => {
+  const {
+    fadeInDuration, fadeOutDuration, duration,
+    start_ts, end_ts, fade_in_end_ts, fade_out_start_ts,
+  } = annotationFadeTimings(annotation)
+  return (
+    <div>
+      <TextInput
+        title="Total duration"
+        name="duration"
+        className="number"
+        placeholder="0:00"
+        data={annotation.settings}
+        onChange={handleSettingsChange}
+        autoComplete="off"
+      />
+      <LabelDescription>
+        {duration}
+        {' seconds, ends at '}
+        {timestamp(end_ts)}
+      </LabelDescription>
+
+      <TextInput
+        title="Fade in duration"
+        name="fade_in_duration"
+        className="number"
+        placeholder="0:00"
+        data={annotation.settings}
+        onChange={handleSettingsChange}
+        autoComplete="off"
+      />
+      <LabelDescription>
+        {fadeInDuration}
+        {' seconds, ends at '}
+        {timestamp(fade_in_end_ts)}
+      </LabelDescription>
+
+      <TextInput
+        title="Fade out duration"
+        name="fade_out_duration"
+        className="number"
+        placeholder="0:00"
+        data={annotation.settings}
+        onChange={handleSettingsChange}
+        autoComplete="off"
+      />
+      <LabelDescription>
+        {fadeOutDuration}
+        {' seconds, starts at '}
+        {timestamp(fade_out_start_ts)}
+      </LabelDescription>
+    </div>
+  )
+}
diff --git a/animism-align/frontend/app/views/editor/annotation/components/annotationForms/annotationForm.video.js b/animism-align/frontend/app/views/editor/annotation/components/annotationForms/annotationForm.video.js
new file mode 100644
index 0000000..dd5f640
--- /dev/null
+++ b/animism-align/frontend/app/views/editor/annotation/components/annotationForms/annotationForm.video.js
@@ -0,0 +1,160 @@
+import React, { Component } from 'react'
+
+import { CURTAIN_COLOR_SELECT_OPTIONS, IMAGE_BACKGROUND_SIZE_OPTIONS } from 'app/constants'
+import { Select, Checkbox, TextInput, LabelDescription } from 'app/common'
+import { AnnotationFormFullscreen } from './annotationForm.utility'
+import { makeMediaItems } from 'app/utils/annotation.utils'
+
+export const AnnotationFormVideo = ({ annotation, media, handleSettingsSelect, handleSettingsChange }) => {
+  if (!media.lookup) return <div />
+  const video_list_items = makeMediaItems(media, ['video'])
+  return (
+    <div className='options'>
+      <Select
+        name='media_id'
+        className="media_id"
+        selected={annotation.settings.media_id}
+        options={video_list_items}
+        defaultOption='Choose a video'
+        onChange={handleSettingsSelect}
+      />
+      <Checkbox
+        label="Autoplay"
+        name="autoplay"
+        checked={annotation.settings.autoplay}
+        onChange={handleSettingsSelect}
+      />
+      <Checkbox
+        label="Fullscreen"
+        name="fullscreen"
+        checked={annotation.settings.fullscreen}
+        onChange={handleSettingsSelect}
+      />
+      <Checkbox
+        label="Inline"
+        name="inline"
+        checked={annotation.settings.inline}
+        onChange={handleSettingsSelect}
+      />
+      <Checkbox
+        label="Loop"
+        name="loop"
+        checked={annotation.settings.loop}
+        onChange={handleSettingsSelect}
+      />
+      <Checkbox
+        label="Unmute"
+        name="unmuted"
+        checked={annotation.settings.unmuted}
+        onChange={handleSettingsSelect}
+      />
+      {annotation.settings.inline && (
+        <Checkbox
+          label="Hide Controls"
+          name="hide_controls"
+          checked={annotation.settings.hide_controls}
+          onChange={handleSettingsSelect}
+        />
+      )}
+      {annotation.settings.inline && (
+        <Checkbox
+          label="Show poster image"
+          name="poster"
+          checked={annotation.settings.poster}
+          onChange={handleSettingsSelect}
+        />
+      )}
+      {(annotation.settings.fullscreen && !annotation.settings.inline) && (
+        <Checkbox
+          label="Hide inline video poster"
+          name="hide_poster_inline"
+          checked={annotation.settings.hide_poster_inline}
+          onChange={handleSettingsSelect}
+        />
+      )}
+      {(annotation.settings.fullscreen && !annotation.settings.inline) && (
+        <Checkbox
+          label="Can play full video at end of section"
+          name="can_play_full_video"
+          checked={annotation.settings.can_play_full_video}
+          onChange={handleSettingsSelect}
+        />
+      )}
+      <Checkbox
+        label="Hide in transcript"
+        name="hide_in_transcript"
+        checked={annotation.settings.hide_in_transcript}
+        onChange={handleSettingsSelect}
+      />
+      <Select
+        title='Color'
+        name='color'
+        selected={annotation.settings.color}
+        options={CURTAIN_COLOR_SELECT_OPTIONS}
+        defaultOption='Pick a color'
+        onChange={handleSettingsSelect}
+      />
+      <Select
+        title='Poster Size'
+        name='poster_size'
+        selected={annotation.settings.poster_size}
+        options={IMAGE_BACKGROUND_SIZE_OPTIONS}
+        defaultOption='Select size'
+        onChange={handleSettingsSelect}
+      />
+      <Select
+        title='Poster background color'
+        name='poster_background_color'
+        selected={annotation.settings.poster_background_color}
+        options={CURTAIN_COLOR_SELECT_OPTIONS}
+        defaultOption='Pick a color'
+        onChange={handleSettingsSelect}
+      />
+      <TextInput
+        title="Video start time"
+        name="video_start_ts"
+        className="number"
+        placeholder="0:00"
+        data={annotation.settings}
+        onChange={handleSettingsChange}
+        autoComplete="off"
+      />
+      <LabelDescription>
+        {'Auto-advances the video to this point when starting'}
+      </LabelDescription>
+
+      {(annotation.settings.fullscreen && !annotation.settings.inline) && (
+        <AnnotationFormFullscreen
+          annotation={annotation}
+          handleSettingsChange={handleSettingsChange}
+          handleSettingsSelect={handleSettingsSelect}
+        />
+      )}
+    </div>
+  )
+}
+
+export const AnnotationFormVideoSetVolume = ({ annotation, handleSettingsChange }) => {
+  return (
+    <div className='options'>
+      <TextInput
+        title="Volume"
+        name="volume"
+        className="number"
+        placeholder="1.0"
+        data={annotation.settings}
+        onChange={handleSettingsChange}
+        autoComplete="off"
+      />
+      <TextInput
+        title="Fade Time"
+        name="duration"
+        className="number"
+        placeholder="0:01"
+        data={annotation.settings}
+        onChange={handleSettingsChange}
+        autoComplete="off"
+      />
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/animism-align/frontend/app/views/editor/annotation/components/annotationForms/index.js b/animism-align/frontend/app/views/editor/annotation/components/annotationForms/index.js
new file mode 100644
index 0000000..8a1be48
--- /dev/null
+++ b/animism-align/frontend/app/views/editor/annotation/components/annotationForms/index.js
@@ -0,0 +1,46 @@
+import {
+  AnnotationFormSectionHeading,
+  AnnotationFormTextPlate,
+  AnnotationFormFootnote,
+  AnnotationFormSubtitle,
+} from './annotationForm.text'
+
+import {
+  AnnotationFormVideo,
+  AnnotationFormVideoSetVolume,
+} from './annotationForm.video'
+
+import {
+  AnnotationFormImage,
+} from './annotationForm.image'
+
+import {
+  AnnotationFormGallery,
+  AnnotationFormGalleryAdvance,
+} from './annotationForm.gallery'
+
+import {
+  AnnotationFormCurtain,
+  AnnotationFormIntro,
+} from './annotationForm.utility'
+
+export const annotationFormLookup = {
+  section_heading: AnnotationFormSectionHeading,
+  text_plate: AnnotationFormTextPlate,
+  footnote: AnnotationFormFootnote,
+  subtitle: AnnotationFormSubtitle,
+
+  image: AnnotationFormImage,
+  video: AnnotationFormVideo,
+  video_set_volume: AnnotationFormVideoSetVolume,
+
+  gallery: AnnotationFormGallery,
+  carousel: AnnotationFormGallery,
+  grid: AnnotationFormGallery,
+  vitrine: AnnotationFormGallery,
+
+  gallery_advance: AnnotationFormGalleryAdvance,
+
+  intro: AnnotationFormIntro,
+  curtain: AnnotationFormCurtain,
+}
-- 
cgit v1.2.3-70-g09d2