diff options
Diffstat (limited to 'animism-align/frontend/app/views/viewer/player')
6 files changed, 33 insertions, 26 deletions
diff --git a/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.video.js b/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.video.js index d6f95ed..a196ee5 100644 --- a/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.video.js +++ b/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.video.js @@ -118,11 +118,6 @@ class FullscreenVideo extends Component { onMouseDown={this.handleScrubDotMouseDown} /> </div> - <div className='video-nav'> - <div className='video-title' onClick={() => actions.viewer.toggleComponent('nav')}> - {item.title} - </div> - </div> </div> ) } diff --git a/animism-align/frontend/app/views/viewer/player/components.inline/inline.text.js b/animism-align/frontend/app/views/viewer/player/components.inline/inline.text.js index 18b026f..d978465 100644 --- a/animism-align/frontend/app/views/viewer/player/components.inline/inline.text.js +++ b/animism-align/frontend/app/views/viewer/player/components.inline/inline.text.js @@ -56,27 +56,24 @@ export const Pullquote = ({ paragraph, currentParagraph, currentAnnotation, onAn ) } -export const SectionHeading = ({ paragraph, currentParagraph, currentAnnotation, onAnnotationClick }) => { +export const SectionHeading = ({ paragraph }) => { if (paragraph.hidden) return null - let className = currentParagraph ? 'section_heading current' : 'section_heading' - const text = paragraph.annotations.map(annotation => annotation.text).join(' ') return ( - <div - className={className} - > - <span>{ROMAN_NUMERALS[paragraph.sectionIndex]}{'. '}{text}</span> + <div className='section_heading'> + <span> + {ROMAN_NUMERALS[paragraph.sectionIndex]} + {'. '} + {paragraph.annotations[0].text} + </span> </div> ) } -export const HeadingText = ({ paragraph, currentParagraph, currentAnnotation, onAnnotationClick }) => { +export const HeadingText = ({ paragraph }) => { if (paragraph.hidden) return null - let className = currentParagraph ? 'section_heading current' : 'section_heading' const text = paragraph.annotations.map(annotation => annotation.text).join(' ') return ( - <div - className={className} - > + <div className='section_heading'> <span>{text}</span> </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 050ade5..cf3043b 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 @@ -20,6 +20,12 @@ export const MediaVideo = ({ paragraph, media, currentParagraph, onAnnotationCli height: height + 32, backgroundColor: color.backgroundColor, } + const poster = annotation.settings.poster ? { + backgroundImage: 'url(' + item.settings.video.thumbnail_url + ')', + backgroundSize: '50%', + backgroundPosition: 'center center', + backgroundRepeat: 'no-repeat', + } : {} // console.log(annotation.settings) return ( <div @@ -33,12 +39,7 @@ export const MediaVideo = ({ paragraph, media, currentParagraph, onAnnotationCli responsive={true} controls={false} byline={false} - style={{ - backgroundImage: 'url(' + item.settings.video.thumbnail_url + ')', - backgroundSize: '50%', - backgroundPosition: 'center center', - backgroundRepeat: 'no-repeat', - }} + style={poster} /> </div> <MediaCitation media={item} /> 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 7bb3038..32d35d0 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 @@ -98,11 +98,18 @@ margin-top: 0.5rem; margin-bottom: 1.5rem; /*padding: 1rem;*/ - height: calc(100vh - 1rem); position: relative; } .carousel-items { width: 100%; +} +.player-transcript .carousel-items { + align-items: center; +} +.viewer-fullscreen .carousel-container { + height: calc(100vh - 1rem); +} +.viewer-fullscreen .carousel-items { height: calc(100vh - 9rem); } .carousel-item { diff --git a/animism-align/frontend/app/views/viewer/player/player.fullscreen.js b/animism-align/frontend/app/views/viewer/player/player.fullscreen.js index 23648b9..24fc52e 100644 --- a/animism-align/frontend/app/views/viewer/player/player.fullscreen.js +++ b/animism-align/frontend/app/views/viewer/player/player.fullscreen.js @@ -22,7 +22,7 @@ class PlayerFullscreen extends Component { } setCurrentElements() { - const { audio, timeline, currentSection } = this.props + const { audio, timeline, currentSection, media } = this.props const { play_ts } = audio const elements = timeline.filter(element => ( floatInRange(element.start_ts, play_ts, element.fade_out_start_ts + 0.1) @@ -35,8 +35,15 @@ class PlayerFullscreen extends Component { } else { actions.viewer.setNavStyle('white') } + if (lastElement.type === 'video') { + const item = media.lookup[lastElement.settings.media_id] + actions.viewer.setMediaTitle(item.title) + } else { + actions.viewer.setMediaTitle(null) + } } else { actions.viewer.setNavStyle(currentSection.color) + actions.viewer.setMediaTitle(null) } this.setState({ elements }) } 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 1de88c7..03a73ac 100644 --- a/animism-align/frontend/app/views/viewer/player/player.transcript.css +++ b/animism-align/frontend/app/views/viewer/player/player.transcript.css @@ -196,7 +196,7 @@ .player-transcript .media.fullscreen .img { position: relative; width: 100vw; - height: 100vh; + height: calc(80vh - 7rem); background-size: cover; background-position: center center; } |