diff options
Diffstat (limited to 'animism-align/frontend/app/views/align/components/annotations/annotationForms')
6 files changed, 0 insertions, 783 deletions
diff --git a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.gallery.js b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.gallery.js deleted file mode 100644 index 0a8b3fb..0000000 --- a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.gallery.js +++ /dev/null @@ -1,132 +0,0 @@ -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/align/components/annotations/annotationForms/annotationForm.image.js b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.image.js deleted file mode 100644 index 3de2ac5..0000000 --- a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.image.js +++ /dev/null @@ -1,120 +0,0 @@ -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/align/components/annotations/annotationForms/annotationForm.text.js b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.text.js deleted file mode 100644 index 8bc7675..0000000 --- a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.text.js +++ /dev/null @@ -1,153 +0,0 @@ -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/align/components/annotations/annotationForms/annotationForm.utility.js b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.utility.js deleted file mode 100644 index 7e823cc..0000000 --- a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.utility.js +++ /dev/null @@ -1,172 +0,0 @@ -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/align/components/annotations/annotationForms/annotationForm.video.js b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.video.js deleted file mode 100644 index dd5f640..0000000 --- a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.video.js +++ /dev/null @@ -1,160 +0,0 @@ -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/align/components/annotations/annotationForms/index.js b/animism-align/frontend/app/views/align/components/annotations/annotationForms/index.js deleted file mode 100644 index 8a1be48..0000000 --- a/animism-align/frontend/app/views/align/components/annotations/annotationForms/index.js +++ /dev/null @@ -1,46 +0,0 @@ -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, -} |