diff options
Diffstat (limited to 'animism-align/frontend')
8 files changed, 34 insertions, 4 deletions
diff --git a/animism-align/frontend/app/constants.js b/animism-align/frontend/app/constants.js index b6b3bf2..647efbc 100644 --- a/animism-align/frontend/app/constants.js +++ b/animism-align/frontend/app/constants.js @@ -99,6 +99,13 @@ export const CURTAIN_COLOR_LOOKUP = CURTAIN_COLORS.reduce((a,b) => { return a }, {}) +export const IMAGE_BACKGROUND_SIZE_OPTIONS = [ + { label: 'cover', name: 'cover' }, + { label: 'contain', name: 'contain' }, + { label: '90% width', name: '90% auto' }, + { label: '90% height', name: 'auto 90%' }, +] + export const DISPLAY_SIZE = 2000 export const DISPLAY_QUALITY= 80 export const THUMBNAIL_SIZE = 320 diff --git a/animism-align/frontend/app/utils/annotation.utils.js b/animism-align/frontend/app/utils/annotation.utils.js index 41e0e3b..d76f473 100644 --- a/animism-align/frontend/app/utils/annotation.utils.js +++ b/animism-align/frontend/app/utils/annotation.utils.js @@ -20,6 +20,9 @@ export const thumbnailURL = media => { // console.log(media) switch (media.type) { case 'video': + if (media.settings.poster) { + return media.settings.poster.url + } return media.settings.video.thumbnail_url case 'image': 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 0199b46..45b538b 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 @@ -1,6 +1,6 @@ import React, { Component } from 'react' -import { CURTAIN_COLOR_SELECT_OPTIONS } from 'app/constants' +import { CURTAIN_COLOR_SELECT_OPTIONS, IMAGE_BACKGROUND_SIZE_OPTIONS } from 'app/constants' import { Select, Checkbox } from 'app/common' import { AnnotationFormFullscreen } from './annotationForm.utility' @@ -78,6 +78,14 @@ export const AnnotationFormVideo = ({ annotation, media, handleSettingsSelect, h 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} + /> {(annotation.settings.fullscreen && !annotation.settings.inline) && ( <AnnotationFormFullscreen diff --git a/animism-align/frontend/app/views/media/containers/media.index.js b/animism-align/frontend/app/views/media/containers/media.index.js index 34845d8..da94d3c 100644 --- a/animism-align/frontend/app/views/media/containers/media.index.js +++ b/animism-align/frontend/app/views/media/containers/media.index.js @@ -76,8 +76,10 @@ class MediaIndex extends Component { {order.filter(id => lookup[id].type === 'image').map(id => <MediaItem key={id} data={lookup[id]} />)} <h2>Galleries</h2> {order.filter(id => lookup[id].type === 'gallery').map(id => <GalleryItem key={id} data={lookup[id]} />)} - <h2>Video</h2> - {order.filter(id => lookup[id].type === 'video').map(id => <MediaItem key={id} data={lookup[id]} />)} + <h2>Videos</h2> + {order.filter(id => lookup[id].type === 'video' && !lookup[id].medium.match(/book/i)).map(id => <MediaItem key={id} data={lookup[id]} />)} + <h2>Books</h2> + {order.filter(id => lookup[id].type === 'video' && lookup[id].medium.match(/book/i)).map(id => <MediaItem key={id} data={lookup[id]} />)} <h2>Files</h2> {order.filter(id => lookup[id].type === 'file').map(id => <FileItem key={id} data={lookup[id]} />)} </div> diff --git a/animism-align/frontend/app/views/media/media.css b/animism-align/frontend/app/views/media/media.css index 7e5517d..0705b6c 100644 --- a/animism-align/frontend/app/views/media/media.css +++ b/animism-align/frontend/app/views/media/media.css @@ -7,6 +7,7 @@ .results .cell { margin-bottom: 1rem; margin-right: 1rem; + max-width: 295px; } .results h2 { display: block; @@ -15,6 +16,9 @@ .media .results .meta > div { max-width: 100%; } +.media .results .img img { + max-width: 295px; +} /* new / edit media forms */ 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 a5b3757..86fc0df 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 @@ -25,6 +25,9 @@ export const MediaVideo = ({ paragraph, media, currentParagraph, onAnnotationCli // if this is a fullscreen video, display the poster image if (annotation.settings.fullscreen && !annotation.settings.inline) { 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}> 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 c43c207..45a2670 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 @@ -314,6 +314,7 @@ opacity: 0.0; transition: opacity 0.2s; font-size: 1rem; + z-index: 1; } .video-scrubber.show { opacity: 1.0; diff --git a/animism-align/frontend/app/views/viewer/player/player.transcript.css b/animism-align/frontend/app/views/viewer/player/player.transcript.css index c0eb1ea..77e782c 100644 --- a/animism-align/frontend/app/views/viewer/player/player.transcript.css +++ b/animism-align/frontend/app/views/viewer/player/player.transcript.css @@ -244,7 +244,9 @@ /* footnotes */ -.player-transcript .paragraph.intro_paragraph .footnote { +.player-transcript .paragraph.intro_paragraph .footnote, +.player-transcript .paragraph.blockquote .footnote, +.player-transcript .paragraph.pullquote .footnote { font-size: 2.0rem; position: relative; top: -1.4rem; |