diff options
Diffstat (limited to 'animism-align/frontend/app/views/viewer')
3 files changed, 30 insertions, 8 deletions
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 cf3043b..a5b3757 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 @@ -4,6 +4,7 @@ import VimeoPlayer from 'app/utils/vendor/vimeo' import { CURTAIN_COLOR_LOOKUP } from 'app/constants' import { SpeakerIcon } from '../../nav/viewer.icons' import { MediaCitation } from '../components.media' +import { posterURL } from 'app/utils/annotation.utils' export const MediaVideo = ({ paragraph, media, currentParagraph, onAnnotationClick }) => { if (!media.lookup) return <div /> @@ -20,17 +21,25 @@ export const MediaVideo = ({ paragraph, media, currentParagraph, onAnnotationCli height: height + 32, backgroundColor: color.backgroundColor, } + + // if this is a fullscreen video, display the poster image + if (annotation.settings.fullscreen && !annotation.settings.inline) { + style.backgroundImage = 'url(' + posterURL(item) + ')' + return ( + <div className={className}> + <div className='videoPoster' style={style}> + <div className="speaker-icon">{SpeakerIcon}</div> + </div> + <MediaCitation media={item} /> + </div> + ) + } + const poster = annotation.settings.poster ? { - backgroundImage: 'url(' + item.settings.video.thumbnail_url + ')', - backgroundSize: '50%', - backgroundPosition: 'center center', - backgroundRepeat: 'no-repeat', + backgroundImage: 'url(' + posterURL(item) + ')', } : {} - // console.log(annotation.settings) return ( - <div - className={className} - > + <div className={className}> <div className='videoPlayer' style={style}> <VimeoPlayer video={item.url} 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 9b6e3da..c0eb1ea 100644 --- a/animism-align/frontend/app/views/viewer/player/player.transcript.css +++ b/animism-align/frontend/app/views/viewer/player/player.transcript.css @@ -221,6 +221,15 @@ height: 100%; padding: 0 !important; } +.player-transcript .media.video .videoPoster { + cursor: pointer; + background-size: cover; + background-position: center center; + background-repeat: no-repeat; + width: 100%; + height: calc(100vh - 15rem) !important; + padding: 1rem 0; +} .player-transcript .media.image .speaker-icon { bottom: 0; right: 0; diff --git a/animism-align/frontend/app/views/viewer/viewer.actions.js b/animism-align/frontend/app/views/viewer/viewer.actions.js index f3e3465..3fbe47b 100644 --- a/animism-align/frontend/app/views/viewer/viewer.actions.js +++ b/animism-align/frontend/app/views/viewer/viewer.actions.js @@ -128,6 +128,10 @@ export const loadSections = () => dispatch => { if ((FULLSCREEN_UTILITY_ANNOTATION_TYPES.has(annotation.type) || annotation.settings.fullscreen) && !annotation.settings.inline) { const event = makeFullscreenEvent(eventIndex++, annotation) currentSection.fullscreenTimeline.push(event) + // for videos, we probably want to show a poster image + if (annotation.type === 'video' && !annotation.settings.hide_poster_inline) { + sectionTextAnnotationOrder.push(annotation.id) + } } // add text annotations to section annotation order |