diff options
4 files changed, 35 insertions, 11 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 b06916f..3d52db8 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 @@ -59,12 +59,22 @@ export const AnnotationFormImage = ({ annotation, media, handleSettingsSelect, h /> {(annotation.settings.fullscreen && !annotation.settings.inline) && ( - <Checkbox - label="Hide inline image" - name="hide_poster_inline" - checked={annotation.settings.hide_poster_inline} - onChange={handleSettingsSelect} - /> + <div> + <Checkbox + label="Hide inline image" + name="hide_poster_inline" + checked={annotation.settings.hide_poster_inline} + 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 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 880d17b..24723a8 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 @@ -1,5 +1,6 @@ import React, { Component } from 'react' +import { CURTAIN_COLOR_LOOKUP } from 'app/constants' import { SpeakerIcon } from '../../nav/viewer.icons' import { MediaCitation } from '../components.media' @@ -9,7 +10,7 @@ export const MediaImage = ({ paragraph, media, currentParagraph, currentAnnotati const item = media.lookup[annotation.settings.media_id] if (!item) return <div>Media not found: {annotation.settings.media_id}</div> - let url, captionItem; + let url, captionItem, colorName; if (item.type === 'gallery') { const index = parseInt(annotation.settings.frame_index) const frame_id = item.settings.image_order[index] @@ -20,13 +21,20 @@ export const MediaImage = ({ paragraph, media, currentParagraph, currentAnnotati } url = frame.url captionItem = item.settings.caption_lookup[frame_id] || item + colorName = annotation.settings.inline_color || annotation.settings.color || 'white' } else { url = item.settings.display.url captionItem = item + colorName = annotation.settings.inline_color || annotation.settings.color || 'white' } + if (annotation.settings.hide_caption) { captionItem = null } + const color = CURTAIN_COLOR_LOOKUP[colorName] + const style = { + backgroundColor: color.backgroundColor, + } // "fullscreen-style inline images" // if (annotation.settings.fullscreen) { @@ -41,7 +49,7 @@ export const MediaImage = ({ paragraph, media, currentParagraph, currentAnnotati // } else { return ( <div className="media image" onClick={e => onAnnotationClick(e, paragraph, annotation)}> - <div className="image-container"> + <div className="image-container" style={style}> <img src={url} /> <div className="speaker-icon">{SpeakerIcon}</div> </div> diff --git a/animism-align/frontend/app/views/viewer/player/components.inline/inline.video.js b/animism-align/frontend/app/views/viewer/player/components.inline/inline.video.js index 513293a..f831078 100644 --- a/animism-align/frontend/app/views/viewer/player/components.inline/inline.video.js +++ b/animism-align/frontend/app/views/viewer/player/components.inline/inline.video.js @@ -36,9 +36,14 @@ export class MediaVideo extends Component { // if this is a fullscreen video, display the poster image if (annotation.settings.fullscreen && !annotation.settings.inline) { - const color = CURTAIN_COLOR_LOOKUP[annotation.settings.poster_background_color || annotation.settings.color] || CURTAIN_COLOR_LOOKUP.white - style.color = color.textColor - style.backgroundColor = color.backgroundColor + const colorName = annotation.settings.poster_background_color || annotation.settings.color || 'white' + const color = CURTAIN_COLOR_LOOKUP[colorName] + const elementStyle = { + color: color.textColor, + backgroundColor: color.backgroundColor, + } + style.color = color.textColor, + style.backgroundColor = color.backgroundColor, style.backgroundImage = 'url(' + posterURL(item) + ')' if (annotation.settings.poster_size) { style.backgroundSize = annotation.settings.poster_size diff --git a/animism-align/frontend/app/views/viewer/player/components.media/media.css b/animism-align/frontend/app/views/viewer/player/components.media/media.css index 8cfeb54..ffb3988 100644 --- a/animism-align/frontend/app/views/viewer/player/components.media/media.css +++ b/animism-align/frontend/app/views/viewer/player/components.media/media.css @@ -95,6 +95,7 @@ /* carousel */ .inline-element .carousel-container { + padding-top: 1.5rem; margin-bottom: 1.5rem; position: relative; } |