diff options
Diffstat (limited to 'animism-align/frontend/app/views')
2 files changed, 22 insertions, 12 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 3d52db8..3de2ac5 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,6 +1,6 @@ import React, { Component } from 'react' -import { CURTAIN_COLOR_SELECT_OPTIONS } from 'app/constants' +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' @@ -42,13 +42,6 @@ export const AnnotationFormImage = ({ annotation, media, handleSettingsSelect, h onChange={handleSettingsSelect} /> - <Checkbox - label="Inline" - name="inline" - checked={annotation.settings.inline} - onChange={handleSettingsSelect} - /> - <Select title='Color' name='color' @@ -58,7 +51,7 @@ export const AnnotationFormImage = ({ annotation, media, handleSettingsSelect, h onChange={handleSettingsSelect} /> - {(annotation.settings.fullscreen && !annotation.settings.inline) && ( + {(annotation.settings.fullscreen) && ( <div> <Checkbox label="Hide inline image" @@ -67,6 +60,20 @@ export const AnnotationFormImage = ({ annotation, media, handleSettingsSelect, h 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} diff --git a/animism-align/frontend/app/views/viewer/player/components.inline/inline.image.js b/animism-align/frontend/app/views/viewer/player/components.inline/inline.image.js index 24723a8..df30da1 100644 --- a/animism-align/frontend/app/views/viewer/player/components.inline/inline.image.js +++ b/animism-align/frontend/app/views/viewer/player/components.inline/inline.image.js @@ -20,7 +20,10 @@ export const MediaImage = ({ paragraph, media, currentParagraph, currentAnnotati return <div /> } url = frame.url - captionItem = item.settings.caption_lookup[frame_id] || item + captionItem = item.settings.caption_lookup[frame_id] + if (!captionItem.short_caption) { + captionItem = item + } colorName = annotation.settings.inline_color || annotation.settings.color || 'white' } else { url = item.settings.display.url @@ -51,9 +54,9 @@ export const MediaImage = ({ paragraph, media, currentParagraph, currentAnnotati <div className="media image" onClick={e => onAnnotationClick(e, paragraph, annotation)}> <div className="image-container" style={style}> <img src={url} /> - <div className="speaker-icon">{SpeakerIcon}</div> + {!annotation.settings.hide_speaker_icon && <div className="speaker-icon">{SpeakerIcon}</div>} </div> - <MediaCitation media={captionItem} /> + {captionItem && <MediaCitation media={captionItem} />} </div> ) // } |