diff options
2 files changed, 17 insertions, 2 deletions
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 12a322c..f4cf4c5 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 @@ -92,6 +92,14 @@ export const AnnotationFormVideo = ({ annotation, media, handleSettingsSelect, h 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" 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 86fc0df..85af05e 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 @@ -16,7 +16,7 @@ export const MediaVideo = ({ paragraph, media, currentParagraph, onAnnotationCli const color = CURTAIN_COLOR_LOOKUP[annotation.settings.color] || CURTAIN_COLOR_LOOKUP.white const width = window.innerWidth const height = window.innerHeight - (17 * 16) - const style = { + let style = { color: color.textColor, height: height + 32, backgroundColor: color.backgroundColor, @@ -24,13 +24,20 @@ export const MediaVideo = ({ paragraph, media, currentParagraph, onAnnotationCli // 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 style.backgroundImage = 'url(' + posterURL(item) + ')' if (annotation.settings.poster_size) { style.backgroundSize = annotation.settings.poster_size } return ( <div className={className}> - <div className='videoPoster' style={style}> + <div + className='videoPoster' + style={style} + onClick={e => onAnnotationClick(e, paragraph, annotation)} + > <div className="speaker-icon">{SpeakerIcon}</div> </div> <MediaCitation media={item} /> |