From 41052dd5b95cf2813662d8201b206ad2af78da40 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 23 Sep 2020 14:16:16 +0200 Subject: fixing heights of carousels. set media title from fullscreen video --- .../components.fullscreen/fullscreen.video.js | 5 ----- .../viewer/player/components.inline/inline.text.js | 21 +++++++++------------ .../viewer/player/components.inline/inline.video.js | 13 +++++++------ .../views/viewer/player/components.media/media.css | 9 ++++++++- .../app/views/viewer/player/player.fullscreen.js | 9 ++++++++- .../app/views/viewer/player/player.transcript.css | 2 +- 6 files changed, 33 insertions(+), 26 deletions(-) (limited to 'animism-align/frontend/app/views/viewer/player') 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} /> -
-
actions.viewer.toggleComponent('nav')}> - {item.title} -
-
) } 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 ( -
- {ROMAN_NUMERALS[paragraph.sectionIndex]}{'. '}{text} +
+ + {ROMAN_NUMERALS[paragraph.sectionIndex]} + {'. '} + {paragraph.annotations[0].text} +
) } -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 ( -
+
{text}
) 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 (
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; } -- cgit v1.2.3-70-g09d2